X-Git-Url: https://gitweb.michael.orlitzky.com/?a=blobdiff_plain;ds=sidebyside;f=index.html.in;h=e129eeaf84ff70aaf50915ba8995f98d96d09f86;hb=ea8e2dc15b38517f6ffef061ffdf01a76a57b122;hp=0c18fbb0672847939c1865f2bc700cc9b62045c9;hpb=23ba3ab26448790a5f69f2cd5f29bc2fc7c7ec0b;p=charm-bypass.git

diff --git a/index.html.in b/index.html.in
index 0c18fbb..e129eea 100644
--- a/index.html.in
+++ b/index.html.in
@@ -4,71 +4,55 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <title>
-      CharmBypass.
+      CharmBypass: doing transit equity whether they like it or not
     </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;
+      input[type=submit] {
+        margin-top: 1em;
+        margin-bottom: 1em;
       }
 
       svg {
-	/* Set the height to 100% of the screen, which we'll keep; and the
-	 *  initial position to (0,0), which we're going to change
-	 * every time the window is resized, because the exact amount
-	 * that we have to slide the SVG to the left to get the ticket
-	 * into the center will change. */
-	position: fixed;
-	top: 0;
-	left: 0;
-	height: 100%;
+        /* Set the height to 100% of the screen, which we'll keep; and the
+         *  initial position to (0,0), which we're going to change
+         * every time the window is resized, because the exact amount
+         * that we have to slide the SVG to the left to get the ticket
+         * into the center will change. */
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100%;
+
+        /* Hide everything by default. We only show it once the user has
+         * submitted the menu form */
+        display: none;
       }
 
       /* The blinking fade in/out animation for the ticket date and time */
       @keyframes blink {
-	25% {
-	  opacity: 0.5;
-	}
-	50% {
-	  opacity: 0;
-	}
-	75% {
-	  opacity: 0.5;
-	}
+        25% {
+          opacity: 0.5;
+        }
+        50% {
+          opacity: 0;
+        }
+        75% {
+          opacity: 0.5;
+        }
       }
 
       #tickettime, #ticketdate {
-	/* 300 two-second blinks is ten minutes */
-	animation: blink 2s linear 300;
+        /* 300 two-second blinks is ten minutes */
+        animation: blink 2s linear 300;
       }
 
       /* Define, load, and specify the custom font we use for the ticket
        * date, time, and service name. */
       @font-face {
-	font-family: "CharmBypass Regular";
-	src:
-	  url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
+        font-family: "CharmBypass Regular";
+        src:
+          url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
       }
 
       #servicename, #tickettime, #ticketdate, #codetext {
@@ -76,13 +60,13 @@
       }
 
       @font-face {
-	font-family: "CharmBypass Bold";
-	src:
-	  url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
+        font-family: "CharmBypass Bold";
+        src:
+          url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
       }
 
-      #serviceletter {
-	font-family: "CharmBypass Bold", sans-serif;
+      #serviceid {
+        font-family: "CharmBypass Bold", sans-serif;
         font-weight: bold;
       }
 
@@ -92,141 +76,306 @@
 
       /* 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 23s 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 17s linear infinite;
       }
 
 
       /* Tram */
       @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 11s 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 40s 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 40s 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 30s 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 30s 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 35s 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 35s linear infinite;
       }
     </style>
   </head>
 
   <body>
+    <div id="menu">
+      <h1>CharmBypass</h1>
+      <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>
+      </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"
+                   type="text"
+                   minlength="2"
+                   maxlength="2"
+                   pattern="[a-zA-Z0-9]+" />
+          </div>
+
+          <h3>Zone</h3>
+          <div>
+            <input required type="radio" id="zone1" name="zone" value="Zone 1" />
+            <label for="zone1">Zone 1</label>
+          </div>
+          <div>
+            <input required type="radio" id="zone2" name="zone" value="Zone 2" />
+            <label for="zone2">Zone 2</label>
+          </div>
+          <div>
+            <input required type="radio" id="zone3" name="zone" value="Zone 3" />
+            <label for="zone3">Zone 3</label>
+          </div>
+          <div>
+            <input required type="radio" id="zone4" name="zone" value="Zone 4" />
+            <label for="zone4">Zone 4</label>
+          </div>
+          <div>
+            <input required type="radio" id="zone5" name="zone" value="Zone 5" />
+            <label for="zone5">Zone 5</label>
+          </div>
+
+          <input type="submit" name="go" value="Get Ticket" />
+        </fieldset>
+      </form>
+      <form>
+        <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 required type="radio" id="origin1" name="origin" value="BAL" />
+            <label for="origin1">Baltimore/Penn (Penn Line)</label>
+          </div>
+          <div>
+            <input required type="radio" id="origin2" name="origin" value="BCA" />
+            <label for="origin2">Baltimore/Camden (Camden Line)</label>
+          </div>
+          <div>
+            <input required type="radio" id="origin3" name="origin" value="BWE" />
+            <label for="origin3">Bowie State (Penn Line)</label>
+          </div>
+          <div>
+            <input required type="radio" id="origin4" name="origin" value="BWI" />
+            <label for="origin4">BWI Airport (Penn Line)</label>
+          </div>
+          <div>
+            <input required type="radio" id="origin5" name="origin" value="CPK" />
+            <label for="origin5">College Park (Camden Line)</label>
+          </div>
+          <div>
+            <input required type="radio" id="origin6" name="origin" value="SEB" />
+            <label for="origin6">Seabrook (Penn Line)</label>
+          </div>
+          <div>
+            <input required type="radio" id="origin7" name="origin" value="WAS" />
+            <label for="origin7">Washington D.C.</label>
+          </div>
+          <div>
+            <input required type="radio" id="origin8" name="origin" value="WBL" />
+            <label for="origin8">West Baltimore (Penn Line)</label>
+          </div>
+
+          <h3>Destination</h3>
+          <div>
+            <input required type="radio" id="destination1" name="destination" value="BAL" />
+            <label for="destination1">Baltimore/Penn (Penn Line)</label>
+          </div>
+          <div>
+            <input required type="radio" id="destination2" name="destination" value="BCA" />
+            <label for="destination2">Baltimore/Camden (Camden Line)</label>
+          </div>
+          <div>
+            <input required type="radio" id="destination3" name="destination" value="BWE" />
+            <label for="destination3">Bowie State (Penn Line)</label>
+          </div>
+          <div>
+            <input required type="radio" id="destination4" name="destination" value="BWI" />
+            <label for="destination4">BWI Airport (Penn Line)</label>
+          </div>
+          <div>
+            <input required type="radio" id="destination5" name="destination" value="CPK" />
+            <label for="destination5">College Park (Camden Line)</label>
+          </div>
+          <div>
+            <input required type="radio" id="destination6" name="destination" value="SEB" />
+            <label for="destination6">Seabrook (Penn Line)</label>
+          </div>
+          <div>
+            <input required type="radio" id="destination7" name="destination" value="WAS" />
+            <label for="destination7">Washington D.C.</label>
+          </div>
+          <div>
+            <input required type="radio" id="destination8" name="destination" value="WBL" />
+            <label for="destination8">West Baltimore (Penn Line)</label>
+          </div>
+
+          <input type="hidden" name="serviceid" value="R" />
+          <input type="hidden" name="servicename" value="MARC Train" />
+          <input type="submit" name="go" value="Get Ticket" />
+        </fieldset>
+      </form>
+    </div>
+
     @SVGDATA@
 
     <script>
@@ -236,26 +385,56 @@
       /***********************************************/
 
       function center_ticket() {
-	/* We're relying on the SVG being the full height of the
-	 * viewport already, and on the aspect ratio being
-	 * preserved. First, find the center of the ticket. */
-	const r = document.getElementById("ticket").getBoundingClientRect();
-	const c = r.left + (r.width / 2);
+        /* We're relying on the SVG being the full height of the
+         * viewport already, and on the aspect ratio being
+         * preserved. First, find the center of the ticket. */
+        const r = document.getElementById("ticket").getBoundingClientRect();
+        const c = r.left + (r.width / 2);
+
+        /* That's the center-line of the ticket. We want to move it to
+         * the center-line of the viewport. */
+        const vc = document.documentElement.clientWidth / 2;
 
-	/* That's the center-line of the ticket. We want to move it to
-	 * the center-line of the viewport. */
-	const vc = document.documentElement.clientWidth / 2;
+        /* This is how much we need to translate the SVG */
+        const hdelta = vc - c;
+
+        /* But before we can set the absolute left-coordinate of the
+         * SVG, we need to know where it is now. Note: without the
+         * "px" this doesn't default to pixels like CSS does. */
+        const svg = document.querySelector("svg");
+        svg.style.left = (svg.getBoundingClientRect().left + hdelta) + "px";
+      }
 
-	/* This is how much we need to translate the SVG */
-	const hdelta = vc - c;
 
-	/* But before we can set the absolute left-coordinate of the
-	 * SVG, we need to know where it is now. Note: without the
-	 * "px" this doesn't default to pixels like CSS does. */
-	const svg = document.querySelector("svg");
-	svg.style.left = (svg.getBoundingClientRect().left + hdelta) + "px";
+      /******************************/
+      /* Set the service identifier */
+      /******************************/
+      function set_service_id() {
+        const sid = document.getElementById("serviceid");
+
+        /* 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 */
+      /******************************/
+      function set_service_name() {
+        const sid = document.getElementById("servicename");
+
+        /* Get the "servicename" from the querystring if it's there */
+        const params = new URLSearchParams(document.location.search);
+        if (params.get("servicename")) {
+          sid.textContent = params.get("servicename");
+        }
+
+        /* Otherwise, leave it at "BaltimoreLink" */
+      }
 
       /****************************************/
       /* Set and reposition the security code */
@@ -265,9 +444,9 @@
         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 */
@@ -289,9 +468,10 @@
       function center_code() {
         /* Center the security code inside its red box */
         const ct = document.getElementById("codetext");
+        const bg = document.getElementById("codebg");
 
         /* First, find the center of the red box */
-        const r1 = document.getElementById("codebg").getBoundingClientRect();
+        const r1 = bg.getBoundingClientRect();
         const c1 = r1.left + (r1.width / 2);
 
         /* Now the center of the code text */
@@ -301,12 +481,30 @@
         /* What do we add to c2 to make it equal to c1? */
         const hdelta = c1 - c2;
 
+        /* We've measured everything so far in "client rect"
+         * coordinates, because that's the only available measurement
+         * we have for the width of the <text> element 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
+         * 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
+         * distances (what we have) into SVG distances (what we want) */
+        const client_to_svg = parseFloat(bg.getAttribute("width"))/r1.width;
+
+        /* Convert hdelta from client rect to SVG coordinates */
+        const svg_hdelta = hdelta * client_to_svg;
+
         /* Since this <text> element has an "x" attribute it's easier for
          * us to shift that than it is to mess with the "left" style. */
-        ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + hdelta);
+        ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + svg_hdelta);
       }
 
-
       /*****************************************/
       /* Next, set up the ticket date and time */
       /*****************************************/
@@ -318,11 +516,19 @@
          * one-way tickets. */
         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 are valid for an hour and a half */
+        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 */
+          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();
@@ -345,51 +551,149 @@
       is_day = true;
 
       function set_day() {
-	sky.style.fill = "#efb02f";
+        sky.style.fill = "#efb02f";
       }
 
       function set_night() {
-	sky.style.fill = "#143b66";
+        sky.style.fill = "#143b66";
       }
 
       function swap_colors() {
-	if (is_day) {
-	  set_night();
-	  is_day = false;
-	}
-	else {
-	  set_day();
-	  is_day = true;
-	}
+        if (is_day) {
+          set_night();
+          is_day = false;
+        }
+        else {
+          set_day();
+          is_day = true;
+        }
+      }
+
+
+      /*******************************************************/
+      /* 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.
+       * 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;
+
+        /* Reverse direction key for zone_map. The zone_map only
+         * has them listed in one direction, so we check both
+         * directions here. */
+        const rev = dest + "_" +  src;
+
+        /* The default. Obviously wrong for when we don't
+         * have the necessary data. */
+        let zone = -1;
+
+        if (zone_map[fwd]) {
+          zone = zone_map[fwd];
+        }
+        else if (zone_map[rev]) {
+          zone = zone_map[rev];
+        }
+
+        /* Convert the number to a string */
+        switch (zone) {
+          case 1:
+            return "One Zone";
+          case 2:
+            return "Two Zone";
+          case 3:
+            return "Three Zone";
+          case 4:
+            return "Four Zone";
+          default:
+            return "";
+        }
+      }
+
+      function set_marc_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);
+
+          /* TODO: actually set the zone */
+          alert(zone);
+        }
       }
 
+      /******************************************/
+      /* Display the ticket (and hide the menu) */
+      /******************************************/
+
+      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";
+      }
 
       /*****************************************************/
       /* 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);
+
+        /* Center the ticket once when the page has loaded */
+        window.addEventListener("load", center_ticket);
 
-      /* Re-center the ticket when the window is resized */
-      window.addEventListener("resize", center_ticket);
+        /* Re-center the ticket when the window is resized */
+        window.addEventListener("resize", center_ticket);
 
-      /* Set the security code text when the page has loaded */
-      window.addEventListener("load", set_code);
+        /* Set the service identifier when the page has loaded */
+        window.addEventListener("load", set_service_id);
 
-      /* Center the security code text when the page has loaded;
-	in particular, after we set it */
-      window.addEventListener("load", center_code);
+        /* Set the service name when the page has loaded */
+        window.addEventListener("load", set_service_name);
 
-      /* Re-center the security code when the window is resized,
-	 and in particular after the ticket is re-centered */
-      window.addEventListener("resize", center_code);
+        /* Set the security code text when the page has loaded */
+        window.addEventListener("load", set_code);
 
-      /* Set the ticket expiration date/time upon page load */
-      window.addEventListener("load", set_ticket_expiry);
+        /* Center the security code text when the page has loaded; in
+         * particular, after we set the code. */
+        window.addEventListener("load", center_code);
 
-      /* Swap colors when the screen is tapped */
-      document.body.addEventListener("click", swap_colors);
+        /* Set the ticket expiration date/time upon page load */
+        window.addEventListener("load", set_ticket_expiry);
+
+       /* Set the MARC Train zone, if applicable */
+       window.addEventListener("load", set_marc_zone);
+
+        /* Swap colors when the screen is tapped */
+        document.body.addEventListener("click", swap_colors);
+      }
 
     </script>
   </body>