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 23s 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 17s 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 11s 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 40s linear infinite;
 139       }
 140
 141       @keyframes cloudscopyfloat {
 142         from { transform: translateX(0%);   }
 143         to   { transform: translateX(-50%); }
 144       }
 145
 146       #cloudscopy {
 147         animation: cloudscopyfloat 40s 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 30s 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 30s 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 35s 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 35s 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       <p>
 204         <em>Hint:</em> If they start checking it, the daily security
 205         code stays the same all day and is the same on a $2 bus ticket
 206         as it is on a $9 MARC ticket. It's also the same on every phone.
 207       </p>
 208
 209       <form>
 210         <fieldset>
 211           <legend>Local Bus, Light Rail, or Metro</legend>
 212           <div>
 213             <label for="code1">
 214               Daily security code (optional):
 215             </label>
 216             <input id="code1"
 217                    name="code"
 218                    type="text"
 219                    size="2"
 220                    minlength="2"
 221                    maxlength="2"
 222                    pattern="[a-zA-Z0-9]*" />
 223           </div>
 224           <input type="hidden" name="servicename" value="BaltimoreLink" />
 225           <input type="submit" name="go" value="Generate Ticket" />
 226         </fieldset>
 227       </form>
 228       <form>
 229         <fieldset>
 230           <legend>Commuter Bus</legend>
 231           <input type="hidden" name="serviceid" value="R" />
 232           <input type="hidden" name="servicename" value="Commuter Bus" />
 233
 234           <div>
 235             <label for="code2">
 236               Daily security code (optional):
 237             </label>
 238             <input id="code2"
 239                    name="code"
 240                    type="text"
 241                    size="2"
 242                    minlength="2"
 243                    maxlength="2"
 244                    pattern="[a-zA-Z0-9]*" />
 245           </div>
 246
 247           <p>
 248             Zone<sup>&dagger;</sup>:
 249           </p>
 250           <div>
 251             <input type="radio" required
 252                    name="zone"
 253                    id="zone1"
 254                    value="Zone 1" />
 255             <label for="zone1">Zone 1</label>
 256           </div>
 257           <div>
 258             <input type="radio" required
 259                    name="zone"
 260                    id="zone2"
 261                    value="Zone 2" />
 262             <label for="zone2">Zone 2</label>
 263           </div>
 264           <div>
 265             <input type="radio" required checked
 266                    name="zone"
 267                    id="zone3"
 268                    value="Zone 3" />
 269             <label for="zone3">Zone 3</label>
 270           </div>
 271           <div>
 272             <input type="radio" required
 273                    name="zone"
 274                    id="zone4"
 275                    value="Zone 4" />
 276             <label for="zone4">Zone 4</label>
 277           </div>
 278           <div>
 279             <input type="radio" required
 280                    name="zone"
 281                    id="zone5"
 282                    value="Zone 5" />
 283             <label for="zone5">Zone 5</label>
 284           </div>
 285
 286           <input type="submit" name="go" value="Generate Ticket" />
 287
 288           <p>
 289             <sup>&dagger;</sup>
 290             On the MTA's PDF schedule for your route
 291           </p>
 292         </fieldset>
 293       </form>
 294       <form>
 295         <fieldset>
 296           <legend>MARC Train</legend>
 297
 298           <div>
 299             <label for="code3">
 300               Daily security code (optional):
 301             </label>
 302             <input id="code3"
 303                    name="code"
 304                    type="text"
 305                    size="2"
 306                    minlength="2"
 307                    maxlength="2"
 308                    pattern="[a-zA-Z0-9]*" />
 309           </div>
 310
 311           <p>Origin:</p>
 312           <div>
 313             <input type="radio" required checked
 314                    name="origin"
 315                    id="origin1"
 316                    value="BAL" />
 317             <label for="origin1">Baltimore/Penn (Penn Line)</label>
 318           </div>
 319           <div>
 320             <input type="radio" required
 321                    name="origin"
 322                    id="origin2"
 323                    value="BCA" />
 324             <label for="origin2">Baltimore/Camden (Camden Line)</label>
 325           </div>
 326           <div>
 327             <input type="radio" required
 328                    name="origin"
 329                    id="origin3"
 330                    value="BWE" />
 331             <label for="origin3">Bowie State (Penn Line)</label>
 332           </div>
 333           <div>
 334             <input type="radio" required
 335                    name="origin"
 336                    id="origin4"
 337                    value="BWI" />
 338             <label for="origin4">BWI Airport (Penn Line)</label>
 339           </div>
 340           <div>
 341             <input type="radio" required
 342                    name="origin"
 343                    id="origin5"
 344                    value="CPK" />
 345             <label for="origin5">College Park (Camden Line)</label>
 346           </div>
 347           <div>
 348             <input type="radio" required
 349                    name="origin"
 350                    id="origin6"
 351                    value="SEB" />
 352             <label for="origin6">Seabrook (Penn Line)</label>
 353           </div>
 354           <div>
 355             <input type="radio" required
 356                    name="origin"
 357                    id="origin7"
 358                    value="WAS" />
 359             <label for="origin7">Washington D.C.</label>
 360           </div>
 361           <div>
 362             <input type="radio" required
 363                    name="origin"
 364                    id="origin8"
 365                    value="WBL" />
 366             <label for="origin8">West Baltimore (Penn Line)</label>
 367           </div>
 368
 369           <p>Destination:</p>
 370           <div>
 371             <input type="radio" required
 372                    name="destination"
 373                    id="destination1"
 374                    value="BAL" />
 375             <label for="destination1">Baltimore/Penn (Penn Line)</label>
 376           </div>
 377           <div>
 378             <input type="radio" required
 379                    name="destination"
 380                    id="destination2"
 381                    value="BCA" />
 382             <label for="destination2">Baltimore/Camden (Camden Line)</label>
 383           </div>
 384           <div>
 385             <input type="radio" required
 386                    name="destination"
 387                    id="destination3"
 388                    value="BWE" />
 389             <label for="destination3">Bowie State (Penn Line)</label>
 390           </div>
 391           <div>
 392             <input type="radio" required
 393                    name="destination"
 394                    id="destination4"
 395                    value="BWI" />
 396             <label for="destination4">BWI Airport (Penn Line)</label>
 397           </div>
 398           <div>
 399             <input type="radio" required
 400                    name="destination"
 401                    id="destination5"
 402                    value="CPK" />
 403             <label for="destination5">College Park (Camden Line)</label>
 404           </div>
 405           <div>
 406             <input type="radio" required
 407                    name="destination"
 408                    id="destination6"
 409                    value="SEB" />
 410             <label for="destination6">Seabrook (Penn Line)</label>
 411           </div>
 412           <div>
 413             <input type="radio" required checked
 414                    name="destination"
 415                    id="destination7"
 416                    value="WAS" />
 417             <label for="destination7">Washington D.C.</label>
 418           </div>
 419           <div>
 420             <input type="radio" required
 421                    name="destination"
 422                    id="destination8"
 423                    value="WBL" />
 424             <label for="destination8">West Baltimore (Penn Line)</label>
 425           </div>
 426
 427           <p id="marc-form-errors">OK</p>
 428
 429           <input type="hidden" name="serviceid" value="R" />
 430           <input type="hidden" name="servicename" value="MARC Train" />
 431           <input type="submit"
 432                  name="go"
 433                  id="marc-submit"
 434                  value="Generate Ticket" />
 435         </fieldset>
 436       </form>
 437     </div>
 438
 439     @SVGDATA@
 440
 441     <script>
 442
 443       /**
 444        * Center the ticket within the browser by translating the SVG
 445        * until the ticket and the viewport centerlines coincide.
 446        */
 447       function center_ticket() {
 448         /* We're relying on the SVG being the full height of the
 449          * viewport already, and on the aspect ratio being
 450          * preserved. First, find the center of the ticket. */
 451         const r = document.getElementById("ticket").getBoundingClientRect();
 452         const c = r.left + (r.width / 2);
 453
 454         /* That's the center-line of the ticket. We want to move it to
 455          * the center-line of the viewport. */
 456         const vc = document.documentElement.clientWidth / 2;
 457
 458         /* This is how much we need to translate the SVG */
 459         const hdelta = vc - c;
 460
 461         /* But before we can set the absolute left-coordinate of the
 462          * SVG, we need to know where it is now. Note: without the
 463          * "px" this doesn't default to pixels like CSS does. */
 464         const svg = document.querySelector("svg");
 465         svg.style.left = (svg.getBoundingClientRect().left + hdelta) + "px";
 466       }
 467
 468
 469       /**
 470        * Set the service identifier from the querystring if it's there.
 471        * Otherwise, leave it at the default of "F".
 472        */
 473       function set_service_id() {
 474         const sid = document.getElementById("serviceid");
 475
 476         /* Get the "serviceid" from the querystring if it's there */
 477         const params = new URLSearchParams(document.location.search);
 478         if (params.get("serviceid")) {
 479           sid.textContent = params.get("serviceid");
 480         }
 481       }
 482
 483
 484       /**
 485        * Set the service name from the querystring if it's there.
 486        * Otherwise, leave it at the default of "BaltimoreLink".
 487        */
 488       function set_service_name() {
 489         const sid = document.getElementById("servicename");
 490
 491         /* Get the "servicename" from the querystring if it's there */
 492         const params = new URLSearchParams(document.location.search);
 493         if (params.get("servicename")) {
 494           sid.textContent = params.get("servicename");
 495         }
 496       }
 497
 498
 499       /**
 500        * Set the zone from the given "zone" parameter and then unhide it.
 501        */
 502       function set_zone(zone) {
 503         const z = document.getElementById("zone");
 504
 505         z.textContent = zone;
 506         z.style.display = "block"; /* hidden by default */
 507       }
 508
 509
 510       /**
 511        * Resize the  ticket background based on the service name.
 512        * The BaltimoreLink, Commuter Bus, and MARC Train tickets
 513        * are all different heights and are arranged vertically a
 514        * bit different.
 515        *
 516        * Rather than design three completelty separate tickets and
 517        * then have to keep track of which one we're using, I have
 518        * instead decided to use one ticket and to reposition it
 519        * on-the-fly based on the service name. This is necessarily
 520        * a bit ugly because it involves a lot of magic numbers that
 521        * can only be explained if you open up inkscape with a CharmPass
 522        * screenshot to see where things belong and how to get them there.
 523        *
 524        * The SVG was designed with BaltimoreLink in mind, so this
 525        * is a no-op if the service is BaltimoreLink.
 526        */
 527       function resize_ticket() {
 528         /* Get the "servicename" from the querystring if it's there */
 529         const params = new URLSearchParams(document.location.search);
 530         const tbg = document.getElementById("ticketbg");
 531         const t = document.getElementById("ticket");
 532         const sn = document.getElementById("servicename");
 533
 534         if (params.get("servicename") === "Commuter Bus") {
 535           /* The top of the background is initially at y=246.859, and
 536            * we scale it by a factor of 1.12 to y=276.482 for a change
 537            * of 29.623. So after we scale it, we translate it upwards
 538            * by that amount to put it back where it started. */
 539           tbg.setAttribute("transform", "translate(0 -29.623) scale(1 1.12)");
 540
 541           /* Now translate the entire ticket up by the magic amount, 1/5
 542            * of the size change we made to the background. This ratio
 543            * was found by measuring pixels in side-by-side screenshots
 544            * of BaltimoreLink and Commuter Bus tickets. */
 545           t.setAttribute("transform", "translate(0 -9.33)");
 546
 547           /* More magic numbers discovered by comparing the two
 548            * tickets overlayed in inkscape */
 549           sn.setAttribute("transform", "translate(0 64.28)");
 550         }
 551         else if (params.get("servicename") === "MARC Train") {
 552           /* insane tricks are explained above */
 553           tbg.setAttribute("transform",
 554                            "translate(0 -72.378) scale(1 1.2932)");
 555           t.setAttribute("transform", "translate(0 -67.17)");
 556           sn.setAttribute("transform", "translate(0 131.0)");
 557         }
 558       }
 559
 560
 561       /**
 562        * Set the security code from the querystring if it was given;
 563        * otherwise generate a random code.
 564        */
 565       function set_code() {
 566         const ct = document.getElementById("codetext");
 567
 568         /* Get the "code" from the querystring if it's there */
 569         const params = new URLSearchParams(document.location.search);
 570         if (params.get("code")) {
 571           ct.textContent = params.get("code").toUpperCase();
 572         }
 573         else {
 574           /* Otherwise, use a random code */
 575           const bucket = ["0","1","2","3","4","5","6","7","8","9",
 576                           "A","B","C","D","E","F","G","H","I","J",
 577                           "K","L","M","N","O","P","Q","R","S","T",
 578                           "U","V","W","X","Y","Z"];
 579
 580           /* Two random ints between 0 and 35 */
 581           const i1 = Math.floor(Math.random() * 36);
 582           const i2 = Math.floor(Math.random() * 36);
 583           const d1 = bucket[i1];
 584           const d2 = bucket[i2];
 585           ct.textContent = d1 + d2;
 586         }
 587       }
 588
 589
 590       /**
 591        * Center the security code within its container.
 592        *
 593        * Some codes like "II" and "WW" can take up wildly different
 594        * amounts of horizonetal space, but they should always be
 595        * centered inside their little red box. This turns out to be
 596        * harder than it sounds because we can only find the width of
 597        * the code in browser coordinates, whereas its "x" coordinate
 598        * is in SVG coordinates. Anyway, we do it.
 599        */
 600       function center_code() {
 601         /* Center the security code inside its red box */
 602         const ct = document.getElementById("codetext");
 603         const bg = document.getElementById("codebg");
 604
 605         /* First, find the center of the red box */
 606         const r1 = bg.getBoundingClientRect();
 607         const c1 = r1.left + (r1.width / 2);
 608
 609         /* Now the center of the code text */
 610         const r2 = ct.getBoundingClientRect();
 611         const c2 = r2.left + (r2.width / 2);
 612
 613         /* What do we add to c2 to make it equal to c1? */
 614         const hdelta = c1 - c2;
 615
 616         /* We've measured everything so far in "client rect"
 617          * coordinates, because that's the only available measurement
 618          * we have for the width of the <text> element. But when we
 619          * reposition that <text> element, it will be by adjusting its
 620          * "x" attribute, and that attribute uses a different coordinate
 621          * system than the client rect does. Specifically, "x" refers to
 622          * an offset within the SVG's coordinate system, and the client
 623          * rect coordinates are pixels on-screen. To convert between the
 624          * two, we can take the "width" attribute of the background
 625          * element and compare it to the width of the background
 626          * element's client rect. Since the size of the background is
 627          * fixed, this should give us a multiplier that turns client rect
 628          * distances (what we have) into SVG distances (what we want) */
 629         const client_to_svg = parseFloat(bg.getAttribute("width"))/r1.width;
 630
 631         /* Convert hdelta from client rect to SVG coordinates */
 632         const svg_hdelta = hdelta * client_to_svg;
 633
 634         /* Since this <text> element has an "x" attribute it's easier for
 635          * us to shift that than it is to mess with the "left" style. */
 636         ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + svg_hdelta);
 637       }
 638
 639       /**
 640        * Set the ticket's expiration date and time.
 641        *
 642        * BaltimoreLink and MARC Train tickets expire after 90 minutes;
 643        * while Commuter Bus tickets expire after 10 minutes.
 644        */
 645       function set_ticket_expiry() {
 646         /* There are two parameters, time and date, that we store in one
 647          * underlying "date" variable. */
 648         const date = new Date();
 649
 650         /* BaltimoreLink and MARC Train */
 651         let minutes = 90;
 652         const params = new URLSearchParams(document.location.search);
 653         if (params.get("servicename") === "Commuter Bus") {
 654           /* Commuter bus tickets are only valid for ten minutes */
 655           minutes = 10;
 656         }
 657
 658         /* We use the low-level get/setTime to change the number of
 659          * milliseconds since the epoch that this date represents
 660          * Obviously correct, and avoids all suspicious corner cases
 661          * for a few more decades. */
 662         date.setTime(date.getTime() + (minutes*60*1000));
 663
 664         tt = document.getElementById("tickettime");
 665         tt.textContent = date.toLocaleTimeString();
 666
 667         const td = document.getElementById("ticketdate");
 668         const dateopts = {
 669           day: "2-digit",
 670           month: "2-digit",
 671           year: "2-digit"
 672         };
 673         td.textContent = date.toLocaleDateString("en-US", dateopts);
 674       }
 675
 676
 677       /**
 678        * Swap the day/night sky colors.
 679        *
 680        * We use CSS classes to keep track of the current state because
 681        * it's a tiny bit cleaner than a global variable, but for some
 682        * reason we can't use those same classes to actually change the
 683        * color. (The classes, change, but the color doesn't.) Rather
 684        * than waste time trying to explain this, we just set the "fill"
 685        * attribute ourselves whenever we swap classes.
 686        */
 687       function swap_day_night() {
 688         const sky = document.getElementById("sky");
 689
 690         if (sky.getAttribute("class") === "night") {
 691           sky.setAttribute("fill", "#efb02f");
 692           sky.setAttribute("class", "day");
 693         }
 694         else {
 695           /* Put this case second so that the first time the
 696            * screen is tapped (when there are no classes on
 697            * the sky element) the color still changes. */
 698           sky.setAttribute("fill", "#143b66");
 699           sky.setAttribute("class", "night");
 700         }
 701       }
 702
 703
 704       /**
 705        * Compute the zone (string) for the given origin/destination pair.
 706        *
 707        * If we don't know it or if you chose in invalid pair (destination
 708        * not on the same line as your origin?) then null is returned.
 709        */
 710       function compute_marc_zone(src, dest) {
 711
 712         /* Sorted on the first component, then the second.
 713          *
 714          * Key:
 715          *
 716          *   $6.00 => 1
 717          *   $7.00 => 2
 718          *   $8.00 => 3
 719          *   $9.00 => 4
 720          */
 721         const zone_map = {
 722           BAL_BWE: 2,
 723           BAL_BWI: 1,
 724           BAL_SEB: 3,
 725           BAL_WAS: 4,
 726           BAL_WBL: 1,
 727           BCA_CPK: 3,
 728           BCA_WAS: 4,
 729           BWE_BWI: 1,
 730           BWE_SEB: 1,
 731           BWE_WAS: 2,
 732           BWE_WBL: 2,
 733           BWI_SEB: 2,
 734           BWI_WAS: 3,
 735           BWI_WBL: 1,
 736           SEB_WAS: 1,
 737           SEB_WBL: 3,
 738           WAS_WBL: 4
 739         };
 740
 741         /* Forward direction key for zone_map */
 742         const fwd = src + "_" +  dest;
 743
 744         /* Reverse direction key for zone_map. The zone_map only
 745          * has them listed in one direction, so we check both
 746          * directions here. */
 747         const rev = dest + "_" +  src;
 748
 749         /* The default. Obviously wrong for when we don't
 750          * have the necessary data. */
 751         let zone = -1;
 752
 753         if (zone_map[fwd]) {
 754           zone = zone_map[fwd];
 755         }
 756         else if (zone_map[rev]) {
 757           zone = zone_map[rev];
 758         }
 759
 760         /* Convert the number to a string */
 761         switch (zone) {
 762           case 1:
 763             return "One Zone";
 764           case 2:
 765             return "Two Zone";
 766           case 3:
 767             return "Three Zone";
 768           case 4:
 769             return "Four Zone";
 770           default:
 771             return null;
 772         }
 773       }
 774
 775
 776       /**
 777        * Compute and set the zone.
 778        *
 779        * We can be given a zone in two ways. First, on Commuter Bus
 780        * tickets, it is given explicitly via the querystring. But
 781        * It can also be specified implicitly via the origin and
 782        * destination on a MARC Train ticket. Here we try both and
 783        * then call set_zone() with the result if something worked.
 784        */
 785       function compute_and_set_zone() {
 786         const params = new URLSearchParams(document.location.search);
 787         const src = params.get("origin");
 788         const dest = params.get("destination");
 789
 790         if (src && dest) {
 791           /* MARC Train. We can assume that compute_marc_zone() doesn't
 792            * return null because that's part of our form validation. */
 793           const zone = compute_marc_zone(src, dest);
 794           set_zone(zone);
 795         }
 796         else if (params.get("zone")) {
 797           /* Commuter Bus */
 798           set_zone(params.get("zone"));
 799         }
 800       }
 801
 802
 803       /**
 804        * Set the origin and destination for the MARC Train if they
 805        * were provided, and unhide them if so.
 806        */
 807       function set_marc_origin_destination() {
 808         const params = new URLSearchParams(document.location.search);
 809         if (!params.get("origin") || !params.get("destination")) {
 810           return;
 811         }
 812
 813         const src = params.get("origin");
 814         const dest = params.get("destination");
 815
 816         /* origindest contains both the origin and destination */
 817         const origindest = document.getElementById("origindest");
 818
 819         const origin = document.getElementById("origin");
 820         const destination = document.getElementById("destination");
 821
 822         origin.textContent = params.get("origin");
 823         destination.textContent = params.get("destination");
 824
 825         origindest.style.display = "block"; /* hidden by default */
 826       }
 827
 828
 829       /**
 830        * Hide the menu and display the ticket. This is what happens
 831        * when you submit the form.
 832        */
 833       function go() {
 834         /* To create our "window" onto the scene, we're going to slide the
 835          * SVG off the left-hand side of the screen, and we don't want
 836          * scroll bars to appear. */
 837         document.body.style.overflow = "hidden";
 838         document.body.style.margin = "0";
 839         document.body.style.padding = "0";
 840
 841         const svg = document.querySelector("svg");
 842         const menu = document.getElementById("menu");
 843         svg.style.display = "initial";
 844         menu.style.display = "none";
 845       }
 846
 847       /**
 848        * Determine if the user agent is mobile Firefox.
 849        */
 850       function ua_is_mobile_ff() {
 851         const ua = navigator.userAgent.toLowerCase();
 852         return (ua.includes("firefox") && ua.includes("mobile"));
 853       }
 854
 855       /**
 856        * Validate the MARC form's origin/destination.
 857        *
 858        * We don't want the user to be able to choose a pair of stops that
 859        * aren't actually connected by the same MARC line. If we don't have
 860        * zone information for the (origin,destination) pair, that indicates
 861        * that it's probably not a valid choice; otherwise I would have
 862        * filled in the information from the CharmPass app already.
 863        *
 864        * All browsers except mobile Firefox let us call setCustomValidity()
 865        * to provide an error message that is displayed if the user tries
 866        * to submit invalid choices. But amazingly, mobile Firefox does not:
 867        *
 868        *   https://bugzilla.mozilla.org/show_bug.cgi?id=1510450
 869        *
 870        * Instead we have to work around it (in that one browser) by
 871        * showing/hiding a paragraph that we fill with the errors.
 872        */
 873       function validate_origin_destination(event) {
 874         const origins = document.getElementsByName("origin");
 875         const destinations = document.getElementsByName("destination");
 876         const mfe = document.getElementById("marc-form-errors");
 877         const marcsubmit = document.getElementById("marc-submit");
 878
 879         if (ua_is_mobile_ff()) {
 880           /* Even though this is only for one browser, empty paragraphs
 881            * are handled inconsistently and should be avoided as a rule.
 882            * So, we make it say "OK" before we hide it. */
 883           mfe.textContent = "OK";
 884           mfe.style.visibility = "hidden";
 885           marcsubmit.disabled = false;
 886         }
 887
 888         let src = null;
 889         let dest = null;
 890         origins.forEach((x) => { if (x.checked) src = x; })
 891         destinations.forEach((x) => {
 892           if (x.checked) dest = x;
 893
 894           /* clear all errors before possibly setting one */
 895           x.setCustomValidity('');
 896         })
 897
 898         if (src.value === dest.value) {
 899           let err = "Origin and destination are the same";
 900           dest.setCustomValidity(err);
 901
 902           if (ua_is_mobile_ff()) {
 903             mfe.textContent = err;
 904             mfe.style.visibility = "visible";
 905             marcsubmit.disabled = true;
 906           }
 907         }
 908         else if (compute_marc_zone(src.value, dest.value) === null) {
 909           let err = "Origin and destination are on different lines";
 910           dest.setCustomValidity(err);
 911
 912           if (ua_is_mobile_ff()) {
 913             mfe.textContent = err;
 914             mfe.style.visibility = "visible";
 915             marcsubmit.disabled = true;
 916           }
 917         }
 918       }
 919
 920       /*****************************************************/
 921       /* Add event handlers for all of the functions above */
 922       /*****************************************************/
 923
 924       const params = new URLSearchParams(document.location.search);
 925       if (params.get("go")) {
 926         /* First unhide the SVG (swap it with the form) */
 927         window.addEventListener("load", go);
 928
 929         /* Center the ticket once when the page has loaded */
 930         window.addEventListener("load", center_ticket);
 931
 932         /* Re-center the ticket when the window is resized */
 933         window.addEventListener("resize", center_ticket);
 934
 935         /* Set the service identifier when the page has loaded */
 936         window.addEventListener("load", set_service_id);
 937
 938         /* Set the service name when the page has loaded */
 939         window.addEventListener("load", set_service_name);
 940
 941         /* Resize the ticket background if necessary */
 942         window.addEventListener("load", resize_ticket);
 943
 944         /* Set the security code text when the page has loaded */
 945         window.addEventListener("load", set_code);
 946
 947         /* Center the security code text when the page has loaded; in
 948          * particular, after we set the code. */
 949         window.addEventListener("load", center_code);
 950
 951         /* Set the ticket expiration date/time upon page load */
 952         window.addEventListener("load", set_ticket_expiry);
 953
 954         /* Set the MARC Train origin and destination, if applicable */
 955         window.addEventListener("load", set_marc_origin_destination);
 956
 957         /* Compute and set the zone, if applicable */
 958         window.addEventListener("load", compute_and_set_zone);
 959
 960         /* Swap colors when the screen is tapped */
 961         document.body.addEventListener("click", swap_day_night);
 962       }
 963       else {
 964         /* If we haven't submitted the form yet, set up change handlers
 965          * for the origin/destination radio buttons that validate that
 966          * the origin and destination are on the same line. */
 967         document.getElementsByName("origin").forEach(
 968          (x) => x.addEventListener("change", validate_origin_destination)
 969         );
 970         document.getElementsByName("destination").forEach(
 971          (x) => x.addEventListener("change", validate_origin_destination)
 972         );
 973
 974         /* Also do it when the page loads, because firefox likes to
 975          * remember your selection even after the page reloads. */
 976         window.addEventListener("load", validate_origin_destination);
 977
 978         /* Finally, we have to babysit mobile Firefox, who doesn't
 979          * support HTML5 form validation going into 2024. Turn on
 980          * the little form errors paragraph so we can toggle its
 981          * visibility (and make it display the error) when the user
 982          * makes an invalid selection. */
 983         window.addEventListener("load", () => {
 984           if (ua_is_mobile_ff()) {
 985             const mfe = document.getElementById("marc-form-errors");
 986             mfe.style.display = "block";
 987           }
 988         });
 989       }
 990
 991     </script>
 992   </body>
 993 </html>