]> gitweb.michael.orlitzky.com - charm-bypass.git/blobdiff - index.html.in
index.html.in: tweak the slogan and add a security code hint
[charm-bypass.git] / index.html.in
index 2dd939fd5868b6153c7cf1f53a536997c04ab24f..e129eeaf84ff70aaf50915ba8995f98d96d09f86 100644 (file)
@@ -4,8 +4,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <title>
-      CharmBypass: you're getting transit equity whether you like it
-      or not
+      CharmBypass: doing transit equity whether they like it or not
     </title>
 
     <style>
   <body>
     <div id="menu">
       <h1>CharmBypass</h1>
-      <h2>you're getting transit equity whether you like it or not</h2>
+      <h2>doing transit equity whether they like it or not</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>
+
       <form>
         <fieldset>
           <legend>BaltimoreLink (Bus, Light Rail, Metro)</legend>
+          <div>
+            <label for="code1">
+              Daily security code (optional):
+            </label>
+            <input id="code1"
+                   name="code"
+                   type="text"
+                   minlength="2"
+                   maxlength="2"
+                   pattern="[a-zA-Z0-9]+" />
+          </div>
           <input type="hidden" name="servicename" value="BaltimoreLink" />
           <input type="submit" name="go" value="Get Ticket" />
         </fieldset>
           <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"
+                   type="text"
+                   minlength="2"
+                   maxlength="2"
+                   pattern="[a-zA-Z0-9]+" />
+          </div>
+
           <h3>Zone</h3>
           <div>
-            <input type="radio" id="zone1" name="zone" value="Zone 1" />
+            <input required type="radio" id="zone1" name="zone" value="Zone 1" />
             <label for="zone1">Zone 1</label>
           </div>
           <div>
-            <input type="radio" id="zone2" name="zone" value="Zone 2" />
+            <input required type="radio" id="zone2" name="zone" value="Zone 2" />
             <label for="zone2">Zone 2</label>
           </div>
           <div>
-            <input type="radio" id="zone3" name="zone" value="Zone 3" />
+            <input required type="radio" id="zone3" name="zone" value="Zone 3" />
             <label for="zone3">Zone 3</label>
           </div>
           <div>
-            <input type="radio" id="zone4" name="zone" value="Zone 4" />
+            <input required type="radio" id="zone4" name="zone" value="Zone 4" />
             <label for="zone4">Zone 4</label>
           </div>
           <div>
-            <input type="radio" id="zone5" name="zone" value="Zone 5" />
+            <input required type="radio" id="zone5" name="zone" value="Zone 5" />
             <label for="zone5">Zone 5</label>
           </div>
 
         <fieldset>
           <legend>MARC Train</legend>
 
+         <div>
+            <label for="code3">
+              Daily security code (optional):
+            </label>
+           <input id="code3"
+                   name="code"
+                   type="text"
+                   minlength="2"
+                   maxlength="2"
+                   pattern="[a-zA-Z0-9]+" />
+          </div>
+
           <h3>Origin</h3>
 
           <div>
-            <input type="radio" id="origin1" name="origin" value="BAL" />
+            <input required type="radio" id="origin1" name="origin" value="BAL" />
             <label for="origin1">Baltimore/Penn (Penn Line)</label>
           </div>
           <div>
-            <input type="radio" id="origin2" name="origin" value="BCA" />
+            <input required type="radio" id="origin2" name="origin" value="BCA" />
             <label for="origin2">Baltimore/Camden (Camden Line)</label>
           </div>
           <div>
-            <input type="radio" id="origin3" name="origin" value="BWE" />
+            <input required type="radio" id="origin3" name="origin" value="BWE" />
             <label for="origin3">Bowie State (Penn Line)</label>
           </div>
           <div>
-            <input type="radio" id="origin4" name="origin" value="BWI" />
+            <input required type="radio" id="origin4" name="origin" value="BWI" />
             <label for="origin4">BWI Airport (Penn Line)</label>
           </div>
           <div>
-            <input type="radio" id="origin5" name="origin" value="CPK" />
+            <input required type="radio" id="origin5" name="origin" value="CPK" />
             <label for="origin5">College Park (Camden Line)</label>
           </div>
           <div>
-            <input type="radio" id="origin6" name="origin" value="SEB" />
+            <input required type="radio" id="origin6" name="origin" value="SEB" />
             <label for="origin6">Seabrook (Penn Line)</label>
           </div>
           <div>
-            <input type="radio" id="origin7" name="origin" value="WAS" />
+            <input required type="radio" id="origin7" name="origin" value="WAS" />
             <label for="origin7">Washington D.C.</label>
           </div>
           <div>
-            <input type="radio" id="origin8" name="origin" value="WBL" />
+            <input required type="radio" id="origin8" name="origin" value="WBL" />
             <label for="origin8">West Baltimore (Penn Line)</label>
           </div>
 
           <h3>Destination</h3>
           <div>
-            <input type="radio" id="destination1" name="destination" value="BAL" />
+            <input required type="radio" id="destination1" name="destination" value="BAL" />
             <label for="destination1">Baltimore/Penn (Penn Line)</label>
           </div>
           <div>
-            <input type="radio" id="destination2" name="destination" value="BCA" />
+            <input required type="radio" id="destination2" name="destination" value="BCA" />
             <label for="destination2">Baltimore/Camden (Camden Line)</label>
           </div>
           <div>
-            <input type="radio" id="destination3" name="destination" value="BWE" />
+            <input required type="radio" id="destination3" name="destination" value="BWE" />
             <label for="destination3">Bowie State (Penn Line)</label>
           </div>
           <div>
-            <input type="radio" id="destination4" name="destination" value="BWI" />
+            <input required type="radio" id="destination4" name="destination" value="BWI" />
             <label for="destination4">BWI Airport (Penn Line)</label>
           </div>
           <div>
-            <input type="radio" id="destination5" name="destination" value="CPK" />
+            <input required type="radio" id="destination5" name="destination" value="CPK" />
             <label for="destination5">College Park (Camden Line)</label>
           </div>
           <div>
-            <input type="radio" id="destination6" name="destination" value="SEB" />
+            <input required type="radio" id="destination6" name="destination" value="SEB" />
             <label for="destination6">Seabrook (Penn Line)</label>
           </div>
           <div>
-            <input type="radio" id="destination7" name="destination" value="WAS" />
+            <input required type="radio" id="destination7" name="destination" value="WAS" />
             <label for="destination7">Washington D.C.</label>
           </div>
           <div>
-            <input type="radio" id="destination8" name="destination" value="WBL" />
+            <input required type="radio" id="destination8" name="destination" value="WBL" />
             <label for="destination8">West Baltimore (Penn Line)</label>
           </div>
 
         /* Get the "code" from the querystring if it's there */
         const params = new URLSearchParams(document.location.search);
         if (params.get("code")) {
-          ct.textContent = params.get("code");
+          ct.textContent = params.get("code").toUpperCase();
         }
         else {
           /* Otherwise, use a random code */
       /* 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
       };
 
-      /* The default. Obviously wrong for when we don't
-       * have the necessary data. */
-      let zone = 0;
-
+      /* 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. */
       function compute_marc_zone(src, dest) {
         /* Forward direction key for zone_map */
         const fwd = src + "_" +  dest;
          * directions here. */
         const rev = dest + "_" +  src;
 
+        /* The default. Obviously wrong for when we don't
+         * have the necessary data. */
+        let zone = -1;
+
         if (zone_map[fwd]) {
           zone = zone_map[fwd];
         }
           case 4:
             return "Four Zone";
           default:
-            return "??? Zone";
+            return "";
         }
       }