Add config.js

static/js/config.js

+const MAX_DIST = 3500;
+const MIN_DIST = 500;
+const VID_BLUR_FACTOR = MAX_DIST/16.0; // float
+const TICKER_BLUR_FACTOR = MAX_DIST/32.0; // float

templates/index.html

       </div>
     </div>
   </div>
+  <script src="/static/js/config.js"></script>
   <script src="/static/js/jquery-3.7.1.min.js"></script>
   <script src="/static/js/jquery.marquee.min.js"></script>
   <script src="/static/bootstrap/js/bootstrap.bundle.min.js"></script>
       return 0;
     }
   };
-  const MAX_DIST = 2000;
-  const MIN_DIST = 300;
-  const VID_BLUR_FACTOR = MAX_DIST/16.0; // float
-  const TICKER_BLUR_FACTOR = MAX_DIST/32.0; // float
   async function updateDistance() {
     var dist = await getDistance();
     var vidblur = 0; tickerblur = 0;

templates/progbar.html

       </div>
     </div>
   </div>
+  <script src="/static/js/config.js"></script>
   <script src="/static/js/jquery-3.7.1.min.js"></script>
-  <script src="/static/js/jquery.marquee.min.js"></script>
-  <script src="/static/bootstrap/js/bootstrap.bundle.min.js"></script>
   <script>
     async function getDistance() {
       try {
     async function updateDistance() {
       var dist = await getDistance();
       var bar = document.getElementById("distance-bar");
-      var percentage = dist>2000 ? 100 : parseInt((100.0*dist)/2000.0);
+      var percentage = dist>2000 ? 100 : parseInt((100.0*dist)/MAX_DISTANCE);
       bar.style.width=`${percentage}%`;
       bar.textContent = dist;
     }