user admin

public/index.html

@@ -19,6 +19,7 @@
           <label for="renderer">UITVOER</label>
           <select id="renderer"></select>
           <button id="discover" class="square-button" type="button" title="Netwerkspelers zoeken" aria-label="Netwerkspelers zoeken">↻</button>
+          <button id="logout" class="text-button" type="button" hidden>UITLOGGEN</button>
         </div>
       </header>
 
@@ -129,6 +130,20 @@
       </footer>
     </main>
 
+    <section id="login-overlay" class="login-overlay" aria-labelledby="login-title" hidden>
+      <form id="login-form" class="login-panel">
+        <span class="brand-mark">RKT</span>
+        <p class="panel-kicker">WEB PLAYER</p>
+        <h1 id="login-title">Aanmelden</h1>
+        <label for="login-username">Gebruikersnaam</label>
+        <input id="login-username" name="username" autocomplete="username" required>
+        <label for="login-password">Wachtwoord</label>
+        <input id="login-password" name="password" type="password" autocomplete="current-password" required>
+        <p id="login-error" class="login-error" role="alert"></p>
+        <button id="login-submit" class="text-button" type="submit">AANMELDEN</button>
+      </form>
+    </section>
+
     <script src="/app.js" defer></script>
   </body>
 </html>