iwonder/bc100-autofill
1
0
Fork 0
Code Issues 6 Pull Requests Packages Projects Releases Wiki Activity

make the options screen a bit nicer

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
options/index.html
View File

@ -9,27 +9,34 @@
<body> <body>
<form> <form>
<fieldset>
<legend>Main options</legend>
<label class="item"> <label class="item">
<span class="fh">Enable autofill</span> <span class="fh">Enable autofill</span>
<input name="enable" id="enable" type="checkbox" /> <input name="enable" id="enable" type="checkbox" />
</label> </label>
<button id="all-get-from-profile">Get all the data from my profile</button>
<label class="item"> <label class="item">
<span class="fh">Your BahnCard 100 number</span><br /> <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">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> <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 <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." /> title="Your BahnCard number is 16 digits long and starts with 7081." />
<button id="bcnum-get-from-profile">Get from profile</button> <button id="bcnum-get-from-profile">Get from profile</button>
</label> </label>
<label class="item"> <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 /> <input name="birthday" id="birthday" type="date" required />
</label> </label>
<label class="item"> </fieldset>
<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> <legend>Address data</legend>
<label class="item"> <label class="item">
@ -53,11 +60,11 @@
</label> </label>
<label class="item"> <label class="item">
<span class="fh">Given name</span><br> <span class="fh">Given name</span><br>
<input name="firstname" id="firstname" /> <input name="firstname" id="firstname" placeholder="e.g. Erika" />
</label> </label>
<label class="item"> <label class="item">
<span class="fh">Surname</span><br> <span class="fh">Surname</span><br>
<input name="surname" id="surname" /> <input name="surname" id="surname" placeholder="e.g. Mustermann" />
</label> </label>
<label class="item"> <label class="item">
<span class="fh">Email address</span><br> <span class="fh">Email address</span><br>

9
options/style.css
View File

@ -3,10 +3,18 @@
font-weight: bold; font-weight: bold;
} }
summary.fh {
margin:.5em 0;
}
.sh { .sh {
font-size: 1em; font-size: 1em;
font-style: italic; font-style: italic;
} }
input + .sh, .fh + .sh {
display:block;
padding-top: 0;
}
label.item { label.item {
display: block; display: block;
@ -53,6 +61,7 @@ input:focus {
#all-get-from-profile { #all-get-from-profile {
width:100%; width:100%;
margin: 0.25em 0;
min-height:2rem; min-height:2rem;
text-align: center; text-align: center;
font-size: 18pt; font-size: 18pt;