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

173
public/index.html
View File

@@ -1,84 +1,125 @@
<!DOCTYPE html> <!doctype html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kriminalfälle - Mathematische Ermittlungen</title> <title>Kriminalfälle - Mathematische Ermittlungen</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
<!-- Auth overlay — shown when not logged in --> <!-- Auth overlay — shown when not logged in -->
<div id="authOverlay" class="auth-overlay"> <div id="authOverlay" class="auth-overlay">
<div class="auth-card"> <div class="auth-card">
<h1 class="auth-title">Kriminalfälle</h1> <h1 class="auth-title">Mathquest</h1>
<p class="auth-subtitle">Mathematische Ermittlungen</p> <div class="auth-tabs">
<button
<div class="auth-tabs"> class="auth-tab active"
<button class="auth-tab active" id="tabLogin" onclick="showAuthTab('login')">Anmelden</button> id="tabLogin"
<button class="auth-tab" id="tabRegister" onclick="showAuthTab('register')">Registrieren</button> onclick="showAuthTab('login')"
</div> >
Anmelden
<div id="loginForm"> </button>
<input type="email" id="loginEmail" class="auth-input" placeholder="E-Mail-Adresse" autocomplete="email"> <button
<input type="password" id="loginPassword" class="auth-input" placeholder="Passwort" autocomplete="current-password"> class="auth-tab"
<div class="auth-error" id="loginError"></div> id="tabRegister"
<button class="auth-button" onclick="login()">Anmelden</button> onclick="showAuthTab('register')"
</div> >
Registrieren
<div id="registerForm" style="display:none"> </button>
<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> </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> </div>
<!-- Main app — hidden until logged in --> <!-- 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> <aside class="sidebar" id="sidebar"></aside>
<div class="main-content"> <div class="main-content">
<div class="container"> <div class="container">
<header> <header>
<div class="header-content"> <div class="header-content">
<h1>Kriminalfälle - Mathematische Ermittlungen</h1> <h1>Kriminalfälle - Mathematische Ermittlungen</h1>
<div class="header-right"> <div class="header-right">
<div class="points-display"> <div class="points-display">
<div class="points-label">Ermittlungspunkte</div> <div class="points-label">Ermittlungspunkte</div>
<div class="points-value" id="totalPoints">0</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> </div>
<div class="user-display">
<div class="task-section"> <div class="user-name" id="userDisplayName"></div>
<div id="chapterDescription" class="chapter-description"></div> <button class="logout-button" onclick="logout()">
<div id="taskContainer" class="task-container"></div> Abmelden
</button>
</div> </div>
</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>
</div> </div>
<script src="/config.js"></script> <script src="/config.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.js"></script> <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.js"></script>
<script src="app.js"></script> <script src="app.js"></script>
</body> </body>
</html> </html>

64
public/style.css
View File

@@ -419,66 +419,46 @@ h1 {
.auth-card { .auth-card {
background: #2c3e50; background: #2c3e50;
border: 2px solid #34495e; border: 1px solid #34495e;
padding: 40px; padding: 32px;
width: 100%; width: 100%;
max-width: 400px; max-width: 360px;
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;
} }
.auth-tabs { .auth-tabs {
display: flex; display: flex;
margin-bottom: 24px; margin-bottom: 20px;
border-bottom: 2px solid #34495e; border-bottom: 1px solid #34495e;
} }
.auth-tab { .auth-tab {
background: none; background: none;
border: none; border: none;
color: #7f8c8d; color: #7f8c8d;
padding: 10px 20px; padding: 8px 16px;
font-size: 0.95em; font-size: 0.9em;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer; cursor: pointer;
transition: color 0.2s;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
margin-bottom: -2px; margin-bottom: -1px;
transition: color 0.2s;
} }
.auth-tab.active { .auth-tab.active {
color: #3498db; color: #ecf0f1;
border-bottom-color: #3498db; border-bottom-color: #3498db;
} }
.auth-input { .auth-input {
display: block; display: block;
width: 100%; width: 100%;
padding: 12px 14px; padding: 10px 12px;
margin-bottom: 12px; margin-bottom: 10px;
background: #1a252f; background: #1a252f;
border: 2px solid #34495e; border: 1px solid #34495e;
color: #ecf0f1; color: #ecf0f1;
font-size: 1em; font-size: 0.95em;
font-family: 'Arial', sans-serif;
transition: border-color 0.2s; transition: border-color 0.2s;
box-sizing: border-box;
} }
.auth-input:focus { .auth-input:focus {
@@ -491,23 +471,19 @@ h1 {
} }
.auth-error { .auth-error {
font-size: 0.9em; font-size: 0.85em;
color: #e74c3c; color: #e74c3c;
margin-bottom: 12px; margin-bottom: 10px;
min-height: 20px; min-height: 18px;
} }
.auth-button { .auth-button {
width: 100%; width: 100%;
padding: 14px; padding: 11px;
background: #3498db; background: #3498db;
color: white; color: white;
border: none; border: none;
font-size: 1em; font-size: 0.95em;
font-weight: bold;
font-family: 'Arial', sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s; transition: background-color 0.2s;
} }