Scorebord

⏱ Tijd voorbij

🔦 Nieuw duo

Naam 1 Naam 2

Hoeveel spelers gaan jullie vinden? (jullie doel)

⏱ Timer tonen tijdens het spel

3 levens — doel halen = gewonnen!

Sem & Noa

0 / 10

Gevonden? Tik op het scherm

🏅 Beste duo's van de les

🎉

Gewonnen!

🔦 10 tellen in de rimboe

Een duo bepaalt vooraf hoeveel spelers het gaat vinden — dat is hun doel.

👀 Elk gevonden kind tikt op het scherm: de teller gaat +1.
🎯 Haalt het duo zijn doel? Dan gewonnen — met confetti!
❤️ Het duo heeft 3 levens. Een foute buut? Tik een hartje weg.
💥 3 levens kwijt = af, doel niet gehaald.
🏅 Het duo met het hoogste behaalde doel wint de les.

Niet meer tonen

Niet meer tonen

Afgegooid? Tik hier.De munt gaat naar de tegenstander →

🪙0

Afgegooid? Tik hier.← De munt gaat naar de tegenstander

🪙0

🏆 Uitslagen

Team Blauw

—

🪙 Munten over—

💸 Uitgegeven—

🛒 Gekocht—

🎯 Afgegooid—

Team Rood

—

🪙 Munten over—

💸 Uitgegeven—

🛒 Gekocht—

🎯 Afgegooid—

munten over uitgegeven

🛒 De winkel van Sinkel

Geef je verdiende munten uit aan power-ups voor de volgende ronde

🎁 Rad van de Mystery Box

▼

Stopwatch

Gestopt

00:00.00

Timer

Kies of stel een tijd in

05:00

Tabata / intervaltimer

WERK

Ronde 1 / 8

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HYROX Timer</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }

body {
      background: #1a0a2e;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-family: 'Arial Black', Arial, sans-serif;
      padding: 1rem;
    }

.logo-bar {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 1.5rem;
    }
    .logo-hex {
      width: 56px; height: 56px;
      background: #F5A623;
      clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
      display: flex; align-items: center; justify-content: center;
    }
    .logo-hex span { color: #1a0a2e; font-size: 26px; font-weight: 900; }
    .logo-text { color: white; font-size: 38px; font-weight: 900; letter-spacing: 6px; text-transform: uppercase; }
    .logo-text span { color: #F5A623; }

.layout {
      display: flex;
      gap: 24px;
      align-items: flex-start;
      width: 100%;
      max-width: 1000px;
    }

.timer-card {
      background: #2a1248;
      border: 2px solid #4B2E83;
      border-radius: 24px;
      padding: 2.5rem 3rem;
      text-align: center;
      flex: 1;
      min-width: 320px;
    }

.label {
      color: #F5A623;
      font-size: 13px;
      letter-spacing: 4px;
      text-transform: uppercase;
      margin-bottom: 0.5rem;
    }
    .status-bar {
      font-size: 12px;
      color: #7a5ab0;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 1.25rem;
    }
    .status-dot {
      display: inline-block;
      width: 10px; height: 10px;
      border-radius: 50%;
      background: #3d1e6e;
      margin-right: 8px;
      vertical-align: middle;
    }
    .status-dot.active {
      background: #2ecc71;
      box-shadow: 0 0 0 4px rgba(46,204,113,0.2);
      animation: pulse 1s infinite;
    }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

#display {
      font-size: clamp(68px, 12vw, 108px);
      font-weight: 900;
      color: white;
      letter-spacing: 6px;
      font-variant-numeric: tabular-nums;
      line-height: 1;
      margin-bottom: 0.25rem;
      transition: color 0.2s;
    }
    #display.running { color: #F5A623; }

.ms-display {
      font-size: 30px;
      color: #7a5ab0;
      letter-spacing: 3px;
      margin-bottom: 2rem;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      transition: color 0.2s;
    }
    .ms-display.running { color: #c8901a; }

.divider {
      width: 80px; height: 4px;
      background: #F5A623;
      margin: 0 auto 2rem;
      border-radius: 2px;
    }

.btn-row { display: flex; gap: 12px; justify-content: center; }

button {
      border: none;
      border-radius: 12px;
      cursor: pointer;
      font-family: 'Arial Black', Arial, sans-serif;
      font-weight: 900;
      letter-spacing: 1px;
      text-transform: uppercase;
      transition: transform 0.12s, opacity 0.12s, background 0.15s, border-color 0.15s;
    }
    button:active { transform: scale(0.96); }

#btn-start {
      background: #F5A623;
      color: #1a0a2e;
      font-size: 20px;
      padding: 16px 40px;
      flex: 1;
    }
    #btn-start:hover { opacity: 0.88; }

#btn-reset {
      background: #3d1e6e;
      color: #a07cd0;
      font-size: 15px;
      padding: 16px 20px;
      border: 1.5px solid #4B2E83;
    }
    #btn-reset:hover { background: #4B2E83; color: white; }

.right-panel {
      display: flex;
      flex-direction: column;
      gap: 16px;
      flex: 1;
      min-width: 260px;
    }

#btn-finisher {
      background: #4B2E83;
      color: white;
      font-size: clamp(22px, 2.5vw, 30px);
      padding: 36px 20px;
      border-radius: 20px;
      border: 3px solid #7a5ab0;
      width: 100%;
      line-height: 1.3;
      letter-spacing: 2px;
    }
    #btn-finisher:hover { background: #5e38a0; border-color: #F5A623; }
    #btn-finisher .sub {
      font-size: 13px;
      color: #c8a8f0;
      letter-spacing: 3px;
      display: block;
      margin-top: 8px;
      font-weight: 400;
    }
    #btn-finisher.flash { background: #2ecc71; border-color: #27ae60; }

.finishers-card {
      background: #2a1248;
      border: 2px solid #4B2E83;
      border-radius: 20px;
      padding: 1.25rem 1.5rem;
    }
    .finishers-header {
      color: #F5A623;
      font-size: 12px;
      letter-spacing: 3px;
      text-transform: uppercase;
      margin-bottom: 1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .finisher-count-badge {
      background: #F5A623;
      color: #1a0a2e;
      border-radius: 20px;
      padding: 2px 10px;
      font-size: 13px;
    }

#finishers-list {
      max-height: 280px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    #finishers-list::-webkit-scrollbar { width: 4px; }
    #finishers-list::-webkit-scrollbar-thumb { background: #4B2E83; border-radius: 2px; }

.finisher-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #1a0a2e;
      border-radius: 10px;
      padding: 10px 14px;
      border: 1px solid #2a1248;
      cursor: pointer;
      animation: popIn 0.2s ease;
      transition: border-color 0.15s, background 0.15s;
    }
    .finisher-item:hover {
      border-color: #F5A623;
      background: #140820;
    }
    .finisher-item .photo-hint {
      font-size: 11px;
      color: #4B2E83;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-left: 8px;
      transition: color 0.15s;
    }
    .finisher-item:hover .photo-hint { color: #F5A623; }

@keyframes popIn {
      from { transform: scale(0.88); opacity: 0; }
      to   { transform: scale(1);    opacity: 1; }
    }
    .finisher-num  { color: #F5A623; font-size: 15px; font-weight: 900; }
    .finisher-time { color: white; font-variant-numeric: tabular-nums; font-size: 15px; }

.fullscreen-hint {
      margin-top: 1.5rem;
      color: #3d1e6e;
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

@media (max-width: 680px) {
      .layout { flex-direction: column; }
      .timer-card { min-width: unset; }
    }

/* ── PHOTO OVERLAY ── */
    #photo-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: #0d0520;
      z-index: 100;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 2rem;
    }
    #photo-overlay.show { display: flex; }

.photo-card {
      background: #1a0a2e;
      border: 4px solid #F5A623;
      border-radius: 28px;
      padding: 3rem 4rem;
      text-align: center;
      max-width: 700px;
      width: 100%;
      position: relative;
    }

.photo-top-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      margin-bottom: 2rem;
    }
    .photo-hex {
      width: 50px; height: 50px;
      background: #F5A623;
      clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .photo-hex span { color: #1a0a2e; font-size: 22px; font-weight: 900; }
    .photo-brand { color: white; font-size: 32px; font-weight: 900; letter-spacing: 5px; }
    .photo-brand span { color: #F5A623; }

.photo-subtitle {
      color: #7a5ab0;
      font-size: 13px;
      letter-spacing: 4px;
      text-transform: uppercase;
      margin-bottom: 1rem;
    }

.photo-rank {
      color: #F5A623;
      font-size: 20px;
      letter-spacing: 3px;
      text-transform: uppercase;
      margin-bottom: 0.5rem;
    }

.photo-time {
      font-size: clamp(72px, 16vw, 120px);
      font-weight: 900;
      color: white;
      letter-spacing: 6px;
      font-variant-numeric: tabular-nums;
      line-height: 1;
      margin-bottom: 0.25rem;
    }
    .photo-ms {
      font-size: 36px;
      color: #F5A623;
      letter-spacing: 4px;
      font-variant-numeric: tabular-nums;
      margin-bottom: 2rem;
      font-weight: 700;
    }

.photo-divider {
      width: 100px; height: 4px;
      background: #F5A623;
      margin: 0 auto 2rem;
      border-radius: 2px;
    }

.photo-stations {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 2rem;
    }
    .station-pill {
      background: #2a1248;
      border: 1px solid #4B2E83;
      border-radius: 20px;
      padding: 5px 12px;
      font-size: 11px;
      color: #a07cd0;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

.photo-footer {
      color: #3d1e6e;
      font-size: 12px;
      letter-spacing: 3px;
      text-transform: uppercase;
    }

#btn-close-photo {
      margin-top: 2rem;
      background: transparent;
      border: 2px solid #4B2E83;
      color: #7a5ab0;
      font-size: 14px;
      padding: 12px 32px;
      border-radius: 12px;
      letter-spacing: 2px;
    }
    #btn-close-photo:hover { border-color: #F5A623; color: #F5A623; }

.confetti-row {
      font-size: 28px;
      letter-spacing: 8px;
      margin-bottom: 1rem;
    }
  </style>
</head>
<body>

<div class="timer-card">
      <div class="label">Stopwatch</div>
      <div class="status-bar">
        <span class="status-dot" id="dot"></span>
        <span id="status-txt">Gestopt</span>
      </div>
      <div id="display">00:00</div>
      <div class="ms-display" id="ms-disp">.00</div>
      <div class="divider"></div>
      <div class="btn-row">
        <button id="btn-start">Start</button>
        <button id="btn-reset">Reset</button>
      </div>
    </div>

<div class="right-panel">
      <button id="btn-finisher">
        IK BEN BINNEN!
        <span class="sub">Tik hier als je finisht</span>
      </button>

<div class="finishers-card">
        <div class="finishers-header">
          <span>Finishers</span>
          <span class="finisher-count-badge" id="count">0</span>
        </div>
        <div id="finishers-list"></div>
      </div>
    </div>

</div>

<div class="fullscreen-hint">F11 = volledig scherm &nbsp;|&nbsp; Spatie = start / stop &nbsp;|&nbsp; R = reset &nbsp;|&nbsp; Klik een tijd voor de foto</div>

<div id="photo-overlay">
    <div class="photo-card" id="photo-card">
      <div class="confetti-row" id="photo-confetti"></div>
      <div class="photo-top-bar">
        <div class="photo-hex"><span>H</span></div>
        <div class="photo-brand">HY<span>ROX</span></div>
      </div>
      <div class="photo-subtitle">Mini Hyrox — Finisher</div>
      <div class="photo-rank" id="photo-rank">Finisher 1</div>
      <div class="photo-time" id="photo-time">00:00</div>
      <div class="photo-ms" id="photo-ms">.00</div>
      <div class="photo-divider"></div>
      <div class="photo-stations">
        <span class="station-pill">Sled push</span>
        <span class="station-pill">Sandbag carry</span>
        <span class="station-pill">Touwspringen</span>
        <span class="station-pill">Wall balls</span>
        <span class="station-pill">Box step-ups</span>
        <span class="station-pill">Burpee jumps</span>
        <span class="station-pill">Farmer carry</span>
        <span class="station-pill">Lunges</span>
      </div>
      <div class="photo-footer">Klik ergens om terug te gaan</div>
    </div>
    <button id="btn-close-photo">Terug naar timer</button>
  </div>

const disp      = document.getElementById('display');
    const msDisp    = document.getElementById('ms-disp');
    const btnStart  = document.getElementById('btn-start');
    const btnReset  = document.getElementById('btn-reset');
    const btnFin    = document.getElementById('btn-finisher');
    const finList   = document.getElementById('finishers-list');
    const countEl   = document.getElementById('count');
    const dot       = document.getElementById('dot');
    const statusTxt = document.getElementById('status-txt');
    const overlay   = document.getElementById('photo-overlay');

const medals = ['', '🥇','🥈','🥉'];

function fmt(ms) {
      const h  = Math.floor(ms / 3600000);
      const m  = Math.floor((ms % 3600000) / 60000);
      const s  = Math.floor((ms % 60000) / 1000);
      const cs = Math.floor((ms % 1000) / 10);
      const mm = String(m).padStart(2, '0');
      const ss = String(s).padStart(2, '0');
      const hh = String(h).padStart(2, '0');
      const main = h > 0 ? hh + ':' + mm + ':' + ss : mm + ':' + ss;
      return { main, cs: '.' + String(cs).padStart(2, '0') };
    }

function tick() {
      elapsed = Date.now() - start;
      const f = fmt(elapsed);
      disp.textContent   = f.main;
      msDisp.textContent = f.cs;
      raf = requestAnimationFrame(tick);
    }

function setRunning(r) {
      running = r;
      dot.className         = 'status-dot' + (r ? ' active' : '');
      statusTxt.textContent = r ? 'Loopt...' : 'Gestopt';
      disp.className        = r ? 'running' : '';
      msDisp.className      = r ? 'running' : '';
      btnStart.textContent  = r ? 'Stop' : 'Start';
      btnStart.style.background = r ? '#e74c3c' : '#F5A623';
      btnStart.style.color      = r ? 'white'   : '#1a0a2e';
    }

btnStart.addEventListener('click', () => {
      if (!running) {
        start = Date.now() - elapsed;
        raf = requestAnimationFrame(tick);
        setRunning(true);
      } else {
        cancelAnimationFrame(raf);
        setRunning(false);
      }
    });

btnReset.addEventListener('click', () => {
      if (!confirm('Timer en finishers resetten?')) return;
      cancelAnimationFrame(raf);
      elapsed = 0; start = null; finishers = [];
      disp.textContent   = '00:00';
      msDisp.textContent = '.00';
      finList.innerHTML  = '';
      countEl.textContent = '0';
      setRunning(false);
    });

btnFin.addEventListener('click', () => {
      if (elapsed === 0) return;
      const n = finishers.length + 1;
      const snapshot = elapsed;
      const f = fmt(snapshot);
      finishers.push(snapshot);
      countEl.textContent = n;

btnFin.classList.add('flash');
      setTimeout(() => btnFin.classList.remove('flash'), 350);
    });

function openPhoto(ms, rank) {
      const f = fmt(ms);
      document.getElementById('photo-rank').textContent    = (rank <= 3 ? medals[rank] + '  ' : '') + 'Finisher ' + rank;
      document.getElementById('photo-time').textContent    = f.main;
      document.getElementById('photo-ms').textContent      = f.cs;
      document.getElementById('photo-confetti').textContent = rank === 1 ? '🏆' : rank === 2 ? '🥈' : rank === 3 ? '🥉' : '🎉';
      overlay.classList.add('show');
    }

function closePhoto() { overlay.classList.remove('show'); }

</body>
</html>

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Gym Niveau — Zelfbeoordeling</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  :root {
    --bg: #f5f3ef;
    --bg-2: #ebe7df;
    --ink: #1a1a1a;
    --ink-soft: #4a4a4a;
    --ink-muted: #8a8a8a;
    --line: #d8d3c9;
    --card: #ffffff;
    --shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px -8px rgba(0,0,0,0.10);
    --shadow-pop: 0 2px 0 rgba(0,0,0,0.06), 0 18px 36px -12px rgba(0,0,0,0.20);

--zero-bg: #ece8df;
    --zero-fg: #908b80;
    --zero-border: #c9c3b4;

--radius: 22px;
    --radius-s: 12px;
  }

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
  }
  body {
    background-image:
      radial-gradient(circle at 12% 8%, rgba(251, 113, 133, 0.07), transparent 45%),
      radial-gradient(circle at 92% 88%, rgba(56, 189, 248, 0.07), transparent 45%);
    min-height: 100vh;
  }
  .display { font-family: 'Bricolage Grotesque', serif; letter-spacing: -0.02em; }

header {
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
    background: rgba(245, 243, 239, 0.85);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 50;
  }
  .brand { display: flex; align-items: center; gap: 12px; }
  .brand-mark {
    width: 38px; height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fb7185, #facc15 45%, #34d399 75%, #38bdf8);
    box-shadow: var(--shadow);
    display: flex; align-items: center; justify-content: center;
    color: white;
    font-weight: 800;
    font-family: 'Bricolage Grotesque';
    font-size: 18px;
    transform: rotate(-4deg);
  }
  .brand-text { line-height: 1.1; }
  .brand-text .title { font-family: 'Bricolage Grotesque'; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
  .brand-text .sub { font-size: 11px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; }

.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.btn {
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink);
    padding: 10px 16px;
    border-radius: 999px;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    user-select: none;
  }
  .btn:hover { box-shadow: var(--shadow); }
  .btn:active { transform: translateY(1px); }
  .btn.primary { background: var(--ink); color: white; border-color: var(--ink); }
  .btn.ghost { background: transparent; border-color: transparent; }
  .btn.danger { color: #c62828; border-color: #f0c5c5; background: #fdf2f2; }
  .btn-icon { width: 42px; height: 42px; padding: 0; justify-content: center; font-size: 18px; }
  .btn:disabled { opacity: 0.4; cursor: not-allowed; }

.class-select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%231a1a1a' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") no-repeat right 14px center;
    border: 1px solid var(--line);
    padding: 10px 36px 10px 16px;
    border-radius: 999px;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
    cursor: pointer;
    min-width: 120px;
  }

main { padding: 24px 22px 80px; max-width: 1600px; margin: 0 auto; }

.save-indicator {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--ink);
    color: white;
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 90;
    pointer-events: none;
    box-shadow: var(--shadow-pop);
  }
  .save-indicator.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 6px 4px 22px;
    flex-wrap: wrap;
    gap: 12px;
  }
  .section-head h2 {
    font-family: 'Bricolage Grotesque';
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.03em;
  }
  .section-head .meta { color: var(--ink-muted); font-size: 13px; font-weight: 500; }

.legend {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 12px 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    align-items: center;
  }
  .legend-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--ink-muted);
    margin-right: 4px;
  }
  .legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
  .legend-swatch {
    width: 20px; height: 20px;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
    flex-shrink: 0;
  }
  .legend-swatch.zero {
    background: var(--zero-bg);
    box-shadow: inset 0 0 0 2px var(--zero-border);
    border-style: dashed;
  }
  .legend-divider {
    width: 1px;
    height: 18px;
    background: var(--line);
    margin: 0 2px;
  }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
  }

.tile {
    border: none;
    border-radius: var(--radius);
    aspect-ratio: 1 / 1.05;
    padding: 16px;
    cursor: pointer;
    position: relative;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--shadow);
    overflow: hidden;
    font-family: inherit;
    text-align: left;
  }
  .tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 100% 0%, rgba(255,255,255,0.35), transparent 55%),
      radial-gradient(circle at 0% 100%, rgba(0,0,0,0.10), transparent 55%);
    pointer-events: none;
  }
  .tile:hover { box-shadow: var(--shadow-pop); }
  .tile:active { transform: scale(0.96); }

.tile.zero {
    background: var(--zero-bg);
    color: var(--zero-fg);
    box-shadow: inset 0 0 0 2px var(--zero-border);
    border: none;
  }
  .tile.zero::before {
    background: none;
    border: 2px dashed var(--zero-border);
    border-radius: var(--radius);
    inset: 0;
  }
  .tile.zero:hover { box-shadow: inset 0 0 0 2px var(--zero-border), var(--shadow); }

.tile-name {
    font-weight: 700;
    font-size: clamp(15px, 1.6vw, 19px);
    line-height: 1.15;
    word-break: break-word;
    z-index: 1;
    position: relative;
  }
  .tile-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    z-index: 1;
    position: relative;
  }
  .tile-level {
    font-family: 'Bricolage Grotesque';
    font-weight: 800;
    font-size: clamp(40px, 5.5vw, 64px);
    line-height: 0.9;
    letter-spacing: -0.04em;
  }
  .tile.zero .tile-level {
    font-size: clamp(36px, 4.8vw, 56px);
    font-weight: 700;
    opacity: 0.7;
  }

@keyframes pop {
    0% { transform: scale(0.94); }
    60% { transform: scale(1.04); }
    100% { transform: scale(1); }
  }
  .tile.bump { animation: pop 0.32s ease; }

.empty {
    text-align: center;
    padding: 60px 24px 40px;
    max-width: 600px;
    margin: 0 auto;
  }
  .empty-icon {
    width: 96px; height: 96px;
    margin: 0 auto 24px;
    border-radius: 28px;
    background: linear-gradient(135deg, #fb7185, #facc15 50%, #38bdf8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: 'Bricolage Grotesque';
    font-weight: 800;
    font-size: 56px;
    transform: rotate(-6deg);
    box-shadow: var(--shadow-pop);
  }
  .empty h2 {
    font-family: 'Bricolage Grotesque';
    font-size: 38px;
    margin: 0 0 8px;
    letter-spacing: -0.03em;
  }
  .empty p { color: var(--ink-soft); margin: 0 0 28px; font-size: 16px; line-height: 1.55; }

.tip {
    margin: 40px auto 0;
    max-width: 600px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px 20px;
    text-align: left;
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.6;
  }
  .tip strong { color: var(--ink); }

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 14, 0.55);
    backdrop-filter: blur(6px);
    z-index: 100;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 18px 24px;
    overflow-y: auto;
  }
  .modal-backdrop.open { display: flex; }
  .modal {
    background: var(--card);
    border-radius: 24px;
    width: 100%;
    max-width: 560px;
    padding: 28px;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,0.4);
    animation: modalIn 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes modalIn {
    from { transform: translateY(20px) scale(0.96); opacity: 0; }
    to { transform: none; opacity: 1; }
  }
  .modal h3 {
    font-family: 'Bricolage Grotesque';
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
  }
  .modal p.lede { color: var(--ink-soft); margin: 0 0 22px; font-size: 14px; line-height: 1.5; }

label.field-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    margin: 0 0 8px;
  }

input[type="text"], textarea {
    width: 100%;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    background: var(--bg);
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  input[type="text"]:focus, textarea:focus {
    outline: none;
    border-color: var(--ink);
    background: white;
  }
  textarea {
    min-height: 180px;
    resize: vertical;
    font-family: 'Inter', monospace;
    line-height: 1.5;
  }

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 22px;
    flex-wrap: wrap;
  }
  .modal-actions .spacer { flex: 1; }

.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid var(--line);
    gap: 14px;
  }
  .settings-row:first-of-type { border-top: none; padding-top: 4px; }
  .settings-row .info { flex: 1; min-width: 0; }
  .settings-row .info strong { display: block; font-size: 15px; margin-bottom: 2px; }
  .settings-row .info span { font-size: 13px; color: var(--ink-muted); }

.settings-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--ink-muted);
    margin: 22px 0 4px;
  }
  .settings-section-title:first-child { margin-top: 4px; }

/* stepper */
  .stepper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg);
    border-radius: 999px;
    padding: 4px;
    border: 1px solid var(--line);
    flex-shrink: 0;
  }
  .stepper button {
    width: 40px; height: 40px;
    border-radius: 999px;
    border: none;
    background: var(--card);
    font-family: 'Bricolage Grotesque';
    font-weight: 800;
    font-size: 22px;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.12s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .stepper button:hover { background: white; }
  .stepper button:active { transform: scale(0.92); }
  .stepper button:disabled { opacity: 0.3; cursor: not-allowed; box-shadow: none; }
  .stepper-value {
    font-family: 'Bricolage Grotesque';
    font-weight: 800;
    font-size: 24px;
    min-width: 34px;
    text-align: center;
    color: var(--ink);
  }

@media (max-width: 640px) {
    header { padding: 14px 16px; }
    main { padding: 18px 16px 80px; }
    .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    .tile { padding: 12px; border-radius: 18px; }
    .legend { font-size: 12px; padding: 10px 12px; }
    .brand-text .title { font-size: 17px; }
    .brand-mark { width: 34px; height: 34px; }
  }
  @media (min-width: 1400px) {
    .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
  }
</style>
</head>
<body>

<header>
  <div class="brand">
    <div class="brand-mark">G</div>
    <div class="brand-text">
      <div class="title">Gym Niveau</div>
      <div class="sub">Zelfbeoordeling</div>
    </div>
  </div>
  <div class="toolbar" id="toolbar"></div>
</header>

<div class="save-indicator" id="saveIndicator">Opgeslagen ✓</div>

<div class="modal-backdrop" id="classModal">
  <div class="modal">
    <h3 id="classModalTitle">Nieuwe klas</h3>
    <p class="lede">Geef je klas een naam en plak de leerlingen erin — één naam per regel.</p>
    <label class="field-label" for="className">Naam van de klas</label>
    <input type="text" id="className" placeholder="bijv. 2A" autocomplete="off">
    <div style="height:14px"></div>
    <label class="field-label" for="classNames">Leerlingen (één per regel)</label>
    <textarea id="classNames" placeholder="Sanne&#10;Mees&#10;Yara&#10;Daan"></textarea>
    <div class="modal-actions">
      <button class="btn ghost" onclick="closeModal('classModal')">Annuleren</button>
      <button class="btn primary" onclick="saveClassForm()">Opslaan</button>
    </div>
  </div>
</div>

<div class="modal-backdrop" id="settingsModal">
  <div class="modal">
    <h3>Instellingen</h3>
    <p class="lede">Wijzigingen worden direct opgeslagen in deze browser.</p>
    <div id="settingsBody"></div>
    <div class="modal-actions">
      <div class="spacer"></div>
      <button class="btn primary" onclick="closeModal('settingsModal')">Klaar</button>
    </div>
  </div>
</div>

<div class="modal-backdrop" id="migrateModal">
  <div class="modal">
    <h3>Bestaande gegevens gevonden</h3>
    <p class="lede" id="migrateLede">
      Vanaf deze versie heeft elk bestand op je computer zijn <strong>eigen</strong> opslag.
      Tot nu toe werden gegevens gedeeld tussen alle bestanden — dat is nu verholpen.
    </p>
    <div id="migrateSummary" style="background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin: 0 0 16px; font-size:14px;"></div>
    <p style="color:var(--ink-soft); font-size:14.5px; line-height:1.55; margin:0 0 6px;">
      <strong>Horen deze gegevens bij DIT bestand?</strong>
    </p>
    <p style="color:var(--ink-muted); font-size:13px; line-height:1.5; margin:0 0 18px;">
      Tip: open elk van je bestanden één keer en kies de juiste optie. Bij "Nee, ander bestand" blijven de gegevens beschikbaar voor het volgende bestand dat je opent.
    </p>
    <div class="modal-actions">
      <button class="btn ghost" onclick="migrateChoose('discard')">Weggooien</button>
      <button class="btn" onclick="migrateChoose('keep')">Nee, ander bestand</button>
      <button class="btn primary" onclick="migrateChoose('apply')">Ja, hier toewijzen</button>
    </div>
  </div>
</div>

// ============================================================
  //  STATE — levelCount is nu GLOBAAL voor het hele bestand
  // ============================================================
  // structuur:
  //   levelCount: 6
  //   classes:   { "2A": [{name, level}, ...] }
  //   active:    "2A"
  let state = {
    levelCount: DEFAULT_LEVELS,
    classes: {},
    active: null,
    editMode: 'new',
  };

// ============================================================
  //  KLEUREN — dynamisch op basis van level/maxLevel
  // ============================================================
  function levelColors(level, maxLevel) {
    if (level === 0) return null;
    const pos = maxLevel === 1 ? 0.5 : (level - 1) / (maxLevel - 1);
    // hue van warm rose (350) via geel/groen naar lichtblauw (200) = 210° vooruit
    const hue = (350 + pos * 210) % 360;
    const bg = `hsl(${hue}, 85%, 66%)`;
    const fg = `hsl(${hue}, 55%, 22%)`;
    return { bg, fg };
  }

// ============================================================
  //  OPSLAG
  // ============================================================
  function saveState() {
    try {
      const data = {
        levelCount: state.levelCount,
        classes: state.classes,
        active: state.active,
      };
      localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
      flashSaved();
    } catch (e) {
      console.error('Opslaan mislukt:', e);
      alert('Opslaan in de browser is mislukt. Mogelijk staat de browser in privé-modus.');
    }
  }

// valideer alle data
    Object.keys(state.classes).forEach(name => {
      if (!Array.isArray(state.classes[name])) state.classes[name] = [];
      state.classes[name] = state.classes[name].filter(s => s && typeof s.name === 'string');
      state.classes[name].forEach(s => {
        if (typeof s.level !== 'number') s.level = 0;
        s.level = clamp(Math.round(s.level), 0, state.levelCount);
      });
    });

if (state.active && !state.classes[state.active]) {
      state.active = Object.keys(state.classes)[0] || null;
    }
  }

// Detecteert of er nog oude gedeelde data is uit eerdere versie
  // die niet meer aan een bestand gekoppeld is. Geeft de meest recente terug.
  function detectLegacyData() {
    for (const key of OLD_KEYS_GLOBAL) {
      const raw = localStorage.getItem(key);
      if (!raw) continue;
      try {
        const data = JSON.parse(raw);
        if (!data || !data.classes) continue;
        // tel inhoud
        const klassen = Object.keys(data.classes);
        let leerlingen = 0;
        const summary = [];
        klassen.forEach(name => {
          const c = data.classes[name];
          const list = Array.isArray(c) ? c : (c && c.students) || [];
          leerlingen += list.length;
          summary.push(`${name} (${list.length})`);
        });
        if (klassen.length === 0) continue;
        return {
          key,
          raw,
          data,
          klassen: klassen.length,
          leerlingen,
          summary: summary.join(', '),
          levelCount: typeof data.levelCount === 'number' ? data.levelCount : null,
        };
      } catch (e) { /* skip */ }
    }
    return null;
  }

// Importeert legacy data IN deze bestand-key
  function applyLegacyData(legacy) {
    state.classes = {};
    state.active = legacy.data.active || null;
    let foundCount = legacy.levelCount;
    Object.keys(legacy.data.classes).forEach(name => {
      const c = legacy.data.classes[name];
      if (Array.isArray(c)) {
        state.classes[name] = c;
      } else if (c && typeof c === 'object') {
        if (foundCount === null && typeof c.levelCount === 'number') {
          foundCount = c.levelCount;
        }
        state.classes[name] = Array.isArray(c.students) ? c.students : [];
      }
    });
    if (foundCount !== null) {
      state.levelCount = clamp(foundCount, MIN_LEVELS, MAX_LEVELS);
    }
    if (state.active && !state.classes[state.active]) {
      state.active = Object.keys(state.classes)[0] || null;
    }
    Object.keys(state.classes).forEach(name => {
      state.classes[name].forEach(s => {
        if (typeof s.level !== 'number') s.level = 0;
        s.level = clamp(Math.round(s.level), 0, state.levelCount);
      });
    });
    saveState();
  }

function clamp(n, lo, hi) { return Math.max(lo, Math.min(hi, n)); }

let saveTimer;
  function flashSaved() {
    const el = document.getElementById('saveIndicator');
    el.classList.add('show');
    clearTimeout(saveTimer);
    saveTimer = setTimeout(() => el.classList.remove('show'), 900);
  }

// ============================================================
  //  HELPERS
  // ============================================================
  function classNames() { return Object.keys(state.classes); }
  function currentStudents() { return state.active ? (state.classes[state.active] || []) : []; }

// ============================================================
  //  RENDER
  // ============================================================
  function renderToolbar() {
    const tb = document.getElementById('toolbar');
    const names = classNames();
    if (names.length === 0) {
      tb.innerHTML = `
        <button class="btn primary" onclick="openNewClass()">+ Nieuwe klas</button>
        <button class="btn btn-icon" onclick="openSettings()" title="Instellingen" aria-label="Instellingen">⚙</button>
      `;
      return;
    }
    const opts = names.map(c =>
      `<option value="${escapeAttr(c)}" ${c === state.active ? 'selected' : ''}>${escapeHtml(c)}</option>`
    ).join('');
    tb.innerHTML = `
      <select class="class-select" id="classSelect" onchange="switchClass(this.value)">
        ${opts}
      </select>
      <button class="btn" onclick="openNewClass()">+ Klas</button>
      <button class="btn btn-icon" onclick="openSettings()" title="Instellingen" aria-label="Instellingen">⚙</button>
    `;
  }

function renderMain() {
    const main = document.getElementById('main');
    const names = classNames();
    if (names.length === 0) {
      main.innerHTML = `
        <div class="empty">
          <div class="empty-icon">G</div>
          <h2 class="display">Welkom!</h2>
          <p>Maak je eerste klas aan om te beginnen. Iedereen begint met een blanco vakje — leerlingen tikken om hun niveau te kiezen. Het aantal niveaus stel je in via ⚙ instellingen.</p>
          <button class="btn primary" onclick="openNewClass()">+ Maak je eerste klas</button>
          <div class="tip">
            <strong>Voor één onderdeel:</strong> sla het bestand op je computer op (bv. <em>gym-niveau-trampoline.html</em>) en open het altijd vanaf dezelfde plek. Alles wat je invult blijft in je browser bewaard.<br><br>
            <strong>Voor meerdere onderdelen:</strong> maak een kopie van het bestand per onderdeel zodat elk onderdeel zijn eigen aantal niveaus en kleuren heeft.<br><br>
            <strong>Delen met collega's:</strong> het bestand zelf bevat geen gegevens — je kunt het gerust doormailen of in een gedeelde map zetten. Collega's openen het en zien automatisch een lege versie waarin ze hun eigen klassen kunnen invoeren.
          </div>
        </div>
      `;
      return;
    }

const students = currentStudents();
    const tiles = students.map((s, i) => tileHtml(s, i)).join('');

document.getElementById('main').innerHTML = `
      <div class="section-head">
        <h2 class="display">${escapeHtml(state.active)}</h2>
        <div class="meta">${students.length} leerling${students.length === 1 ? '' : 'en'} · ${state.levelCount} niveaus · tik op je naam</div>
      </div>
      ${renderLegend()}
      <div class="grid">${tiles || '<p style="color:var(--ink-muted)">Nog geen leerlingen in deze klas.</p>'}</div>
    `;
  }

function render() {
    renderToolbar();
    renderMain();
  }

// ============================================================
  //  INSTELLINGEN MODAL — dynamisch opgebouwd
  // ============================================================
  function openSettings() {
    const body = document.getElementById('settingsBody');
    const hasClass = !!state.active && !!state.classes[state.active];
    const totalClasses = classNames().length;
    let totalStudents = 0;
    Object.values(state.classes).forEach(arr => totalStudents += arr.length);

let html = '';

// ALGEMEEN
    html += `<div class="settings-section-title">Algemeen — voor alle klassen</div>`;
    html += `
      <div class="settings-row">
        <div class="info">
          <strong>Aantal niveaus</strong>
          <span>Hoeveel kleuren leerlingen kunnen kiezen (${MIN_LEVELS}–${MAX_LEVELS}).</span>
        </div>
        <div class="stepper">
          <button id="levelMinus" onclick="changeLevelCount(-1)" aria-label="Minder">−</button>
          <div class="stepper-value" id="levelValue">${state.levelCount}</div>
          <button id="levelPlus" onclick="changeLevelCount(1)" aria-label="Meer">+</button>
        </div>
      </div>
    `;

// DEZE KLAS — alleen als er een klas actief is
    if (hasClass) {
      html += `<div class="settings-section-title">Deze klas — ${escapeHtml(state.active)}</div>`;
      html += `
        <div class="settings-row">
          <div class="info">
            <strong>Alle niveaus resetten</strong>
            <span>Zet iedereen weer terug naar blanco.</span>
          </div>
          <button class="btn" onclick="resetLevels()">Reset</button>
        </div>
        <div class="settings-row">
          <div class="info">
            <strong>Klas bewerken</strong>
            <span>Wijzig de naam of de leerlingenlijst.</span>
          </div>
          <button class="btn" onclick="openEditClass()">Bewerken</button>
        </div>
        <div class="settings-row">
          <div class="info">
            <strong>Klas verwijderen</strong>
            <span>Verwijdert deze klas en alle niveaus.</span>
          </div>
          <button class="btn danger" onclick="deleteCurrentClass()">Verwijderen</button>
        </div>
      `;
    }

// RESULTATEN — alleen als er klassen zijn
    if (totalClasses > 0) {
      html += `<div class="settings-section-title">Resultaten downloaden</div>`;
      if (hasClass) {
        html += `
          <div class="settings-row">
            <div class="info">
              <strong>Deze klas als CSV</strong>
              <span>Open in Excel om over te nemen in ParnasSys e.d.</span>
            </div>
            <button class="btn" onclick="exportClassCSV()">Download</button>
          </div>
        `;
      }
      if (totalClasses > 1) {
        html += `
          <div class="settings-row">
            <div class="info">
              <strong>Alle klassen als CSV</strong>
              <span>Eén bestand met klas, naam en niveau per regel.</span>
            </div>
            <button class="btn" onclick="exportAllCSV()">Download alles</button>
          </div>
        `;
      }
    }

// BACK-UP
    html += `<div class="settings-section-title">Back-up van alle data</div>`;
    html += `
      <div class="settings-row">
        <div class="info">
          <strong>Exporteren</strong>
          <span>Sla alles op als JSON-bestand voor back-up of overzetten naar een andere computer.</span>
        </div>
        <button class="btn" onclick="exportAll()">Download</button>
      </div>
      <div class="settings-row">
        <div class="info">
          <strong>Importeren</strong>
          <span>Laad eerder geëxporteerd JSON-bestand in.</span>
        </div>
        <button class="btn" onclick="document.getElementById('importFile').click()">Kies bestand</button>
      </div>
    `;

// GEAVANCEERD
    html += `<div class="settings-section-title">Geavanceerd</div>`;
    html += `
      <div class="settings-row">
        <div class="info">
          <strong>Alles wissen</strong>
          <span>Verwijder alle klassen, leerlingen en niveaus${totalClasses > 0 ? ` (${totalClasses} klas${totalClasses === 1 ? '' : 'sen'}, ${totalStudents} leerling${totalStudents === 1 ? '' : 'en'})` : ''}. Handig om een schoon bestand klaar te zetten voor collega's.</span>
        </div>
        <button class="btn danger" onclick="wipeAll()">Wissen</button>
      </div>
    `;

body.innerHTML = html;
    updateStepperUi();
    openModal('settingsModal');
  }

function updateStepperUi() {
    const el = document.getElementById('levelValue');
    const minus = document.getElementById('levelMinus');
    const plus = document.getElementById('levelPlus');
    if (!el || !minus || !plus) return;
    el.textContent = state.levelCount;
    minus.disabled = state.levelCount <= MIN_LEVELS;
    plus.disabled = state.levelCount >= MAX_LEVELS;
  }

// ============================================================
  //  ACTIES
  // ============================================================
  function bumpLevel(idx, el) {
    const students = state.classes[state.active];
    if (!students) return;
    const s = students[idx];
    s.level = s.level >= state.levelCount ? 0 : s.level + 1;

if (s.level === 0) {
      el.className = 'tile zero bump';
      el.removeAttribute('style');
      el.querySelector('.tile-level').textContent = '—';
    } else {
      const c = levelColors(s.level, state.levelCount);
      el.className = 'tile bump';
      el.style.background = c.bg;
      el.style.color = c.fg;
      el.querySelector('.tile-level').textContent = s.level;
    }
    setTimeout(() => el.classList.remove('bump'), 350);
    saveState();
  }

function switchClass(name) {
    state.active = name;
    saveState();
    render();
  }

function changeLevelCount(delta) {
    const newCount = clamp(state.levelCount + delta, MIN_LEVELS, MAX_LEVELS);
    if (newCount === state.levelCount) return;

// check of er leerlingen boven het nieuwe maximum staan (over alle klassen)
    if (newCount < state.levelCount) {
      let above = 0;
      Object.values(state.classes).forEach(students => {
        above += students.filter(s => s.level > newCount).length;
      });
      if (above > 0) {
        const ok = confirm(
          `${above} leerling${above === 1 ? '' : 'en'} sta${above === 1 ? 'at' : 'an'} op een hoger niveau dan ${newCount}.\n\n` +
          `Doorgaan? Deze worden ingeschaald naar niveau ${newCount}.`
        );
        if (!ok) return;
        Object.values(state.classes).forEach(students => {
          students.forEach(s => { if (s.level > newCount) s.level = newCount; });
        });
      }
    }

state.levelCount = newCount;
    saveState();
    updateStepperUi();
    renderMain();
  }

function openNewClass() {
    state.editMode = 'new';
    document.getElementById('classModalTitle').textContent = 'Nieuwe klas';
    document.getElementById('className').value = '';
    document.getElementById('classNames').value = '';
    openModal('classModal');
    setTimeout(() => document.getElementById('className').focus(), 100);
  }

function openEditClass() {
    state.editMode = 'edit';
    closeModal('settingsModal');
    document.getElementById('classModalTitle').textContent = 'Klas bewerken';
    document.getElementById('className').value = state.active;
    document.getElementById('classNames').value = currentStudents().map(s => s.name).join('\n');
    openModal('classModal');
  }

function saveClassForm() {
    const newName = document.getElementById('className').value.trim();
    const namesRaw = document.getElementById('classNames').value;
    const names = namesRaw.split('\n').map(n => n.trim()).filter(Boolean);

if (!newName) { alert('Geef de klas een naam.'); return; }
    if (names.length === 0) { alert('Voeg minstens één leerling toe.'); return; }

if (state.editMode === 'new') {
      if (state.classes[newName]) { alert('Er bestaat al een klas met die naam.'); return; }
      state.classes[newName] = names.map(n => ({ name: n, level: 0 }));
      state.active = newName;
    } else {
      const oldName = state.active;
      const oldByName = {};
      (state.classes[oldName] || []).forEach(s => { oldByName[s.name] = s.level; });

if (newName !== oldName) {
        if (state.classes[newName]) { alert('Er bestaat al een klas met die naam.'); return; }
        delete state.classes[oldName];
        state.active = newName;
      }
      state.classes[state.active] = names.map(n => ({
        name: n,
        level: (oldByName[n] !== undefined ? oldByName[n] : 0)
      }));
    }

saveState();
    closeModal('classModal');
    render();
  }

function resetLevels() {
    if (!confirm('Alle leerlingen in deze klas terugzetten naar blanco (niveau 0)?')) return;
    currentStudents().forEach(s => s.level = 0);
    saveState();
    closeModal('settingsModal');
    renderMain();
  }

function deleteCurrentClass() {
    if (!state.active) return;
    if (!confirm(`Klas "${state.active}" verwijderen? Dit kan niet ongedaan worden gemaakt.`)) return;
    delete state.classes[state.active];
    const names = classNames();
    state.active = names[0] || null;
    saveState();
    closeModal('settingsModal');
    render();
  }

// ============================================================
  //  EXPORT / IMPORT
  // ============================================================
  function exportAll() {
    const payload = {
      app: 'gym-niveau',
      version: 3,
      exportedAt: new Date().toISOString(),
      levelCount: state.levelCount,
      classes: state.classes,
    };
    const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    const stamp = new Date().toISOString().slice(0, 10);
    a.href = url;
    a.download = `gym-niveau-backup-${stamp}.json`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }

// CSV — voor Nederlandstalig Excel: UTF-8 met BOM en puntkomma als scheidingsteken
  function csvEscape(value) {
    const s = String(value);
    if (/[";\n\r]/.test(s)) {
      return '"' + s.replace(/"/g, '""') + '"';
    }
    return s;
  }

function downloadCsv(filename, rows) {
    const csv = rows.map(r => r.map(csvEscape).join(';')).join('\r\n');
    const blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }

function safeFilename(s) {
    return String(s).replace(/[^\w\-]+/g, '_').replace(/^_+|_+$/g, '') || 'klas';
  }

function handleImport(event) {
    const file = event.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = (e) => {
      try {
        const data = JSON.parse(e.target.result);
        if (!data.classes || typeof data.classes !== 'object') throw new Error('Ongeldig bestand');

// normaliseer
        const incoming = {};
        let incomingLevelCount = null;
        if (typeof data.levelCount === 'number') {
          incomingLevelCount = clamp(data.levelCount, MIN_LEVELS, MAX_LEVELS);
        }
        Object.keys(data.classes).forEach(name => {
          const c = data.classes[name];
          if (Array.isArray(c)) {
            incoming[name] = c;
          } else if (c && typeof c === 'object') {
            // v2 import
            if (incomingLevelCount === null && typeof c.levelCount === 'number') {
              incomingLevelCount = clamp(c.levelCount, MIN_LEVELS, MAX_LEVELS);
            }
            incoming[name] = Array.isArray(c.students) ? c.students : [];
          }
        });

// ============================================================
  //  MODAL HELPERS
  // ============================================================
  function openModal(id) { document.getElementById(id).classList.add('open'); }
  function closeModal(id) { document.getElementById(id).classList.remove('open'); }
  document.addEventListener('click', (e) => {
    // niet sluiten als gebruiker buiten migrate-modal klikt — die moet een bewuste keuze maken
    if (e.target.classList && e.target.classList.contains('modal-backdrop')
        && e.target.id !== 'migrateModal') {
      e.target.classList.remove('open');
    }
  });

// ============================================================
  //  ESCAPE HELPERS
  // ============================================================
  function escapeHtml(s) {
    return String(s).replace(/[&<>"']/g, c => ({
      '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
    })[c]);
  }
  function escapeAttr(s) { return escapeHtml(s); }

// ============================================================
  //  MIGRATIE FLOW
  // ============================================================
  let pendingLegacy = null;

// ============================================================
  //  START
  // ============================================================
  loadState();
  render();

// Toon migratieprompt alleen als dit bestand nog leeg is én er oude
  // gedeelde data is van een eerdere versie.
  (function checkLegacyMigration() {
    const isEmpty = Object.keys(state.classes).length === 0
      && state.levelCount === DEFAULT_LEVELS;
    if (!isEmpty) return;
    const legacy = detectLegacyData();
    if (legacy) showMigrationPrompt(legacy);
  })();
</script>

</body>
</html>

Wat wil je doen?

Toernooi instellen

🏆 Uitslagen

🛒 De winkel van Sinkel

🎁 Rad van de Mystery Box