From 79612c348af7be9c0753ebbc03708648dfb3a724 Mon Sep 17 00:00:00 2001
From: Lukas Cremer <lukas@stokr.io>
Date: Wed, 13 May 2026 21:42:39 +0200
Subject: [PATCH] make login generic

---
 public/index.html | 173 ++++++++++++++++++++++++++++------------------
 public/style.css  |  64 ++++++-----------
 2 files changed, 127 insertions(+), 110 deletions(-)
diff --git a/public/index.html b/public/index.html
index f96d88b..6c0f46f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,84 +1,125 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Kriminalfälle - Mathematische Ermittlungen</title>
-    <link rel="stylesheet" href="style.css">
-</head>
-<body>
-
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
     <!-- Auth overlay — shown when not logged in -->
     <div id="authOverlay" class="auth-overlay">
-        <div class="auth-card">
-            <h1 class="auth-title">Kriminalfälle</h1>
-            <p class="auth-subtitle">Mathematische Ermittlungen</p>
-
-            <div class="auth-tabs">
-                <button class="auth-tab active" id="tabLogin" onclick="showAuthTab('login')">Anmelden</button>
-                <button class="auth-tab" id="tabRegister" onclick="showAuthTab('register')">Registrieren</button>
-            </div>
-
-            <div id="loginForm">
-                <input type="email" id="loginEmail" class="auth-input" placeholder="E-Mail-Adresse" autocomplete="email">
-                <input type="password" id="loginPassword" class="auth-input" placeholder="Passwort" autocomplete="current-password">
-                <div class="auth-error" id="loginError"></div>
-                <button class="auth-button" onclick="login()">Anmelden</button>
-            </div>
-
-            <div id="registerForm" style="display:none">
-                <input type="text" id="registerName" class="auth-input" placeholder="Anzeigename (optional)" autocomplete="name">
-                <input type="email" id="registerEmail" class="auth-input" placeholder="E-Mail-Adresse" autocomplete="email">
-                <input type="password" id="registerPassword" class="auth-input" placeholder="Passwort (min. 6 Zeichen)" autocomplete="new-password">
-                <div class="auth-error" id="registerError"></div>
-                <button class="auth-button" onclick="register()">Registrieren</button>
-            </div>
+      <div class="auth-card">
+        <h1 class="auth-title">Mathquest</h1>
+        <div class="auth-tabs">
+          <button
+            class="auth-tab active"
+            id="tabLogin"
+            onclick="showAuthTab('login')"
+          >
+            Anmelden
+          </button>
+          <button
+            class="auth-tab"
+            id="tabRegister"
+            onclick="showAuthTab('register')"
+          >
+            Registrieren
+          </button>
         </div>
+
+        <div id="loginForm">
+          <input
+            type="email"
+            id="loginEmail"
+            class="auth-input"
+            placeholder="E-Mail"
+            autocomplete="email"
+          />
+          <input
+            type="password"
+            id="loginPassword"
+            class="auth-input"
+            placeholder="Passwort"
+            autocomplete="current-password"
+          />
+          <div class="auth-error" id="loginError"></div>
+          <button class="auth-button" onclick="login()">Anmelden</button>
+        </div>
+
+        <div id="registerForm" style="display: none">
+          <input
+            type="text"
+            id="registerName"
+            class="auth-input"
+            placeholder="Name (optional)"
+            autocomplete="name"
+          />
+          <input
+            type="email"
+            id="registerEmail"
+            class="auth-input"
+            placeholder="E-Mail"
+            autocomplete="email"
+          />
+          <input
+            type="password"
+            id="registerPassword"
+            class="auth-input"
+            placeholder="Passwort"
+            autocomplete="new-password"
+          />
+          <div class="auth-error" id="registerError"></div>
+          <button class="auth-button" onclick="register()">Registrieren</button>
+        </div>
+      </div>
     </div>
 
     <!-- Main app — hidden until logged in -->
-    <div id="appWrapper" class="app-wrapper" style="display:none">
-        <aside class="sidebar" id="sidebar"></aside>
-        <div class="main-content">
-            <div class="container">
-                <header>
-                    <div class="header-content">
-                        <h1>Kriminalfälle - Mathematische Ermittlungen</h1>
-                        <div class="header-right">
-                            <div class="points-display">
-                                <div class="points-label">Ermittlungspunkte</div>
-                                <div class="points-value" id="totalPoints">0</div>
-                            </div>
-                            <div class="user-display">
-                                <div class="user-name" id="userDisplayName"></div>
-                                <button class="logout-button" onclick="logout()">Abmelden</button>
-                            </div>
-                        </div>
-                    </div>
-                </header>
-
-                <div class="progress-section">
-                    <div class="progress-content">
-                        <div class="progress-label">Ermittlungsfortschritt</div>
-                        <div class="progress-bar-container">
-                            <div class="progress-bar" id="progressBar"></div>
-                        </div>
-                        <div class="progress-text" id="progressText">0 / 100</div>
-                    </div>
+    <div id="appWrapper" class="app-wrapper" style="display: none">
+      <aside class="sidebar" id="sidebar"></aside>
+      <div class="main-content">
+        <div class="container">
+          <header>
+            <div class="header-content">
+              <h1>Kriminalfälle - Mathematische Ermittlungen</h1>
+              <div class="header-right">
+                <div class="points-display">
+                  <div class="points-label">Ermittlungspunkte</div>
+                  <div class="points-value" id="totalPoints">0</div>
                 </div>
-
-                <div class="task-section">
-                    <div id="chapterDescription" class="chapter-description"></div>
-                    <div id="taskContainer" class="task-container"></div>
+                <div class="user-display">
+                  <div class="user-name" id="userDisplayName"></div>
+                  <button class="logout-button" onclick="logout()">
+                    Abmelden
+                  </button>
                 </div>
-
-                <div class="message" id="message"></div>
+              </div>
             </div>
+          </header>
+
+          <div class="progress-section">
+            <div class="progress-content">
+              <div class="progress-label">Ermittlungsfortschritt</div>
+              <div class="progress-bar-container">
+                <div class="progress-bar" id="progressBar"></div>
+              </div>
+              <div class="progress-text" id="progressText">0 / 100</div>
+            </div>
+          </div>
+
+          <div class="task-section">
+            <div id="chapterDescription" class="chapter-description"></div>
+            <div id="taskContainer" class="task-container"></div>
+          </div>
+
+          <div class="message" id="message"></div>
         </div>
+      </div>
     </div>
 
     <script src="/config.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.js"></script>
     <script src="app.js"></script>
-</body>
+  </body>
 </html>
diff --git a/public/style.css b/public/style.css
index 7e847e0..809b0d9 100644
--- a/public/style.css
+++ b/public/style.css
@@ -419,66 +419,46 @@ h1 {
 
 .auth-card {
     background: #2c3e50;
-    border: 2px solid #34495e;
-    padding: 40px;
+    border: 1px solid #34495e;
+    padding: 32px;
     width: 100%;
-    max-width: 400px;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
-}
-
-.auth-title {
-    color: #ecf0f1;
-    font-size: 1.6em;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    margin-bottom: 6px;
-}
-
-.auth-subtitle {
-    color: #7f8c8d;
-    font-size: 0.9em;
-    margin-bottom: 28px;
-    text-transform: uppercase;
-    letter-spacing: 1px;
+    max-width: 360px;
 }
 
 .auth-tabs {
     display: flex;
-    margin-bottom: 24px;
-    border-bottom: 2px solid #34495e;
+    margin-bottom: 20px;
+    border-bottom: 1px solid #34495e;
 }
 
 .auth-tab {
     background: none;
     border: none;
     color: #7f8c8d;
-    padding: 10px 20px;
-    font-size: 0.95em;
-    font-weight: bold;
-    text-transform: uppercase;
-    letter-spacing: 1px;
+    padding: 8px 16px;
+    font-size: 0.9em;
     cursor: pointer;
-    transition: color 0.2s;
     border-bottom: 2px solid transparent;
-    margin-bottom: -2px;
+    margin-bottom: -1px;
+    transition: color 0.2s;
 }
 
 .auth-tab.active {
-    color: #3498db;
+    color: #ecf0f1;
     border-bottom-color: #3498db;
 }
 
 .auth-input {
     display: block;
     width: 100%;
-    padding: 12px 14px;
-    margin-bottom: 12px;
+    padding: 10px 12px;
+    margin-bottom: 10px;
     background: #1a252f;
-    border: 2px solid #34495e;
+    border: 1px solid #34495e;
     color: #ecf0f1;
-    font-size: 1em;
-    font-family: 'Arial', sans-serif;
+    font-size: 0.95em;
     transition: border-color 0.2s;
+    box-sizing: border-box;
 }
 
 .auth-input:focus {
@@ -491,23 +471,19 @@ h1 {
 }
 
 .auth-error {
-    font-size: 0.9em;
+    font-size: 0.85em;
     color: #e74c3c;
-    margin-bottom: 12px;
-    min-height: 20px;
+    margin-bottom: 10px;
+    min-height: 18px;
 }
 
 .auth-button {
     width: 100%;
-    padding: 14px;
+    padding: 11px;
     background: #3498db;
     color: white;
     border: none;
-    font-size: 1em;
-    font-weight: bold;
-    font-family: 'Arial', sans-serif;
-    text-transform: uppercase;
-    letter-spacing: 1px;
+    font-size: 0.95em;
     cursor: pointer;
     transition: background-color 0.2s;
 }
