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