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