2026-03-29 11:01:10 +02:00
<!doctype html>
< html lang = "de" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< title > Zauberwald</ title >
< link rel = "preconnect" href = "https://fonts.googleapis.com" />
< link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin />
< link
href = "https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600;700&family=Nunito:wght@400;600&display=swap"
rel = "stylesheet"
/>
</ head >
< body >
2026-03-29 11:06:54 +02:00
< section id = "screen-welcome" class = "screen screen--active" >
< div class = "welcome" >
< h1 > Willkommen im Zauberwald!</ h1 >
2026-03-29 20:46:04 +02:00
< p class = "welcome__subtitle" > Wähle deine Begleitfigur:</ p >
2026-03-29 11:06:54 +02:00
< div class = "welcome__companions" id = "companion-grid" >
<!-- Filled dynamically by screens.ts -->
</ div >
< p class = "welcome__layout-label" > Tastatur-Layout:</ p >
< div class = "welcome__layout-toggle" id = "layout-toggle" >
< button class = "layout-btn layout-btn--active" data-layout = "de" > DE</ button >
< button class = "layout-btn" data-layout = "ch" > CH</ button >
</ div >
< button class = "welcome__start-btn" id = "start-btn" disabled > Los geht's!</ button >
</ div >
</ section >
2026-03-29 11:15:18 +02:00
< section id = "screen-forest" class = "screen" >
< div class = "forest" >
< h1 class = "forest__title" > Dein Zauberwald</ h1 >
2026-03-29 21:40:07 +02:00
< p class = "forest__intro" >
2026-03-29 21:45:57 +02:00
Willkommen in deinem Zauberwald! Wähle eine Stufe und übe verschiedene Buchstaben auf der Tastatur. Jedes Mal, wenn du eine Übung schaffst, wächst dein Wald — und ein neues Bild erscheint! Was wohl als Nächstes kommt?
2026-03-29 21:40:07 +02:00
</ p >
2026-03-29 12:15:45 +02:00
< div id = "forest-greeting" class = "companion-area" style = "display:none" >
< img id = "forest-greeting-avatar" class = "companion-area__avatar" src = "" alt = "" >
< p id = "forest-greeting-text" class = "companion-area__text" ></ p >
</ div >
2026-03-29 13:40:54 +02:00
< div class = "forest__scene" id = "forest-scene" >
< svg class = "forest__bg" viewBox = "0 0 800 400" xmlns = "http://www.w3.org/2000/svg" >
< defs >
< linearGradient id = "sky-grad" x1 = "0" y1 = "0" x2 = "0" y2 = "1" >
< stop offset = "0%" stop-color = "#E8F4FD" />
< stop offset = "100%" stop-color = "#F0F8E8" />
</ linearGradient >
</ defs >
< rect x = "0" y = "0" width = "800" height = "300" fill = "url(#sky-grad)" />
< ellipse cx = "150" cy = "60" rx = "60" ry = "25" fill = "white" opacity = "0.5" />
< ellipse cx = "550" cy = "80" rx = "70" ry = "20" fill = "white" opacity = "0.4" />
< circle cx = "700" cy = "50" r = "30" fill = "#F8E8A0" opacity = "0.6" />
< g opacity = "0.3" >
< ellipse cx = "80" cy = "240" rx = "40" ry = "60" fill = "#7DB87D" />
< ellipse cx = "720" cy = "250" rx = "35" ry = "55" fill = "#6DA86D" />
< ellipse cx = "400" cy = "230" rx = "45" ry = "70" fill = "#8DC88D" />
</ g >
< ellipse cx = "200" cy = "320" rx = "250" ry = "80" fill = "#A8D8A8" />
< ellipse cx = "650" cy = "330" rx = "200" ry = "60" fill = "#B8E0B0" />
< rect x = "0" y = "300" width = "800" height = "100" fill = "#C8E6C0" rx = "0" />
</ svg >
< div class = "forest__grid" id = "forest-grid" >
</ div >
</ div >
2026-03-29 11:15:18 +02:00
< div class = "forest__level-map" id = "level-map" >
<!-- Level cards rendered dynamically -->
</ div >
2026-03-29 20:46:04 +02:00
< button class = "forest__continue-btn" id = "continue-btn" > Weiter üben</ button >
2026-03-29 11:15:18 +02:00
</ div >
</ section >
2026-03-29 11:12:13 +02:00
< section id = "screen-lesson" class = "screen" >
< div class = "lesson" >
2026-03-29 20:46:04 +02:00
< button class = "lesson__back-btn" id = "lesson-back-btn" > ← Zurück</ button >
2026-03-29 13:48:56 +02:00
< div class = "lesson__phase-indicator" id = "lesson-phase-indicator" ></ div >
2026-03-29 12:15:45 +02:00
< div id = "lesson-companion" class = "companion-area" style = "display:none" >
< img id = "lesson-companion-avatar" class = "companion-area__avatar" src = "" alt = "" >
< p id = "lesson-companion-text" class = "companion-area__text" ></ p >
</ div >
2026-03-29 11:12:13 +02:00
< div class = "lesson__letter-area" id = "letter-area" >
<!-- Current letter appears here -->
</ div >
< div class = "lesson__keyboard" id = "lesson-keyboard" >
<!-- Keyboard rendered here -->
</ div >
</ div >
</ section >
2026-03-29 13:52:05 +02:00
< section id = "screen-reward" class = "screen" >
< div class = "reward" >
< h2 class = "reward__title" > Schau mal!</ h2 >
< div class = "reward__image-area" id = "reward-image-area" >
<!-- Placeholder or generated image -->
</ div >
< div class = "reward__companion" id = "reward-companion" >
< img id = "reward-companion-avatar" class = "companion-area__avatar" src = "" alt = "" >
< p id = "reward-companion-text" class = "companion-area__text" ></ p >
</ div >
< div class = "reward__actions" >
2026-03-29 20:46:04 +02:00
< button class = "reward__btn reward__btn--continue" id = "reward-continue-btn" > Weiter üben</ button >
< button class = "reward__btn reward__btn--back" id = "reward-back-btn" > Zurück zum Wald</ button >
2026-03-29 13:52:05 +02:00
</ div >
</ div >
</ section >
2026-03-29 13:46:10 +02:00
< section id = "screen-parent" class = "screen" >
< div class = "parent" >
2026-03-29 20:46:04 +02:00
< button class = "parent__back-btn" id = "parent-back-btn" > ← Zurück</ button >
2026-03-29 13:46:10 +02:00
< h1 class = "parent__title" > Elternbereich</ h1 >
<!-- Code gate overlay -->
< div class = "parent__gate" id = "parent-gate" >
< p > Bitte Code eingeben:</ p >
< input type = "password" id = "parent-code-input" class = "parent__code-input" maxlength = "4" placeholder = "____" inputmode = "numeric" >
< p class = "parent__gate-error" id = "parent-gate-error" style = "display:none" > Falscher Code</ p >
</ div >
<!-- Content (hidden until code entered) -->
< div class = "parent__content" id = "parent-content" style = "display:none" >
< section class = "parent__section" >
2026-03-29 20:46:04 +02:00
< h2 > Übersicht</ h2 >
2026-03-29 13:46:10 +02:00
< div class = "parent__stats" id = "parent-stats" >
< div class = "parent__stat" >
< span class = "parent__stat-label" > Aktuelle Stufe</ span >
< span class = "parent__stat-value" id = "stat-level" > -</ span >
</ div >
< div class = "parent__stat" >
< span class = "parent__stat-label" > Einheiten</ span >
< span class = "parent__stat-value" id = "stat-sessions" > -</ span >
</ div >
< div class = "parent__stat" >
< span class = "parent__stat-label" > Genauigkeit</ span >
< span class = "parent__stat-value" id = "stat-accuracy" > -</ span >
</ div >
</ div >
< div class = "parent__calendar" id = "parent-calendar" >
2026-03-29 21:45:57 +02:00
< h3 > Übungstage</ h3 >
2026-03-29 13:46:10 +02:00
< div class = "parent__calendar-dots" id = "calendar-dots" ></ div >
</ div >
< div class = "parent__errors" id = "parent-errors" >
2026-03-29 21:45:57 +02:00
< h3 > Häufigste Fehlertasten</ h3 >
2026-03-29 13:46:10 +02:00
< div id = "error-keys-list" ></ div >
</ div >
</ section >
< section class = "parent__section" >
< h2 > Einstellungen</ h2 >
< div class = "parent__settings" >
< div class = "parent__setting" >
< label > Tastatur-Layout</ label >
< select id = "setting-layout" >
< option value = "de" > DE (Deutschland)</ option >
< option value = "ch" > CH (Schweiz)</ option >
</ select >
</ div >
< div class = "parent__setting" >
< label > Audio</ label >
< label class = "parent__toggle" >
< input type = "checkbox" id = "setting-audio" >
< span > An/Aus</ span >
</ label >
</ div >
< div class = "parent__setting" >
< label > Begleitfigur</ label >
< select id = "setting-companion" ></ select >
</ div >
< div class = "parent__setting" >
< label > API-Key</ label >
< input type = "password" id = "setting-apikey" class = "parent__input" placeholder = "Gemini API Key" >
< button class = "parent__save-btn" id = "save-apikey-btn" > Speichern</ button >
</ div >
</ div >
</ section >
2026-03-29 18:15:44 +02:00
< section class = "parent__section" >
< h2 > Daten</ h2 >
< div class = "parent__data-actions" >
< button class = "parent__action-btn" id = "export-btn" > Fortschritt exportieren</ button >
< div class = "parent__import-row" >
< button class = "parent__action-btn" id = "import-btn" > Fortschritt importieren</ button >
< input type = "file" id = "import-file" accept = ".json" style = "display:none" >
</ div >
2026-03-29 20:46:04 +02:00
< button class = "parent__action-btn parent__action-btn--danger" id = "reset-btn" > Alles zurücksetzen</ button >
2026-03-29 18:15:44 +02:00
</ div >
< p class = "parent__data-info" id = "data-feedback" style = "display:none" ></ p >
</ section >
2026-03-29 13:46:10 +02:00
</ div >
</ div >
</ section >
2026-03-29 11:01:10 +02:00
2026-03-29 18:16:34 +02:00
< div id = "error-overlay" class = "error-overlay" style = "display:none" >
< div class = "error-overlay__content" >
< p class = "error-overlay__icon" > 🌳 </ p >
< p class = "error-overlay__message" > Oh, der Wald braucht kurz eine Pause...</ p >
< button class = "error-overlay__btn" onclick = "location.reload()" > Nochmal versuchen</ button >
</ div >
</ div >
2026-03-29 18:18:31 +02:00
< button id = "mute-btn" class = "mute-btn" aria-label = "Audio stumm schalten" title = "Audio" >
< span class = "mute-btn__icon" id = "mute-icon" > 🔊 </ span >
</ button >
2026-03-29 20:50:20 +02:00
<!-- Lightbox for forest element images -->
< div id = "image-lightbox" class = "lightbox" style = "display:none" >
< img id = "lightbox-img" class = "lightbox__img" src = "" alt = "" >
</ div >
2026-03-29 11:01:10 +02:00
< script type = "module" src = "/src/main.ts" ></ script >
</ body >
</ html >
