Admin: Passwortgeschütztes Statistik-Dashboard implementiert

- Neue Routen: /login, /stats, /logout - Session-basierte Authentifizierung - Umfassende Statistiken: Seitenaufrufe, Suchvorgänge, Quellen - Environment-Variablen: ADMIN_PASSWORD, FLASK_SECRET_KEY - Docker-Integration mit docker-compose.yml - Responsive UI mit Charts und Aktivitätsprotokoll
2025-08-20 09:11:53 +02:00
parent fcbcb07e76
commit d730e6b266
5 changed files with 525 additions and 2 deletions
--- a/templates/login.html
+++ b/templates/login.html
@@ -0,0 +1,117 @@
+<!doctype html>
+<html lang="de">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Admin Login - Wordle‑Cheater</title>
+    <meta name="robots" content="noindex,nofollow" />
+    <style>
+        :root { --bg:#ffffff; --text:#111827; --muted:#6b7280; --border:#e5e7eb; --button-bg:#111827; --button-text:#ffffff; --error:#b91c1c; --success:#065f46; }
+        [data-theme="dark"] { --bg:#0b1220; --text:#e5e7eb; --muted:#9ca3af; --border:#334155; --button-bg:#e5e7eb; --button-text:#111827; --error:#ef4444; --success:#10b981; }
+        
+        html, body { background: var(--bg); color: var(--text); margin: 0; padding: 0; height: 100vh; }
+        body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; display: flex; align-items: center; justify-content: center; }
+        
+        .login-container { 
+            background: var(--bg); 
+            border: 1px solid var(--border); 
+            border-radius: 0.5rem; 
+            padding: 2rem; 
+            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+            max-width: 400px;
+            width: 90%;
+        }
+        
+        .login-header { text-align: center; margin-bottom: 2rem; }
+        .login-header h1 { margin: 0; color: var(--text); }
+        .login-header p { color: var(--muted); margin: 0.5rem 0 0 0; }
+        
+        .form-group { margin-bottom: 1.5rem; }
+        .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--text); }
+        .form-group input { 
+            width: 100%; 
+            padding: 0.75rem; 
+            border: 1px solid var(--border); 
+            border-radius: 0.375rem; 
+            background: var(--bg); 
+            color: var(--text); 
+            font-size: 1rem;
+            box-sizing: border-box;
+        }
+        
+        .form-group input:focus { 
+            outline: none; 
+            border-color: #3b82f6; 
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); 
+        }
+        
+        .submit-btn { 
+            width: 100%; 
+            padding: 0.75rem; 
+            background: var(--button-bg); 
+            color: var(--button-text); 
+            border: none; 
+            border-radius: 0.375rem; 
+            font-size: 1rem; 
+            font-weight: 600; 
+            cursor: pointer; 
+            transition: opacity 0.2s; 
+        }
+        
+        .submit-btn:hover { opacity: 0.9; }
+        .submit-btn:active { transform: translateY(1px); }
+        
+        .flash-messages { margin-bottom: 1.5rem; }
+        .flash { 
+            padding: 0.75rem; 
+            border-radius: 0.375rem; 
+            margin-bottom: 0.5rem; 
+            font-weight: 500; 
+        }
+        .flash.error { background: var(--error); color: white; }
+        .flash.success { background: var(--success); color: white; }
+        
+        .back-link { 
+            text-align: center; 
+            margin-top: 1.5rem; 
+        }
+        .back-link a { 
+            color: var(--muted); 
+            text-decoration: none; 
+            font-size: 0.9rem; 
+        }
+        .back-link a:hover { text-decoration: underline; }
+    </style>
+</head>
+<body>
+    <div class="login-container">
+        <div class="login-header">
+            <h1>🔐 Admin Login</h1>
+            <p>Statistik-Dashboard</p>
+        </div>
+        
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                <div class="flash-messages">
+                    {% for category, message in messages %}
+                        <div class="flash {{ category }}">{{ message }}</div>
+                    {% endfor %}
+                </div>
+            {% endif %}
+        {% endwith %}
+        
+        <form method="POST">
+            <div class="form-group">
+                <label for="password">Passwort:</label>
+                <input type="password" id="password" name="password" required autocomplete="current-password">
+            </div>
+            
+            <button type="submit" class="submit-btn">Anmelden</button>
+        </form>
+        
+        <div class="back-link">
+            <a href="{{ url_for('index') }}">← Zurück zur Hauptseite</a>
+        </div>
+    </div>
+</body>
+</html>