diff --git a/Readme.md b/Readme.md index af6cb97..7019def 100644 --- a/Readme.md +++ b/Readme.md @@ -8,7 +8,7 @@ ![MySQL](https://img.shields.io/badge/MySQL-5.7%2B%20%2F%20MariaDB-4479A1?logo=mysql&logoColor=white) ![UniFi OS](https://img.shields.io/badge/UniFi%20OS-7.0%2B-0559C9?logo=ubiquiti&logoColor=white) ![License](https://img.shields.io/badge/Lizenz-MIT-green) -![Version](https://img.shields.io/badge/Version-2.5.0-blueviolet) +![Version](https://img.shields.io/badge/Version-2.4.0-blueviolet) ![CI](https://github.com/friloo/unifi-voucher-tool/actions/workflows/ci.yml/badge.svg) @@ -45,8 +45,6 @@ - 💾 **Config-Backup & -Restore** (JSON Export/Import) - 🐳 **Docker** – Dockerfile + docker-compose (MariaDB) - 🌍 **Öffentlicher Modus** – optional ohne Login nutzbar (mit CSRF-Schutz & Throttle) -- 🎨 **Einheitliches Design-System** – ein Stylesheet für Frontend, Login und Backend (Tokens, Komponenten, Light/Dark) -- 🏷️ **Login-Seite individualisierbar** – Firmenname, Logo, Texte, Hintergrundbild bzw. Farbverlauf - 🌗 **Dark Mode** – umschaltbar, Einstellung wird im Browser gespeichert - 🌐 **Mehrsprachig** – Deutsch / Englisch per Umschalter (`lang/`) - 📱 **Responsive Admin-Layout** mit Hamburger-Menü & Sidebar-Overlay @@ -61,35 +59,31 @@ ## 📸 Screenshots -> Alle Screenshots stammen aus der Oberfläche in Version 2.5.0 (neues Design-System). - ### Anmeldung & Voucher-Erstellung
- Anmeldung - Anmeldung mit eigenem Branding + Login mit Microsoft 365 + Voucher erstellen + Voucher-Ergebnis
-
- Voucher erstellen - Einstellungen der Login-Seite -
+### Bulk-Erstellung & Dark Mode
- Voucher-Ergebnis mit QR-Code Bulk-Voucher-Erstellung -
- -### Administration - -
- Dashboard Dashboard im Dark Mode
+### Administration & Updater +
- Live-Voucher-Verwaltung - Einstellungen + Dashboard + Auto-Updater +
+ +
+ Updater – Ausgangszustand + Wartungsmodus
### REST-API, 2FA & Integrationen @@ -103,17 +97,6 @@ Zwei-Faktor-Authentifizierung -### Updater & Wartungsmodus - -
- Updater – Ausgangszustand - Auto-Updater mit verfügbarem Update -
- -
- Wartungsmodus -
- --- ## 📋 Anforderungen @@ -237,57 +220,6 @@ Den Token finden Sie unter **Administration → Einstellungen → Cron**. --- -## 🎨 Design-System - -Frontend, Login-Seiten, Installer, Updater und der gesamte Admin-Bereich nutzen ein -gemeinsames Stylesheet: **`assets/global.css`**. - -- **Design-Tokens** (`:root` bzw. `[data-theme="dark"]`) für Flächen, Text, Linien, - Markenfarbe, Statusfarben, Radien, Schatten und Layout-Maße -- **Komponenten** darauf aufgebaut: Buttons, Formularfelder, Cards, Tabellen, Badges, - Alerts, Tabs, Pagination, Modals, Toasts, Statistik-Kacheln, Sidebar/Topbar -- **Dark Mode** ausschließlich über Tokens – keine `!important`-Overrides mehr -- **Schriftart** Inter (via Google Fonts) mit System-Font-Fallback - -Eigenes Branding lässt sich meist mit wenigen Zeilen umsetzen – z. B. in einer -eigenen CSS-Datei oder direkt in `assets/global.css`: - -```css -:root { - --accent: #0f766e; /* Primärfarbe (Buttons, aktive Navigation) */ - --accent-hover: #0d5f59; - --accent-soft: #e6f4f2; /* Flächen für aktive Zustände */ - --brand-gradient: linear-gradient(135deg, #0f766e 0%, #0ea5e9 100%); - --r-lg: 14px; /* Eckenradius für Cards */ -} -``` - -Logo und Favicon werden nicht über CSS, sondern unter -**Administration → Einstellungen → Allgemein** gesetzt. - -### Login-Seite individualisieren - -Unter **Administration → Einstellungen → Login-Seite** lässt sich die Anmeldeseite -ohne Code-Änderung an das eigene Haus anpassen. Leere Felder verwenden jeweils den -Standardwert – eine frische Installation sieht also unverändert aus. - -| Einstellung | Wirkung | -|---|---| -| Linke Bildspalte anzeigen | Split-Screen an/aus. Aus = zentrierte Anmeldekarte | -| Firmenname | Name neben dem Logo bzw. in der Fußzeile (leer = Anwendungstitel) | -| Logo (URL) | Eigenes Logo in der Bildspalte (leer = allgemeines Logo) | -| Überschrift / Beschreibungstext | Claim in der Bildspalte | -| Stichpunkte | Liste mit Haken – ein Stichpunkt pro Zeile, leer = keine Liste | -| Fußzeile | z. B. `© 2026 Muster GmbH · Datenschutz · Impressum` | -| Hintergrundbild (URL) | Formatfüllendes Bild der Bildspalte | -| Verlauf Start-/Endfarbe | Farbverlauf, wenn kein Bild gesetzt ist | -| Abdunklung (%) | Dunkle Ebene über dem Bild, damit der Text lesbar bleibt | - -Über **„Vorschau öffnen"** lässt sich die Login-Seite als angemeldeter Administrator -ansehen (`login.php?preview=1`), ohne sich abzumelden. - ---- - ## 🛡️ Sicherheit Das Tool ist auf einen sicheren Standardbetrieb ausgelegt: @@ -446,12 +378,11 @@ setzen (`DB_*`, `APP_KEY`). - [x] Docker-Container - [x] Erweiterte Reporting-Funktionen (CSV/PDF) + Health-Endpoint - [x] 2FA-Recovery-Codes, API-Scopes/Rate-Limit/OpenAPI, Test-Suite (PHPUnit/PHPStan) -- [x] Gemeinsames Design-System für Frontend, Login und Backend ---
-**Version 2.5.0** · Autor: **Friederich Loheide** · Lizenz: **MIT** +**Version 2.4.0** · Autor: **Friederich Loheide** · Lizenz: **MIT**
diff --git a/admin/api_keys.php b/admin/api_keys.php index 4817b71..a2bbbfb 100644 --- a/admin/api_keys.php +++ b/admin/api_keys.php @@ -68,12 +68,28 @@ $adminBase = ''; API-Schlüssel – <?= htmlspecialchars($appTitle) ?> -
-
-

API-Schlüssel

-

Zugänge für externe Systeme – mit Scope und Rate-Limit.

-
-
+ + + +

🔑 API-Schlüssel

@@ -114,7 +130,6 @@ $adminBase = '';

Noch keine API-Schlüssel angelegt.

-
@@ -124,16 +139,15 @@ $adminBase = ''; - +
NamePräfixScopeLimitStatusZuletzt genutztErstellt von
- Löschen + Löschen
-
@@ -151,7 +165,7 @@ curl https://IHRE-DOMAIN/api/sites.php -H "X-API-Key: uvt_…"

OpenAPI-Spezifikation (Import in Postman/Swagger): /api/openapi.php

- + diff --git a/admin/audit_log.php b/admin/audit_log.php index edde07b..0af636a 100644 --- a/admin/audit_log.php +++ b/admin/audit_log.php @@ -46,21 +46,21 @@ $currentPage = 'audit_log'; $adminBase = ''; $actionLabels = [ - 'voucher_created' => 'Voucher erstellt', - 'voucher_bulk' => 'Bulk Voucher', - 'user_login' => 'Login', - 'user_logout' => 'Logout', - 'user_created' => 'Benutzer erstellt', - 'user_updated' => 'Benutzer geändert', - 'user_deleted' => 'Benutzer gelöscht', - 'site_added' => 'Site hinzugefügt', - 'site_updated' => 'Site geändert', - 'site_deleted' => 'Site gelöscht', - 'settings_saved' => 'Einstellungen gespeichert', - 'password_reset' => 'Passwort-Reset', - 'template_created' => 'Profil erstellt', - 'template_updated' => 'Profil geändert', - 'template_deleted' => 'Profil gelöscht', + 'voucher_created' => '🎫 Voucher erstellt', + 'voucher_bulk' => '🎫 Bulk Voucher', + 'user_login' => '🔐 Login', + 'user_logout' => '🚪 Logout', + 'user_created' => '👤 Benutzer erstellt', + 'user_updated' => '👤 Benutzer geändert', + 'user_deleted' => '👤 Benutzer gelöscht', + 'site_added' => '🌐 Site hinzugefügt', + 'site_updated' => '🌐 Site geändert', + 'site_deleted' => '🌐 Site gelöscht', + 'settings_saved' => '⚙️ Einstellungen gespeichert', + 'password_reset' => '🔑 Passwort-Reset', + 'template_created' => '📋 Profil erstellt', + 'template_updated' => '📋 Profil geändert', + 'template_deleted' => '📋 Profil gelöscht', ]; ?> @@ -70,12 +70,42 @@ $actionLabels = [ <?= __('audit_title') ?> - <?= htmlspecialchars($appTitle) ?> + +
-
-

-

-
+

+

@@ -121,7 +151,6 @@ $actionLabels = [

-
@@ -168,7 +197,6 @@ $actionLabels = [
-
1): ?> @@ -193,7 +221,7 @@ $actionLabels = [ - + diff --git a/admin/backup.php b/admin/backup.php index b8afeee..0faf942 100644 --- a/admin/backup.php +++ b/admin/backup.php @@ -114,12 +114,22 @@ $adminBase = ''; Backup & Restore – <?= htmlspecialchars($appTitle) ?> -
-
-

Backup & Restore

-

Konfiguration und Daten sichern oder wiederherstellen.

-
-
+ + + +

💾 Backup & Restore

@@ -143,7 +153,7 @@ $adminBase = ''; - + diff --git a/admin/import.php b/admin/import.php index d938ac5..dfb9725 100644 --- a/admin/import.php +++ b/admin/import.php @@ -93,12 +93,22 @@ $adminBase = ''; CSV-Import – <?= htmlspecialchars($appTitle) ?> -
-
-

Voucher-Import

-

Mehrere Vouchers auf einmal aus einer CSV-Liste erstellen.

-
-
+ + + +

📥 Voucher-Import (CSV)

@@ -132,7 +142,7 @@ $adminBase = ''; - + diff --git a/admin/index.php b/admin/index.php index a7fa9a0..e432205 100644 --- a/admin/index.php +++ b/admin/index.php @@ -92,6 +92,74 @@ $currentPage = 'dashboard'; <?= __('dashboard_title') ?> – <?= htmlspecialchars($appTitle) ?> +
@@ -103,7 +171,7 @@ $currentPage = 'dashboard'; DB -
@@ -113,43 +181,43 @@ $currentPage = 'dashboard';
-
+
-
+
-
-
+
🟢
+
-
-
+
🟡
+
-
-
+
🔴
+
-
-
+
📊
+
@@ -157,16 +225,16 @@ $currentPage = 'dashboard';
-

+

🔴

-
+
0,'valid'=>0,'used'=>0,'expired'=>0]; ?>
-
+
@@ -181,8 +249,8 @@ $currentPage = 'dashboard';
-
-
+
+

@@ -192,16 +260,16 @@ $currentPage = 'dashboard';
-

+

📊

-
-
-

-
+
+
+

🏆

+

@@ -223,20 +291,19 @@ $currentPage = 'dashboard';
-
-

Live
+
+

📋

Live

-
- +
@@ -246,26 +313,17 @@ $currentPage = 'dashboard';
-
- +
diff --git a/admin/integrations.php b/admin/integrations.php index 683c5ad..6f6d1bd 100644 --- a/admin/integrations.php +++ b/admin/integrations.php @@ -94,12 +94,22 @@ $adminBase = ''; Integration & Wartung – <?= htmlspecialchars($appTitle) ?> -
-
-

Integration & Wartung

-

SSO, Webhooks, SMS-Versand und Aufbewahrungsfristen.

-
-
+ + + +

🔧 Integration & Wartung

@@ -114,12 +124,12 @@ $adminBase = ''; - - @@ -188,7 +198,7 @@ $adminBase = ''; - +
diff --git a/admin/reports.php b/admin/reports.php index 53427dd..e43b056 100644 --- a/admin/reports.php +++ b/admin/reports.php @@ -98,26 +98,36 @@ $adminBase = ''; Reporting – <?= htmlspecialchars($appTitle) ?> -
-
-

Reporting

-

Auswertungen nach Zeitraum, Site und Benutzer.

-
-
+ + + +

📊 Reporting

- +
- CSV (täglich) - CSV (pro Site) - CSV (pro Nutzer) - + ⬇️ CSV (täglich) + ⬇️ CSV (pro Site) + ⬇️ CSV (pro Nutzer) +
@@ -151,23 +161,13 @@ $adminBase = '';
- +
diff --git a/admin/security.php b/admin/security.php index b7b4ab6..b1934d0 100644 --- a/admin/security.php +++ b/admin/security.php @@ -93,24 +93,37 @@ $activeSessions = $dbSessions ? $auth->activeSessionCount() : 0; Zwei-Faktor-Authentifizierung – <?= htmlspecialchars($appTitle) ?> - + - - - - - - + - -
-
- -
-

Zwei-Faktor-Authentifizierung

-

Konto:

-
-
+ +
+

🔐 Zwei-Faktor-Authentifizierung

+

Konto:

Aus Sicherheitsgründen ist 2FA für Administratoren verpflichtend. Bitte jetzt einrichten.
@@ -120,7 +133,7 @@ $activeSessions = $dbSessions ? $auth->activeSessionCount() : 0;
- Recovery-Codes + 🔑 Recovery-Codes

Bewahren Sie diese sicher auf. Jeder Code funktioniert einmal, falls Sie keinen Zugriff auf Ihre App haben.

@@ -129,22 +142,22 @@ $activeSessions = $dbSessions ? $auth->activeSessionCount() : 0; -
Nicht verfügbar
+
● Nicht verfügbar

Ihr Konto meldet sich über Microsoft 365 an. 2FA wird dort in Ihrem Microsoft-Konto verwaltet.

-
Aktiv
+
● Aktiv

Bei jeder Anmeldung wird zusätzlich ein Code aus Ihrer Authenticator-App abgefragt.
Verbleibende Recovery-Codes: backupCodesRemaining($user) ?>

- +
- +
-
Inaktiv
+
● Inaktiv
  1. Authenticator-App öffnen (Google Authenticator, Authy, Microsoft Authenticator …)
  2. QR-Code scannen oder Secret manuell eingeben
    3. @@ -155,28 +168,27 @@ $activeSessions = $dbSessions ? $auth->activeSessionCount() : 0;
    - - + +
    -
    +

    Aktive Sitzungen:

    - +
    -
    Zurück
    + ← Zurück
diff --git a/admin/settings.php b/admin/settings.php index e6429f6..fbe7e77 100644 --- a/admin/settings.php +++ b/admin/settings.php @@ -58,21 +58,6 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['save_settings'])) { $settings['public_access'] = isset($_POST['public_access']) ? '1' : '0'; } - if ($formType === 'login') { - $settings['login_panel_enabled'] = isset($_POST['login_panel_enabled']) ? '1' : '0'; - $settings['login_brand_name'] = trim($_POST['login_brand_name'] ?? ''); - $settings['login_logo_url'] = trim($_POST['login_logo_url'] ?? ''); - $settings['login_claim_title'] = trim($_POST['login_claim_title'] ?? ''); - $settings['login_claim_text'] = trim($_POST['login_claim_text'] ?? ''); - $settings['login_features'] = trim($_POST['login_features'] ?? ''); - $settings['login_footer'] = trim($_POST['login_footer'] ?? ''); - $settings['login_bg_image'] = trim($_POST['login_bg_image'] ?? ''); - $settings['login_bg_from'] = trim($_POST['login_bg_from'] ?? ''); - $settings['login_bg_to'] = trim($_POST['login_bg_to'] ?? ''); - $overlay = (int)($_POST['login_bg_overlay'] ?? 40); - $settings['login_bg_overlay'] = (string)max(0, min(90, $overlay)); - } - if ($formType === 'defaults') { $expMin = (int)($_POST['default_expire_minutes'] ?? 480); $defDev = (int)($_POST['default_max_uses'] ?? 1); @@ -205,17 +190,6 @@ $cs = [ 'email_user_notification_body' => $db->getSetting('email_user_notification_body', "Hallo {USER_NAME},\n\n{CHANGES}"), 'tinymce_api_key' => $db->getSetting('tinymce_api_key', ''), 'print_template' => $db->getSetting('print_template', '

{APP_TITLE}

WLAN Code

{VOUCHER_CODE}

Gültig bis: {EXPIRY_DATE} {EXPIRY_TIME}

Site: {SITE_NAME}

Geräte: {MAX_USES}

{INSTRUCTIONS}
'), - 'login_panel_enabled' => $db->getSetting('login_panel_enabled', '1'), - 'login_brand_name' => $db->getSetting('login_brand_name', ''), - 'login_logo_url' => $db->getSetting('login_logo_url', ''), - 'login_claim_title' => $db->getSetting('login_claim_title', ''), - 'login_claim_text' => $db->getSetting('login_claim_text', ''), - 'login_features' => $db->getSetting('login_features', ''), - 'login_footer' => $db->getSetting('login_footer', ''), - 'login_bg_image' => $db->getSetting('login_bg_image', ''), - 'login_bg_from' => $db->getSetting('login_bg_from', '#3b2f8f'), - 'login_bg_to' => $db->getSetting('login_bg_to', '#6d5ce7'), - 'login_bg_overlay' => $db->getSetting('login_bg_overlay', '40'), 'cron_token' => $db->getSetting('cron_token', ''), 'last_cron_sync' => $db->getSetting('last_cron_sync', ''), ]; @@ -233,18 +207,54 @@ $adminBase = ''; - - - + + + +
-
-

-

-
+

+

@@ -258,7 +268,6 @@ $adminBase = '';
- @@ -322,92 +331,6 @@ $adminBase = '';
- -
-

-

-
- - - -
- > - -
- -
-
- - -
-
-
- - -
-
-
- -
- -
- - -
-
- - -
-
- - -
-
-
- - -
- -
- -
- - -
-
-
-
- -
- - -
-
-
- -
- - -
-
-
- - -
-
-
- -
- - - - -
-
-
-

@@ -563,7 +486,7 @@ $adminBase = '';
- +
diff --git a/admin/sites.php b/admin/sites.php index caf0d2c..83c37e8 100644 --- a/admin/sites.php +++ b/admin/sites.php @@ -101,6 +101,50 @@ $currentPage = 'sites'; <?= __('sites_title') ?> – <?= htmlspecialchars($appTitle) ?> +

@@ -166,7 +210,7 @@ $currentPage = 'sites'; @@ -176,7 +220,7 @@ $currentPage = 'sites';
- +
- +
- +
@@ -198,7 +258,7 @@ $currentPage = 'vouchers';
- +
@@ -344,7 +404,7 @@ function renderVouchers() { ${remaining?` ${remaining}
`:''}${v.duration} Min. - + `; }); diff --git a/assets/global.css b/assets/global.css index d54c3e2..27e408f 100644 --- a/assets/global.css +++ b/assets/global.css @@ -1,1542 +1,471 @@ -/* ========================================================================= - Unifi Voucher Tool – Design System - Ein einziges Stylesheet fuer Frontend, Login und Admin-Backend. - Aufbau: Tokens -> Base -> Layout -> Komponenten -> Seiten -> Responsive - ========================================================================= */ - -/* ========================================================================= - 1. TOKENS - ========================================================================= */ +/* === DARK MODE CSS VARIABLES === */ :root { - /* Flaechen */ - --bg-body: #f6f7f9; - --bg-canvas: #f6f7f9; - --bg-card: #ffffff; - --bg-header: rgba(255,255,255,0.82); - --bg-sidebar: #ffffff; - --bg-hover: #f2f4f7; - --bg-subtle: #f8f9fb; - --bg-input: #ffffff; - --bg-table-head: #f8f9fb; - --bg-overlay: rgba(15,20,30,0.45); - --modal-overlay: rgba(15,20,30,0.45); - --toast-bg: #ffffff; - --code-bg: #f2f4f7; - --stat-sub: #f2f4f7; - - /* Text */ - --text-primary: #101625; - --text-secondary: #525c6e; - --text-muted: #8a93a3; - --text-inverse: #ffffff; - - /* Linien */ - --border-color: #e5e8ee; - --border-strong: #d4d9e2; - --border-hover: #c3c9d6; - --input-border: #dfe3ea; - --input-focus: #5b5bd6; - - /* Marke */ - --accent: #5b5bd6; - --accent-hover: #4a4ac2; - --accent-soft: #eeeefc; - --accent-border: #d7d7f7; - --accent-2: #8b5cf6; - --brand-gradient: linear-gradient(135deg, #5b5bd6 0%, #8b5cf6 100%); - - /* Status */ - --success: #15884b; - --success-soft: #e7f6ed; - --success-border: #bfe6ce; - --warning: #b96a05; - --warning-soft: #fdf2e2; - --warning-border: #f5dcb2; - --danger: #d02f3c; - --danger-soft: #fdecee; - --danger-border: #f6cfd4; - --info: #0d7ec4; - --info-soft: #e6f3fc; - --info-border: #bfdff5; - --bg-badge-info: #e6f3fc; - --text-badge-info:#0d5e91; - - /* Radien */ - --r-xs: 6px; - --r-sm: 8px; - --r-md: 10px; - --r-lg: 14px; - --r-xl: 20px; - --r-pill: 999px; - - /* Schatten */ - --shadow: rgba(16,24,40,0.06); - --shadow-lg: rgba(16,24,40,0.16); - --shadow-xs: 0 1px 2px rgba(16,24,40,0.05); - --shadow-sm: 0 1px 3px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04); - --shadow-md: 0 6px 16px -4px rgba(16,24,40,0.10), 0 2px 6px -2px rgba(16,24,40,0.05); - --shadow-xl: 0 28px 60px -24px rgba(16,24,40,0.28), 0 8px 24px -12px rgba(16,24,40,0.12); - --ring: 0 0 0 4px rgba(91,91,214,0.16); - - /* Layout */ - --sidebar-w: 264px; - --topbar-h: 64px; - - --scrollbar-track: transparent; - --scrollbar-thumb: #d3d8e0; - - --font-sans: 'Inter', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; - --font-mono: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace; + --bg-body: #f5f7fa; + --bg-card: #ffffff; + --bg-header: #ffffff; + --bg-sidebar: #ffffff; + --bg-hover: #f8f9fa; + --bg-input: #ffffff; + --bg-table-head: #f8f9fa; + --bg-badge-info: #d1ecf1; + --text-primary: #333333; + --text-secondary: #666666; + --text-muted: #999999; + --text-badge-info: #0c5460; + --border-color: #e0e0e0; + --border-hover: #667eea; + --shadow: rgba(0,0,0,0.05); + --shadow-lg: rgba(0,0,0,0.3); + --accent: #667eea; + --accent-hover: #5568d3; + --danger: #dc3545; + --success: #28a745; + --warning: #ffc107; + --code-bg: #f8f9fa; + --input-border: #e0e0e0; + --input-focus: #667eea; + --modal-overlay: rgba(0,0,0,0.5); + --scrollbar-track: #f1f1f1; + --scrollbar-thumb: #c1c1c1; + --toast-bg: #ffffff; + --stat-sub: #f0f0f0; } [data-theme="dark"] { - --bg-body: #0a0c11; - --bg-canvas: #0a0c11; - --bg-card: #12151d; - --bg-header: rgba(18,21,29,0.82); - --bg-sidebar: #0f121a; - --bg-hover: #1a1f2b; - --bg-subtle: #151925; - --bg-input: #171b26; - --bg-table-head: #151925; - --bg-overlay: rgba(3,5,10,0.66); - --modal-overlay: rgba(3,5,10,0.66); - --toast-bg: #151925; - --code-bg: #1a1f2b; - --stat-sub: #1a1f2b; - - --text-primary: #e9ecf3; - --text-secondary: #a2abbd; - --text-muted: #6f7889; - --text-inverse: #0a0c11; - - --border-color: #232838; - --border-strong: #303750; - --border-hover: #3b4360; - --input-border: #2a3044; - --input-focus: #8b8bf5; - - --accent: #8b8bf5; - --accent-hover: #a3a3fa; - --accent-soft: #1e2038; - --accent-border: #34356a; - --accent-2: #a78bfa; - --brand-gradient: linear-gradient(135deg, #6d6df0 0%, #a78bfa 100%); - - --success: #4ade80; - --success-soft: #0f2a1c; - --success-border: #1d4d33; - --warning: #fbbf24; - --warning-soft: #2a2010; - --warning-border: #4d3c14; - --danger: #f87171; - --danger-soft: #2c1417; - --danger-border: #58252b; - --info: #60b8f0; - --info-soft: #0e2534; - --info-border: #1d4661; - --bg-badge-info: #0e2534; - --text-badge-info:#7dc8f0; - - --shadow: rgba(0,0,0,0.4); - --shadow-lg: rgba(0,0,0,0.6); - --shadow-xs: 0 1px 2px rgba(0,0,0,0.4); - --shadow-sm: 0 1px 3px rgba(0,0,0,0.45); - --shadow-md: 0 8px 20px -6px rgba(0,0,0,0.55); - --shadow-xl: 0 30px 60px -20px rgba(0,0,0,0.75); - --ring: 0 0 0 4px rgba(139,139,245,0.22); - - --scrollbar-thumb: #2c3346; + --bg-body: #0f1117; + --bg-card: #1a1d27; + --bg-header: #1a1d27; + --bg-sidebar: #1a1d27; + --bg-hover: #22273a; + --bg-input: #22273a; + --bg-table-head: #22273a; + --bg-badge-info: #0c3d47; + --text-primary: #e8eaf0; + --text-secondary: #a0a8b8; + --text-muted: #6b7280; + --text-badge-info: #7dd3eb; + --border-color: #2e3347; + --border-hover: #667eea; + --shadow: rgba(0,0,0,0.3); + --shadow-lg: rgba(0,0,0,0.6); + --accent: #7c8ff5; + --accent-hover: #667eea; + --danger: #ef4444; + --success: #22c55e; + --warning: #f59e0b; + --code-bg: #22273a; + --input-border: #2e3347; + --input-focus: #7c8ff5; + --modal-overlay: rgba(0,0,0,0.7); + --scrollbar-track: #1a1d27; + --scrollbar-thumb: #3a3f5a; + --toast-bg: #1a1d27; + --stat-sub: #22273a; } -/* ========================================================================= - 2. BASE - ========================================================================= */ -*, *::before, *::after { box-sizing: border-box; } - -html { -webkit-text-size-adjust: 100%; } - -body { - margin: 0; - font-family: var(--font-sans); - font-size: 14px; - line-height: 1.55; - color: var(--text-primary); +/* === DARK MODE OVERRIDES FOR COMMON ELEMENTS === */ +[data-theme="dark"] body { background: var(--bg-body); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-feature-settings: 'cv02','cv03','cv04','ss01'; -} - -h1, h2, h3, h4, h5 { - margin: 0; - color: var(--text-primary); - font-weight: 650; - letter-spacing: -0.018em; - line-height: 1.25; -} -h1 { font-size: 26px; } -h2 { font-size: 18px; } -h3 { font-size: 16px; } -p { margin: 0 0 12px; } -p:last-child { margin-bottom: 0; } - -a { color: var(--accent); text-decoration: none; } -a:hover { color: var(--accent-hover); } - -code, pre, kbd, .mono { - font-family: var(--font-mono); - font-size: 0.92em; -} -code { - background: var(--code-bg); - color: var(--text-primary); - padding: 2px 6px; - border-radius: var(--r-xs); - border: 1px solid var(--border-color); -} - -hr, .section-divider { - border: none; - border-top: 1px solid var(--border-color); - margin: 24px 0; -} - -.muted { color: var(--text-muted); font-size: 13px; } -.text-sm { font-size: 13px; } -.text-xs { font-size: 12px; } -.hide-mobile { } - -::selection { background: var(--accent-soft); color: var(--accent-hover); } - -::-webkit-scrollbar { width: 10px; height: 10px; } -::-webkit-scrollbar-track { background: var(--scrollbar-track); } -::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--r-pill); border: 3px solid transparent; background-clip: content-box; } -::-webkit-scrollbar-thumb:hover { background: var(--border-hover); background-clip: content-box; } - -:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } - -/* ========================================================================= - 3. APP-LAYOUT (Admin) - ========================================================================= */ -.sidebar { - position: fixed; - inset: 0 auto 0 0; - width: var(--sidebar-w); - background: var(--bg-sidebar); - border-right: 1px solid var(--border-color); - display: flex; - flex-direction: column; - z-index: 200; -} - -.sidebar-brand { - display: flex; - align-items: center; - gap: 11px; - height: var(--topbar-h); - padding: 0 20px; - flex-shrink: 0; - border-bottom: 1px solid var(--border-color); color: var(--text-primary); } -.sidebar-brand:hover { color: var(--text-primary); } -.brand-mark { - width: 32px; height: 32px; - border-radius: 9px; - background: var(--brand-gradient); - color: #fff; - display: flex; align-items: center; justify-content: center; - font-size: 14px; - box-shadow: 0 4px 10px -2px rgba(91,91,214,0.5); - flex-shrink: 0; -} -.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } -.brand-name { - font-size: 14px; font-weight: 650; letter-spacing: -0.01em; - white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -} -.brand-sub { font-size: 11px; color: var(--text-muted); font-weight: 500; } -.sidebar nav { flex: 1; overflow-y: auto; padding: 14px 12px 20px; } - -.sidebar-section { - padding: 14px 10px 6px; - font-size: 11px; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.07em; - color: var(--text-muted); -} -.sidebar-nav { list-style: none; margin: 0; padding: 0; } -.sidebar-nav li { margin-bottom: 2px; } -.sidebar-nav a { - position: relative; - display: flex; - align-items: center; - gap: 11px; - padding: 9px 12px; - border-radius: var(--r-md); - color: var(--text-secondary); - font-size: 13.5px; - font-weight: 500; - transition: background-color .15s, color .15s; -} -.sidebar-nav a i { width: 17px; text-align: center; font-size: 14px; color: var(--text-muted); transition: color .15s; } -.sidebar-nav a:hover { background: var(--bg-hover); color: var(--text-primary); } -.sidebar-nav a:hover i { color: var(--text-secondary); } -.sidebar-nav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } -.sidebar-nav a.active i { color: var(--accent); } -.nav-badge { - margin-left: auto; - font-size: 11px; font-weight: 600; - padding: 1px 7px; border-radius: var(--r-pill); - background: var(--bg-hover); color: var(--text-muted); -} -.sidebar-nav a.active .nav-badge { background: var(--accent); color: #fff; } - -.sidebar-foot { - flex-shrink: 0; - border-top: 1px solid var(--border-color); - padding: 12px; +[data-theme="dark"] .header { + background: var(--bg-header) !important; + border-color: var(--border-color) !important; } -.topbar, .header { - position: fixed; - top: 0; right: 0; left: var(--sidebar-w); - height: var(--topbar-h); - display: flex; - align-items: center; - justify-content: space-between; - gap: 16px; - padding: 0 26px; - background: var(--bg-header); - backdrop-filter: saturate(180%) blur(12px); - -webkit-backdrop-filter: saturate(180%) blur(12px); - border-bottom: 1px solid var(--border-color); - z-index: 150; +[data-theme="dark"] .sidebar { + background: var(--bg-sidebar) !important; + border-color: var(--border-color) !important; } -.header-left { display: flex; align-items: center; gap: 12px; min-width: 0; } -.header-right { display: flex; align-items: center; gap: 8px; } -.header-title { font-size: 15px; font-weight: 600; color: var(--text-primary); } -.breadcrumb { - display: flex; align-items: center; gap: 8px; - font-size: 13px; color: var(--text-muted); - white-space: nowrap; overflow: hidden; text-overflow: ellipsis; +[data-theme="dark"] .sidebar-nav a { + color: var(--text-secondary) !important; } -.breadcrumb .sep { opacity: .5; } -.breadcrumb .current { color: var(--text-primary); font-weight: 600; } -.main-content { - margin-left: var(--sidebar-w); - padding: calc(var(--topbar-h) + 26px) 26px 48px; - min-height: 100vh; +[data-theme="dark"] .sidebar-nav a:hover, +[data-theme="dark"] .sidebar-nav a.active { + background: var(--bg-hover) !important; + color: var(--accent) !important; } -.main-content > *:not(.page-header):not(script):not(style) { max-width: 1440px; } -.page-header { - display: flex; - align-items: flex-end; - justify-content: space-between; - flex-wrap: wrap; - gap: 16px; - margin-bottom: 24px; +[data-theme="dark"] .card, +[data-theme="dark"] .stat-card, +[data-theme="dark"] .site-status-card, +[data-theme="dark"] .site-card { + background: var(--bg-card) !important; + border-color: var(--border-color) !important; } -.page-title { - display: flex; - align-items: center; - gap: 10px; - font-size: 24px; - font-weight: 680; - letter-spacing: -0.022em; - color: var(--text-primary); - margin: 0; -} -.page-subtitle { color: var(--text-muted); font-size: 13.5px; margin: 5px 0 0; } -.page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } -/* Benutzer-Chip */ -.user-menu { - display: flex; align-items: center; gap: 10px; - padding: 5px 12px 5px 5px; - border: 1px solid var(--border-color); - border-radius: var(--r-pill); - background: var(--bg-card); - transition: border-color .15s, background-color .15s; +[data-theme="dark"] .card-header, +[data-theme="dark"] .modal-header { + border-color: var(--border-color) !important; } -.user-menu:hover { border-color: var(--border-hover); } -.user-avatar, .user-avatar-sm { - width: 30px; height: 30px; - border-radius: 50%; - background: var(--brand-gradient); - color: #fff; - display: flex; align-items: center; justify-content: center; - font-weight: 600; font-size: 12.5px; - flex-shrink: 0; - letter-spacing: 0; -} -.user-avatar-sm { width: 32px; height: 32px; font-size: 13px; } -.user-name { font-size: 13px; font-weight: 550; color: var(--text-primary); } -.user-role { font-size: 11px; color: var(--text-muted); } -/* Icon-Buttons im Topbar */ -.dark-mode-toggle, .mobile-menu-btn, .icon-btn { - width: 36px; height: 36px; - display: flex; align-items: center; justify-content: center; - border: 1px solid var(--border-color); - border-radius: var(--r-md); - background: var(--bg-card); - color: var(--text-secondary); - font-size: 14px; +[data-theme="dark"] .card-title, +[data-theme="dark"] .page-title, +[data-theme="dark"] .modal-title, +[data-theme="dark"] .stat-card-value, +[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 { + color: var(--text-primary) !important; +} + +[data-theme="dark"] .page-subtitle, +[data-theme="dark"] .stat-card-title, +[data-theme="dark"] .stat-card-sub, +[data-theme="dark"] label { + color: var(--text-secondary) !important; +} + +[data-theme="dark"] .table th { + background: var(--bg-table-head) !important; + color: var(--text-secondary) !important; +} + +[data-theme="dark"] .table td { + color: var(--text-primary) !important; + border-color: var(--border-color) !important; +} + +[data-theme="dark"] .table tr:hover { + background: var(--bg-hover) !important; +} + +[data-theme="dark"] input[type="text"], +[data-theme="dark"] input[type="email"], +[data-theme="dark"] input[type="password"], +[data-theme="dark"] input[type="number"], +[data-theme="dark"] input[type="url"], +[data-theme="dark"] select, +[data-theme="dark"] textarea { + background: var(--bg-input) !important; + border-color: var(--input-border) !important; + color: var(--text-primary) !important; +} + +[data-theme="dark"] input::placeholder, +[data-theme="dark"] textarea::placeholder { + color: var(--text-muted) !important; +} + +[data-theme="dark"] input:focus, +[data-theme="dark"] select:focus, +[data-theme="dark"] textarea:focus { + border-color: var(--input-focus) !important; +} + +[data-theme="dark"] .btn-secondary { + background: var(--bg-hover) !important; + color: var(--text-secondary) !important; + border-color: var(--border-color) !important; +} + +[data-theme="dark"] .btn-secondary:hover { + background: var(--border-color) !important; + color: var(--text-primary) !important; +} + +[data-theme="dark"] code { + background: var(--code-bg) !important; + color: var(--accent) !important; +} + +[data-theme="dark"] .modal-content { + background: var(--bg-card) !important; +} + +[data-theme="dark"] .badge-info { + background: var(--bg-badge-info) !important; + color: var(--text-badge-info) !important; +} + +[data-theme="dark"] .stat-card-icon { + filter: brightness(0.8); +} + +[data-theme="dark"] .info-box { + background: #0c2340 !important; + border-color: #1a4a7a !important; +} + +[data-theme="dark"] .info-box h4 { color: #60a5fa !important; } +[data-theme="dark"] .info-box p { color: #93c5fd !important; } + +[data-theme="dark"] .placeholder-info { + background: #1a1500 !important; + border-color: #44390a !important; +} + +[data-theme="dark"] .placeholder-info h4 { color: #d4a017 !important; } +[data-theme="dark"] .placeholder-info code { background: #2a2000 !important; } + +[data-theme="dark"] .alert-error { + background: #2d0a0a !important; + border-color: #7f1d1d !important; + color: #fca5a5 !important; +} + +[data-theme="dark"] .alert-success { + background: #052e16 !important; + border-color: #14532d !important; + color: #86efac !important; +} + +[data-theme="dark"] .user-menu { + background: var(--bg-hover) !important; +} + +[data-theme="dark"] .filter-btn { + background: var(--bg-card) !important; + border-color: var(--border-color) !important; + color: var(--text-primary) !important; +} + +[data-theme="dark"] .filter-btn.active { + background: var(--accent) !important; + border-color: var(--accent) !important; + color: white !important; +} + +[data-theme="dark"] .tab-navigation { + background: var(--bg-table-head) !important; + border-color: var(--border-color) !important; +} + +[data-theme="dark"] .tab-button { + color: var(--text-secondary) !important; +} + +[data-theme="dark"] .tab-button.active { + background: var(--bg-card) !important; + color: var(--accent) !important; +} + +[data-theme="dark"] .section-divider { + border-color: var(--border-color) !important; +} + +[data-theme="dark"] .site-stat { + background: var(--bg-hover) !important; +} + +[data-theme="dark"] .live-badge { + background: #052e16 !important; + color: #86efac !important; +} + +[data-theme="dark"] .live-badge.loading { + background: #1a0e00 !important; + color: #fcd34d !important; +} + +[data-theme="dark"] .live-badge.error { + background: #2d0a0a !important; + color: #fca5a5 !important; +} + +/* === DARK MODE TOGGLE BUTTON === */ +.dark-mode-toggle { + background: none; + border: 2px solid var(--border-color); + border-radius: 8px; + width: 38px; + height: 38px; cursor: pointer; - transition: all .15s; + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + transition: all 0.2s; + color: var(--text-secondary); flex-shrink: 0; - padding: 0; } -.dark-mode-toggle:hover, .mobile-menu-btn:hover, .icon-btn:hover { +.dark-mode-toggle:hover { + border-color: var(--accent); + color: var(--accent); background: var(--bg-hover); - color: var(--text-primary); - border-color: var(--border-hover); } -.mobile-menu-btn { display: none; } -/* Sprachumschalter */ +/* === LANGUAGE SWITCHER === */ .lang-switcher { - display: flex; align-items: center; gap: 2px; - padding: 3px; + display: flex; + align-items: center; + gap: 4px; background: var(--bg-hover); border: 1px solid var(--border-color); - border-radius: var(--r-md); + border-radius: 8px; + padding: 4px; flex-shrink: 0; } .lang-btn { - padding: 4px 9px; + padding: 4px 8px; border: none; background: none; - border-radius: var(--r-xs); - font: inherit; - font-size: 11.5px; - font-weight: 650; - letter-spacing: .02em; - color: var(--text-muted); + border-radius: 5px; cursor: pointer; - transition: all .15s; + font-size: 12px; + font-weight: 600; + color: var(--text-muted); + transition: all 0.2s; +} +.lang-btn.active { + background: var(--accent); + color: white; +} +.lang-btn:hover:not(.active) { + color: var(--accent); +} + +/* === TOAST NOTIFICATIONS === */ +#toast-container { + position: fixed; + bottom: 30px; + right: 30px; + z-index: 9999; + display: flex; + flex-direction: column; + gap: 10px; + pointer-events: none; +} +.toast { + background: var(--toast-bg); + padding: 14px 20px; + border-radius: 12px; + box-shadow: 0 10px 40px var(--shadow-lg); + display: flex; + align-items: center; + gap: 12px; + min-width: 300px; + max-width: 400px; + transform: translateX(120%); + transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); + pointer-events: all; + border: 1px solid var(--border-color); +} +.toast.show { transform: translateX(0); } +.toast.success { border-left: 4px solid var(--success); } +.toast.error { border-left: 4px solid var(--danger); } +.toast.info { border-left: 4px solid var(--accent); } +.toast.warning { border-left: 4px solid var(--warning); } +.toast-icon { font-size: 18px; flex-shrink: 0; } +.toast.success .toast-icon { color: var(--success); } +.toast.error .toast-icon { color: var(--danger); } +.toast.info .toast-icon { color: var(--accent); } +.toast.warning .toast-icon { color: var(--warning); } +.toast-body { flex: 1; } +.toast-title { font-weight: 600; font-size: 14px; color: var(--text-primary); } +.toast-msg { font-size: 13px; color: var(--text-secondary); margin-top: 2px; } +.toast-close { + background: none; border: none; cursor: pointer; + color: var(--text-muted); font-size: 18px; padding: 0; line-height: 1; + transition: color 0.2s; +} +.toast-close:hover { color: var(--text-primary); } + +/* === MOBILE RESPONSIVE === */ +.mobile-menu-btn { + display: none; + background: none; + border: 2px solid var(--border-color); + border-radius: 8px; + width: 38px; + height: 38px; + cursor: pointer; + align-items: center; + justify-content: center; + font-size: 16px; + color: var(--text-secondary); + transition: all 0.2s; + flex-shrink: 0; +} +.mobile-menu-btn:hover { + border-color: var(--accent); + color: var(--accent); } -.lang-btn.active { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-xs); } -.lang-btn:hover:not(.active) { color: var(--text-secondary); } .sidebar-overlay { display: none; - position: fixed; inset: 0; - background: var(--bg-overlay); - backdrop-filter: blur(2px); + position: fixed; + top: 0; left: 0; right: 0; bottom: 0; + background: rgba(0,0,0,0.5); z-index: 199; } .sidebar-overlay.active { display: block; } -/* ========================================================================= - 4. KOMPONENTEN – Buttons - ========================================================================= */ -.btn, .btn-header, .btn-microsoft { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 8px; - padding: 9px 16px; - border: 1px solid transparent; - border-radius: var(--r-md); - font-family: inherit; - font-size: 13.5px; - font-weight: 570; - line-height: 1.2; - white-space: nowrap; - cursor: pointer; - text-decoration: none; - transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s; - background: var(--bg-card); - color: var(--text-primary); - border-color: var(--border-color); -} -.btn:active { transform: translateY(0.5px); } -.btn i { font-size: 12.5px; } - -.btn-primary { - background: var(--accent); - border-color: var(--accent); - color: #fff; - box-shadow: 0 1px 2px rgba(16,24,40,0.10); -} -.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; } -.btn-primary:focus-visible { box-shadow: var(--ring); outline: none; } - -.btn-secondary { - background: var(--bg-card); - border-color: var(--border-color); - color: var(--text-secondary); -} -.btn-secondary:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-hover); } - -.btn-ghost, .btn-s { - background: var(--bg-hover); - border-color: transparent; - color: var(--text-secondary); -} -.btn-ghost:hover, .btn-s:hover { background: var(--border-color); color: var(--text-primary); } - -.btn-success { background: var(--success); border-color: var(--success); color: #fff; } -.btn-success:hover { filter: brightness(1.06); color: #fff; } -.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; } -.btn-danger:hover { filter: brightness(1.06); color: #fff; } -/* Zurueckhaltende Variante fuer Zeilenaktionen in Tabellen */ -.btn-danger-soft { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); } -.btn-danger-soft:hover { background: var(--danger); border-color: var(--danger); color: #fff; } -.btn-warning { background: var(--warning); border-color: var(--warning); color: #fff; } - -.btn-outline { - background: transparent; - border-color: var(--accent-border); - color: var(--accent); -} -.btn-outline:hover { background: var(--accent-soft); color: var(--accent-hover); } - -.btn-sm, .btn-small { padding: 6px 11px; font-size: 12.5px; border-radius: var(--r-sm); } -.btn-lg { padding: 13px 22px; font-size: 15px; border-radius: var(--r-md); } -.btn-block { width: 100%; } -.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; } - -/* Marken-Button im oeffentlichen Header */ -.btn-header { - background: var(--bg-card); - border-color: var(--border-color); - color: var(--text-primary); - box-shadow: var(--shadow-xs); -} -.btn-header:hover { background: var(--bg-hover); color: var(--text-primary); } - -/* ========================================================================= - 5. KOMPONENTEN – Formulare - ========================================================================= */ -label { - display: block; - margin-bottom: 6px; - font-size: 13px; - font-weight: 550; - color: var(--text-secondary); -} -.form-group { margin-bottom: 18px; } -.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } -.form-hint, .template-hint, .copy-hint, .field-hint { - margin-top: 6px; - font-size: 12px; - color: var(--text-muted); -} - -input[type="text"], input[type="email"], input[type="password"], input[type="number"], -input[type="url"], input[type="tel"], input[type="search"], input[type="date"], -select, textarea, .input { - width: 100%; - padding: 10px 13px; - font-family: inherit; - font-size: 14px; - color: var(--text-primary); - background: var(--bg-input); - border: 1px solid var(--input-border); - border-radius: var(--r-md); - transition: border-color .15s, box-shadow .15s, background-color .15s; - appearance: none; -} -textarea { min-height: 110px; resize: vertical; line-height: 1.6; } -select { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%238a93a3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: right 12px center; - padding-right: 34px; -} -input::placeholder, textarea::placeholder { color: var(--text-muted); } -input:hover, select:hover, textarea:hover { border-color: var(--border-hover); } -input:focus, select:focus, textarea:focus, .input:focus { - outline: none; - border-color: var(--input-focus); - box-shadow: var(--ring); -} -input:disabled, select:disabled, textarea:disabled { background: var(--bg-hover); color: var(--text-muted); cursor: not-allowed; } -input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; } -input[type="file"] { font-size: 13px; color: var(--text-secondary); } - -.chk, label.chk { - display: flex; align-items: center; gap: 10px; - margin: 10px 0; - font-size: 13.5px; font-weight: 500; - color: var(--text-primary); - cursor: pointer; -} -.chk input { flex-shrink: 0; } - -.filter-bar, .filter-row, .toolbar { - display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; -} -.filter-bar select, .filter-bar input, .toolbar select, .toolbar input { width: auto; min-width: 150px; } - -.filter-btn { - padding: 7px 13px; - border: 1px solid var(--border-color); - border-radius: var(--r-pill); - background: var(--bg-card); - color: var(--text-secondary); - font-size: 12.5px; font-weight: 550; - cursor: pointer; - transition: all .15s; -} -.filter-btn:hover { border-color: var(--border-hover); color: var(--text-primary); } -.filter-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; } - -/* ========================================================================= - 6. KOMPONENTEN – Cards - ========================================================================= */ -.card { - background: var(--bg-card); - border: 1px solid var(--border-color); - border-radius: var(--r-lg); - box-shadow: var(--shadow-sm); - margin-bottom: 22px; - padding: 22px; -} -.card:has(> .card-header), .card:has(> .card-body) { padding: 0; overflow: hidden; } -.card > h2, .card > h3 { font-size: 15.5px; font-weight: 620; margin-bottom: 14px; } -.card-header { - display: flex; align-items: center; justify-content: space-between; - flex-wrap: wrap; gap: 12px; - padding: 16px 22px; - border-bottom: 1px solid var(--border-color); -} -.card-title { font-size: 15px; font-weight: 620; color: var(--text-primary); margin: 0; } -.card-subtitle { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; } -.card-body { padding: 22px; } -.card-footer { padding: 14px 22px; border-top: 1px solid var(--border-color); background: var(--bg-subtle); } -.card-actions { display: flex; gap: 8px; align-items: center; } - -.info-box, .placeholder-info { - border: 1px solid var(--info-border); - background: var(--info-soft); - border-radius: var(--r-md); - padding: 14px 16px; - margin-bottom: 18px; -} -.info-box h4 { color: var(--info); font-size: 13px; margin-bottom: 4px; } -.info-box p { color: var(--text-secondary); font-size: 13px; } -.placeholder-info { border-color: var(--warning-border); background: var(--warning-soft); } -.placeholder-info h4 { color: var(--warning); font-size: 13px; margin-bottom: 4px; } - -/* ========================================================================= - 7. KOMPONENTEN – Statistik-Kacheln - ========================================================================= */ -.stats-grid, .grid4 { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); - gap: 16px; - margin-bottom: 24px; -} -.stat-card, .stat { - position: relative; - background: var(--bg-card); - border: 1px solid var(--border-color); - border-radius: var(--r-lg); - box-shadow: var(--shadow-sm); - padding: 18px; - transition: border-color .15s, box-shadow .15s, transform .15s; -} -.stat-card:hover, .stat:hover { border-color: var(--border-hover); box-shadow: var(--shadow-md); } -.stat-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } -.stat-card-title { font-size: 12.5px; font-weight: 550; color: var(--text-muted); } -.stat-card-icon { - width: 32px; height: 32px; - border-radius: var(--r-sm); - display: flex; align-items: center; justify-content: center; - font-size: 13px; - background: var(--bg-hover); - color: var(--text-secondary); -} -.stat-card-icon.accent { background: var(--accent-soft); color: var(--accent); } -.stat-card-icon.success { background: var(--success-soft); color: var(--success); } -.stat-card-icon.warning { background: var(--warning-soft); color: var(--warning); } -.stat-card-icon.danger { background: var(--danger-soft); color: var(--danger); } -.stat-card-icon.info { background: var(--info-soft); color: var(--info); } -.stat-card-value, .stat .n { - font-size: 28px; - font-weight: 660; - letter-spacing: -0.03em; - color: var(--text-primary); - line-height: 1.1; - font-variant-numeric: tabular-nums; -} -/* Farbe traegt das Icon-Chip – die Zahl bleibt ruhig. */ -.stat-card-value.valid, .stat-card-value.used, .stat-card-value.expired { color: var(--text-primary); } -.stat-card-sub, .stat .l { margin-top: 5px; font-size: 12px; color: var(--text-muted); } - -/* ========================================================================= - 8. KOMPONENTEN – Tabellen - ========================================================================= */ -.table, .card table, .table-container table { - width: 100%; - border-collapse: collapse; - font-size: 13.5px; -} -.table th, .card table th { - padding: 10px 18px; - text-align: left; - background: var(--bg-table-head); - color: var(--text-muted); - font-size: 11.5px; - font-weight: 620; - text-transform: uppercase; - letter-spacing: 0.055em; - border-bottom: 1px solid var(--border-color); - white-space: nowrap; -} -.table code, .card table code { white-space: nowrap; } -.table td, .card table td { - padding: 13px 18px; - border-bottom: 1px solid var(--border-color); - color: var(--text-primary); - vertical-align: middle; -} -.card:not(:has(> .card-header)):not(:has(> .card-body)) table { font-size: 13px; } -.card:not(:has(> .card-header)):not(:has(> .card-body)) table th, -.card:not(:has(> .card-header)):not(:has(> .card-body)) table td { padding-left: 0; padding-right: 10px; } -.card:not(:has(> .card-header)):not(:has(> .card-body)) table th:last-child, -.card:not(:has(> .card-header)):not(:has(> .card-body)) table td:last-child { padding-right: 0; } -.card:not(:has(> .card-header)):not(:has(> .card-body)) table th { background: transparent; } -.table tbody tr:last-child td, .card table tbody tr:last-child td { border-bottom: none; } -.table tbody tr { transition: background-color .12s; } -.table tbody tr:hover td { background: var(--bg-subtle); } -.table-container { overflow-x: auto; } -.ip-cell { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); } -.details-cell { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); } - -/* ========================================================================= - 9. KOMPONENTEN – Badges, Chips, Alerts - ========================================================================= */ -.badge { - display: inline-flex; align-items: center; gap: 5px; - white-space: nowrap; - padding: 3px 9px; - border-radius: var(--r-pill); - font-size: 11.5px; - font-weight: 600; - line-height: 1.5; - border: 1px solid transparent; -} -.badge::before { - content: ''; - width: 5px; height: 5px; border-radius: 50%; - background: currentColor; - flex-shrink: 0; -} -/* Badges mit eigenem Icon brauchen keinen zusaetzlichen Punkt. */ -.badge:has(i)::before, .badge:has(svg)::before { display: none; } -.badge-success, .b-on { background: var(--success-soft); color: var(--success); border-color: var(--success-border); } -.badge-warning { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-border); } -.badge-danger, .b-off { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); } -.badge-info { background: var(--info-soft); color: var(--text-badge-info); border-color: var(--info-border); } -.badge-neutral { background: var(--bg-hover); color: var(--text-secondary); border-color: var(--border-color); } -.b-on, .b-off { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; } - -.chip, .action-chip { - display: inline-flex; align-items: center; gap: 6px; - padding: 3px 10px; - border-radius: var(--r-pill); - background: var(--bg-hover); - border: 1px solid var(--border-color); - color: var(--text-secondary); - font-size: 12px; font-weight: 550; - white-space: nowrap; -} - -.alert { - display: flex; align-items: flex-start; gap: 10px; - padding: 12px 15px; - margin-bottom: 20px; - border: 1px solid var(--border-color); - border-radius: var(--r-md); - font-size: 13.5px; - background: var(--bg-card); - color: var(--text-primary); -} -.alert-error, .alert-danger { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); } -.alert-success, .alert-ok { background: var(--success-soft); border-color: var(--success-border); color: var(--success); } -.alert-warning { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning); } -.alert-info { background: var(--info-soft); border-color: var(--info-border); color: var(--info); } - -.empty-state { - text-align: center; - padding: 54px 20px; - color: var(--text-muted); -} -.empty-state i, .empty-state .empty-icon { - display: flex; align-items: center; justify-content: center; - width: 52px; height: 52px; - margin: 0 auto 14px; - border-radius: var(--r-lg); - background: var(--bg-hover); - color: var(--text-muted); - font-size: 20px; - opacity: 1; -} -.empty-state p { font-size: 13.5px; margin: 0; } -.empty-state h3 { font-size: 15px; margin-bottom: 6px; color: var(--text-secondary); } - -/* Tabs / Segmented control */ -.tab-navigation, .mode-tabs, .segmented { - display: inline-flex; - gap: 3px; - padding: 3px; - background: var(--bg-hover); - border: 1px solid var(--border-color); - border-radius: var(--r-md); - margin-bottom: 20px; -} -.tab-button, .mode-tab, .segmented > button { - flex: 1; - padding: 7px 16px; - border: none; - border-radius: var(--r-sm); - background: transparent; - color: var(--text-secondary); - font-family: inherit; - font-size: 13px; - font-weight: 550; - cursor: pointer; - transition: all .15s; - white-space: nowrap; -} -.tab-button:hover, .mode-tab:hover { color: var(--text-primary); } -.tab-button.active, .mode-tab.active, .segmented > button.active { - background: var(--bg-card); - color: var(--text-primary); - box-shadow: var(--shadow-xs); - font-weight: 600; -} -.mode-tabs { display: flex; width: 100%; } - -/* Pagination */ -.pagination { - display: flex; align-items: center; justify-content: space-between; - flex-wrap: wrap; gap: 12px; - padding: 14px 22px; - border-top: 1px solid var(--border-color); -} -.page-info { font-size: 12.5px; color: var(--text-muted); } -.page-btns { display: flex; gap: 4px; flex-wrap: wrap; } -.page-btn { - min-width: 32px; - padding: 6px 10px; - border: 1px solid var(--border-color); - border-radius: var(--r-sm); - background: var(--bg-card); - color: var(--text-secondary); - font-size: 12.5px; font-weight: 550; - text-align: center; - cursor: pointer; - transition: all .15s; -} -.page-btn:hover { border-color: var(--border-hover); color: var(--text-primary); background: var(--bg-hover); } -.page-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; } -.page-btn:disabled { opacity: .45; cursor: not-allowed; } - -/* Modal */ -.modal { - display: none; - position: fixed; inset: 0; - background: var(--modal-overlay); - backdrop-filter: blur(3px); - z-index: 500; - padding: 24px; - overflow-y: auto; -} -.modal.show, .modal.active { display: flex; align-items: flex-start; justify-content: center; } -.modal-content { - background: var(--bg-card); - border: 1px solid var(--border-color); - border-radius: var(--r-xl); - box-shadow: var(--shadow-xl); - width: 100%; - max-width: 560px; - margin: 6vh auto; - overflow: hidden; - animation: modal-in .2s cubic-bezier(.2,.8,.3,1); -} -@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } } -.modal-header { - display: flex; align-items: center; justify-content: space-between; - padding: 18px 22px; - border-bottom: 1px solid var(--border-color); -} -.modal-title { font-size: 16px; font-weight: 620; } -.modal-close { background: none; border: none; font-size: 20px; line-height: 1; color: var(--text-muted); cursor: pointer; } -.modal-close:hover { color: var(--text-primary); } -.modal-body { padding: 22px; } -.modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--border-color); background: var(--bg-subtle); } - -/* Toasts */ -#toast-container { - position: fixed; bottom: 24px; right: 24px; - z-index: 900; - display: flex; flex-direction: column; gap: 10px; - pointer-events: none; -} -.toast { - display: flex; align-items: flex-start; gap: 11px; - min-width: 300px; max-width: 400px; - padding: 13px 16px; - background: var(--toast-bg); - border: 1px solid var(--border-color); - border-radius: var(--r-lg); - box-shadow: var(--shadow-xl); - transform: translateX(130%); - transition: transform .35s cubic-bezier(.2,.9,.3,1), opacity .2s; - pointer-events: all; -} -.toast.show { transform: translateX(0); } -.toast-icon { - width: 22px; height: 22px; flex-shrink: 0; - display: flex; align-items: center; justify-content: center; - border-radius: 50%; - font-size: 11px; font-weight: 700; -} -.toast.success .toast-icon { background: var(--success-soft); color: var(--success); } -.toast.error .toast-icon { background: var(--danger-soft); color: var(--danger); } -.toast.info .toast-icon { background: var(--accent-soft); color: var(--accent); } -.toast.warning .toast-icon { background: var(--warning-soft); color: var(--warning); } -.toast-body { flex: 1; min-width: 0; } -.toast-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); } -.toast-msg { font-size: 12.5px; color: var(--text-muted); margin-top: 1px; } -.toast-close { background: none; border: none; padding: 0; font-size: 17px; line-height: 1; color: var(--text-muted); cursor: pointer; } -.toast-close:hover { color: var(--text-primary); } - -/* Live-Status */ -.live-badge { - display: inline-flex; align-items: center; gap: 7px; - padding: 6px 13px; - border-radius: var(--r-pill); - background: var(--success-soft); - border: 1px solid var(--success-border); - color: var(--success); - font-size: 12.5px; font-weight: 600; -} -.live-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 2s infinite; } -.live-badge.loading { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning); } -.live-badge.error { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); } -.live-badge.error .dot { animation: none; } -@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } - -/* ========================================================================= - 10. DASHBOARD - ========================================================================= */ -.site-status, .sites-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - gap: 14px; -} -.site-status-card, .site-card { - background: var(--bg-card); - border: 1px solid var(--border-color); - border-radius: var(--r-lg); - padding: 16px; - transition: border-color .15s, box-shadow .15s; -} -.site-status-card:hover, .site-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-sm); } -.site-status-card.error { border-color: var(--danger-border); } -.site-status-name { font-size: 14px; font-weight: 600; color: var(--text-primary); } -.site-voucher-count { - padding: 2px 10px; - border-radius: var(--r-pill); - background: var(--accent-soft); - color: var(--accent); - font-size: 12.5px; font-weight: 650; - font-variant-numeric: tabular-nums; -} -.site-voucher-count.zero { background: var(--bg-hover); color: var(--text-muted); } -.site-status-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; } -.site-stat { text-align: center; padding: 9px 6px; background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--r-sm); } -.site-stat-value { font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; } -.site-stat-value.valid { color: var(--success); } -.site-stat-value.used { color: var(--warning); } -.site-stat-value.expired { color: var(--danger); } -.site-stat-label { margin-top: 1px; font-size: 11px; color: var(--text-muted); } -.site-error { margin-top: 10px; font-size: 12px; color: var(--danger); } - -.chart-container { position: relative; height: 280px; } - -.top-users-list { list-style: none; margin: 0; padding: 0; } -.top-users-list li { - display: flex; align-items: center; justify-content: space-between; gap: 12px; - padding: 11px 0; - border-bottom: 1px solid var(--border-color); -} -.top-users-list li:last-child { border-bottom: none; } -.user-info-row { display: flex; align-items: center; gap: 11px; min-width: 0; } -.user-count { - padding: 2px 10px; - border-radius: var(--r-pill); - background: var(--bg-hover); - color: var(--text-primary); - font-size: 12.5px; font-weight: 650; - font-variant-numeric: tabular-nums; -} -.refresh-indicator { display: flex; align-items: center; gap: 10px; } -.last-update { font-size: 12px; color: var(--text-muted); } -.two-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 22px; } -.two-col-grid > .card { margin-bottom: 0; } - -/* ========================================================================= - 11. AUTH – Login, Passwort, 2FA - ========================================================================= */ -.auth-body { - min-height: 100vh; - display: grid; - grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); - background: var(--bg-card); -} -.auth-visual { - /* Über die Einstellungen überschreibbar (login_bg_from/-to/-image/-overlay). */ - --login-from: #3b2f8f; - --login-to: #6d5ce7; - --login-overlay: 0.4; - - position: relative; - overflow: hidden; - padding: 56px; - display: flex; - flex-direction: column; - justify-content: space-between; - color: #fff; - background: - radial-gradient(900px 480px at 12% 8%, rgba(255,255,255,.18), transparent 60%), - radial-gradient(700px 520px at 88% 92%, rgba(0,0,0,.18), transparent 62%), - linear-gradient(150deg, var(--login-from) 0%, var(--login-to) 100%); -} -.auth-visual::after { - content: ''; - position: absolute; inset: 0; - background-image: - linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), - linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); - background-size: 56px 56px; - mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 100%); - -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 100%); - pointer-events: none; -} - -/* Eigenes Hintergrundbild: Bild füllt die Spalte, darüber liegt eine - abdunkelnde Ebene, damit der Text lesbar bleibt. */ -.auth-visual.has-image { - background: var(--login-image) center / cover no-repeat, var(--login-from); -} -.auth-visual.has-image::after { display: none; } -.auth-visual.has-image::before { - content: ''; - position: absolute; inset: 0; - background: linear-gradient(160deg, - rgba(0,0,0,calc(var(--login-overlay) * 0.7)) 0%, - rgba(0,0,0,var(--login-overlay)) 100%); - pointer-events: none; -} -.auth-brand-logo { max-height: 42px; max-width: 220px; width: auto; } -/* Ohne Bildspalte: zentrierte Karte auf dem App-Hintergrund. */ -.auth-body-single { - grid-template-columns: 1fr; - background: - radial-gradient(760px 420px at 8% -6%, var(--accent-soft), transparent 60%), - radial-gradient(640px 400px at 102% 4%, rgba(139,92,246,.10), transparent 62%), - var(--bg-body); -} -.auth-body-single .auth-panel { background: transparent; } -.auth-body-single .login-container { - max-width: 420px; - padding: 34px; - background: var(--bg-card); - border: 1px solid var(--border-color); - border-radius: var(--r-xl); - box-shadow: var(--shadow-xl); -} -/* Farbwähler mit Hex-Eingabe */ -.color-field { display: flex; align-items: center; gap: 8px; } -.color-field input[type="color"] { - width: 42px; height: 38px; flex-shrink: 0; - padding: 3px; - border: 1px solid var(--input-border); - border-radius: var(--r-md); - background: var(--bg-input); - cursor: pointer; -} -.color-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } -.color-field input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; } -.color-field input[type="text"] { font-family: var(--font-mono); font-size: 13px; } - -.auth-mark { - display: flex; align-items: center; gap: 11px; - margin-bottom: 20px; - font-size: 15px; font-weight: 620; - color: var(--text-primary); -} -.auth-visual > * { position: relative; z-index: 1; } -.auth-brand { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; } -.auth-brand .brand-mark { background: rgba(255,255,255,.16); backdrop-filter: blur(6px); box-shadow: none; } -.auth-claim { max-width: 420px; } -.auth-claim h2 { color: #fff; font-size: 32px; line-height: 1.2; letter-spacing: -0.03em; margin-bottom: 14px; } -.auth-claim p { color: rgba(255,255,255,.76); font-size: 14.5px; line-height: 1.6; } -.auth-features { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } -.auth-features li { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: rgba(255,255,255,.88); } -.auth-features .tick { - width: 22px; height: 22px; flex-shrink: 0; - display: flex; align-items: center; justify-content: center; - border-radius: 50%; - background: rgba(255,255,255,.16); - font-size: 10px; -} -.auth-foot { font-size: 12.5px; color: rgba(255,255,255,.55); } - -.auth-panel { - display: flex; flex-direction: column; - align-items: center; justify-content: center; - padding: 48px 28px; - background: var(--bg-card); - position: relative; -} -.auth-tools { position: absolute; top: 20px; right: 24px; display: flex; gap: 8px; } -.login-container, .auth-card { width: 100%; max-width: 380px; } -.auth-card h1, .login-container h1 { font-size: 24px; margin-bottom: 8px; letter-spacing: -0.025em; } -.subtitle, .auth-sub { color: var(--text-muted); font-size: 13.5px; margin-bottom: 26px; } -.auth-card .logo, .login-container .logo { max-width: 170px; height: auto; margin-bottom: 22px; display: block; } -.auth-card form, .login-container form { text-align: left; } -.login-container .btn, .auth-card .btn { width: 100%; } -.login-container .btn + .btn, .auth-card .btn + .btn { margin-top: 10px; } - -.btn-microsoft { - width: 100%; - background: var(--bg-card); - border: 1px solid var(--border-color); - color: var(--text-primary); - font-weight: 550; - padding: 11px 16px; -} -.btn-microsoft:hover { background: var(--bg-hover); border-color: var(--border-hover); color: var(--text-primary); } -.btn-microsoft svg { width: 17px; height: 17px; } - -.divider { position: relative; margin: 20px 0; text-align: center; } -.divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--border-color); } -.divider span { position: relative; padding: 0 12px; background: var(--bg-card); color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; } - -.back-link, .local-login-link, .forgot-link { - display: inline-block; - font-size: 13px; - color: var(--text-muted); - text-decoration: none; -} -.back-link:hover, .local-login-link:hover, .forgot-link:hover { color: var(--accent); } -.auth-links { margin-top: 22px; text-align: center; } -.forgot-link { display: block; margin: -6px 0 16px; text-align: right; } - -.code-input { - text-align: center; - letter-spacing: .32em; - font-family: var(--font-mono); - font-size: 19px; - padding: 13px; -} -.codes-box { - border: 1px solid var(--warning-border); - background: var(--warning-soft); - border-radius: var(--r-md); - padding: 16px; - margin-bottom: 20px; -} -.codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; } -.codes span { - padding: 8px; - border: 1px solid var(--warning-border); - border-radius: var(--r-xs); - background: var(--bg-card); - font-family: var(--font-mono); - font-size: 13px; - text-align: center; - letter-spacing: .1em; -} -.qr { display: flex; justify-content: center; margin: 18px 0; } -.qr img, .qr canvas { border: 1px solid var(--border-color); border-radius: var(--r-md); padding: 10px; background: #fff; } -.secret { - padding: 11px; - border: 1px solid var(--border-color); - border-radius: var(--r-sm); - background: var(--bg-subtle); - font-family: var(--font-mono); - font-size: 13px; - letter-spacing: .12em; - text-align: center; - word-break: break-all; - margin-bottom: 18px; -} -.status { - display: inline-flex; align-items: center; gap: 7px; - padding: 5px 12px; margin-bottom: 20px; - border-radius: var(--r-pill); - font-size: 12.5px; font-weight: 600; -} -.status.on { background: var(--success-soft); color: var(--success); border: 1px solid var(--success-border); } -.status.off { background: var(--bg-hover); color: var(--text-muted); border: 1px solid var(--border-color); } - -/* ========================================================================= - 12. OEFFENTLICHES FRONTEND (Voucher-Erstellung) - ========================================================================= */ -.app-body { - min-height: 100vh; - padding: 0 20px 64px; - background: - radial-gradient(760px 420px at 8% -6%, var(--accent-soft), transparent 60%), - radial-gradient(640px 400px at 102% 4%, rgba(139,92,246,.10), transparent 62%), - var(--bg-body); - background-attachment: fixed; -} -.app-topbar { - position: sticky; top: 0; - z-index: 100; - max-width: 1120px; - margin: 0 auto 34px; - height: 68px; - display: flex; align-items: center; justify-content: space-between; gap: 14px; -} -.app-topbar .brand { display: flex; align-items: center; gap: 11px; color: var(--text-primary); } -.app-topbar .brand-name { font-size: 15px; font-weight: 620; } -.app-actions { display: flex; align-items: center; gap: 8px; } - -.container, .app-card { - position: relative; - max-width: 560px; - margin: 0 auto; - padding: 34px; - background: var(--bg-card); - border: 1px solid var(--border-color); - border-radius: var(--r-xl); - box-shadow: var(--shadow-xl); -} -.app-card-head { margin-bottom: 26px; } -.app-card-head h1 { font-size: 23px; letter-spacing: -0.025em; } -.app-card-head p { margin-top: 6px; font-size: 13.5px; color: var(--text-muted); } -.container > .logo { max-width: 180px; display: block; margin: 0 auto 22px; } - -.template-dropdown { - padding: 14px 16px; - margin-bottom: 20px; - background: var(--bg-subtle); - border: 1px solid var(--border-color); - border-radius: var(--r-md); -} -.template-dropdown label { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); } - -.email-option { - padding: 15px 16px; - margin: 16px 0; - background: var(--bg-subtle); - border: 1px solid var(--border-color); - border-radius: var(--r-md); - transition: border-color .15s, background-color .15s; -} -.email-option.active { border-color: var(--accent-border); background: var(--accent-soft); } -.email-checkbox-wrapper { display: flex; align-items: center; gap: 11px; cursor: pointer; } -.email-checkbox-wrapper label { margin: 0; font-size: 13.5px; font-weight: 570; color: var(--text-primary); cursor: pointer; display: flex; align-items: center; gap: 8px; } -.email-input-wrapper { max-height: 0; overflow: hidden; opacity: 0; transition: all .28s ease; } -.email-input-wrapper.show { max-height: 140px; opacity: 1; margin-top: 14px; } - -/* Voucher-Ticket */ -.voucher-result { - position: relative; - overflow: hidden; - padding: 30px 26px 26px; - margin-bottom: 20px; - border-radius: var(--r-lg); - color: #fff; - text-align: center; - background: - radial-gradient(520px 280px at 20% 0%, rgba(167,139,250,.55), transparent 62%), - linear-gradient(140deg, #4b3ec4 0%, #6d5ce7 100%); - box-shadow: 0 20px 40px -22px rgba(75,62,196,.85); -} -.voucher-result .result-label { - display: inline-flex; align-items: center; gap: 7px; - padding: 4px 12px; margin-bottom: 18px; - border-radius: var(--r-pill); - background: rgba(255,255,255,.14); - font-size: 12px; font-weight: 600; - letter-spacing: .02em; -} -.voucher-code { - font-family: var(--font-mono); - font-size: 32px; - font-weight: 600; - letter-spacing: .12em; - cursor: pointer; - transition: opacity .15s; -} -.voucher-code:hover { opacity: .82; } -.voucher-info { margin-top: 10px; font-size: 13px; color: rgba(255,255,255,.75); } -.voucher-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; } -.voucher-meta span { - padding: 4px 11px; - border-radius: var(--r-pill); - background: rgba(255,255,255,.12); - font-size: 12px; - color: rgba(255,255,255,.9); -} -.ticket-divider { - position: relative; - height: 1px; - margin: 24px -26px; - border-top: 1.5px dashed rgba(255,255,255,.3); -} -.ticket-divider::before, .ticket-divider::after { - content: ''; - position: absolute; top: -11px; - width: 22px; height: 22px; - border-radius: 50%; - background: var(--bg-card); -} -.ticket-divider::before { left: -11px; } -.ticket-divider::after { right: -11px; } -.qr-wrapper { display: flex; flex-direction: column; align-items: center; } -.qr-wrapper #qrcode { - padding: 12px; - border-radius: var(--r-md); - background: #fff; - line-height: 0; - box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); -} -.qr-wrapper canvas, .qr-wrapper img { border-radius: 4px; } -.qr-label { margin-top: 10px; font-size: 12px; color: rgba(255,255,255,.7); } - -.instruction-box { - padding: 18px; - margin-top: 20px; - background: var(--bg-subtle); - border: 1px solid var(--border-color); - border-radius: var(--r-md); -} -.instruction-box h3 { font-size: 14px; margin-bottom: 8px; } -.instruction-box p, .instruction-box div { font-size: 13px; color: var(--text-secondary); line-height: 1.65; } - -.bulk-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } -.bulk-table th { - padding: 9px 12px; text-align: left; - background: var(--bg-table-head); - color: var(--text-muted); - font-size: 11px; font-weight: 620; text-transform: uppercase; letter-spacing: .05em; - border-bottom: 1px solid var(--border-color); -} -.bulk-table th:first-child { border-top-left-radius: var(--r-sm); } -.bulk-table th:last-child { border-top-right-radius: var(--r-sm); } -.bulk-table td { padding: 11px 12px; border-bottom: 1px solid var(--border-color); color: var(--text-primary); } -.bulk-table tr:last-child td { border-bottom: none; } -.bulk-table code { cursor: pointer; letter-spacing: .08em; } -.bulk-table code:hover { border-color: var(--accent-border); color: var(--accent); } - -/* ========================================================================= - 15. SEITEN-KOMPONENTEN (Admin-Detailseiten) - ========================================================================= */ -/* Voucher-Liste */ -.stat-label { font-size: 12.5px; font-weight: 550; color: var(--text-muted); margin-bottom: 6px; } -.stat-value { font-size: 26px; font-weight: 660; letter-spacing: -0.03em; color: var(--text-primary); font-variant-numeric: tabular-nums; } -.stat-value.valid { color: var(--success); } -.stat-value.used { color: var(--warning); } -.stat-value.expired { color: var(--danger); } -.site-selector { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } -.site-selector select { width: auto; min-width: 210px; } -input.search-bar, .site-selector .search-bar { min-width: 240px; width: auto; flex: 1; max-width: 360px; } -.usage-info { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; } -.usage-bar { width: 52px; height: 5px; border-radius: var(--r-pill); background: var(--bg-hover); overflow: hidden; } -.usage-bar-fill { height: 100%; border-radius: var(--r-pill); background: var(--accent); } -.voucher-note { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); } -.table tr.deleting { opacity: .4; pointer-events: none; } -.live-indicator { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 550; color: var(--success); } -.live-indicator .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 2s infinite; } -.loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 56px; color: var(--text-muted); } -.loading i { font-size: 20px; animation: spin 1s linear infinite; } -@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } -.no-sites-warning { - padding: 28px; text-align: center; - border: 1px solid var(--warning-border); background: var(--warning-soft); - color: var(--warning); border-radius: var(--r-lg); -} - -/* Sites */ -.site-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } -.site-name { font-size: 15.5px; font-weight: 620; color: var(--text-primary); } -.site-id-label { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); } -.site-info { margin: 12px 0; font-size: 13px; color: var(--text-secondary); } -.site-info-item { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; } -.site-info-item i { width: 14px; color: var(--text-muted); } -.site-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-color); } -.empty-card { - padding: 56px 20px; text-align: center; color: var(--text-muted); - background: var(--bg-card); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); -} - -/* Gestapelte Felder ohne .form-group (Einstellungs-Cards) */ -.card > label, -.card .input + label, .card input + label, .card select + label, -.card textarea + label, .card .chk + label, .card .row + label, .card .row3 + label { - margin-top: 16px; -} -.card .input + label:first-of-type { margin-top: 0; } - -/* Formular-Helfer */ -.checkbox-group { display: flex; align-items: center; gap: 10px; } -.checkbox-group input { width: auto; } -.checkbox-group label { margin: 0; font-weight: 500; color: var(--text-primary); } -.site-selection { - max-height: 185px; overflow-y: auto; padding: 12px; - background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--r-sm); -} -.help-text { margin-top: 5px; font-size: 12px; color: var(--text-muted); } -.action-btns { display: flex; flex-wrap: nowrap; gap: 6px; } -.table td:last-child { white-space: nowrap; } -.duration-badge { - display: inline-flex; align-items: center; gap: 6px; - padding: 3px 10px; border-radius: var(--r-pill); - background: var(--bg-hover); border: 1px solid var(--border-color); - font-size: 12px; color: var(--text-secondary); -} -.badge-secondary { background: var(--bg-hover); color: var(--text-secondary); border-color: var(--border-color); } -.placeholder-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; } - -/* Einstellungen: Tabs */ -.tab-container { - background: var(--bg-card); - border: 1px solid var(--border-color); - border-radius: var(--r-lg); - box-shadow: var(--shadow-sm); - overflow: hidden; -} -.tab-container .tab-navigation { - display: flex; - gap: 4px; - width: 100%; - margin: 0; - padding: 10px 14px 0; - background: var(--bg-subtle); - border: none; - border-bottom: 1px solid var(--border-color); - border-radius: 0; - overflow-x: auto; -} -.tab-container .tab-button { - flex: 0 0 auto; - padding: 10px 14px; - border-radius: var(--r-sm) var(--r-sm) 0 0; - border-bottom: 2px solid transparent; - background: transparent; - box-shadow: none; - color: var(--text-secondary); -} -.tab-container .tab-button:hover { background: var(--bg-hover); color: var(--text-primary); } -.tab-container .tab-button.active { - background: var(--bg-card); - border-bottom-color: var(--accent); - color: var(--accent); - box-shadow: none; -} -.tab-content { display: none; padding: 28px; } -.tab-content.active { display: block; animation: fade-in .2s ease; } -@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } -.token-box, .keybox { - padding: 13px; - border-radius: var(--r-sm); - background: var(--bg-subtle); - border: 1px solid var(--border-color); - font-family: var(--font-mono); - font-size: 13px; - color: var(--text-primary); - word-break: break-all; -} -.keybox { background: #0d1017; border-color: #1d2432; color: #7ee7a8; margin-top: 10px; } -.a-link { margin-right: 10px; font-size: 13px; color: var(--accent); } -.a-link:hover { text-decoration: underline; } - -/* Fokus-Seiten (2FA, Passwort, Installer) */ -.focus-page { - display: flex; align-items: center; justify-content: center; - padding: 40px 20px; -} -.focus-card { - width: 100%; max-width: 480px; - margin: 0; - padding: 30px; - border-radius: var(--r-xl); - box-shadow: var(--shadow-xl); -} -.focus-card.wide { max-width: 720px; } -.focus-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; } -.focus-icon { - width: 40px; height: 40px; flex-shrink: 0; - display: flex; align-items: center; justify-content: center; - border-radius: var(--r-md); - background: var(--accent-soft); color: var(--accent); - font-size: 16px; -} -.focus-card h1 { font-size: 19px; } -.focus-card .sub, .sub { font-size: 13px; color: var(--text-muted); } -.focus-card ol { margin: 0 0 18px 18px; padding: 0; color: var(--text-secondary); font-size: 13.5px; line-height: 1.8; } -.focus-card .btn + .btn, .focus-card form + form { margin-top: 10px; } -.codes-box strong { display: block; font-size: 14px; color: var(--warning); } -.codes-box p { margin: 6px 0 0; font-size: 12.5px; color: var(--text-secondary); } - -/* Kompakte Raster fuer Einstellungsformulare */ -.row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } -.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } -@media (max-width: 720px) { .row, .row3 { grid-template-columns: 1fr; } } - -/* ========================================================================= - 13. RESPONSIVE - ========================================================================= */ -@media (max-width: 1240px) { - .two-col-grid { grid-template-columns: 1fr; } -} - -@media (max-width: 1024px) { - .auth-body { grid-template-columns: 1fr; } - .auth-visual { display: none; } -} - -@media (max-width: 860px) { - :root { --sidebar-w: 260px; } +@media (max-width: 768px) { .mobile-menu-btn { display: flex; } - .sidebar { transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--shadow-xl); } + + .sidebar { + transform: translateX(-100%); + transition: transform 0.3s ease; + z-index: 200; + } .sidebar.mobile-open { transform: translateX(0); } - .topbar, .header { left: 0; padding: 0 16px; } - .main-content { margin-left: 0; padding: calc(var(--topbar-h) + 18px) 16px 40px; } - .stats-grid, .grid4 { grid-template-columns: repeat(2, 1fr); } - .site-status, .sites-grid { grid-template-columns: 1fr; } - .form-grid { grid-template-columns: 1fr; } - .page-header { align-items: flex-start; } - .hide-mobile { display: none; } - .user-menu { padding: 4px; } - .table-container { overflow-x: auto; } + + .main-content { + margin-left: 0 !important; + padding: 15px !important; + } + + .header { + padding: 0 15px !important; + } + + .stats-grid { + grid-template-columns: repeat(2, 1fr) !important; + } + + .site-status { + grid-template-columns: 1fr !important; + } + + .sites-grid { + grid-template-columns: 1fr !important; + } + + .page-header { + flex-direction: column; + align-items: flex-start !important; + gap: 15px; + } + + .table-container { + overflow-x: auto; + } + + .header-right { + gap: 8px !important; + } + + .user-menu span { display: none; } + + .form-grid { + grid-template-columns: 1fr !important; + } + + .tab-navigation { + flex-wrap: wrap; + } + + .filter-row { + flex-wrap: wrap; + } } -@media (max-width: 560px) { - .stats-grid, .grid4 { grid-template-columns: 1fr; } +@media (max-width: 480px) { + .stats-grid { + grid-template-columns: 1fr !important; + } .lang-switcher { display: none; } - .container, .app-card { padding: 24px 20px; border-radius: var(--r-lg); } - .app-topbar { margin-bottom: 22px; } - .voucher-code { font-size: 26px; } - .codes { grid-template-columns: 1fr; } } -/* ========================================================================= - 14. DRUCK - ========================================================================= */ -@media print { - .sidebar, .topbar, .header, .toolbar, .no-print, #toast-container, .app-topbar { display: none !important; } - body { background: #fff !important; } - .main-content { margin: 0 !important; padding: 0 !important; } - .card { box-shadow: none !important; border-color: #ddd !important; } +/* === SCROLLBAR STYLING === */ +::-webkit-scrollbar { width: 6px; height: 6px; } +::-webkit-scrollbar-track { background: var(--scrollbar-track); } +::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } +::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } + +/* === SMOOTH TRANSITIONS === */ +body, .card, .sidebar, .header, input, select, textarea, .btn { + transition: background-color 0.2s, border-color 0.2s, color 0.2s; } diff --git a/assets/global.js b/assets/global.js index 03c5d92..1f388e6 100644 --- a/assets/global.js +++ b/assets/global.js @@ -17,12 +17,7 @@ function updateDarkModeBtn() { const btn = document.getElementById('darkModeBtn'); if (!btn) return; const isDark = document.documentElement.getAttribute('data-theme') === 'dark'; - const icon = btn.querySelector('i'); - if (icon) { - icon.className = isDark ? 'fas fa-sun' : 'fas fa-moon'; - } else { - btn.textContent = isDark ? '☀' : '☾'; - } + btn.textContent = isDark ? '☀️' : '🌙'; btn.title = isDark ? 'Light Mode' : 'Dark Mode'; } @@ -47,8 +42,8 @@ document.addEventListener('DOMContentLoaded', updateDarkModeBtn); const icons = { success: '✓', error: '✕', - info: 'i', - warning: '!' + info: 'ℹ', + warning: '⚠' }; window.showToast = function(type, title, message, duration) { diff --git a/docs/screenshots/admin-dashboard-dark.png b/docs/screenshots/admin-dashboard-dark.png index 4ee43ad..fe72cf2 100644 Binary files a/docs/screenshots/admin-dashboard-dark.png and b/docs/screenshots/admin-dashboard-dark.png differ diff --git a/docs/screenshots/admin-dashboard.png b/docs/screenshots/admin-dashboard.png index d08bc2e..7904514 100644 Binary files a/docs/screenshots/admin-dashboard.png and b/docs/screenshots/admin-dashboard.png differ diff --git a/docs/screenshots/api-keys.png b/docs/screenshots/api-keys.png index 73b15da..bc88a91 100644 Binary files a/docs/screenshots/api-keys.png and b/docs/screenshots/api-keys.png differ diff --git a/docs/screenshots/bulk-vouchers.png b/docs/screenshots/bulk-vouchers.png index 8aa8009..e7c9a04 100644 Binary files a/docs/screenshots/bulk-vouchers.png and b/docs/screenshots/bulk-vouchers.png differ diff --git a/docs/screenshots/integrations.png b/docs/screenshots/integrations.png index fbf5d31..b2a0e75 100644 Binary files a/docs/screenshots/integrations.png and b/docs/screenshots/integrations.png differ diff --git a/docs/screenshots/login-branding.png b/docs/screenshots/login-branding.png deleted file mode 100644 index 7a941b8..0000000 Binary files a/docs/screenshots/login-branding.png and /dev/null differ diff --git a/docs/screenshots/login.png b/docs/screenshots/login.png index 100d8f4..8de56db 100644 Binary files a/docs/screenshots/login.png and b/docs/screenshots/login.png differ diff --git a/docs/screenshots/maintenance.png b/docs/screenshots/maintenance.png index 4281ceb..14a9f01 100644 Binary files a/docs/screenshots/maintenance.png and b/docs/screenshots/maintenance.png differ diff --git a/docs/screenshots/settings-login.png b/docs/screenshots/settings-login.png deleted file mode 100644 index f4256cb..0000000 Binary files a/docs/screenshots/settings-login.png and /dev/null differ diff --git a/docs/screenshots/settings.png b/docs/screenshots/settings.png deleted file mode 100644 index fc43c4c..0000000 Binary files a/docs/screenshots/settings.png and /dev/null differ diff --git a/docs/screenshots/two-factor.png b/docs/screenshots/two-factor.png index ec2cbc4..16a0a60 100644 Binary files a/docs/screenshots/two-factor.png and b/docs/screenshots/two-factor.png differ diff --git a/docs/screenshots/updater-available.png b/docs/screenshots/updater-available.png index 331ac34..d793971 100644 Binary files a/docs/screenshots/updater-available.png and b/docs/screenshots/updater-available.png differ diff --git a/docs/screenshots/updater.png b/docs/screenshots/updater.png index 665c5d9..8620a1c 100644 Binary files a/docs/screenshots/updater.png and b/docs/screenshots/updater.png differ diff --git a/docs/screenshots/voucher-form.png b/docs/screenshots/voucher-form.png index 60aedbe..fb24534 100644 Binary files a/docs/screenshots/voucher-form.png and b/docs/screenshots/voucher-form.png differ diff --git a/docs/screenshots/voucher-result.png b/docs/screenshots/voucher-result.png index c4e7c0f..d07d4b2 100644 Binary files a/docs/screenshots/voucher-result.png and b/docs/screenshots/voucher-result.png differ diff --git a/docs/screenshots/vouchers.png b/docs/screenshots/vouchers.png deleted file mode 100644 index bce6fe4..0000000 Binary files a/docs/screenshots/vouchers.png and /dev/null differ diff --git a/forgot_password.php b/forgot_password.php index 60b4261..ef5cc38 100644 --- a/forgot_password.php +++ b/forgot_password.php @@ -83,15 +83,30 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') { <?= __('reset_title') ?> – <?= htmlspecialchars($appTitle) ?> - - - - + - -
+ +
@@ -114,11 +129,11 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
- + -
+
diff --git a/includes/admin_nav.php b/includes/admin_nav.php index f952293..2c39349 100644 --- a/includes/admin_nav.php +++ b/includes/admin_nav.php @@ -8,126 +8,138 @@ $currentPage = $currentPage ?? ''; $faviconUrl = isset($db) ? $db->getSetting('favicon_url', '') : ''; $currentUser = isset($auth) ? $auth->getCurrentUser() : null; $lang = I18n::getLanguage(); -$base = $adminBase ?? ''; // Prefix bis zum admin/-Ordner -$rootBase = $base === '' ? '../' : ''; // Prefix bis zum Projekt-Root - -/** Navigation als Datenstruktur – Reihenfolge = Darstellung. */ -$navGroups = [ - 'nav_group_overview' => [ - ['dashboard', 'index.php', 'fa-chart-pie', 'nav_dashboard'], - ['reports', 'reports.php', 'fa-chart-line', 'nav_reports'], - ['audit_log', 'audit_log.php', 'fa-clock-rotate-left','nav_audit_log'], - ], - 'nav_group_manage' => [ - ['vouchers', 'vouchers.php', 'fa-ticket', 'nav_vouchers'], - ['templates', 'templates.php', 'fa-layer-group', 'nav_templates'], - ['import', 'import.php', 'fa-file-arrow-up', 'nav_import'], - ['sites', 'sites.php', 'fa-location-dot', 'nav_sites'], - ['users', 'users.php', 'fa-users', 'nav_users'], - ], - 'nav_group_system' => [ - ['settings', 'settings.php', 'fa-sliders', 'nav_settings'], - ['integrations', 'integrations.php', 'fa-plug', 'nav_integrations'], - ['api_keys', 'api_keys.php', 'fa-key', 'nav_api_keys'], - ['security', 'security.php', 'fa-shield-halved','nav_security'], - ['backup', 'backup.php', 'fa-database', 'nav_backup'], - ['update', 'update.php', 'fa-rotate', 'nav_update'], - ], -]; - -/** Aktuellen Seitentitel für die Breadcrumb finden. */ -$currentLabel = __('nav_dashboard'); -foreach ($navGroups as $items) { - foreach ($items as $item) { - if ($item[0] === $currentPage) { $currentLabel = __($item[3]); } - } -} ?> - - - - + + + +
- - -
+
-
- - / - +
+ +
+
$label): ?>
- - + + + + + + +
+
+
+
+
-
+
-
+ + +
+ diff --git a/index.php b/index.php index 3550bc7..2cfafc0 100644 --- a/index.php +++ b/index.php @@ -284,69 +284,112 @@ function buildPrintCard($template, $data, $instructionHeader, $instructionText, <?= htmlspecialchars($appTitle) ?> - - - - - + - + -
- - - - -
-
- $label): ?> - - -
- - - isAdmin()): ?> - - - - -
-
-
- - - -
- - - - - +
+
+ $label): ?> + +
-
+ +
+ + +
+
👋 htmlspecialchars($currentUser['name'])]) ?>
+
+ isAdmin()): ?> + ⚙️ + + +
+
+ +
+
+
+ 🔐 +
+
+
@@ -354,10 +397,7 @@ function buildPrintCard($template, $data, $instructionHeader, $instructionText, -
-

-

-
+

@@ -370,19 +410,13 @@ function buildPrintCard($template, $data, $instructionHeader, $instructionText,
-
+
- +
-
- - - -
-
@@ -396,22 +430,15 @@ function buildPrintCard($template, $data, $instructionHeader, $instructionText,
-
-
- -
- -
+
+ +
+ -
-

-

-
+

$bv): ?> @@ -445,21 +472,21 @@ function buildPrintCard($template, $data, $instructionHeader, $instructionText, -

+

Code anklicken zum Kopieren

-
- +
-
+
📶


isAdmin()): ?> @@ -543,7 +570,7 @@ function buildPrintCard($template, $data, $instructionHeader, $instructionText,

@@ -619,7 +646,7 @@ function buildPrintCard($template, $data, $instructionHeader, $instructionText,
- @@ -643,7 +670,7 @@ function buildPrintCard($template, $data, $instructionHeader, $instructionText, new QRCode(document.getElementById('qrcode'), { text: '', width: 160, height: 160, - colorDark: '#101625', colorLight: '#ffffff', + colorDark: '#ffffff', colorLight: 'transparent', correctLevel: QRCode.CorrectLevel.M }); }); @@ -715,7 +742,7 @@ function buildPrintCard($template, $data, $instructionHeader, $instructionText, const btn = document.getElementById('submitBtn'); if (!btn || btn.disabled) { e.preventDefault(); return; } btn.disabled = true; - btn.innerHTML = ' '; + btn.innerHTML = '⏳ '; }); document.getElementById('bulkForm')?.addEventListener('submit', function(e) { @@ -723,7 +750,7 @@ function buildPrintCard($template, $data, $instructionHeader, $instructionText, if (!btn || btn.disabled) { e.preventDefault(); return; } const count = document.getElementById('bulk_count').value; btn.disabled = true; - btn.innerHTML = ' '; + btn.innerHTML = '⏳ '; }); document.addEventListener('DOMContentLoaded', function() { diff --git a/install.php b/install.php index cd11ce6..44a0fe9 100644 --- a/install.php +++ b/install.php @@ -185,54 +185,153 @@ if ($step === 5 && $_SERVER['REQUEST_METHOD'] === 'POST') { UniFi Voucher System - Installation - - - - - - -
-
- -
-

UniFi Voucher System

-

Installation in fünf Schritten

-
-
+ +
+

🚀 UniFi Voucher System

+

Installation

1
@@ -255,7 +354,7 @@ if ($step === 5 && $_SERVER['REQUEST_METHOD'] === 'POST') { ✓ Installation erfolgreich abgeschlossen!
Sie können sich jetzt mit Ihren Admin-Zugangsdaten anmelden.
- Zum Login + Zum Login
@@ -283,7 +382,7 @@ if ($step === 5 && $_SERVER['REQUEST_METHOD'] === 'POST') {
- + @@ -312,7 +411,7 @@ if ($step === 5 && $_SERVER['REQUEST_METHOD'] === 'POST') {
- + @@ -362,7 +461,7 @@ if ($step === 5 && $_SERVER['REQUEST_METHOD'] === 'POST') {
Leer lassen, wenn M365-Login nicht verwendet werden soll
- + @@ -375,7 +474,7 @@ if ($step === 5 && $_SERVER['REQUEST_METHOD'] === 'POST') { Die Datenbank und alle notwendigen Dateien werden erstellt.

- +
diff --git a/lang/de.php b/lang/de.php index af979e8..6e71868 100644 --- a/lang/de.php +++ b/lang/de.php @@ -1,9 +1,6 @@ 'Übersicht', - 'nav_group_manage' => 'Verwaltung', - 'nav_group_system' => 'System', 'nav_dashboard' => 'Dashboard', 'nav_sites' => 'Sites verwalten', 'nav_users' => 'Benutzer verwalten', @@ -101,9 +98,7 @@ return [ 'voucher_email_hint' => 'gast@example.com', 'voucher_create_btn' => 'Voucher erstellen', 'voucher_creating' => 'Erstelle Voucher...', - 'voucher_success_title' => 'Zugangs-Code erstellt', - 'voucher_copy_hint' => 'Code antippen zum Kopieren', - 'app_subtitle' => 'WLAN-Zugangscodes in Sekunden erstellen – für Gäste, Teams und Events.', + 'voucher_success_title' => '✓ Ihr Zugangs-Code', 'voucher_validity' => 'Gültig für {minutes} Minuten ab Erstellung', 'voucher_qr_label' => 'QR-Code scannen zum Verbinden', 'voucher_print_btn' => 'Code ausdrucken', @@ -124,7 +119,6 @@ return [ 'bulk_success' => '{count} Vouchers erfolgreich erstellt!', 'bulk_print_all' => 'Alle ausdrucken', 'bulk_results' => 'Erstellte Vouchers ({count})', - 'bulk_results_hint' => 'Alle Codes sind sofort gültig und können gedruckt oder kopiert werden.', // Templates 'templates_title' => 'Voucher-Profile', @@ -220,25 +214,6 @@ return [ // Settings 'settings_title' => 'Einstellungen', 'settings_subtitle' => 'System-Konfiguration und Personalisierung', - 'settings_tab_login' => 'Login-Seite', - 'settings_login_intro' => 'Aussehen und Texte der Anmeldeseite. Leere Felder verwenden die Standardwerte.', - 'settings_login_panel' => 'Linke Bildspalte (Split-Screen) anzeigen', - 'settings_login_brand' => 'Firmenname', - 'settings_login_brand_hint' => 'Leer = Anwendungstitel wird verwendet.', - 'settings_login_logo' => 'Logo (URL)', - 'settings_login_logo_hint' => 'Leer = allgemeines Logo aus dem Tab „Allgemein".', - 'settings_login_claim_title' => 'Überschrift', - 'settings_login_claim_text' => 'Beschreibungstext', - 'settings_login_features' => 'Stichpunkte', - 'settings_login_features_hint'=> 'Ein Stichpunkt pro Zeile. Leer lassen, um keine Liste anzuzeigen.', - 'settings_login_footer' => 'Fußzeile', - 'settings_login_bg_image' => 'Hintergrundbild (URL)', - 'settings_login_bg_image_hint'=> 'Optional. Wird formatfüllend angezeigt; ohne Bild gilt der Farbverlauf.', - 'settings_login_bg_from' => 'Verlauf: Startfarbe', - 'settings_login_bg_to' => 'Verlauf: Endfarbe', - 'settings_login_overlay' => 'Abdunklung des Bildes (%)', - 'settings_login_overlay_hint' => '0–90 %. Höhere Werte machen den Text auf hellen Bildern besser lesbar.', - 'settings_login_preview' => 'Vorschau öffnen', 'settings_tab_general' => 'Allgemein', 'settings_tab_defaults' => 'Voucher-Standards', 'settings_tab_cron' => 'Cron-Sync', @@ -269,18 +244,13 @@ return [ // Login / Auth 'login_title' => 'Anmelden', - 'auth_claim_title' => 'WLAN-Gastzugänge, zentral verwaltet.', - 'auth_claim_text' => 'Vouchers für alle UniFi-Sites erstellen, versenden und auswerten – aus einer Oberfläche.', - 'auth_feature_1' => 'Voucher per E-Mail, SMS oder QR-Code', - 'auth_feature_2' => 'Rollen, 2FA und vollständiges Audit-Log', - 'auth_feature_3' => 'Live-Statistiken je Site und Benutzer', 'login_subtitle' => 'Melden Sie sich an, um fortzufahren', 'login_email' => 'E-Mail', 'login_password' => 'Passwort', 'login_btn' => 'Anmelden', 'login_ms' => 'Mit Microsoft anmelden', 'login_local' => 'Mit Benutzername und Passwort anmelden', - 'login_back' => 'Zurück zur Code-Erstellung', + 'login_back' => '← Zurück zur Code-Erstellung', 'login_forgot' => 'Passwort vergessen?', 'login_error_empty' => 'Bitte E-Mail und Passwort eingeben', 'login_error_rate' => 'Zu viele Fehlversuche. Bitte warten Sie 10 Minuten.', @@ -292,7 +262,7 @@ return [ 'reset_email_label' => 'E-Mail-Adresse', 'reset_send_btn' => 'Reset-Link senden', 'reset_success' => 'Falls ein Konto mit dieser E-Mail existiert, erhalten Sie in Kürze eine E-Mail.', - 'reset_back_login' => 'Zurück zum Login', + 'reset_back_login' => '← Zurück zum Login', 'reset_new_pw' => 'Neues Passwort festlegen', 'reset_new_pw_label'=> 'Neues Passwort', 'reset_confirm_label'=> 'Passwort bestätigen', diff --git a/lang/en.php b/lang/en.php index 33c423c..4651fb9 100644 --- a/lang/en.php +++ b/lang/en.php @@ -1,9 +1,6 @@ 'Overview', - 'nav_group_manage' => 'Management', - 'nav_group_system' => 'System', 'nav_dashboard' => 'Dashboard', 'nav_sites' => 'Manage Sites', 'nav_users' => 'Manage Users', @@ -101,9 +98,7 @@ return [ 'voucher_email_hint' => 'guest@example.com', 'voucher_create_btn' => 'Create Voucher', 'voucher_creating' => 'Creating Voucher...', - 'voucher_success_title' => 'Access code created', - 'voucher_copy_hint' => 'Tap the code to copy it', - 'app_subtitle' => 'Create Wi-Fi access codes in seconds – for guests, teams and events.', + 'voucher_success_title' => '✓ Your Access Code', 'voucher_validity' => 'Valid for {minutes} minutes from creation', 'voucher_qr_label' => 'Scan QR code to connect', 'voucher_print_btn' => 'Print Code', @@ -124,7 +119,6 @@ return [ 'bulk_success' => '{count} vouchers created successfully!', 'bulk_print_all' => 'Print All', 'bulk_results' => 'Created Vouchers ({count})', - 'bulk_results_hint' => 'All codes are valid immediately and can be printed or copied.', // Templates 'templates_title' => 'Voucher Profiles', @@ -220,25 +214,6 @@ return [ // Settings 'settings_title' => 'Settings', 'settings_subtitle' => 'System configuration and customization', - 'settings_tab_login' => 'Login page', - 'settings_login_intro' => 'Appearance and wording of the sign-in page. Empty fields fall back to the defaults.', - 'settings_login_panel' => 'Show left image column (split screen)', - 'settings_login_brand' => 'Company name', - 'settings_login_brand_hint' => 'Empty = application title is used.', - 'settings_login_logo' => 'Logo (URL)', - 'settings_login_logo_hint' => 'Empty = general logo from the "General" tab.', - 'settings_login_claim_title' => 'Headline', - 'settings_login_claim_text' => 'Description', - 'settings_login_features' => 'Bullet points', - 'settings_login_features_hint'=> 'One bullet per line. Leave empty to hide the list.', - 'settings_login_footer' => 'Footer', - 'settings_login_bg_image' => 'Background image (URL)', - 'settings_login_bg_image_hint'=> 'Optional. Displayed full-bleed; without an image the gradient is used.', - 'settings_login_bg_from' => 'Gradient: start colour', - 'settings_login_bg_to' => 'Gradient: end colour', - 'settings_login_overlay' => 'Image dimming (%)', - 'settings_login_overlay_hint' => '0–90%. Higher values keep text readable on bright images.', - 'settings_login_preview' => 'Open preview', 'settings_tab_general' => 'General', 'settings_tab_defaults' => 'Voucher Defaults', 'settings_tab_cron' => 'Cron Sync', @@ -269,18 +244,13 @@ return [ // Login / Auth 'login_title' => 'Sign In', - 'auth_claim_title' => 'Wi-Fi guest access, centrally managed.', - 'auth_claim_text' => 'Create, deliver and analyse vouchers for every UniFi site from a single interface.', - 'auth_feature_1' => 'Vouchers via email, SMS or QR code', - 'auth_feature_2' => 'Roles, 2FA and a complete audit log', - 'auth_feature_3' => 'Live statistics per site and user', 'login_subtitle' => 'Sign in to continue', 'login_email' => 'Email', 'login_password' => 'Password', 'login_btn' => 'Sign In', 'login_ms' => 'Sign in with Microsoft', 'login_local' => 'Sign in with username and password', - 'login_back' => 'Back to Code Creation', + 'login_back' => '← Back to Code Creation', 'login_forgot' => 'Forgot password?', 'login_error_empty' => 'Please enter email and password', 'login_error_rate' => 'Too many failed attempts. Please wait 10 minutes.', @@ -292,7 +262,7 @@ return [ 'reset_email_label' => 'Email Address', 'reset_send_btn' => 'Send Reset Link', 'reset_success' => 'If an account with this email exists, you will receive an email shortly.', - 'reset_back_login' => 'Back to Login', + 'reset_back_login' => '← Back to Login', 'reset_new_pw' => 'Set New Password', 'reset_new_pw_label'=> 'New Password', 'reset_confirm_label'=> 'Confirm Password', diff --git a/login.php b/login.php index 1e977f7..1530eef 100644 --- a/login.php +++ b/login.php @@ -10,10 +10,7 @@ require_once __DIR__ . '/includes/I18n.php'; try { $auth = new Auth(); - // Angemeldete Admins koennen die Login-Seite mit ?preview=1 ansehen - // (Vorschau aus den Einstellungen), ohne abgemeldet zu werden. - $isPreview = isset($_GET['preview']) && $auth->isLoggedIn() && $auth->isAdmin(); - if ($auth->isLoggedIn() && !$isPreview) { header('Location: index.php'); exit; } + if ($auth->isLoggedIn()) { header('Location: index.php'); exit; } } catch (Exception $e) { die('Fehler beim Initialisieren: ' . $e->getMessage()); } @@ -120,34 +117,6 @@ try { $showLocalLogin = isset($_GET['local']) && $_GET['local'] === '1'; - // --- Individualisierung der Login-Seite ------------------------------- - // Alle Werte sind optional; leer bedeutet "Standard verwenden". - $loginBrand = $db->getSetting('login_brand_name', '') ?: $appTitle; - $loginLogo = $db->getSetting('login_logo_url', '') ?: $logoUrl; - $showPanel = $db->getSetting('login_panel_enabled', '1') === '1'; - $claimTitle = $db->getSetting('login_claim_title', '') ?: __('auth_claim_title'); - $claimText = $db->getSetting('login_claim_text', '') ?: __('auth_claim_text'); - - $featureRaw = trim((string)$db->getSetting('login_features', '')); - if ($featureRaw !== '') { - $loginFeatures = array_values(array_filter(array_map('trim', preg_split('/\r\n|\r|\n/', $featureRaw)))); - } else { - $loginFeatures = [__('auth_feature_1'), __('auth_feature_2'), __('auth_feature_3')]; - } - - $loginFooter = $db->getSetting('login_footer', '') ?: ('© ' . date('Y') . ' ' . $loginBrand); - $loginBgImage = trim((string)$db->getSetting('login_bg_image', '')); - $loginBgFrom = $db->getSetting('login_bg_from', '') ?: '#3b2f8f'; - $loginBgTo = $db->getSetting('login_bg_to', '') ?: '#6d5ce7'; - $loginOverlay = max(0, min(90, (int)$db->getSetting('login_bg_overlay', '40'))); - - $visualStyle = '--login-from:' . htmlspecialchars($loginBgFrom, ENT_QUOTES) - . ';--login-to:' . htmlspecialchars($loginBgTo, ENT_QUOTES) - . ';--login-overlay:' . ($loginOverlay / 100); - if ($loginBgImage !== '') { - $visualStyle .= ";--login-image:url('" . htmlspecialchars($loginBgImage, ENT_QUOTES) . "')"; - } - } catch (Exception $e) { die('Datenbankfehler: ' . $e->getMessage()); } @@ -158,65 +127,57 @@ try { <?= __('login_title') ?> – <?= htmlspecialchars($appTitle) ?> - - - - + - - - -
-
- - - - - - -
-
-

-

- -
    - -
    • - -
- -
-
-
- - -
-
-
- $label): ?> - - -
- + +
+
+ $label): ?> + +
+ +
diff --git a/login_simple.php b/login_simple.php index 29df4a5..65833f5 100644 --- a/login_simple.php +++ b/login_simple.php @@ -1,7 +1,7 @@ Login - <?= htmlspecialchars($appTitle) ?> - - - - - - -