From 92a75f5b70461029e5b9c110e8c8161812e9f9a5 Mon Sep 17 00:00:00 2001
From: Steven Kuterna <1+steven@noreply.localhost>
Date: Fri, 28 Aug 2026 18:25:29 +0200
Subject: [PATCH] Update index.html

---
 index.html | 285 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 285 insertions(+)
diff --git a/index.html b/index.html
index e69de29..a734872 100644
--- a/index.html
+++ b/index.html
@@ -0,0 +1,285 @@
+<!DOCTYPE html>
+<html lang="nl">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Score Studio</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=Fraunces:opsz,wght@9..144,600;9..144,700&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="styles.css">
+  <script src="https://unpkg.com/vexflow@4.2.3/build/cjs/vexflow.js"></script>
+</head>
+<body>
+  <div class="app-shell">
+    <header class="topbar">
+      <h1>Score Studio</h1>
+      <p>Klik op de notenbalk om noten te plaatsen en sleep om te verzetten.</p>
+    </header>
+
+    <main class="workspace">
+      <section class="panel top-half" aria-label="Toolbar">
+        <div class="toolbar-grid">
+          <div class="toolbar-card systems-card">
+            <h2>Systemen</h2>
+            <div class="systems-controls">
+              <div id="system-tabs" class="system-tabs" role="tablist" aria-label="Kies systeem"></div>
+              <div class="actions-row systems-actions">
+                <button id="add-system" type="button">Voeg systeem toe</button>
+                <button id="remove-system" type="button">Verwijder systeem</button>
+              </div>
+            </div>
+          </div>
+
+          <div class="toolbar-card notes-card">
+            <h2>Noten</h2>
+            <div class="chip-list" id="note-values">
+              <button type="button" class="chip icon-chip active" data-kind="note" data-duration="w" title="Hele noot" aria-label="Hele noot">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><ellipse cx="12" cy="12" rx="7" ry="5"/></svg>
+              </button>
+              <button type="button" class="chip icon-chip" data-kind="note" data-duration="h" title="Halve noot" aria-label="Halve noot">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><ellipse cx="10" cy="15" rx="5.5" ry="4"/><path d="M14.5 15V4"/></svg>
+              </button>
+              <button type="button" class="chip icon-chip" data-kind="note" data-duration="q" title="Kwartnoot" aria-label="Kwartnoot">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><ellipse cx="10" cy="15" rx="5.5" ry="4"/><path d="M14.5 15V4"/><ellipse cx="10" cy="15" rx="4.2" ry="3" fill="currentColor" stroke="none"/></svg>
+              </button>
+              <button type="button" class="chip icon-chip" data-kind="note" data-duration="8" title="Achtste noot" aria-label="Achtste noot">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><ellipse cx="9" cy="16" rx="4.5" ry="3.5" fill="currentColor" stroke="none"/><path d="M13 16V4"/><path d="M13 4c4 1 5 4 5 6"/></svg>
+              </button>
+              <button type="button" class="chip icon-chip" data-kind="note" data-duration="16" title="Zestiende noot" aria-label="Zestiende noot">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><ellipse cx="9" cy="16" rx="4.5" ry="3.5" fill="currentColor" stroke="none"/><path d="M13 16V4"/><path d="M13 4c4 1 5 4 5 6"/><path d="M13 8c4 1 5 4 5 6"/></svg>
+              </button>
+            </div>
+          </div>
+          <div class="toolbar-card rests-card">
+            <h2>Rusten</h2>
+            <div class="chip-list" id="rest-values">
+              <button type="button" class="chip icon-chip" data-kind="rest" data-duration="w" title="Hele rust" aria-label="Hele rust">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="6" y="11" width="12" height="4"/></svg>
+              </button>
+              <button type="button" class="chip icon-chip" data-kind="rest" data-duration="h" title="Halve rust" aria-label="Halve rust">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="6" y="9" width="12" height="4"/></svg>
+              </button>
+              <button type="button" class="chip icon-chip" data-kind="rest" data-duration="q" title="Kwartrust" aria-label="Kwartrust">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M11 4c3 2 0 4 2 6s-2 4 0 6"/></svg>
+              </button>
+              <button type="button" class="chip icon-chip" data-kind="rest" data-duration="8" title="Achtste rust" aria-label="Achtste rust">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M10 5c3 2 2 4 3 6"/><circle cx="14" cy="14.5" r="1.8"/></svg>
+              </button>
+              <button type="button" class="chip icon-chip" data-kind="rest" data-duration="16" title="Zestiende rust" aria-label="Zestiende rust">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M10 5c3 2 2 4 3 6"/><circle cx="14" cy="13.5" r="1.6"/><circle cx="12.5" cy="17" r="1.6"/></svg>
+              </button>
+            </div>
+          </div>
+          <div class="toolbar-card symbols-card">
+            <h2>Symbolen</h2>
+            <div class="symbol-groups" id="symbol-values">
+              <div class="symbol-group">
+                <h3>Toonhoogte & ritme</h3>
+                <div class="chip-list">
+                  <button type="button" class="chip icon-chip" data-symbol="flat" title="Mol" aria-label="Mol">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 3v18"/><path d="M9 11c5 0 6-8 0-8v8c5 0 6 8 0 8"/></svg>
+                  </button>
+                  <button type="button" class="chip icon-chip" data-symbol="sharp" title="Kruis" aria-label="Kruis">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 3v18M16 3v18M4 9h16M4 15h16"/></svg>
+                  </button>
+                  <button type="button" class="chip icon-chip" data-symbol="natural" title="Herstelling" aria-label="Herstelling">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 4v16M16 4v16M8 12l8-2M8 16l8-2"/></svg>
+                  </button>
+                </div>
+              </div>
+
+              <div class="symbol-group">
+                <h3>Structuur & herhalingen</h3>
+                <div class="chip-list">
+                  <button type="button" class="chip icon-chip" data-symbol="repeat-start" title="Herhaling starten" aria-label="Herhaling starten">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 4H4v4"/><path d="M4 8c0-2 2-4 4-4h4"/><path d="M18 20h2v-4"/><path d="M20 16c0 2-2 4-4 4h-4"/><path d="M6 8h12"/><path d="M6 16h12"/><circle cx="9" cy="10" r="1.2"/><circle cx="15" cy="14" r="1.2"/></svg>
+                  </button>
+                  <button type="button" class="chip icon-chip" data-symbol="repeat-end" title="Herhaling eindigen" aria-label="Herhaling eindigen">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 4h12"/><path d="M6 20h12"/><path d="M18 4h2v4"/><path d="M20 8c0 2-2 4-4 4h-4"/><path d="M4 20H2v-4"/><path d="M2 16c0-2 2-4 4-4h4"/><circle cx="15" cy="10" r="1.2"/><circle cx="9" cy="14" r="1.2"/></svg>
+                  </button>
+                  <button type="button" class="chip icon-chip" data-symbol="segno" title="Segno" aria-label="Segno">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3c4 0 7 3 7 7s-3 7-7 7-7 3-7 4"/><path d="M12 21c-4 0-7-3-7-7s3-7 7-7 7-3 7-4"/><path d="M8 8l8 8"/><path d="M16 8l-8 8"/></svg>
+                  </button>
+                  <button type="button" class="chip icon-chip" data-symbol="volta-1" title="Primo volta" aria-label="Primo volta">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16"/><path d="M4 6v10"/><path d="M20 6v10"/><path d="M11 10v6"/><path d="M9 12h2"/></svg>
+                  </button>
+                  <button type="button" class="chip icon-chip" data-symbol="volta-2" title="Secondo volta" aria-label="Secondo volta">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16"/><path d="M4 6v10"/><path d="M20 6v10"/><path d="M8 11c2-2 5-2 7 0 0 1-1 2-3 3-2 1-3 2-3 3h7"/></svg>
+                  </button>
+                </div>
+              </div>
+
+              <div class="symbol-group">
+                <h3>Dynamiek</h3>
+                <div class="chip-list">
+                  <button type="button" class="chip icon-chip" data-symbol="crescendo" title="Crescendo" aria-label="Crescendo">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 18l8-12 8 12"/></svg>
+                  </button>
+                  <button type="button" class="chip icon-chip" data-symbol="decrescendo" title="Decrescendo" aria-label="Decrescendo">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6l8 12 8-12"/></svg>
+                  </button>
+                  <button type="button" class="chip icon-chip" data-symbol="dyn-pp" title="Pianissimo" aria-label="Pianissimo">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6v12M6 6h4a3 3 0 0 1 0 6H6"/><path d="M14 6v12M14 6h4a3 3 0 0 1 0 6h-4"/></svg>
+                  </button>
+                  <button type="button" class="chip icon-chip" data-symbol="dyn-p" title="Piano" aria-label="Piano">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6v12M9 6h6a3 3 0 0 1 0 6H9"/></svg>
+                  </button>
+                  <button type="button" class="chip icon-chip" data-symbol="dyn-mp" title="Mezzo piano" aria-label="Mezzo piano">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 18V6l6 6"/><path d="M14 6v12M14 6h4a3 3 0 0 1 0 6h-4"/></svg>
+                  </button>
+                  <button type="button" class="chip icon-chip" data-symbol="dyn-mf" title="Mezzo forte" aria-label="Mezzo forte">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 18V6l6 6"/><path d="M14 6h4M14 12h3M14 6v12"/></svg>
+                  </button>
+                  <button type="button" class="chip icon-chip" data-symbol="dyn-f" title="Forte" aria-label="Forte">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6h6M9 12h4M9 6v12"/></svg>
+                  </button>
+                  <button type="button" class="chip icon-chip" data-symbol="dyn-ff" title="Fortissimo" aria-label="Fortissimo">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 6h6M5 12h4M5 6v12"/><path d="M13 6h6M13 12h4M13 6v12"/></svg>
+                  </button>
+                </div>
+              </div>
+
+              <div class="symbol-group">
+                <h3>Articulatie/techniek</h3>
+                <div class="chip-list">
+                  <button type="button" class="chip icon-chip" data-symbol="staccato" title="Staccato" aria-label="Staccato">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="16" r="2.2"/></svg>
+                  </button>
+                  <button type="button" class="chip icon-chip" data-symbol="tenuto" title="Tenuto" aria-label="Tenuto">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 16h12"/></svg>
+                  </button>
+                  <button type="button" class="chip icon-chip" data-symbol="accent" title="Accent" aria-label="Accent">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 8l6 8 6-8"/></svg>
+                  </button>
+                </div>
+              </div>
+
+              <div class="symbol-group">
+                <h3>Versieringen</h3>
+                <div class="chip-list">
+                  <button type="button" class="chip icon-chip" data-symbol="trill" title="Triller" aria-label="Triller">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 8c2 0 2 8 4 8s2-8 4-8 2 8 4 8 2-8 4-8"/></svg>
+                  </button>
+                  <button type="button" class="chip icon-chip" data-symbol="mordent" title="Mordent" aria-label="Mordent">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 8l6 8 6-8"/><path d="M12 4v4"/></svg>
+                  </button>
+                </div>
+              </div>
+
+              <div class="symbol-group">
+                <h3>Tempo & expressie</h3>
+                <div class="chip-list">
+                  <button type="button" class="chip icon-chip" data-symbol="fermata" title="Fermate" aria-label="Fermate">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 14a7 7 0 0 1 14 0"/><circle cx="12" cy="6.5" r="1.3"/></svg>
+                  </button>
+                  <button type="button" class="chip icon-chip" data-symbol="ritardando" title="Ritardando" aria-label="Ritardando">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h16"/><path d="M14 6l6 6-6 6"/></svg>
+                  </button>
+                </div>
+              </div>
+
+              <div class="symbol-group">
+                <h3>Vorm en navigatie</h3>
+                <div class="chip-list">
+                  <button type="button" class="chip icon-chip" data-symbol="coda" title="Coda" aria-label="Coda">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="5.5"/><path d="M12 3v18M3 12h18"/></svg>
+                  </button>
+                  <button type="button" class="chip icon-chip" data-symbol="dal-segno" title="Dal Segno" aria-label="Dal Segno">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 4h12"/><path d="M6 20h12"/><path d="M12 4v16"/><path d="M8 8l8 8"/><path d="M16 8l-8 8"/></svg>
+                  </button>
+                </div>
+              </div>
+
+              <div class="symbol-group">
+                <h3>Instrument-specifieke instructies</h3>
+                <div class="chip-list">
+                  <button type="button" class="chip icon-chip" data-symbol="pizzicato" title="Pizzicato" aria-label="Pizzicato">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 16l12-8"/><path d="M7 18l10-12"/></svg>
+                  </button>
+                  <button type="button" class="chip icon-chip" data-symbol="arco" title="Arco" aria-label="Arco">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 18c6-10 8-10 12-12"/><path d="M14 6l4 0"/></svg>
+                  </button>
+                </div>
+              </div>
+
+              <div class="symbol-group">
+                <h3>Extra effecten</h3>
+                <div class="chip-list">
+                  <button type="button" class="chip icon-chip" data-symbol="glissando" title="Glissando" aria-label="Glissando">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 18c6-8 10-8 16-12"/></svg>
+                  </button>
+                  <button type="button" class="chip icon-chip" data-symbol="harmonic" title="Harmonisch" aria-label="Harmonisch">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5"/></svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="toolbar-card meter-card">
+            <h2>Maatsoort</h2>
+            <div class="time-signature-picker" aria-label="Maatsoort selectie">
+              <button type="button" id="ts-num-button" class="ts-number" aria-haspopup="listbox">4</button>
+              <span class="ts-separator">/</span>
+              <button type="button" id="ts-den-button" class="ts-number" aria-haspopup="listbox">4</button>
+            </div>
+            <select id="ts-num-select" class="ts-select" size="6" aria-label="Kies teller" hidden>
+              <option value="2">2</option>
+              <option value="3">3</option>
+              <option value="4" selected>4</option>
+              <option value="5">5</option>
+              <option value="6">6</option>
+              <option value="7">7</option>
+              <option value="8">8</option>
+              <option value="9">9</option>
+              <option value="10">10</option>
+              <option value="11">11</option>
+              <option value="12">12</option>
+            </select>
+            <select id="ts-den-select" class="ts-select" size="5" aria-label="Kies noemer" hidden>
+              <option value="1">1</option>
+              <option value="2">2</option>
+              <option value="4" selected>4</option>
+              <option value="8">8</option>
+              <option value="16">16</option>
+            </select>
+          </div>
+          <div class="toolbar-card clef-card">
+            <h2>Sleutel</h2>
+            <div class="chip-list" id="clef-values">
+              <button type="button" class="chip icon-chip active" data-clef="treble" title="G-sleutel" aria-label="G-sleutel">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M13 3c-3 0-4 2-4 4 0 3 4 3 4 7 0 2-1 4-4 4-2 0-3-1-3-3 0-2 2-3 3-3"/><path d="M12 4v16"/><circle cx="12" cy="10" r="2.4"/></svg>
+              </button>
+              <button type="button" class="chip icon-chip" data-clef="bass" title="F-sleutel" aria-label="F-sleutel">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 5c5 0 8 4 8 7s-3 7-8 7"/><circle cx="17" cy="9" r="1.2"/><circle cx="17" cy="15" r="1.2"/></svg>
+              </button>
+              <button type="button" class="chip icon-chip" data-clef="alto" title="C-sleutel" aria-label="C-sleutel">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 4v16M15 4v16M9 12h6"/><path d="M6 7h3M6 17h3M15 7h3M15 17h3"/></svg>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div class="io-area">
+          <div class="actions-row">
+            <button id="remove-note" type="button">Verwijder selectie</button>
+            <button id="clear-score" type="button" class="danger">Leeg partituur</button>
+          </div>
+          <div class="actions-row">
+            <button id="export-json" type="button">Exporteer JSON</button>
+            <button id="import-json" type="button">Importeer JSON</button>
+          </div>
+        </div>
+      </section>
+
+      <section class="panel editor bottom-half" aria-label="Partituur editor">
+        <h2>Partituur</h2>
+        <div id="score" class="score-canvas" role="img" aria-label="Partituur met noten"></div>
+        <p class="hint">Klik op de balk om te plaatsen. Sleep noten om ze te verzetten in hoogte en timing.</p>
+      </section>
+    </main>
+  </div>
+
+  <script src="app.js"></script>
+</body>
+</html>
