286 lines
18 KiB
HTML
286 lines
18 KiB
HTML
<!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>
|