Aligning keywords across the form

index.v2.html

@@ -10,45 +10,45 @@
                 <div class="quarter">
                     <h4>Coupon</h4>
                     <table>
-                        <tr><td class="input-label">Seq ID</td><td><input id="qr-coupon-id" type="text" placeholder="2"/></td></tr>
-                        <tr><td class="input-label">Coupons</td><td><input id="qr-coupon-total-coupons" type="text" placeholder="5000"/></td></tr>
-                        <tr><td class="input-label">Phase</td><td><input id="qr-coupon-phase" type="text" placeholder="1A, 2A, ..."/></td></tr>
-                        <tr><td class="input-label">City</td><td><input id="qr-coupon-elegibility-city" type="text" placeholder="Somerville, Cambridge, ..."/></td></tr>
-                        <tr><td class="input-label">Age</td><td><input id="qr-coupon-elegibility-age" type="text" placeholder="Under 65, Over 65, ...>"/></td></tr>
-                        <tr><td class="input-label">Conditions</td><td><input id="qr-coupon-elegibility-conditions" type="text" placeholder="Diabetes, ...."/></td></tr>
-                        <tr><td class="input-label">Job</td><td><input id="qr-coupon-elegibility-job" type="text" placeholder="Teacher, Healthworker, ..."/></td></tr>
+                        <tr><td>ID</td><td><input id="qr-coupon-id" type="text" placeholder="2"/></td></tr>
+                        <tr><td>Coupons</td><td><input id="qr-coupon-coupons" type="text" placeholder="5000"/></td></tr>
+                        <tr><td>Phase</td><td><input id="qr-coupon-phase" type="text" placeholder="1A, 2A, ..."/></td></tr>
+                        <tr><td>City</td><td><input id="qr-coupon-city" type="text" placeholder="Somerville, Cambridge, ..."/></td></tr>
+                        <tr><td>Age</td><td><input id="qr-coupon-age" type="text" placeholder="Under 65, Over 65, ...>"/></td></tr>
+                        <tr><td>Conditions</td><td><input id="qr-coupon-conditions" type="text" placeholder="Diabetes, ...."/></td></tr>
+                        <tr><td>Job</td><td><input id="qr-coupon-job" type="text" placeholder="Teacher, Healthworker, ..."/></td></tr>
                     </table>
                 </div>
                 <div class="quarter"> 
                     <h4>PassKey</h4>
                     <table>
-                        <tr><td class="input-label">Name</td><td><input id="qr-passkey-name" type="text" placeholder="Patient Name"/></td></tr>
-                        <tr><td class="input-label">Phone</td><td><input id="qr-passkey-phone" type="text" placeholder="617 .."/></td></tr>
-                        <tr><td class="input-label">DoB</td><td><input id="qr-passkey-dob" type="text" placeholder="YYYY-MM-DD"/></td></tr>
-                        <tr><td class="input-label">Salt</td><td><input id="qr-passkey-salt" type="text" placeholder="2342342"/></td></tr>
+                        <tr><td>Name</td><td><input id="qr-passkey-name" type="text" placeholder="Patient Name"/></td></tr>
+                        <tr><td>Phone</td><td><input id="qr-passkey-phone" type="text" placeholder="617 .."/></td></tr>
+                        <tr><td>DoB</td><td><input id="qr-passkey-dob" type="text" placeholder="YYYY-MM-DD"/></td></tr>
+                        <tr><td>Salt</td><td><input id="qr-passkey-salt" type="text" placeholder="2342342"/></td></tr>
                     </table>
                 </div>
                 <div class="quarter">
                     <h4>Badge</h4>
                     <table>
-                        <tr><td class="input-label">Date</td><td><input id="qr-badge-date" type="text" placeholder=""/></td></tr>
-                        <tr><td class="input-label">Manuf</td><td><input id="qr-badge-manuf" type="text" placeholder="Pfizer, Moderna, etc"/></td></tr>
-                        <tr><td class="input-label">Product</td><td><input id="qr-badge-product" type="text" placeholder="COVID-19"/></td></tr>
-                        <tr><td class="input-label">Lot#</td><td><input id="qr-badge-lot" type="text" placeholder="012L20A, ..."/></td></tr>
-                        <tr><td class="input-label">Route</td><td><input id="qr-badge-route" type="text" placeholder="Intramuscular, Intranasal, Subcut, Oral, ..."/></td></tr>
-                        <tr><td class="input-label">Site</td><td><input id="qr-badge-site" type="text" placeholder="Right Arm, Left Arm, ..."/></td></tr>
-                        <tr><td class="input-label">Dose</td><td><input id="qr-badge-dose" type="text" placeholder="1.0ml, 0.5ml, ..."/></td></tr>
-                        <tr><td class="input-label">Doses</td><td><input id="qr-badge-required_doses" type="text" placeholder="1, 2, 3, ..."/></td></tr>
-                        <tr><td class="input-label">Next Dose</td><td><input id="qr-badge-next_dose_in_days" type="text" placeholder="21, 28, ..."/></td></tr>
-                        <tr><td class="input-label">Vaccinator</td><td><input id="qr-badge-vacinatorid" type="text" placeholder="Pharmacy Name, City, ..."/></td></tr>
-                        <tr><td class="input-label">PassKey</td><td><input id="qr-badge-vaccineeid" type="text" placeholder="User Hash"/></td></tr>
+                        <tr><td>Date</td><td><input id="qr-badge-date" type="text" placeholder=""/></td></tr>
+                        <tr><td>Manuf</td><td><input id="qr-badge-manuf" type="text" placeholder="Pfizer, Moderna, etc"/></td></tr>
+                        <tr><td>Product</td><td><input id="qr-badge-product" type="text" placeholder="COVID-19"/></td></tr>
+                        <tr><td>Lot#</td><td><input id="qr-badge-lot" type="text" placeholder="012L20A, ..."/></td></tr>
+                        <tr><td>Route</td><td><input id="qr-badge-route" type="text" placeholder="Intramuscular, Intranasal, Subcut, Oral, ..."/></td></tr>
+                        <tr><td>Site</td><td><input id="qr-badge-site" type="text" placeholder="Right Arm, Left Arm, ..."/></td></tr>
+                        <tr><td>Dose</td><td><input id="qr-badge-dose" type="text" placeholder="1.0ml, 0.5ml, ..."/></td></tr>
+                        <tr><td>Doses</td><td><input id="qr-badge-required_doses" type="text" placeholder="1, 2, 3, ..."/></td></tr>
+                        <tr><td>Next Dose</td><td><input id="qr-badge-next_dose_in_days" type="text" placeholder="21, 28, ..."/></td></tr>
+                        <tr><td>Vaccinator</td><td><input id="qr-badge-vacinator" type="text" placeholder="Pharmacy Name, City, ..."/></td></tr>
+                        <tr><td>PassKey</td><td><input id="qr-badge-vaccinee" type="text" placeholder="User Hash"/></td></tr>
                     </table>
                 </div>
                 <div class="quarter">
                     <h4>Status</h4>
                     <table>
-                        <tr><td class="input-label">Doses</td><td><input id="qr-status-vaccinated" type="text" placeholder="0,1,2"/></td></tr>
-                        <tr><td class="input-label">PassKey</td><td><input id="qr-status-vaccineeid" type="text" placeholder="User Hash"/></td></tr>
+                        <tr><td>Doses</td><td><input id="qr-status-vaccinated" type="text" placeholder="0,1,2"/></td></tr>
+                        <tr><td>PassKey</td><td><input id="qr-status-vaccinee" type="text" placeholder="User Hash"/></td></tr>
                     </table>
                 </div>
                 
@@ -171,13 +171,13 @@ uku7JUXcVpt08DFSceCEX9unCuMcT72rAQlLpdZir876
                 var prikey = e('privkey').value;
 
                 var messageCoupon = "type=coupon";
-                messageCoupon += addIfExists("&coupon_id=", "qr-coupon-id");
-                messageCoupon += addIfExists("&coupons=", "qr-coupon-total-coupons");
+                messageCoupon += addIfExists("&id=", "qr-coupon-id");
+                messageCoupon += addIfExists("&coupons=", "qr-coupon-coupons");
                 messageCoupon += addIfExists("&phase=", "qr-coupon-phase");
-                messageCoupon += addIfExists("&city=", "qr-coupon-elegibility-city");
-                messageCoupon += addIfExists("&age=", "qr-coupon-elegibility-age");
-                messageCoupon += addIfExists("&cond=",   "qr-coupon-elegibility-conditions");
-                messageCoupon += addIfExists("&job=", "qr-coupon-elegibility-job");
+                messageCoupon += addIfExists("&city=", "qr-coupon-city");
+                messageCoupon += addIfExists("&age=", "qr-coupon-age");
+                messageCoupon += addIfExists("&conditions=",  "qr-coupon-conditions");
+                messageCoupon += addIfExists("&job=", "qr-coupon-job");
                 
                 signAndDisplayQR("qr-coupon", "healthpass", "SHA256", prikey, pubkey, messageCoupon);
 
@@ -193,8 +193,8 @@ uku7JUXcVpt08DFSceCEX9unCuMcT72rAQlLpdZir876
                 // Badge
                 var messageBadge = "type=badge";
                 messageBadge += addIfExists("&date=", "qr-badge-date");
-                messageBadge += addIfExists("&vaccinee=", "qr-badge-vaccineeid");
-                messageBadge += addIfExists("&vaccinator=", "qr-badge-vacinatorid");
+                messageBadge += addIfExists("&vaccinee=", "qr-badge-vaccinee");
+                messageBadge += addIfExists("&vaccinator=", "qr-badge-vacinator");
                 messageBadge += addIfExists("&manuf=", "qr-badge-manuf");
                 messageBadge += addIfExists("&name=", "qr-badge-product");
                 messageBadge += addIfExists("&lot=",   "qr-badge-lot");
@@ -209,7 +209,7 @@ uku7JUXcVpt08DFSceCEX9unCuMcT72rAQlLpdZir876
                 // Status
                 var messageStatus = "type=status";
                 messageStatus += addIfExists("&vaccinated=", "qr-status-vaccinated");
-                messageStatus += addIfExists("&vaccineeid=", "qr-status-vaccineeid");
+                messageStatus += addIfExists("&vaccinee=", "qr-status-vaccinee");
 
                 signAndDisplayQR("qr-status", "healthpass", "SHA256", prikey, pubkey, messageStatus);
             }

style.v2.css

@@ -32,10 +32,6 @@ textarea {
   display: block;
 }
 
-.input-label {
-  width: 50px;
-}
-
 .qr-btn {
   background-color: #3654DD;
   padding: 8px;