| 1 | <!doctype html> |
| 2 | <html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"> |
| 3 | <title>Codewhale · A living field</title><link rel="stylesheet" href="./pet.css"></head> |
| 4 | <body><main> |
| 5 | <header><a href="./">CODEWHALE / WHALESONG</a><span id="source">Wild · simulated creature</span></header> |
| 6 | <section class="intro"><p class="eyebrow">A WHALE LIVING IN CODE</p><h1>Watch the work take shape.</h1><p>One field of dots, shaped by what Codewhale is doing.<br>A whale at rest. A living expression of the work.</p></section> |
| 7 | <section class="tank" aria-label="Whale habitat"><canvas id="tank" tabindex="0" role="img" aria-label="A whale made of dots. Use Focus and Pulse to interact with the field."></canvas> |
| 8 | <div class="readout"><strong id="channel">other · drift</strong><span id="behaviour">swim</span></div><span class="depth">CODE, MADE VISIBLE.</span></section> |
| 9 | <nav aria-label="Habitat controls"><label class="file">Join shared pet<input id="join-shared" type="file" accept=".json"></label><label>World <select id="mode"><option value="wild">Wild</option><option value="demo">Event demo</option><option value="replay" disabled>Imported replay</option><option value="live" disabled>Local file study</option></select></label> |
| 10 | <button id="pause" aria-pressed="false">Pause</button><button id="attention">Focus</button><button id="feed">Pulse</button><button id="sound" aria-pressed="false">Sound off</button> |
| 11 | <label class="toggle"><input id="motion" type="checkbox"> Still</label><label class="file">Import trace / tape<input id="file" type="file" accept=".json,.jsonl,.ndjson"></label><button id="follow">Follow file study</button><button id="save">Save replay</button><select id="archive" aria-label="Earlier recordings"><option value="">Earlier recordings…</option></select></nav> |
| 12 | <div class="timeline"><output id="clock">0:00</output><input id="seek" type="range" min="0" max="90" step="0.1" value="0" aria-label="Replay time"><output id="end">1:30</output></div> |
| 13 | <p id="message" role="status">Wild mode is a simulated creature. Import event-v1, OTLP, or Codewhale telemetry to see work.</p> |
| 14 | <p id="persistence" role="status">The habitat saves on this device.</p> |
| 15 | <footer><span>Hollow dots mean missing telemetry. Sleep is a separate dimmer.</span><span>Everything stays on this device.</span></footer> |
| 16 | </main><script type="module" src="./ui/pet.js"></script></body></html> |
| 17 |