index.html.in: tweak the slogan and add a security code hint

[charm-bypass.git] / index.html.in
diff --git a/index.html.in b/index.html.in

index c805cf5f020ff5d41928ad8f5520936811e966c5..e129eeaf84ff70aaf50915ba8995f98d96d09f86 100644 (file)
--- a/index.html.in
+++ b/index.html.in
@@ -4,8 +4,7 @@
      <meta name="viewport" content="width=device-width, initial-scale=1" />
  
      <title>
-      CharmBypass: you're getting transit equity whether you like it
-      or not
+      CharmBypass: doing transit equity whether they like it or not
      </title>
  
      <style>
@@ -214,10 +213,30 @@
    <body>
      <div id="menu">
        <h1>CharmBypass</h1>
-      <h2>you're getting transit equity whether you like it or not</h2>
+      <h2>doing transit equity whether they like it or not</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>
+
        <form>
          <fieldset>
            <legend>BaltimoreLink (Bus, Light Rail, Metro)</legend>
+          <div>
+            <label for="code1">
+              Daily security code (optional):
+            </label>
+            <input id="code1"
+                   name="code"
+                   type="text"
+                   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" />
          </fieldset>
@@ -228,6 +247,18 @@
            <input type="hidden" name="serviceid" value="R" />
            <input type="hidden" name="servicename" value="Commuter Bus" />
  
+          <div>
+            <label for="code2">
+              Daily security code (optional):
+            </label>
+           <input id="code2"
+                   name="code"
+                   type="text"
+                   minlength="2"
+                   maxlength="2"
+                   pattern="[a-zA-Z0-9]+" />
+          </div>
+
            <h3>Zone</h3>
            <div>
              <input required type="radio" id="zone1" name="zone" value="Zone 1" />
@@ -257,6 +288,18 @@
          <fieldset>
            <legend>MARC Train</legend>
  
+         <div>
+            <label for="code3">
+              Daily security code (optional):
+            </label>
+           <input id="code3"
+                   name="code"
+                   type="text"
+                   minlength="2"
+                   maxlength="2"
+                   pattern="[a-zA-Z0-9]+" />
+          </div>
+
            <h3>Origin</h3>
  
            <div>
@@ -403,7 +446,7 @@
          /* Get the "code" from the querystring if it's there */
          const params = new URLSearchParams(document.location.search);
          if (params.get("code")) {
-          ct.textContent = params.get("code");
+          ct.textContent = params.get("code").toUpperCase();
          }
          else {
            /* Otherwise, use a random code */