Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Simple Dances Studio</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <div class="landing-bg"></div> | |
| <main class="landing-shell"> | |
| <header class="landing-hero"> | |
| <div> | |
| <p class="eyebrow">Reachy Mini Playground</p> | |
| <h1>Simple Dances Studio</h1> | |
| <p class="subtitle">A static mockup of the actual GUI you run from the Reachy Mini dashboard.</p> | |
| </div> | |
| <div class="hero-meta"> | |
| <span class="hero-chip">🕺 Always ready to groove</span> | |
| <span class="hero-chip">Install via Reachy Mini dashboard</span> | |
| </div> | |
| </header> | |
| <section class="landing-grid"> | |
| <article class="landing-card"> | |
| <div class="card-header"> | |
| <div> | |
| <h2>Dance Library</h2> | |
| <p>Tap a move and instantly preview its description.</p> | |
| </div> | |
| </div> | |
| <div class="landing-select"> | |
| <div class="select-label">Choose a dance</div> | |
| <div class="select-fake"> | |
| <span>Groovy Sway & Roll</span> | |
| <span class="chevron">⌄</span> | |
| </div> | |
| </div> | |
| <p class="description">A graceful sway with head spirals. Perfect intro groove.</p> | |
| </article> | |
| <article class="landing-card"> | |
| <div class="card-header"> | |
| <div> | |
| <h2>Playback & Status</h2> | |
| <p>Start, stop, and check sync.</p> | |
| </div> | |
| </div> | |
| <button class="primary ghosted">Start Dancing</button> | |
| <div class="status-line">Syncing…</div> | |
| </article> | |
| </section> | |
| <section class="landing-card params"> | |
| <div class="card-header"> | |
| <div> | |
| <h2>Dance Parameters</h2> | |
| <p>Fine-tune waveforms, amplitudes, and antenna flair.</p> | |
| </div> | |
| </div> | |
| <div class="bpm-block"> | |
| <div class="field-heading"> | |
| <span>BPM</span> | |
| <strong>110</strong> | |
| </div> | |
| <div class="slider"></div> | |
| </div> | |
| <div class="params-grid"> | |
| <div class="param-chip"> | |
| <span class="param-label">Amplitude</span> | |
| <span class="param-value">0.70×</span> | |
| </div> | |
| <div class="param-chip"> | |
| <span class="param-label">Head roll</span> | |
| <span class="param-value">+12°</span> | |
| </div> | |
| <div class="param-chip"> | |
| <span class="param-label">Pitch sway</span> | |
| <span class="param-value">−8°</span> | |
| </div> | |
| <div class="param-chip"> | |
| <span class="param-label">Antenna sync</span> | |
| <span class="param-value">Wave</span> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="landing-card viz"> | |
| <div class="card-header"> | |
| <div> | |
| <h2>Kinesthetic Visualizer</h2> | |
| <p>The kinetic drawing is temporarily removed. Ping the author if this feature matters to you!</p> | |
| </div> | |
| <span class="chip">¯\_(ツ)_/¯</span> | |
| </div> | |
| <div class="viz-placeholder">Visualizer on pause. Catch the disco ball soon ✨</div> | |
| </section> | |
| </main> | |
| <footer class="landing-footer"> | |
| <p>🕺 Simple Dances Studio • Crafted by <a href="https://github.com/pollen-robotics" target="_blank">Pollen Robotics</a> • <a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_Apps" target="_blank">Browse more apps</a></p> | |
| </footer> | |
| </body> | |
| </html> | |