102 lines
3.5 KiB
Markdown
102 lines
3.5 KiB
Markdown
---
|
|
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: []
|
|
---
|
|
|
|
<objective>
|
|
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.
|
|
</objective>
|
|
|
|
<execution_context>
|
|
@$HOME/.claude/get-shit-done/workflows/execute-plan.md
|
|
@$HOME/.claude/get-shit-done/templates/summary.md
|
|
</execution_context>
|
|
|
|
<context>
|
|
@index.html (forest screen section, lines 30-66)
|
|
@src/styles/main.css (forest styles)
|
|
</context>
|
|
|
|
<tasks>
|
|
|
|
<task type="auto">
|
|
<name>Task 1: Erklaerungstext in HTML und CSS hinzufuegen</name>
|
|
<files>index.html, src/styles/main.css</files>
|
|
<action>
|
|
1. In index.html: Zwischen dem forest__title h1 (Zeile 32) und dem forest-greeting div (Zeile 33) ein neues p-Element einfuegen:
|
|
|
|
```html
|
|
<p class="forest__intro">
|
|
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?
|
|
</p>
|
|
```
|
|
|
|
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.
|
|
</action>
|
|
<verify>
|
|
<automated>grep -q "forest__intro" index.html && grep -q "forest__intro" src/styles/main.css && echo "PASS" || echo "FAIL"</automated>
|
|
</verify>
|
|
<done>Auf dem Waldscreen erscheint zwischen Titel und Waldszene ein kindgerechter, motivierender Erklaerungstext. Der Text erklaert Buchstabenuebungen und das Wachsen des Waldes.</done>
|
|
</task>
|
|
|
|
</tasks>
|
|
|
|
<verification>
|
|
- `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
|
|
</verification>
|
|
|
|
<success_criteria>
|
|
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.
|
|
</success_criteria>
|
|
|
|
<output>
|
|
After completion, create `.planning/quick/260329-u1d-kindgerechte-erkl-rung-auf-waldscreen-hi/260329-u1d-SUMMARY.md`
|
|
</output>
|