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>Cymbal designer</title>
7 <link rel="stylesheet" href="./src/style.css" />
8 </head>
9 <body>
10 <div id="app">
11 <aside id="sidebar">
12 <h1>Cymbal designer</h1>
13 <p class="sub">A scripted cymbal, struck once: geometrically nonlinear plate (von Karman with in-plane inertia) with a thickness field, stepped explicitly on the GPU.</p>
14 <details open>
15 <summary>Design script</summary>
16 <div id="design"></div>
17 </details>
18 <div id="params"></div>
19 <div id="controls"></div>
20 <div id="info"></div>
21 <p class="sub">The model and the numerical method are described in THEORY.md in the repository.</p>
22 </aside>
23 <main id="main">
24 <div class="toolbar" id="viewToolbar"></div>
25 <div id="viewWrap"><canvas id="view"></canvas><div id="nogpu" hidden></div></div>
26 <div class="toolbar" id="movieToolbar"></div>
27 <div class="toolbar" id="specToolbar"></div>
28 <canvas id="spec"></canvas>
29 </main>
30 </div>
31 <script type="module" src="./src/main.ts"></script>
32 </body>
33</html>