Redesign: gemeinsames Design-System für Frontend und Backend
Some checks failed
CI / PHP Lint (push) Waiting to run
CI / PHP Lint-1 (push) Waiting to run
CI / Unit Tests & Static Analysis (push) Waiting to run
CI / PHP Lint (pull_request) Has been cancelled
CI / PHP Lint-1 (pull_request) Has been cancelled
CI / Unit Tests & Static Analysis (pull_request) Has been cancelled

Frontend, Login/Installer/Updater und der komplette Admin-Bereich nutzen
jetzt ein einziges Stylesheet (assets/global.css) statt pro Seite
dupliziertem Inline-CSS.

Design-System
- Tokens für Flächen, Text, Linien, Marke, Status, Radien, Schatten und
  Layout-Maße; Dark Mode ausschließlich über Tokens (keine !important-
  Overrides mehr)
- Komponenten: Buttons, Formularfelder, Cards, Tabellen, Badges, Alerts,
  Tabs, Pagination, Modals, Toasts, Statistik-Kacheln, Empty States
- Schrift Inter mit System-Fallback

Oberfläche
- Admin-Shell neu: durchgehende Sidebar mit Marke, gruppierter Navigation
  und Benutzerbereich; schlanke Topbar mit Breadcrumb
- Dashboard: ruhige KPI-Kacheln mit Icon-Chips, Charts an Theme-Farben
  gekoppelt
- Öffentliche Voucher-Seite: App-Topbar, klare Formularstruktur und
  Ticket-Darstellung des erstellten Codes inkl. QR-Code
- Login/Passwort/2FA: zweispaltiges Auth-Layout bzw. Fokus-Karten
- Updater und Wartungsmodus im gleichen Look (Wartungsseite bleibt
  bewusst eigenständig ohne externe Abhängigkeiten)
- Emoji-Icons in der UI durch Font-Awesome-Icons ersetzt

Nebenbei behoben
- Falscher SRI-Hash blockierte qrcode.min.js – QR-Codes wurden auf der
  Voucher-Seite und bei der 2FA-Einrichtung nie gerendert
- assets/global.css wurde in mehreren Admin-Seiten über einen falschen
  Pfad eingebunden ($adminBase = '' statt '../')
- TinyMCE lädt ohne API-Key jetzt die GPL-Variante von cdnjs – kein
  "valid API key required"-Banner mehr im Einstellungs-Editor
- Tabellen in Cards scrollen horizontal statt zu überlaufen

Screenshots in docs/screenshots neu erstellt, README aktualisiert (neuer
Abschnitt "Design-System", Version 2.5.0).

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Friederich Loheide 2026-09-22 20:33:52 +00:00
parent bad70a631f
commit 498c7e28e0
43 changed files with 2165 additions and 1740 deletions

View file

@ -32,52 +32,21 @@ $redirectUri = $protocol . '://' . $host . $scriptPath . '/m365_callback.php';
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>M365 Debug</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
<link rel="stylesheet" href="assets/global.css">
<style>
body {
font-family: monospace;
padding: 20px;
background: #f5f5f5;
}
.section {
background: white;
padding: 20px;
margin-bottom: 20px;
border-radius: 8px;
border: 1px solid #ddd;
}
h2 {
margin-top: 0;
color: #333;
}
.ok {
color: green;
font-weight: bold;
}
.error {
color: red;
font-weight: bold;
}
.info {
color: #666;
font-size: 12px;
margin-top: 5px;
}
code {
background: #f0f0f0;
padding: 2px 6px;
border-radius: 3px;
}
.copyable {
background: #f9f9f9;
border: 1px solid #ddd;
padding: 10px;
border-radius: 4px;
margin: 10px 0;
word-break: break-all;
}
body { padding: 32px 20px; }
.section { max-width: 820px; margin: 0 auto 18px; padding: 20px; background: var(--bg-card);
border: 1px solid var(--border-color); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.section h2 { font-size: 15px; margin-bottom: 12px; }
.ok { color: var(--success); font-weight: 600; }
.error { color: var(--danger); font-weight: 600; }
.info { color: var(--text-muted); }
.url { padding: 10px 12px; background: var(--bg-subtle); border: 1px solid var(--border-color);
border-radius: var(--r-sm); font-family: var(--font-mono); font-size: 12.5px; word-break: break-all; }
</style>
</head>
<body>
<body class="app-body">
<h1>🔍 Microsoft 365 OAuth Debug</h1>
<div class="section">