2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>cymsimweb</title>
7 <link rel="stylesheet" href="./src/style.css" />
8 </head>
9 <body>
10 <div id="app">
11 <aside id="sidebar">
12 <header>
13 <h1>cymsimweb</h1>
14 <span class="subtitle">struck-cymbal simulation on WebGPU</span>
15 </header>
16 <section class="run">
17 <div class="row">
18 <label>Preset <select id="preset"></select></label>
19 </div>
20 <div class="row buttons">
21 <button id="import">Import YAML</button>
22 <input id="file" type="file" accept=".yaml,.yml,text/yaml" hidden />
23 <button id="download-yaml">Download YAML</button>
24 </div>
25 <div class="row buttons">
26 <button id="start" class="primary">Start</button>
27 <button id="pause" disabled>Pause</button>
28 <button id="stop" disabled>Stop</button>
29 </div>
30 <div class="row"><progress id="progress" value="0" max="1"></progress><span id="progress-text"></span></div>
31 <div id="backend" class="muted"></div>
32 </section>
33 <div class="tabs">
34 <button data-tab="yaml" class="active">YAML</button>
35 <button data-tab="form">Form</button>
36 <button data-tab="summary">Set-up</button>
37 </div>
38 <div id="tab-yaml" class="tab"><div id="editor"></div></div>
39 <div id="tab-form" class="tab hidden"><div id="form"></div></div>
40 <div id="tab-summary" class="tab hidden"><div id="summary"></div></div>
41 <ul id="issues"></ul>
42 </aside>
43 <div class="splitter vertical" data-target="sidebar" data-var="--sidebar-w"></div>
44 <main>
45 <section id="plate-section">
46 <div class="toolbar">
47 <span>Plate</span>
48 <label>exaggeration <input id="exag" type="range" min="0" max="3" step="0.1" value="0" /><span id="exag-text">x1</span></label>
49 <button id="reset-view">Reset view</button>
50 <span id="plate-info" class="muted"></span>
51 </div>
52 <canvas id="plate"></canvas>
53 </section>
54 <div class="splitter horizontal" data-target="plate-section" data-var="--plate-h"></div>
55 <section id="spec-section">
56 <div class="toolbar">
57 <span>Spectrogram</span>
58 <label>signal <select id="signal"><option value="unbaffled">unbaffled</option><option value="rayleigh">Rayleigh (baffled)</option></select></label>
59 <span id="spec-info" class="muted"></span>
60 </div>
61 <canvas id="spectrogram"></canvas>
62 </section>
63 <div class="splitter horizontal" data-target="readouts" data-var="--readouts-h" data-invert="1"></div>
64 <section id="playback">
65 <button id="play" disabled>Play</button>
66 <button id="stop-audio" disabled>Stop</button>
67 <input id="position" type="range" min="0" max="1" step="0.001" value="0" />
68 <span id="time">0.000 s</span>
69 <label>gain <input id="gain" type="range" min="-40" max="0" step="1" value="-12" /><span id="gain-text">-12 dB</span></label>
70 <label><input id="normalize" type="checkbox" checked /> normalize</label>
71 <button id="download-wav" disabled>Download WAV</button>
72 </section>
73 <section id="readouts"></section>
74 </main>
75 </div>
76 <script type="module" src="./src/main.ts"></script>
77 </body>
78</html>