index.html.in

   1 <!doctype html>
   2 <html lang="en-US">
   3   <head>
   4     <meta name="viewport" content="width=device-width, initial-scale=1" />
   5
   6     <title>
   7       CharmBypass: you're getting transit equity whether you like it
   8       or not
   9     </title>
  10
  11     <style>
  12       input[type=submit] {
  13         margin-top: 1em;
  14         margin-bottom: 1em;
  15       }
  16
  17       svg {
  18         /* Set the height to 100% of the screen, which we'll keep; and the
  19          *  initial position to (0,0), which we're going to change
  20          * every time the window is resized, because the exact amount
  21          * that we have to slide the SVG to the left to get the ticket
  22          * into the center will change. */
  23         position: fixed;
  24         top: 0;
  25         left: 0;
  26         height: 100%;
  27
  28         /* Hide everything by default. We only show it once the user has
  29          * submitted the menu form */
  30         display: none;
  31       }
  32
  33       /* The blinking fade in/out animation for the ticket date and time */
  34       @keyframes blink {
  35         25% {
  36           opacity: 0.5;
  37         }
  38         50% {
  39           opacity: 0;
  40         }
  41         75% {
  42           opacity: 0.5;
  43         }
  44       }
  45
  46       #tickettime, #ticketdate {
  47         /* 300 two-second blinks is ten minutes */
  48         animation: blink 2s linear 300;
  49       }
  50
  51       /* Define, load, and specify the custom font we use for the ticket
  52        * date, time, and service name. */
  53       @font-face {
  54         font-family: "CharmBypass Regular";
  55         src:
  56           url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
  57       }
  58
  59       #servicename, #tickettime, #ticketdate, #codetext {
  60         font-family: "CharmBypass Regular", sans-serif;
  61       }
  62
  63       @font-face {
  64         font-family: "CharmBypass Bold";
  65         src:
  66           url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
  67       }
  68
  69       #serviceid {
  70         font-family: "CharmBypass Bold", sans-serif;
  71         font-weight: bold;
  72       }
  73
  74       /************************/
  75       /* Scrolling animations */
  76       /************************/
  77
  78       /* Bus */
  79       @keyframes busroll {
  80         from {
  81           transform: translateX(0%);
  82         }
  83         to {
  84           transform: translateX(-100%);
  85         }
  86       }
  87
  88       #bus {
  89         animation: busroll 23s linear infinite;
  90       }
  91
  92
  93       /* Tram */
  94       @keyframes tramroll {
  95         from {
  96           transform: translateX(0%);
  97         }
  98         to {
  99           transform: translateX(100%);
 100         }
 101       }
 102
 103       #tram {
 104         animation: tramroll 17s linear infinite;
 105       }
 106
 107
 108       /* Tram */
 109       @keyframes trainroll {
 110         from {
 111           transform: translateX(0%);
 112         }
 113         to {
 114           transform: translateX(100%);
 115         }
 116       }
 117
 118       #train {
 119         animation: trainroll 11s linear infinite;
 120       }
 121
 122
 123       /* Clouds */
 124       @keyframes cloudsfloat {
 125         from {
 126           transform: translateX(0%);
 127         }
 128         to {
 129           transform: translateX(-50%);
 130         }
 131       }
 132
 133       #clouds {
 134         animation: cloudsfloat 40s linear infinite;
 135       }
 136
 137       @keyframes cloudscopyfloat {
 138         from {
 139           transform: translateX(0%);
 140         }
 141         to {
 142           transform: translateX(-50%);
 143         }
 144       }
 145
 146       #cloudscopy {
 147         animation: cloudscopyfloat 40s linear infinite;
 148       }
 149
 150
 151       /* Trees */
 152       @keyframes treespass {
 153         from {
 154           transform: translateX(0%);
 155         }
 156         to {
 157           transform: translateX(-50%);
 158         }
 159       }
 160
 161       #trees {
 162         /* The trees move a little faster than the clouds */
 163         animation: treespass 30s linear infinite;
 164       }
 165
 166       @keyframes treescopypass {
 167         from {
 168           transform: translateX(0%);
 169         }
 170         to {
 171           transform: translateX(-50%);
 172         }
 173       }
 174
 175       #treescopy {
 176         /* The trees move a little faster than the clouds */
 177         animation: treescopypass 30s linear infinite;
 178       }
 179
 180
 181       /* City skyline */
 182       @keyframes cityscroll {
 183         from {
 184           transform: translateX(0%);
 185         }
 186         to {
 187           transform: translateX(-50%);
 188         }
 189       }
 190
 191       #city {
 192         /* The city moves faster than the clouds but slower
 193          * than the trees */
 194         animation: cityscroll 35s linear infinite;
 195       }
 196
 197       @keyframes citycopyscroll {
 198         from {
 199           transform: translateX(0%);
 200         }
 201         to {
 202           transform: translateX(-50%);
 203         }
 204       }
 205
 206       #citycopy {
 207         /* The city moves faster than the clouds but slower
 208          * than the trees */
 209         animation: citycopyscroll 35s linear infinite;
 210       }
 211     </style>
 212   </head>
 213
 214   <body>
 215     <div id="menu">
 216       <h1>CharmBypass</h1>
 217       <h2>you're getting transit equity whether you like it or not</h2>
 218       <form>
 219         <fieldset>
 220           <legend>BaltimoreLink (Bus, Light Rail, Metro)</legend>
 221           <input type="hidden" name="servicename" value="BaltimoreLink" />
 222           <input type="submit" name="go" value="Get Ticket" />
 223         </fieldset>
 224       </form>
 225       <form>
 226         <fieldset>
 227           <legend>Commuter Bus</legend>
 228           <input type="hidden" name="serviceid" value="R" />
 229           <input type="hidden" name="servicename" value="Commuter Bus" />
 230
 231           <h3>Zone</h3>
 232           <div>
 233             <input type="radio" id="zone1" name="zone" value="Zone 1" />
 234             <label for="zone1">Zone 1</label>
 235           </div>
 236           <div>
 237             <input type="radio" id="zone2" name="zone" value="Zone 2" />
 238             <label for="zone2">Zone 2</label>
 239           </div>
 240           <div>
 241             <input type="radio" id="zone3" name="zone" value="Zone 3" />
 242             <label for="zone3">Zone 3</label>
 243           </div>
 244           <div>
 245             <input type="radio" id="zone4" name="zone" value="Zone 4" />
 246             <label for="zone4">Zone 4</label>
 247           </div>
 248           <div>
 249             <input type="radio" id="zone5" name="zone" value="Zone 5" />
 250             <label for="zone5">Zone 5</label>
 251           </div>
 252
 253           <input type="submit" name="go" value="Get Ticket" />
 254         </fieldset>
 255       </form>
 256       <form>
 257         <fieldset>
 258           <legend>MARC Train</legend>
 259
 260           <h3>Origin</h3>
 261
 262           <div>
 263             <input type="radio" id="origin1" name="origin" value="BAL" />
 264             <label for="origin1">Baltimore/Penn (Penn Line)</label>
 265           </div>
 266           <div>
 267             <input type="radio" id="origin2" name="origin" value="BCA" />
 268             <label for="origin2">Baltimore/Camden (Camden Line)</label>
 269           </div>
 270           <div>
 271             <input type="radio" id="origin3" name="origin" value="BWE" />
 272             <label for="origin3">Bowie State (Penn Line)</label>
 273           </div>
 274           <div>
 275             <input type="radio" id="origin4" name="origin" value="BWI" />
 276             <label for="origin4">BWI Airport (Penn Line)</label>
 277           </div>
 278           <div>
 279             <input type="radio" id="origin5" name="origin" value="CPK" />
 280             <label for="origin5">College Park (Camden Line)</label>
 281           </div>
 282           <div>
 283             <input type="radio" id="origin6" name="origin" value="SEB" />
 284             <label for="origin6">Seabrook (Penn Line)</label>
 285           </div>
 286           <div>
 287             <input type="radio" id="origin7" name="origin" value="WAS" />
 288             <label for="origin7">Washington D.C.</label>
 289           </div>
 290           <div>
 291             <input type="radio" id="origin8" name="origin" value="WBL" />
 292             <label for="origin8">West Baltimore (Penn Line)</label>
 293           </div>
 294
 295           <h3>Destination</h3>
 296           <div>
 297             <input type="radio" id="destination1" name="destination" value="BAL" />
 298             <label for="destination1">Baltimore/Penn (Penn Line)</label>
 299           </div>
 300           <div>
 301             <input type="radio" id="destination2" name="destination" value="BCA" />
 302             <label for="destination2">Baltimore/Camden (Camden Line)</label>
 303           </div>
 304           <div>
 305             <input type="radio" id="destination3" name="destination" value="BWE" />
 306             <label for="destination3">Bowie State (Penn Line)</label>
 307           </div>
 308           <div>
 309             <input type="radio" id="destination4" name="destination" value="BWI" />
 310             <label for="destination4">BWI Airport (Penn Line)</label>
 311           </div>
 312           <div>
 313             <input type="radio" id="destination5" name="destination" value="CPK" />
 314             <label for="destination5">College Park (Camden Line)</label>
 315           </div>
 316           <div>
 317             <input type="radio" id="destination6" name="destination" value="SEB" />
 318             <label for="destination6">Seabrook (Penn Line)</label>
 319           </div>
 320           <div>
 321             <input type="radio" id="destination7" name="destination" value="WAS" />
 322             <label for="destination7">Washington D.C.</label>
 323           </div>
 324           <div>
 325             <input type="radio" id="destination8" name="destination" value="WBL" />
 326             <label for="destination8">West Baltimore (Penn Line)</label>
 327           </div>
 328
 329           <input type="hidden" name="serviceid" value="R" />
 330           <input type="hidden" name="servicename" value="MARC Train" />
 331           <input type="submit" name="go" value="Get Ticket" />
 332         </fieldset>
 333       </form>
 334     </div>
 335
 336     @SVGDATA@
 337
 338     <script>
 339
 340       /***********************************************/
 341       /* First, center the ticket within the browser */
 342       /***********************************************/
 343
 344       function center_ticket() {
 345         /* We're relying on the SVG being the full height of the
 346          * viewport already, and on the aspect ratio being
 347          * preserved. First, find the center of the ticket. */
 348         const r = document.getElementById("ticket").getBoundingClientRect();
 349         const c = r.left + (r.width / 2);
 350
 351         /* That's the center-line of the ticket. We want to move it to
 352          * the center-line of the viewport. */
 353         const vc = document.documentElement.clientWidth / 2;
 354
 355         /* This is how much we need to translate the SVG */
 356         const hdelta = vc - c;
 357
 358         /* But before we can set the absolute left-coordinate of the
 359          * SVG, we need to know where it is now. Note: without the
 360          * "px" this doesn't default to pixels like CSS does. */
 361         const svg = document.querySelector("svg");
 362         svg.style.left = (svg.getBoundingClientRect().left + hdelta) + "px";
 363       }
 364
 365
 366       /******************************/
 367       /* Set the service identifier */
 368       /******************************/
 369       function set_service_id() {
 370         const sid = document.getElementById("serviceid");
 371
 372         /* Get the "serviceid" from the querystring if it's there */
 373         const params = new URLSearchParams(document.location.search);
 374         if (params.get("serviceid")) {
 375           sid.textContent = params.get("serviceid");
 376         }
 377
 378         /* Otherwise, leave it at "F" */
 379       }
 380
 381       /******************************/
 382       /* Set the service name */
 383       /******************************/
 384       function set_service_name() {
 385         const sid = document.getElementById("servicename");
 386
 387         /* Get the "servicename" from the querystring if it's there */
 388         const params = new URLSearchParams(document.location.search);
 389         if (params.get("servicename")) {
 390           sid.textContent = params.get("servicename");
 391         }
 392
 393         /* Otherwise, leave it at "BaltimoreLink" */
 394       }
 395
 396       /****************************************/
 397       /* Set and reposition the security code */
 398       /****************************************/
 399
 400       function set_code() {
 401         const ct = document.getElementById("codetext");
 402
 403         /* Get the "code" from the querystring if it's there */
 404         const params = new URLSearchParams(document.location.search);
 405         if (params.get("code")) {
 406           ct.textContent = params.get("code");
 407         }
 408         else {
 409           /* Otherwise, use a random code */
 410           const bucket = ["0","1","2","3","4","5","6","7","8","9",
 411                           "A","B","C","D","E","F","G","H","I","J",
 412                           "K","L","M","N","O","P","Q","R","S","T",
 413                           "U","V","W","X","Y","Z"];
 414
 415           /* Two random ints between 0 and 35 */
 416           const i1 = Math.floor(Math.random() * 36);
 417           const i2 = Math.floor(Math.random() * 36);
 418           const d1 = bucket[i1];
 419           const d2 = bucket[i2];
 420           ct.textContent = d1 + d2;
 421         }
 422       }
 423
 424
 425       function center_code() {
 426         /* Center the security code inside its red box */
 427         const ct = document.getElementById("codetext");
 428         const bg = document.getElementById("codebg");
 429
 430         /* First, find the center of the red box */
 431         const r1 = bg.getBoundingClientRect();
 432         const c1 = r1.left + (r1.width / 2);
 433
 434         /* Now the center of the code text */
 435         const r2 = ct.getBoundingClientRect();
 436         const c2 = r2.left + (r2.width / 2);
 437
 438         /* What do we add to c2 to make it equal to c1? */
 439         const hdelta = c1 - c2;
 440
 441         /* We've measured everything so far in "client rect"
 442          * coordinates, because that's the only available measurement
 443          * we have for the width of the <text> element after futzing
 444          * with its contents. But when we reposition that <text>
 445          * element, it will be by adjusting its "x" attribute, and
 446          * that attribute uses a different coordinate system than the
 447          * client rect does. Specifically, "x" refers to an offset
 448          * within the SVG's coordinate system, and the client rect
 449          * coordinates are pixels on-screen. To convert between the
 450          * two, we can take the "width" attribute of the background
 451          * element and compare it to the width of the background
 452          * element's client rect. Since the size of the background is
 453          * fixed, this should give us a multiplier that turns client recr
 454          * distances (what we have) into SVG distances (what we want) */
 455         const client_to_svg = parseFloat(bg.getAttribute("width"))/r1.width;
 456
 457         /* Convert hdelta from client rect to SVG coordinates */
 458         const svg_hdelta = hdelta * client_to_svg;
 459
 460         /* Since this <text> element has an "x" attribute it's easier for
 461          * us to shift that than it is to mess with the "left" style. */
 462         ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + svg_hdelta);
 463       }
 464
 465       /*****************************************/
 466       /* Next, set up the ticket date and time */
 467       /*****************************************/
 468
 469       function set_ticket_expiry() {
 470         /* There are two parameters, time and date, that we store in one
 471          * underlying "date" variable. Default both to an hour and a
 472          * half from now. This is what the CharmPass app does for
 473          * one-way tickets. */
 474         const date = new Date();
 475
 476         /* BaltimoreLink and MARC Train are valid for an hour and a half */
 477         let minutes = 90;
 478         const params = new URLSearchParams(document.location.search);
 479         if (params.get("servicename") == "Commuter Bus") {
 480           /* But commuter bus tickets are only valid for ten minutes */
 481           minutes = 10;
 482         }
 483
 484         /* We use the low-level get/setTime to change the number of
 485          * milliseconds since the epoch that this date represents
 486          * Obviously correct, and avoids all suspicious corner cases
 487          * for a few more decades. */
 488         date.setTime(date.getTime() + (minutes*60*1000));
 489
 490         tt = document.getElementById("tickettime");
 491         tt.textContent = date.toLocaleTimeString();
 492
 493         const td = document.getElementById("ticketdate");
 494         const dateopts = {
 495           day: "2-digit",
 496           month: "2-digit",
 497           year: "2-digit"
 498         };
 499         td.textContent = date.toLocaleDateString("en-US", dateopts);
 500       }
 501
 502
 503       /*********************************************************/
 504       /* Finally, the onclick handler for the night/day switch */
 505       /*********************************************************/
 506
 507       /* We always start in "day" mode */
 508       is_day = true;
 509
 510       function set_day() {
 511         sky.style.fill = "#efb02f";
 512       }
 513
 514       function set_night() {
 515         sky.style.fill = "#143b66";
 516       }
 517
 518       function swap_colors() {
 519         if (is_day) {
 520           set_night();
 521           is_day = false;
 522         }
 523         else {
 524           set_day();
 525           is_day = true;
 526         }
 527       }
 528
 529       /******************************************/
 530       /* Display the ticket (and hide the menu) */
 531       /******************************************/
 532
 533       function go() {
 534         /* To create our "window" onto the scene, we're going to slide the
 535          * SVG off the left-hand side of the screen, and we don't want
 536          * scroll bars to appear. */
 537         document.body.style.overflow = "hidden";
 538         document.body.style.margin = "0";
 539         document.body.style.padding = "0";
 540
 541         const svg = document.querySelector("svg");
 542         const menu = document.getElementById("menu");
 543         svg.style.display = "initial";
 544         menu.style.display = "none";
 545       }
 546
 547       /*****************************************************/
 548       /* Add event handlers for all of the functions above */
 549       /*****************************************************/
 550
 551       const params = new URLSearchParams(document.location.search);
 552       if (params.get("go")) {
 553         /* First unhide the SVG (swap it with the form) */
 554         window.addEventListener("load", go);
 555
 556         /* Center the ticket once when the page has loaded */
 557         window.addEventListener("load", center_ticket);
 558
 559         /* Re-center the ticket when the window is resized */
 560         window.addEventListener("resize", center_ticket);
 561
 562         /* Set the service identifier when the page has loaded */
 563         window.addEventListener("load", set_service_id);
 564
 565         /* Set the service name when the page has loaded */
 566         window.addEventListener("load", set_service_name);
 567
 568         /* Set the security code text when the page has loaded */
 569         window.addEventListener("load", set_code);
 570
 571         /* Center the security code text when the page has loaded; in
 572          * particular, after we set the code. */
 573         window.addEventListener("load", center_code);
 574
 575         /* Set the ticket expiration date/time upon page load */
 576         window.addEventListener("load", set_ticket_expiry);
 577
 578         /* Swap colors when the screen is tapped */
 579         document.body.addEventListener("click", swap_colors);
 580       }
 581
 582     </script>
 583   </body>
 584 </html>