X-Git-Url: https://gitweb.michael.orlitzky.com/?a=blobdiff_plain;f=index.html.in;h=f600950306a38c7ca893d6bb186c23a282cfbbbc;hb=7d7bc2b602001340f22b4d0e400b82b232f9b4fb;hp=9486fb7b3e6be6d802f6bb89908305a020be908e;hpb=eb83cdcf90d162883c81f70bdf30a3a00f8ff474;p=charm-bypass.git

diff --git a/index.html.in b/index.html.in
index 9486fb7..f600950 100644
--- a/index.html.in
+++ b/index.html.in
@@ -59,7 +59,8 @@
       }
 
       #tickettime, #ticketdate {
-	animation: blink 2s linear infinite;
+	/* 300 two-second blinks is ten minutes */
+	animation: blink 2s linear 300;
       }
 
       /* Define, load, and specify the custom font we use for the ticket
@@ -228,25 +229,103 @@
     @SVGDATA@
 
     <script>
-      /******************************************/
-      /* First, set up the ticket date and time */
-      /******************************************/
+
+      /***********************************************/
+      /* First, 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);
+
+
+      /*************************/
+      /* Set the security code */
+      /*************************/
+
+      /* All <text> elements produced by inkscape contain a single <tspan>
+       * that itself contains the actual text. This does something real
+       * sneaky, and actually OVERWRITES that tspan with our own text
+       * content. This turns out to be what we need anyway because trying
+       * to center a (display: inline) tspan is a pain in the butt. */
+      const ct = document.getElementById("codetext");
+
+      /* Get the "code" from the querystring if it's there */
+      let params = new URLSearchParams(document.location.search);
+      if (params.get("code")) {
+        ct.textContent = params.get("code");
+      }
+      else {
+        /* Otherwise, use a random code */
+        const bucket = ["0","1","2","3","4","5","6","7","8","9",
+                        "A","B","C","D","E","F","G","H","I","J",
+                        "K","L","M","N","O","P","Q","R","S","T",
+                        "U","V","W","X","Y","Z"];
+
+        /* Two random ints between 0 and 35 */
+        const i1 = Math.floor(Math.random() * 36);
+        const i2 = Math.floor(Math.random() * 36);
+        const d1 = bucket[i1];
+        const d2 = bucket[i2];
+        ct.textContent = d1 + d2;
+      }
+
+      /* Now center the security code inside its red box */
+      /* First, find the center of the red box */
+      const r1 = document.getElementById("codebg").getBoundingClientRect();
+      const c1 = r1.left + (r1.width / 2);
+
+      /* Now the center of the code text */
+      const r2 = ct.getBoundingClientRect();
+      const c2 = r2.left + (r2.width / 2);
+
+      /* What do we add to c2 to make it equal to c1? */
+      const code_delta = c1 - c2;
+
+      /* Since this <text> element has an "x" attribute it's easier for us
+       * to shift that than it is to mess with the "left" style. */
+      ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + code_delta);
+
+
+      /*****************************************/
+      /* Next, set up the ticket date and time */
+      /*****************************************/
 
       /* There are two parameters, time and date, that we store in one
-       * underlying "date" variable. Default both to an hour from now.  This
-       * is sensible because the date/time shown on your ticket is its
-       * EXPIRATION time, and tickets are valid for two hours. Having it
-       * show one hour in the future means that you didn't just use your
-       * ticket a second ago (if you just got caught on the light rail, for
-       * example) but also means that it's not expiring for a while.
+       * underlying "date" variable. Default both to an hour and a
+       * half from now. This is what the CharmPass app does for
+       * one-way tickets.
        */
       const date = new Date();
 
-      /* Add an hour. We use the low-level get/setTime to change the number
-       * of milliseconds since the epoch that this date represents. Obviously
-       * correct, and avoids all suspicious corner cases (well, for a few more
-       * decades). */
-      date.setTime(date.getTime() + (60*60*1000));
+      /* Add an hour and a half. We use the low-level get/setTime to
+       * change the number of milliseconds since the epoch that this
+       * date represents. Obviously correct, and avoids all suspicious
+       * corner cases (well, for a few more decades). */
+      date.setTime(date.getTime() + (90*60*1000));
 
       /* All <text> elements produced by inkscape contain a single <tspan>
        * that itself contains the actual text. */
@@ -262,9 +341,9 @@
       td.firstChild.textContent = date.toLocaleDateString("en-US", dateopts);
 
 
-      /************************************************************/
-      /* Second, add the onclick handler for the night/day switch */
-      /************************************************************/
+      /*************************************************************/
+      /* Finally, add the onclick handler for the night/day switch */
+      /*************************************************************/
 
       /* We always start in "day" mode */
       is_day = true;
@@ -290,36 +369,6 @@
 
       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>