lukas/mathquest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make login generic

Browse Source
This commit is contained in:
Lukas Cremer
2026-05-13 21:42:39 +02:00
parent 56f41d9f8d
commit 79612c348a
2 changed files with 127 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
public/index.html
View File

@@ -1,35 +1,74 @@
<!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>
<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>
<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">
<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="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 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>
@@ -37,7 +76,7 @@
</div>
<!-- Main app — hidden until logged in -->
<div id="appWrapper" class="app-wrapper" style="display:none">
<div id="appWrapper" class="app-wrapper" style="display: none">
<aside class="sidebar" id="sidebar"></aside>
<div class="main-content">
<div class="container">
@@ -51,7 +90,9 @@
</div>
<div class="user-display">
<div class="user-name" id="userDisplayName"></div>
<button class="logout-button" onclick="logout()">Abmelden</button>
<button class="logout-button" onclick="logout()">
Abmelden
</button>
</div>
</div>
</div>
@@ -80,5 +121,5 @@
<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>

64
public/style.css
View File

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