X-Git-Url: http://gitweb.michael.orlitzky.com/?a=blobdiff_plain;f=src%2Findex.html.in;h=9486fb7b3e6be6d802f6bb89908305a020be908e;hb=4ef1e5f849b409ffe7403cd8ce34789366d5a9e1;hp=19c39ef3569d44d4284e3ef230a46e343196c098;hpb=039d2c876b1dd3b05a5dd81ac361cfab2ccef72a;p=charm-bypass.git

diff --git a/src/index.html.in b/src/index.html.in
index 19c39ef..9486fb7 100644
--- 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,7 @@
       }
 
       #tram {
-	animation: tramroll 15s linear infinite;
+	animation: tramroll 17s linear infinite;
       }
 
 
@@ -100,7 +129,7 @@
       }
 
       #train {
-	animation: trainroll 10s linear infinite;
+	animation: trainroll 11s linear infinite;
       }
 
 
@@ -160,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>
 
@@ -192,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",
@@ -228,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>