href="data:image/svg+xml;base64,@FAVICON@" />
<title>
- CharmBypass: it's transit equity y'all
+ CharmBypass: got that transit equity
</title>
<style>
+ body {
+ /* For consistency with the SVG */
+ font-family: sans-serif;
+ }
+
fieldset {
margin-top: 1em;
padding-top: 1em;
font-weight: bold;
}
+ /* Display form errors for the one browser that doesn't support
+ * them natively, mobile Firefox. We use "visibility" to toggle
+ * it on and off, but "display" to hide it completely in non-
+ * stupid web browsers. */
+ #marc-form-errors {
+ color: #a00;
+ visibility: hidden;
+ display: none;
+ }
+
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
}
#bus {
- animation: busroll 23s linear infinite;
+ animation: busroll 15s linear infinite;
}
}
#tram {
- animation: tramroll 17s linear infinite;
+ animation: tramroll 15s linear infinite;
}
}
#train {
- animation: trainroll 11s linear infinite;
+ animation: trainroll 10s linear infinite;
}
}
#clouds {
- animation: cloudsfloat 40s linear infinite;
+ animation: cloudsfloat 25s linear infinite;
}
@keyframes cloudscopyfloat {
}
#cloudscopy {
- animation: cloudscopyfloat 40s linear infinite;
+ animation: cloudscopyfloat 25s linear infinite;
}
#trees {
/* The trees move a little faster than the clouds */
- animation: treespass 30s linear infinite;
+ animation: treespass 16s linear infinite;
}
@keyframes treescopypass {
#treescopy {
/* The trees move a little faster than the clouds */
- animation: treescopypass 30s linear infinite;
+ animation: treescopypass 16s linear infinite;
}
#city {
/* The city moves faster than the clouds but slower
* than the trees */
- animation: cityscroll 35s linear infinite;
+ animation: cityscroll 20s linear infinite;
}
@keyframes citycopyscroll {
#citycopy {
/* The city moves faster than the clouds but slower
* than the trees */
- animation: citycopyscroll 35s linear infinite;
+ animation: citycopyscroll 20s linear infinite;
}
</style>
</head>
<body>
<div id="menu">
<h1>CharmBypass</h1>
- <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.
- </p>
+ <p><strong>got that <em>transit equity</em></strong></p>
<form>
<fieldset>
<legend>Local Bus, Light Rail, or Metro</legend>
<div>
<label for="code1">
- Daily security code (optional):
+ Daily security code (<a href="https://michael.orlitzky.com/articles/charmbypass_pt._1%3A_introduction.xhtml#daily-security-code">optional</a>):
</label>
<input id="code1"
- name="code"
+ name="code" value=""
type="text"
size="2"
minlength="2"
<div>
<label for="code2">
- Daily security code (optional):
+ Daily security code (<a href="https://michael.orlitzky.com/articles/charmbypass_pt._1%3A_introduction.xhtml#daily-security-code">optional</a>):
</label>
<input id="code2"
- name="code"
+ name="code" value=""
type="text"
size="2"
minlength="2"
pattern="[a-zA-Z0-9]*" />
</div>
- <p>Zone:</p>
+ <p>
+ Zone<sup>†</sup>:
+ </p>
<div>
<input type="radio" required
name="zone"
<label for="zone2">Zone 2</label>
</div>
<div>
- <input type="radio" required
+ <input type="radio" required checked
name="zone"
id="zone3"
value="Zone 3" />
</div>
<input type="submit" name="go" value="Generate Ticket" />
+
+ <p>
+ <sup>†</sup>
+ On the MTA's PDF schedule for your route
+ </p>
</fieldset>
</form>
<form>
<div>
<label for="code3">
- Daily security code (optional):
+ Daily security code (<a href="https://michael.orlitzky.com/articles/charmbypass_pt._1%3A_introduction.xhtml#daily-security-code">optional</a>):
</label>
<input id="code3"
- name="code"
+ name="code" value=""
type="text"
size="2"
minlength="2"
<p>Origin:</p>
<div>
- <input type="radio" required
+ <input type="radio" required checked
name="origin"
- id="origin1"
+ id="origin_BAL"
value="BAL" />
- <label for="origin1">Baltimore/Penn (Penn Line)</label>
+ <label for="origin_BAL">Baltimore/Penn (Penn Line)</label>
</div>
<div>
<input type="radio" required
name="origin"
- id="origin2"
+ id="origin_BCA"
value="BCA" />
- <label for="origin2">Baltimore/Camden (Camden Line)</label>
+ <label for="origin_BCA">Baltimore/Camden (Camden Line)</label>
</div>
<div>
<input type="radio" required
name="origin"
- id="origin3"
+ id="origin_BWE"
value="BWE" />
- <label for="origin3">Bowie State (Penn Line)</label>
+ <label for="origin_BWE">Bowie State (Penn Line)</label>
</div>
<div>
<input type="radio" required
name="origin"
- id="origin4"
+ id="origin_BWI"
value="BWI" />
- <label for="origin4">BWI Airport (Penn Line)</label>
+ <label for="origin_BWI">BWI Airport (Penn Line)</label>
</div>
<div>
<input type="radio" required
name="origin"
- id="origin5"
+ id="origin_CPK"
value="CPK" />
- <label for="origin5">College Park (Camden Line)</label>
+ <label for="origin_CPK">College Park (Camden Line)</label>
</div>
<div>
<input type="radio" required
name="origin"
- id="origin6"
+ id="origin_HAE"
+ value="HAE" />
+ <label for="origin_HAE">Halethorpe (Penn Line)</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="origin"
+ id="origin_SEB"
value="SEB" />
- <label for="origin6">Seabrook (Penn Line)</label>
+ <label for="origin_SEB">Seabrook (Penn Line)</label>
</div>
<div>
<input type="radio" required
name="origin"
- id="origin7"
+ id="origin_WAS"
value="WAS" />
- <label for="origin7">Washington D.C.</label>
+ <label for="origin_WAS">Washington D.C.</label>
</div>
<div>
<input type="radio" required
name="origin"
- id="origin8"
+ id="origin_WBL"
value="WBL" />
- <label for="origin8">West Baltimore (Penn Line)</label>
+ <label for="origin_WBL">West Baltimore (Penn Line)</label>
</div>
<p>Destination:</p>
<div>
<input type="radio" required
name="destination"
- id="destination1"
+ id="destination_BAL"
value="BAL" />
- <label for="destination1">Baltimore/Penn (Penn Line)</label>
+ <label for="destination_BAL">Baltimore/Penn (Penn Line)</label>
</div>
<div>
<input type="radio" required
name="destination"
- id="destination2"
+ id="destination_BCA"
value="BCA" />
- <label for="destination2">Baltimore/Camden (Camden Line)</label>
+ <label for="destination_BCA">Baltimore/Camden (Camden Line)</label>
</div>
<div>
<input type="radio" required
name="destination"
- id="destination3"
+ id="destination_BWE"
value="BWE" />
- <label for="destination3">Bowie State (Penn Line)</label>
+ <label for="destination_BWE">Bowie State (Penn Line)</label>
</div>
<div>
<input type="radio" required
name="destination"
- id="destination4"
+ id="destination_BWI"
value="BWI" />
- <label for="destination4">BWI Airport (Penn Line)</label>
+ <label for="destination_BWI">BWI Airport (Penn Line)</label>
</div>
<div>
<input type="radio" required
name="destination"
- id="destination5"
+ id="destination_CPK"
value="CPK" />
- <label for="destination5">College Park (Camden Line)</label>
+ <label for="destination_CPK">College Park (Camden Line)</label>
</div>
<div>
<input type="radio" required
name="destination"
- id="destination6"
- value="SEB" />
- <label for="destination6">Seabrook (Penn Line)</label>
+ id="destination_HAE"
+ value="HAE" />
+ <label for="destination_HAE">Halethorpe (Penn Line)</label>
</div>
<div>
<input type="radio" required
name="destination"
- id="destination7"
+ id="destination_SEB"
+ value="SEB" />
+ <label for="destination_SEB">Seabrook (Penn Line)</label>
+ </div>
+ <div>
+ <input type="radio" required checked
+ name="destination"
+ id="destination_WAS"
value="WAS" />
- <label for="destination7">Washington D.C.</label>
+ <label for="destination_WAS">Washington D.C.</label>
</div>
<div>
<input type="radio" required
name="destination"
- id="destination8"
+ id="destination_WBL"
value="WBL" />
- <label for="destination8">West Baltimore (Penn Line)</label>
+ <label for="destination_WBL">West Baltimore (Penn Line)</label>
</div>
+ <p id="marc-form-errors">OK</p>
+
<input type="hidden" name="serviceid" value="R" />
<input type="hidden" name="servicename" value="MARC Train" />
- <input type="submit" name="go" value="Generate Ticket" />
+ <input type="submit"
+ name="go"
+ id="marc-submit"
+ value="Generate Ticket" />
</fieldset>
</form>
+
+ <p>
+ About CharmBypass:
+ </p>
+ <ol>
+ <li>
+ <a href="https://michael.orlitzky.com/articles/charmbypass_pt._1%3A_introduction.xhtml">
+ Introduction
+ </a>
+ </li>
+ <li>
+ <a href="https://michael.orlitzky.com/articles/charmbypass_pt._2%3A_analysis.xhtml">
+ Analysis
+ </a>
+ </li>
+ </ol>
</div>
@SVGDATA@
* Compute the zone (string) for the given origin/destination pair.
*
* If we don't know it or if you chose in invalid pair (destination
- * not on the same line as your origin?) then the empty string is
- * returned.
+ * not on the same line as your origin?) then null is returned.
*/
function compute_marc_zone(src, dest) {
- /* Sorted on the first component, then the second */
+ /* Sorted on the first component, then the second.
+ *
+ * Key:
+ *
+ * $6.00 => 1
+ * $7.00 => 2
+ * $8.00 => 3
+ * $9.00 => 4
+ */
const zone_map = {
BAL_BWE: 2,
BAL_BWI: 1,
+ BAL_HAE: 1,
BAL_SEB: 3,
BAL_WAS: 4,
BAL_WBL: 1,
- BCA_CPK_: 3,
- BCA_WAS_: 4,
- BWI_BWE: 1,
+ BCA_CPK: 3,
+ BCA_WAS: 4,
+ BWE_BWI: 1,
+ BWE_HAE: 1,
+ BWE_SEB: 1,
+ BWE_WAS: 2,
+ BWE_WBL: 2,
+ BWI_HAE: 1,
+ BWI_SEB: 2,
BWI_WAS: 3,
- BWI_WBL: 1
+ BWI_WBL: 1,
+ HAE_SEB: 2,
+ HAE_WAS: 3,
+ HAE_WBL: 1,
+ SEB_WAS: 1,
+ SEB_WBL: 3,
+ WAS_WBL: 4
};
/* Forward direction key for zone_map */
case 4:
return "Four Zone";
default:
- return "";
+ return null;
}
}
const dest = params.get("destination");
if (src && dest) {
- /* MARC Train */
+ /* MARC Train. We can assume that compute_marc_zone() doesn't
+ * return null because that's part of our form validation. */
const zone = compute_marc_zone(src, dest);
set_zone(zone);
}
menu.style.display = "none";
}
+ /**
+ * Determine if the user agent is mobile Firefox.
+ */
+ function ua_is_mobile_ff() {
+ const ua = navigator.userAgent.toLowerCase();
+ return (ua.includes("firefox") && ua.includes("mobile"));
+ }
+
+ /**
+ * Validate the MARC form's origin/destination.
+ *
+ * We don't want the user to be able to choose a pair of stops that
+ * aren't actually connected by the same MARC line. If we don't have
+ * zone information for the (origin,destination) pair, that indicates
+ * that it's probably not a valid choice; otherwise I would have
+ * filled in the information from the CharmPass app already.
+ *
+ * All browsers except mobile Firefox let us call setCustomValidity()
+ * to provide an error message that is displayed if the user tries
+ * to submit invalid choices. But amazingly, mobile Firefox does not:
+ *
+ * https://bugzilla.mozilla.org/show_bug.cgi?id=1510450
+ *
+ * Instead we have to work around it (in that one browser) by
+ * showing/hiding a paragraph that we fill with the errors.
+ */
+ function validate_origin_destination(event) {
+ const origins = document.getElementsByName("origin");
+ const destinations = document.getElementsByName("destination");
+ const mfe = document.getElementById("marc-form-errors");
+ const marcsubmit = document.getElementById("marc-submit");
+
+ if (ua_is_mobile_ff()) {
+ /* Even though this is only for one browser, empty paragraphs
+ * are handled inconsistently and should be avoided as a rule.
+ * So, we make it say "OK" before we hide it. */
+ mfe.textContent = "OK";
+ mfe.style.visibility = "hidden";
+ marcsubmit.disabled = false;
+ }
+
+ let src = null;
+ let dest = null;
+ origins.forEach((x) => { if (x.checked) src = x; })
+ destinations.forEach((x) => {
+ if (x.checked) dest = x;
+
+ /* clear all errors before possibly setting one */
+ x.setCustomValidity('');
+ })
+
+ if (src.value === dest.value) {
+ let err = "Origin and destination are the same";
+ dest.setCustomValidity(err);
+
+ if (ua_is_mobile_ff()) {
+ mfe.textContent = err;
+ mfe.style.visibility = "visible";
+ marcsubmit.disabled = true;
+ }
+ }
+ else if (compute_marc_zone(src.value, dest.value) === null) {
+ let err = "Origin and destination are on different lines";
+ dest.setCustomValidity(err);
+
+ if (ua_is_mobile_ff()) {
+ mfe.textContent = err;
+ mfe.style.visibility = "visible";
+ marcsubmit.disabled = true;
+ }
+ }
+ }
/*****************************************************/
/* Add event handlers for all of the functions above */
/* Swap colors when the screen is tapped */
document.body.addEventListener("click", swap_day_night);
}
+ else {
+ /* If we haven't submitted the form yet, set up change handlers
+ * for the origin/destination radio buttons that validate that
+ * the origin and destination are on the same line. */
+ document.getElementsByName("origin").forEach(
+ (x) => x.addEventListener("change", validate_origin_destination)
+ );
+ document.getElementsByName("destination").forEach(
+ (x) => x.addEventListener("change", validate_origin_destination)
+ );
+
+ /* Also do it when the page loads, because firefox likes to
+ * remember your selection even after the page reloads. */
+ window.addEventListener("load", validate_origin_destination);
+
+ /* Finally, we have to babysit mobile Firefox, who doesn't
+ * support HTML5 form validation going into 2024. Turn on
+ * the little form errors paragraph so we can toggle its
+ * visibility (and make it display the error) when the user
+ * makes an invalid selection. */
+ window.addEventListener("load", () => {
+ if (ua_is_mobile_ff()) {
+ const mfe = document.getElementById("marc-form-errors");
+ mfe.style.display = "block";
+ }
+ });
+ }
</script>
</body>