make the options screen a bit nicer

This commit is contained in:
iw0 2024-04-08 14:26:10 +02:00
parent 34008057c8
commit c89de97523
2 changed files with 26 additions and 10 deletions

View File

@ -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>

View File

@ -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;