src/index.html.in: add a "const" to a javascript variable

[charm-bypass.git] / src / index.html.in

diff --git a/src/index.html.in b/src/index.html.in
index 271651099a79f6d1c907f92caf0d5f9c6021579d..b3407fc214e70b9c9607d767b01dfe1b5451d2d5 100644 (file)
--- a/src/index.html.in
+++ b/src/index.html.in
@@ -46,15 +46,162 @@
       /* Define, load, and specify the custom font we use for the ticket
        * date, time, and service name. */
       @font-face {
-       font-family: "CharmBypass Ticket Text";
+       font-family: "CharmBypass Regular";
        src:
-         url("data:font/woff2;base64,@TICKETFONT@") format("woff2")
+         url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
       }
 
       #servicename, #tickettime, #ticketdate {
-        font-family: "CharmBypass Ticket Text" !important;
+        font-family: "CharmBypass Regular";
       }
 
+      @font-face {
+       font-family: "CharmBypass Bold";
+       src:
+         url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
+      }
+
+      #serviceletter {
+       font-family: "CharmBypass Bold";
+      }
+
+      /************************/
+      /* Scrolling animations */
+      /************************/
+
+      /* Bus */
+      @keyframes busroll {
+       from {
+         transform: translateX(0%);
+       }
+       to {
+         transform: translateX(100%);
+       }
+      }
+
+      #bus {
+       animation: busroll 23s linear infinite;
+      }
+
+
+      /* Tram */
+      @keyframes tramroll {
+       from {
+         transform: translateX(0%);
+       }
+       to {
+         transform: translateX(100%);
+       }
+      }
+
+      #tram {
+       animation: tramroll 17s linear infinite;
+      }
+
+
+      /* Tram */
+      @keyframes trainroll {
+       from {
+         transform: translateX(0%);
+       }
+       to {
+         transform: translateX(100%);
+       }
+      }
+
+      #train {
+       animation: trainroll 11s linear infinite;
+      }
+
+
+      /* Clouds */
+      @keyframes cloudsfloat {
+       from {
+         transform: translateX(0%);
+       }
+       to {
+         transform: translateX(-50%);
+       }
+      }
+
+      #clouds {
+       animation: cloudsfloat 40s linear infinite;
+      }
+
+      @keyframes cloudscopyfloat {
+       from {
+         transform: translateX(0%);
+       }
+       to {
+         transform: translateX(-50%);
+       }
+      }
+
+      #cloudscopy {
+       animation: cloudscopyfloat 40s linear infinite;
+      }
+
+
+      /* Trees */
+      @keyframes treespass {
+       from {
+         transform: translateX(0%);
+       }
+       to {
+         transform: translateX(-50%);
+       }
+      }
+
+      #trees {
+        /* The trees move a little faster than the clouds */
+       animation: treespass 30s linear infinite;
+      }
+
+      @keyframes treescopypass {
+       from {
+         transform: translateX(0%);
+       }
+       to {
+         transform: translateX(-50%);
+       }
+      }
+
+      #treescopy {
+        /* The trees move a little faster than the clouds */
+       animation: treescopypass 30s linear infinite;
+      }
+
+
+      /* City skyline */
+      @keyframes cityscroll {
+       from {
+         transform: translateX(0%);
+       }
+       to {
+         transform: translateX(-50%);
+       }
+      }
+
+      #city {
+        /* The city moves faster than the clouds but slower
+         * than the trees */
+       animation: cityscroll 35s linear infinite;
+      }
+
+      @keyframes citycopyscroll {
+       from {
+         transform: translateX(0%);
+       }
+       to {
+         transform: translateX(-50%);
+       }
+      }
+
+      #citycopy {
+        /* The city moves faster than the clouds but slower
+         * than the trees */
+       animation: citycopyscroll 35s linear infinite;
+      }
     </style>
   </head>
 
@@ -87,7 +234,7 @@
       tt = document.getElementById("tickettime");
       tt.firstChild.textContent = date.toLocaleTimeString();
 
-      td = document.getElementById("ticketdate");
+      const td = document.getElementById("ticketdate");
       const dateopts = {
        day: "2-digit",
        month: "2-digit",