index.html.in

   1 <!doctype html>
   2 <html lang="en-US">
   3   <head>
   4     <meta charset="utf-8">
   5     <meta name="viewport" content="width=device-width, initial-scale=1" />
   6     <link rel="icon"
   7           type="image/svg+xml"
   8           href="data:image/svg+xml;base64,@FAVICON@" />
   9
  10     <title>
  11       CharmBypass: got that transit equity
  12     </title>
  13
  14     <style>
  15       body {
  16         /* For consistency with the SVG */
  17         font-family: sans-serif;
  18       }
  19
  20       fieldset {
  21         margin-top: 1em;
  22         padding-top: 1em;
  23       }
  24
  25       input[type=submit] {
  26         margin-top: 1em;
  27         margin-bottom: 1em;
  28       }
  29
  30       legend {
  31         font-weight: bold;
  32       }
  33
  34       /* Display form errors for the one browser that doesn't support
  35        * them natively, mobile Firefox. We use "visibility" to toggle
  36        * it on and off, but "display" to hide it completely in non-
  37        * stupid web browsers. */
  38       #marc-form-errors {
  39         color: #a00;
  40         visibility: hidden;
  41         display: none;
  42       }
  43
  44       svg {
  45         /* Set the height to 100% of the screen, which we'll keep; and the
  46          * initial position to (0,0), which we're going to change
  47          * every time the window is resized, because the exact amount
  48          * that we have to slide the SVG to the left to get the ticket
  49          * into the center will change. */
  50         position: fixed;
  51         top: 0;
  52         left: 0;
  53         height: 100%;
  54
  55         /* Hide everything by default. We only show it once the user has
  56          * submitted the menu form */
  57         display: none;
  58       }
  59
  60       /* The blinking fade in/out animation for the ticket date and time */
  61       @keyframes blink {
  62         25% { opacity: 0.5; }
  63         50% { opacity: 0;   }
  64         75% { opacity: 0.5; }
  65       }
  66
  67       #tickettime, #ticketdate {
  68         /* 300 two-second blinks is ten minutes */
  69         animation: blink 2s linear 300;
  70       }
  71
  72       /* Define, load, and specify the custom font we use for the ticket
  73        * date, time, and service name. */
  74       @font-face {
  75         font-family: "CharmBypass Regular";
  76         src:
  77           url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
  78       }
  79
  80       #origindest, #servicename, #tickettime, #ticketdate, #codetext, #zone {
  81         font-family: "CharmBypass Regular", sans-serif;
  82       }
  83
  84       @font-face {
  85         font-family: "CharmBypass Bold";
  86         src:
  87           url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
  88       }
  89
  90       #serviceid {
  91         font-family: "CharmBypass Bold", sans-serif;
  92       }
  93
  94       /************************/
  95       /* Scrolling animations */
  96       /************************/
  97
  98       /* Bus */
  99       @keyframes busroll {
 100         from { transform: translateX(0%);    }
 101         to   { transform: translateX(-100%); }
 102       }
 103
 104       #bus {
 105         animation: busroll 15s linear infinite;
 106       }
 107
 108
 109       /* Tram */
 110       @keyframes tramroll {
 111         from { transform: translateX(0%);   }
 112         to   { transform: translateX(100%); }
 113       }
 114
 115       #tram {
 116         animation: tramroll 15s linear infinite;
 117       }
 118
 119
 120       /* Train */
 121       @keyframes trainroll {
 122         from { transform: translateX(0%);   }
 123         to   { transform: translateX(100%); }
 124       }
 125
 126       #train {
 127         animation: trainroll 10s linear infinite;
 128       }
 129
 130
 131       /* Clouds */
 132       @keyframes cloudsfloat {
 133         from { transform: translateX(0%);   }
 134         to   { transform: translateX(-50%); }
 135       }
 136
 137       #clouds {
 138         animation: cloudsfloat 25s linear infinite;
 139       }
 140
 141       @keyframes cloudscopyfloat {
 142         from { transform: translateX(0%);   }
 143         to   { transform: translateX(-50%); }
 144       }
 145
 146       #cloudscopy {
 147         animation: cloudscopyfloat 25s linear infinite;
 148       }
 149
 150
 151       /* Trees */
 152       @keyframes treespass {
 153         from { transform: translateX(0%);   }
 154         to   { transform: translateX(-50%); }
 155       }
 156
 157       #trees {
 158         /* The trees move a little faster than the clouds */
 159         animation: treespass 16s linear infinite;
 160       }
 161
 162       @keyframes treescopypass {
 163         from { transform: translateX(0%);   }
 164         to   { transform: translateX(-50%); }
 165       }
 166
 167       #treescopy {
 168         /* The trees move a little faster than the clouds */
 169         animation: treescopypass 16s linear infinite;
 170       }
 171
 172
 173       /* City skyline */
 174       @keyframes cityscroll {
 175         from { transform: translateX(0%);   }
 176         to   { transform: translateX(-50%); }
 177       }
 178
 179       #city {
 180         /* The city moves faster than the clouds but slower
 181          * than the trees */
 182         animation: cityscroll 20s linear infinite;
 183       }
 184
 185       @keyframes citycopyscroll {
 186         from { transform: translateX(0%);   }
 187         to   { transform: translateX(-50%); }
 188       }
 189
 190       #citycopy {
 191         /* The city moves faster than the clouds but slower
 192          * than the trees */
 193         animation: citycopyscroll 20s linear infinite;
 194       }
 195     </style>
 196   </head>
 197
 198   <body>
 199     <div id="menu">
 200       <h1>CharmBypass</h1>
 201       <p><strong>got that <em>transit equity</em></strong></p>
 202
 203       <form>
 204         <fieldset>
 205           <legend>Local Bus, Light Rail, or Metro</legend>
 206           <div>
 207             <label for="code1">
 208               Daily security code (<a href="https://michael.orlitzky.com/articles/charmbypass_pt._1%3A_introduction.xhtml#daily-security-code">optional</a>):
 209             </label>
 210             <input id="code1"
 211                    name="code" value=""
 212                    type="text"
 213                    size="2"
 214                    minlength="2"
 215                    maxlength="2"
 216                    pattern="[a-zA-Z0-9]*" />
 217           </div>
 218           <input type="hidden" name="servicename" value="BaltimoreLink" />
 219           <input type="submit" name="go" value="Generate Ticket" />
 220         </fieldset>
 221       </form>
 222       <form>
 223         <fieldset>
 224           <legend>Commuter Bus</legend>
 225           <input type="hidden" name="serviceid" value="R" />
 226           <input type="hidden" name="servicename" value="Commuter Bus" />
 227
 228           <div>
 229             <label for="code2">
 230               Daily security code (<a href="https://michael.orlitzky.com/articles/charmbypass_pt._1%3A_introduction.xhtml#daily-security-code">optional</a>):
 231             </label>
 232             <input id="code2"
 233                    name="code" value=""
 234                    type="text"
 235                    size="2"
 236                    minlength="2"
 237                    maxlength="2"
 238                    pattern="[a-zA-Z0-9]*" />
 239           </div>
 240
 241           <p>
 242             Zone<sup>&dagger;</sup>:
 243           </p>
 244           <div>
 245             <input type="radio" required
 246                    name="zone"
 247                    id="zone1"
 248                    value="Zone 1" />
 249             <label for="zone1">Zone 1</label>
 250           </div>
 251           <div>
 252             <input type="radio" required
 253                    name="zone"
 254                    id="zone2"
 255                    value="Zone 2" />
 256             <label for="zone2">Zone 2</label>
 257           </div>
 258           <div>
 259             <input type="radio" required checked
 260                    name="zone"
 261                    id="zone3"
 262                    value="Zone 3" />
 263             <label for="zone3">Zone 3</label>
 264           </div>
 265           <div>
 266             <input type="radio" required
 267                    name="zone"
 268                    id="zone4"
 269                    value="Zone 4" />
 270             <label for="zone4">Zone 4</label>
 271           </div>
 272           <div>
 273             <input type="radio" required
 274                    name="zone"
 275                    id="zone5"
 276                    value="Zone 5" />
 277             <label for="zone5">Zone 5</label>
 278           </div>
 279
 280           <input type="submit" name="go" value="Generate Ticket" />
 281
 282           <p>
 283             <sup>&dagger;</sup>
 284             On the MTA's PDF schedule for your route
 285           </p>
 286         </fieldset>
 287       </form>
 288       <form>
 289         <fieldset>
 290           <legend>MARC Train</legend>
 291
 292           <div>
 293             <label for="code3">
 294               Daily security code (<a href="https://michael.orlitzky.com/articles/charmbypass_pt._1%3A_introduction.xhtml#daily-security-code">optional</a>):
 295             </label>
 296             <input id="code3"
 297                    name="code" value=""
 298                    type="text"
 299                    size="2"
 300                    minlength="2"
 301                    maxlength="2"
 302                    pattern="[a-zA-Z0-9]*" />
 303           </div>
 304
 305           <p>Origin:</p>
 306           <div>
 307             <input type="radio" required checked
 308                    name="origin"
 309                    id="origin_BAL"
 310                    value="BAL" />
 311             <label for="origin_BAL">Baltimore/Penn (Penn Line)</label>
 312           </div>
 313           <div>
 314             <input type="radio" required
 315                    name="origin"
 316                    id="origin_BCA"
 317                    value="BCA" />
 318             <label for="origin_BCA">Baltimore/Camden (Camden Line)</label>
 319           </div>
 320           <div>
 321             <input type="radio" required
 322                    name="origin"
 323                    id="origin_BWE"
 324                    value="BWE" />
 325             <label for="origin_BWE">Bowie State (Penn Line)</label>
 326           </div>
 327           <div>
 328             <input type="radio" required
 329                    name="origin"
 330                    id="origin_BWI"
 331                    value="BWI" />
 332             <label for="origin_BWI">BWI Airport (Penn Line)</label>
 333           </div>
 334           <div>
 335             <input type="radio" required
 336                    name="origin"
 337                    id="origin_CPK"
 338                    value="CPK" />
 339             <label for="origin_CPK">College Park (Camden Line)</label>
 340           </div>
 341           <div>
 342             <input type="radio" required
 343                    name="origin"
 344                    id="origin_FRC"
 345                    value="FRC" />
 346             <label for="origin_FRC">Frederick (Brunswick Line)</label>
 347           </div>
 348           <div>
 349             <input type="radio" required
 350                    name="origin"
 351                    id="origin_HAE"
 352                    value="HAE" />
 353             <label for="origin_HAE">Halethorpe (Penn Line)</label>
 354           </div>
 355           <div>
 356             <input type="radio" required
 357                    name="origin"
 358                    id="origin_NCR"
 359                    value="NCR" />
 360             <label for="origin_NCR">New Carrollton (Penn Line)</label>
 361           </div>
 362           <div>
 363             <input type="radio" required
 364                    name="origin"
 365                    id="origin_SEB"
 366                    value="SEB" />
 367             <label for="origin_SEB">Seabrook (Penn Line)</label>
 368           </div>
 369           <div>
 370             <input type="radio" required
 371                    name="origin"
 372                    id="origin_WAS"
 373                    value="WAS" />
 374             <label for="origin_WAS">Washington D.C.</label>
 375           </div>
 376           <div>
 377             <input type="radio" required
 378                    name="origin"
 379                    id="origin_WBL"
 380                    value="WBL" />
 381             <label for="origin_WBL">West Baltimore (Penn Line)</label>
 382           </div>
 383
 384           <p>Destination:</p>
 385           <div>
 386             <input type="radio" required
 387                    name="destination"
 388                    id="destination_BAL"
 389                    value="BAL" />
 390             <label for="destination_BAL">Baltimore/Penn (Penn Line)</label>
 391           </div>
 392           <div>
 393             <input type="radio" required
 394                    name="destination"
 395                    id="destination_BCA"
 396                    value="BCA" />
 397             <label for="destination_BCA">Baltimore/Camden (Camden Line)</label>
 398           </div>
 399           <div>
 400             <input type="radio" required
 401                    name="destination"
 402                    id="destination_BWE"
 403                    value="BWE" />
 404             <label for="destination_BWE">Bowie State (Penn Line)</label>
 405           </div>
 406           <div>
 407             <input type="radio" required
 408                    name="destination"
 409                    id="destination_BWI"
 410                    value="BWI" />
 411             <label for="destination_BWI">BWI Airport (Penn Line)</label>
 412           </div>
 413           <div>
 414             <input type="radio" required
 415                    name="destination"
 416                    id="destination_CPK"
 417                    value="CPK" />
 418             <label for="destination_CPK">College Park (Camden Line)</label>
 419           </div>
 420           <div>
 421             <input type="radio" required
 422                    name="destination"
 423                    id="destination_FRC"
 424                    value="FRC" />
 425             <label for="destination_FRC">Frederick (Brunswick Line)</label>
 426           </div>
 427           <div>
 428             <input type="radio" required
 429                    name="destination"
 430                    id="destination_HAE"
 431                    value="HAE" />
 432             <label for="destination_HAE">Halethorpe (Penn Line)</label>
 433           </div>
 434           <div>
 435             <input type="radio" required
 436                    name="destination"
 437                    id="destination_NCR"
 438                    value="NCR" />
 439             <label for="destination_NCR">New Carrollton (Penn Line)</label>
 440           </div>
 441           <div>
 442             <input type="radio" required
 443                    name="destination"
 444                    id="destination_SEB"
 445                    value="SEB" />
 446             <label for="destination_SEB">Seabrook (Penn Line)</label>
 447           </div>
 448           <div>
 449             <input type="radio" required checked
 450                    name="destination"
 451                    id="destination_WAS"
 452                    value="WAS" />
 453             <label for="destination_WAS">Washington D.C.</label>
 454           </div>
 455           <div>
 456             <input type="radio" required
 457                    name="destination"
 458                    id="destination_WBL"
 459                    value="WBL" />
 460             <label for="destination_WBL">West Baltimore (Penn Line)</label>
 461           </div>
 462
 463           <p id="marc-form-errors">OK</p>
 464
 465           <input type="hidden" name="serviceid" value="R" />
 466           <input type="hidden" name="servicename" value="MARC Train" />
 467           <input type="submit"
 468                  name="go"
 469                  id="marc-submit"
 470                  value="Generate Ticket" />
 471         </fieldset>
 472       </form>
 473
 474       <p>
 475         About CharmBypass:
 476       </p>
 477       <ol>
 478         <li>
 479           <a href="https://michael.orlitzky.com/articles/charmbypass_pt._1%3A_introduction.xhtml">
 480             Introduction
 481           </a>
 482         </li>
 483         <li>
 484           <a href="https://michael.orlitzky.com/articles/charmbypass_pt._2%3A_analysis.xhtml">
 485             Analysis
 486           </a>
 487         </li>
 488       </ol>
 489     </div>
 490
 491     @SVGDATA@
 492
 493     <script>
 494
 495       /**
 496        * Center the ticket within the browser by translating the SVG
 497        * until the ticket and the viewport centerlines coincide.
 498        */
 499       function center_ticket() {
 500         /* We're relying on the SVG being the full height of the
 501          * viewport already, and on the aspect ratio being
 502          * preserved. First, find the center of the ticket. */
 503         const r = document.getElementById("ticket").getBoundingClientRect();
 504         const c = r.left + (r.width / 2);
 505
 506         /* That's the center-line of the ticket. We want to move it to
 507          * the center-line of the viewport. */
 508         const vc = document.documentElement.clientWidth / 2;
 509
 510         /* This is how much we need to translate the SVG */
 511         const hdelta = vc - c;
 512
 513         /* But before we can set the absolute left-coordinate of the
 514          * SVG, we need to know where it is now. Note: without the
 515          * "px" this doesn't default to pixels like CSS does. */
 516         const svg = document.querySelector("svg");
 517         svg.style.left = (svg.getBoundingClientRect().left + hdelta) + "px";
 518       }
 519
 520
 521       /**
 522        * Set the service identifier from the querystring if it's there.
 523        * Otherwise, leave it at the default of "F".
 524        */
 525       function set_service_id() {
 526         const sid = document.getElementById("serviceid");
 527
 528         /* Get the "serviceid" from the querystring if it's there */
 529         const params = new URLSearchParams(document.location.search);
 530         if (params.get("serviceid")) {
 531           sid.textContent = params.get("serviceid");
 532         }
 533       }
 534
 535
 536       /**
 537        * Set the service name from the querystring if it's there.
 538        * Otherwise, leave it at the default of "BaltimoreLink".
 539        */
 540       function set_service_name() {
 541         const sid = document.getElementById("servicename");
 542
 543         /* Get the "servicename" from the querystring if it's there */
 544         const params = new URLSearchParams(document.location.search);
 545         if (params.get("servicename")) {
 546           sid.textContent = params.get("servicename");
 547         }
 548       }
 549
 550
 551       /**
 552        * Set the zone from the given "zone" parameter and then unhide it.
 553        */
 554       function set_zone(zone) {
 555         const z = document.getElementById("zone");
 556
 557         z.textContent = zone;
 558         z.style.display = "block"; /* hidden by default */
 559       }
 560
 561
 562       /**
 563        * Resize the  ticket background based on the service name.
 564        * The BaltimoreLink, Commuter Bus, and MARC Train tickets
 565        * are all different heights and are arranged vertically a
 566        * bit different.
 567        *
 568        * Rather than design three completelty separate tickets and
 569        * then have to keep track of which one we're using, I have
 570        * instead decided to use one ticket and to reposition it
 571        * on-the-fly based on the service name. This is necessarily
 572        * a bit ugly because it involves a lot of magic numbers that
 573        * can only be explained if you open up inkscape with a CharmPass
 574        * screenshot to see where things belong and how to get them there.
 575        *
 576        * The SVG was designed with BaltimoreLink in mind, so this
 577        * is a no-op if the service is BaltimoreLink.
 578        */
 579       function resize_ticket() {
 580         /* Get the "servicename" from the querystring if it's there */
 581         const params = new URLSearchParams(document.location.search);
 582         const tbg = document.getElementById("ticketbg");
 583         const t = document.getElementById("ticket");
 584         const sn = document.getElementById("servicename");
 585
 586         if (params.get("servicename") === "Commuter Bus") {
 587           /* The top of the background is initially at y=246.859, and
 588            * we scale it by a factor of 1.12 to y=276.482 for a change
 589            * of 29.623. So after we scale it, we translate it upwards
 590            * by that amount to put it back where it started. */
 591           tbg.setAttribute("transform", "translate(0 -29.623) scale(1 1.12)");
 592
 593           /* Now translate the entire ticket up by the magic amount, 1/5
 594            * of the size change we made to the background. This ratio
 595            * was found by measuring pixels in side-by-side screenshots
 596            * of BaltimoreLink and Commuter Bus tickets. */
 597           t.setAttribute("transform", "translate(0 -9.33)");
 598
 599           /* More magic numbers discovered by comparing the two
 600            * tickets overlayed in inkscape */
 601           sn.setAttribute("transform", "translate(0 64.28)");
 602         }
 603         else if (params.get("servicename") === "MARC Train") {
 604           /* insane tricks are explained above */
 605           tbg.setAttribute("transform",
 606                            "translate(0 -72.378) scale(1 1.2932)");
 607           t.setAttribute("transform", "translate(0 -67.17)");
 608           sn.setAttribute("transform", "translate(0 131.0)");
 609         }
 610       }
 611
 612
 613       /**
 614        * Set the security code from the querystring if it was given;
 615        * otherwise generate a random code.
 616        */
 617       function set_code() {
 618         const ct = document.getElementById("codetext");
 619
 620         /* Get the "code" from the querystring if it's there */
 621         const params = new URLSearchParams(document.location.search);
 622         if (params.get("code")) {
 623           ct.textContent = params.get("code").toUpperCase();
 624         }
 625         else {
 626           /* Otherwise, use a random code */
 627           const bucket = ["0","1","2","3","4","5","6","7","8","9",
 628                           "A","B","C","D","E","F","G","H","I","J",
 629                           "K","L","M","N","O","P","Q","R","S","T",
 630                           "U","V","W","X","Y","Z"];
 631
 632           /* Two random ints between 0 and 35 */
 633           const i1 = Math.floor(Math.random() * 36);
 634           const i2 = Math.floor(Math.random() * 36);
 635           const d1 = bucket[i1];
 636           const d2 = bucket[i2];
 637           ct.textContent = d1 + d2;
 638         }
 639       }
 640
 641
 642       /**
 643        * Center the security code within its container.
 644        *
 645        * Some codes like "II" and "WW" can take up wildly different
 646        * amounts of horizonetal space, but they should always be
 647        * centered inside their little red box. This turns out to be
 648        * harder than it sounds because we can only find the width of
 649        * the code in browser coordinates, whereas its "x" coordinate
 650        * is in SVG coordinates. Anyway, we do it.
 651        */
 652       function center_code() {
 653         /* Center the security code inside its red box */
 654         const ct = document.getElementById("codetext");
 655         const bg = document.getElementById("codebg");
 656
 657         /* First, find the center of the red box */
 658         const r1 = bg.getBoundingClientRect();
 659         const c1 = r1.left + (r1.width / 2);
 660
 661         /* Now the center of the code text */
 662         const r2 = ct.getBoundingClientRect();
 663         const c2 = r2.left + (r2.width / 2);
 664
 665         /* What do we add to c2 to make it equal to c1? */
 666         const hdelta = c1 - c2;
 667
 668         /* We've measured everything so far in "client rect"
 669          * coordinates, because that's the only available measurement
 670          * we have for the width of the <text> element. But when we
 671          * reposition that <text> element, it will be by adjusting its
 672          * "x" attribute, and that attribute uses a different coordinate
 673          * system than the client rect does. Specifically, "x" refers to
 674          * an offset within the SVG's coordinate system, and the client
 675          * rect coordinates are pixels on-screen. To convert between the
 676          * two, we can take the "width" attribute of the background
 677          * element and compare it to the width of the background
 678          * element's client rect. Since the size of the background is
 679          * fixed, this should give us a multiplier that turns client rect
 680          * distances (what we have) into SVG distances (what we want) */
 681         const client_to_svg = parseFloat(bg.getAttribute("width"))/r1.width;
 682
 683         /* Convert hdelta from client rect to SVG coordinates */
 684         const svg_hdelta = hdelta * client_to_svg;
 685
 686         /* Since this <text> element has an "x" attribute it's easier for
 687          * us to shift that than it is to mess with the "left" style. */
 688         ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + svg_hdelta);
 689       }
 690
 691       /**
 692        * Set the ticket's expiration date and time.
 693        *
 694        * BaltimoreLink and MARC Train tickets expire after 90 minutes;
 695        * while Commuter Bus tickets expire after 10 minutes.
 696        */
 697       function set_ticket_expiry() {
 698         /* There are two parameters, time and date, that we store in one
 699          * underlying "date" variable. */
 700         const date = new Date();
 701
 702         /* BaltimoreLink and MARC Train */
 703         let minutes = 90;
 704         const params = new URLSearchParams(document.location.search);
 705         if (params.get("servicename") === "Commuter Bus") {
 706           /* Commuter bus tickets are only valid for ten minutes */
 707           minutes = 10;
 708         }
 709
 710         /* We use the low-level get/setTime to change the number of
 711          * milliseconds since the epoch that this date represents
 712          * Obviously correct, and avoids all suspicious corner cases
 713          * for a few more decades. */
 714         date.setTime(date.getTime() + (minutes*60*1000));
 715
 716         tt = document.getElementById("tickettime");
 717         tt.textContent = date.toLocaleTimeString();
 718
 719         const td = document.getElementById("ticketdate");
 720         const dateopts = {
 721           day: "2-digit",
 722           month: "2-digit",
 723           year: "2-digit"
 724         };
 725         td.textContent = date.toLocaleDateString("en-US", dateopts);
 726       }
 727
 728
 729       /**
 730        * Swap the day/night sky colors.
 731        *
 732        * We use CSS classes to keep track of the current state because
 733        * it's a tiny bit cleaner than a global variable, but for some
 734        * reason we can't use those same classes to actually change the
 735        * color. (The classes, change, but the color doesn't.) Rather
 736        * than waste time trying to explain this, we just set the "fill"
 737        * attribute ourselves whenever we swap classes.
 738        */
 739       function swap_day_night() {
 740         const sky = document.getElementById("sky");
 741
 742         if (sky.getAttribute("class") === "night") {
 743           sky.setAttribute("fill", "#efb02f");
 744           sky.setAttribute("class", "day");
 745         }
 746         else {
 747           /* Put this case second so that the first time the
 748            * screen is tapped (when there are no classes on
 749            * the sky element) the color still changes. */
 750           sky.setAttribute("fill", "#143b66");
 751           sky.setAttribute("class", "night");
 752         }
 753       }
 754
 755
 756       /**
 757        * Compute the zone (string) for the given origin/destination pair.
 758        *
 759        * If we don't know it or if you chose in invalid pair (destination
 760        * not on the same line as your origin?) then null is returned.
 761        */
 762       function compute_marc_zone(src, dest) {
 763
 764         /* Sorted on the first component, then the second.
 765          *
 766          * Key:
 767          *
 768          *   $6.00 => 1
 769          *   $7.00 => 2
 770          *   $8.00 => 3
 771          *   $9.00 => 4
 772          */
 773         const zone_map = {
 774           BAL_BWE: 2,
 775           BAL_BWI: 1,
 776           BAL_HAE: 1,
 777           BAL_NCR: 3,
 778           BAL_SEB: 3,
 779           BAL_WAS: 4,
 780           BAL_WBL: 1,
 781           BCA_CPK: 3,
 782           BCA_WAS: 4,
 783           BWE_BWI: 1,
 784           BWE_HAE: 1,
 785           BWE_NCR: 1,
 786           BWE_SEB: 1,
 787           BWE_WAS: 2,
 788           BWE_WBL: 2,
 789           BWI_HAE: 1,
 790           BWI_NCR: 2,
 791           BWI_SEB: 2,
 792           BWI_WAS: 3,
 793           BWI_WBL: 1,
 794           FRC_WAS: 4,
 795           HAE_NCR: 2,
 796           HAE_SEB: 2,
 797           HAE_WAS: 3,
 798           HAE_WBL: 1,
 799           NCR_SEB: 1,
 800           NCR_WAS: 1,
 801           NCR_WBL: 3,
 802           SEB_WAS: 1,
 803           SEB_WBL: 3,
 804           WAS_WBL: 4
 805         };
 806
 807         /* Forward direction key for zone_map */
 808         const fwd = src + "_" +  dest;
 809
 810         /* Reverse direction key for zone_map. The zone_map only
 811          * has them listed in one direction, so we check both
 812          * directions here. */
 813         const rev = dest + "_" +  src;
 814
 815         /* The default. Obviously wrong for when we don't
 816          * have the necessary data. */
 817         let zone = -1;
 818
 819         if (zone_map[fwd]) {
 820           zone = zone_map[fwd];
 821         }
 822         else if (zone_map[rev]) {
 823           zone = zone_map[rev];
 824         }
 825
 826         /* Convert the number to a string */
 827         switch (zone) {
 828           case 1:
 829             return "One Zone";
 830           case 2:
 831             return "Two Zone";
 832           case 3:
 833             return "Three Zone";
 834           case 4:
 835             return "Four Zone";
 836           default:
 837             return null;
 838         }
 839       }
 840
 841
 842       /**
 843        * Compute and set the zone.
 844        *
 845        * We can be given a zone in two ways. First, on Commuter Bus
 846        * tickets, it is given explicitly via the querystring. But
 847        * It can also be specified implicitly via the origin and
 848        * destination on a MARC Train ticket. Here we try both and
 849        * then call set_zone() with the result if something worked.
 850        */
 851       function compute_and_set_zone() {
 852         const params = new URLSearchParams(document.location.search);
 853         const src = params.get("origin");
 854         const dest = params.get("destination");
 855
 856         if (src && dest) {
 857           /* MARC Train. We can assume that compute_marc_zone() doesn't
 858            * return null because that's part of our form validation. */
 859           const zone = compute_marc_zone(src, dest);
 860           set_zone(zone);
 861         }
 862         else if (params.get("zone")) {
 863           /* Commuter Bus */
 864           set_zone(params.get("zone"));
 865         }
 866       }
 867
 868
 869       /**
 870        * Set the origin and destination for the MARC Train if they
 871        * were provided, and unhide them if so.
 872        */
 873       function set_marc_origin_destination() {
 874         const params = new URLSearchParams(document.location.search);
 875         if (!params.get("origin") || !params.get("destination")) {
 876           return;
 877         }
 878
 879         const src = params.get("origin");
 880         const dest = params.get("destination");
 881
 882         /* origindest contains both the origin and destination */
 883         const origindest = document.getElementById("origindest");
 884
 885         const origin = document.getElementById("origin");
 886         const destination = document.getElementById("destination");
 887
 888         origin.textContent = params.get("origin");
 889         destination.textContent = params.get("destination");
 890
 891         origindest.style.display = "block"; /* hidden by default */
 892       }
 893
 894
 895       /**
 896        * Hide the menu and display the ticket. This is what happens
 897        * when you submit the form.
 898        */
 899       function go() {
 900         /* To create our "window" onto the scene, we're going to slide the
 901          * SVG off the left-hand side of the screen, and we don't want
 902          * scroll bars to appear. */
 903         document.body.style.overflow = "hidden";
 904         document.body.style.margin = "0";
 905         document.body.style.padding = "0";
 906
 907         const svg = document.querySelector("svg");
 908         const menu = document.getElementById("menu");
 909         svg.style.display = "initial";
 910         menu.style.display = "none";
 911       }
 912
 913       /**
 914        * Determine if the user agent is mobile Firefox.
 915        */
 916       function ua_is_mobile_ff() {
 917         const ua = navigator.userAgent.toLowerCase();
 918         return (ua.includes("firefox") && ua.includes("mobile"));
 919       }
 920
 921       /**
 922        * Validate the MARC form's origin/destination.
 923        *
 924        * We don't want the user to be able to choose a pair of stops that
 925        * aren't actually connected by the same MARC line. If we don't have
 926        * zone information for the (origin,destination) pair, that indicates
 927        * that it's probably not a valid choice; otherwise I would have
 928        * filled in the information from the CharmPass app already.
 929        *
 930        * All browsers except mobile Firefox let us call setCustomValidity()
 931        * to provide an error message that is displayed if the user tries
 932        * to submit invalid choices. But amazingly, mobile Firefox does not:
 933        *
 934        *   https://bugzilla.mozilla.org/show_bug.cgi?id=1510450
 935        *
 936        * Instead we have to work around it (in that one browser) by
 937        * showing/hiding a paragraph that we fill with the errors.
 938        */
 939       function validate_origin_destination(event) {
 940         const origins = document.getElementsByName("origin");
 941         const destinations = document.getElementsByName("destination");
 942         const mfe = document.getElementById("marc-form-errors");
 943         const marcsubmit = document.getElementById("marc-submit");
 944
 945         if (ua_is_mobile_ff()) {
 946           /* Even though this is only for one browser, empty paragraphs
 947            * are handled inconsistently and should be avoided as a rule.
 948            * So, we make it say "OK" before we hide it. */
 949           mfe.textContent = "OK";
 950           mfe.style.visibility = "hidden";
 951           marcsubmit.disabled = false;
 952         }
 953
 954         let src = null;
 955         let dest = null;
 956         origins.forEach((x) => { if (x.checked) src = x; })
 957         destinations.forEach((x) => {
 958           if (x.checked) dest = x;
 959
 960           /* clear all errors before possibly setting one */
 961           x.setCustomValidity('');
 962         })
 963
 964         if (src.value === dest.value) {
 965           let err = "Origin and destination are the same";
 966           dest.setCustomValidity(err);
 967
 968           if (ua_is_mobile_ff()) {
 969             mfe.textContent = err;
 970             mfe.style.visibility = "visible";
 971             marcsubmit.disabled = true;
 972           }
 973         }
 974         else if (compute_marc_zone(src.value, dest.value) === null) {
 975           let err = "Origin and destination are on different lines";
 976           dest.setCustomValidity(err);
 977
 978           if (ua_is_mobile_ff()) {
 979             mfe.textContent = err;
 980             mfe.style.visibility = "visible";
 981             marcsubmit.disabled = true;
 982           }
 983         }
 984       }
 985
 986       /*****************************************************/
 987       /* Add event handlers for all of the functions above */
 988       /*****************************************************/
 989
 990       const params = new URLSearchParams(document.location.search);
 991       if (params.get("go")) {
 992         /* First unhide the SVG (swap it with the form) */
 993         window.addEventListener("load", go);
 994
 995         /* Center the ticket once when the page has loaded */
 996         window.addEventListener("load", center_ticket);
 997
 998         /* Re-center the ticket when the window is resized */
 999         window.addEventListener("resize", center_ticket);
1000
1001         /* Set the service identifier when the page has loaded */
1002         window.addEventListener("load", set_service_id);
1003
1004         /* Set the service name when the page has loaded */
1005         window.addEventListener("load", set_service_name);
1006
1007         /* Resize the ticket background if necessary */
1008         window.addEventListener("load", resize_ticket);
1009
1010         /* Set the security code text when the page has loaded */
1011         window.addEventListener("load", set_code);
1012
1013         /* Center the security code text when the page has loaded; in
1014          * particular, after we set the code. */
1015         window.addEventListener("load", center_code);
1016
1017         /* Set the ticket expiration date/time upon page load */
1018         window.addEventListener("load", set_ticket_expiry);
1019
1020         /* Set the MARC Train origin and destination, if applicable */
1021         window.addEventListener("load", set_marc_origin_destination);
1022
1023         /* Compute and set the zone, if applicable */
1024         window.addEventListener("load", compute_and_set_zone);
1025
1026         /* Swap colors when the screen is tapped */
1027         document.body.addEventListener("click", swap_day_night);
1028       }
1029       else {
1030         /* If we haven't submitted the form yet, set up change handlers
1031          * for the origin/destination radio buttons that validate that
1032          * the origin and destination are on the same line. */
1033         document.getElementsByName("origin").forEach(
1034          (x) => x.addEventListener("change", validate_origin_destination)
1035         );
1036         document.getElementsByName("destination").forEach(
1037          (x) => x.addEventListener("change", validate_origin_destination)
1038         );
1039
1040         /* Also do it when the page loads, because firefox likes to
1041          * remember your selection even after the page reloads. */
1042         window.addEventListener("load", validate_origin_destination);
1043
1044         /* Finally, we have to babysit mobile Firefox, who doesn't
1045          * support HTML5 form validation going into 2024. Turn on
1046          * the little form errors paragraph so we can toggle its
1047          * visibility (and make it display the error) when the user
1048          * makes an invalid selection. */
1049         window.addEventListener("load", () => {
1050           if (ua_is_mobile_ff()) {
1051             const mfe = document.getElementById("marc-form-errors");
1052             mfe.style.display = "block";
1053           }
1054         });
1055       }
1056
1057     </script>
1058   </body>
1059 </html>