]> 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 9f9d41dd47a8eb4e2da6dd48f7ae2fd7b68a6078..ce22f37a7eb472ed16ccb76893392dc82b182713 100644 (file)
@@ -1,41 +1,49 @@
 <!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
+         * 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. */
         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 {
@@ -71,7 +77,7 @@
           url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
       }
 
-      #servicename, #tickettime, #ticketdate, #codetext {
+      #origindest, #servicename, #tickettime, #ticketdate, #codetext, #zone {
         font-family: "CharmBypass Regular", sans-serif;
       }
 
@@ -83,7 +89,6 @@
 
       #serviceid {
         font-family: "CharmBypass Bold", sans-serif;
-        font-weight: bold;
       }
 
       /************************/
 
       /* 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, center the ticket within the browser */
-      /***********************************************/
-
+      /**
+       * 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
       }
 
 
-      /******************************/
-      /* Set the service identifier */
-      /******************************/
+      /**
+       * Set the service identifier from the querystring if it's there.
+       * Otherwise, leave it at the default of "F".
+       */
       function set_service_id() {
         const sid = document.getElementById("serviceid");
 
-       /* Get the "serviceid" from the querystring if it's there */
-        let params = new URLSearchParams(document.location.search);
+        /* 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");
         }
-
-       /* Otherwise, leave it at "F" */
       }
 
-      /******************************/
-      /* Set the service name */
-      /******************************/
+
+      /**
+       * 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 */
-        let params = new URLSearchParams(document.location.search);
+        /* 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");
         }
+      }
+
 
-       /* Otherwise, leave it at "BaltimoreLink" */
+      /**
+       * Set the zone from the given "zone" parameter and then unhide it.
+       */
+      function set_zone(zone) {
+        const z = document.getElementById("zone");
+
+        z.textContent = zone;
+        z.style.display = "block"; /* hidden by default */
+      }
+
+
+      /**
+       * 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 and reposition the security code */
-      /****************************************/
 
+      /**
+       * 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 */
-        let params = new URLSearchParams(document.location.search);
+        const params = new URLSearchParams(document.location.search);
         if (params.get("code")) {
-          ct.textContent = params.get("code");
+          ct.textContent = params.get("code").toUpperCase();
         }
         else {
           /* Otherwise, use a random code */
       }
 
 
+      /**
+       * 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");
         /* 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"
+        /* 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 after futzing
-         * with its contents. 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
+         * 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 recr
+         * 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;
 
 
         /* 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);
+        ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + svg_hdelta);
       }
 
-      /*****************************************/
-      /* Next, set up the ticket date and time */
-      /*****************************************/
-
+      /**
+       * 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. Default both to an hour and a
-         * half from now. This is what the CharmPass app does for
-         * one-way tickets. */
+         * underlying "date" variable. */
         const date = new Date();
 
-        /* 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));
+        /* 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;
+        }
+
+        /* 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();
       }
 
 
-      /*********************************************************/
-      /* Finally, the onclick handler for the night/day switch */
-      /*********************************************************/
+      /**
+       * 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
+        };
 
-      /* We always start in "day" mode */
-      is_day = true;
+        /* Forward direction key for zone_map */
+        const fwd = src + "_" +  dest;
 
-      function set_day() {
-       sky.style.fill = "#efb02f";
-      }
+        /* 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;
 
-      function set_night() {
-        sky.style.fill = "#143b66";
+        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;
+        }
       }
 
-      function swap_colors() {
-        if (is_day) {
-          set_night();
-          is_day = false;
+
+      /**
+       * 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 {
-          set_day();
-          is_day = true;
+        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 */
+      }
+
+
+      /**
+       * 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 */
       /*****************************************************/
 
-      /* Center the ticket once when the page has loaded */
-      window.addEventListener("load", center_ticket);
+      const params = new URLSearchParams(document.location.search);
+      if (params.get("go")) {
+        /* First unhide the SVG (swap it with the form) */
+        window.addEventListener("load", go);
 
-      /* Re-center the ticket when the window is resized */
-      window.addEventListener("resize", center_ticket);
+        /* Center the ticket once when the page has loaded */
+        window.addEventListener("load", center_ticket);
 
-      /* Set the service identifier when the page has loaded */
-      window.addEventListener("load", set_service_id);
+        /* Re-center the ticket when the window is resized */
+        window.addEventListener("resize", center_ticket);
 
-      /* Set the service name when the page has loaded */
-      window.addEventListener("load", set_service_name);
+        /* Set the service identifier when the page has loaded */
+        window.addEventListener("load", set_service_id);
 
-      /* Set the security code text when the page has loaded */
-      window.addEventListener("load", set_code);
+        /* Set the service name when the page has loaded */
+        window.addEventListener("load", set_service_name);
 
-      /* Center the security code text when the page has loaded; in
-       * particular, after we set the code. */
-      window.addEventListener("load", center_code);
+        /* Resize the ticket background if necessary */
+        window.addEventListener("load", resize_ticket);
 
-      /* Set the ticket expiration date/time upon page load */
-      window.addEventListener("load", set_ticket_expiry);
+        /* Set the security code text when the page has loaded */
+        window.addEventListener("load", set_code);
 
-      /* Swap colors when the screen is tapped */
-      document.body.addEventListener("click", swap_colors);
+        /* 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);
+
+        /* 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";
+          }
+        });
+      }
 
     </script>
   </body>