url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
}
- #servicename, #tickettime, #ticketdate {
- font-family: "CharmBypass Regular";
+ #servicename, #tickettime, #ticketdate, #codetext {
+ font-family: "CharmBypass Regular", sans-serif;
}
@font-face {
}
#serviceletter {
- font-family: "CharmBypass Bold";
+ font-family: "CharmBypass Bold", sans-serif;
}
/************************/
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);
+ /****************************************/
+ /* Set and reposition the security code */
+ /****************************************/
- /*************************/
- /* Set the security code */
- /*************************/
+ function set_code() {
+ /* All <text> elements produced by inkscape contain a single <tspan>
+ * that itself contains the actual text. This does something real
+ * sneaky, and actually OVERWRITES that tspan with our own text
+ * content. This turns out to be what we need anyway because trying
+ * to center a (display: inline) tspan is a pain in the butt. */
+ const ct = document.getElementById("codetext");
- /* All <text> elements produced by inkscape contain a single <tspan>
- * that itself contains the actual text. */
- const ct = document.getElementById("codetext");
+ /* Get the "code" from the querystring if it's there */
+ let params = new URLSearchParams(document.location.search);
+ if (params.get("code")) {
+ ct.textContent = params.get("code");
+ }
+ else {
+ /* Otherwise, use a random code */
+ const bucket = ["0","1","2","3","4","5","6","7","8","9",
+ "A","B","C","D","E","F","G","H","I","J",
+ "K","L","M","N","O","P","Q","R","S","T",
+ "U","V","W","X","Y","Z"];
- /* Get the "code" from the querystring if it's there */
- let params = new URLSearchParams(document.location.search);
- if (params.get("code")) {
- ct.firstChild.textContent = params.get("code");
+ /* Two random ints between 0 and 35 */
+ const i1 = Math.floor(Math.random() * 36);
+ const i2 = Math.floor(Math.random() * 36);
+ const d1 = bucket[i1];
+ const d2 = bucket[i2];
+ ct.textContent = d1 + d2;
+ }
}
- else {
- /* Otherwise, use a random code */
- const bucket = ["0","1","2","3","4","5","6","7","8","9",
- "A","B","C","D","E","F","G","H","I","J",
- "K","L","M","N","O","P","Q","R","S","T",
- "U","V","W","X","Y","Z"];
- /* Two random ints between 0 and 35 */
- const i1 = Math.floor(Math.random() * 36);
- const i2 = Math.floor(Math.random() * 36);
- const d1 = bucket[i1];
- const d2 = bucket[i2];
- ct.firstChild.textContent = d1 + d2;
+
+ function center_code() {
+ /* Center the security code inside its red box */
+ const ct = document.getElementById("codetext");
+
+ /* First, find the center of the red box */
+ const r1 = document.getElementById("codebg").getBoundingClientRect();
+ const c1 = r1.left + (r1.width / 2);
+
+ /* Now the center of the code text */
+ const r2 = ct.getBoundingClientRect();
+ const c2 = r2.left + (r2.width / 2);
+
+ /* What do we add to c2 to make it equal to c1? */
+ const code_delta = c1 - c2;
+
+ /* Since this <text> element has an "x" attribute it's easier for
+ * us to shift that than it is to mess with the "left" style. */
+ ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + code_delta);
}
+
/*****************************************/
/* 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 and a
- * half from now. This is what the CharmPass app does for
- * one-way tickets.
- */
- const date = new Date();
-
- /* 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. */
- tt = document.getElementById("tickettime");
- tt.firstChild.textContent = date.toLocaleTimeString();
-
- const td = document.getElementById("ticketdate");
- const dateopts = {
- day: "2-digit",
- month: "2-digit",
- year: "2-digit"
- };
- td.firstChild.textContent = date.toLocaleDateString("en-US", dateopts);
-
-
- /*************************************************************/
- /* Finally, add the onclick handler for the night/day switch */
- /*************************************************************/
+ function set_ticket_expiry() {
+ /* There are two parameters, time and date, that we store in one
+ * 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 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. */
+ tt = document.getElementById("tickettime").firstChild;
+ tt.textContent = date.toLocaleTimeString();
+
+ const td = document.getElementById("ticketdate");
+ const dateopts = {
+ day: "2-digit",
+ month: "2-digit",
+ year: "2-digit"
+ };
+ td.textContent = date.toLocaleDateString("en-US", dateopts);
+ }
+
+
+ /*********************************************************/
+ /* Finally, the onclick handler for the night/day switch */
+ /*********************************************************/
/* We always start in "day" mode */
is_day = true;
}
}
+
+ /*****************************************************/
+ /* Add event handlers for all of the functions above */
+ /*****************************************************/
+
+ /* Center the ticket once when the page has loaded */
+ window.addEventListener("load", center_ticket);
+
+ /* Re-center the ticket when the window is resized */
+ window.addEventListener("resize", center_ticket);
+
+ /* Set the security code text when the page has loaded */
+ window.addEventListener("load", set_code);
+
+ /* Center the security code text when the page has loaded;
+ 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 */
+ window.addEventListener("resize", center_code);
+
+ /* Set the ticket expiration date/time upon page load */
+ window.addEventListener("load", set_ticket_expiry);
+
+ /* Swap colors when the screen is tapped */
document.body.addEventListener("click", swap_colors);
</script>
projects / charm-bypass.git / blobdiff