diff --git a/Readme.md b/Readme.md index 7019def..af6cb97 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.4.0-blueviolet) +![Version](https://img.shields.io/badge/Version-2.5.0-blueviolet) ![CI](https://github.com/friloo/unifi-voucher-tool/actions/workflows/ci.yml/badge.svg) @@ -45,6 +45,8 @@ - 💾 **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 @@ -59,31 +61,35 @@ ## 📸 Screenshots +> Alle Screenshots stammen aus der Oberfläche in Version 2.5.0 (neues Design-System). + ### Anmeldung & Voucher-Erstellung
- Login mit Microsoft 365 - Voucher erstellen - Voucher-Ergebnis + Anmeldung + Anmeldung mit eigenem Branding
-### Bulk-Erstellung & Dark Mode -
- Bulk-Voucher-Erstellung - Dashboard im Dark Mode + Voucher erstellen + Einstellungen der Login-Seite
-### Administration & Updater +
+ Voucher-Ergebnis mit QR-Code + Bulk-Voucher-Erstellung +
+ +### Administration
Dashboard - Auto-Updater + Dashboard im Dark Mode
- Updater – Ausgangszustand - Wartungsmodus + Live-Voucher-Verwaltung + Einstellungen
### REST-API, 2FA & Integrationen @@ -97,6 +103,17 @@ Zwei-Faktor-Authentifizierung +### Updater & Wartungsmodus + +
+ Updater – Ausgangszustand + Auto-Updater mit verfügbarem Update +
+ +
+ Wartungsmodus +
+ --- ## 📋 Anforderungen @@ -220,6 +237,57 @@ 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: @@ -378,11 +446,12 @@ 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.4.0** · Autor: **Friederich Loheide** · Lizenz: **MIT** +**Version 2.5.0** · Autor: **Friederich Loheide** · Lizenz: **MIT**
diff --git a/admin/api_keys.php b/admin/api_keys.php index a2bbbfb..4817b71 100644 --- a/admin/api_keys.php +++ b/admin/api_keys.php @@ -68,28 +68,12 @@ $adminBase = ''; API-Schlüssel – <?= htmlspecialchars($appTitle) ?> - - - -

🔑 API-Schlüssel

+
+
+

API-Schlüssel

+

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

+
+
@@ -130,6 +114,7 @@ code { font-family:monospace; background:var(--bg-hover); padding:2px 6px; borde

Noch keine API-Schlüssel angelegt.

+
@@ -139,15 +124,16 @@ code { font-family:monospace; background:var(--bg-hover); padding:2px 6px; borde - +
NamePräfixScopeLimitStatusZuletzt genutztErstellt von
- Löschen + Löschen
+
@@ -165,7 +151,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 0af636a..edde07b 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,42 +70,12 @@ $actionLabels = [ <?= __('audit_title') ?> - <?= htmlspecialchars($appTitle) ?> - -
-

-

+
+

+

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

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

💾 Backup & Restore

+
+
+

Backup & Restore

+

Konfiguration und Daten sichern oder wiederherstellen.

+
+
@@ -153,7 +143,7 @@ input[type=file] { margin:10px 0; color:var(--text-primary); } - + diff --git a/admin/import.php b/admin/import.php index dfb9725..d938ac5 100644 --- a/admin/import.php +++ b/admin/import.php @@ -93,22 +93,12 @@ $adminBase = ''; CSV-Import – <?= htmlspecialchars($appTitle) ?> - - - -

📥 Voucher-Import (CSV)

+
+
+

Voucher-Import

+

Mehrere Vouchers auf einmal aus einer CSV-Liste erstellen.

+
+
@@ -142,7 +132,7 @@ code { font-family:monospace; background:var(--bg-hover); padding:2px 6px; borde - + diff --git a/admin/index.php b/admin/index.php index e432205..a7fa9a0 100644 --- a/admin/index.php +++ b/admin/index.php @@ -92,74 +92,6 @@ $currentPage = 'dashboard'; <?= __('dashboard_title') ?> – <?= htmlspecialchars($appTitle) ?> -
@@ -171,7 +103,7 @@ $currentPage = 'dashboard'; DB -
@@ -181,43 +113,43 @@ $currentPage = 'dashboard';
-
+
-
+
-
🟢
-
+
+
-
🟡
-
+
+
-
🔴
-
+
+
-
📊
-
+
+
@@ -225,16 +157,16 @@ $currentPage = 'dashboard';
-

🔴

+

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

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

📊

+

-
-
-

🏆

-
+
+
+

+

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

📋

Live
+
+

Live

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

🔧 Integration & Wartung

+
+
+

Integration & Wartung

+

SSO, Webhooks, SMS-Versand und Aufbewahrungsfristen.

+
+
@@ -124,12 +114,12 @@ label { display:block; font-size:14px; color:var(--text-secondary); margin:14px - - @@ -198,7 +188,7 @@ label { display:block; font-size:14px; color:var(--text-secondary); margin:14px -
+ diff --git a/admin/reports.php b/admin/reports.php index e43b056..53427dd 100644 --- a/admin/reports.php +++ b/admin/reports.php @@ -98,36 +98,26 @@ $adminBase = ''; Reporting – <?= htmlspecialchars($appTitle) ?> - - - -

📊 Reporting

+
+
+

Reporting

+

Auswertungen nach Zeitraum, Site und Benutzer.

+
+
- +
- ⬇️ CSV (täglich) - ⬇️ CSV (pro Site) - ⬇️ CSV (pro Nutzer) - + CSV (täglich) + CSV (pro Site) + CSV (pro Nutzer) +
@@ -161,13 +151,23 @@ select.input { padding:9px; border:2px solid var(--border-color); border-radius:
-
+ diff --git a/admin/security.php b/admin/security.php index b1934d0..b7b4ab6 100644 --- a/admin/security.php +++ b/admin/security.php @@ -93,37 +93,24 @@ $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.
@@ -133,7 +120,7 @@ input[type=text] { width:100%; padding:13px; border:2px solid #e0e0e0; border-ra
- 🔑 Recovery-Codes + Recovery-Codes

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

@@ -142,22 +129,22 @@ input[type=text] { width:100%; padding:13px; border:2px solid #e0e0e0; border-ra -
● 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. @@ -168,27 +155,28 @@ input[type=text] { width:100%; padding:13px; border:2px solid #e0e0e0; border-ra
    - - + +
    -
    +

    Aktive Sitzungen:

    - +
    - ← Zurück +
    Zurück
diff --git a/admin/settings.php b/admin/settings.php index fbe7e77..e6429f6 100644 --- a/admin/settings.php +++ b/admin/settings.php @@ -58,6 +58,21 @@ 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); @@ -190,6 +205,17 @@ $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', ''), ]; @@ -207,54 +233,18 @@ $adminBase = ''; - + + + - - -
-

-

+
+

+

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

+

+
+ + + +
+ > + +
+ +
+
+ + +
+
+
+ + +
+
+
+ +
+ +
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+ +
+ +
+ + +
+
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ + +
+
+
+ +
+ + + + +
+
+
+

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

@@ -210,7 +166,7 @@ $currentPage = 'sites'; @@ -220,7 +176,7 @@ $currentPage = 'sites';
-
+ -
+ -
+ @@ -258,7 +198,7 @@ $currentPage = 'vouchers';
-
+
@@ -404,7 +344,7 @@ function renderVouchers() { ${remaining?` ${remaining}
`:''}${v.duration} Min. - + `; }); diff --git a/assets/global.css b/assets/global.css index 27e408f..d54c3e2 100644 --- a/assets/global.css +++ b/assets/global.css @@ -1,471 +1,1542 @@ -/* === DARK MODE CSS VARIABLES === */ +/* ========================================================================= + Unifi Voucher Tool – Design System + Ein einziges Stylesheet fuer Frontend, Login und Admin-Backend. + Aufbau: Tokens -> Base -> Layout -> Komponenten -> Seiten -> Responsive + ========================================================================= */ + +/* ========================================================================= + 1. TOKENS + ========================================================================= */ :root { - --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; + /* 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; } [data-theme="dark"] { - --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; + --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; } -/* === DARK MODE OVERRIDES FOR COMMON ELEMENTS === */ -[data-theme="dark"] body { +/* ========================================================================= + 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); 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); } - -[data-theme="dark"] .header { - background: var(--bg-header) !important; - border-color: var(--border-color) !important; -} - -[data-theme="dark"] .sidebar { - background: var(--bg-sidebar) !important; - border-color: var(--border-color) !important; -} - -[data-theme="dark"] .sidebar-nav a { - color: var(--text-secondary) !important; -} - -[data-theme="dark"] .sidebar-nav a:hover, -[data-theme="dark"] .sidebar-nav a.active { - background: var(--bg-hover) !important; - color: var(--accent) !important; -} - -[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; -} - -[data-theme="dark"] .card-header, -[data-theme="dark"] .modal-header { - border-color: var(--border-color) !important; -} - -[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; - display: flex; - align-items: center; - justify-content: center; - font-size: 18px; - transition: all 0.2s; - color: var(--text-secondary); +.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; } -.dark-mode-toggle:hover { - border-color: var(--accent); - color: var(--accent); - background: var(--bg-hover); +.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; } -/* === LANGUAGE SWITCHER === */ -.lang-switcher { +.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: 4px; + 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; +} + +.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; +} +.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; +} +.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; +} +.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; +} +.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; +} +.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; + cursor: pointer; + transition: all .15s; + flex-shrink: 0; + padding: 0; +} +.dark-mode-toggle:hover, .mobile-menu-btn:hover, .icon-btn:hover { + background: var(--bg-hover); + color: var(--text-primary); + border-color: var(--border-hover); +} +.mobile-menu-btn { display: none; } + +/* Sprachumschalter */ +.lang-switcher { + display: flex; align-items: center; gap: 2px; + padding: 3px; background: var(--bg-hover); border: 1px solid var(--border-color); - border-radius: 8px; - padding: 4px; + border-radius: var(--r-md); flex-shrink: 0; } .lang-btn { - padding: 4px 8px; + padding: 4px 9px; border: none; background: none; - border-radius: 5px; - cursor: pointer; - font-size: 12px; - font-weight: 600; + border-radius: var(--r-xs); + font: inherit; + font-size: 11.5px; + font-weight: 650; + letter-spacing: .02em; 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); + transition: all .15s; } +.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; - top: 0; left: 0; right: 0; bottom: 0; - background: rgba(0,0,0,0.5); + position: fixed; inset: 0; + background: var(--bg-overlay); + backdrop-filter: blur(2px); z-index: 199; } .sidebar-overlay.active { display: block; } -@media (max-width: 768px) { +/* ========================================================================= + 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; } .mobile-menu-btn { display: flex; } - - .sidebar { - transform: translateX(-100%); - transition: transform 0.3s ease; - z-index: 200; - } + .sidebar { transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--shadow-xl); } .sidebar.mobile-open { transform: translateX(0); } - - .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; - } + .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; } } -@media (max-width: 480px) { - .stats-grid { - grid-template-columns: 1fr !important; - } +@media (max-width: 560px) { + .stats-grid, .grid4 { grid-template-columns: 1fr; } .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; } } -/* === 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; +/* ========================================================================= + 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; } } diff --git a/assets/global.js b/assets/global.js index 1f388e6..03c5d92 100644 --- a/assets/global.js +++ b/assets/global.js @@ -17,7 +17,12 @@ function updateDarkModeBtn() { const btn = document.getElementById('darkModeBtn'); if (!btn) return; const isDark = document.documentElement.getAttribute('data-theme') === 'dark'; - btn.textContent = isDark ? '☀️' : '🌙'; + const icon = btn.querySelector('i'); + if (icon) { + icon.className = isDark ? 'fas fa-sun' : 'fas fa-moon'; + } else { + btn.textContent = isDark ? '☀' : '☾'; + } btn.title = isDark ? 'Light Mode' : 'Dark Mode'; } @@ -42,8 +47,8 @@ document.addEventListener('DOMContentLoaded', updateDarkModeBtn); const icons = { success: '✓', error: '✕', - info: 'ℹ', - warning: '⚠' + info: 'i', + 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 fe72cf2..4ee43ad 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 7904514..d08bc2e 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 bc88a91..73b15da 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 e7c9a04..8aa8009 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 b2a0e75..fbf5d31 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 new file mode 100644 index 0000000..7a941b8 Binary files /dev/null and b/docs/screenshots/login-branding.png differ diff --git a/docs/screenshots/login.png b/docs/screenshots/login.png index 8de56db..100d8f4 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 14a9f01..4281ceb 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 new file mode 100644 index 0000000..f4256cb Binary files /dev/null and b/docs/screenshots/settings-login.png differ diff --git a/docs/screenshots/settings.png b/docs/screenshots/settings.png new file mode 100644 index 0000000..fc43c4c Binary files /dev/null and b/docs/screenshots/settings.png differ diff --git a/docs/screenshots/two-factor.png b/docs/screenshots/two-factor.png index 16a0a60..ec2cbc4 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 d793971..331ac34 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 8620a1c..665c5d9 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 fb24534..60aedbe 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 d07d4b2..c4e7c0f 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 new file mode 100644 index 0000000..bce6fe4 Binary files /dev/null and b/docs/screenshots/vouchers.png differ diff --git a/forgot_password.php b/forgot_password.php index ef5cc38..60b4261 100644 --- a/forgot_password.php +++ b/forgot_password.php @@ -83,30 +83,15 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') { <?= __('reset_title') ?> – <?= htmlspecialchars($appTitle) ?> + + + + - - -
+ +
@@ -129,11 +114,11 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
- + - +
diff --git a/includes/admin_nav.php b/includes/admin_nav.php index 2c39349..f952293 100644 --- a/includes/admin_nav.php +++ b/includes/admin_nav.php @@ -8,138 +8,126 @@ $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 2cfafc0..3550bc7 100644 --- a/index.php +++ b/index.php @@ -284,112 +284,69 @@ function buildPrintCard($template, $data, $instructionHeader, $instructionText, <?= htmlspecialchars($appTitle) ?> + + + + - + - + -
-
- $label): ?> - - -
- -
- - -
-
👋 htmlspecialchars($currentUser['name'])]) ?>
-
- isAdmin()): ?> - ⚙️ +
+ + + + +
+
+ $label): ?> + + +
+ + + isAdmin()): ?> + + + + +
+
+
+ + + +
+ + + + -
-
- -
-
-
- 🔐 -
-
- +
@@ -397,7 +354,10 @@ function buildPrintCard($template, $data, $instructionHeader, $instructionText, -

+
+

+

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

+
+

+

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

Code anklicken zum Kopieren

+

-
- +
-
📶
+


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

@@ -646,7 +619,7 @@ function buildPrintCard($template, $data, $instructionHeader, $instructionText,
- @@ -670,7 +643,7 @@ function buildPrintCard($template, $data, $instructionHeader, $instructionText, new QRCode(document.getElementById('qrcode'), { text: '', width: 160, height: 160, - colorDark: '#ffffff', colorLight: 'transparent', + colorDark: '#101625', colorLight: '#ffffff', correctLevel: QRCode.CorrectLevel.M }); }); @@ -742,7 +715,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) { @@ -750,7 +723,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 44a0fe9..cd11ce6 100644 --- a/install.php +++ b/install.php @@ -185,153 +185,54 @@ if ($step === 5 && $_SERVER['REQUEST_METHOD'] === 'POST') { UniFi Voucher System - Installation + + + + + - -
-

🚀 UniFi Voucher System

-

Installation

+ +
+
+ +
+

UniFi Voucher System

+

Installation in fünf Schritten

+
+
1
@@ -354,7 +255,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
@@ -382,7 +283,7 @@ if ($step === 5 && $_SERVER['REQUEST_METHOD'] === 'POST') {
- + @@ -411,7 +312,7 @@ if ($step === 5 && $_SERVER['REQUEST_METHOD'] === 'POST') {
- + @@ -461,7 +362,7 @@ if ($step === 5 && $_SERVER['REQUEST_METHOD'] === 'POST') {
Leer lassen, wenn M365-Login nicht verwendet werden soll
- + @@ -474,7 +375,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 6e71868..af979e8 100644 --- a/lang/de.php +++ b/lang/de.php @@ -1,6 +1,9 @@ 'Übersicht', + 'nav_group_manage' => 'Verwaltung', + 'nav_group_system' => 'System', 'nav_dashboard' => 'Dashboard', 'nav_sites' => 'Sites verwalten', 'nav_users' => 'Benutzer verwalten', @@ -98,7 +101,9 @@ return [ 'voucher_email_hint' => 'gast@example.com', 'voucher_create_btn' => 'Voucher erstellen', 'voucher_creating' => 'Erstelle Voucher...', - 'voucher_success_title' => '✓ Ihr Zugangs-Code', + '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_validity' => 'Gültig für {minutes} Minuten ab Erstellung', 'voucher_qr_label' => 'QR-Code scannen zum Verbinden', 'voucher_print_btn' => 'Code ausdrucken', @@ -119,6 +124,7 @@ 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', @@ -214,6 +220,25 @@ 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', @@ -244,13 +269,18 @@ 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.', @@ -262,7 +292,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 4651fb9..33c423c 100644 --- a/lang/en.php +++ b/lang/en.php @@ -1,6 +1,9 @@ 'Overview', + 'nav_group_manage' => 'Management', + 'nav_group_system' => 'System', 'nav_dashboard' => 'Dashboard', 'nav_sites' => 'Manage Sites', 'nav_users' => 'Manage Users', @@ -98,7 +101,9 @@ return [ 'voucher_email_hint' => 'guest@example.com', 'voucher_create_btn' => 'Create Voucher', 'voucher_creating' => 'Creating Voucher...', - 'voucher_success_title' => '✓ Your Access Code', + '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_validity' => 'Valid for {minutes} minutes from creation', 'voucher_qr_label' => 'Scan QR code to connect', 'voucher_print_btn' => 'Print Code', @@ -119,6 +124,7 @@ 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', @@ -214,6 +220,25 @@ 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', @@ -244,13 +269,18 @@ 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.', @@ -262,7 +292,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 1530eef..1e977f7 100644 --- a/login.php +++ b/login.php @@ -10,7 +10,10 @@ require_once __DIR__ . '/includes/I18n.php'; try { $auth = new Auth(); - if ($auth->isLoggedIn()) { header('Location: index.php'); exit; } + // 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; } } catch (Exception $e) { die('Fehler beim Initialisieren: ' . $e->getMessage()); } @@ -117,6 +120,34 @@ 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()); } @@ -127,57 +158,65 @@ try { <?= __('login_title') ?> – <?= htmlspecialchars($appTitle) ?> + + + + - - -
-
- $label): ?> - - + + + +
+
+ + + + + + +
+
+

+

+ +
    + +
    • + +
+ +
+
+
+ + +
+
+
+ $label): ?> + + +
+
- -