doc/LICENSE: add AGPL-3 license

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

diff --git a/src/index.html.in b/src/index.html.in
index d6f421324f24046eb2b9c84a7453dcedd13c1dd2..9486fb7b3e6be6d802f6bb89908305a020be908e 100644 (file)
--- a/src/index.html.in
+++ b/src/index.html.in
@@ -26,6 +26,25 @@
        background: transparent;
       }
 
+      html, body {
+       /* To create our "window" onto the scene, we're going to slide the
+         * SVG off the left-hand side of the screen, and we don't want
+        * scroll bars to appear. */
+       overflow: hidden;
+      }
+
+      svg {
+       /* Set the height to 100% of the screen, which we'll keep; and the
+        *  initial position to (0,0), which we're going to change
+        * every time the window is resized, because the exact amount
+        * that we have to slide the SVG to the left to get the ticket
+        * into the center will change. */
+       position: fixed;
+       top: 0;
+       left: 0;
+       height: 100%;
+      }
+
       /* The blinking fade in/out animation for the ticket date and time */
       @keyframes blink {
        25% {
@@ -46,13 +65,23 @@
       /* 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";
       }
 
       /************************/
@@ -70,7 +99,7 @@
       }
 
       #bus {
-       animation: busroll 20s linear infinite;
+       animation: busroll 23s linear infinite;
       }
 
 
@@ -85,7 +114,22 @@
       }
 
       #tram {
-       animation: tramroll 15s linear infinite;
+       animation: tramroll 17s linear infinite;
+      }
+
+
+      /* Tram */
+      @keyframes trainroll {
+       from {
+         transform: translateX(0%);
+       }
+       to {
+         transform: translateX(100%);
+       }
+      }
+
+      #train {
+       animation: trainroll 11s linear infinite;
       }
 
 
@@ -145,6 +189,38 @@
         /* 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>
 
@@ -177,7 +253,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",
@@ -213,6 +289,37 @@
       }
 
       document.body.addEventListener("click", swap_colors);
+
+
+      /*************************************************/
+      /* Finally, center the ticket within the browser */
+      /*************************************************/
+      function center_ticket() {
+       /* We're relying on the SVG being the full height of the
+        * viewport already, and on the aspect ratio being
+        * preserved. First, find the center of the ticket. */
+       const r = document.getElementById("ticket").getBoundingClientRect();
+       const c = r.left + (r.width / 2);
+
+       /* That's the center-line of the ticket. We want to move it to
+        * the center-line of the viewport. */
+       const vc = document.documentElement.clientWidth / 2;
+
+       /* This is how much we need to translate the SVG */
+       const delta = vc - c;
+
+       /* But before we can set the absolute left-coordinate of the
+        * SVG, we need to know where it is now. Note: without the
+        * "px" this doesn't default to pixels like CSS does. */
+       const svg = document.querySelector("svg");
+       svg.style.left = (svg.getBoundingClientRect().left + delta) + "px";
+      }
+
+      /* Re-center it when the window is resized */
+      window.addEventListener("resize", center_ticket);
+
+      /* Center it once when the page has loaded, too */
+      window.addEventListener("load", center_ticket);
     </script>
   </body>
 </html>