src/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       /* The blinking fade in/out animation for the ticket date and time */
  30       @keyframes blink {
  31         25% {
  32           opacity: 0.5;
  33         }
  34         50% {
  35           opacity: 0;
  36         }
  37         75% {
  38           opacity: 0.5;
  39         }
  40       }
  41
  42       #tickettime, #ticketdate {
  43         animation: blink 2s linear infinite;
  44       }
  45
  46       /* Define, load, and specify the custom font we use for the ticket
  47        * date, time, and service name. */
  48       @font-face {
  49         font-family: "CharmBypass Regular";
  50         src:
  51           url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
  52       }
  53
  54       #servicename, #tickettime, #ticketdate {
  55         font-family: "CharmBypass Regular";
  56       }
  57
  58       @font-face {
  59         font-family: "CharmBypass Bold";
  60         src:
  61           url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
  62       }
  63
  64       #serviceletter {
  65         font-family: "CharmBypass Bold";
  66       }
  67
  68       /************************/
  69       /* Scrolling animations */
  70       /************************/
  71
  72       /* Bus */
  73       @keyframes busroll {
  74         from {
  75           transform: translateX(0%);
  76         }
  77         to {
  78           transform: translateX(100%);
  79         }
  80       }
  81
  82       #bus {
  83         animation: busroll 23s linear infinite;
  84       }
  85
  86
  87       /* Tram */
  88       @keyframes tramroll {
  89         from {
  90           transform: translateX(0%);
  91         }
  92         to {
  93           transform: translateX(100%);
  94         }
  95       }
  96
  97       #tram {
  98         animation: tramroll 17s linear infinite;
  99       }
 100
 101
 102       /* Tram */
 103       @keyframes trainroll {
 104         from {
 105           transform: translateX(0%);
 106         }
 107         to {
 108           transform: translateX(100%);
 109         }
 110       }
 111
 112       #train {
 113         animation: trainroll 11s linear infinite;
 114       }
 115
 116
 117       /* Clouds */
 118       @keyframes cloudsfloat {
 119         from {
 120           transform: translateX(0%);
 121         }
 122         to {
 123           transform: translateX(-50%);
 124         }
 125       }
 126
 127       #clouds {
 128         animation: cloudsfloat 40s linear infinite;
 129       }
 130
 131       @keyframes cloudscopyfloat {
 132         from {
 133           transform: translateX(0%);
 134         }
 135         to {
 136           transform: translateX(-50%);
 137         }
 138       }
 139
 140       #cloudscopy {
 141         animation: cloudscopyfloat 40s linear infinite;
 142       }
 143
 144
 145       /* Trees */
 146       @keyframes treespass {
 147         from {
 148           transform: translateX(0%);
 149         }
 150         to {
 151           transform: translateX(-50%);
 152         }
 153       }
 154
 155       #trees {
 156         /* The trees move a little faster than the clouds */
 157         animation: treespass 30s linear infinite;
 158       }
 159
 160       @keyframes treescopypass {
 161         from {
 162           transform: translateX(0%);
 163         }
 164         to {
 165           transform: translateX(-50%);
 166         }
 167       }
 168
 169       #treescopy {
 170         /* The trees move a little faster than the clouds */
 171         animation: treescopypass 30s linear infinite;
 172       }
 173
 174
 175       /* City skyline */
 176       @keyframes cityscroll {
 177         from {
 178           transform: translateX(0%);
 179         }
 180         to {
 181           transform: translateX(-50%);
 182         }
 183       }
 184
 185       #city {
 186         /* The city moves faster than the clouds but slower
 187          * than the trees */
 188         animation: cityscroll 35s linear infinite;
 189       }
 190
 191       @keyframes citycopyscroll {
 192         from {
 193           transform: translateX(0%);
 194         }
 195         to {
 196           transform: translateX(-50%);
 197         }
 198       }
 199
 200       #citycopy {
 201         /* The city moves faster than the clouds but slower
 202          * than the trees */
 203         animation: citycopyscroll 35s linear infinite;
 204       }
 205     </style>
 206   </head>
 207
 208   <body>
 209     @SVGDATA@
 210
 211     <script>
 212       /******************************************/
 213       /* First, set up the ticket date and time */
 214       /******************************************/
 215
 216       /* There are two parameters, time and date, that we store in one
 217        * underlying "date" variable. Default both to an hour from now.  This
 218        * is sensible because the date/time shown on your ticket is its
 219        * EXPIRATION time, and tickets are valid for two hours. Having it
 220        * show one hour in the future means that you didn't just use your
 221        * ticket a second ago (if you just got caught on the light rail, for
 222        * example) but also means that it's not expiring for a while.
 223        */
 224       const date = new Date();
 225
 226       /* Add an hour. We use the low-level get/setTime to change the number
 227        * of milliseconds since the epoch that this date represents. Obviously
 228        * correct, and avoids all suspicious corner cases (well, for a few more
 229        * decades). */
 230       date.setTime(date.getTime() + (60*60*1000));
 231
 232       /* All <text> elements produced by inkscape contain a single <tspan>
 233        * that itself contains the actual text. */
 234       tt = document.getElementById("tickettime");
 235       tt.firstChild.textContent = date.toLocaleTimeString();
 236
 237       td = document.getElementById("ticketdate");
 238       const dateopts = {
 239         day: "2-digit",
 240         month: "2-digit",
 241         year: "2-digit"
 242       };
 243       td.firstChild.textContent = date.toLocaleDateString("en-US", dateopts);
 244
 245
 246       /************************************************************/
 247       /* Second, add the onclick handler for the night/day switch */
 248       /************************************************************/
 249
 250       /* We always start in "day" mode */
 251       is_day = true;
 252
 253       function set_day() {
 254         sky.style.fill = "#efb02f";
 255       }
 256
 257       function set_night() {
 258         sky.style.fill = "#143b66";
 259       }
 260
 261       function swap_colors() {
 262         if (is_day) {
 263           set_night();
 264           is_day = false;
 265         }
 266         else {
 267           set_day();
 268           is_day = true;
 269         }
 270       }
 271
 272       document.body.addEventListener("click", swap_colors);
 273     </script>
 274   </body>
 275 </html>