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       /* Tram */
 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
 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
 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
 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       /* First, center the ticket within the browser */
 420       /***********************************************/
 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 */
 446       /******************************/
 447       function set_service_id() {
 448         const sid = document.getElementById("serviceid");
 449
 450         /* Get the "serviceid" from the querystring if it's there */
 451         const params = new URLSearchParams(document.location.search);
 452         if (params.get("serviceid")) {
 453           sid.textContent = params.get("serviceid");
 454         }
 455
 456         /* Otherwise, leave it at "F" */
 457       }
 458
 459       /************************/
 460       /* Set the service name */
 461       /************************/
 462       function set_service_name() {
 463         const sid = document.getElementById("servicename");
 464
 465         /* Get the "servicename" from the querystring if it's there */
 466         const params = new URLSearchParams(document.location.search);
 467         if (params.get("servicename")) {
 468           sid.textContent = params.get("servicename");
 469         }
 470
 471         /* Otherwise, leave it at "BaltimoreLink" */
 472       }
 473
 474
 475       /************************/
 476       /* Set the service zone */
 477       /************************/
 478       function set_service_zone(event, zone) {
 479         /* We can take the zone as a parameter too; this allows us to
 480          * use this function for the (computed) MARC Train zone and
 481          * not just the querystring Commuter Bus zone. The extra
 482          * "event" parameter is there for the event listener, which
 483          * would otherwise stuff an onload event into the zone
 484          * parameter. "Thankfully" javascript lets us call a
 485          * two-argument function with one argument and thereby abuse
 486          * the event handler for this. */
 487         const z = document.getElementById("zone");
 488         const params = new URLSearchParams(document.location.search);
 489
 490         if (zone) {
 491           z.textContent = zone;
 492           z.style.display = "block"; /* It's hidden by default */
 493         }
 494         else if (params.get("zone")) {
 495           /* Get the "zone" from the querystring if it's there */
 496           z.textContent = params.get("zone");
 497           z.style.display = "block"; /* It's hidden by default */
 498         }
 499
 500         /* Otherwise, leave it blank (and hidden) */
 501       }
 502
 503       /***********************************************************/
 504       /* Resize the  ticket background based on the service name */
 505       /***********************************************************/
 506
 507       function resize_ticket() {
 508         /* Get the "servicename" from the querystring if it's there */
 509         const params = new URLSearchParams(document.location.search);
 510         const tbg = document.getElementById("ticketbg");
 511         const t = document.getElementById("ticket");
 512         const sn = document.getElementById("servicename");
 513
 514         if (params.get("servicename") == "Commuter Bus") {
 515           /* The top of the background is initially at y=246.859, and
 516            * we scale it by a factor of 1.12 to y=276.482 for a change
 517            * of 29.623. So after we scale it, we translate it upwards
 518            * by that amount to put it back where it started. */
 519           tbg.setAttribute("transform", "translate(0 -29.623) scale(1 1.12)");
 520
 521           /* Now translate the entire ticket up by the magic amount, 1/5
 522            * of the size change we made to the background. This ratio
 523            * was found by measuring pixels in side-by-side screenshots
 524            * of BaltimoreLink and Commuter Bus tickets. */
 525           t.setAttribute("transform", "translate(0 -9.33)");
 526
 527           /* More magic numbers discovered by comparing the two
 528            * tickets overlayed in inkscape */
 529           sn.setAttribute("transform", "translate(0 64.28)");
 530         }
 531         else if (params.get("servicename") == "MARC Train") {
 532           /* insane tricks are explained above */
 533           tbg.setAttribute("transform",
 534                            "translate(0 -72.378) scale(1 1.2932)");
 535           t.setAttribute("transform", "translate(0 -67.17)");
 536           sn.setAttribute("transform", "translate(0 131.0)");
 537         }
 538
 539         /* Otherwise, leave it alone. The SVG was designed with the
 540          * BaltimoreLink ticket in mind */
 541       }
 542
 543       /****************************************/
 544       /* Set and reposition the security code */
 545       /****************************************/
 546
 547       function set_code() {
 548         const ct = document.getElementById("codetext");
 549
 550         /* Get the "code" from the querystring if it's there */
 551         const params = new URLSearchParams(document.location.search);
 552         if (params.get("code")) {
 553           ct.textContent = params.get("code").toUpperCase();
 554         }
 555         else {
 556           /* Otherwise, use a random code */
 557           const bucket = ["0","1","2","3","4","5","6","7","8","9",
 558                           "A","B","C","D","E","F","G","H","I","J",
 559                           "K","L","M","N","O","P","Q","R","S","T",
 560                           "U","V","W","X","Y","Z"];
 561
 562           /* Two random ints between 0 and 35 */
 563           const i1 = Math.floor(Math.random() * 36);
 564           const i2 = Math.floor(Math.random() * 36);
 565           const d1 = bucket[i1];
 566           const d2 = bucket[i2];
 567           ct.textContent = d1 + d2;
 568         }
 569       }
 570
 571
 572       function center_code() {
 573         /* Center the security code inside its red box */
 574         const ct = document.getElementById("codetext");
 575         const bg = document.getElementById("codebg");
 576
 577         /* First, find the center of the red box */
 578         const r1 = bg.getBoundingClientRect();
 579         const c1 = r1.left + (r1.width / 2);
 580
 581         /* Now the center of the code text */
 582         const r2 = ct.getBoundingClientRect();
 583         const c2 = r2.left + (r2.width / 2);
 584
 585         /* What do we add to c2 to make it equal to c1? */
 586         const hdelta = c1 - c2;
 587
 588         /* We've measured everything so far in "client rect"
 589          * coordinates, because that's the only available measurement
 590          * we have for the width of the <text> element after futzing
 591          * with its contents. But when we reposition that <text>
 592          * element, it will be by adjusting its "x" attribute, and
 593          * that attribute uses a different coordinate system than the
 594          * client rect does. Specifically, "x" refers to an offset
 595          * within the SVG's coordinate system, and the client rect
 596          * coordinates are pixels on-screen. To convert between the
 597          * two, we can take the "width" attribute of the background
 598          * element and compare it to the width of the background
 599          * element's client rect. Since the size of the background is
 600          * fixed, this should give us a multiplier that turns client recr
 601          * distances (what we have) into SVG distances (what we want) */
 602         const client_to_svg = parseFloat(bg.getAttribute("width"))/r1.width;
 603
 604         /* Convert hdelta from client rect to SVG coordinates */
 605         const svg_hdelta = hdelta * client_to_svg;
 606
 607         /* Since this <text> element has an "x" attribute it's easier for
 608          * us to shift that than it is to mess with the "left" style. */
 609         ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + svg_hdelta);
 610       }
 611
 612       /*****************************************/
 613       /* Next, set up the ticket date and time */
 614       /*****************************************/
 615
 616       function set_ticket_expiry() {
 617         /* There are two parameters, time and date, that we store in one
 618          * underlying "date" variable. Default both to an hour and a
 619          * half from now. This is what the CharmPass app does for
 620          * one-way tickets. */
 621         const date = new Date();
 622
 623         /* BaltimoreLink and MARC Train are valid for an hour and a half */
 624         let minutes = 90;
 625         const params = new URLSearchParams(document.location.search);
 626         if (params.get("servicename") == "Commuter Bus") {
 627           /* But commuter bus tickets are only valid for ten minutes */
 628           minutes = 10;
 629         }
 630
 631         /* We use the low-level get/setTime to change the number of
 632          * milliseconds since the epoch that this date represents
 633          * Obviously correct, and avoids all suspicious corner cases
 634          * for a few more decades. */
 635         date.setTime(date.getTime() + (minutes*60*1000));
 636
 637         tt = document.getElementById("tickettime");
 638         tt.textContent = date.toLocaleTimeString();
 639
 640         const td = document.getElementById("ticketdate");
 641         const dateopts = {
 642           day: "2-digit",
 643           month: "2-digit",
 644           year: "2-digit"
 645         };
 646         td.textContent = date.toLocaleDateString("en-US", dateopts);
 647       }
 648
 649
 650       /*********************************************************/
 651       /* Finally, the onclick handler for the night/day switch */
 652       /*********************************************************/
 653
 654       /* We always start in "day" mode */
 655       is_day = true;
 656
 657       function set_day() {
 658         sky.style.fill = "#efb02f";
 659       }
 660
 661       function set_night() {
 662         sky.style.fill = "#143b66";
 663       }
 664
 665       function swap_colors() {
 666         if (is_day) {
 667           set_night();
 668           is_day = false;
 669         }
 670         else {
 671           set_day();
 672           is_day = true;
 673         }
 674       }
 675
 676
 677       /*******************************************************/
 678       /* Compute the MARC "zone" from its origin/destination */
 679       /*******************************************************/
 680
 681       /* Sorted on the first component, then the second */
 682       const zone_map = {
 683         BAL_BWE: 2,
 684         BAL_BWI: 1,
 685         BAL_SEB: 3,
 686         BAL_WAS: 4,
 687         BAL_WBL: 1,
 688         BCA_CPK_: 3,
 689         BCA_WAS_: 4,
 690         BWI_BWE: 1,
 691         BWI_WAS: 3,
 692         BWI_WBL: 1
 693       };
 694
 695       /* Compute the zone (string) for the given origin/destination pair.
 696        * If we don't know it or if you chose in invalid pair (destination
 697        * not on the same line as your origin?) then the empty string is
 698        * returned. */
 699       function compute_marc_zone(src, dest) {
 700         /* Forward direction key for zone_map */
 701         const fwd = src + "_" +  dest;
 702
 703         /* Reverse direction key for zone_map. The zone_map only
 704          * has them listed in one direction, so we check both
 705          * directions here. */
 706         const rev = dest + "_" +  src;
 707
 708         /* The default. Obviously wrong for when we don't
 709          * have the necessary data. */
 710         let zone = -1;
 711
 712         if (zone_map[fwd]) {
 713           zone = zone_map[fwd];
 714         }
 715         else if (zone_map[rev]) {
 716           zone = zone_map[rev];
 717         }
 718
 719         /* Convert the number to a string */
 720         switch (zone) {
 721           case 1:
 722             return "One Zone";
 723           case 2:
 724             return "Two Zone";
 725           case 3:
 726             return "Three Zone";
 727           case 4:
 728             return "Four Zone";
 729           default:
 730             return "";
 731         }
 732       }
 733
 734       function set_marc_zone() {
 735         const params = new URLSearchParams(document.location.search);
 736         if (params.get("origin") && params.get("destination")) {
 737           const src = params.get("origin");
 738           const dest = params.get("destination");
 739           const zone = compute_marc_zone(src, dest);
 740
 741           set_service_zone(null, zone);
 742         }
 743       }
 744
 745
 746       /*****************************************************/
 747       /* Set the origin and destination for the MARC Train */
 748       /*****************************************************/
 749
 750       function set_marc_origin_destination() {
 751         const params = new URLSearchParams(document.location.search);
 752         if (!params.get("origin") || !params.get("destination")) {
 753           return;
 754         }
 755
 756         const src = params.get("origin");
 757         const dest = params.get("destination");
 758
 759         /* origindest contains both the origin and destination */
 760         const origindest = document.getElementById("origindest");
 761
 762         const origin = document.getElementById("origin");
 763         const destination = document.getElementById("destination");
 764
 765         origin.textContent = params.get("origin");
 766         destination.textContent = params.get("destination");
 767
 768         origindest.style.display = "block"; /* It's hidden by default */
 769       }
 770
 771       /******************************************/
 772       /* Display the ticket (and hide the menu) */
 773       /******************************************/
 774
 775       function go() {
 776         /* To create our "window" onto the scene, we're going to slide the
 777          * SVG off the left-hand side of the screen, and we don't want
 778          * scroll bars to appear. */
 779         document.body.style.overflow = "hidden";
 780         document.body.style.margin = "0";
 781         document.body.style.padding = "0";
 782
 783         const svg = document.querySelector("svg");
 784         const menu = document.getElementById("menu");
 785         svg.style.display = "initial";
 786         menu.style.display = "none";
 787       }
 788
 789       /*****************************************************/
 790       /* Add event handlers for all of the functions above */
 791       /*****************************************************/
 792
 793       const params = new URLSearchParams(document.location.search);
 794       if (params.get("go")) {
 795         /* First unhide the SVG (swap it with the form) */
 796         window.addEventListener("load", go);
 797
 798         /* Center the ticket once when the page has loaded */
 799         window.addEventListener("load", center_ticket);
 800
 801         /* Re-center the ticket when the window is resized */
 802         window.addEventListener("resize", center_ticket);
 803
 804         /* Set the service identifier when the page has loaded */
 805         window.addEventListener("load", set_service_id);
 806
 807         /* Set the service name when the page has loaded */
 808         window.addEventListener("load", set_service_name);
 809
 810         /* Set the service zone when the page has loaded */
 811         window.addEventListener("load", set_service_zone);
 812
 813         /* Resize the ticket background if necessary */
 814         window.addEventListener("load", resize_ticket);
 815
 816         /* Set the security code text when the page has loaded */
 817         window.addEventListener("load", set_code);
 818
 819         /* Center the security code text when the page has loaded; in
 820          * particular, after we set the code. */
 821         window.addEventListener("load", center_code);
 822
 823         /* Set the ticket expiration date/time upon page load */
 824         window.addEventListener("load", set_ticket_expiry);
 825
 826         /* Set the MARC Train origin and destination, if applicable */
 827         window.addEventListener("load", set_marc_origin_destination);
 828
 829         /* Set the MARC Train zone, if applicable */
 830         window.addEventListener("load", set_marc_zone);
 831
 832         /* Swap colors when the screen is tapped */
 833         document.body.addEventListener("click", swap_colors);
 834       }
 835
 836     </script>
 837   </body>
 838 </html>