]> gitweb.michael.orlitzky.com - charm-bypass.git/commitdiff
index.html.in: whitespace/comment cleanup
authorMichael Orlitzky <michael@orlitzky.com>
Thu, 26 Oct 2023 22:21:27 +0000 (18:21 -0400)
committerMichael Orlitzky <michael@orlitzky.com>
Thu, 26 Oct 2023 22:21:27 +0000 (18:21 -0400)
index.html.in

index 31e4276af340fae6e4199e30f28400dcc91b78c0..f6d7cceeae17a5c23024d489400225f880e686cd 100644 (file)
        * 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;
+        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;
       }
 
       html, body {
-       /* To create our "window" onto the scene, we're going to slide the
+        /* To create our "window" onto the scene, we're going to slide the
          * SVG off the left-hand side of the screen, and we don't want
-        * scroll bars to appear. */
-       overflow: hidden;
+         * scroll bars to appear. */
+        overflow: hidden;
       }
 
       svg {
-       /* Set the height to 100% of the screen, which we'll keep; and the
-        *  initial position to (0,0), which we're going to change
-        * every time the window is resized, because the exact amount
-        * that we have to slide the SVG to the left to get the ticket
-        * into the center will change. */
-       position: fixed;
-       top: 0;
-       left: 0;
-       height: 100%;
+        /* Set the height to 100% of the screen, which we'll keep; and the
+         *  initial position to (0,0), which we're going to change
+         * every time the window is resized, because the exact amount
+         * that we have to slide the SVG to the left to get the ticket
+         * into the center will change. */
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100%;
       }
 
       /* 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;
-       }
+        25% {
+          opacity: 0.5;
+        }
+        50% {
+          opacity: 0;
+        }
+        75% {
+          opacity: 0.5;
+        }
       }
 
       #tickettime, #ticketdate {
-       /* 300 two-second blinks is ten minutes */
-       animation: blink 2s linear 300;
+        /* 300 two-second blinks is ten minutes */
+        animation: blink 2s linear 300;
       }
 
       /* Define, load, and specify the custom font we use for the ticket
        * date, time, and service name. */
       @font-face {
-       font-family: "CharmBypass Regular";
-       src:
-         url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
+        font-family: "CharmBypass Regular";
+        src:
+          url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
       }
 
       #servicename, #tickettime, #ticketdate, #codetext {
       }
 
       @font-face {
-       font-family: "CharmBypass Bold";
-       src:
-         url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
+        font-family: "CharmBypass Bold";
+        src:
+          url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
       }
 
       #serviceletter {
-       font-family: "CharmBypass Bold", sans-serif;
+        font-family: "CharmBypass Bold", sans-serif;
         font-weight: bold;
       }
 
 
       /* Bus */
       @keyframes busroll {
-       from {
-         transform: translateX(0%);
-       }
-       to {
-         transform: translateX(-100%);
-       }
+        from {
+          transform: translateX(0%);
+        }
+        to {
+          transform: translateX(-100%);
+        }
       }
 
       #bus {
-       animation: busroll 23s linear infinite;
+        animation: busroll 23s linear infinite;
       }
 
 
       /* Tram */
       @keyframes tramroll {
-       from {
-         transform: translateX(0%);
-       }
-       to {
-         transform: translateX(100%);
-       }
+        from {
+          transform: translateX(0%);
+        }
+        to {
+          transform: translateX(100%);
+        }
       }
 
       #tram {
-       animation: tramroll 17s linear infinite;
+        animation: tramroll 17s linear infinite;
       }
 
 
       /* Tram */
       @keyframes trainroll {
-       from {
-         transform: translateX(0%);
-       }
-       to {
-         transform: translateX(100%);
-       }
+        from {
+          transform: translateX(0%);
+        }
+        to {
+          transform: translateX(100%);
+        }
       }
 
       #train {
-       animation: trainroll 11s linear infinite;
+        animation: trainroll 11s linear infinite;
       }
 
 
       /* Clouds */
       @keyframes cloudsfloat {
-       from {
-         transform: translateX(0%);
-       }
-       to {
-         transform: translateX(-50%);
-       }
+        from {
+          transform: translateX(0%);
+        }
+        to {
+          transform: translateX(-50%);
+        }
       }
 
       #clouds {
-       animation: cloudsfloat 40s linear infinite;
+        animation: cloudsfloat 40s linear infinite;
       }
 
       @keyframes cloudscopyfloat {
-       from {
-         transform: translateX(0%);
-       }
-       to {
-         transform: translateX(-50%);
-       }
+        from {
+          transform: translateX(0%);
+        }
+        to {
+          transform: translateX(-50%);
+        }
       }
 
       #cloudscopy {
-       animation: cloudscopyfloat 40s linear infinite;
+        animation: cloudscopyfloat 40s linear infinite;
       }
 
 
       /* Trees */
       @keyframes treespass {
-       from {
-         transform: translateX(0%);
-       }
-       to {
-         transform: translateX(-50%);
-       }
+        from {
+          transform: translateX(0%);
+        }
+        to {
+          transform: translateX(-50%);
+        }
       }
 
       #trees {
         /* The trees move a little faster than the clouds */
-       animation: treespass 30s linear infinite;
+        animation: treespass 30s linear infinite;
       }
 
       @keyframes treescopypass {
-       from {
-         transform: translateX(0%);
-       }
-       to {
-         transform: translateX(-50%);
-       }
+        from {
+          transform: translateX(0%);
+        }
+        to {
+          transform: translateX(-50%);
+        }
       }
 
       #treescopy {
         /* The trees move a little faster than the clouds */
-       animation: treescopypass 30s linear infinite;
+        animation: treescopypass 30s linear infinite;
       }
 
 
       /* City skyline */
       @keyframes cityscroll {
-       from {
-         transform: translateX(0%);
-       }
-       to {
-         transform: translateX(-50%);
-       }
+        from {
+          transform: translateX(0%);
+        }
+        to {
+          transform: translateX(-50%);
+        }
       }
 
       #city {
         /* The city moves faster than the clouds but slower
          * than the trees */
-       animation: cityscroll 35s linear infinite;
+        animation: cityscroll 35s linear infinite;
       }
 
       @keyframes citycopyscroll {
-       from {
-         transform: translateX(0%);
-       }
-       to {
-         transform: translateX(-50%);
-       }
+        from {
+          transform: translateX(0%);
+        }
+        to {
+          transform: translateX(-50%);
+        }
       }
 
       #citycopy {
       /***********************************************/
 
       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);
+        /* 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;
+        /* 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 hdelta = vc - c;
+        /* This is how much we need to translate the SVG */
+        const hdelta = 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 + hdelta) + "px";
+        /* 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 + hdelta) + "px";
       }
 
 
       }
 
       function set_night() {
-       sky.style.fill = "#143b66";
+        sky.style.fill = "#143b66";
       }
 
       function swap_colors() {
-       if (is_day) {
-         set_night();
-         is_day = false;
-       }
-       else {
-         set_day();
-         is_day = true;
-       }
+        if (is_day) {
+          set_night();
+          is_day = false;
+        }
+        else {
+          set_day();
+          is_day = true;
+        }
       }
 
 
       window.addEventListener("load", set_code);
 
       /* Center the security code text when the page has loaded;
-       in particular, after we set it */
+       in particular, after we set it */
       window.addEventListener("load", center_code);
 
       /* Re-center the security code when the window is resized,
-        and in particular after the ticket is re-centered */
+       * and in particular after the ticket is re-centered */
       window.addEventListener("resize", center_code);
 
       /* Set the ticket expiration date/time upon page load */