]> gitweb.michael.orlitzky.com - charm-bypass.git/blobdiff - index.html.in
COPYING: add to state the "or later" bit
[charm-bypass.git] / index.html.in
index 9d666dedb0c5d6b9ea27df5bfcce6176db61dd9a..ce22f37a7eb472ed16ccb76893392dc82b182713 100644 (file)
@@ -1,88 +1,94 @@
 <!doctype html>
 <html lang="en-US">
   <head>
+    <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon"
+          type="image/svg+xml"
+          href="data:image/svg+xml;base64,@FAVICON@" />
 
     <title>
-      CharmBypass.
+      CharmBypass: got that transit equity
     </title>
 
     <style>
-      /*
-       * Reset styles for the html and body elements, the only two HTML
-       * elements we use. */
-      html, body {
-       margin: 0;
-       padding: 0;
-       border: 0;
-       font-weight: normal;
-       font-style: inherit;
-       font-size: 100%;
-       line-height: 1.5;
-       font-family: inherit;
-       text-align: inherit;
-       text-decoration: none;
-       vertical-align: baseline;
-       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;
+      body {
+        /* For consistency with the SVG */
+        font-family: sans-serif;
+      }
+
+      fieldset {
+        margin-top: 1em;
+        padding-top: 1em;
+      }
+
+      input[type=submit] {
+        margin-top: 1em;
+        margin-bottom: 1em;
+      }
+
+      legend {
+        font-weight: bold;
+      }
+
+      /* Display form errors for the one browser that doesn't support
+       * them natively, mobile Firefox. We use "visibility" to toggle
+       * it on and off, but "display" to hide it completely in non-
+       * stupid web browsers. */
+      #marc-form-errors {
+        color: #a00;
+        visibility: hidden;
+        display: none;
       }
 
       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%;
+        /* 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%;
+
+        /* Hide everything by default. We only show it once the user has
+         * submitted the menu form */
+        display: none;
       }
 
       /* The blinking fade in/out animation for the ticket date and time */
       @keyframes blink {
-       25% {
-         opacity: 0.5;
-       }
-       50% {
-         opacity: 0;
-       }
-       75% {
-         opacity: 0.5;
-       }
+        25% { opacity: 0.5; }
+        50% { opacity: 0;   }
+        75% { opacity: 0.5; }
       }
 
       #tickettime, #ticketdate {
-       /* 300 two-second blinks is ten minutes */
-       animation: blink 2s linear 300;
+        /* 300 two-second blinks is ten minutes */
+        animation: blink 2s linear 300;
       }
 
       /* Define, load, and specify the custom font we use for the ticket
        * date, time, and service name. */
       @font-face {
-       font-family: "CharmBypass Regular";
-       src:
-         url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
+        font-family: "CharmBypass Regular";
+        src:
+          url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
       }
 
-      #servicename, #tickettime, #ticketdate {
-        font-family: "CharmBypass Regular";
+      #origindest, #servicename, #tickettime, #ticketdate, #codetext, #zone {
+        font-family: "CharmBypass Regular", sans-serif;
       }
 
       @font-face {
-       font-family: "CharmBypass Bold";
-       src:
-         url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
+        font-family: "CharmBypass Bold";
+        src:
+          url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
       }
 
-      #serviceletter {
-       font-family: "CharmBypass Bold";
+      #serviceid {
+        font-family: "CharmBypass Bold", sans-serif;
       }
 
       /************************/
 
       /* Bus */
       @keyframes busroll {
-       from {
-         transform: translateX(0%);
-       }
-       to {
-         transform: translateX(100%);
-       }
+        from { transform: translateX(0%);    }
+        to   { transform: translateX(-100%); }
       }
 
       #bus {
-       animation: busroll 23s linear infinite;
+        animation: busroll 15s linear infinite;
       }
 
 
       /* Tram */
       @keyframes tramroll {
-       from {
-         transform: translateX(0%);
-       }
-       to {
-         transform: translateX(100%);
-       }
+        from { transform: translateX(0%);   }
+        to   { transform: translateX(100%); }
       }
 
       #tram {
-       animation: tramroll 17s linear infinite;
+        animation: tramroll 15s linear infinite;
       }
 
 
-      /* Tram */
+      /* Train */
       @keyframes trainroll {
-       from {
-         transform: translateX(0%);
-       }
-       to {
-         transform: translateX(100%);
-       }
+        from { transform: translateX(0%);   }
+        to   { transform: translateX(100%); }
       }
 
       #train {
-       animation: trainroll 11s linear infinite;
+        animation: trainroll 10s linear infinite;
       }
 
 
       /* Clouds */
       @keyframes cloudsfloat {
-       from {
-         transform: translateX(0%);
-       }
-       to {
-         transform: translateX(-50%);
-       }
+        from { transform: translateX(0%);   }
+        to   { transform: translateX(-50%); }
       }
 
       #clouds {
-       animation: cloudsfloat 40s linear infinite;
+        animation: cloudsfloat 25s linear infinite;
       }
 
       @keyframes cloudscopyfloat {
-       from {
-         transform: translateX(0%);
-       }
-       to {
-         transform: translateX(-50%);
-       }
+        from { transform: translateX(0%);   }
+        to   { transform: translateX(-50%); }
       }
 
       #cloudscopy {
-       animation: cloudscopyfloat 40s linear infinite;
+        animation: cloudscopyfloat 25s linear infinite;
       }
 
 
       /* Trees */
       @keyframes treespass {
-       from {
-         transform: translateX(0%);
-       }
-       to {
-         transform: translateX(-50%);
-       }
+        from { transform: translateX(0%);   }
+        to   { transform: translateX(-50%); }
       }
 
       #trees {
         /* The trees move a little faster than the clouds */
-       animation: treespass 30s linear infinite;
+        animation: treespass 16s linear infinite;
       }
 
       @keyframes treescopypass {
-       from {
-         transform: translateX(0%);
-       }
-       to {
-         transform: translateX(-50%);
-       }
+        from { transform: translateX(0%);   }
+        to   { transform: translateX(-50%); }
       }
 
       #treescopy {
         /* The trees move a little faster than the clouds */
-       animation: treescopypass 30s linear infinite;
+        animation: treescopypass 16s linear infinite;
       }
 
 
       /* City skyline */
       @keyframes cityscroll {
-       from {
-         transform: translateX(0%);
-       }
-       to {
-         transform: translateX(-50%);
-       }
+        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;
+        animation: cityscroll 20s linear infinite;
       }
 
       @keyframes citycopyscroll {
-       from {
-         transform: translateX(0%);
-       }
-       to {
-         transform: translateX(-50%);
-       }
+        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;
+        animation: citycopyscroll 20s linear infinite;
       }
     </style>
   </head>
 
   <body>
+    <div id="menu">
+      <h1>CharmBypass</h1>
+      <p><strong>got that <em>transit equity</em></strong></p>
+
+      <form>
+        <fieldset>
+          <legend>Local Bus, Light Rail, or Metro</legend>
+          <div>
+            <label for="code1">
+              Daily security code (optional):
+            </label>
+            <input id="code1"
+                   name="code" value=""
+                   type="text"
+                   size="2"
+                   minlength="2"
+                   maxlength="2"
+                   pattern="[a-zA-Z0-9]*" />
+          </div>
+          <input type="hidden" name="servicename" value="BaltimoreLink" />
+          <input type="submit" name="go" value="Generate Ticket" />
+        </fieldset>
+      </form>
+      <form>
+        <fieldset>
+          <legend>Commuter Bus</legend>
+          <input type="hidden" name="serviceid" value="R" />
+          <input type="hidden" name="servicename" value="Commuter Bus" />
+
+          <div>
+            <label for="code2">
+              Daily security code (optional):
+            </label>
+            <input id="code2"
+                   name="code" value=""
+                   type="text"
+                   size="2"
+                   minlength="2"
+                   maxlength="2"
+                   pattern="[a-zA-Z0-9]*" />
+          </div>
+
+          <p>
+            Zone<sup>&dagger;</sup>:
+          </p>
+          <div>
+            <input type="radio" required
+                   name="zone"
+                   id="zone1"
+                   value="Zone 1" />
+            <label for="zone1">Zone 1</label>
+          </div>
+          <div>
+            <input type="radio" required
+                   name="zone"
+                   id="zone2"
+                   value="Zone 2" />
+            <label for="zone2">Zone 2</label>
+          </div>
+          <div>
+            <input type="radio" required checked
+                   name="zone"
+                   id="zone3"
+                   value="Zone 3" />
+            <label for="zone3">Zone 3</label>
+          </div>
+          <div>
+            <input type="radio" required
+                   name="zone"
+                   id="zone4"
+                   value="Zone 4" />
+            <label for="zone4">Zone 4</label>
+          </div>
+          <div>
+            <input type="radio" required
+                   name="zone"
+                   id="zone5"
+                   value="Zone 5" />
+            <label for="zone5">Zone 5</label>
+          </div>
+
+          <input type="submit" name="go" value="Generate Ticket" />
+
+          <p>
+            <sup>&dagger;</sup>
+            On the MTA's PDF schedule for your route
+          </p>
+        </fieldset>
+      </form>
+      <form>
+        <fieldset>
+          <legend>MARC Train</legend>
+
+          <div>
+            <label for="code3">
+              Daily security code (optional):
+            </label>
+            <input id="code3"
+                   name="code" value=""
+                   type="text"
+                   size="2"
+                   minlength="2"
+                   maxlength="2"
+                   pattern="[a-zA-Z0-9]*" />
+          </div>
+
+          <p>Origin:</p>
+          <div>
+            <input type="radio" required checked
+                   name="origin"
+                   id="origin_BAL"
+                   value="BAL" />
+            <label for="origin_BAL">Baltimore/Penn (Penn Line)</label>
+          </div>
+          <div>
+            <input type="radio" required
+                   name="origin"
+                   id="origin_BCA"
+                   value="BCA" />
+            <label for="origin_BCA">Baltimore/Camden (Camden Line)</label>
+          </div>
+          <div>
+            <input type="radio" required
+                   name="origin"
+                   id="origin_BWE"
+                   value="BWE" />
+            <label for="origin_BWE">Bowie State (Penn Line)</label>
+          </div>
+          <div>
+            <input type="radio" required
+                   name="origin"
+                   id="origin_BWI"
+                   value="BWI" />
+            <label for="origin_BWI">BWI Airport (Penn Line)</label>
+          </div>
+          <div>
+            <input type="radio" required
+                   name="origin"
+                   id="origin_CPK"
+                   value="CPK" />
+            <label for="origin_CPK">College Park (Camden Line)</label>
+          </div>
+          <div>
+            <input type="radio" required
+                   name="origin"
+                   id="origin_FRC"
+                   value="FRC" />
+            <label for="origin_FRC">Frederick (Brunswick Line)</label>
+          </div>
+          <div>
+            <input type="radio" required
+                   name="origin"
+                   id="origin_HAE"
+                   value="HAE" />
+            <label for="origin_HAE">Halethorpe (Penn Line)</label>
+          </div>
+          <div>
+            <input type="radio" required
+                   name="origin"
+                   id="origin_NCR"
+                   value="NCR" />
+            <label for="origin_NCR">New Carrollton (Penn Line)</label>
+          </div>
+          <div>
+            <input type="radio" required
+                   name="origin"
+                   id="origin_SEB"
+                   value="SEB" />
+            <label for="origin_SEB">Seabrook (Penn Line)</label>
+          </div>
+          <div>
+            <input type="radio" required
+                   name="origin"
+                   id="origin_WAS"
+                   value="WAS" />
+            <label for="origin_WAS">Washington D.C.</label>
+          </div>
+          <div>
+            <input type="radio" required
+                   name="origin"
+                   id="origin_WBL"
+                   value="WBL" />
+            <label for="origin_WBL">West Baltimore (Penn Line)</label>
+          </div>
+
+          <p>Destination:</p>
+          <div>
+            <input type="radio" required
+                   name="destination"
+                   id="destination_BAL"
+                   value="BAL" />
+            <label for="destination_BAL">Baltimore/Penn (Penn Line)</label>
+          </div>
+          <div>
+            <input type="radio" required
+                   name="destination"
+                   id="destination_BCA"
+                   value="BCA" />
+            <label for="destination_BCA">Baltimore/Camden (Camden Line)</label>
+          </div>
+          <div>
+            <input type="radio" required
+                   name="destination"
+                   id="destination_BWE"
+                   value="BWE" />
+            <label for="destination_BWE">Bowie State (Penn Line)</label>
+          </div>
+          <div>
+            <input type="radio" required
+                   name="destination"
+                   id="destination_BWI"
+                   value="BWI" />
+            <label for="destination_BWI">BWI Airport (Penn Line)</label>
+          </div>
+          <div>
+            <input type="radio" required
+                   name="destination"
+                   id="destination_CPK"
+                   value="CPK" />
+            <label for="destination_CPK">College Park (Camden Line)</label>
+          </div>
+          <div>
+            <input type="radio" required
+                   name="destination"
+                   id="destination_FRC"
+                   value="FRC" />
+            <label for="destination_FRC">Frederick (Brunswick Line)</label>
+          </div>
+          <div>
+            <input type="radio" required
+                   name="destination"
+                   id="destination_HAE"
+                   value="HAE" />
+            <label for="destination_HAE">Halethorpe (Penn Line)</label>
+          </div>
+          <div>
+            <input type="radio" required
+                   name="destination"
+                   id="destination_NCR"
+                   value="NCR" />
+            <label for="destination_NCR">New Carrollton (Penn Line)</label>
+          </div>
+          <div>
+            <input type="radio" required
+                   name="destination"
+                   id="destination_SEB"
+                   value="SEB" />
+            <label for="destination_SEB">Seabrook (Penn Line)</label>
+          </div>
+          <div>
+            <input type="radio" required checked
+                   name="destination"
+                   id="destination_WAS"
+                   value="WAS" />
+            <label for="destination_WAS">Washington D.C.</label>
+          </div>
+          <div>
+            <input type="radio" required
+                   name="destination"
+                   id="destination_WBL"
+                   value="WBL" />
+            <label for="destination_WBL">West Baltimore (Penn Line)</label>
+          </div>
+
+          <p id="marc-form-errors">OK</p>
+
+          <input type="hidden" name="serviceid" value="R" />
+          <input type="hidden" name="servicename" value="MARC Train" />
+          <input type="submit"
+                 name="go"
+                 id="marc-submit"
+                 value="Generate Ticket" />
+        </fieldset>
+      </form>
+    </div>
+
     @SVGDATA@
 
     <script>
-      /******************************************/
-      /* First, 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 and a
-       * half from now. This is what the CharmPass app does for
-       * one-way tickets.
+
+      /**
+       * Center the ticket within the browser by translating the SVG
+       * until the ticket and the viewport centerlines coincide.
+       */
+      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 hdelta = 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 + hdelta) + "px";
+      }
+
+
+      /**
+       * Set the service identifier from the querystring if it's there.
+       * Otherwise, leave it at the default of "F".
        */
-      const date = new Date();
+      function set_service_id() {
+        const sid = document.getElementById("serviceid");
 
-      /* 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));
+        /* Get the "serviceid" from the querystring if it's there */
+        const params = new URLSearchParams(document.location.search);
+        if (params.get("serviceid")) {
+          sid.textContent = params.get("serviceid");
+        }
+      }
 
-      /* All <text> elements produced by inkscape contain a single <tspan>
-       * that itself contains the actual text. */
-      tt = document.getElementById("tickettime");
-      tt.firstChild.textContent = date.toLocaleTimeString();
 
-      const td = document.getElementById("ticketdate");
-      const dateopts = {
-       day: "2-digit",
-       month: "2-digit",
-       year: "2-digit"
-      };
-      td.firstChild.textContent = date.toLocaleDateString("en-US", dateopts);
+      /**
+       * Set the service name from the querystring if it's there.
+       * Otherwise, leave it at the default of "BaltimoreLink".
+       */
+      function set_service_name() {
+        const sid = document.getElementById("servicename");
 
+        /* Get the "servicename" from the querystring if it's there */
+        const params = new URLSearchParams(document.location.search);
+        if (params.get("servicename")) {
+          sid.textContent = params.get("servicename");
+        }
+      }
 
-      /************************************************************/
-      /* Second, add the onclick handler for the night/day switch */
-      /************************************************************/
 
-      /* We always start in "day" mode */
-      is_day = true;
+      /**
+       * Set the zone from the given "zone" parameter and then unhide it.
+       */
+      function set_zone(zone) {
+        const z = document.getElementById("zone");
 
-      function set_day() {
-       sky.style.fill = "#efb02f";
+        z.textContent = zone;
+        z.style.display = "block"; /* hidden by default */
       }
 
-      function set_night() {
-       sky.style.fill = "#143b66";
+
+      /**
+       * Resize the  ticket background based on the service name.
+       * The BaltimoreLink, Commuter Bus, and MARC Train tickets
+       * are all different heights and are arranged vertically a
+       * bit different.
+       *
+       * Rather than design three completelty separate tickets and
+       * then have to keep track of which one we're using, I have
+       * instead decided to use one ticket and to reposition it
+       * on-the-fly based on the service name. This is necessarily
+       * a bit ugly because it involves a lot of magic numbers that
+       * can only be explained if you open up inkscape with a CharmPass
+       * screenshot to see where things belong and how to get them there.
+       *
+       * The SVG was designed with BaltimoreLink in mind, so this
+       * is a no-op if the service is BaltimoreLink.
+       */
+      function resize_ticket() {
+        /* Get the "servicename" from the querystring if it's there */
+        const params = new URLSearchParams(document.location.search);
+        const tbg = document.getElementById("ticketbg");
+        const t = document.getElementById("ticket");
+        const sn = document.getElementById("servicename");
+
+        if (params.get("servicename") === "Commuter Bus") {
+          /* The top of the background is initially at y=246.859, and
+           * we scale it by a factor of 1.12 to y=276.482 for a change
+           * of 29.623. So after we scale it, we translate it upwards
+           * by that amount to put it back where it started. */
+          tbg.setAttribute("transform", "translate(0 -29.623) scale(1 1.12)");
+
+          /* Now translate the entire ticket up by the magic amount, 1/5
+           * of the size change we made to the background. This ratio
+           * was found by measuring pixels in side-by-side screenshots
+           * of BaltimoreLink and Commuter Bus tickets. */
+          t.setAttribute("transform", "translate(0 -9.33)");
+
+          /* More magic numbers discovered by comparing the two
+           * tickets overlayed in inkscape */
+          sn.setAttribute("transform", "translate(0 64.28)");
+        }
+        else if (params.get("servicename") === "MARC Train") {
+          /* insane tricks are explained above */
+          tbg.setAttribute("transform",
+                           "translate(0 -72.378) scale(1 1.2932)");
+          t.setAttribute("transform", "translate(0 -67.17)");
+          sn.setAttribute("transform", "translate(0 131.0)");
+        }
+      }
+
+
+      /**
+       * Set the security code from the querystring if it was given;
+       * otherwise generate a random code.
+       */
+      function set_code() {
+        const ct = document.getElementById("codetext");
+
+        /* Get the "code" from the querystring if it's there */
+        const params = new URLSearchParams(document.location.search);
+        if (params.get("code")) {
+          ct.textContent = params.get("code").toUpperCase();
+        }
+        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;
+        }
       }
 
-      function swap_colors() {
-       if (is_day) {
-         set_night();
-         is_day = false;
-       }
-       else {
-         set_day();
-         is_day = true;
-       }
+
+      /**
+       * Center the security code within its container.
+       *
+       * Some codes like "II" and "WW" can take up wildly different
+       * amounts of horizonetal space, but they should always be
+       * centered inside their little red box. This turns out to be
+       * harder than it sounds because we can only find the width of
+       * the code in browser coordinates, whereas its "x" coordinate
+       * is in SVG coordinates. Anyway, we do it.
+       */
+      function center_code() {
+        /* Center the security code inside its red box */
+        const ct = document.getElementById("codetext");
+        const bg = document.getElementById("codebg");
+
+        /* First, find the center of the red box */
+        const r1 = bg.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 hdelta = c1 - c2;
+
+        /* We've measured everything so far in "client rect"
+         * coordinates, because that's the only available measurement
+         * we have for the width of the <text> element. But when we
+         * reposition that <text> element, it will be by adjusting its
+         * "x" attribute, and that attribute uses a different coordinate
+         * system than the client rect does. Specifically, "x" refers to
+         * an offset within the SVG's coordinate system, and the client
+         * rect coordinates are pixels on-screen. To convert between the
+         * two, we can take the "width" attribute of the background
+         * element and compare it to the width of the background
+         * element's client rect. Since the size of the background is
+         * fixed, this should give us a multiplier that turns client rect
+         * distances (what we have) into SVG distances (what we want) */
+        const client_to_svg = parseFloat(bg.getAttribute("width"))/r1.width;
+
+        /* Convert hdelta from client rect to SVG coordinates */
+        const svg_hdelta = hdelta * client_to_svg;
+
+        /* 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")) + svg_hdelta);
       }
 
-      document.body.addEventListener("click", swap_colors);
+      /**
+       * Set the ticket's expiration date and time.
+       *
+       * BaltimoreLink and MARC Train tickets expire after 90 minutes;
+       * while Commuter Bus tickets expire after 10 minutes.
+       */
+      function set_ticket_expiry() {
+        /* There are two parameters, time and date, that we store in one
+         * underlying "date" variable. */
+        const date = new Date();
 
+        /* BaltimoreLink and MARC Train */
+        let minutes = 90;
+        const params = new URLSearchParams(document.location.search);
+        if (params.get("servicename") === "Commuter Bus") {
+          /* Commuter bus tickets are only valid for ten minutes */
+          minutes = 10;
+        }
 
-      /*************************************************/
-      /* 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);
+        /* 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
+         * for a few more decades. */
+        date.setTime(date.getTime() + (minutes*60*1000));
+
+        tt = document.getElementById("tickettime");
+        tt.textContent = date.toLocaleTimeString();
+
+        const td = document.getElementById("ticketdate");
+        const dateopts = {
+          day: "2-digit",
+          month: "2-digit",
+          year: "2-digit"
+        };
+        td.textContent = date.toLocaleDateString("en-US", dateopts);
+      }
+
+
+      /**
+       * Swap the day/night sky colors.
+       *
+       * We use CSS classes to keep track of the current state because
+       * it's a tiny bit cleaner than a global variable, but for some
+       * reason we can't use those same classes to actually change the
+       * color. (The classes, change, but the color doesn't.) Rather
+       * than waste time trying to explain this, we just set the "fill"
+       * attribute ourselves whenever we swap classes.
+       */
+      function swap_day_night() {
+        const sky = document.getElementById("sky");
+
+        if (sky.getAttribute("class") === "night") {
+          sky.setAttribute("fill", "#efb02f");
+          sky.setAttribute("class", "day");
+        }
+        else {
+          /* Put this case second so that the first time the
+           * screen is tapped (when there are no classes on
+           * the sky element) the color still changes. */
+          sky.setAttribute("fill", "#143b66");
+          sky.setAttribute("class", "night");
+        }
+      }
+
+
+      /**
+       * Compute the zone (string) for the given origin/destination pair.
+       *
+       * If we don't know it or if you chose in invalid pair (destination
+       * not on the same line as your origin?) then null is returned.
+       */
+      function compute_marc_zone(src, dest) {
+
+        /* Sorted on the first component, then the second.
+         *
+         * Key:
+         *
+         *   $6.00 => 1
+         *   $7.00 => 2
+         *   $8.00 => 3
+         *   $9.00 => 4
+         */
+        const zone_map = {
+          BAL_BWE: 2,
+          BAL_BWI: 1,
+          BAL_HAE: 1,
+          BAL_NCR: 3,
+          BAL_SEB: 3,
+          BAL_WAS: 4,
+          BAL_WBL: 1,
+          BCA_CPK: 3,
+          BCA_WAS: 4,
+          BWE_BWI: 1,
+          BWE_HAE: 1,
+          BWE_NCR: 1,
+          BWE_SEB: 1,
+          BWE_WAS: 2,
+          BWE_WBL: 2,
+          BWI_HAE: 1,
+          BWI_NCR: 2,
+          BWI_SEB: 2,
+          BWI_WAS: 3,
+          BWI_WBL: 1,
+          FRC_WAS: 4,
+          HAE_NCR: 2,
+          HAE_SEB: 2,
+          HAE_WAS: 3,
+          HAE_WBL: 1,
+          NCR_SEB: 1,
+          NCR_WAS: 1,
+          NCR_WBL: 3,
+          SEB_WAS: 1,
+          SEB_WBL: 3,
+          WAS_WBL: 4
+        };
+
+        /* Forward direction key for zone_map */
+        const fwd = src + "_" +  dest;
+
+        /* Reverse direction key for zone_map. The zone_map only
+         * has them listed in one direction, so we check both
+         * directions here. */
+        const rev = dest + "_" +  src;
+
+        /* The default. Obviously wrong for when we don't
+         * have the necessary data. */
+        let zone = -1;
+
+        if (zone_map[fwd]) {
+          zone = zone_map[fwd];
+        }
+        else if (zone_map[rev]) {
+          zone = zone_map[rev];
+        }
+
+        /* Convert the number to a string */
+        switch (zone) {
+          case 1:
+            return "One Zone";
+          case 2:
+            return "Two Zone";
+          case 3:
+            return "Three Zone";
+          case 4:
+            return "Four Zone";
+          default:
+            return null;
+        }
+      }
+
+
+      /**
+       * Compute and set the zone.
+       *
+       * We can be given a zone in two ways. First, on Commuter Bus
+       * tickets, it is given explicitly via the querystring. But
+       * It can also be specified implicitly via the origin and
+       * destination on a MARC Train ticket. Here we try both and
+       * then call set_zone() with the result if something worked.
+       */
+      function compute_and_set_zone() {
+        const params = new URLSearchParams(document.location.search);
+        const src = params.get("origin");
+        const dest = params.get("destination");
+
+        if (src && dest) {
+          /* MARC Train. We can assume that compute_marc_zone() doesn't
+           * return null because that's part of our form validation. */
+          const zone = compute_marc_zone(src, dest);
+          set_zone(zone);
+        }
+        else if (params.get("zone")) {
+          /* Commuter Bus */
+          set_zone(params.get("zone"));
+        }
+      }
+
+
+      /**
+       * Set the origin and destination for the MARC Train if they
+       * were provided, and unhide them if so.
+       */
+      function set_marc_origin_destination() {
+        const params = new URLSearchParams(document.location.search);
+        if (!params.get("origin") || !params.get("destination")) {
+          return;
+        }
+
+        const src = params.get("origin");
+        const dest = params.get("destination");
+
+        /* origindest contains both the origin and destination */
+        const origindest = document.getElementById("origindest");
+
+        const origin = document.getElementById("origin");
+        const destination = document.getElementById("destination");
+
+        origin.textContent = params.get("origin");
+        destination.textContent = params.get("destination");
+
+        origindest.style.display = "block"; /* hidden by default */
+      }
 
-       /* 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;
+      /**
+       * Hide the menu and display the ticket. This is what happens
+       * when you submit the form.
+       */
+      function go() {
+        /* 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. */
+        document.body.style.overflow = "hidden";
+        document.body.style.margin = "0";
+        document.body.style.padding = "0";
+
+        const svg = document.querySelector("svg");
+        const menu = document.getElementById("menu");
+        svg.style.display = "initial";
+        menu.style.display = "none";
+      }
+
+      /**
+       * Determine if the user agent is mobile Firefox.
+       */
+      function ua_is_mobile_ff() {
+        const ua = navigator.userAgent.toLowerCase();
+        return (ua.includes("firefox") && ua.includes("mobile"));
+      }
+
+      /**
+       * Validate the MARC form's origin/destination.
+       *
+       * We don't want the user to be able to choose a pair of stops that
+       * aren't actually connected by the same MARC line. If we don't have
+       * zone information for the (origin,destination) pair, that indicates
+       * that it's probably not a valid choice; otherwise I would have
+       * filled in the information from the CharmPass app already.
+       *
+       * All browsers except mobile Firefox let us call setCustomValidity()
+       * to provide an error message that is displayed if the user tries
+       * to submit invalid choices. But amazingly, mobile Firefox does not:
+       *
+       *   https://bugzilla.mozilla.org/show_bug.cgi?id=1510450
+       *
+       * Instead we have to work around it (in that one browser) by
+       * showing/hiding a paragraph that we fill with the errors.
+       */
+      function validate_origin_destination(event) {
+        const origins = document.getElementsByName("origin");
+        const destinations = document.getElementsByName("destination");
+        const mfe = document.getElementById("marc-form-errors");
+        const marcsubmit = document.getElementById("marc-submit");
+
+        if (ua_is_mobile_ff()) {
+          /* Even though this is only for one browser, empty paragraphs
+           * are handled inconsistently and should be avoided as a rule.
+           * So, we make it say "OK" before we hide it. */
+          mfe.textContent = "OK";
+          mfe.style.visibility = "hidden";
+          marcsubmit.disabled = false;
+        }
+
+        let src = null;
+        let dest = null;
+        origins.forEach((x) => { if (x.checked) src = x; })
+        destinations.forEach((x) => {
+          if (x.checked) dest = x;
+
+          /* clear all errors before possibly setting one */
+          x.setCustomValidity('');
+        })
+
+        if (src.value === dest.value) {
+          let err = "Origin and destination are the same";
+          dest.setCustomValidity(err);
+
+          if (ua_is_mobile_ff()) {
+            mfe.textContent = err;
+            mfe.style.visibility = "visible";
+            marcsubmit.disabled = true;
+          }
+        }
+        else if (compute_marc_zone(src.value, dest.value) === null) {
+          let err = "Origin and destination are on different lines";
+          dest.setCustomValidity(err);
+
+          if (ua_is_mobile_ff()) {
+            mfe.textContent = err;
+            mfe.style.visibility = "visible";
+            marcsubmit.disabled = true;
+          }
+        }
+      }
+
+      /*****************************************************/
+      /* Add event handlers for all of the functions above */
+      /*****************************************************/
+
+      const params = new URLSearchParams(document.location.search);
+      if (params.get("go")) {
+        /* First unhide the SVG (swap it with the form) */
+        window.addEventListener("load", go);
+
+        /* Center the ticket once when the page has loaded */
+        window.addEventListener("load", center_ticket);
+
+        /* Re-center the ticket when the window is resized */
+        window.addEventListener("resize", center_ticket);
+
+        /* Set the service identifier when the page has loaded */
+        window.addEventListener("load", set_service_id);
+
+        /* Set the service name when the page has loaded */
+        window.addEventListener("load", set_service_name);
+
+        /* Resize the ticket background if necessary */
+        window.addEventListener("load", resize_ticket);
 
-       /* 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";
+        /* Set the security code text when the page has loaded */
+        window.addEventListener("load", set_code);
+
+        /* Center the security code text when the page has loaded; in
+         * particular, after we set the code. */
+        window.addEventListener("load", center_code);
+
+        /* Set the ticket expiration date/time upon page load */
+        window.addEventListener("load", set_ticket_expiry);
+
+        /* Set the MARC Train origin and destination, if applicable */
+        window.addEventListener("load", set_marc_origin_destination);
+
+        /* Compute and set the zone, if applicable */
+        window.addEventListener("load", compute_and_set_zone);
+
+        /* Swap colors when the screen is tapped */
+        document.body.addEventListener("click", swap_day_night);
       }
+      else {
+        /* If we haven't submitted the form yet, set up change handlers
+         * for the origin/destination radio buttons that validate that
+         * the origin and destination are on the same line. */
+        document.getElementsByName("origin").forEach(
+         (x) => x.addEventListener("change", validate_origin_destination)
+        );
+        document.getElementsByName("destination").forEach(
+         (x) => x.addEventListener("change", validate_origin_destination)
+        );
+
+        /* Also do it when the page loads, because firefox likes to
+         * remember your selection even after the page reloads. */
+        window.addEventListener("load", validate_origin_destination);
 
-      /* Re-center it when the window is resized */
-      window.addEventListener("resize", center_ticket);
+        /* Finally, we have to babysit mobile Firefox, who doesn't
+         * support HTML5 form validation going into 2024. Turn on
+         * the little form errors paragraph so we can toggle its
+         * visibility (and make it display the error) when the user
+         * makes an invalid selection. */
+        window.addEventListener("load", () => {
+          if (ua_is_mobile_ff()) {
+            const mfe = document.getElementById("marc-form-errors");
+            mfe.style.display = "block";
+          }
+        });
+      }
 
-      /* Center it once when the page has loaded, too */
-      window.addEventListener("load", center_ticket);
     </script>
   </body>
 </html>