}
#tickettime, #ticketdate {
- animation: blink 2s linear infinite;
+ /* 300 two-second blinks is ten minutes */
+ animation: blink 2s linear 300;
}
/* Define, load, and specify the custom font we use for the ticket
@SVGDATA@
<script>
- /******************************************/
- /* First, set up the ticket date and time */
- /******************************************/
+
+ /***********************************************/
+ /* First, center the ticket within the browser */
+ /***********************************************/
+
+ function center_ticket() {
+ /* We're relying on the SVG being the full height of the
+ * viewport already, and on the aspect ratio being
+ * preserved. First, find the center of the ticket. */
+ const r = document.getElementById("ticket").getBoundingClientRect();
+ const c = r.left + (r.width / 2);
+
+ /* That's the center-line of the ticket. We want to move it to
+ * the center-line of the viewport. */
+ const vc = document.documentElement.clientWidth / 2;
+
+ /* This is how much we need to translate the SVG */
+ const delta = vc - c;
+
+ /* But before we can set the absolute left-coordinate of the
+ * SVG, we need to know where it is now. Note: without the
+ * "px" this doesn't default to pixels like CSS does. */
+ const svg = document.querySelector("svg");
+ svg.style.left = (svg.getBoundingClientRect().left + delta) + "px";
+ }
+
+ /* Re-center it when the window is resized */
+ window.addEventListener("resize", center_ticket);
+
+ /* Center it once when the page has loaded, too */
+ window.addEventListener("load", center_ticket);
+
+
+ /*****************************************/
+ /* Next, 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.
+ * underlying "date" variable. Default both to an hour and a
+ * half from now. This is what the CharmPass app does for
+ * one-way tickets.
*/
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));
+ /* Add an hour and a half. 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() + (90*60*1000));
/* All <text> elements produced by inkscape contain a single <tspan>
* that itself contains the actual text. */
td.firstChild.textContent = date.toLocaleDateString("en-US", dateopts);
- /************************************************************/
- /* Second, add the onclick handler for the night/day switch */
- /************************************************************/
+ /*************************************************************/
+ /* Finally, add the onclick handler for the night/day switch */
+ /*************************************************************/
/* We always start in "day" mode */
is_day = true;
document.body.addEventListener("click", swap_colors);
-
- /*************************************************/
- /* Finally, center the ticket within the browser */
- /*************************************************/
- function center_ticket() {
- /* We're relying on the SVG being the full height of the
- * viewport already, and on the aspect ratio being
- * preserved. First, find the center of the ticket. */
- const r = document.getElementById("ticket").getBoundingClientRect();
- const c = r.left + (r.width / 2);
-
- /* That's the center-line of the ticket. We want to move it to
- * the center-line of the viewport. */
- const vc = document.documentElement.clientWidth / 2;
-
- /* This is how much we need to translate the SVG */
- const delta = vc - c;
-
- /* But before we can set the absolute left-coordinate of the
- * SVG, we need to know where it is now. Note: without the
- * "px" this doesn't default to pixels like CSS does. */
- const svg = document.querySelector("svg");
- svg.style.left = (svg.getBoundingClientRect().left + delta) + "px";
- }
-
- /* Re-center it when the window is resized */
- window.addEventListener("resize", center_ticket);
-
- /* Center it once when the page has loaded, too */
- window.addEventListener("load", center_ticket);
</script>
</body>
</html>