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