<html lang="en-US">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
+ <link rel="icon" href="favicon.svg" />
<title>
- CharmBypass: doing transit equity whether they like it or not
+ CharmBypass: it's transit equity y'all
</title>
<style>
+ fieldset {
+ margin-top: 1em;
+ padding-top: 1em;
+ }
+
input[type=submit] {
margin-top: 1em;
margin-bottom: 1em;
}
+ legend {
+ font-weight: bold;
+ }
+
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
url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
}
- #servicename, #tickettime, #ticketdate, #codetext {
+ #origindest, #servicename, #tickettime, #ticketdate, #codetext, #zone {
font-family: "CharmBypass Regular", sans-serif;
}
<body>
<div id="menu">
<h1>CharmBypass</h1>
- <h2>doing transit equity whether they like it or not</h2>
+ <h2>it's transit equity y'all</h2>
<p>
- <em>Hint:</em> 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.
+ <em>Hint:</em> 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.
</p>
<form>
<fieldset>
- <legend>BaltimoreLink (Bus, Light Rail, Metro)</legend>
+ <legend>Local Bus, Light Rail, or Metro</legend>
<div>
<label for="code1">
Daily security code (optional):
<input id="code1"
name="code"
type="text"
+ size="2"
minlength="2"
maxlength="2"
pattern="[a-zA-Z0-9]*" />
</div>
<input type="hidden" name="servicename" value="BaltimoreLink" />
- <input type="submit" name="go" value="Get Ticket" />
+ <input type="submit" name="go" value="Generate Ticket" />
</fieldset>
</form>
<form>
<label for="code2">
Daily security code (optional):
</label>
- <input id="code2"
+ <input id="code2"
name="code"
type="text"
+ size="2"
minlength="2"
maxlength="2"
pattern="[a-zA-Z0-9]*" />
</div>
- <h3>Zone</h3>
+ <p>Zone:</p>
<div>
<input required type="radio" id="zone1" name="zone" value="Zone 1" />
<label for="zone1">Zone 1</label>
<label for="zone5">Zone 5</label>
</div>
- <input type="submit" name="go" value="Get Ticket" />
+ <input type="submit" name="go" value="Generate Ticket" />
</fieldset>
</form>
<form>
<fieldset>
<legend>MARC Train</legend>
- <div>
<label for="code3">
Daily security code (optional):
</label>
- <input id="code3"
+ <input id="code3"
name="code"
type="text"
+ size="2"
minlength="2"
maxlength="2"
pattern="[a-zA-Z0-9]*" />
</div>
- <h3>Origin</h3>
-
+ <p>Origin:</p>
<div>
<input required type="radio" id="origin1" name="origin" value="BAL" />
<label for="origin1">Baltimore/Penn (Penn Line)</label>
<label for="origin8">West Baltimore (Penn Line)</label>
</div>
- <h3>Destination</h3>
+ <p>Destination:</p>
<div>
<input required type="radio" id="destination1" name="destination" value="BAL" />
<label for="destination1">Baltimore/Penn (Penn Line)</label>
<input type="hidden" name="serviceid" value="R" />
<input type="hidden" name="servicename" value="MARC Train" />
- <input type="submit" name="go" value="Get Ticket" />
+ <input type="submit" name="go" value="Generate Ticket" />
</fieldset>
</form>
</div>
/* Otherwise, leave it at "F" */
}
- /******************************/
+ /************************/
/* Set the service name */
- /******************************/
+ /************************/
function set_service_name() {
const sid = document.getElementById("servicename");
/* Otherwise, leave it at "BaltimoreLink" */
}
+
+ /************************/
+ /* Set the service zone */
+ /************************/
+ function set_service_zone(event, 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. The extra
+ * "event" parameter is there for the event listener, which
+ * would otherwise stuff an onload event into the zone
+ * parameter. "Thankfully" javascript lets us call a
+ * two-argument function with one argument and thereby abuse
+ * the event handler for this. */
+ 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 */
/****************************************/
const dest = params.get("destination");
const zone = compute_marc_zone(src, dest);
- /* TODO: actually set the zone */
- alert(zone);
+ set_service_zone(null, zone);
+ }
+ }
+
+
+ /*****************************************************/
+ /* Set the origin and destination for the MARC Train */
+ /*****************************************************/
+
+ function set_marc_origin_destination() {
+ const params = new URLSearchParams(document.location.search);
+ if (!params.get("origin") || !params.get("destination")) {
+ return;
}
+
+ const src = params.get("origin");
+ const dest = params.get("destination");
+
+ /* origindest contains both the origin and destination */
+ const origindest = document.getElementById("origindest");
+
+ const origin = document.getElementById("origin");
+ const destination = document.getElementById("destination");
+
+ origin.textContent = params.get("origin");
+ destination.textContent = params.get("destination");
+
+ origindest.style.display = "block"; /* It's hidden by default */
}
/******************************************/
/* 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);
/* 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 origin and destination, if applicable */
+ window.addEventListener("load", set_marc_origin_destination);
+
+ /* 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);
projects / charm-bypass.git / blobdiff