diff --git a/.planning/quick/260329-u1d-kindgerechte-erkl-rung-auf-waldscreen-hi/260329-u1d-PLAN.md b/.planning/quick/260329-u1d-kindgerechte-erkl-rung-auf-waldscreen-hi/260329-u1d-PLAN.md new file mode 100644 index 0000000..d0fbc50 --- /dev/null +++ b/.planning/quick/260329-u1d-kindgerechte-erkl-rung-auf-waldscreen-hi/260329-u1d-PLAN.md @@ -0,0 +1,101 @@ +--- +phase: quick +plan: 260329-u1d +type: execute +wave: 1 +depends_on: [] +files_modified: + - index.html + - src/styles/main.css +autonomous: true +requirements: [] +must_haves: + truths: + - "Kind sieht auf dem Waldscreen einen einladenden, motivierenden Text" + - "Text erklaert kindgerecht dass man Buchstaben ueben kann und neue Bilder im Wald erscheinen" + artifacts: + - path: "index.html" + provides: "Erklaerungstext-Element im forest screen" + contains: "forest__intro" + - path: "src/styles/main.css" + provides: "Styling fuer den Erklaerungstext" + contains: "forest__intro" + key_links: [] +--- + + +Kindgerechte Erklaerung auf dem Waldscreen (Forest-Ansicht) hinzufuegen. + +Purpose: Das Kind soll beim Oeffnen des Waldscreens sofort verstehen, was es hier tun kann — Buchstaben ueben und dabei den Wald wachsen lassen. Der Text soll einladend und motivierend sein, passend zum Aquarell-/Pastellstil. +Output: Sichtbarer Erklaerungstext zwischen Titel und Waldszene auf dem Forest-Screen. + + + +@$HOME/.claude/get-shit-done/workflows/execute-plan.md +@$HOME/.claude/get-shit-done/templates/summary.md + + + +@index.html (forest screen section, lines 30-66) +@src/styles/main.css (forest styles) + + + + + + Task 1: Erklaerungstext in HTML und CSS hinzufuegen + index.html, src/styles/main.css + +1. In index.html: Zwischen dem forest__title h1 (Zeile 32) und dem forest-greeting div (Zeile 33) ein neues p-Element einfuegen: + +```html +

+ Willkommen in deinem Zauberwald! Waehle eine Stufe und uebe verschiedene Buchstaben auf der Tastatur. Jedes Mal, wenn du eine Uebung schaffst, waechst dein Wald — und ein neues Bild erscheint! Was wohl als Naechstes kommt? +

+``` + +Der Text soll: +- Kindgerecht sein (7 Jahre, einfache Saetze) +- Erklaeren dass man Buchstaben ueben kann (Stufenwahl) +- Erklaeren dass mit jeder Uebung neue Bilder im Wald erscheinen +- Neugier wecken ("Was wohl als Naechstes kommt?") +- Keine Umlaute verwenden (Codebase-Konvention: ue/oe/ae Transliteration) + +2. In src/styles/main.css: Nach dem .forest__title Block (Zeile 188) einen neuen Block einfuegen: + +```css +.forest__intro { + font-family: "Nunito", sans-serif; + font-size: 1.1rem; + color: var(--text-dark); + text-align: center; + max-width: 480px; + line-height: 1.6; + margin: 0 auto 1.5rem; + opacity: 0.85; +} +``` + +Styling passend zum Pastellstil: Nunito Font (wie andere Body-Texte), sanfte Opacity, zentriert, angenehme Zeilenhoehe fuer Lesbarkeit. +
+ + grep -q "forest__intro" index.html && grep -q "forest__intro" src/styles/main.css && echo "PASS" || echo "FAIL" + + Auf dem Waldscreen erscheint zwischen Titel und Waldszene ein kindgerechter, motivierender Erklaerungstext. Der Text erklaert Buchstabenuebungen und das Wachsen des Waldes. +
+ +
+ + +- `grep "forest__intro" index.html` zeigt das p-Element +- `grep "forest__intro" src/styles/main.css` zeigt das Styling +- `npx vite build` kompiliert ohne Fehler + + + +Auf dem Waldscreen ist ein kindgerechter Erklaerungstext sichtbar, der dem Kind (7 Jahre) erklaert, dass es Buchstaben ueben kann und mit jeder Uebung neue Bilder im Wald erscheinen. + + + +After completion, create `.planning/quick/260329-u1d-kindgerechte-erkl-rung-auf-waldscreen-hi/260329-u1d-SUMMARY.md` +