Verbeter styling inschrijfformulier

src/main/resources/static/index.html

@@ -11,36 +11,38 @@
 
 <header>
     <h1>Puzzeltochten</h1>
-    <div id="unsupported">Deze browser ondersteunt de vereiste functionaliteit voor deze applicatie niet</div>
 </header>
 
+<main>
+<div id="unsupported" style="display:none">Deze browser ondersteunt de vereiste functionaliteit voor deze applicatie niet</div>
 <div id="join">
-    <header>
-        <h2>Kies teamnaam en puzzeltocht</h2>
-    </header>
-
+    <p>
+        Schrijf hier je team in.
+        Let op: deze app werkt alleen op apparaten met GPS functie, zorg dat deze aan staat!
+    </p>
     <form id="joinForm">
         <label for="teamName">Teamnaam: </label>
         <input type="text" id="teamName"/>
         <label for="events">Puzzeltocht:</label>
         <div id="events">
-            <label><input name="eventId" type="radio"></label>
+            <label>Laden...</label>
         </div>
+        <label for="joinButton">Bevestigen:</label>
         <button type="submit" id="joinButton" disabled>Wij doen mee!</button>
     </form>
 </div>
-
 <section id="mission" style="display:none">
     <header>
-        <h1 id="missionTitle">Laden...</h1>
+        <h1 id="missionTitle">Locatie bepalen...</h1>
     </header>
-    <p id="missionDescription"></p>
+    <p id="missionDescription">Deze app vereist een accurate locatie, zet daarom de GPS functie van je apparaat aan.</p>
     <div id="questionMission">
         <label for="questionAnwser">Antwoord: </label>
         <input type="text" id="questionAnwser" required/>
         <button id="answerButton">Verstuur antwoord</button>
     </div>
 </section>
+</main>
 
 <footer>
     <div id="location">Locatie onbekend</div>

src/main/resources/static/main.css

@@ -1,6 +1,7 @@
 html, body {
     position: relative;
     height: 100vh;
+    width: 100vw;
     overflow: hidden;
     margin: 0; padding: 0;
     color: black;
@@ -14,16 +15,25 @@ html, body {
     box-sizing: inherit;
 }
 
-body > header, body > footer {
+header, footer {
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+header > h1,
+header > h2 {
+    margin: 1.5vh 0;
+}
+
+body > header,
+body > footer {
     margin: 0;
-    padding: 1vh;
+    padding: 1.5vh;
     background-color: #c23350;
     color: #eee;
-    font-family: Arial, Helvetica, sans-serif;
 }
 
-header {
-    font-family: Arial, Helvetica, sans-serif;
+main {
+    padding: 1vh 2vw;
 }
 
 body > footer {
@@ -32,18 +42,50 @@ body > footer {
     width: 100vw;
 }
 
+#join > p {
+    margin: 1vh 0 1.5vh 0;
+}
+
 #joinForm {
     display: flex;
     flex-direction: column;
-    padding: 1vmin;
-    width: 20vw;
-    min-width: 10em;
+    width: 96vw;
+    padding: 0 1vw
+}
+
+#joinForm > label,
+#joinForm > button {
+    margin: 1vh 0;
+    border-bottom: 1px solid #bbbbbb;
+}
+
+#joinForm > button,
+#joinForm > input {
+    margin: 1vh 0;
+    padding: 2vmin;
+    border: 1px solid #111;
+    border-radius: 1vmin;
+    background-color: #232729;
+    color: #eeeeee;
+}
+
+#events {
+    display: flex;
+    flex-direction: column;
 }
 
-#joinForm > * {
-    margin-bottom: 2vmin;
+#events > label {
+    display: inline-flex;
+    align-items: center;
+    margin: 1vmin 0;
+    padding: 2vmin;
+    background-color: #c23350;
+    color: #eeeeee;
+    border: 1px solid darkred;
+    border-radius: 2vmin;
+    line-height: 1.25;
 }
 
-#unsupported {
-    display: none;
+#events > label > input {
+    margin: 0 2.5vmin 0 1.5vmin;
 }