From c89de97523e45f85cc79eb1348c698bdbc064307 Mon Sep 17 00:00:00 2001
From: iw0 <gh-projects@heychris.eu>
Date: Mon, 8 Apr 2024 14:26:10 +0200
Subject: [PATCH] make the options screen a bit nicer

---
 options/index.html | 27 +++++++++++++++++----------
 options/style.css  |  9 +++++++++
 2 files changed, 26 insertions(+), 10 deletions(-)
diff --git a/options/index.html b/options/index.html
index c6cf88d..d1a156c 100644
--- a/options/index.html
+++ b/options/index.html
@@ -9,27 +9,34 @@
 
 <body>
   <form>
+    <fieldset>
+      <legend>Main options</legend>
     <label class="item">
       <span class="fh">Enable autofill</span>
       <input name="enable" id="enable" type="checkbox" />
     </label>
-    <button id="all-get-from-profile">Get all the data from my profile</button>
+      <label class="item">
+        <span class="fh">Skip questionnaire</span>
+        <input name="autocontinue" id="autocontinue" type="checkbox" />
+        <span class="sh">Automatically answer "I was delayed, by more than 60 minutes."</span>
+      </label>
+    </fieldset>
+    <button id="all-get-from-profile">Get my personal data from my profile</button>
+    <fieldset>
+      <legend>Ticket data</legend>
+
     <label class="item">
-      <span class="fh">Your BahnCard 100 number</span><br />
+        <span class="fh">BahnCard 100 number</span><br />
       <span class="sh">The number on the front of your card starting with <span class="ms">7081</span>.</span><br>
       <input name="bcnum" id="bcnum" type="text" pattern="70814[0-9]{11}" required
         title="Your BahnCard number is 16 digits long and starts with 7081." />
       <button id="bcnum-get-from-profile">Get from profile</button>
     </label>
     <label class="item">
-      <span class="fh">Your date of birth</span><br>
+        <span class="fh">Date of birth</span><br>
       <input name="birthday" id="birthday" type="date" required />
     </label>
-    <label class="item">
-      <span class="fh">Skip questionnaire</span><br>
-      <span class="sh">Automatically answer "I was delayed, by more than 60 minutes."</span><br>
-      <input name="autocontinue" id="autocontinue" type="checkbox" />
-    </label>
+    </fieldset>
     <fieldset>
       <legend>Address data</legend>
       <label class="item">
@@ -53,11 +60,11 @@
       </label>
       <label class="item">
         <span class="fh">Given name</span><br>
-        <input name="firstname" id="firstname" />
+        <input name="firstname" id="firstname" placeholder="e.g. Erika" />
       </label>
       <label class="item">
         <span class="fh">Surname</span><br>
-        <input name="surname" id="surname" />
+        <input name="surname" id="surname" placeholder="e.g. Mustermann" />
       </label>
       <label class="item">
         <span class="fh">Email address</span><br>
diff --git a/options/style.css b/options/style.css
index c6d7259..b8f9728 100644
--- a/options/style.css
+++ b/options/style.css
@@ -3,10 +3,18 @@
   font-weight: bold;
 }
 
+summary.fh {
+  margin:.5em 0;
+}
+
 .sh {
   font-size: 1em;
   font-style: italic;
 }
+input + .sh, .fh + .sh {
+  display:block;
+padding-top: 0;
+}
 
 label.item {
   display: block;
@@ -53,6 +61,7 @@ input:focus {
 
 #all-get-from-profile {
   width:100%;
+  margin: 0.25em 0;
   min-height:2rem;
   text-align: center;
   font-size: 18pt;
