diff --git a/CHANGELOG.md b/CHANGELOG.md index d176a2d..8f9ab7d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,12 @@ Versionierung [semantisch](https://semver.org/lang/de/). ## [Unreleased] – 2026-07-21 · Gesamt-Audit: Light Mode, Barrierefreiheit, AP2-Inhalte, DSGVO ### Light Mode & Design +- **Produktzweck klarer:** Die Login-Seite erklärt nun Zielgruppe, Lernformen und + den Nutzen eines Accounts; im Dashboard fasst ein kompakter Einstieg den Lernzweck + zusammen. +- **TechTacular-Fragen überspringbar:** Eine noch nicht beantwortete Frage kann per + ×, Klick außerhalb oder Escape folgenlos geschlossen und später wieder geöffnet + werden. - **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 diff --git a/mindfluxrefine2.md b/mindfluxrefine2.md index ddd5ccf..c3af63a 100644 --- a/mindfluxrefine2.md +++ b/mindfluxrefine2.md @@ -303,3 +303,12 @@ Zusatzfunde (neu): - 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. + +## Nachtrag 2026-07-22 — Nutzerfeedback (erledigt) + +- **TechTacular:** Unbeantwortete Fragen lassen sich per ×, Klick auf den Hintergrund + oder Escape schließen und später erneut öffnen; sie werden dabei weder gewertet noch + als beantwortet markiert. +- **Produktverständnis:** Vor dem Login erklärt eine sichtbare Einordnung Zielgruppe, + Lernformen und Nutzen der Plattform. Das Dashboard wiederholt den Zweck mit einem + kompakten „Was du hier machst“-Abschnitt. diff --git a/src/main/resources/static/css/auth.css b/src/main/resources/static/css/auth.css index 908915c..1141d53 100644 --- a/src/main/resources/static/css/auth.css +++ b/src/main/resources/static/css/auth.css @@ -6,6 +6,12 @@ @property --mf-ang { syntax: ''; initial-value: 0deg; inherits: false; } .auth-stage { width:100%; display:flex; flex-direction:column; align-items:center; gap:1.4rem; } +.auth-intro { width:100%; max-width:840px; padding:1.25rem 1.4rem; border:1px solid var(--border); border-radius:16px; background:var(--surface); box-shadow:var(--g-soft); } +.auth-intro h1 { color:var(--heading); font-size:clamp(1.35rem,3vw,1.85rem); line-height:1.18; margin:.35rem 0 .6rem; } +.auth-intro p { color:var(--muted); line-height:1.6; max-width:72ch; } +.auth-intro ul { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem 1rem; list-style:none; margin-top:.9rem; padding:0; } +.auth-intro li { color:var(--muted); font-size:.82rem; line-height:1.45; } +.auth-intro li b { color:var(--accent); } /* ---- Dual-Panel-Container (Bild 2) ---- */ .auth-container { @@ -149,6 +155,8 @@ /* ---- Responsiv: gestapelt, ohne Overlay ---- */ @media (max-width:760px) { + .auth-intro { padding:1rem; } + .auth-intro ul { grid-template-columns:1fr; gap:.45rem; } .auth-container { max-width:420px; min-height:auto; } .overlay-container { display:none; } .form-box { diff --git a/src/main/resources/static/css/techtacular.css b/src/main/resources/static/css/techtacular.css index 634667b..0431fa4 100644 --- a/src/main/resources/static/css/techtacular.css +++ b/src/main/resources/static/css/techtacular.css @@ -216,6 +216,9 @@ body.tt-body { } .tt-q-cat { color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; } .tt-q-points { color: var(--accent); font-weight: 800; font-size: 1.3rem; } +.tt-q-close { margin-left:.35rem; width:32px; height:32px; border:1px solid var(--border); border-radius:8px; background:transparent; color:var(--muted); font:400 1.5rem/1 inherit; cursor:pointer; } +.tt-q-close:hover { color:var(--accent); border-color:var(--border-accent); background:var(--surface-2); } +.tt-q-close:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .tt-q-instruction { color: var(--muted); font-size: 0.85rem; font-weight: 700; margin-bottom: 0.35rem; } .tt-q-text { diff --git a/src/main/resources/static/js/techtacular.js b/src/main/resources/static/js/techtacular.js index 0208386..df22575 100644 --- a/src/main/resources/static/js/techtacular.js +++ b/src/main/resources/static/js/techtacular.js @@ -21,6 +21,7 @@ const qAnswers = document.getElementById('tt-q-answers'); const qFeedback = document.getElementById('tt-q-feedback'); const qNext = document.getElementById('tt-q-next'); + const qClose = document.getElementById('tt-q-close'); const jokerBtn = document.getElementById('tt-fifty-fifty'); const jokerNote = document.getElementById('tt-joker-note'); @@ -212,6 +213,12 @@ } } + function dismissQuestion() { + if (!current || current.answered) return; + current = null; + qOverlay.hidden = true; + } + async function finishGame() { if (!running) return; running = false; @@ -301,7 +308,16 @@ finishBtn.addEventListener('click', finishGame); cancelBtn.addEventListener('click', cancelGame); qNext.addEventListener('click', closeQuestion); + qClose.addEventListener('click', dismissQuestion); jokerBtn.addEventListener('click', useFiftyFifty); + qOverlay.addEventListener('click', (event) => { + if (event.target === qOverlay) dismissQuestion(); + }); + document.addEventListener('keydown', (event) => { + if (event.key === 'Escape' && !qOverlay.hidden) { + dismissQuestion(); + } + }); loadStats(); newGame(); diff --git a/src/main/resources/templates/dashboard.html b/src/main/resources/templates/dashboard.html index 45c9f79..23ce65a 100644 --- a/src/main/resources/templates/dashboard.html +++ b/src/main/resources/templates/dashboard.html @@ -46,6 +46,11 @@ .challenge .bolt { color:var(--accent); flex:0 0 auto; filter:drop-shadow(0 0 6px var(--glow-s)); } .challenge h5 { color:var(--accent); font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; margin-bottom:.3rem; } .challenge p { color:var(--muted); font-size:.78rem; line-height:1.45; } + .platform-intro { margin-bottom:1.1rem; } + .platform-intro h2 { color:var(--heading); font-size:1.15rem; margin:.25rem 0 .45rem; } + .platform-intro p { color:var(--muted); line-height:1.55; font-size:.88rem; } + .platform-intro ul { display:flex; flex-wrap:wrap; gap:.45rem .75rem; list-style:none; margin-top:.8rem; padding:0; } + .platform-intro li { color:var(--text); font-size:.76rem; padding:.32rem .55rem; border:1px solid var(--border); border-radius:99px; background:var(--surface-2); } @@ -79,7 +84,19 @@ -
+
+
+
Dein Lernbereich
+

Was du mit SysnaptiK Neural machst

+

Du bereitest dich praxisnah auf AP1 und AP2 der Fachinformatiker-Ausbildung vor: Wissen kurz einordnen, in Lernspielen anwenden und deinen Fortschritt gezielt weiterentwickeln.

+
    +
  • Interaktive IT-Szenarien
    • +
  • Prüfungsthemen & Übungen
    • +
  • Gespeicherter Lernfortschritt
    • +
+
+
+