]> 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 ac8b2befd2fa04818f6e47fddf15e2ddaf101693..ce22f37a7eb472ed16ccb76893392dc82b182713 100644 (file)
@@ -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;
         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
       }
 
       #bus {
-        animation: busroll 23s linear infinite;
+        animation: busroll 15s linear infinite;
       }
 
 
       }
 
       #tram {
-        animation: tramroll 17s linear infinite;
+        animation: tramroll 15s linear infinite;
       }
 
 
       }
 
       #train {
-        animation: trainroll 11s linear infinite;
+        animation: trainroll 10s linear infinite;
       }
 
 
       }
 
       #clouds {
-        animation: cloudsfloat 40s linear infinite;
+        animation: cloudsfloat 25s linear infinite;
       }
 
       @keyframes cloudscopyfloat {
       }
 
       #cloudscopy {
-        animation: cloudscopyfloat 40s linear infinite;
+        animation: cloudscopyfloat 25s linear infinite;
       }
 
 
 
       #trees {
         /* The trees move a little faster than the clouds */
-        animation: treespass 30s linear infinite;
+        animation: treespass 16s linear infinite;
       }
 
       @keyframes treescopypass {
 
       #treescopy {
         /* The trees move a little faster than the clouds */
-        animation: treescopypass 30s linear infinite;
+        animation: treescopypass 16s linear infinite;
       }
 
 
       #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 {
       #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>
-      <h2>it's transit equity y'all</h2>
-
-      <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>
+      <p><strong>got that <em>transit equity</em></strong></p>
 
       <form>
         <fieldset>
               Daily security code (optional):
             </label>
             <input id="code1"
-                   name="code"
+                   name="code" value=""
                    type="text"
                    size="2"
                    minlength="2"
               Daily security code (optional):
             </label>
             <input id="code2"
-                   name="code"
+                   name="code" value=""
                    type="text"
                    size="2"
                    minlength="2"
                    pattern="[a-zA-Z0-9]*" />
           </div>
 
-          <p>Zone:</p>
+          <p>
+            Zone<sup>&dagger;</sup>:
+          </p>
           <div>
             <input type="radio" required
                    name="zone"
           </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>
               Daily security code (optional):
             </label>
             <input id="code3"
-                   name="code"
+                   name="code" value=""
                    type="text"
                    size="2"
                    minlength="2"
           <div>
             <input type="radio" required checked
                    name="origin"
-                   id="origin1"
+                   id="origin_BAL"
                    value="BAL" />
-            <label for="origin1">Baltimore/Penn (Penn Line)</label>
+            <label for="origin_BAL">Baltimore/Penn (Penn Line)</label>
           </div>
           <div>
             <input type="radio" required
                    name="origin"
-                   id="origin2"
+                   id="origin_BCA"
                    value="BCA" />
-            <label for="origin2">Baltimore/Camden (Camden Line)</label>
+            <label for="origin_BCA">Baltimore/Camden (Camden Line)</label>
           </div>
           <div>
             <input type="radio" required
                    name="origin"
-                   id="origin3"
+                   id="origin_BWE"
                    value="BWE" />
-            <label for="origin3">Bowie State (Penn Line)</label>
+            <label for="origin_BWE">Bowie State (Penn Line)</label>
           </div>
           <div>
             <input type="radio" required
                    name="origin"
-                   id="origin4"
+                   id="origin_BWI"
                    value="BWI" />
-            <label for="origin4">BWI Airport (Penn Line)</label>
+            <label for="origin_BWI">BWI Airport (Penn Line)</label>
           </div>
           <div>
             <input type="radio" required
                    name="origin"
-                   id="origin5"
+                   id="origin_CPK"
                    value="CPK" />
-            <label for="origin5">College Park (Camden Line)</label>
+            <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="origin6"
+                   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="origin6">Seabrook (Penn Line)</label>
+            <label for="origin_SEB">Seabrook (Penn Line)</label>
           </div>
           <div>
             <input type="radio" required
                    name="origin"
-                   id="origin7"
+                   id="origin_WAS"
                    value="WAS" />
-            <label for="origin7">Washington D.C.</label>
+            <label for="origin_WAS">Washington D.C.</label>
           </div>
           <div>
             <input type="radio" required
                    name="origin"
-                   id="origin8"
+                   id="origin_WBL"
                    value="WBL" />
-            <label for="origin8">West Baltimore (Penn Line)</label>
+            <label for="origin_WBL">West Baltimore (Penn Line)</label>
           </div>
 
           <p>Destination:</p>
           <div>
             <input type="radio" required
                    name="destination"
-                   id="destination1"
+                   id="destination_BAL"
                    value="BAL" />
-            <label for="destination1">Baltimore/Penn (Penn Line)</label>
+            <label for="destination_BAL">Baltimore/Penn (Penn Line)</label>
           </div>
           <div>
             <input type="radio" required
                    name="destination"
-                   id="destination2"
+                   id="destination_BCA"
                    value="BCA" />
-            <label for="destination2">Baltimore/Camden (Camden Line)</label>
+            <label for="destination_BCA">Baltimore/Camden (Camden Line)</label>
           </div>
           <div>
             <input type="radio" required
                    name="destination"
-                   id="destination3"
+                   id="destination_BWE"
                    value="BWE" />
-            <label for="destination3">Bowie State (Penn Line)</label>
+            <label for="destination_BWE">Bowie State (Penn Line)</label>
           </div>
           <div>
             <input type="radio" required
                    name="destination"
-                   id="destination4"
+                   id="destination_BWI"
                    value="BWI" />
-            <label for="destination4">BWI Airport (Penn Line)</label>
+            <label for="destination_BWI">BWI Airport (Penn Line)</label>
           </div>
           <div>
             <input type="radio" required
                    name="destination"
-                   id="destination5"
+                   id="destination_CPK"
                    value="CPK" />
-            <label for="destination5">College Park (Camden Line)</label>
+            <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="destination6"
+                   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="destination6">Seabrook (Penn Line)</label>
+            <label for="destination_SEB">Seabrook (Penn Line)</label>
           </div>
           <div>
             <input type="radio" required checked
                    name="destination"
-                   id="destination7"
+                   id="destination_WAS"
                    value="WAS" />
-            <label for="destination7">Washington D.C.</label>
+            <label for="destination_WAS">Washington D.C.</label>
           </div>
           <div>
             <input type="radio" required
                    name="destination"
-                   id="destination8"
+                   id="destination_WBL"
                    value="WBL" />
-            <label for="destination8">West Baltimore (Penn Line)</label>
+            <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" value="Generate Ticket" />
+          <input type="submit"
+                 name="go"
+                 id="marc-submit"
+                 value="Generate Ticket" />
         </fieldset>
       </form>
     </div>
        */
       function compute_marc_zone(src, dest) {
 
-        /* Sorted on the first component, then the second */
+        /* 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
+          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 */
         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.
        *
        * 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;
           x.setCustomValidity('');
         })
 
-        if (compute_marc_zone(src.value, dest.value) === null) {
-          let err = "Origin and destination are on different lines!";
+        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;
+          }
         }
       }
 
          (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. */
+        /* 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>