8f29519Export displacement fields for the chain tops, add this repository's own site with a field viewer, and leave the comparison to the challenge repositoryJeremy Magland 1
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width, initial-scale=1">
6<title>String solutions</title>
7<style>
8:root { --fg: #1b1b1b; --bg: #fff; --muted: #666; --line: #ddd; --accent: #2a6db0; --string: #1b1b1b; --rest: #bbb; }
9@media (prefers-color-scheme: dark) { :root { --fg: #e6e6e6; --bg: #151515; --muted: #999; --line: #333; --accent: #7ab3e8; --string: #e6e6e6; --rest: #444; } }
10body { font-family: system-ui, sans-serif; color: var(--fg); background: var(--bg); margin: 0; padding: 16px; line-height: 1.45; }
11main { max-width: 1100px; margin: 0 auto; }
12a { color: var(--accent); }
13table { border-collapse: collapse; width: 100%; font-size: 0.92em; }
14th, td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
15td.num { text-align: right; font-variant-numeric: tabular-nums; }
16.muted { color: var(--muted); }
17.wrap { overflow-x: auto; }
18canvas { width: 100%; height: 260px; display: block; border: 1px solid var(--line); border-radius: 4px; }
19.controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 8px 0; }
20.controls label { display: flex; gap: 6px; align-items: center; }
21input[type=range] { width: 200px; }
22button { font: inherit; padding: 4px 10px; }
23</style>
24</head>
25<body><main>
26<h1>Solutions to the string challenges</h1>
27<p>This is the site of the solution repository <a href="https://vault1.magland.org/challenges/string-solutions">challenges/string-solutions</a>. The comparison of all registered solutions against the reference is on the <a href="https://vault1.magland.org/challenges/string/site/">challenge repository's results site</a>; this page lists this repository's own submissions and animates the exported displacement fields.</p>
29<h2>Displacement animation</h2>
30<div class="controls">
31 <label>Solution <select id="fieldSelect"></select></label>
32 <button id="playBtn">Play</button>
33 <label>Speed <input id="speed" type="range" min="-4" max="0" step="0.1" value="-2.5"> <span id="speedLabel"></span></label>
34 <label>Time <input id="timeSlider" type="range" min="0" max="1" step="1" value="0"> <span id="timeLabel" class="muted"></span></label>
35</div>
36<canvas id="canvas"></canvas>
37<p id="fieldStatus" class="muted">Loading…</p>
39<h2>Submissions</h2>
107bcddWeb Audio playback with per-challenge gain and limiterJeremy Magland 40<div id="playback"></div>
8f29519Export displacement fields for the chain tops, add this repository's own site with a field viewer, and leave the comparison to the challenge repositoryJeremy Magland 41<div id="submissions"></div>
42</main>
107bcddWeb Audio playback with per-challenge gain and limiterJeremy Magland 43<script src="player.js"></script>
8f29519Export displacement fields for the chain tops, add this repository's own site with a field viewer, and leave the comparison to the challenge repositoryJeremy Magland 44<script type="module" src="viewer.js"></script>
45</body>
46</html>