gurix/Zauberwald
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(01-02): welcome screen UI with onboarding flow

Browse Source 
- Implement initWelcomeScreen with companion card rendering, layout toggle, start button
- Update index.html with welcome screen structure (companion-grid, layout-toggle, start-btn)
- Add CSS for companion cards, layout buttons, start button with hover/selected/disabled states
- Selecting a companion enables start, clicking start saves progress to IndexedDB and navigates to forest

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
gurix
2026-03-29 11:06:54 +02:00
co-authored by Claude Opus 4.6
parent afae18decc
commit 20a7670ef9
3 changed files with 186 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+15 -1
View File
@@ -12,7 +12,21 @@
/>
</head>
<body>
<section id="screen-welcome" class="screen screen--active"></section>
<section id="screen-welcome" class="screen screen--active">
<div class="welcome">
<h1>Willkommen im Zauberwald!</h1>
<p class="welcome__subtitle">Waehle deine Begleitfigur:</p>
<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>
<section id="screen-forest" class="screen"></section>
<section id="screen-lesson" class="screen"></section>
<section id="screen-reward" class="screen"></section>