Spaces:
Running
Running
opencode
feat: add Wormholes scene, tour mode, keyboard shortcuts, URL permalinks, bucket upload
acfcfe6 | <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> | |
| <meta name="theme-color" content="#0b0420" /> | |
| <title>Cosmic Garden — Generative Art Sandbox</title> | |
| <link rel="stylesheet" href="style.css" /> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌌</text></svg>" /> | |
| </head> | |
| <body> | |
| <canvas id="stage"></canvas> | |
| <!-- Top bar --> | |
| <header class="topbar"> | |
| <div class="brand"> | |
| <span class="logo">🌌</span> | |
| <div class="brand-text"> | |
| <h1>COSMIC GARDEN</h1> | |
| <p>a generative art sandbox <span class="muted">· no AI · pure code</span></p> | |
| </div> | |
| </div> | |
| <nav class="scenes" id="sceneTabs"> | |
| <button data-scene="aurora" class="active">Aurora</button> | |
| <button data-scene="flock">Flock</button> | |
| <button data-scene="voxel">Voxel</button> | |
| <button data-scene="lattice">Lattice</button> | |
| <button data-scene="starfall">Starfall</button> | |
| <button data-scene="wormhole">Wormholes</button> | |
| </nav> | |
| <div class="meter" title="Live FPS / entity count"> | |
| <span id="statFps">—</span> fps · <span id="statCount">0</span> | |
| </div> | |
| </header> | |
| <!-- Subtitle hint --> | |
| <div class="hint" id="hint">click to seed · drag to nurture · double-click for chaos</div> | |
| <!-- Bottom control bar --> | |
| <footer class="hud"> | |
| <div class="group"> | |
| <label>Theme | |
| <select id="theme"> | |
| <option value="amethyst">Amethyst</option> | |
| <option value="ember">Ember</option> | |
| <option value="reef">Reef</option> | |
| <option value="mono">Mono</option> | |
| </select> | |
| </label> | |
| <label>Speed | |
| <input id="speed" type="range" min="0" max="2" step="0.05" value="1" /> | |
| </label> | |
| <label>Density | |
| <input id="density" type="range" min="20" max="400" step="10" value="140" /> | |
| </label> | |
| <label>Evolve | |
| <input id="evolve" type="checkbox" checked /> | |
| </label> | |
| </div> | |
| <div class="group right"> | |
| <button id="btnSeed" title="Re-seed / randomize current scene">🌱 Reseed</button> | |
| <button id="btnPause" title="Pause / resume (Space)">⏯ <span id="pauseLbl">Pause</span></button> | |
| <button id="btnTour" title="Auto-cycle worlds every 12s (T)">🚌 <span id="tourLbl">Tour</span></button> | |
| <button id="btnSound" title="Toggle ambient sound">🔊 <span id="soundLbl">Sound</span></button> | |
| <button id="btnExport" title="Save PNG of the current frame">💾 Export</button> | |
| <button id="btnUpload" title="Save a snapshot to the HF dataset bucket">☁️ Save to Bucket</button> | |
| <button id="btnHelp" title="Keyboard shortcuts (?)">❔</button> | |
| </div> | |
| </footer> | |
| <!-- Help modal --> | |
| <div id="helpModal" class="modal hidden" role="dialog" aria-modal="true"> | |
| <div class="modal-card"> | |
| <h2>Keyboard shortcuts</h2> | |
| <table> | |
| <tr><td><kbd>1</kbd>–<kbd>6</kbd></td><td>Switch world (Aurora → Wormholes)</td></tr> | |
| <tr><td><kbd>R</kbd></td><td>Reseed current world</td></tr> | |
| <tr><td><kbd>Space</kbd></td><td>Pause / resume</td></tr> | |
| <tr><td><kbd>T</kbd></td><td>Toggle tour mode</td></tr> | |
| <tr><td><kbd>S</kbd></td><td>Toggle ambient sound</td></tr> | |
| <tr><td><kbd>E</kbd></td><td>Export current frame as PNG</td></tr> | |
| <tr><td><kbd>U</kbd></td><td>Upload snapshot to HF bucket</td></tr> | |
| <tr><td><kbd>?</kbd></td><td>Show / hide this help</td></tr> | |
| <tr><td><kbd>Esc</kbd></td><td>Close help / stop tour</td></tr> | |
| <tr><td><kbd>+</kbd>/<kbd>-</kbd></td><td>Speed up / slow down</td></tr> | |
| </table> | |
| <p class="muted">Permalinks: append <code>#scene=flock&theme=reef&density=200</code> to the URL to deep-link a state.</p> | |
| <button id="btnCloseHelp">Close</button> | |
| </div> | |
| </div> | |
| <!-- Hidden audio start hint --> | |
| <div id="audioBadge" class="audio-badge">🔊 click anywhere once to enable audio</div> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> | |