background: transparent;
}
- html, body {
- /* 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. */
- overflow: hidden;
- }
-
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
top: 0;
left: 0;
height: 100%;
+
+ /* Hide everything by default. We only show it once the user has
+ * submitted the menu form */
+ display: none;
}
/* The blinking fade in/out animation for the ticket date and time */
</head>
<body>
+ <div id="menu">
+ <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>
+ </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>
+ </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>
+ </form>
+ </div>
+
@SVGDATA@
<script>
const sid = document.getElementById("serviceid");
/* Get the "serviceid" from the querystring if it's there */
- let params = new URLSearchParams(document.location.search);
+ const params = new URLSearchParams(document.location.search);
if (params.get("serviceid")) {
sid.textContent = params.get("serviceid");
}
const sid = document.getElementById("servicename");
/* Get the "servicename" from the querystring if it's there */
- let params = new URLSearchParams(document.location.search);
+ const params = new URLSearchParams(document.location.search);
if (params.get("servicename")) {
sid.textContent = params.get("servicename");
}
const ct = document.getElementById("codetext");
/* Get the "code" from the querystring if it's there */
- let params = new URLSearchParams(document.location.search);
+ const params = new URLSearchParams(document.location.search);
if (params.get("code")) {
ct.textContent = params.get("code");
}
* 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));
+ /* BaltimoreLink and MARC Train are valid for an hour and a half */
+ let minutes = 90;
+ const params = new URLSearchParams(document.location.search);
+ if (params.get("servicename") == "Commuter Bus") {
+ /* But commuter bus tickets are only valid for ten minutes */
+ minutes = 10;
+ }
+
+ /* 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
+ * for a few more decades. */
+ date.setTime(date.getTime() + (minutes*60*1000));
tt = document.getElementById("tickettime");
tt.textContent = date.toLocaleTimeString();
}
}
+ /******************************************/
+ /* Display the ticket (and hide the menu) */
+ /******************************************/
+
+ function go() {
+ /* 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";
+
+ const svg = document.querySelector("svg");
+ const menu = document.getElementById("menu");
+ svg.style.display = "initial";
+ menu.style.display = "none";
+ }
/*****************************************************/
/* Add event handlers for all of the functions above */
/*****************************************************/
- /* Center the ticket once when the page has loaded */
- window.addEventListener("load", center_ticket);
+ const params = new URLSearchParams(document.location.search);
+ if (params.get("go")) {
+ /* First unhide the SVG (swap it with the form) */
+ window.addEventListener("load", go);
- /* Re-center the ticket when the window is resized */
- window.addEventListener("resize", center_ticket);
+ /* Center the ticket once when the page has loaded */
+ window.addEventListener("load", center_ticket);
- /* Set the service identifier when the page has loaded */
- window.addEventListener("load", set_service_id);
+ /* Re-center the ticket when the window is resized */
+ window.addEventListener("resize", center_ticket);
- /* Set the service name when the page has loaded */
- window.addEventListener("load", set_service_name);
+ /* Set the service identifier when the page has loaded */
+ window.addEventListener("load", set_service_id);
- /* Set the security code text when the page has loaded */
- window.addEventListener("load", set_code);
+ /* Set the service name when the page has loaded */
+ window.addEventListener("load", set_service_name);
- /* Center the security code text when the page has loaded; in
- * particular, after we set the code. */
- window.addEventListener("load", center_code);
+ /* 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);
+ /* Center the security code text when the page has loaded; in
+ * particular, after we set the code. */
+ window.addEventListener("load", center_code);
- /* Swap colors when the screen is tapped */
- document.body.addEventListener("click", swap_colors);
+ /* 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>
</body>
projects / charm-bypass.git / blobdiff