ijsbreker/index.html
Frank Meeuwsen da06d6bf00 feat: startscherm met controle over timer toegevoegd
Startscherm met groene "Start IJsbreker" knop geïmplementeerd.
Timer begint nu pas na klik op startknop in plaats van automatisch bij laden.
Facilitator heeft volledige controle over startmoment van de presentatie.

Wijzigingen:
- index.html: Startscherm HTML toegevoegd
- style.css: Styling voor start-screen en start-button
- app.js: Flow aangepast met showStartScreen() en startGame()
- Spatiebalk werkt op startscherm voor snelle start
- Documentatie geüpdatet in CLAUDE.md, gemini.md en agents.md

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-07 10:01:22 +01:00

48 lines
1.5 KiB
HTML

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sessie IJsbreker</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Timer balk rondom scherm -->
<div class="timer-border">
<div class="timer-bar timer-top"></div>
<div class="timer-bar timer-right"></div>
<div class="timer-bar timer-bottom"></div>
<div class="timer-bar timer-left"></div>
</div>
<!-- Hoofdcontainer -->
<div id="app" class="container">
<!-- Start scherm -->
<div id="startScreen" class="start-screen">
<button id="startButton" class="start-button">Start IJsbreker</button>
</div>
<!-- Stellingen scherm -->
<div id="statementScreen" class="statement-screen hidden">
<div id="leftStatement" class="statement left-statement">
<p id="leftText"></p>
</div>
<div id="rightStatement" class="statement right-statement">
<p id="rightText"></p>
</div>
</div>
<!-- Overlay met knop (over stellingen heen) -->
<div id="overlay" class="overlay hidden">
<button id="nextButton" class="next-button"></button>
</div>
<!-- Eind scherm -->
<div id="finishScreen" class="finish-screen hidden">
<h1 id="finishText"></h1>
</div>
</div>
<script src="app.js"></script>
</body>
</html>