X-Git-Url: http://gitweb.michael.orlitzky.com/?a=blobdiff_plain;f=index.html.in;h=ada92ffe5182dd1049599516c308a9de0e23d281;hb=86e58607e734a5f8d7720f6c36aa50b043ae40b9;hp=dae2c048c8efae9d68635e20bc3ca9b64bd8bba4;hpb=cac9b5b0814a1c7317e8075c0aaaeed4ebab8c10;p=charm-bypass.git

diff --git a/index.html.in b/index.html.in
index dae2c04..ada92ff 100644
--- a/index.html.in
+++ b/index.html.in
@@ -8,10 +8,15 @@
           href="data:image/svg+xml;base64,@FAVICON@" />
 
     <title>
-      CharmBypass: it's transit equity y'all
+      CharmBypass: got that transit equity
     </title>
 
     <style>
+      body {
+        /* For consistency with the SVG */
+        font-family: sans-serif;
+      }
+
       fieldset {
         margin-top: 1em;
         padding-top: 1em;
@@ -26,9 +31,19 @@
         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. */
@@ -44,15 +59,9 @@
 
       /* 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 {
@@ -88,136 +97,100 @@
 
       /* 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>
@@ -225,15 +198,15 @@
   <body>
     <div id="menu">
       <h1>CharmBypass</h1>
-      <h2>it's transit equity y'all</h2>
+      <p><strong>got that <em>transit equity</em></strong></p>
 
-      <p>
-        <em>Hint:</em> If you think the driver or fare inspector will
-        actually check it, the daily security code is the same on a
-        $2.00 BaltimoreLink ticket as it is on a $9.00 MARC Train
-        ticket. It's also the same on your friend's phone, or for
-        anyone else in Maryland that day.
-      </p>
+      <ol>
+        <li>
+          <a href="https://michael.orlitzky.com/articles/charmbypass_pt._1%3A_introducing_charmbypass.xhtml">
+            Introduction
+          </a>
+        </li>
+      </ol>
 
       <form>
         <fieldset>
@@ -273,29 +246,51 @@
                    pattern="[a-zA-Z0-9]*" />
           </div>
 
-          <p>Zone:</p>
+          <p>
+            Zone<sup>&dagger;</sup>:
+          </p>
           <div>
-            <input required type="radio" id="zone1" name="zone" value="Zone 1" />
+            <input type="radio" required
+                   name="zone"
+                   id="zone1"
+                   value="Zone 1" />
             <label for="zone1">Zone 1</label>
           </div>
           <div>
-            <input required type="radio" id="zone2" name="zone" value="Zone 2" />
+            <input type="radio" required
+                   name="zone"
+                   id="zone2"
+                   value="Zone 2" />
             <label for="zone2">Zone 2</label>
           </div>
           <div>
-            <input required type="radio" id="zone3" name="zone" value="Zone 3" />
+            <input type="radio" required checked
+                   name="zone"
+                   id="zone3"
+                   value="Zone 3" />
             <label for="zone3">Zone 3</label>
           </div>
           <div>
-            <input required type="radio" id="zone4" name="zone" value="Zone 4" />
+            <input type="radio" required
+                   name="zone"
+                   id="zone4"
+                   value="Zone 4" />
             <label for="zone4">Zone 4</label>
           </div>
           <div>
-            <input required type="radio" id="zone5" name="zone" value="Zone 5" />
+            <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>
@@ -317,75 +312,128 @@
 
           <p>Origin:</p>
           <div>
-            <input required type="radio" id="origin1" name="origin" value="BAL" />
+            <input type="radio" required checked
+                   name="origin"
+                   id="origin1"
+                   value="BAL" />
             <label for="origin1">Baltimore/Penn (Penn Line)</label>
           </div>
           <div>
-            <input required type="radio" id="origin2" name="origin" value="BCA" />
+            <input type="radio" required
+                   name="origin"
+                   id="origin2"
+                   value="BCA" />
             <label for="origin2">Baltimore/Camden (Camden Line)</label>
           </div>
           <div>
-            <input required type="radio" id="origin3" name="origin" value="BWE" />
+            <input type="radio" required
+                   name="origin"
+                   id="origin3"
+                   value="BWE" />
             <label for="origin3">Bowie State (Penn Line)</label>
           </div>
           <div>
-            <input required type="radio" id="origin4" name="origin" value="BWI" />
+            <input type="radio" required
+                   name="origin"
+                   id="origin4"
+                   value="BWI" />
             <label for="origin4">BWI Airport (Penn Line)</label>
           </div>
           <div>
-            <input required type="radio" id="origin5" name="origin" value="CPK" />
+            <input type="radio" required
+                   name="origin"
+                   id="origin5"
+                   value="CPK" />
             <label for="origin5">College Park (Camden Line)</label>
           </div>
           <div>
-            <input required type="radio" id="origin6" name="origin" value="SEB" />
+            <input type="radio" required
+                   name="origin"
+                   id="origin6"
+                   value="SEB" />
             <label for="origin6">Seabrook (Penn Line)</label>
           </div>
           <div>
-            <input required type="radio" id="origin7" name="origin" value="WAS" />
+            <input type="radio" required
+                   name="origin"
+                   id="origin7"
+                   value="WAS" />
             <label for="origin7">Washington D.C.</label>
           </div>
           <div>
-            <input required type="radio" id="origin8" name="origin" value="WBL" />
+            <input type="radio" required
+                   name="origin"
+                   id="origin8"
+                   value="WBL" />
             <label for="origin8">West Baltimore (Penn Line)</label>
           </div>
 
           <p>Destination:</p>
           <div>
-            <input required type="radio" id="destination1" name="destination" value="BAL" />
+            <input type="radio" required
+                   name="destination"
+                   id="destination1"
+                   value="BAL" />
             <label for="destination1">Baltimore/Penn (Penn Line)</label>
           </div>
           <div>
-            <input required type="radio" id="destination2" name="destination" value="BCA" />
+            <input type="radio" required
+                   name="destination"
+                   id="destination2"
+                   value="BCA" />
             <label for="destination2">Baltimore/Camden (Camden Line)</label>
           </div>
           <div>
-            <input required type="radio" id="destination3" name="destination" value="BWE" />
+            <input type="radio" required
+                   name="destination"
+                   id="destination3"
+                   value="BWE" />
             <label for="destination3">Bowie State (Penn Line)</label>
           </div>
           <div>
-            <input required type="radio" id="destination4" name="destination" value="BWI" />
+            <input type="radio" required
+                   name="destination"
+                   id="destination4"
+                   value="BWI" />
             <label for="destination4">BWI Airport (Penn Line)</label>
           </div>
           <div>
-            <input required type="radio" id="destination5" name="destination" value="CPK" />
+            <input type="radio" required
+                   name="destination"
+                   id="destination5"
+                   value="CPK" />
             <label for="destination5">College Park (Camden Line)</label>
           </div>
           <div>
-            <input required type="radio" id="destination6" name="destination" value="SEB" />
+            <input type="radio" required
+                   name="destination"
+                   id="destination6"
+                   value="SEB" />
             <label for="destination6">Seabrook (Penn Line)</label>
           </div>
           <div>
-            <input required type="radio" id="destination7" name="destination" value="WAS" />
+            <input type="radio" required checked
+                   name="destination"
+                   id="destination7"
+                   value="WAS" />
             <label for="destination7">Washington D.C.</label>
           </div>
           <div>
-            <input required type="radio" id="destination8" name="destination" value="WBL" />
+            <input type="radio" required
+                   name="destination"
+                   id="destination8"
+                   value="WBL" />
             <label for="destination8">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" value="Generate Ticket" />
+          <input type="submit"
+                 name="go"
+                 id="marc-submit"
+                 value="Generate Ticket" />
         </fieldset>
       </form>
     </div>
@@ -394,10 +442,10 @@
 
     <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
@@ -420,9 +468,10 @@
       }
 
 
-      /******************************/
-      /* 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");
 
@@ -431,13 +480,13 @@
         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");
 
@@ -446,43 +495,37 @@
         if (params.get("servicename")) {
           sid.textContent = params.get("servicename");
         }
-
-        /* Otherwise, leave it at "BaltimoreLink" */
       }
 
 
-      /************************/
-      /* Set the service zone */
-      /************************/
-      function set_service_zone(event, zone) {
-        /* We can take the zone as a parameter too; this allows us to
-         * use this function for the (computed) MARC Train zone and
-         * not just the querystring Commuter Bus zone. The extra
-         * "event" parameter is there for the event listener, which
-         * would otherwise stuff an onload event into the zone
-         * parameter. "Thankfully" javascript lets us call a
-         * two-argument function with one argument and thereby abuse
-         * the event handler for this. */
+      /**
+       * Set the zone from the given "zone" parameter and then unhide it.
+       */
+      function set_zone(zone) {
         const z = document.getElementById("zone");
-        const params = new URLSearchParams(document.location.search);
-
-        if (zone) {
-          z.textContent = zone;
-          z.style.display = "block"; /* It's hidden by default */
-        }
-        else if (params.get("zone")) {
-          /* Get the "zone" from the querystring if it's there */
-          z.textContent = params.get("zone");
-          z.style.display = "block"; /* It's hidden by default */
-        }
-
-        /* Otherwise, leave it blank (and hidden) */
-      }
-
-      /***********************************************************/
-      /* Resize the  ticket background based on the service name */
-      /***********************************************************/
 
+        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);
@@ -490,7 +533,7 @@
         const t = document.getElementById("ticket");
         const sn = document.getElementById("servicename");
 
-        if (params.get("servicename") == "Commuter Bus") {
+        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
@@ -507,22 +550,20 @@
            * tickets overlayed in inkscape */
           sn.setAttribute("transform", "translate(0 64.28)");
         }
-        else if (params.get("servicename") == "MARC Train") {
+        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)");
         }
-
-        /* Otherwise, leave it alone. The SVG was designed with the
-         * BaltimoreLink ticket in mind */
       }
 
-      /****************************************/
-      /* 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");
 
@@ -548,6 +589,16 @@
       }
 
 
+      /**
+       * 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");
@@ -566,17 +617,16 @@
 
         /* 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;
 
@@ -588,22 +638,22 @@
         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();
 
-        /* BaltimoreLink and MARC Train are valid for an hour and a half */
+        /* BaltimoreLink and MARC Train */
         let minutes = 90;
         const params = new URLSearchParams(document.location.search);
-        if (params.get("servicename") == "Commuter Bus") {
-          /* But commuter bus tickets are only valid for ten minutes */
+        if (params.get("servicename") === "Commuter Bus") {
+          /* Commuter bus tickets are only valid for ten minutes */
           minutes = 10;
         }
 
@@ -626,56 +676,70 @@
       }
 
 
-      /*********************************************************/
-      /* 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");
 
-      /* We always start in "day" mode */
-      is_day = true;
-
-      function set_day() {
-        sky.style.fill = "#efb02f";
-      }
-
-      function set_night() {
-        sky.style.fill = "#143b66";
-      }
-
-      function swap_colors() {
-        if (is_day) {
-          set_night();
-          is_day = false;
+        if (sky.getAttribute("class") === "night") {
+          sky.setAttribute("fill", "#efb02f");
+          sky.setAttribute("class", "day");
         }
         else {
-          set_day();
-          is_day = true;
+          /* 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 MARC "zone" from its origin/destination */
-      /*******************************************************/
-
-      /* Sorted on the first component, then the second */
-      const zone_map = {
-        BAL_BWE: 2,
-        BAL_BWI: 1,
-        BAL_SEB: 3,
-        BAL_WAS: 4,
-        BAL_WBL: 1,
-        BCA_CPK_: 3,
-        BCA_WAS_: 4,
-        BWI_BWE: 1,
-        BWI_WAS: 3,
-        BWI_WBL: 1
-      };
-
-      /* Compute the zone (string) for the given origin/destination pair.
+      /**
+       * 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 the empty string is
-       * returned. */
+       * 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_SEB: 3,
+          BAL_WAS: 4,
+          BAL_WBL: 1,
+          BCA_CPK: 3,
+          BCA_WAS: 4,
+          BWE_BWI: 1,
+          BWE_SEB: 1,
+          BWE_WAS: 2,
+          BWE_WBL: 2,
+          BWI_SEB: 2,
+          BWI_WAS: 3,
+          BWI_WBL: 1,
+          SEB_WAS: 1,
+          SEB_WBL: 3,
+          WAS_WBL: 4
+        };
+
         /* Forward direction key for zone_map */
         const fwd = src + "_" +  dest;
 
@@ -706,26 +770,42 @@
           case 4:
             return "Four Zone";
           default:
-            return "";
+            return null;
         }
       }
 
-      function set_marc_zone() {
+
+      /**
+       * 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);
-        if (params.get("origin") && params.get("destination")) {
-          const src = params.get("origin");
-          const dest = params.get("destination");
-          const zone = compute_marc_zone(src, dest);
+        const src = params.get("origin");
+        const dest = params.get("destination");
 
-          set_service_zone(null, zone);
+        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 */
-      /*****************************************************/
-
+      /**
+       * 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")) {
@@ -744,13 +824,14 @@
         origin.textContent = params.get("origin");
         destination.textContent = params.get("destination");
 
-        origindest.style.display = "block"; /* It's hidden by default */
+        origindest.style.display = "block"; /* hidden by default */
       }
 
-      /******************************************/
-      /* Display the ticket (and hide the menu) */
-      /******************************************/
 
+      /**
+       * 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
@@ -765,6 +846,79 @@
         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 */
       /*****************************************************/
@@ -786,9 +940,6 @@
         /* Set the service name when the page has loaded */
         window.addEventListener("load", set_service_name);
 
-        /* Set the service zone when the page has loaded */
-        window.addEventListener("load", set_service_zone);
-
         /* Resize the ticket background if necessary */
         window.addEventListener("load", resize_ticket);
 
@@ -805,11 +956,38 @@
         /* Set the MARC Train origin and destination, if applicable */
         window.addEventListener("load", set_marc_origin_destination);
 
-        /* Set the MARC Train zone, if applicable */
-        window.addEventListener("load", set_marc_zone);
+        /* 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_colors);
+        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>