vor ähnlichkeitsprüfung

2025-12-21 14:21:55 +01:00
parent ffcfce2b31
commit fde5ab91c8
14 changed files with 721 additions and 50 deletions
--- a/web/login.html
+++ b/web/login.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Login – Post Tracker</title>
+  <link rel="icon" type="image/png" sizes="32x32" href="assets/app-icon-64.png">
+  <link rel="icon" type="image/png" sizes="192x192" href="assets/app-icon-192.png">
+  <link rel="apple-touch-icon" href="assets/app-icon-192.png">
+  <style>
+    :root {
+      color-scheme: light;
+    }
+    body {
+      margin: 0;
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      color: #0f172a;
+    }
+    .login-card {
+      background: #fff;
+      padding: 32px;
+      border-radius: 14px;
+      box-shadow: 0 20px 60px rgba(15, 23, 42, 0.15);
+      width: min(420px, 90vw);
+      box-sizing: border-box;
+    }
+    .login-card h1 {
+      margin: 0 0 8px;
+      font-size: 24px;
+    }
+    .login-card p {
+      margin: 0 0 24px;
+      color: #475569;
+      line-height: 1.4;
+    }
+    label {
+      display: block;
+      margin-bottom: 6px;
+      font-weight: 600;
+    }
+    input {
+      width: 100%;
+      padding: 12px;
+      border: 1px solid #cbd5e1;
+      border-radius: 10px;
+      box-sizing: border-box;
+      font-size: 16px;
+      transition: border-color 0.2s, box-shadow 0.2s;
+    }
+    input:focus {
+      border-color: #3b82f6;
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
+      outline: none;
+    }
+    .field {
+      margin-bottom: 18px;
+    }
+    button {
+      width: 100%;
+      padding: 12px 14px;
+      background: #2563eb;
+      color: #fff;
+      font-weight: 700;
+      font-size: 16px;
+      border: none;
+      border-radius: 10px;
+      cursor: pointer;
+      transition: transform 0.08s ease, box-shadow 0.2s ease, background 0.2s ease;
+      box-shadow: 0 12px 30px rgba(37, 99, 235, 0.25);
+    }
+    button:hover {
+      background: #1d4ed8;
+      transform: translateY(-1px);
+    }
+    button:active {
+      transform: translateY(0);
+      box-shadow: 0 6px 20px rgba(37, 99, 235, 0.18);
+    }
+    .status {
+      margin-top: 14px;
+      min-height: 22px;
+      color: #b91c1c;
+      font-weight: 600;
+    }
+  </style>
+</head>
+<body>
+  <div class="login-card">
+    <h1>📋 Post Tracker Login</h1>
+    <p>Bitte melde dich an, um das Dashboard zu öffnen.</p>
+    <form id="loginForm" novalidate>
+      <div class="field">
+        <label for="username">Benutzername</label>
+        <input type="text" id="username" name="username" autocomplete="username" required>
+      </div>
+      <div class="field">
+        <label for="password">Passwort</label>
+        <input type="password" id="password" name="password" autocomplete="current-password" required>
+      </div>
+      <button type="submit">Anmelden</button>
+      <div id="status" class="status" role="status" aria-live="polite"></div>
+    </form>
+  </div>
+  <script src="login.js"></script>
+</body>
+</html>