From 5795861b96822a8382a6bc2d799aefe70ba98b9d Mon Sep 17 00:00:00 2001 From: Fabian Schieder Date: Thu, 22 Jan 2026 22:14:55 +0100 Subject: [PATCH] improvements --- assets/css/login.css | 212 ++++++++++++++++++++----------------------- login.php | 3 +- 2 files changed, 101 insertions(+), 114 deletions(-) diff --git a/assets/css/login.css b/assets/css/login.css index 8391e27..d9b5453 100644 --- a/assets/css/login.css +++ b/assets/css/login.css @@ -1,155 +1,141 @@ -/* Datei: assets/css/login.css */ +/* assets/css/login.css + Geizhals-inspiriertes, cleanes Login-Layout +*/ :root{ - --bg1:#0b1220; - --bg2:#0f172a; - --card:rgba(255,255,255,.06); - --border:rgba(255,255,255,.10); - --text:#e5e7eb; - --muted:#9ca3af; - --accent:#22c55e; - --accent2:#38bdf8; - --danger:#ef4444; - --shadow:0 18px 60px rgba(0,0,0,.45); - --radius:16px; + --gh-bg: #f4f6f8; + --gh-card: #ffffff; + --gh-text: #1f2937; + --gh-muted: #6b7280; + --gh-border: #e5e7eb; + --gh-accent: #18a957; /* "Deal"-Grün */ + --gh-accent-2: #0f8a45; + --gh-danger: #d92d20; + --gh-shadow: 0 10px 30px rgba(15, 23, 42, 0.08); + --gh-radius: 14px; + --gh-focus: 0 0 0 4px rgba(24, 169, 87, 0.18); } -*{ box-sizing:border-box; } -html,body{ height:100%; } +html, body{ + height: 100%; +} body{ - margin:0; - font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans","Helvetica Neue",sans-serif; - color:var(--text); + margin: 0; + font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif; + color: var(--gh-text); background: - radial-gradient(1100px 550px at 15% 10%, rgba(56,189,248,.22), transparent 60%), - radial-gradient(900px 500px at 85% 15%, rgba(34,197,94,.18), transparent 55%), - linear-gradient(180deg, var(--bg1), var(--bg2)); - display:grid; - place-items:center; - padding:28px 16px; + radial-gradient(1200px 500px at 20% 0%, rgba(24,169,87,0.10), transparent 55%), + radial-gradient(900px 400px at 90% 10%, rgba(59,130,246,0.08), transparent 60%), + var(--gh-bg); } -.login-shell{ - width:min(420px, 100%); +/* Überschrift */ +h2{ + max-width: 440px; + margin: 44px auto 14px; + padding: 0 18px; + font-size: 1.55rem; + letter-spacing: 0.2px; } -.login-card{ - background:var(--card); - border:1px solid var(--border); - border-radius:var(--radius); - box-shadow:var(--shadow); - backdrop-filter: blur(10px); - padding:26px 22px; -} - -.login-title{ - margin:0 0 6px 0; - font-size:26px; - letter-spacing:.2px; -} - -.login-subtitle{ - margin:0 0 18px 0; - color:var(--muted); - font-size:14px; - line-height:1.35; -} - -.form-group{ - margin:0 0 14px 0; +/* Formular-Karte */ +form{ + max-width: 440px; + margin: 0 auto; + padding: 22px 18px 18px; + background: var(--gh-card); + border: 1px solid var(--gh-border); + border-radius: var(--gh-radius); + box-shadow: var(--gh-shadow); } label{ - display:block; - font-size:13px; - color:var(--muted); - margin:0 0 6px 0; + display: block; + margin: 12px 0 6px; + font-size: 0.95rem; + color: var(--gh-muted); } input[type="text"], input[type="password"]{ - width:100%; - border:1px solid rgba(255,255,255,.14); - background:rgba(15,23,42,.55); - color:var(--text); - border-radius:12px; - padding:12px 12px; - outline:none; - transition: border-color .2s ease, box-shadow .2s ease, transform .06s ease; -} - -input[type="text"]::placeholder, -input[type="password"]::placeholder{ - color:rgba(229,231,235,.55); + width: 100%; + box-sizing: border-box; + padding: 12px 12px; + border: 1px solid var(--gh-border); + border-radius: 12px; + background: #fbfbfc; + color: var(--gh-text); + outline: none; + transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease; } input[type="text"]:focus, input[type="password"]:focus{ - border-color: rgba(56,189,248,.55); - box-shadow: 0 0 0 4px rgba(56,189,248,.18); + border-color: rgba(24,169,87,0.55); + box-shadow: var(--gh-focus); + background: #ffffff; } -.actions{ - display:flex; - gap:10px; - margin-top:8px; -} - -button, +/* Submit */ input[type="submit"]{ - width:100%; - border:0; - border-radius:12px; - padding:12px 14px; - font-weight:600; - cursor:pointer; - transition: transform .06s ease, filter .2s ease, box-shadow .2s ease; - background: linear-gradient(135deg, var(--accent2), var(--accent)); - color:#071018; - box-shadow: 0 12px 30px rgba(34,197,94,.18); + width: 100%; + margin-top: 14px; + padding: 12px 14px; + border: 0; + border-radius: 12px; + background: linear-gradient(180deg, var(--gh-accent), var(--gh-accent-2)); + color: #ffffff; + font-weight: 650; + cursor: pointer; + transition: transform 120ms ease, filter 120ms ease; } -button:hover, input[type="submit"]:hover{ filter: brightness(1.02); + transform: translateY(-1px); } -button:active, input[type="submit"]:active{ - transform: translateY(1px); + transform: translateY(0px); } -.login-error{ - border:1px solid rgba(239,68,68,.35); - background:rgba(239,68,68,.10); - color:#fecaca; - padding:10px 12px; - border-radius:12px; - margin:0 0 14px 0; - font-size:14px; +/* Fehlertext (dein

oberhalb des Forms) */ +p{ + max-width: 440px; + margin: 10px auto; + padding: 0 18px; + color: var(--gh-muted); } -.login-footer{ - margin-top:14px; - text-align:center; - color:var(--muted); - font-size:14px; +p:has(+ form){ + /* der Absatz direkt vor dem Form: als Alert darstellen */ + color: #ffffff; + background: var(--gh-danger); + border-radius: 12px; + padding: 10px 12px; + box-shadow: 0 8px 18px rgba(217, 45, 32, 0.18); } -.login-footer a{ - color:rgba(56,189,248,.95); - text-decoration:none; +/* Register-Link */ +p a{ + color: var(--gh-accent-2); + text-decoration: none; + font-weight: 600; } -.login-footer a:hover{ - text-decoration:underline; +p a:hover{ + text-decoration: underline; } -/* Optional: dunkle HR */ -.hr{ - border:0; - height:1px; - background:rgba(255,255,255,.10); - margin:16px 0; -} \ No newline at end of file +/* Kleine Anpassungen für sehr schmale Displays */ +@media (max-width: 520px){ + h2{ + margin-top: 28px; + font-size: 1.35rem; + } + + form{ + border-radius: 12px; + } +} diff --git a/login.php b/login.php index 36b0266..92b4962 100644 --- a/login.php +++ b/login.php @@ -30,7 +30,8 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') { // Basic Validierung if ($uname === '' || $pw === '') { $loginError = "Bitte Username und Passwort eingeben."; - } else { + } + else { // Login ist SELECT, nicht INSERT $stmt = mysqli_prepare($conn, "SELECT id, pw FROM user WHERE un = ?"); mysqli_stmt_bind_param($stmt, "s", $uname);