<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
- CharmBypass.
+ CharmBypass: transit equity whether you like it or not
</title>
<style>
- /*
- * 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;
+ input[type=submit] {
+ margin-top: 1em;
+ margin-bottom: 1em;
}
svg {
<body>
<div id="menu">
+ <h1>CharmBypass</h1>
+ <h2>transit equity whether you like it or not</h2>
<form>
- <fieldset>
- <legend>BaltimoreLink (Bus, Light Rail, Metro)</legend>
- <input type="hidden" name="servicename" value="BaltimoreLink" />
- <input type="submit" name="go" value="Get Ticket" />
- </fieldset>
+ <fieldset>
+ <legend>BaltimoreLink (Bus, Light Rail, Metro)</legend>
+ <input type="hidden" name="servicename" value="BaltimoreLink" />
+ <input type="submit" name="go" value="Get Ticket" />
+ </fieldset>
</form>
<form>
- <fieldset>
- <legend>Commuter Bus</legend>
- <input type="hidden" name="serviceid" value="R" />
- <input type="hidden" name="servicename" value="Commuter Bus" />
- <div>
- <input type="radio" id="zone1" name="zone" value="Zone 1" />
- <label for="zone1">Zone 1</label>
- </div>
- <div>
- <input type="radio" id="zone2" name="zone" value="Zone 2" />
- <label for="zone2">Zone 2</label>
- </div>
- <div>
- <input type="radio" id="zone3" name="zone" value="Zone 3" />
- <label for="zone3">Zone 3</label>
- </div>
- <div>
- <input type="radio" id="zone4" name="zone" value="Zone 4" />
- <label for="zone4">Zone 4</label>
- </div>
- <div>
- <input type="radio" id="zone5" name="zone" value="Zone 5" />
- <label for="zone5">Zone 5</label>
- </div>
-
- <input type="submit" name="go" value="Get Ticket" />
- </fieldset>
+ <fieldset>
+ <legend>Commuter Bus</legend>
+ <input type="hidden" name="serviceid" value="R" />
+ <input type="hidden" name="servicename" value="Commuter Bus" />
+
+ <h3>Zone</h3>
+ <div>
+ <input type="radio" id="zone1" name="zone" value="Zone 1" />
+ <label for="zone1">Zone 1</label>
+ </div>
+ <div>
+ <input type="radio" id="zone2" name="zone" value="Zone 2" />
+ <label for="zone2">Zone 2</label>
+ </div>
+ <div>
+ <input type="radio" id="zone3" name="zone" value="Zone 3" />
+ <label for="zone3">Zone 3</label>
+ </div>
+ <div>
+ <input type="radio" id="zone4" name="zone" value="Zone 4" />
+ <label for="zone4">Zone 4</label>
+ </div>
+ <div>
+ <input type="radio" id="zone5" name="zone" value="Zone 5" />
+ <label for="zone5">Zone 5</label>
+ </div>
+
+ <input type="submit" name="go" value="Get Ticket" />
+ </fieldset>
</form>
<form>
- <fieldset>
- <legend>MARC Train</legend>
-
- <h3>Origin</h3>
- <div>
- <input type="radio" id="origin1" name="origin" value="BAL" />
- <label for="origin1">Baltimore/Penn (Penn Line)</label>
- </div>
- <div>
- <input type="radio" id="origin2" name="origin" value="BCA" />
- <label for="origin2">Baltimore/Camden (Camden Line)</label>
- </div>
- <div>
- <input type="radio" id="origin3" name="origin" value="BWE" />
- <label for="origin3">Bowie State (Penn Line)</label>
- </div>
- <div>
- <input type="radio" id="origin4" name="origin" value="BWI" />
- <label for="origin4">BWI Airport (Penn Line)</label>
- </div>
- <div>
- <input type="radio" id="origin5" name="origin" value="CPK" />
- <label for="origin5">College Park (Camden Line)</label>
- </div>
- <div>
- <input type="radio" id="origin6" name="origin" value="SEB" />
- <label for="origin6">Seabrook (Penn Line)</label>
- </div>
- <div>
- <input type="radio" id="origin7" name="origin" value="WAS" />
- <label for="origin7">Washington D.C.</label>
- </div>
- <div>
- <input type="radio" id="origin8" name="origin" value="WBL" />
- <label for="origin8">West Baltimore (Penn Line)</label>
- </div>
-
- <h3>Destination</h3>
- <div>
- <input type="radio" id="destination1" name="destination" value="BAL" />
- <label for="destination1">Baltimore/Penn (Penn Line)</label>
- </div>
- <div>
- <input type="radio" id="destination2" name="destination" value="BCA" />
- <label for="destination2">Baltimore/Camden (Camden Line)</label>
- </div>
- <div>
- <input type="radio" id="destination3" name="destination" value="BWE" />
- <label for="destination3">Bowie State (Penn Line)</label>
- </div>
- <div>
- <input type="radio" id="destination4" name="destination" value="BWI" />
- <label for="destination4">BWI Airport (Penn Line)</label>
- </div>
- <div>
- <input type="radio" id="destination5" name="destination" value="CPK" />
- <label for="destination5">College Park (Camden Line)</label>
- </div>
- <div>
- <input type="radio" id="destination6" name="destination" value="SEB" />
- <label for="destination6">Seabrook (Penn Line)</label>
- </div>
- <div>
- <input type="radio" id="destination7" name="destination" value="WAS" />
- <label for="destination7">Washington D.C.</label>
- </div>
- <div>
- <input type="radio" id="destination8" name="destination" value="WBL" />
- <label for="destination8">West Baltimore (Penn Line)</label>
- </div>
-
- <input type="hidden" name="serviceid" value="R" />
- <input type="hidden" name="servicename" value="MARC Train" />
- <input type="submit" name="go" value="Get Ticket" />
- </fieldset>
+ <fieldset>
+ <legend>MARC Train</legend>
+
+ <h3>Origin</h3>
+
+ <div>
+ <input type="radio" id="origin1" name="origin" value="BAL" />
+ <label for="origin1">Baltimore/Penn (Penn Line)</label>
+ </div>
+ <div>
+ <input type="radio" id="origin2" name="origin" value="BCA" />
+ <label for="origin2">Baltimore/Camden (Camden Line)</label>
+ </div>
+ <div>
+ <input type="radio" id="origin3" name="origin" value="BWE" />
+ <label for="origin3">Bowie State (Penn Line)</label>
+ </div>
+ <div>
+ <input type="radio" id="origin4" name="origin" value="BWI" />
+ <label for="origin4">BWI Airport (Penn Line)</label>
+ </div>
+ <div>
+ <input type="radio" id="origin5" name="origin" value="CPK" />
+ <label for="origin5">College Park (Camden Line)</label>
+ </div>
+ <div>
+ <input type="radio" id="origin6" name="origin" value="SEB" />
+ <label for="origin6">Seabrook (Penn Line)</label>
+ </div>
+ <div>
+ <input type="radio" id="origin7" name="origin" value="WAS" />
+ <label for="origin7">Washington D.C.</label>
+ </div>
+ <div>
+ <input type="radio" id="origin8" name="origin" value="WBL" />
+ <label for="origin8">West Baltimore (Penn Line)</label>
+ </div>
+
+ <h3>Destination</h3>
+ <div>
+ <input type="radio" id="destination1" name="destination" value="BAL" />
+ <label for="destination1">Baltimore/Penn (Penn Line)</label>
+ </div>
+ <div>
+ <input type="radio" id="destination2" name="destination" value="BCA" />
+ <label for="destination2">Baltimore/Camden (Camden Line)</label>
+ </div>
+ <div>
+ <input type="radio" id="destination3" name="destination" value="BWE" />
+ <label for="destination3">Bowie State (Penn Line)</label>
+ </div>
+ <div>
+ <input type="radio" id="destination4" name="destination" value="BWI" />
+ <label for="destination4">BWI Airport (Penn Line)</label>
+ </div>
+ <div>
+ <input type="radio" id="destination5" name="destination" value="CPK" />
+ <label for="destination5">College Park (Camden Line)</label>
+ </div>
+ <div>
+ <input type="radio" id="destination6" name="destination" value="SEB" />
+ <label for="destination6">Seabrook (Penn Line)</label>
+ </div>
+ <div>
+ <input type="radio" id="destination7" name="destination" value="WAS" />
+ <label for="destination7">Washington D.C.</label>
+ </div>
+ <div>
+ <input type="radio" id="destination8" name="destination" value="WBL" />
+ <label for="destination8">West Baltimore (Penn Line)</label>
+ </div>
+
+ <input type="hidden" name="serviceid" value="R" />
+ <input type="hidden" name="servicename" value="MARC Train" />
+ <input type="submit" name="go" value="Get Ticket" />
+ </fieldset>
</form>
</div>
function set_service_id() {
const sid = document.getElementById("serviceid");
- /* Get the "serviceid" from the querystring if it's there */
+ /* Get the "serviceid" from the querystring if it's there */
const params = new URLSearchParams(document.location.search);
if (params.get("serviceid")) {
sid.textContent = params.get("serviceid");
}
- /* Otherwise, leave it at "F" */
+ /* Otherwise, leave it at "F" */
}
/******************************/
function set_service_name() {
const sid = document.getElementById("servicename");
- /* Get the "servicename" from the querystring if it's there */
+ /* Get the "servicename" from the querystring if it's there */
const params = new URLSearchParams(document.location.search);
if (params.get("servicename")) {
sid.textContent = params.get("servicename");
}
- /* Otherwise, leave it at "BaltimoreLink" */
+ /* Otherwise, leave it at "BaltimoreLink" */
}
/****************************************/
/* What do we add to c2 to make it equal to c1? */
const hdelta = c1 - c2;
- /* We've measured everything so far in "client rect"
+ /* We've measured everything so far in "client rect"
* coordinates, because that's the only available measurement
* we have for the width of the <text> element after futzing
* with its contents. But when we reposition that <text>
/* 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")) + svg_hdelta);
+ ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + svg_hdelta);
}
/*****************************************/
is_day = true;
function set_day() {
- sky.style.fill = "#efb02f";
+ sky.style.fill = "#efb02f";
}
function set_night() {
/* 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. */
- document.body.style.overflow = "hidden";
+ document.body.style.overflow = "hidden";
+ document.body.style.margin = "0";
+ document.body.style.padding = "0";
const svg = document.querySelector("svg");
const menu = document.getElementById("menu");
const params = new URLSearchParams(document.location.search);
if (params.get("go")) {
- /* First unhide the SVG (swap it with the form) */
+ /* First unhide the SVG (swap it with the form) */
window.addEventListener("load", go);
/* Center the ticket once when the page has loaded */
projects / charm-bypass.git / commitdiff