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; }
18audio { width: 180px; height: 28px; }
19canvas { width: 100%; height: 260px; display: block; border: 1px solid var(--line); border-radius: 4px; }
20.controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 8px 0; }
21.controls label { display: flex; gap: 6px; align-items: center; }
22input[type=range] { width: 200px; }
23button { font: inherit; padding: 4px 10px; }
24</style>
25</head>
26<body><main>
27<h1>Solutions to the string challenges</h1>
28<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>
30<h2>Displacement animation</h2>
31<div class="controls">
32 <label>Solution <select id="fieldSelect"></select></label>
33 <button id="playBtn">Play</button>
34 <label>Speed <input id="speed" type="range" min="-4" max="0" step="0.1" value="-2.5"> <span id="speedLabel"></span></label>
35 <label>Time <input id="timeSlider" type="range" min="0" max="1" step="1" value="0"> <span id="timeLabel" class="muted"></span></label>
36</div>
37<canvas id="canvas"></canvas>
38<p id="fieldStatus" class="muted">Loading…</p>
40<h2>Submissions</h2>
41<div id="submissions"></div>
42</main>
43<script type="module" src="viewer.js"></script>
44</body>
45</html>