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.
   8     </title>
   9
  10     <style>
  11       /*
  12        * Reset styles for the html and body elements, the only two HTML
  13        * elements we use. */
  14       html, body {
  15         margin: 0;
  16         padding: 0;
  17         border: 0;
  18         font-weight: normal;
  19         font-style: inherit;
  20         font-size: 100%;
  21         line-height: 1.5;
  22         font-family: inherit;
  23         text-align: inherit;
  24         text-decoration: none;
  25         vertical-align: baseline;
  26         background: transparent;
  27       }
  28
  29       html, body {
  30         /* To create our "window" onto the scene, we're going to slide the
  31          * SVG off the left-hand side of the screen, and we don't want
  32          * scroll bars to appear. */
  33         overflow: hidden;
  34       }
  35
  36       svg {
  37         /* Set the height to 100% of the screen, which we'll keep; and the
  38          *  initial position to (0,0), which we're going to change
  39          * every time the window is resized, because the exact amount
  40          * that we have to slide the SVG to the left to get the ticket
  41          * into the center will change. */
  42         position: fixed;
  43         top: 0;
  44         left: 0;
  45         height: 100%;
  46       }
  47
  48       /* The blinking fade in/out animation for the ticket date and time */
  49       @keyframes blink {
  50         25% {
  51           opacity: 0.5;
  52         }
  53         50% {
  54           opacity: 0;
  55         }
  56         75% {
  57           opacity: 0.5;
  58         }
  59       }
  60
  61       #tickettime, #ticketdate {
  62         /* 300 two-second blinks is ten minutes */
  63         animation: blink 2s linear 300;
  64       }
  65
  66       /* Define, load, and specify the custom font we use for the ticket
  67        * date, time, and service name. */
  68       @font-face {
  69         font-family: "CharmBypass Regular";
  70         src:
  71           url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
  72       }
  73
  74       #servicename, #tickettime, #ticketdate, #codetext {
  75         font-family: "CharmBypass Regular", sans-serif;
  76       }
  77
  78       @font-face {
  79         font-family: "CharmBypass Bold";
  80         src:
  81           url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
  82       }
  83
  84       #serviceid {
  85         font-family: "CharmBypass Bold", sans-serif;
  86         font-weight: bold;
  87       }
  88
  89       /************************/
  90       /* Scrolling animations */
  91       /************************/
  92
  93       /* Bus */
  94       @keyframes busroll {
  95         from {
  96           transform: translateX(0%);
  97         }
  98         to {
  99           transform: translateX(-100%);
 100         }
 101       }
 102
 103       #bus {
 104         animation: busroll 23s linear infinite;
 105       }
 106
 107
 108       /* Tram */
 109       @keyframes tramroll {
 110         from {
 111           transform: translateX(0%);
 112         }
 113         to {
 114           transform: translateX(100%);
 115         }
 116       }
 117
 118       #tram {
 119         animation: tramroll 17s linear infinite;
 120       }
 121
 122
 123       /* Tram */
 124       @keyframes trainroll {
 125         from {
 126           transform: translateX(0%);
 127         }
 128         to {
 129           transform: translateX(100%);
 130         }
 131       }
 132
 133       #train {
 134         animation: trainroll 11s linear infinite;
 135       }
 136
 137
 138       /* Clouds */
 139       @keyframes cloudsfloat {
 140         from {
 141           transform: translateX(0%);
 142         }
 143         to {
 144           transform: translateX(-50%);
 145         }
 146       }
 147
 148       #clouds {
 149         animation: cloudsfloat 40s linear infinite;
 150       }
 151
 152       @keyframes cloudscopyfloat {
 153         from {
 154           transform: translateX(0%);
 155         }
 156         to {
 157           transform: translateX(-50%);
 158         }
 159       }
 160
 161       #cloudscopy {
 162         animation: cloudscopyfloat 40s linear infinite;
 163       }
 164
 165
 166       /* Trees */
 167       @keyframes treespass {
 168         from {
 169           transform: translateX(0%);
 170         }
 171         to {
 172           transform: translateX(-50%);
 173         }
 174       }
 175
 176       #trees {
 177         /* The trees move a little faster than the clouds */
 178         animation: treespass 30s linear infinite;
 179       }
 180
 181       @keyframes treescopypass {
 182         from {
 183           transform: translateX(0%);
 184         }
 185         to {
 186           transform: translateX(-50%);
 187         }
 188       }
 189
 190       #treescopy {
 191         /* The trees move a little faster than the clouds */
 192         animation: treescopypass 30s linear infinite;
 193       }
 194
 195
 196       /* City skyline */
 197       @keyframes cityscroll {
 198         from {
 199           transform: translateX(0%);
 200         }
 201         to {
 202           transform: translateX(-50%);
 203         }
 204       }
 205
 206       #city {
 207         /* The city moves faster than the clouds but slower
 208          * than the trees */
 209         animation: cityscroll 35s linear infinite;
 210       }
 211
 212       @keyframes citycopyscroll {
 213         from {
 214           transform: translateX(0%);
 215         }
 216         to {
 217           transform: translateX(-50%);
 218         }
 219       }
 220
 221       #citycopy {
 222         /* The city moves faster than the clouds but slower
 223          * than the trees */
 224         animation: citycopyscroll 35s linear infinite;
 225       }
 226     </style>
 227   </head>
 228
 229   <body>
 230     @SVGDATA@
 231
 232     <script>
 233
 234       /***********************************************/
 235       /* First, center the ticket within the browser */
 236       /***********************************************/
 237
 238       function center_ticket() {
 239         /* We're relying on the SVG being the full height of the
 240          * viewport already, and on the aspect ratio being
 241          * preserved. First, find the center of the ticket. */
 242         const r = document.getElementById("ticket").getBoundingClientRect();
 243         const c = r.left + (r.width / 2);
 244
 245         /* That's the center-line of the ticket. We want to move it to
 246          * the center-line of the viewport. */
 247         const vc = document.documentElement.clientWidth / 2;
 248
 249         /* This is how much we need to translate the SVG */
 250         const hdelta = vc - c;
 251
 252         /* But before we can set the absolute left-coordinate of the
 253          * SVG, we need to know where it is now. Note: without the
 254          * "px" this doesn't default to pixels like CSS does. */
 255         const svg = document.querySelector("svg");
 256         svg.style.left = (svg.getBoundingClientRect().left + hdelta) + "px";
 257       }
 258
 259
 260       /******************************/
 261       /* Set the service identifier */
 262       /******************************/
 263       function set_service_id() {
 264         const sid = document.getElementById("serviceid");
 265
 266         /* Get the "serviceid" from the querystring if it's there */
 267         let params = new URLSearchParams(document.location.search);
 268         if (params.get("serviceid")) {
 269           sid.textContent = params.get("serviceid");
 270         }
 271
 272         /* Otherwise, leave it at "F" */
 273       }
 274
 275       /******************************/
 276       /* Set the service name */
 277       /******************************/
 278       function set_service_id() {
 279         const sid = document.getElementById("servicename");
 280
 281         /* Get the "servicename" from the querystring if it's there */
 282         let params = new URLSearchParams(document.location.search);
 283         if (params.get("servicename")) {
 284           sid.textContent = params.get("servicename");
 285         }
 286
 287         /* Otherwise, leave it at "BaltimoreLink" */
 288       }
 289
 290       /****************************************/
 291       /* Set and reposition the security code */
 292       /****************************************/
 293
 294       function set_code() {
 295         const ct = document.getElementById("codetext");
 296
 297         /* Get the "code" from the querystring if it's there */
 298         let params = new URLSearchParams(document.location.search);
 299         if (params.get("code")) {
 300           ct.textContent = params.get("code");
 301         }
 302         else {
 303           /* Otherwise, use a random code */
 304           const bucket = ["0","1","2","3","4","5","6","7","8","9",
 305                           "A","B","C","D","E","F","G","H","I","J",
 306                           "K","L","M","N","O","P","Q","R","S","T",
 307                           "U","V","W","X","Y","Z"];
 308
 309           /* Two random ints between 0 and 35 */
 310           const i1 = Math.floor(Math.random() * 36);
 311           const i2 = Math.floor(Math.random() * 36);
 312           const d1 = bucket[i1];
 313           const d2 = bucket[i2];
 314           ct.textContent = d1 + d2;
 315         }
 316       }
 317
 318
 319       function center_code() {
 320         /* Center the security code inside its red box */
 321         const ct = document.getElementById("codetext");
 322         const bg = document.getElementById("codebg");
 323
 324         /* First, find the center of the red box */
 325         const r1 = bg.getBoundingClientRect();
 326         const c1 = r1.left + (r1.width / 2);
 327
 328         /* Now the center of the code text */
 329         const r2 = ct.getBoundingClientRect();
 330         const c2 = r2.left + (r2.width / 2);
 331
 332         /* What do we add to c2 to make it equal to c1? */
 333         const hdelta = c1 - c2;
 334
 335         /* We've measured everything so far in "client rect"
 336          * coordinates, because that's the only available measurement
 337          * we have for the width of the <text> element after futzing
 338          * with its contents. But when we reposition that <text>
 339          * element, it will be by adjusting its "x" attribute, and
 340          * that attribute uses a different coordinate system than the
 341          * client rect does. Specifically, "x" refers to an offset
 342          * within the SVG's coordinate system, and the client rect
 343          * coordinates are pixels on-screen. To convert between the
 344          * two, we can take the "width" attribute of the background
 345          * element and compare it to the width of the background
 346          * element's client rect. Since the size of the background is
 347          * fixed, this should give us a multiplier that turns client recr
 348          * distances (what we have) into SVG distances (what we want) */
 349         const client_to_svg = parseFloat(bg.getAttribute("width"))/r1.width;
 350
 351         /* Convert hdelta from client rect to SVG coordinates */
 352         const svg_hdelta = hdelta * client_to_svg;
 353
 354         /* Since this <text> element has an "x" attribute it's easier for
 355          * us to shift that than it is to mess with the "left" style. */
 356         ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + svg_hdelta);
 357       }
 358
 359       /*****************************************/
 360       /* Next, set up the ticket date and time */
 361       /*****************************************/
 362
 363       function set_ticket_expiry() {
 364         /* There are two parameters, time and date, that we store in one
 365          * underlying "date" variable. Default both to an hour and a
 366          * half from now. This is what the CharmPass app does for
 367          * one-way tickets. */
 368         const date = new Date();
 369
 370         /* Add an hour and a half. We use the low-level get/setTime to
 371          * change the number of milliseconds since the epoch that this
 372          * date represents. Obviously correct, and avoids all suspicious
 373          * corner cases (well, for a few more decades). */
 374         date.setTime(date.getTime() + (90*60*1000));
 375
 376         tt = document.getElementById("tickettime");
 377         tt.textContent = date.toLocaleTimeString();
 378
 379         const td = document.getElementById("ticketdate");
 380         const dateopts = {
 381           day: "2-digit",
 382           month: "2-digit",
 383           year: "2-digit"
 384         };
 385         td.textContent = date.toLocaleDateString("en-US", dateopts);
 386       }
 387
 388
 389       /*********************************************************/
 390       /* Finally, the onclick handler for the night/day switch */
 391       /*********************************************************/
 392
 393       /* We always start in "day" mode */
 394       is_day = true;
 395
 396       function set_day() {
 397         sky.style.fill = "#efb02f";
 398       }
 399
 400       function set_night() {
 401         sky.style.fill = "#143b66";
 402       }
 403
 404       function swap_colors() {
 405         if (is_day) {
 406           set_night();
 407           is_day = false;
 408         }
 409         else {
 410           set_day();
 411           is_day = true;
 412         }
 413       }
 414
 415
 416       /*****************************************************/
 417       /* Add event handlers for all of the functions above */
 418       /*****************************************************/
 419
 420       /* Center the ticket once when the page has loaded */
 421       window.addEventListener("load", center_ticket);
 422
 423       /* Re-center the ticket when the window is resized */
 424       window.addEventListener("resize", center_ticket);
 425
 426       /* Set the service identifier when the page has loaded */
 427       window.addEventListener("load", set_service_id);
 428
 429       /* Set the service name when the page has loaded */
 430       window.addEventListener("load", set_service_name);
 431
 432       /* Set the security code text when the page has loaded */
 433       window.addEventListener("load", set_code);
 434
 435       /* Center the security code text when the page has loaded; in
 436        * particular, after we set the code. */
 437       window.addEventListener("load", center_code);
 438
 439       /* Set the ticket expiration date/time upon page load */
 440       window.addEventListener("load", set_ticket_expiry);
 441
 442       /* Swap colors when the screen is tapped */
 443       document.body.addEventListener("click", swap_colors);
 444
 445     </script>
 446   </body>
 447 </html>