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