X-Git-Url: https://gitweb.michael.orlitzky.com/?a=blobdiff_plain;f=index.html.in;h=96dd04a437b2dab5ae75e188045850419311e235;hb=893bee273e48207ef4609e7f20de688007970699;hp=e129eeaf84ff70aaf50915ba8995f98d96d09f86;hpb=ea8e2dc15b38517f6ffef061ffdf01a76a57b122;p=charm-bypass.git diff --git a/index.html.in b/index.html.in index e129eea..96dd04a 100644 --- a/index.html.in +++ b/index.html.in @@ -55,7 +55,7 @@ url("data:font/woff2;base64,@CBPREGULAR@") format("woff2") } - #servicename, #tickettime, #ticketdate, #codetext { + #servicename, #tickettime, #ticketdate, #codetext, #zone { font-family: "CharmBypass Regular", sans-serif; } @@ -67,7 +67,6 @@ #serviceid { font-family: "CharmBypass Bold", sans-serif; - font-weight: bold; } /************************/ @@ -216,11 +215,11 @@

doing transit equity whether they like it or not

- Hint: If you think the driver or fare inspector will - actually check it, the daily security code is the same on a - $2.00 BaltimoreLink ticket as it is on a $9.00 MARC Train - ticket. It's also the same on your friend's phone, or for - anyone else in Maryland that day. + Hint: If you think the driver or fare inspector will + actually check it, the daily security code is the same on a + $2.00 BaltimoreLink ticket as it is on a $9.00 MARC Train + ticket. It's also the same on your friend's phone, or for + anyone else in Maryland that day.

@@ -235,7 +234,7 @@ type="text" minlength="2" maxlength="2" - pattern="[a-zA-Z0-9]+" /> + pattern="[a-zA-Z0-9]*" /> @@ -251,12 +250,12 @@ - + pattern="[a-zA-Z0-9]*" />

Zone

@@ -288,16 +287,16 @@
MARC Train -
+
- + pattern="[a-zA-Z0-9]*" />

Origin

@@ -421,9 +420,9 @@ /* Otherwise, leave it at "F" */ } - /******************************/ + /************************/ /* Set the service name */ - /******************************/ + /************************/ function set_service_name() { const sid = document.getElementById("servicename"); @@ -436,6 +435,70 @@ /* Otherwise, leave it at "BaltimoreLink" */ } + + /************************/ + /* Set the service zone */ + /************************/ + function set_service_zone(zone) { + /* We can take the zone as a parameter too; this allows + * us to use this function for the (computed) MARC Train + * zone and not just the querystring Commuter Bus zone */ + const z = document.getElementById("zone"); + const params = new URLSearchParams(document.location.search); + + if (zone) { + z.textContent = zone; + z.style.display = "block"; /* It's hidden by default */ + } + else if (params.get("zone")) { + /* Get the "zone" from the querystring if it's there */ + z.textContent = params.get("zone"); + z.style.display = "block"; /* It's hidden by default */ + } + + /* Otherwise, leave it blank (and hidden) */ + } + + /***********************************************************/ + /* Resize the ticket background based on the service name */ + /***********************************************************/ + + function resize_ticket() { + /* Get the "servicename" from the querystring if it's there */ + const params = new URLSearchParams(document.location.search); + const tbg = document.getElementById("ticketbg"); + const t = document.getElementById("ticket"); + const sn = document.getElementById("servicename"); + + if (params.get("servicename") == "Commuter Bus") { + /* The top of the background is initially at y=246.859, and + * we scale it by a factor of 1.12 to y=276.482 for a change + * of 29.623. So after we scale it, we translate it upwards + * by that amount to put it back where it started. */ + tbg.setAttribute("transform", "translate(0 -29.623) scale(1 1.12)"); + + /* Now translate the entire ticket up by the magic amount, 1/5 + * of the size change we made to the background. This ratio + * was found by measuring pixels in side-by-side screenshots + * of BaltimoreLink and Commuter Bus tickets. */ + t.setAttribute("transform", "translate(0 -9.33)"); + + /* More magic numbers discovered by comparing the two + * tickets overlayed in inkscape */ + sn.setAttribute("transform", "translate(0 64.28)"); + } + else if (params.get("servicename") == "MARC Train") { + /* insane tricks are explained above */ + tbg.setAttribute("transform", + "translate(0 -72.378) scale(1 1.2932)"); + t.setAttribute("transform", "translate(0 -67.17)"); + sn.setAttribute("transform", "translate(0 131.0)"); + } + + /* Otherwise, leave it alone. The SVG was designed with the + * BaltimoreLink ticket in mind */ + } + /****************************************/ /* Set and reposition the security code */ /****************************************/ @@ -634,8 +697,7 @@ const dest = params.get("destination"); const zone = compute_marc_zone(src, dest); - /* TODO: actually set the zone */ - alert(zone); + set_service_zone(zone); } } @@ -678,6 +740,12 @@ /* Set the service name when the page has loaded */ window.addEventListener("load", set_service_name); + /* Set the service zone when the page has loaded */ + window.addEventListener("load", set_service_zone); + + /* Resize the ticket background if necessary */ + window.addEventListener("load", resize_ticket); + /* Set the security code text when the page has loaded */ window.addEventListener("load", set_code); @@ -688,8 +756,8 @@ /* Set the ticket expiration date/time upon page load */ window.addEventListener("load", set_ticket_expiry); - /* Set the MARC Train zone, if applicable */ - window.addEventListener("load", set_marc_zone); + /* Set the MARC Train zone, if applicable */ + window.addEventListener("load", set_marc_zone); /* Swap colors when the screen is tapped */ document.body.addEventListener("click", swap_colors);