ijsbreker/editor.html

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stellingen Editor - IJsbreker</title>
    <link rel="stylesheet" href="editor.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>🎯 Sessie IJsbreker - Stellingen Editor</h1>
            <div class="header-actions">
                <a href="/" class="btn btn-secondary">← Terug naar Spel</a>
            </div>
        </header>

        <main>
            <!-- Workshop Sets -->
            <section class="sets-section">
                <h2>📂 Workshop Sets</h2>
                <div class="sets-controls">
                    <div class="set-selector-group">
                        <label for="setSelector">Actieve Set:</label>
                        <select id="setSelector" class="set-select">
                            <option value="">Laden...</option>
                        </select>
                    </div>
                    <div class="set-actions">
                        <button id="saveAsNewSet" class="btn btn-secondary">💾 Opslaan als Nieuwe Set</button>
                        <button id="deleteSet" class="btn btn-danger" style="display:none;">🗑️ Verwijder Set</button>
                    </div>
                </div>
            </section>

            <!-- Basis instellingen -->
            <section class="settings-section">
                <h2>⚙️ Instellingen</h2>
                <div class="settings-grid">
                    <div class="setting-item">
                        <label for="timer">Timer (seconden):</label>
                        <input type="number" id="timer" min="5" max="300" value="30">
                    </div>
                    <div class="setting-item">
                        <label for="fontSize">Font grootte:</label>
                        <input type="text" id="fontSize" value="3rem" placeholder="3rem">
                    </div>
                    <div class="setting-item">
                        <label for="buttonText">Knop tekst:</label>
                        <input type="text" id="buttonText" value="Volgende Stelling">
                    </div>
                    <div class="setting-item">
                        <label for="finishText">Eind tekst:</label>
                        <input type="text" id="finishText" value="Sessie Afgelopen!">
                    </div>
                    <div class="setting-item">
                        <label for="colorLeft">Kleur links:</label>
                        <input type="color" id="colorLeft" value="#3B82F6">
                        <input type="text" id="colorLeftText" value="#3B82F6">
                    </div>
                    <div class="setting-item">
                        <label for="colorRight">Kleur rechts:</label>
                        <input type="color" id="colorRight" value="#EF4444">
                        <input type="text" id="colorRightText" value="#EF4444">
                    </div>
                </div>
            </section>

            <!-- Stellingen -->
            <section class="statements-section">
                <div class="section-header">
                    <h2>📝 Stellingen</h2>
                    <div class="header-controls">
                        <button id="openStellingkast" class="btn btn-secondary">📚 Stellingkast</button>
                        <span id="statementCount" class="count-badge">0 stellingen</span>
                    </div>
                </div>

                <div id="statementsList" class="statements-list">
                    <!-- Stellingen worden hier dynamisch toegevoegd -->
                </div>

                <button id="addStatement" class="btn btn-add">
                    + Nieuwe Stelling
                </button>
            </section>

            <!-- Stellingkast Panel -->
            <div id="stellingkastPanel" class="stellingkast-panel">
                <div class="panel-header">
                    <h2>📚 Stellingkast</h2>
                    <button id="closeStellingkast" class="btn-close">×</button>
                </div>
                <div class="panel-content">
                    <input type="text" id="searchStellingkast" placeholder="Zoek stelling..." class="search-input">
                    <div id="stellingkastList" class="stellingkast-list">
                        <!-- Stellingen uit kast worden hier geladen -->
                    </div>
                </div>
            </div>

            <!-- Opslaan -->
            <section class="actions-section">
                <button id="saveConfig" class="btn btn-primary">
                    💾 Opslaan naar Config
                </button>
                <div id="statusMessage" class="status-message"></div>
            </section>
        </main>
    </div>

    <script src="editor.js"></script>
</body>
</html>
-												feat: Sessie IJsbreker - interactief workshop spel

Browser-based interactief spel voor workshops waarbij deelnemers fysiek
kiezen tussen twee stellingen die op een beamer worden getoond.

Features:
- Presentatie modus met visuele timer rondom scherm
- Timer animatie loopt synchroon rond in opgegeven tijd
- Geluidssignaal bij einde timer
- Overlay met stellingen na timer (grayed out)
- Keyboard shortcuts (spatiebalk voor volgende)
- Direct eindscherm bij laatste stelling

- Web-based stellingen editor
- Flask backend voor config management
- Real-time CRUD operaties op stellingen
- Kleurenpicker voor achtergronden
- Validatie en filtering van lege stellingen
- Volledig offline werkend

Tech stack:
- Frontend: Pure HTML/CSS/JavaScript
- Backend: Python Flask + flask-cors
- Config driven via JSON

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

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2025-11-03 15:23:11 +00:00
+								<!DOCTYPE html>
 								<html lang="nl">
 								<head>
 								    <meta charset="UTF-8">
 								    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 								    <title>Stellingen Editor - IJsbreker</title>
 								    <link rel="stylesheet" href="editor.css">
 								</head>
 								<body>
 								    <div class="container">
 								        <header>
 								            <h1>🎯 Sessie IJsbreker - Stellingen Editor</h1>
 								            <div class="header-actions">
 								                <a href="/" class="btn btn-secondary">← Terug naar Spel</a>
 								            </div>
 								        </header>
 								        <main>
-												feat: workshop sets management systeem toegevoegd

Nieuw sets systeem voor het beheren van meerdere workshop configuraties.

Nieuwe functionaliteit:
- Sets dropdown bovenaan editor voor eenvoudig switchen
- "Opslaan als Nieuwe Set" knop voor nieuwe configuraties
- Meerdere complete workshop sets opslaan en laden
- Elke set bevat eigen stellingen, kleuren, timer en teksten
- Automatische migratie van huidige config naar default set

Backend wijzigingen:
- GET/POST /api/sets endpoints toegevoegd
- Helper functies voor sets management en config updates
- Automatische initialisatie van sets.json bij eerste gebruik

Frontend wijzigingen:
- Sets sectie met dropdown en acties knoppen (editor.html)
- Styling met blauwe accent border (editor.css)
- Complete sets management logic (editor.js)
- Event handlers voor set selectie en opslaan

Data structuur:
- sets.json: database met alle workshop sets
- config.json: blijft actieve configuratie voor presentatie

Backwards compatible:
- Systeem werkt zonder sets.json (legacy fallback)
- Presentatie modus ongewijzigd (gebruikt config.json)

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

											
										
										
											2025-12-16 06:36:55 +00:00
+								            <!-- Workshop Sets -->
 								            <section class="sets-section">
 								                <h2>📂 Workshop Sets</h2>
 								                <div class="sets-controls">
 								                    <div class="set-selector-group">
 								                        <label for="setSelector">Actieve Set:</label>
 								                        <select id="setSelector" class="set-select">
 								                            <option value="">Laden...</option>
 								                        </select>
 								                    </div>
 								                    <div class="set-actions">
 								                        <button id="saveAsNewSet" class="btn btn-secondary">💾 Opslaan als Nieuwe Set</button>
 								                        <button id="deleteSet" class="btn btn-danger" style="display:none;">🗑️ Verwijder Set</button>
 								                    </div>
 								                </div>
 								            </section>
-												feat: Sessie IJsbreker - interactief workshop spel

Browser-based interactief spel voor workshops waarbij deelnemers fysiek
kiezen tussen twee stellingen die op een beamer worden getoond.

Features:
- Presentatie modus met visuele timer rondom scherm
- Timer animatie loopt synchroon rond in opgegeven tijd
- Geluidssignaal bij einde timer
- Overlay met stellingen na timer (grayed out)
- Keyboard shortcuts (spatiebalk voor volgende)
- Direct eindscherm bij laatste stelling

- Web-based stellingen editor
- Flask backend voor config management
- Real-time CRUD operaties op stellingen
- Kleurenpicker voor achtergronden
- Validatie en filtering van lege stellingen
- Volledig offline werkend

Tech stack:
- Frontend: Pure HTML/CSS/JavaScript
- Backend: Python Flask + flask-cors
- Config driven via JSON

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

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2025-11-03 15:23:11 +00:00
+								            <!-- Basis instellingen -->
 								            <section class="settings-section">
 								                <h2>⚙️ Instellingen</h2>
 								                <div class="settings-grid">
 								                    <div class="setting-item">
 								                        <label for="timer">Timer (seconden):</label>
 								                        <input type="number" id="timer" min="5" max="300" value="30">
 								                    </div>
 								                    <div class="setting-item">
 								                        <label for="fontSize">Font grootte:</label>
 								                        <input type="text" id="fontSize" value="3rem" placeholder="3rem">
 								                    </div>
 								                    <div class="setting-item">
 								                        <label for="buttonText">Knop tekst:</label>
 								                        <input type="text" id="buttonText" value="Volgende Stelling">
 								                    </div>
 								                    <div class="setting-item">
 								                        <label for="finishText">Eind tekst:</label>
 								                        <input type="text" id="finishText" value="Sessie Afgelopen!">
 								                    </div>
 								                    <div class="setting-item">
 								                        <label for="colorLeft">Kleur links:</label>
 								                        <input type="color" id="colorLeft" value="#3B82F6">
 								                        <input type="text" id="colorLeftText" value="#3B82F6">
 								                    </div>
 								                    <div class="setting-item">
 								                        <label for="colorRight">Kleur rechts:</label>
 								                        <input type="color" id="colorRight" value="#EF4444">
 								                        <input type="text" id="colorRightText" value="#EF4444">
 								                    </div>
 								                </div>
 								            </section>
 								            <!-- Stellingen -->
 								            <section class="statements-section">
 								                <div class="section-header">
 								                    <h2>📝 Stellingen</h2>
-												chore: session end - stellingkast en drag-drop features toegevoegd

											
										
										
											2025-12-12 07:34:45 +00:00
+								                    <div class="header-controls">
 								                        <button id="openStellingkast" class="btn btn-secondary">📚 Stellingkast</button>
 								                        <span id="statementCount" class="count-badge">0 stellingen</span>
 								                    </div>
-												feat: Sessie IJsbreker - interactief workshop spel

Browser-based interactief spel voor workshops waarbij deelnemers fysiek
kiezen tussen twee stellingen die op een beamer worden getoond.

Features:
- Presentatie modus met visuele timer rondom scherm
- Timer animatie loopt synchroon rond in opgegeven tijd
- Geluidssignaal bij einde timer
- Overlay met stellingen na timer (grayed out)
- Keyboard shortcuts (spatiebalk voor volgende)
- Direct eindscherm bij laatste stelling

- Web-based stellingen editor
- Flask backend voor config management
- Real-time CRUD operaties op stellingen
- Kleurenpicker voor achtergronden
- Validatie en filtering van lege stellingen
- Volledig offline werkend

Tech stack:
- Frontend: Pure HTML/CSS/JavaScript
- Backend: Python Flask + flask-cors
- Config driven via JSON

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

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2025-11-03 15:23:11 +00:00
+								                </div>
 								                <div id="statementsList" class="statements-list">
 								                    <!-- Stellingen worden hier dynamisch toegevoegd -->
 								                </div>
 								                <button id="addStatement" class="btn btn-add">
 								                    + Nieuwe Stelling
 								                </button>
 								            </section>
-												chore: session end - stellingkast en drag-drop features toegevoegd

											
										
										
											2025-12-12 07:34:45 +00:00
+								            <!-- Stellingkast Panel -->
 								            <div id="stellingkastPanel" class="stellingkast-panel">
 								                <div class="panel-header">
 								                    <h2>📚 Stellingkast</h2>
 								                    <button id="closeStellingkast" class="btn-close">×</button>
 								                </div>
 								                <div class="panel-content">
 								                    <input type="text" id="searchStellingkast" placeholder="Zoek stelling..." class="search-input">
 								                    <div id="stellingkastList" class="stellingkast-list">
 								                        <!-- Stellingen uit kast worden hier geladen -->
 								                    </div>
 								                </div>
 								            </div>
-												feat: Sessie IJsbreker - interactief workshop spel

Browser-based interactief spel voor workshops waarbij deelnemers fysiek
kiezen tussen twee stellingen die op een beamer worden getoond.

Features:
- Presentatie modus met visuele timer rondom scherm
- Timer animatie loopt synchroon rond in opgegeven tijd
- Geluidssignaal bij einde timer
- Overlay met stellingen na timer (grayed out)
- Keyboard shortcuts (spatiebalk voor volgende)
- Direct eindscherm bij laatste stelling

- Web-based stellingen editor
- Flask backend voor config management
- Real-time CRUD operaties op stellingen
- Kleurenpicker voor achtergronden
- Validatie en filtering van lege stellingen
- Volledig offline werkend

Tech stack:
- Frontend: Pure HTML/CSS/JavaScript
- Backend: Python Flask + flask-cors
- Config driven via JSON

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

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2025-11-03 15:23:11 +00:00
+								            <!-- Opslaan -->
 								            <section class="actions-section">
 								                <button id="saveConfig" class="btn btn-primary">
 								                    💾 Opslaan naar Config
 								                </button>
 								                <div id="statusMessage" class="status-message"></div>
 								            </section>
 								        </main>
 								    </div>
 								    <script src="editor.js"></script>
 								</body>
 								</html>