--- /dev/null
+<!doctype html>
+<html lang="en-US">
+ <head>
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+ <title>
+ CharmBypass.
+ </title>
+
+ <style>
+ /*
+ * Reset styles for the html and body elements, the only two HTML
+ * elements we use. */
+ html, body {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-weight: normal;
+ font-style: inherit;
+ font-size: 100%;
+ line-height: 1.5;
+ font-family: inherit;
+ text-align: inherit;
+ text-decoration: none;
+ vertical-align: baseline;
+ background: transparent;
+ }
+
+ /* The blinking fade in/out animation for the ticket date and time */
+ @keyframes blink {
+ 25% {
+ opacity: 0.5;
+ }
+ 50% {
+ opacity: 0;
+ }
+ 75% {
+ opacity: 0.5;
+ }
+ }
+
+ #tickettime, #ticketdate {
+ animation: blink 2s linear infinite;
+ }
+
+ /* Define, load, and specify the custom font we use for the ticket
+ * date, time, and service name. */
+ @font-face {
+ font-family: "CharmBypass Ticket Text";
+ src:
+ url("data:font/woff2;base64,@TICKETFONT@") format("woff2")
+ }
+
+ #servicename, #tickettime, #ticketdate {
+ font-family: "CharmBypass Ticket Text" !important;
+ }
+
+ </style>
+ </head>
+
+ <body>
+ @SVGDATA@
+
+ <script>
+ /******************************************/
+ /* First, set up the ticket date and time */
+ /******************************************/
+
+ /* There are two parameters, time and date, that we store in one
+ * underlying "date" variable. Default both to an hour from now. This
+ * is sensible because the date/time shown on your ticket is its
+ * EXPIRATION time, and tickets are valid for two hours. Having it
+ * show one hour in the future means that you didn't just use your
+ * ticket a second ago (if you just got caught on the light rail, for
+ * example) but also means that it's not expiring for a while.
+ */
+ const date = new Date();
+
+ /* Add an hour. We use the low-level get/setTime to change the number
+ * of milliseconds since the epoch that this date represents. Obviously
+ * correct, and avoids all suspicious corner cases (well, for a few more
+ * decades). */
+ date.setTime(date.getTime() + (60*60*1000));
+
+ /* All <text> elements produced by inkscape contain a single <tspan>
+ * that itself contains the actual text. */
+ tt = document.getElementById("tickettime");
+ tt.firstChild.textContent = date.toLocaleTimeString();
+
+ td = document.getElementById("ticketdate");
+ const dateopts = {
+ day: "2-digit",
+ month: "2-digit",
+ year: "2-digit"
+ };
+ td.firstChild.textContent = date.toLocaleDateString("en-US", dateopts);
+
+
+ /************************************************************/
+ /* Second, add the onclick handler for the night/day switch */
+ /************************************************************/
+
+ /* We always start in "day" mode */
+ is_day = true;
+
+ function set_day() {
+ sky.style.fill = "#efb02f";
+ }
+
+ function set_night() {
+ sky.style.fill = "#143b66";
+ }
+
+ function swap_colors() {
+ if (is_day) {
+ set_night();
+ is_day = false;
+ }
+ else {
+ set_day();
+ is_day = true;
+ }
+ }
+
+ document.body.addEventListener("click", swap_colors);
+ </script>
+ </body>
+</html>
projects / charm-bypass.git / commitdiff