Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 AliceDarkest
|
3bc6c8f75c | ||
|
AliceDarkest
|
9ebdb7ed3e |
@@ -7,6 +7,21 @@ Versionierung [semantisch](https://semver.org/lang/de/).
|
||||
## [Unreleased] – 2026-07-21 · Gesamt-Audit: Light Mode, Barrierefreiheit, AP2-Inhalte, DSGVO
|
||||
|
||||
### Light Mode & Design
|
||||
- **Light-Mode-Fundament:** zentrale UI-Effekte sind jetzt als Theme-Primitives
|
||||
organisiert. Dark Mode behält Neon-Emissionen; Light Mode nutzt warme Elevation,
|
||||
entfernt Text-/Icon-Halos und erhält einen sichtbaren Scrollbar-Thumb. Native
|
||||
Controls folgen über `color-scheme` dem gewählten Theme.
|
||||
- **Theme-Start & FinalProtocol:** Erstbesucher folgen der OS-Farbpräferenz, die
|
||||
Browser-Chrome erhält ein passendes `theme-color` und FinalProtocol lädt keinen
|
||||
ungenutzten Legacy-Style mehr; die statischen Lernseiten erhalten daraus nur noch
|
||||
eine minimale Reset-Basis.
|
||||
- **Kritische Light-Mode-Fälle behoben:** Login-Overlay, SyntaxSaga-Bühne,
|
||||
CodeEscape-Terminal, NetWorker-Guide und die Farbenblind-Palette sind in heller
|
||||
Darstellung wieder lesbar und kontraststark. A11y-Widget und FinalProtocol
|
||||
verwenden ebenfalls themefähige Farben.
|
||||
- **Ansichtswechsel abgesichert:** zentrale SPA-Übergänge starten oben, ohne laufendes
|
||||
Antwortfeedback zu versetzen. FinalProtocol scrollt Ergebnisse und Neustarts gezielt
|
||||
ins Sichtfeld; SyntaxSaga und DevLab fokussieren ohne Scrollsprung.
|
||||
- **Echter Light Mode statt Invertierung:** Light-Tokens auf WCAG AA nachgeschärft
|
||||
(Akzent, Muted, Sekundär, Spielakzente), neues `--warn`-Token. Die Spielkarten der
|
||||
Plattform-Hülle erhalten im Light Mode farbton-treu abgedunkelte Akzente statt
|
||||
@@ -48,6 +63,14 @@ Versionierung [semantisch](https://semver.org/lang/de/).
|
||||
- **Demo-Konto „NeuralTest"** wird per Migration aus produktiven Datenbanken entfernt.
|
||||
|
||||
### Technik & Qualität
|
||||
- **E-Mail-Versand diagnostizierbar:** Bestätigungs- und Reset-Mails schreiben jetzt
|
||||
datensparsame, korrelierbare Ereignislogs für Token-Erstellung, SMTP-Übergabe,
|
||||
Fehler, erneute Anforderung und Verifikation. Roh-Tokens und Bestätigungslinks
|
||||
werden nie protokolliert; eine SMTP-Annahme wird nicht als Postfachzustellung
|
||||
ausgegeben.
|
||||
- **Legacy aufgeräumt:** die nicht referenzierten Styles für Achievements, Progress,
|
||||
Settings und Soziales sowie `finalflux-check.js` entfernt; der Styleguide dokumentiert
|
||||
die neuen Effekt-Primitives.
|
||||
- **Chart.js lokal ausgeliefert** statt vom CDN – das einzige externe Asset entfällt,
|
||||
wodurch die Datenschutzerklärung wieder zur Realität passt.
|
||||
- **Security-Header** ergänzt: Content-Security-Policy (self-hosted), Referrer-Policy;
|
||||
|
||||
+6
-4
@@ -162,16 +162,18 @@ Feedback-Konvention (Blau/Rot) einhalten.
|
||||
## Do / Don't
|
||||
|
||||
**Do**
|
||||
- Farben/Schatten/Glow ausschließlich über Tokens.
|
||||
- Farben, Schatten und Effekte ausschließlich über Tokens. Für Effekte die
|
||||
Primitives `--g-text`, `--g-icon`, `--g-strong`, `--g-amb`, `--g-card`,
|
||||
`--g-card-hover`, `--g-overlay` und `--g-focus` verwenden; keine direkten
|
||||
Glow-Geometrien in Komponenten schreiben.
|
||||
- Auf Akzentflächen Text in `--accent-ink`.
|
||||
- Erfolg = Blau, Fehler = Rot (nie Grün/Orange für „richtig/falsch").
|
||||
- Neue Komponenten an den `.mf-*`-Bausteinen orientieren.
|
||||
|
||||
**Don't**
|
||||
- Keine hart kodierten Hex-/RGBA-Werte in Templates oder Spiele-CSS.
|
||||
- Nicht die **Legacy-Dateien** als Stil-Referenz nehmen: `achievements.css`, `progress.css`,
|
||||
`settings.css`, `soziales.css` (ungenutzt) sowie alte Schrift-Deklarationen
|
||||
(`'Segoe UI'`/`'Poppins'`) entsprechen **nicht** dem aktuellen System. Maßgeblich ist `theme.css`.
|
||||
- Keine direkten `0 0 … var(--glow-*)`-, `text-shadow`- oder `drop-shadow`-Werte
|
||||
in Komponenten. Maßgeblich ist `theme.css`.
|
||||
|
||||
---
|
||||
|
||||
|
||||
+5
-1
@@ -21,7 +21,7 @@ Basis-Pfad: `RES` = `src\main\resources`
|
||||
## Umsetzungsstatus (Stand 2026-07-21, auf `main`)
|
||||
|
||||
- ✅ **AP 0** Quick Wins — vollständig (inkl. V21-Reseed-Migration für Alt-DBs)
|
||||
- ✅ **AP 1** Light Mode — vollständig, alle Kontraste WCAG-AA rechnerisch geprüft
|
||||
- ✅ **AP 1** Light Mode — vollständig, alle Kontraste WCAG-AA rechnerisch geprüft. ⚠️ **Nachtrag (2026-07-21):** Glow-Effekte wirken im Light Mode störend → Alternative nötig, s. AP 1e.
|
||||
- ✅ **AP 2** Header-Icons — vollständig
|
||||
- ✅ **AP 3** Barrierefreiheits-Widget — vollständig
|
||||
- ✅ **AP 4** Spielanleitungen & Hints — vollständig (AP 4c TechTacular-Joker war bereits erledigt)
|
||||
@@ -80,6 +80,10 @@ Vorgehen je Spiel: alle Roh-Hexwerte in scoped Custom Properties überführen (`
|
||||
|
||||
**Check:** jeder Spiel-Header, dessen Spiel jetzt theme-fähig ist, braucht den `.mf-theme`-Toggle (theme.js verdrahtet ihn automatisch); mindestens serviceclash.html fehlt er.
|
||||
|
||||
### 1e. Nachtrag: Glow im Light Mode überarbeiten (offen, 2026-07-21)
|
||||
**Befund:** Die aus dem Dark-Mode-Neon-Look übernommenen Glow-Effekte wirken im Light Mode störend (auf fast-weißem Grund lesen sie sich als Schmutz-/Haze-Rand statt als Akzent). Betrifft die durchgereichten Glow-Tokens der Kartenakzente (`--glow-s: rgba(<hex>,.22)`, s. 1b), die spielspezifischen `*-glow`-rgba (s. 1a) und den Glow am `.mf-theme`-Toggle (s. AP 2, `theme.css:120–121`).
|
||||
**Wir brauchen eine Alternative** für den hellen Modus — noch zu entscheiden, z. B. Glow-Alpha im Light-Block deutlich reduzieren/auf 0 setzen, oder den Neon-Glow durch ein dezentes Mittel ersetzen (weicher Schatten / abgesetzter Border / leichter Farbverlauf), das die Erkennungsfunktion behält, ohne den hellen Grund zu trüben. Dark Mode bleibt unverändert.
|
||||
|
||||
---
|
||||
|
||||
## AP 2 — Header-Icons vereinheitlichen
|
||||
|
||||
@@ -0,0 +1,305 @@
|
||||
# Mindflux — Refine 2: Light-Mode-Konzept, Scroll-Verhalten, Restpunkte
|
||||
|
||||
## Kontext
|
||||
|
||||
Folgeplan zu `mindfluxrefine.md`. Die Code-Verifikation (2026-07-21) bestätigt: **alle „vollständig"-Claims aus Refine 1 halten der Prüfung stand**; offen sind AP 1e (Glow im Light Mode), der AP-7-Rest sowie einige Zusatzfunde (s. AP R5). Dieser Plan liefert das, was Refine 1 offen ließ: ein **echtes Light-Mode-Konzept**, das alle Probleme an der Wurzel behebt (statt Glow-Alphas weiter zu dimmen), plus das neue Thema **Scroll-Verhalten** (Ergebnisanzeigen u. ä. müssen oben starten, nicht unten).
|
||||
|
||||
**Audit-Kurzbefunde (2026-07-21, drei unabhängige Durchgänge):**
|
||||
|
||||
- **Light-Mode-Strukturfehler:** Der Light-Block in `theme.css` tauscht nur *Farbwerte/Alphas* der Glow-Tokens. Die *Geometrie* der Effekte (`box-shadow:0 0 20px …`, `text-shadow:0 0 12px …`, `drop-shadow(0 0 8px …)`) steht hart in ~70 Komponentenregeln quer durch `theme.css`, alle Spiele-CSS und Template-`<style>`-Blöcke. Ein Halo mit reduziertem Alpha bleibt ein Halo — auf Fast-Weiß liest er sich als Schmutz/Haze. Einzige strukturell adaptierte Stelle heute: `--g-soft` (`0 0 18px` dark → `0 6px 18px` light, `theme.css:31/53`). Genau **eine** Regel neutralisiert einen Glow explizit im Light Mode (`auth.css:127–128`).
|
||||
- **5 im Light Mode kaputte Stellen:** Login-Overlay weiß-auf-weiß (auth.css:123–127 × platform-neural.css:94), SyntaxSaga-Bühne bleibt schwarz (`syntaxsaga.css:250–251`), CodeEscape-Eingaben dunkel-auf-dunkel (`codeescape.css` `.esc-input` `#080604`), NetWorker-Guide-Panel dunkelnavy mit Light-`--muted` (`networker-guide.css`), Farbenblind-Palette × Light = Hellgelb/Hellblau auf Weiß (`accessibility.css:15–23`, `!important` schlägt die Light-Kartenakzente).
|
||||
- **Theme-Bootstrap-Lücken:** `color-scheme` fehlt komplett (native Scrollbars/Form-Controls folgen dem UA-Default), kein `theme-color`-Meta, kein `prefers-color-scheme`-Fallback (Erstbesucher mit OS-Light starten dunkel), alle Templates hardcoden `data-theme="dark"`.
|
||||
- **Scroll:** Im gesamten Projekt existiert **kein einziger** `scrollTo`/`scrollIntoView`/`scrollRestoration`-Aufruf (außer Chat-Autoscroll `neuralnet.js:84`, der korrekt ist). Die vier SPA-Spiele (BugHunter, CodeEscape, NetWorker, ServiceClash) ersetzen Views per `innerHTML` ohne Reset; der FinalProtocol-Quiz kollabiert am Ende einer langen Lernseite (Browser clampt ans neue Seitenende); SyntaxSaga/DevLab fokussieren Inputs ohne `preventScroll`.
|
||||
- **CSS-Leichen:** `achievements.css`, `progress.css`, `settings.css`, `soziales.css` werden nirgends mehr referenziert (repo-weiter Grep leer); `style.css` wird nur noch von `finalflux.html` geladen, ~90 % davon ist toter Dark-Code.
|
||||
|
||||
Basis-Pfad: `RES` = `src\main\resources`
|
||||
|
||||
---
|
||||
|
||||
## Das Konzept: „Licht statt Leuchten"
|
||||
|
||||
**Prinzip:** Dark Mode und Light Mode sind Geschwister mit derselben Farbidentität, aber unterschiedlicher *Physik*:
|
||||
|
||||
| | Dark Mode | Light Mode |
|
||||
|---|---|---|
|
||||
| Metapher | Neon in der Nacht — Elemente **emittieren** Licht | Druck/Material am Tag — Elemente **werfen Schatten** |
|
||||
| Betonung | farbiger Glow (Halo) | **Elevation** (weicher, warm getönter neutraler Schatten) |
|
||||
| Identität/Wiedererkennung | Glow-Farbe | **Akzentfarbe direkt am Element** (Border, Text, Icon) — ist durch `--border-accent`, Icon-Farben und Kartenakzente bereits überall vorhanden |
|
||||
| Text-Halos | ja (`text-shadow`) | **nie** (liest sich als Unschärfe) |
|
||||
| Fokus-Ringe | farbig, weich | farbig, **crisp** (Ring statt Blur — funktional, bleibt farbig) |
|
||||
| Scrims/Overlays | dunkel | dunkel (funktional), aber leicht entschärft |
|
||||
|
||||
**Mechanik:** Effekte werden zu **Primitives** — komplette `box-shadow`/`filter`/`text-shadow`-*Werte* als Tokens, nicht nur Farben. Komponenten schreiben nie mehr `0 0 20px var(--glow-s)`, sondern `var(--g-strong)`. Der Light-Block tauscht dann die *Kategorie* des Effekts (Glow → Elevation), nicht nur die Farbe. Dark bleibt visuell gleich (Blur-Radien werden auf die Primitive normalisiert; ±4 px sind nicht unterscheidbar). `--glow-s`/`--glow-w` bleiben als Farb-Tokens bestehen — die Spiele-CSS remappen sie bereits per `color-mix` auf ihre Akzente, und die Primitives referenzieren sie per `var()`, sodass Spiel-Glows im Dark Mode automatisch die Spielfarbe behalten.
|
||||
|
||||
---
|
||||
|
||||
## AP R0 — Aufräumen (erledigt 2026-07-22)
|
||||
|
||||
1. **Erledigt:** Verwaiste CSS gelöscht: `achievements.css`, `progress.css`, `settings.css`, `soziales.css`. Die Referenzprüfung ergab 0 Treffer; STYLEGUIDE bereinigt.
|
||||
2. **Erledigt:** `style.css` auf eine vierzeilige Basis für die 40 statischen
|
||||
FinalProtocol-Lernseiten reduziert; FinalProtocol-Hub lädt sie nicht mehr.
|
||||
3. **Erledigt:** Nicht eingebundenes `finalflux-check.js` entfernt. `fluxtimer.css` bleibt separat offen, da die Datei in diesem Paket nicht geändert wurde.
|
||||
|
||||
---
|
||||
|
||||
## AP R1 — Effekt-Primitives (Kern des Light-Konzepts)
|
||||
|
||||
### R1a. Tokens in `RES\static\css\theme.css` — erledigt 2026-07-22
|
||||
|
||||
In den Dark-Block (Z. 11–32) und Light-Block (Z. 33–54) ergänzen. Schattenfarbe Light ist **warmes Braun** `rgb(67,48,26)` (zur Creme-Palette passend, kein totes Grau/Schwarz):
|
||||
|
||||
```css
|
||||
:root, [data-theme="dark"] {
|
||||
/* … bestehende Tokens … */
|
||||
color-scheme:dark;
|
||||
--g-text:0 0 12px var(--glow-s); /* Text-Halo: Logo, Headline-Akzent, *-brand b */
|
||||
--g-icon:drop-shadow(0 0 8px var(--glow-s)); /* leuchtende Glyphen/Embleme */
|
||||
--g-strong:0 0 20px var(--glow-s); /* starke Betonung: aktive Nav/Tabs, Primär-Btn */
|
||||
--g-amb:0 0 14px var(--glow-w); /* dezenter Schein: Icon-Hover, Toggle, Burger */
|
||||
--g-card:drop-shadow(0 0 7px var(--glow-w)); /* Spielkarten-Grundzustand */
|
||||
--g-card-hover:drop-shadow(0 0 16px var(--glow-s));
|
||||
--g-overlay:0 24px 60px rgba(0,0,0,.5); /* schwebende Panels: Guide, Drawer, A11y */
|
||||
--g-focus:0 0 0 3px var(--glow-w); /* Fokus-Ring (bleibt in beiden Themes farbig) */
|
||||
--scroll-thumb:var(--line);
|
||||
}
|
||||
[data-theme="light"] {
|
||||
/* … bestehende Tokens … */
|
||||
color-scheme:light;
|
||||
--bg-glow: radial-gradient(900px 420px at 60% -10%, rgba(214,81,22,.05), transparent 60%); /* statt .10 — Haze halbieren */
|
||||
--g-text:none;
|
||||
--g-icon:none;
|
||||
--g-strong:0 2px 10px rgba(67,48,26,.18), 0 1px 3px rgba(67,48,26,.10);
|
||||
--g-amb:0 1px 5px rgba(67,48,26,.10);
|
||||
--g-card:drop-shadow(0 2px 5px rgba(67,48,26,.10));
|
||||
--g-card-hover:drop-shadow(0 8px 18px rgba(67,48,26,.16));
|
||||
--g-overlay:0 18px 44px rgba(67,48,26,.20);
|
||||
--g-focus:0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
|
||||
--scroll-thumb:#d9cbb2; /* --line #f1e8d8 ist auf #fbf6ec unsichtbar */
|
||||
}
|
||||
```
|
||||
|
||||
Scrollbar-Regel `theme.css:64` auf `background:var(--scroll-thumb)` umstellen.
|
||||
|
||||
### R1b. Mechanische Migration in `theme.css`
|
||||
|
||||
| Zeile | Selektor | Alt | Neu |
|
||||
|---|---|---|---|
|
||||
| 79 | `.mf-logo .mark` | `drop-shadow(0 0 8px var(--glow-s))` | `filter:var(--g-icon)` |
|
||||
| 80 | `.mf-logo .txt b` | `text-shadow:0 0 12px var(--glow-s)` | `text-shadow:var(--g-text)` |
|
||||
| 87 | `.mf-nav a.active` | `0 0 20px var(--glow-s)` | `box-shadow:var(--g-strong)` |
|
||||
| 94 | `.mf-avatar` | `0 0 14px var(--glow-s)` | `box-shadow:var(--g-strong)` (gleiche Farbstärke-Familie wie heute) |
|
||||
| 102/104 | `.mf-streak .fire` / `.mf-brain` | drop-shadows | `filter:var(--g-icon)` |
|
||||
| 109 | `.mf-hello h1 .nm` | `text-shadow:0 0 16px var(--glow-s)` | `text-shadow:var(--g-text)` |
|
||||
| 113/120/202 | iconbtn-Hover / `.mf-theme` / `.mf-burger` | `0 0 14px var(--glow-w)` | `box-shadow:var(--g-amb)` |
|
||||
| 128/130 | `.mf-card` / `:hover` | drop-shadow 7/16px | `filter:var(--g-card)` / `var(--g-card-hover)` |
|
||||
| 131 | `.mf-card .ico` | drop-shadow | `filter:var(--g-icon)` |
|
||||
| 136 | `.mf-card:hover .mf-play` | `0 0 16px var(--glow-s)` | `box-shadow:var(--g-strong)` |
|
||||
| 146 | `.mf-panel.accent` | `0 0 20px var(--glow-w)` | `box-shadow:var(--g-amb)` |
|
||||
| 151 | `.mf-bar > i` | `0 0 10px var(--glow-s)` | eigenes Primitive `--g-bar` (dark `0 0 10px var(--glow-s)` / light `none`) — der Balken trägt seine Farbe selbst, im Light braucht er keinen Hof |
|
||||
| 154 | `.mf-btn` | `0 0 18px var(--glow-s)` | `box-shadow:var(--g-strong)` |
|
||||
| 168 | Input-Fokus | `0 0 0 3px var(--glow-w)` | `box-shadow:var(--g-focus)` |
|
||||
| 182 | `.mf-cardbox` | `0 0 30px var(--glow-w)` | Hero-Aura: Zweizeiler — Basis `box-shadow:var(--g-strong)`, plus `[data-theme="dark"] .mf-cardbox{box-shadow:0 0 30px var(--glow-w)}` |
|
||||
| 223 | Mobile `.mf-sidebar` | `0 18px 50px rgba(0,0,0,.55)` | `box-shadow:var(--g-overlay)` |
|
||||
| 238 | `.mf-tab.active` | `0 0 18px var(--glow-s)` | `box-shadow:var(--g-strong)` |
|
||||
|
||||
### R1c. `platform-neural.css`
|
||||
|
||||
Hat als einzige Datei schon gute Struktur-Overrides (Z. 91 ersetzt Schwarz- durch Grünschatten — Vorbild). Nachziehen: Z. 87 Logo-Drop-Shadow im Light auf `filter:none`; Z. 90 äußeren `0 0 13px`-Glow der aktiven Nav im Light streichen (Inset-Ring reicht). Die `--glow-s`-Kartenwerte (Z. 41–49/99–107) bleiben — sie speisen nach R1b nur noch Dark-Effekte.
|
||||
|
||||
### R1d. Spiele-CSS + Guide/Widget-CSS migrieren
|
||||
|
||||
Gleiches Muster in allen Dateien; die Spiel-`--glow-s`-Remaps (z. B. `mindmatch.css:364`) bleiben unverändert und speisen die Primitives automatisch mit der Spielfarbe. Betroffene Stellen (Audit-Inventar):
|
||||
|
||||
- **Text-Halos** → `text-shadow:var(--g-text)`: `syntaxsaga.css:40`, `mindmatch.css:53`, `techtacular.css:48`, `devlab.css` (`.dl-tube span`), `devlabgame.css` (Header-Titel), `codeescape.css` (`.esc-brand b`, `.esc-result .score`), `bughunter.css` (`.bh-brand b`, Stamp), `networker.css` (`.nw-brand b`, `.nw-final-score`), `serviceclash.css` (`.sc-brand b`, `.sc-score`), `auth.css:74` (`.auth-head b`), `style.css:89` (falls nach R0 noch vorhanden), Template-`<style>`: `progress.html:14` (Prozentzahl).
|
||||
- **Box-Glows** → `var(--g-strong)`/`var(--g-amb)` nach Gewicht: `syntaxsaga.css:37/70/100/125/136/200/229/233`, `mindmatch.css:40/106/226/237/280/287/299/324`, `techtacular.css:39/75/174/207/299`, `devlab.css:102/158/173`, `devlabgame.css:10/12/23/49/61/70/78/106/108`, `codeescape.css` (Buttons/Dialog/Hero — Hero-`0 0 50px` als Dark-only-Zweizeiler wie `.mf-cardbox`), `codeescape-guide.css` (`.esc-how .active`, `.esc-door.ready`, `.esc-input.bad`), `bughunter.css`, `networker.css`, `serviceclash.css` (`.sc-meter i`), `fluxtimer.css:6/7`, `accessibility.css:29`, `accessibility-placement.css:2/16`, `auth.css:14/34/88/98` (`.neon-btn` inkl.: den `::before`-Conic-Blur-Rotor Z. 95/99 im Light per `display:none`).
|
||||
- **Fokus-Ringe** → `var(--g-focus)`: `syntaxsaga.css:160`, `devlabgame.css:35/39`, CodeEscape-Inputs.
|
||||
- **Schwarz-Schatten** → `var(--g-overlay)` bzw. warm getönt: `game-guide.css:72`, `accessibility.css:30`, `accessibility-placement.css:17`, `fluxtimer.css:8` (+ Z. 14 `inset`-Schwarz auf hellem Display im Light entfernen), `serviceclash.css` (`.sc-card`), `bughunter.css` (Drawer, dort auch die im Light unsichtbaren `rgba(255,255,255,.09–.16)`-Inset-Highlights auf Light-Varianten umstellen).
|
||||
- **Scrims** (funktional, bleiben dunkel, aber vereinheitlichen): `mindmatch.css:309`, `techtacular.css:192`, `syntaxsaga.css:216`, `devlabgame.css:104` — im Light auf das Muster `game-guide.css:138` (`rgba(15,23,42,.5)`) wechseln, damit sich nicht zusätzlich der warme `--bg-glow`-Radial über den Scrim legt (`var(--bg-glow)` aus den Scrim-Deklarationen entfernen).
|
||||
- **Hint-Glow** `game-guide.css:155/160–161` (`#ffd54a`): Light-Override `[data-theme="light"] .mm-card.hinted { box-shadow:0 0 0 2px #8a6a06, 0 4px 12px rgba(67,48,26,.18); filter:none; }` (Warn-Ton aus dem Light-Block).
|
||||
|
||||
### R1e. Chart/Dashboard-`<style>`-Blöcke
|
||||
|
||||
`dashboard.html:14/16/18/20/29/31/43/46/171`, `achievements.html:12–16`, `admin/dashboard.html:17–19`, `impressum.html:12`, `profile.html:11`: alle `text-shadow`/`drop-shadow`/`0 0 Npx`-Vorkommen auf die Primitives umstellen (Suchmuster: `grep -n "glow\|text-shadow\|drop-shadow" RES\templates -r`).
|
||||
|
||||
---
|
||||
|
||||
## AP R2 — Kaputte Light-Stellen (kritische Punkte erledigt 2026-07-22)
|
||||
|
||||
### R2a. Login/Registrierung: Overlay weiß-auf-weiß (kritisch)
|
||||
|
||||
Ursache: `auth.css:123–127` setzt für Light `#fff`-Text/weiße Ghost-Border (Annahme: kräftiges Orange-Panel), aber auf der Plattform übersteuert `platform-neural.css:94` den Overlay-Grund mit Fast-Weiß. Fix in `platform-neural.css` (Light-Sektion, höhere Spezifität durch `.sn-platform` gewinnt gegen auth.css):
|
||||
|
||||
```css
|
||||
html[data-theme="light"].sn-platform body .overlay-panel h3 { color:#10291f; text-shadow:none; }
|
||||
html[data-theme="light"].sn-platform body .overlay-panel p { color:#3c554a; }
|
||||
html[data-theme="light"].sn-platform body .ghost-btn { color:#167a52; border-color:rgba(22,122,82,.55); }
|
||||
html[data-theme="light"].sn-platform body .ghost-btn:hover { background:rgba(22,122,82,.10); }
|
||||
```
|
||||
|
||||
### R2b. SyntaxSaga: Bühne bleibt schwarz (kritisch)
|
||||
|
||||
`syntaxsaga.css:250–251` hardcodet `#07100b` + grüne Scanlines. Light-Block ergänzen (Palette: helles Bühnen-Grün zur Light-`--ss-accent` `#277d49`):
|
||||
|
||||
```css
|
||||
[data-theme="light"] body.ss-body {
|
||||
background:radial-gradient(1100px 500px at 50% -10%, rgba(39,125,73,.08), transparent 60%), #eef6f0;
|
||||
}
|
||||
[data-theme="light"] body.ss-body::before {
|
||||
background:repeating-linear-gradient(0deg, rgba(16,64,40,.05) 0 1px, transparent 1px 4px);
|
||||
}
|
||||
```
|
||||
|
||||
### R2c. CodeEscape: Terminal-Eingaben & Dark-Inks (kritisch)
|
||||
|
||||
- `.esc-input, .esc-select` (`#080604`): Light-Override `[data-theme="light"] .esc-input, [data-theme="light"] .esc-select { background:#fffaf0; color:var(--text); border-color:var(--border); }` — Dark behält den Terminal-Look.
|
||||
- Hardcodierte Dark-Inks auf Akzentflächen durch das Token ersetzen (funktioniert in beiden Themes): `.esc-btn:hover`/`.primary` `#160d00` → `var(--accent-ink)`; `codeescape-guide.css` `.esc-fragment small` `#160d00` → `var(--accent-ink)`; `.esc-how .done b` `#06120a` → `var(--accent-ink)`.
|
||||
- Tote Scanlines `rgba(255,255,255,.018)` (`codeescape.css`, `theme.css:138`): im Light-Override auf `rgba(67,48,26,.04)` drehen oder streichen.
|
||||
|
||||
### R2d. NetWorker-Guide: dunkles Panel (kritisch)
|
||||
|
||||
`networker-guide.css` (`.nw-guide` `color-mix(#0b2540 74%, var(--surface))`): Light-Block ergänzen:
|
||||
|
||||
```css
|
||||
[data-theme="light"] .nw-guide { background:var(--surface); border-color:#d3e2f0; box-shadow:var(--g-soft); }
|
||||
```
|
||||
|
||||
(Textfarben laufen dort über `var(--muted)`/`var(--text)` und stimmen dann automatisch.)
|
||||
|
||||
### R2e. Farbenblind-Palette × Light (kritisch)
|
||||
|
||||
`accessibility.css:15–23` erzwingt helle Okabe-Ito-Akzente per `!important` — auf weißen Karten < 1.5:1. Neuen Satz `html[data-theme="light"][data-mf-color="safe"]` mit **abgedunkelten** Okabe-Ito-Entsprechungen ergänzen (gleiche Zuordnung Spiel→Farbfamilie wie im Dark-Satz, Werte rechnerisch ≥ 4.5:1 auf Weiß, beim Umsetzen mit Kontrast-Tool gegenprüfen):
|
||||
|
||||
| Okabe-Ito (dark) | Light-safe |
|
||||
|---|---|
|
||||
| `#e69f00` Orange | `#8a5f00` |
|
||||
| `#56b4e9` Himmelblau | `#19607f` |
|
||||
| `#009e73` Grün | `#007054` |
|
||||
| `#f0e442` Gelb | `#7a6a00` |
|
||||
| `#0072b2` Blau | `#0072b2` (bleibt) |
|
||||
| `#d55e00` Vermillion | `#a94500` |
|
||||
| `#cc79a7` Purpur | `#9c4f79` |
|
||||
|
||||
Die zugehörigen Glow-Alphas entfallen im Light automatisch über die Primitives (R1).
|
||||
|
||||
### R2f. Kleinere Light-Fixes
|
||||
|
||||
1. **Cancel-Hover** `mindmatch.css:128–129`, `techtacular.css:94` (`#fff` auf Blassrosa): Light-Override `[data-theme="light"] .mm-cancel:hover, …` → `background:var(--danger); color:#fff;` (Light-Danger `#be123c`, 7:1). Dark bleibt unverändert.
|
||||
2. **A11y-Widget-Inks:** `accessibility-placement.css:7–15` hardcodet dunkle `--mf-a11y-ink`-Werte — im Light sind die Akzente selbst dunkel. Eine Regel ergänzt: `html[data-theme="light"] body { --mf-a11y-ink:#fff; }` (gewinnt per Spezifität gegen die Skin-Zuweisungen). Panel-Kopf optional angleichen: `[data-theme="light"] .mf-a11y-head { background:var(--surface-2); color:var(--heading); }`.
|
||||
3. **finalflux-Altlast:** `finalflux.css:345` (`#0b0d1b`-Hardcode) funktioniert nur über die fragile `background:transparent`-Kaskade aus `platform-neural.css:61`. Hardcode durch `var(--bg)`-basierte Deklaration ersetzen, damit die Seite auch ohne `sn-platform` beide Themes überlebt.
|
||||
|
||||
**Erledigt:** Login-Overlay, SyntaxSaga-Bühne, CodeEscape-Eingaben und Akzent-Inks,
|
||||
NetWorker-Guide, Farbenblind-Palette für Light Mode, A11y-Widget-Inks sowie der
|
||||
FinalProtocol-Hintergrund. Die noch offenen kleineren Cancel-Hover- und Detaileffekte
|
||||
werden zusammen mit der vollständigen CSS-Migration aus R1 abgeschlossen.
|
||||
|
||||
---
|
||||
|
||||
## AP R3 — Theme-Bootstrap (erledigt 2026-07-22)
|
||||
|
||||
In `RES\static\js\theme.js`:
|
||||
|
||||
1. **Erledigt:** `prefers-color-scheme` wird verwendet, wenn noch keine lokale Auswahl gespeichert ist.
|
||||
2. **Erledigt:** `theme-color` wird beim initialen Anwenden und Umschalten auf `#0a0806` bzw. `#fbf6ec` aktualisiert.
|
||||
3. **Erledigt:** `color-scheme` wird im Dark-/Light-Tokenblock gesetzt.
|
||||
4. **Teilweise erledigt:** geänderte FinalProtocol-Assets tragen neue Versionen; die übrigen Template-Referenzen werden bei ihrer jeweiligen Migration angehoben.
|
||||
|
||||
---
|
||||
|
||||
## AP R4 — Scroll: Ergebnisanzeigen & Ansichten starten oben (weitgehend erledigt 2026-07-22)
|
||||
|
||||
Es gibt projektweit keinen Scroll-Reset. Drei Schichten (zentraler Helper + gezielte Aufrufe), Chat-Autoscroll `neuralnet.js:84` bleibt unangetastet:
|
||||
|
||||
### R4a. Helper in `theme.js` (läuft auf jeder Seite)
|
||||
|
||||
```js
|
||||
window.MindfluxUX = {
|
||||
toTop: function () { window.scrollTo(0, 0); },
|
||||
focusQuiet: function (el) { if (el) el.focus({ preventScroll: true }); }
|
||||
};
|
||||
```
|
||||
|
||||
**Umsetzungshinweis:** Der zentrale Helper ist vorhanden. Die vier SPA-Spiele setzen
|
||||
`history.scrollRestoration` nur auf Spielrouten auf `manual`; ein zentraler,
|
||||
ereignisbasierter Übergangs-Reset deckt Ansichtswechsel ab und lässt Antwort- bzw.
|
||||
Zeilenfeedback unverändert. FinalProtocol, SyntaxSaga, DevLab, MindMatch und
|
||||
TechTacular haben die zusätzlich beschriebenen gezielten Resets/Fokusoptionen.
|
||||
**Offen für die visuelle E2E-Prüfung:** die asynchron gerenderten Ergebniswechsel von
|
||||
CodeEscape, NetWorker und BugHunter müssen im Browser gegen die Scroll-Checkliste
|
||||
validiert und bei Bedarf direkt in den jeweiligen Render-Funktionen präzisiert werden.
|
||||
|
||||
### R4b. SPA-Spiele — Reset bei jedem Ansichtswechsel
|
||||
|
||||
Muster pro Spiel: Mini-Wrapper `function setView(html){ view.innerHTML = html; window.scrollTo(0,0); }`, alle Render-Funktionen darüber. Zusätzlich **nur in diesen vier Skripten** beim Init: `if ('scrollRestoration' in history) history.scrollRestoration = 'manual'; window.scrollTo(0,0);` — verhindert, dass der Browser nach Reload/Back die alte, untere Position auf den neu aufgebauten Katalog anwendet. (Nicht global in `theme.js`: auf Lernseiten/Dashboard ist die Back-Position erwünscht.)
|
||||
|
||||
| Spiel | Funktionen |
|
||||
|---|---|
|
||||
| BugHunter (`bughunter.js`) | `renderBriefing` :29, `renderHunt` :36 (nur bei Fallwechsel, nicht bei Zeilen-Re-Render), `showDebrief` :82, `renderResult` :88 |
|
||||
| CodeEscape (`codeescape.js`) | `renderLobby` :6, `renderRoom` :8, `renderResult` :17 |
|
||||
| NetWorker (`networker.js`) | `renderCatalog` :3, `renderIntro` :5, `renderLevel` :6, `finish` :11 |
|
||||
| ServiceClash (`serviceclash.js`) | `renderCatalog` :2, `renderRun` :4 (**nur bei Ticket-/Indexwechsel**, nicht beim Feedback-Re-Render), `finish` :9 |
|
||||
|
||||
### R4c. FinalProtocol-Quiz (`finalflux-test.js`)
|
||||
|
||||
- `finishIfDone()` Z. 101–104: nach `testResult.hidden = false` → `elements.testResult.scrollIntoView({ block: 'start' });` (Auswertung beginnt oben im Blick, statt dass der Viewport ans geclampte Seitenende fällt).
|
||||
- `restartTest()` Z. 151–158: nach dem Wiedereinblenden → `elements.testRoot.scrollIntoView({ block: 'start' });`
|
||||
|
||||
### R4d. Fokus ohne Scroll-Sprung
|
||||
|
||||
- `syntaxsaga.js`: `renderMission()` — `window.scrollTo(0,0)` vor Z. 209, dann Z. 210 `first.focus({preventScroll:true})`. (`nextBtn.focus()` Z. 297 bleibt — Nutzeraktion am selben Ort.)
|
||||
- `devlabgame.js`: `renderTask()` Z. 243 — `window.scrollTo(0,0)` am Ende; Z. 83 und Z. 233 `focus({preventScroll:true})`.
|
||||
- `codeescape.js:8/15` bleiben (Fokus am Türterminal ist dort korrekt).
|
||||
|
||||
### R4e. Niedrige Prio (nur Mobile relevant)
|
||||
|
||||
`mindmatch.js` `newGame()` :332 und `techtacular.js` `newGame()` :265: `window.scrollTo(0,0)` — Desktop-Bodys sind `overflow:hidden`, mobil scrollt die Seite.
|
||||
|
||||
---
|
||||
|
||||
## AP R5 — Carry-over: Rest aus Refine 1 + Zusatzfunde der Verifikation
|
||||
|
||||
Aus Refine 1 (dort AP 7 / offen):
|
||||
1. **Bean Validation:** `@Valid` + Constraints auf alle Request-DTOs — `BugHunterApiController:17–18`, `DevLabApiController:37/43`, `SyntaxSagaApiController:32/38`, `TechtacularApiController:50/75`, `CodeEscapeApiController` (4 DTOs), `NetworkerApiController` (2), `ServiceClashApiController` (2); `NeuralNetApiController:14/19` `Map<String,String>` → typisierte DTOs.
|
||||
2. **Spring Boot** 3.4.4 → aktuelles 3.4.x-Patch (`pom.xml:11`), Testlauf.
|
||||
3. **CSRF:** Blanket-Exemption `/api/**` (`SecurityConfig:46`) durch Cookie-basierte Tokens ersetzen.
|
||||
4. **Web-Layer-Test** für `GET /profile/export`.
|
||||
|
||||
Zusatzfunde (neu):
|
||||
5. **`UserController:25/45`** bindet die **Entity `User`** direkt als `@RequestBody` ohne Validierung → auf DTO + `@Valid` umstellen (gehört in die Runde von Punkt 1).
|
||||
6. **5 Admin-Templates ohne Footer:** `admin\bughunter.html`, `admin\bughunter-hunt.html`, `admin\codeescape.html`, `admin\codeescape-room.html`, `admin\codeescape-scenario.html` → `th:replace="~{fragments/layout :: footer}"` ergänzen.
|
||||
7. **HSTS** explizit für Prod konfigurieren statt Spring-Default (`SecurityConfig:56–57`).
|
||||
8. Optional (unverändert Phase 2): BugHunter progressive Hinweise (Refine 1, AP 4d).
|
||||
|
||||
---
|
||||
|
||||
## Reihenfolge
|
||||
|
||||
1. **AP R0** Aufräumen → 2. **AP R1** Primitives + Migration (theme.css zuerst, dann platform-neural, dann Spiele-CSS, dann Templates) → 3. **AP R2** kaputte Light-Stellen → 4. **AP R3** Bootstrap → 5. **AP R4** Scroll (unabhängig von 1–4, parallelisierbar) → 6. **AP R5** Carry-over → 7. Gesamtverifikation. STYLEGUIDE.md (Abschnitt „Glow, Schatten & Radien" → Primitives-Tabelle) und CHANGELOG nach R1–R3 nachziehen.
|
||||
|
||||
## Verifikation
|
||||
|
||||
- **Build:** `mvn test` bleibt grün (54/54); App-Boot gegen Wegwerf-Postgres wie gehabt.
|
||||
- **Grep-Gates nach R1:** `grep -rnE "0 0 [0-9]+px var\(--" RES\static\css` → Treffer nur noch in den Primitive-Definitionen von `theme.css`; `grep -rn "text-shadow:0 0" RES\static\css RES\templates` → nur `--g-text`-Definition; `grep -rn "rgba(0,0,0,.5" RES\static\css` → nur Scrims/`--g-overlay`-Definition.
|
||||
- **Visuell (hell UND dunkel):** Dashboard (Karten + Hover), Login/Registrierung (insb. Overlay-Panel!), Settings, Progress, Soziales, NeuralNet, alle 9 Spiele (insb. SyntaxSaga-Bühne, CodeEscape-Eingaben, NetWorker-Guide), FinalProtocol-Lernseite + Quiz, A11y-Panel. Dark Mode muss vor/nach R1 visuell deckungsgleich sein (Stichprobe per Screenshot-Vergleich).
|
||||
- **A11y-Kombinationen:** Light × Hochkontrast (bleibt bewusst dunkel), Light × Farbenblind (neue dunkle Okabe-Ito-Werte sichtbar, Kontrast-Tool ≥ 4.5:1), Light × Mono.
|
||||
- **Native Controls:** Light Mode → helle Scrollbars und helle `<select>`-Dropdowns (Chrome + Firefox); mobile Adressleiste folgt `theme-color`.
|
||||
- **Erstbesuch:** localStorage leeren, OS auf Light stellen → Seite startet hell; OS Dark → dunkel; Umschalter persistiert weiter.
|
||||
- **Scroll:** je SPA-Spiel: langes Board nach unten scrollen → Aktion abschließen → Ergebnis-/Folge-View beginnt **oben**; ServiceClash-Antwort-Feedback und BugHunter-Zeilenauswahl dürfen **nicht** nach oben springen; FinalProtocol: langen Lernartikel bis zum Quiz scrollen, Quiz abschließen → Auswertung oben im Viewport; Reload mitten im Spiel → Katalog startet oben; SyntaxSaga/DevLab: Missions-/Taskwechsel startet oben, Fokus springt nicht; NeuralNet-Chat scrollt weiterhin ans Ende.
|
||||
|
||||
## Offene Punkte (unverändert aus Refine 1, vor Launch)
|
||||
|
||||
- Echte Impressumsdaten (`impressum.html:44–52`) + §1 Datenschutzerklärung.
|
||||
- Support-/Feedback-Adressen bestätigen (`fragments/layout.html:88–89`).
|
||||
|
||||
## Nachtrag 2026-07-22 — E-Mail-Diagnose (erledigt)
|
||||
|
||||
- Der Versand von Bestätigungs- und Reset-Links protokolliert nun korrelierbare
|
||||
Ereignisse: Token-Ausstellung, SMTP-Übergabe begonnen/angenommen/fehlgeschlagen,
|
||||
erneute Anforderung und erfolgreiche Verifikation. Logs enthalten User-/Token-IDs
|
||||
sowie einen gekürzten E-Mail-Fingerprint, niemals den Link oder das Roh-Token.
|
||||
- Wichtig für die Analyse: `SMTP_SUBMISSION_ACCEPTED` bedeutet nur, dass der
|
||||
konfigurierte SMTP-Server die Nachricht angenommen hat. Spamfilter, Bounces und
|
||||
die finale Postfachzustellung müssen zusätzlich im Mailserver bzw. über DSN geprüft
|
||||
werden.
|
||||
- Der Registrierungsabschluss meldet keinen Versand-Erfolg mehr, falls der gerade
|
||||
angelegte Benutzer beim Versand nicht geladen werden kann oder bereits als bestätigt
|
||||
vorliegt; der Grund erscheint als `VERIFICATION_SKIPPED` im Betriebslog.
|
||||
@@ -4,6 +4,8 @@ import com.example.mindflux.service.RegistrationResult;
|
||||
import com.example.mindflux.service.AccountMailService;
|
||||
import com.example.mindflux.service.UserService;
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.slf4j.Logger;
|
||||
import org.slf4j.LoggerFactory;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.PostMapping;
|
||||
import org.springframework.web.bind.annotation.RequestParam;
|
||||
@@ -11,6 +13,8 @@ import org.springframework.web.bind.annotation.RequestParam;
|
||||
@Controller
|
||||
public class RegisterController {
|
||||
|
||||
private static final Logger log = LoggerFactory.getLogger(RegisterController.class);
|
||||
|
||||
private final UserService userService;
|
||||
private final AccountMailService accountMailService;
|
||||
|
||||
@@ -34,9 +38,13 @@ public class RegisterController {
|
||||
return switch (result) {
|
||||
case SUCCESS -> {
|
||||
try {
|
||||
accountMailService.sendVerificationFor(userService.findByUsernameIgnoreCase(username.trim()));
|
||||
yield "redirect:/?registerSuccess";
|
||||
var user = userService.findByUsernameIgnoreCase(username.trim());
|
||||
yield accountMailService.sendVerificationFor(user)
|
||||
? "redirect:/?registerSuccess"
|
||||
: "redirect:/?registerMailError";
|
||||
} catch (RuntimeException e) {
|
||||
log.warn("mail_event=REGISTRATION_VERIFICATION_FAILED errorType={}",
|
||||
e.getClass().getSimpleName());
|
||||
yield "redirect:/?registerMailError";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,6 +10,8 @@ import org.springframework.mail.SimpleMailMessage;
|
||||
import org.springframework.mail.javamail.JavaMailSender;
|
||||
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
|
||||
import org.springframework.stereotype.Service;
|
||||
import org.slf4j.Logger;
|
||||
import org.slf4j.LoggerFactory;
|
||||
|
||||
import java.nio.charset.StandardCharsets;
|
||||
import java.security.MessageDigest;
|
||||
@@ -25,6 +27,7 @@ import java.util.Optional;
|
||||
public class AccountMailService {
|
||||
|
||||
private static final Duration TOKEN_LIFETIME = Duration.ofHours(24);
|
||||
private static final Logger log = LoggerFactory.getLogger(AccountMailService.class);
|
||||
private final AccountEmailTokenRepository tokenRepository;
|
||||
private final UserRepository userRepository;
|
||||
private final JavaMailSender mailSender;
|
||||
@@ -48,32 +51,48 @@ public class AccountMailService {
|
||||
}
|
||||
|
||||
@Transactional
|
||||
public void sendVerificationFor(User user) {
|
||||
if (user == null || user.isEmailVerified()) {
|
||||
return;
|
||||
public boolean sendVerificationFor(User user) {
|
||||
if (user == null) {
|
||||
log.error("mail_event=VERIFICATION_SKIPPED reason=USER_NOT_FOUND_AFTER_REGISTRATION");
|
||||
return false;
|
||||
}
|
||||
String token = issueToken(user, AccountEmailToken.Purpose.EMAIL_VERIFICATION);
|
||||
send(user.getEmail(), "Bestätige deinen Mindflux-Account",
|
||||
if (user.isEmailVerified()) {
|
||||
log.info("mail_event=VERIFICATION_SKIPPED reason=ALREADY_VERIFIED userId={}", user.getId());
|
||||
return false;
|
||||
}
|
||||
IssuedToken issued = issueToken(user, AccountEmailToken.Purpose.EMAIL_VERIFICATION);
|
||||
send(user, issued, "Bestätige deinen Mindflux-Account",
|
||||
"Hallo " + user.getUsername() + ",\n\n"
|
||||
+ "bitte bestätige deine E-Mail-Adresse, um deinen Account freizuschalten:\n"
|
||||
+ publicUrl + "/verify-email?token=" + token + "\n\n"
|
||||
+ publicUrl + "/verify-email?token=" + issued.rawToken() + "\n\n"
|
||||
+ "Der Link ist 24 Stunden gültig und kann nur einmal verwendet werden.\n\n"
|
||||
+ "Falls du dich nicht registriert hast, kannst du diese E-Mail ignorieren.");
|
||||
return true;
|
||||
}
|
||||
|
||||
@Transactional
|
||||
public void resendVerification(String email) {
|
||||
uniqueUserForEmail(email).filter(user -> !user.isEmailVerified()).ifPresent(this::sendVerificationFor);
|
||||
Optional<User> user = uniqueUserForEmail(email);
|
||||
if (user.isEmpty()) {
|
||||
log.info("mail_event=VERIFICATION_RESEND_IGNORED reason=NO_UNIQUE_USER recipientFingerprint={}", recipientFingerprint(email));
|
||||
return;
|
||||
}
|
||||
if (user.get().isEmailVerified()) {
|
||||
log.info("mail_event=VERIFICATION_RESEND_IGNORED reason=ALREADY_VERIFIED userId={}", user.get().getId());
|
||||
return;
|
||||
}
|
||||
log.info("mail_event=VERIFICATION_RESEND_REQUESTED userId={}", user.get().getId());
|
||||
sendVerificationFor(user.get());
|
||||
}
|
||||
|
||||
@Transactional
|
||||
public void requestPasswordReset(String email) {
|
||||
uniqueUserForEmail(email).filter(User::isEmailVerified).ifPresent(user -> {
|
||||
String token = issueToken(user, AccountEmailToken.Purpose.PASSWORD_RESET);
|
||||
send(user.getEmail(), "Passwort für deinen Mindflux-Account zurücksetzen",
|
||||
IssuedToken issued = issueToken(user, AccountEmailToken.Purpose.PASSWORD_RESET);
|
||||
send(user, issued, "Passwort für deinen Mindflux-Account zurücksetzen",
|
||||
"Hallo " + user.getUsername() + ",\n\n"
|
||||
+ "über diesen Link kannst du ein neues Passwort vergeben:\n"
|
||||
+ publicUrl + "/reset-password?token=" + token + "\n\n"
|
||||
+ publicUrl + "/reset-password?token=" + issued.rawToken() + "\n\n"
|
||||
+ "Der Link ist 24 Stunden gültig und kann nur einmal verwendet werden.\n\n"
|
||||
+ "Falls du diese Anfrage nicht gestellt hast, kannst du diese E-Mail ignorieren.");
|
||||
});
|
||||
@@ -91,6 +110,7 @@ public class AccountMailService {
|
||||
value.setConsumedAt(Instant.now());
|
||||
userRepository.save(user);
|
||||
tokenRepository.save(value);
|
||||
log.info("mail_event=VERIFICATION_CONFIRMED userId={} tokenId={}", user.getId(), value.getId());
|
||||
return true;
|
||||
}
|
||||
|
||||
@@ -124,7 +144,7 @@ public class AccountMailService {
|
||||
return users.size() == 1 ? Optional.of(users.getFirst()) : Optional.empty();
|
||||
}
|
||||
|
||||
private String issueToken(User user, AccountEmailToken.Purpose purpose) {
|
||||
private IssuedToken issueToken(User user, AccountEmailToken.Purpose purpose) {
|
||||
tokenRepository.deleteByUserAndPurpose(user, purpose);
|
||||
byte[] bytes = new byte[32];
|
||||
secureRandom.nextBytes(bytes);
|
||||
@@ -135,7 +155,9 @@ public class AccountMailService {
|
||||
token.setTokenHash(hash(rawToken));
|
||||
token.setExpiresAt(Instant.now().plus(TOKEN_LIFETIME));
|
||||
tokenRepository.save(token);
|
||||
return rawToken;
|
||||
log.info("mail_event=TOKEN_ISSUED purpose={} userId={} tokenId={} expiresAt={}",
|
||||
purpose, user.getId(), token.getId(), token.getExpiresAt());
|
||||
return new IssuedToken(rawToken, token.getId(), purpose);
|
||||
}
|
||||
|
||||
private Optional<AccountEmailToken> validToken(String rawToken, AccountEmailToken.Purpose purpose) {
|
||||
@@ -146,15 +168,43 @@ public class AccountMailService {
|
||||
.filter(token -> token.getExpiresAt().isAfter(Instant.now()));
|
||||
}
|
||||
|
||||
private void send(String recipient, String subject, String body) {
|
||||
private void send(User user, IssuedToken issued, String subject, String body) {
|
||||
SimpleMailMessage message = new SimpleMailMessage();
|
||||
message.setFrom(fromAddress);
|
||||
message.setTo(recipient);
|
||||
message.setTo(user.getEmail());
|
||||
message.setSubject(subject);
|
||||
message.setText(body);
|
||||
mailSender.send(message);
|
||||
log.info("mail_event=SMTP_SUBMISSION_STARTED purpose={} userId={} tokenId={} recipientFingerprint={}",
|
||||
issued.purpose(), user.getId(), issued.tokenId(), recipientFingerprint(user.getEmail()));
|
||||
try {
|
||||
mailSender.send(message);
|
||||
// JavaMail bestätigt hier nur die Annahme durch den konfigurierten SMTP-Server,
|
||||
// nicht die spätere Zustellung im Postfach. Für Bounces sind dessen Logs/DSN nötig.
|
||||
log.info("mail_event=SMTP_SUBMISSION_ACCEPTED purpose={} userId={} tokenId={}",
|
||||
issued.purpose(), user.getId(), issued.tokenId());
|
||||
} catch (RuntimeException exception) {
|
||||
log.error("mail_event=SMTP_SUBMISSION_FAILED purpose={} userId={} tokenId={} errorType={} detail={}",
|
||||
issued.purpose(), user.getId(), issued.tokenId(), exception.getClass().getSimpleName(),
|
||||
safeFailureDetail(exception.getMessage()));
|
||||
throw exception;
|
||||
}
|
||||
}
|
||||
|
||||
private String recipientFingerprint(String email) {
|
||||
return hash(email == null ? "" : email.trim().toLowerCase()).substring(0, 12);
|
||||
}
|
||||
|
||||
private String safeFailureDetail(String detail) {
|
||||
if (detail == null || detail.isBlank()) {
|
||||
return "none";
|
||||
}
|
||||
String sanitized = detail.replaceAll("(?i)[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,}", "[redacted-email]")
|
||||
.replaceAll("[\\r\\n]+", " ");
|
||||
return sanitized.substring(0, Math.min(sanitized.length(), 240));
|
||||
}
|
||||
|
||||
private record IssuedToken(String rawToken, Long tokenId, AccountEmailToken.Purpose purpose) { }
|
||||
|
||||
private String hash(String value) {
|
||||
try {
|
||||
byte[] digest = MessageDigest.getInstance("SHA-256")
|
||||
|
||||
@@ -19,3 +19,4 @@ body[class*="mf-a11y-skin-"] .mf-a11y-head{background:color-mix(in srgb,var(--mf
|
||||
body[class*="mf-a11y-skin-"] .mf-a11y-close{background:var(--mf-a11y-accent);color:var(--mf-a11y-ink)}
|
||||
body[class*="mf-a11y-skin-"] .mf-a11y-option[aria-pressed="true"],body[class*="mf-a11y-skin-"] .mf-a11y-option.is-active{border-color:var(--mf-a11y-accent);background:color-mix(in srgb,var(--mf-a11y-accent) 18%,var(--surface));box-shadow:inset 0 0 0 2px var(--mf-a11y-accent)}
|
||||
@media(max-width:700px){.mf-a11y-panel{inset:70px 6px auto 6px!important;width:auto;max-height:calc(100dvh - 82px)}}
|
||||
html[data-theme="light"] body{--mf-a11y-ink:#fff}html[data-theme="light"] .mf-a11y-head{background:var(--surface-2);color:var(--heading)}
|
||||
|
||||
@@ -28,3 +28,6 @@ html[data-mf-cursor="true"],html[data-mf-cursor="true"] *{cursor:url("data:image
|
||||
(Platzierung in accessibility-placement.css). Kein body-padding / Fixed-Dock mehr. */
|
||||
.mf-a11y-trigger{width:42px;height:42px;border:1px solid var(--border);border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface);color:var(--muted);cursor:pointer;transition:all .18s}.mf-a11y-trigger:hover{color:var(--accent);border-color:var(--border-accent);box-shadow:0 0 14px var(--glow-w)}.mf-a11y-trigger svg{width:20px;height:20px}.mf-a11y-trigger:focus-visible,.mf-a11y-panel button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
|
||||
.mf-a11y-panel{position:fixed;left:82px;bottom:18px;z-index:1801;width:min(450px,calc(100vw - 100px));max-height:calc(100dvh - 36px);overflow:auto;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--text);box-shadow:0 12px 45px rgba(0,0,0,.55)}.mf-a11y-panel[hidden]{display:none}.mf-a11y-head{position:sticky;top:0;display:flex;align-items:center;gap:1rem;padding:.65rem;background:#07121f;color:#fff;z-index:1}.mf-a11y-head h2{font:800 1.05rem Arial,sans-serif;margin:0 auto}.mf-a11y-close{width:44px;height:44px;border:0;border-radius:6px;background:#fff;color:#07121f;font-size:1.8rem;cursor:pointer}.mf-a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:10px;background:var(--surface)}.mf-a11y-option{min-height:88px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--text);padding:.65rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;font:inherit;cursor:pointer}.mf-a11y-option strong{font-size:1.35rem}.mf-a11y-option[aria-pressed="true"],.mf-a11y-option.is-active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--surface));box-shadow:inset 0 0 0 2px var(--accent)}.mf-a11y-option small{color:var(--muted)}@media(max-width:700px){.mf-a11y-panel{left:6px;bottom:74px;width:calc(100vw - 12px);max-height:calc(100dvh - 86px)}.mf-a11y-grid{grid-template-columns:1fr 1fr}.mf-a11y-option{min-height:78px;font-size:.82rem}}
|
||||
/* Okabe-Ito accents need darker values against the light page surface. */
|
||||
html[data-theme="light"][data-mf-color="safe"] body,html[data-theme="light"][data-mf-color="safe"] body *{--success:#0072b2!important;--danger:#8a5f00!important;--secondary:#9c4f79!important;--secondary-2:#19607f!important;--esc-accent:#8a5f00!important;--bh-accent:#a94500!important;--sc-accent:#19607f!important;--nw-accent:#0072b2!important;--mm-accent:#9c4f79!important;--mm-secondary:#19607f!important;--tt-accent:#7a6a00!important;--tt-secondary:#0072b2!important;--dl-accent:#007054!important;--dl-secondary:#19607f!important;--ss-accent:#0072b2!important;--ss-secondary:#8a5f00!important;--ff-accent:#a94500!important;--ff-secondary:#9c4f79!important}
|
||||
.mf-a11y-trigger:hover{box-shadow:var(--g-amb)}
|
||||
|
||||
@@ -1,165 +0,0 @@
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(145deg, #1f1f2e, #2c2c3d);
|
||||
color: #ffffff;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.achievements-container {
|
||||
max-width: 1400px;
|
||||
margin: 2rem auto;
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
animation: fadeInUp 0.8s ease-out;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
color: #00e5ff;
|
||||
text-shadow: 0 0 5px rgba(0, 229, 255, 0.2);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.slogan {
|
||||
text-align: center;
|
||||
color: #ccc;
|
||||
margin-bottom: 2rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
/* === Zurück-Button === */
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
background-color: #00d9ff;
|
||||
color: #0d1117;
|
||||
padding: 10px 18px;
|
||||
border-radius: 10px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
|
||||
transition: background-color 0.3s ease, transform 0.3s ease;
|
||||
font-size: 1rem;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: #00aacc;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Responsives Verhalten */
|
||||
@media (max-width: 768px) {
|
||||
.back-button {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
padding: 8px 14px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.achievements-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.achievement-card {
|
||||
background-color: rgba(10, 15, 25, 0.95);
|
||||
padding: 2rem;
|
||||
border-radius: 20px;
|
||||
text-align: center;
|
||||
box-shadow:
|
||||
0 0 15px rgba(0, 229, 255, 0.07),
|
||||
0 4px 10px rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(4px);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.achievement-card:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 0 20px rgba(0, 229, 255, 0.2);
|
||||
}
|
||||
|
||||
.trophy-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.achievement-card h2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.achievement-card p {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-top: 1rem;
|
||||
font-weight: bold;
|
||||
color: #00e5ff;
|
||||
}
|
||||
|
||||
.locked {
|
||||
opacity: 0.6;
|
||||
filter: grayscale(70%);
|
||||
}
|
||||
|
||||
/* === Unlock-Effekt für freigeschaltete Achievements === */
|
||||
.achievement-card.unlocked {
|
||||
animation: unlock-glow 1s ease-out;
|
||||
}
|
||||
|
||||
/* Animation für Unlock-Glow */
|
||||
@keyframes unlock-glow {
|
||||
0% {
|
||||
box-shadow: 0 0 0 rgba(0, 229, 255, 0);
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 20px rgba(0, 229, 255, 0.7);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Sanftes Pulsieren beim Hover über freigeschaltete Achievements */
|
||||
.achievement-card.unlocked:hover {
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 20px rgba(0, 229, 255, 0.5);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
|
||||
}
|
||||
}
|
||||
/* === Footer === */
|
||||
footer {
|
||||
background-color: #111122;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #66d9ef;
|
||||
text-decoration: none;
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
text-decoration: underline;
|
||||
@@ -1 +1,2 @@
|
||||
.esc-how{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;margin:0 0 1rem}.esc-how>div{display:flex;align-items:center;gap:.65rem;padding:.7rem;background:var(--surface);border:1px solid var(--border);border-radius:9px;color:var(--muted)}.esc-how b{display:grid;place-items:center;min-width:1.7rem;height:1.7rem;border:1px solid var(--border);border-radius:50%;color:var(--muted)}.esc-how strong,.esc-how small{display:block}.esc-how strong{color:var(--heading);font-size:.78rem}.esc-how small{margin-top:.15rem;font-size:.65rem}.esc-how .done,.esc-how .active{border-color:var(--esc-accent)}.esc-how .done b{background:var(--success);border-color:var(--success);color:#06120a}.esc-how .active{box-shadow:0 0 18px var(--esc-glow)}.esc-puzzle:not(.done) .status{color:var(--esc-accent)}.esc-puzzle:not(.done):hover{border-color:var(--esc-accent);transform:translateY(-2px)}.esc-fragment{display:flex;align-items:center;gap:.45rem}.esc-fragment small{display:grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--esc-accent);color:#160d00;font-size:.6rem}.esc-inventory.complete{border-style:solid;border-color:var(--success)}.esc-ready{margin:.7rem 0 0;color:var(--success);font-size:.75rem}.esc-door{flex-wrap:wrap}.esc-door.ready{border-color:var(--esc-accent);box-shadow:0 0 22px color-mix(in srgb,var(--esc-accent) 14%,transparent)}.esc-door-title{flex-basis:100%;display:flex;justify-content:space-between;align-items:center}.esc-door-title strong{color:var(--heading);font-size:.8rem}.esc-door-feedback{flex-basis:100%;min-height:1.2rem;font-size:.75rem}.esc-door-feedback.ok{color:var(--success)}.esc-door-feedback.bad{color:var(--danger)}.esc-door-feedback.wait{color:var(--esc-accent)}.esc-input.bad{border-color:var(--danger);box-shadow:0 0 0 2px color-mix(in srgb,var(--danger) 28%,transparent)}.esc-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}@media(max-width:800px){.esc-how{grid-template-columns:1fr}.esc-door-title{align-items:flex-start}}
|
||||
.esc-how .done b,.esc-fragment small{color:var(--accent-ink)}.esc-how .active{box-shadow:var(--g-strong)}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -344,3 +344,4 @@ body.finalflux-page {
|
||||
/* Prüfungszentrale: ruhige Gold-/Indigo-Konstellation statt Spielhallen-Optik. */
|
||||
body.finalflux-shell,body.finalflux-page { --accent:var(--ff-accent); --accent-2:var(--ff-secondary); --glow-s:var(--ff-glow); --glow-w:color-mix(in srgb,var(--ff-accent) 14%,transparent); background:radial-gradient(circle at 17% 13%,color-mix(in srgb,var(--ff-secondary) 17%,transparent),transparent 30%),radial-gradient(circle at 82% 8%,color-mix(in srgb,var(--ff-accent) 13%,transparent),transparent 28%),#0b0d1b; }
|
||||
body.finalflux-shell::before,body.finalflux-page::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.28; background-image:radial-gradient(circle,var(--ff-accent) 0 1px,transparent 1.5px),radial-gradient(circle,var(--ff-secondary) 0 1px,transparent 1.5px); background-size:91px 91px,137px 137px; background-position:14px 22px,47px 65px; }.finalflux-sidebar,.finalflux-main,.finalflux-page { position:relative; z-index:1; }.finalflux-hero,.finalflux-panel,.finalflux-page section { border-left-color:var(--ff-secondary); box-shadow:0 10px 28px color-mix(in srgb,var(--ff-secondary) 9%,transparent); }
|
||||
body.finalflux-shell,body.finalflux-page{background:radial-gradient(circle at 17% 13%,color-mix(in srgb,var(--ff-secondary) 17%,transparent),transparent 30%),radial-gradient(circle at 82% 8%,color-mix(in srgb,var(--ff-accent) 13%,transparent),transparent 28%),var(--bg)}
|
||||
|
||||
@@ -1 +1,2 @@
|
||||
.nw-guide{margin:1rem 0;border:1px solid color-mix(in srgb,var(--nw-accent) 62%,var(--border));border-radius:10px;padding:1rem 1.1rem;background:color-mix(in srgb,#0b2540 74%,var(--surface));box-shadow:0 0 18px color-mix(in srgb,var(--nw-accent) 12%,transparent)}.nw-guide h2{margin:.35rem 0 .5rem;color:var(--heading);font-size:1rem}.nw-guide p,.nw-guide li{color:var(--muted);font-size:.82rem;line-height:1.5}.nw-guide ol{margin:.45rem 0;padding-left:1.25rem}.nw-guide strong{color:var(--text)}.nw-guide code{color:var(--nw-accent);font:700 .78rem "Courier New",monospace}.nw-guide details{margin-top:.7rem;border-top:1px solid var(--border);padding-top:.6rem}.nw-guide summary{color:var(--nw-accent);cursor:pointer;font:700 .72rem "Courier New",monospace;letter-spacing:.05em}.nw-guide dl{display:grid;grid-template-columns:max-content 1fr;gap:.35rem .75rem;margin:.65rem 0 0}.nw-guide dt{color:var(--nw-accent);font-weight:700}.nw-guide dd{margin:0;color:var(--muted);font-size:.8rem}
|
||||
[data-theme="light"] .nw-guide{background:var(--surface);border-color:#d3e2f0;box-shadow:var(--g-soft)}
|
||||
|
||||
@@ -112,3 +112,9 @@ html[data-theme="light"].sn-platform body.finalflux-shell, html[data-theme="ligh
|
||||
}
|
||||
@media (max-width:820px) { html.sn-platform body .mf-sidebar { background:#061114; } }
|
||||
@media (max-width:820px) { html[data-theme="light"].sn-platform body .mf-sidebar { background:#f5fbf7; } }
|
||||
/* Light-mode text must not inherit the white-on-color auth overlay treatment. */
|
||||
html[data-theme="light"].sn-platform body .mf-logo .mark,html[data-theme="light"].sn-platform body .auth-head .mark,html[data-theme="light"].sn-platform body .overlay-panel .o-emblem{filter:none}
|
||||
html[data-theme="light"].sn-platform body .overlay-panel h3{color:#10291f;text-shadow:none}
|
||||
html[data-theme="light"].sn-platform body .overlay-panel p{color:#3c554a}
|
||||
html[data-theme="light"].sn-platform body .ghost-btn{color:#167a52;border-color:rgba(22,122,82,.55)}
|
||||
html[data-theme="light"].sn-platform body .ghost-btn:hover{background:rgba(22,122,82,.10)}
|
||||
|
||||
@@ -1,184 +0,0 @@
|
||||
|
||||
/* === Zurück-Button === */
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
background-color: #00d9ff;
|
||||
color: #0d1117;
|
||||
padding: 10px 18px;
|
||||
border-radius: 10px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
|
||||
transition: background-color 0.3s ease, transform 0.3s ease;
|
||||
font-size: 1rem;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: #00aacc;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Responsives Verhalten */
|
||||
@media (max-width: 768px) {
|
||||
.back-button {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
padding: 8px 14px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(145deg, #1f1f2e, #2c2c3d);
|
||||
color: #ffffff;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
max-width: 1400px;
|
||||
margin: 2rem auto;
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
animation: fadeInUp 0.8s ease-out;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
color: #00e5ff;
|
||||
text-shadow: 0 0 5px rgba(0, 229, 255, 0.2);
|
||||
}
|
||||
|
||||
/* === Gesamtfortschritt === */
|
||||
.section-overall-progress {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.progress-summary {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
gap: 2rem;
|
||||
background: rgba(0, 9, 22, 0.95);
|
||||
padding: 2rem;
|
||||
border-radius: 20px;
|
||||
box-shadow:
|
||||
0 0 15px rgba(0, 229, 255, 0.05),
|
||||
0 4px 10px rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.circular-progress {
|
||||
position: relative;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.percentage-label {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 1.6rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* XP-Leiste */
|
||||
.xp-bar {
|
||||
background-color: #1a1a2e;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
height: 20px;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.xp-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #00e5ff, #4cc3dd);
|
||||
}
|
||||
|
||||
/* === Lernzeitbereich === */
|
||||
.section-learn-time {
|
||||
background: rgba(0, 9, 22, 0.9);
|
||||
padding: 1.5rem;
|
||||
border-radius: 20px;
|
||||
box-shadow:
|
||||
0 0 10px rgba(0, 229, 255, 0.05),
|
||||
0 4px 10px rgba(0, 0, 0, 0.3);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#learnTimeChart {
|
||||
max-width: 100%;
|
||||
height: 180px !important;
|
||||
}
|
||||
|
||||
/* === Spielkarten === */
|
||||
.section-game-progress {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.game-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.game-card {
|
||||
background-color: rgba(10, 15, 25, 0.95);
|
||||
padding: 1.5rem;
|
||||
border-radius: 16px;
|
||||
box-shadow:
|
||||
0 0 15px rgba(0, 229, 255, 0.07),
|
||||
0 4px 10px rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(4px);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.game-card:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.game-progress-bar {
|
||||
background-color: #1a1a2e;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
height: 10px;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.game-progress-bar .fill {
|
||||
height: 100%;
|
||||
background-color: #00e5ff;
|
||||
}
|
||||
|
||||
/* === Footer === */
|
||||
footer {
|
||||
background-color: #111122;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #66d9ef;
|
||||
text-decoration: none;
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
text-decoration: underline;
|
||||
|
||||
|
||||
@@ -1,207 +0,0 @@
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(145deg, #1f1f2e, #2c2c3d);
|
||||
color: #ffffff;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
position: relative; /* wichtig für .back-button */
|
||||
text-align: center;
|
||||
padding: 2rem 1rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 2.5rem;
|
||||
color: #00e5ff;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
header .slogan {
|
||||
font-size: 1.2rem;
|
||||
color: #ccc;
|
||||
text-shadow: 0 0 5px rgba(0, 229, 255, 0.2);
|
||||
}
|
||||
|
||||
/* === Zurück-Button === */
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
background-color: #00d9ff;
|
||||
color: #0d1117;
|
||||
padding: 10px 18px;
|
||||
border-radius: 10px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
|
||||
transition: background-color 0.3s ease, transform 0.3s ease;
|
||||
font-size: 1rem;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: #00aacc;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Responsives Verhalten */
|
||||
@media (max-width: 768px) {
|
||||
.back-button {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
padding: 8px 14px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.back-button {
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
padding: 6px 10px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-container {
|
||||
max-width: 1000px;
|
||||
margin: 2rem auto;
|
||||
padding: 2rem;
|
||||
background: rgba(0, 9, 22, 0.95);
|
||||
border-radius: 20px;
|
||||
box-shadow:
|
||||
0 0 15px rgba(0, 229, 255, 0.05),
|
||||
0 4px 10px rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.section {
|
||||
background-color: rgba(10, 15, 25, 0.95);
|
||||
padding: 1.5rem;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 0 10px rgba(0, 229, 255, 0.1);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.section:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 6px 20px rgba(0, 229, 255, 0.2);
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
margin-bottom: 1rem;
|
||||
color: #00e5ff;
|
||||
}
|
||||
|
||||
.switch-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background-color: #888;
|
||||
transition: 0.4s;
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
transition: 0.4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: #00e5ff;
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(24px);
|
||||
}
|
||||
|
||||
.settings-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.settings-form input {
|
||||
padding: 0.8rem;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
background: #1a1a2e;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.settings-form button {
|
||||
padding: 0.8rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background-color: #00e5ff;
|
||||
color: #00172e;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.settings-form button:hover {
|
||||
background-color: #4cc3dd;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.danger-zone button {
|
||||
background-color: #ff4d4d;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.danger-zone button:hover {
|
||||
background-color: #cc0000;
|
||||
}
|
||||
|
||||
/* === Footer === */
|
||||
footer {
|
||||
background-color: #111122;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #66d9ef;
|
||||
text-decoration: none;
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
body {
|
||||
background-color: #0d1117;
|
||||
color: #00d9ff;
|
||||
font-family: 'Poppins', sans-serif; /* oder deine Mindflux-Schrift */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 40px;
|
||||
border: 1px solid #00d9ff; /* feiner als dashed */
|
||||
border-radius: 20px;
|
||||
background-color: #121826;
|
||||
box-shadow: 0 0 15px rgba(0, 217, 255, 0.5);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.time-machine {
|
||||
font-size: 2.5rem;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.small-hint {
|
||||
font-size: 0.9rem;
|
||||
margin-top: 20px;
|
||||
color: #7f8c8d;
|
||||
}
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
background-color: #00d9ff;
|
||||
color: #0d1117;
|
||||
padding: 10px 18px;
|
||||
border-radius: 10px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
|
||||
transition: background-color 0.3s ease, transform 0.3s ease;
|
||||
font-size: 1rem;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: #00aacc;
|
||||
transform: scale(1.05); /* leichter "Hover-Zoom" */
|
||||
}
|
||||
|
||||
/* Responsives Verhalten */
|
||||
@media (max-width: 768px) {
|
||||
.back-button {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
padding: 8px 14px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.back-button {
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
padding: 6px 10px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
@@ -1,551 +1,4 @@
|
||||
/* === Reset === */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* === Animationen === */
|
||||
@keyframes fadeInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
/* Glanz-Effekt für Hover */
|
||||
@keyframes shine {
|
||||
0% {
|
||||
background-position: -100%;
|
||||
}
|
||||
100% {
|
||||
background-position: 200%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fade-In für Container beim Laden */
|
||||
@keyframes fadeInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* === Body Hintergrund === */
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(145deg, var(--surface), var(--surface-2));
|
||||
color: var(--heading);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* === Header === */
|
||||
header {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
margin: 2rem auto 1rem;
|
||||
width: 90%;
|
||||
max-width: 1200px;
|
||||
background-color: var(--panel);
|
||||
border-radius: 20px;
|
||||
box-shadow:
|
||||
0 8px 20px var(--glow-w),
|
||||
0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
transition: all 0.3s ease-in-out;
|
||||
animation: fadeInUp 0.8s ease-out;
|
||||
}
|
||||
|
||||
header:hover {
|
||||
box-shadow:
|
||||
0 10px 30px var(--glow-s),
|
||||
0 6px 16px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.logo {
|
||||
max-height: 350px;
|
||||
width: auto;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
header img {
|
||||
max-height: 80px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
header p.slogan {
|
||||
font-style: italic;
|
||||
color: var(--accent);
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: 0.5px;
|
||||
text-shadow: 0 0 5px var(--glow-s);
|
||||
}
|
||||
|
||||
/* === Main Bereich === */
|
||||
main {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
padding: 2rem;
|
||||
flex: 1;
|
||||
width: 90%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
animation: fadeInUp 0.8s ease-out;
|
||||
}
|
||||
|
||||
/* === Info-Textfeld === */
|
||||
.info-box {
|
||||
flex: 1 1 400px;
|
||||
max-width: 600px;
|
||||
background: rgba(0, 9, 22, 0.9);
|
||||
padding: 2rem;
|
||||
border-radius: 16px;
|
||||
box-shadow:
|
||||
0 0 15px var(--glow-w),
|
||||
0 4px 10px rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(4px);
|
||||
animation: fadeInUp 0.9s ease-out;
|
||||
}
|
||||
|
||||
/* === Login/Register Box === */
|
||||
.login-box {
|
||||
flex: 1 1 300px;
|
||||
max-width: 400px;
|
||||
background: rgba(10, 15, 25, 0.95);
|
||||
padding: 2rem;
|
||||
border-radius: 16px;
|
||||
box-shadow:
|
||||
0 0 15px var(--glow-w),
|
||||
0 4px 10px rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(4px);
|
||||
animation: fadeInUp 1s ease-out;
|
||||
}
|
||||
|
||||
.login-box h2 {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--accent-2);
|
||||
}
|
||||
|
||||
.login-box form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.login-box input,
|
||||
.login-box button {
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* === Input === */
|
||||
.login-box input {
|
||||
background-color: var(--heading);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* === Button mit Glanz- und Licht-Effekt === */
|
||||
.login-box button {
|
||||
background-color: var(--accent);
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: background-color 0.3s ease-in-out, transform 0.2s ease;
|
||||
box-shadow: 0 0 10px var(--glow-s);
|
||||
}
|
||||
|
||||
.login-box button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -75%;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
120deg,
|
||||
rgba(255, 255, 255, 0.2) 0%,
|
||||
rgba(255, 255, 255, 0.5) 50%,
|
||||
rgba(255, 255, 255, 0.2) 100%
|
||||
);
|
||||
transform: skewX(-20deg);
|
||||
animation: shine 2s infinite;
|
||||
}
|
||||
|
||||
.login-box button:hover {
|
||||
background-color: var(--accent-2);
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 0 15px var(--glow-s), 0 0 30px var(--glow-w) inset;
|
||||
}
|
||||
|
||||
/* === Footer === */
|
||||
footer {
|
||||
background-color: var(--panel);
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--accent-2);
|
||||
text-decoration: none;
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Kleinere Switch-Größe */
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 42px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background-color: var(--muted);
|
||||
transition: 0.4s;
|
||||
border-radius: 30px;
|
||||
box-shadow: 0 0 6px var(--glow-s);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 6px;
|
||||
font-size: 0.8rem;
|
||||
color: silver;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background-color: var(--heading);
|
||||
transition: 0.4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* Bei aktiviertem Switch */
|
||||
input:checked + .slider {
|
||||
background-color: var(--accent);
|
||||
color: var(--heading);
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
.icon {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.dashboard-tile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(0, 9, 22, 0.95);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-decoration: none;
|
||||
color: var(--accent);
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
box-shadow:
|
||||
0 0 10px var(--glow-w),
|
||||
0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.dashboard-tile:hover {
|
||||
background-color: var(--glow-w);
|
||||
transform: translateY(-3px);
|
||||
box-shadow:
|
||||
0 6px 16px var(--glow-s),
|
||||
0 0 20px var(--glow-w) inset;
|
||||
}
|
||||
|
||||
.dashboard-tile span {
|
||||
color: var(--accent);
|
||||
text-shadow: 0 0 5px var(--glow-s);
|
||||
}
|
||||
|
||||
/* === Profilbereich === */
|
||||
.profile-container {
|
||||
max-width: 800px;
|
||||
margin: 2rem auto;
|
||||
background: rgba(0, 9, 22, 0.95);
|
||||
padding: 2rem;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 0 20px var(--glow-w);
|
||||
animation: fadeInUp 0.8s ease-out;
|
||||
}
|
||||
|
||||
.profile-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.profile-form label {
|
||||
font-weight: bold;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.profile-form input {
|
||||
padding: 0.75rem;
|
||||
background-color: var(--surface-2);
|
||||
color: var(--heading);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
.btn.save {
|
||||
background-color: var(--accent);
|
||||
color: var(--surface-2);
|
||||
}
|
||||
|
||||
.btn.save:hover {
|
||||
background-color: var(--accent-2);
|
||||
}
|
||||
|
||||
.btn.danger {
|
||||
background-color: var(--danger);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn.danger:hover {
|
||||
background-color: var(--danger);
|
||||
}
|
||||
|
||||
/* Profilbild */
|
||||
.profile-picture img {
|
||||
max-height: 150px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
/* === Tab-Navigation oben === */
|
||||
.tab-nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
margin: 1rem auto 2rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tab-nav .tab {
|
||||
padding: 0.6rem 1.2rem;
|
||||
background-color: var(--glow-w);
|
||||
color: var(--accent);
|
||||
border-radius: 12px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: 0 2px 6px var(--glow-w);
|
||||
}
|
||||
|
||||
.tab-nav .tab:hover {
|
||||
background-color: var(--glow-s);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 10px var(--glow-s);
|
||||
}
|
||||
|
||||
.tab-nav .tab.active {
|
||||
background-color: var(--accent);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
background-color: var(--accent);
|
||||
color: var(--accent-ink);
|
||||
padding: 1rem;
|
||||
margin: 1rem auto;
|
||||
max-width: 600px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 0 10px var(--glow-s);
|
||||
}
|
||||
|
||||
.success-message {
|
||||
background-color: var(--accent);
|
||||
color: var(--accent-ink);
|
||||
padding: 1rem;
|
||||
margin: 1rem auto;
|
||||
max-width: 600px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 0 10px var(--glow-s);
|
||||
opacity: 1;
|
||||
transition: opacity 1.5s ease-out;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
background-color: var(--accent);
|
||||
color: var(--accent-ink);
|
||||
padding: 10px 18px;
|
||||
border-radius: 10px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 10px var(--glow-s);
|
||||
transition: background-color 0.3s ease, transform 0.3s ease;
|
||||
font-size: 1rem;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
background-color: var(--accent);
|
||||
color: var(--accent-ink);
|
||||
padding: 10px 18px;
|
||||
border-radius: 10px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 10px var(--glow-s);
|
||||
transition: background-color 0.3s ease, transform 0.3s ease;
|
||||
font-size: 1rem;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: var(--accent-2);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.back-button {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
padding: 8px 14px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
<style>
|
||||
/* Admin-Button Stil */
|
||||
.admin-btn {
|
||||
background-color: var(--accent);
|
||||
color: var(--accent-ink);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
|
||||
box-shadow: 0 0 10px var(--glow-s);
|
||||
}
|
||||
|
||||
.admin-btn:hover {
|
||||
background-color: var(--accent-2);
|
||||
box-shadow: 0 0 15px var(--glow-s), 0 0 25px var(--glow-s);
|
||||
transform: scale(1.05);
|
||||
color: var(--surface-2);
|
||||
}
|
||||
</style>
|
||||
|
||||
.admin-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.admin-card {
|
||||
display: block;
|
||||
background-color: var(--glow-w);
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 12px;
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 12px var(--glow-w);
|
||||
}
|
||||
|
||||
.admin-card:hover {
|
||||
background-color: var(--glow-s);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 18px var(--glow-w);
|
||||
}
|
||||
|
||||
.admin-card.disabled {
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
.admin-actions {
|
||||
text-align: left;
|
||||
margin: 1.5rem 2rem;
|
||||
}
|
||||
|
||||
.btn-create {
|
||||
display: inline-block;
|
||||
padding: 0.6rem 1.2rem;
|
||||
font-size: 1rem;
|
||||
background-color: var(--accent);
|
||||
color: var(--accent-ink);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 4px 10px var(--glow-s);
|
||||
transition: background-color 0.3s, transform 0.2s;
|
||||
}
|
||||
|
||||
.btn-create:hover {
|
||||
background-color: var(--accent);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
/* Legacy entry point retained for static FinalProtocol lessons.
|
||||
Layout and components live in theme.css and finalflux.css. */
|
||||
html,body{min-height:100%}
|
||||
body{margin:0}
|
||||
|
||||
@@ -249,3 +249,6 @@ body.ss-body {
|
||||
/* Textadventure-Terminal: phosphorige Log-Atmosphäre, Bewertung bleibt blau/rot. */
|
||||
body.ss-body { --accent:var(--ss-accent); --accent-2:var(--ss-secondary); --glow-s:var(--ss-glow); --glow-w:color-mix(in srgb,var(--ss-accent) 15%,transparent); background:radial-gradient(circle at 45% -8%,color-mix(in srgb,var(--ss-accent) 16%,transparent),transparent 42%),#07100b; }
|
||||
body.ss-body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.14; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(129,214,149,.18) 4px 5px); }.ss-shell { position:relative; z-index:1; }.ss-code { border-color:color-mix(in srgb,var(--ss-accent) 55%,var(--border)); box-shadow:inset 0 0 28px color-mix(in srgb,var(--ss-accent) 10%,transparent); }.ss-mission-no::before { content:"> "; color:var(--ss-secondary); }
|
||||
/* Daylight keeps the terminal texture without retaining a black stage. */
|
||||
[data-theme="light"] body.ss-body{background:radial-gradient(1100px 500px at 50% -10%,rgba(39,125,73,.08),transparent 60%),#eef6f0}
|
||||
[data-theme="light"] body.ss-body::before{background:repeating-linear-gradient(0deg,rgba(16,64,40,.05) 0 1px,transparent 1px 4px)}
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
============================================================ */
|
||||
|
||||
:root, [data-theme="dark"] {
|
||||
color-scheme:dark;
|
||||
--bg:#0a0806; --bg-glow: radial-gradient(900px 420px at 60% -10%, rgba(240,168,26,.10), transparent 60%);
|
||||
--panel:#13100b; --panel-2:#171209; --surface:#120f0a; --surface-2:#1b1610;
|
||||
--border:#2a2117; --line:#221b12;
|
||||
@@ -29,9 +30,20 @@
|
||||
--fluxtimer-display:#170704; --fluxtimer-segment:#ff765f;
|
||||
--glow-s:rgba(240,168,26,.55); --glow-w:rgba(240,168,26,.16);
|
||||
--g-soft:0 0 18px var(--glow-w);
|
||||
--g-text:0 0 12px var(--glow-s);
|
||||
--g-icon:drop-shadow(0 0 8px var(--glow-s));
|
||||
--g-strong:0 0 20px var(--glow-s);
|
||||
--g-amb:0 0 14px var(--glow-w);
|
||||
--g-card:drop-shadow(0 0 7px var(--glow-w));
|
||||
--g-card-hover:drop-shadow(0 0 16px var(--glow-s));
|
||||
--g-overlay:0 24px 60px rgba(0,0,0,.5);
|
||||
--g-focus:0 0 0 3px var(--glow-w);
|
||||
--g-bar:0 0 10px var(--glow-s);
|
||||
--scroll-thumb:var(--line);
|
||||
}
|
||||
[data-theme="light"] {
|
||||
--bg:#fbf6ec; --bg-glow: radial-gradient(900px 420px at 60% -10%, rgba(214,81,22,.10), transparent 60%);
|
||||
color-scheme:light;
|
||||
--bg:#fbf6ec; --bg-glow: radial-gradient(900px 420px at 60% -10%, rgba(214,81,22,.05), transparent 60%);
|
||||
--panel:#ffffff; --panel-2:#fdf7ea; --surface:#ffffff; --surface-2:#fbf4e6;
|
||||
--border:#ece1cf; --line:#f1e8d8;
|
||||
--border-accent:rgba(194,65,12,.40); --accent:#c2410c; --accent-2:#b45309; --accent-ink:#ffffff;
|
||||
@@ -51,6 +63,16 @@
|
||||
--fluxtimer-display:#fff5ec; --fluxtimer-segment:#a93131;
|
||||
--glow-s:rgba(214,81,22,.40); --glow-w:rgba(214,81,22,.12);
|
||||
--g-soft:0 6px 18px var(--glow-w);
|
||||
--g-text:none;
|
||||
--g-icon:none;
|
||||
--g-strong:0 2px 10px rgba(67,48,26,.18),0 1px 3px rgba(67,48,26,.10);
|
||||
--g-amb:0 1px 5px rgba(67,48,26,.10);
|
||||
--g-card:drop-shadow(0 2px 5px rgba(67,48,26,.10));
|
||||
--g-card-hover:drop-shadow(0 8px 18px rgba(67,48,26,.16));
|
||||
--g-overlay:0 18px 44px rgba(67,48,26,.20);
|
||||
--g-focus:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent);
|
||||
--g-bar:none;
|
||||
--scroll-thumb:#d9cbb2;
|
||||
}
|
||||
|
||||
* { box-sizing:border-box; margin:0; padding:0; }
|
||||
@@ -61,7 +83,7 @@ body {
|
||||
min-height:100vh; transition:background-color .35s ease,color .35s ease;
|
||||
}
|
||||
a { color:var(--secondary); }
|
||||
::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
|
||||
::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:9px}
|
||||
|
||||
/* ===== App-Shell (Sidebar | Mitte | rechte Spalte) ===== */
|
||||
.mf-shell { display:grid; grid-template-columns:264px 1fr 332px; grid-template-rows:auto 1fr; min-height:100vh; }
|
||||
@@ -76,22 +98,22 @@ a { color:var(--secondary); }
|
||||
.mf-logo { display:flex; align-items:center; gap:.6rem; padding:.2rem .3rem .4rem; text-decoration:none; }
|
||||
.mf-logo .mark { width:38px; height:38px; flex:0 0 auto; background:var(--accent);
|
||||
-webkit-mask:url("/img/mindflux-emblem.png") center/contain no-repeat; mask:url("/img/mindflux-emblem.png") center/contain no-repeat;
|
||||
filter:drop-shadow(0 0 8px var(--glow-s)); }
|
||||
.mf-logo .txt b { color:var(--accent); font-weight:800; letter-spacing:.13em; font-size:1.02rem; display:block; text-shadow:0 0 12px var(--glow-s); }
|
||||
filter:var(--g-icon); }
|
||||
.mf-logo .txt b { color:var(--accent); font-weight:800; letter-spacing:.13em; font-size:1.02rem; display:block; text-shadow:var(--g-text); }
|
||||
.mf-logo .txt span { color:var(--muted); font-size:.56rem; letter-spacing:.22em; }
|
||||
|
||||
/* ===== Sidebar-Navigation ===== */
|
||||
.mf-nav { display:flex; flex-direction:column; gap:.25rem; }
|
||||
.mf-nav a { display:flex; align-items:center; gap:.75rem; padding:.7rem .85rem; border-radius:11px; color:var(--muted); text-decoration:none; font-size:.9rem; font-weight:600; border:1px solid transparent; transition:all .18s ease; }
|
||||
.mf-nav a:hover { color:var(--text); background:var(--surface-2); }
|
||||
.mf-nav a.active { color:var(--accent-ink); background:linear-gradient(100deg,var(--accent),var(--accent-2)); box-shadow:0 0 20px var(--glow-s); }
|
||||
.mf-nav a.active { color:var(--accent-ink); background:linear-gradient(100deg,var(--accent),var(--accent-2)); box-shadow:var(--g-strong); }
|
||||
.mf-nav a.active svg { color:var(--accent-ink); }
|
||||
.mf-nav svg { width:18px; height:18px; color:var(--accent); flex:0 0 auto; }
|
||||
|
||||
/* ===== Profil / Level / Streak ===== */
|
||||
.mf-profile { border:1px solid var(--border); border-radius:13px; padding:.7rem; background:var(--surface); }
|
||||
.mf-profile .row { display:flex; align-items:center; gap:.6rem; }
|
||||
.mf-avatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:inline-flex; align-items:center; justify-content:center; color:var(--accent-ink); font-weight:800; box-shadow:0 0 14px var(--glow-s); overflow:hidden; }
|
||||
.mf-avatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:inline-flex; align-items:center; justify-content:center; color:var(--accent-ink); font-weight:800; box-shadow:var(--g-strong); overflow:hidden; }
|
||||
.mf-avatar img { width:100%; height:100%; object-fit:cover; }
|
||||
.mf-profile b { color:var(--heading); font-size:.86rem; display:block; }
|
||||
.mf-profile .role { color:var(--accent); font-size:.72rem; }
|
||||
@@ -99,25 +121,25 @@ a { color:var(--secondary); }
|
||||
.mf-meta .lvl { color:var(--muted); letter-spacing:.04em; } .mf-meta .lvl b { color:var(--heading); }
|
||||
.mf-meta .xp { color:var(--muted); margin:.2rem 0 .35rem; }
|
||||
.mf-streak { display:flex; align-items:center; gap:.55rem; margin-top:.2rem; }
|
||||
.mf-streak .fire { font-size:1.1rem; filter:drop-shadow(0 0 6px var(--glow-s)); }
|
||||
.mf-streak .fire { font-size:1.1rem; filter:var(--g-icon); }
|
||||
.mf-streak b { color:var(--heading); font-size:.82rem; display:block; } .mf-streak small { color:var(--muted); }
|
||||
.mf-brain { margin-top:auto; opacity:.55; display:flex; justify-content:center; filter:drop-shadow(0 0 10px var(--glow-s)); }
|
||||
.mf-brain { margin-top:auto; opacity:.55; display:flex; justify-content:center; filter:var(--g-icon); }
|
||||
.mf-brain svg { width:150px; height:auto; }
|
||||
|
||||
/* ===== Topbar ===== */
|
||||
.mf-hello h1 { color:var(--heading); font-size:1.85rem; font-weight:800; letter-spacing:-.01em; }
|
||||
.mf-hello h1 .nm { color:var(--accent); text-shadow:0 0 16px var(--glow-s); }
|
||||
.mf-hello h1 .nm { color:var(--accent); text-shadow:var(--g-text); }
|
||||
.mf-hello p { color:var(--muted); margin-top:.35rem; font-size:.95rem; }
|
||||
.mf-tools { display:flex; align-items:center; gap:.6rem; margin-left:auto; }
|
||||
.mf-iconbtn { width:42px; height:42px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none; transition:all .18s; }
|
||||
.mf-iconbtn:hover { color:var(--accent); border-color:var(--border-accent); box-shadow:0 0 14px var(--glow-w); }
|
||||
.mf-iconbtn:hover { color:var(--accent); border-color:var(--border-accent); box-shadow:var(--g-amb); }
|
||||
.mf-iconbtn svg { width:20px; height:20px; }
|
||||
.mf-search { display:flex; align-items:center; gap:.5rem; min-height:42px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:.5rem .8rem; color:var(--muted); }
|
||||
.mf-search input { background:none; border:0; outline:none; color:var(--text); font-size:.86rem; width:130px; }
|
||||
.mf-search svg { width:15px; height:15px; }
|
||||
|
||||
/* ===== Theme-Umschalter ===== */
|
||||
.mf-theme { width:42px; height:42px; border-radius:10px; border:1px solid var(--border-accent); background:var(--surface); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:var(--accent); box-shadow:0 0 14px var(--glow-w); }
|
||||
.mf-theme { width:42px; height:42px; border-radius:10px; border:1px solid var(--border-accent); background:var(--surface); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:var(--accent); box-shadow:var(--g-amb); }
|
||||
.mf-theme svg { width:20px; height:20px; }
|
||||
|
||||
/* ===== HUD-Spielkarten ===== */
|
||||
@@ -125,15 +147,15 @@ a { color:var(--secondary); }
|
||||
.mf-card { position:relative; display:flex; flex-direction:column; padding:1.15rem 1.2rem 1.1rem; background:var(--surface);
|
||||
border:1px solid var(--border-accent); --n:18px;
|
||||
clip-path:polygon(0 0, calc(100% - var(--n)) 0, 100% var(--n), 100% 100%, 0 100%);
|
||||
text-decoration:none; color:inherit; filter:drop-shadow(0 0 7px var(--glow-w)); transition:transform .16s ease, filter .25s ease, background-color .2s; }
|
||||
text-decoration:none; color:inherit; filter:var(--g-card); transition:transform .16s ease, filter .25s ease, background-color .2s; }
|
||||
.mf-card::before { content:""; position:absolute; left:10px; top:10px; width:14px; height:14px; border-left:2px solid var(--accent); border-top:2px solid var(--accent); opacity:.7; }
|
||||
.mf-card:hover { transform:translateY(-4px); background:var(--surface-2); filter:drop-shadow(0 0 16px var(--glow-s)); }
|
||||
.mf-card .ico { width:58px; height:58px; color:var(--accent); margin-bottom:.7rem; filter:drop-shadow(0 0 6px var(--glow-s)); }
|
||||
.mf-card:hover { transform:translateY(-4px); background:var(--surface-2); filter:var(--g-card-hover); }
|
||||
.mf-card .ico { width:58px; height:58px; color:var(--accent); margin-bottom:.7rem; filter:var(--g-icon); }
|
||||
.mf-card .ico svg { width:100%; height:100%; }
|
||||
.mf-card h3 { color:var(--heading); font-size:1.06rem; font-weight:700; margin-bottom:.4rem; }
|
||||
.mf-card p { color:var(--muted); font-size:.83rem; line-height:1.5; flex:1; }
|
||||
.mf-play { margin-top:.9rem; align-self:flex-start; display:inline-flex; align-items:center; gap:.45rem; font-size:.74rem; font-weight:800; letter-spacing:.08em; color:var(--accent); border:1px solid var(--border-accent); border-radius:8px; padding:.5rem .85rem; text-decoration:none; transition:all .18s; }
|
||||
.mf-card:hover .mf-play { background:var(--accent); color:var(--accent-ink); box-shadow:0 0 16px var(--glow-s); }
|
||||
.mf-card:hover .mf-play { background:var(--accent); color:var(--accent-ink); box-shadow:var(--g-strong); }
|
||||
.mf-play svg { width:14px; height:14px; }
|
||||
.mf-card-codeescape { --accent:var(--esc-accent); --glow-s:var(--esc-glow); --glow-w:color-mix(in srgb,var(--esc-accent) 16%,transparent); background:repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 4px),var(--surface); }
|
||||
.mf-card-codeescape::after { content:"ACCESS"; position:absolute; right:12px; top:9px; color:var(--esc-accent); font:700 .52rem/1 "Courier New",monospace; letter-spacing:.12em; opacity:.6; }
|
||||
@@ -143,15 +165,15 @@ a { color:var(--secondary); }
|
||||
|
||||
/* ===== Panels / Widgets ===== */
|
||||
.mf-panel { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1.1rem; box-shadow:var(--g-soft); }
|
||||
.mf-panel.accent { border-color:var(--border-accent); box-shadow:0 0 20px var(--glow-w); }
|
||||
.mf-panel.accent { border-color:var(--border-accent); box-shadow:var(--g-amb); }
|
||||
.mf-panel h4 { display:flex; align-items:center; gap:.5rem; color:var(--accent); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.9rem; }
|
||||
.mf-panel h4 svg { width:15px; height:15px; }
|
||||
.mf-eyebrow { color:var(--accent); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; }
|
||||
.mf-bar { height:7px; border-radius:99px; background:var(--surface-2); border:1px solid var(--border); overflow:hidden; }
|
||||
.mf-bar > i { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:0 0 10px var(--glow-s); }
|
||||
.mf-bar > i { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:var(--g-bar); }
|
||||
|
||||
/* ===== Buttons ===== */
|
||||
.mf-btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; font-weight:800; font-size:.82rem; letter-spacing:.04em; border:0; border-radius:9px; padding:.6rem 1.1rem; cursor:pointer; text-decoration:none; background:var(--accent); color:var(--accent-ink); box-shadow:0 0 18px var(--glow-s); transition:all .18s; }
|
||||
.mf-btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; font-weight:800; font-size:.82rem; letter-spacing:.04em; border:0; border-radius:9px; padding:.6rem 1.1rem; cursor:pointer; text-decoration:none; background:var(--accent); color:var(--accent-ink); box-shadow:var(--g-strong); transition:all .18s; }
|
||||
.mf-btn:hover { filter:brightness(1.05); transform:translateY(-1px); }
|
||||
.mf-btn svg { width:15px; height:15px; }
|
||||
.mf-btn.outline { background:transparent; color:var(--accent); border:1px solid var(--border-accent); box-shadow:none; }
|
||||
@@ -165,7 +187,7 @@ a { color:var(--secondary); }
|
||||
.mf-input, .mf-select, input.mf-input, select.mf-select, textarea.mf-input {
|
||||
width:100%; padding:.65rem .8rem; border-radius:10px; border:1px solid var(--border);
|
||||
background:var(--surface-2); color:var(--text); font-size:.95rem; font-family:inherit; }
|
||||
.mf-input:focus, .mf-select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--glow-w); }
|
||||
.mf-input:focus, .mf-select:focus { outline:none; border-color:var(--accent); box-shadow:var(--g-focus); }
|
||||
.mf-input::placeholder { color:var(--muted); }
|
||||
|
||||
/* ===== Tabellen ===== */
|
||||
@@ -179,7 +201,8 @@ a { color:var(--secondary); }
|
||||
|
||||
/* ===== Standalone-Karte (Login/Auth, einzelne Inhaltsseiten) ===== */
|
||||
.mf-center { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1.5rem; }
|
||||
.mf-cardbox { width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border-accent); border-radius:18px; padding:2rem; box-shadow:0 0 30px var(--glow-w); }
|
||||
.mf-cardbox { width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border-accent); border-radius:18px; padding:2rem; box-shadow:var(--g-strong); }
|
||||
[data-theme="dark"] .mf-cardbox { box-shadow:0 0 30px var(--glow-w); }
|
||||
.mf-container { max-width:1000px; margin:0 auto; padding:1.5rem; }
|
||||
.mf-page-head { display:flex; align-items:center; gap:1rem; margin-bottom:1.4rem; }
|
||||
.mf-back { color:var(--accent); text-decoration:none; font-weight:700; font-size:.88rem; }
|
||||
@@ -199,7 +222,7 @@ a { color:var(--secondary); }
|
||||
.mf-footer a + a::before { content:"·"; position:absolute; left:-.6rem; color:var(--border); }
|
||||
|
||||
/* ===== Mobile-Nav (Off-Canvas-Drawer; Button/Backdrop per theme.js injiziert) ===== */
|
||||
.mf-burger { display:none; position:fixed; top:.7rem; left:.7rem; z-index:1300; width:42px; height:42px; border-radius:10px; border:1px solid var(--border-accent); background:var(--surface); color:var(--accent); align-items:center; justify-content:center; cursor:pointer; box-shadow:0 0 14px var(--glow-w); }
|
||||
.mf-burger { display:none; position:fixed; top:.7rem; left:.7rem; z-index:1300; width:42px; height:42px; border-radius:10px; border:1px solid var(--border-accent); background:var(--surface); color:var(--accent); align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--g-amb); }
|
||||
.mf-burger svg { width:20px; height:20px; }
|
||||
.mf-nav-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .28s ease; z-index:1100; }
|
||||
body.mf-nav-open .mf-nav-backdrop { opacity:1; pointer-events:auto; }
|
||||
@@ -220,7 +243,7 @@ body.mf-nav-open .mf-nav-backdrop { opacity:1; pointer-events:auto; }
|
||||
.mf-sidebar {
|
||||
position:fixed; top:0; left:0; height:100dvh; width:min(284px,82vw); z-index:1200;
|
||||
transform:translateX(-100%); transition:transform .28s ease; overflow-y:auto;
|
||||
box-shadow:0 18px 50px rgba(0,0,0,.55);
|
||||
box-shadow:var(--g-overlay);
|
||||
}
|
||||
body.mf-nav-open .mf-sidebar { transform:translateX(0); }
|
||||
.mf-burger { display:inline-flex; }
|
||||
@@ -235,4 +258,4 @@ body.mf-nav-open .mf-nav-backdrop { opacity:1; pointer-events:auto; }
|
||||
.mf-tab-nav { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.4rem; }
|
||||
.mf-tab { padding:.55rem .95rem; border-radius:10px; border:1px solid var(--border); color:var(--muted); text-decoration:none; font-size:.85rem; font-weight:700; transition:all .18s ease; }
|
||||
.mf-tab:hover { color:var(--text); background:var(--surface-2); }
|
||||
.mf-tab.active { color:var(--accent-ink); background:linear-gradient(100deg,var(--accent),var(--accent-2)); box-shadow:0 0 18px var(--glow-s); border-color:transparent; }
|
||||
.mf-tab.active { color:var(--accent-ink); background:linear-gradient(100deg,var(--accent),var(--accent-2)); box-shadow:var(--g-strong); border-color:transparent; }
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
if (last < tpl.length) code.appendChild(document.createTextNode(tpl.slice(last)));
|
||||
pre.appendChild(code);
|
||||
r.playfield.appendChild(pre);
|
||||
const first = Object.values(inputs)[0]; if (first) first.focus();
|
||||
const first = Object.values(inputs)[0]; if (first) first.focus({ preventScroll: true });
|
||||
return {
|
||||
collect: () => ({ gaps: Object.entries(inputs).map(([pos, i]) => ({ position: Number(pos), text: i.value })) }),
|
||||
lock: () => Object.values(inputs).forEach((i) => { i.disabled = true; }),
|
||||
@@ -230,7 +230,7 @@
|
||||
input.addEventListener('input', preview);
|
||||
input.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); doCheck(false); } });
|
||||
const wrap = document.createElement('div'); wrap.className = 'dlg-regex';
|
||||
wrap.append(input, list); r.playfield.appendChild(wrap); preview(); input.focus();
|
||||
wrap.append(input, list); r.playfield.appendChild(wrap); preview(); input.focus({ preventScroll: true });
|
||||
return {
|
||||
collect: () => ({ pattern: input.value }),
|
||||
lock: () => { input.disabled = true; },
|
||||
@@ -241,6 +241,7 @@
|
||||
|
||||
// ---------- Ablauf ----------
|
||||
function renderTask() {
|
||||
window.scrollTo(0, 0);
|
||||
const task = session.tasks[index];
|
||||
cur = { task, attempts: 0, solved: false, revealed: false };
|
||||
r.kind.textContent = `Aufgabe ${index + 1}`;
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
document.querySelectorAll('[data-fluxcheck]').forEach((check) => {
|
||||
const button = check.querySelector('button');
|
||||
const result = check.querySelector('.fluxcheck-result');
|
||||
|
||||
if (!button || !result) {
|
||||
return;
|
||||
}
|
||||
|
||||
button.addEventListener('click', () => {
|
||||
const selected = check.querySelector('input[type="radio"]:checked');
|
||||
if (!selected) {
|
||||
result.textContent = 'Wähle zuerst eine Antwort aus.';
|
||||
result.className = 'fluxcheck-result wrong';
|
||||
return;
|
||||
}
|
||||
|
||||
const expected = check.dataset.answer;
|
||||
const explanation = check.dataset.explanation || '';
|
||||
const isCorrect = selected.value === expected;
|
||||
|
||||
result.textContent = isCorrect
|
||||
? 'Richtig. ' + explanation
|
||||
: 'Noch nicht. ' + explanation;
|
||||
result.className = 'fluxcheck-result ' + (isCorrect ? 'correct' : 'wrong');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -100,6 +100,7 @@ document.addEventListener('DOMContentLoaded', async () => {
|
||||
|
||||
testRoot.hidden = true;
|
||||
elements.testResult.hidden = false;
|
||||
elements.testResult.scrollIntoView({ block: 'start' });
|
||||
elements.resultSummary.textContent = `Du hast ${score} von ${questions.length} Fragen richtig beantwortet.`;
|
||||
elements.categorySummary.innerHTML = '';
|
||||
Array.from(categoryStats.entries()).forEach(([category, stats]) => {
|
||||
@@ -154,6 +155,7 @@ document.addEventListener('DOMContentLoaded', async () => {
|
||||
categoryStats.clear();
|
||||
testRoot.hidden = false;
|
||||
elements.testResult.hidden = true;
|
||||
testRoot.scrollIntoView({ block: 'start' });
|
||||
renderQuestion();
|
||||
});
|
||||
|
||||
|
||||
@@ -330,6 +330,7 @@
|
||||
}
|
||||
|
||||
function newGame() {
|
||||
window.scrollTo(0, 0);
|
||||
const slug = deckSelect.value;
|
||||
const deckPairs = decksBySlug.get(slug);
|
||||
|
||||
|
||||
@@ -111,6 +111,7 @@
|
||||
// ---------- Mission rendern ----------
|
||||
|
||||
function renderMission() {
|
||||
window.scrollTo(0, 0);
|
||||
const mission = story.missions[missionIndex];
|
||||
cur = { mission, attempts: {}, revealed: {}, solved: {}, scored: {} };
|
||||
curGaps = {};
|
||||
@@ -207,7 +208,7 @@
|
||||
storyEl.appendChild(scene);
|
||||
updateHud();
|
||||
const first = Object.values(curInputs)[0];
|
||||
if (first) first.focus();
|
||||
if (first) first.focus({ preventScroll: true });
|
||||
}
|
||||
|
||||
// ---------- Prüfen / Auflösen ----------
|
||||
|
||||
@@ -263,6 +263,7 @@
|
||||
}
|
||||
|
||||
async function newGame() {
|
||||
window.scrollTo(0, 0);
|
||||
stopTimer();
|
||||
seconds = 0; score = 0; answeredCount = 0; current = null; jokerUsed = false;
|
||||
submitted.length = 0;
|
||||
|
||||
@@ -3,8 +3,20 @@
|
||||
Jeder Button mit Klasse .mf-theme wird automatisch zum Umschalter. */
|
||||
(function () {
|
||||
var KEY = 'mf-theme';
|
||||
function read() { try { return localStorage.getItem(KEY) || 'dark'; } catch (e) { return 'dark'; } }
|
||||
function apply(mode) { document.documentElement.setAttribute('data-theme', mode); }
|
||||
function preferredTheme() {
|
||||
return window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
|
||||
}
|
||||
function read() { try { return localStorage.getItem(KEY) || preferredTheme(); } catch (e) { return preferredTheme(); } }
|
||||
function apply(mode) {
|
||||
document.documentElement.setAttribute('data-theme', mode);
|
||||
var meta = document.querySelector('meta[name="theme-color"]');
|
||||
if (!meta) {
|
||||
meta = document.createElement('meta');
|
||||
meta.name = 'theme-color';
|
||||
document.head.appendChild(meta);
|
||||
}
|
||||
meta.content = mode === 'light' ? '#fbf6ec' : '#0a0806';
|
||||
}
|
||||
|
||||
apply(read()); // früh -> kein Aufblitzen
|
||||
|
||||
@@ -15,6 +27,10 @@
|
||||
var isGameRoute = ['/mindmatch', '/techtacular', '/devlab', '/syntaxsaga', '/codeescape', '/bughunter', '/serviceclash', '/networker']
|
||||
.some(function (route) { return path === route || path.indexOf(route + '/') === 0; });
|
||||
if (!isGameRoute) document.documentElement.classList.add('sn-platform');
|
||||
if (isGameRoute && 'scrollRestoration' in history) {
|
||||
history.scrollRestoration = 'manual';
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
// Globale, rein clientseitige Komfortfunktionen. FluxTimer bleibt auf öffentlichen
|
||||
// Seiten inaktiv, läuft bei aktivierter Einstellung aber über Seitennavigationen weiter.
|
||||
@@ -96,6 +112,10 @@
|
||||
set: set,
|
||||
current: function () { return document.documentElement.getAttribute('data-theme'); }
|
||||
};
|
||||
window.MindfluxUX = {
|
||||
toTop: function () { window.scrollTo(0, 0); },
|
||||
focusQuiet: function (el) { if (el) el.focus({ preventScroll: true }); }
|
||||
};
|
||||
|
||||
// Mobile-Nav: Off-Canvas-Drawer für Seiten mit App-Sidebar (.mf-shell)
|
||||
function initMobileNav() {
|
||||
@@ -130,5 +150,12 @@
|
||||
});
|
||||
paint();
|
||||
initMobileNav();
|
||||
// SPA-Spiele ersetzen ihre Ansicht per innerHTML. Nur echte Übergänge werden
|
||||
// zurück an den Seitenanfang gesetzt; Antwort-/Zeilenfeedback bleibt stabil.
|
||||
document.addEventListener('click', function (event) {
|
||||
if (!isGameRoute) return;
|
||||
var transition = event.target.closest('[data-start], #bhStart, #bhNext, #bhAgain, #again, #nwStart, #nwAgain, #scStart, #scNext, #scAgain');
|
||||
if (transition) window.setTimeout(function () { window.scrollTo(0, 0); }, 0);
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
||||
@@ -4,10 +4,9 @@
|
||||
<meta charset="UTF-8">
|
||||
<title>FinalProtocol - SysnaptiK Neural</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<link rel="stylesheet" href="/css/theme.css?v=4">
|
||||
<link rel="stylesheet" href="/css/theme.css?v=5">
|
||||
<link rel="stylesheet" href="/css/finalflux.css?v=2">
|
||||
<script src="/js/theme.js?v=5"></script>
|
||||
<script src="/js/theme.js?v=6"></script>
|
||||
</head>
|
||||
<body class="finalflux-shell">
|
||||
<aside class="finalflux-sidebar">
|
||||
|
||||
Reference in New Issue
Block a user