Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>Spotify Manager</title> | |
| <link rel="stylesheet" href="style.css"/> | |
| </head> | |
| <body> | |
| <nav> | |
| <a href="#" class="nav-brand"><span class="dot"></span> jrubiosainz</a> | |
| <div class="nav-links"> | |
| <a href="#features">Features</a> | |
| <a href="#gestures">Gestures</a> | |
| <a href="#install">Install</a> | |
| <a href="https://huggingface.co/reachy-mini#/apps">App Store</a> | |
| </div> | |
| </nav> | |
| <section class="hero"> | |
| <div class="badge">Reachy Mini App</div> | |
| <div class="hero-title"> | |
| <svg class="spotify-logo" viewBox="0 0 168 168" width="48" height="48"><path fill="#1DB954" d="M83.996.277C37.747.277.253 37.77.253 84.019c0 46.251 37.494 83.741 83.743 83.741 46.254 0 83.744-37.49 83.744-83.741 0-46.246-37.49-83.738-83.745-83.738l.001-.004zm38.404 120.78a5.217 5.217 0 01-7.18 1.73c-19.662-12.01-44.414-14.73-73.564-8.07a5.222 5.222 0 01-6.249-3.93 5.213 5.213 0 013.926-6.25c31.9-7.291 59.263-4.15 81.337 9.34 2.46 1.51 3.24 4.72 1.73 7.18zm10.25-22.805c-1.89 3.075-5.91 4.045-8.98 2.155-22.51-13.839-56.823-17.846-83.448-9.764-3.453 1.043-7.1-.903-8.148-4.35a6.538 6.538 0 014.354-8.143c30.413-9.228 68.222-4.758 94.072 11.127 3.07 1.89 4.04 5.91 2.15 8.976zm.88-23.744c-26.99-16.031-71.52-17.505-97.289-9.684-4.138 1.255-8.514-1.081-9.768-5.219a7.835 7.835 0 015.221-9.771c29.581-8.98 78.756-7.245 109.83 11.202a7.823 7.823 0 012.74 10.733c-2.2 3.722-7.02 4.949-10.73 2.739z"/></svg> | |
| <h1>Spotify Manager</h1> | |
| </div> | |
| <p class="tagline">Your robot DJ — control Spotify with gestures, voice, and personality.</p> | |
| </section> | |
| <div class="app-icon-showcase"> | |
| <img src="reachy_icon.png" alt="Reachy Mini" class="app-icon-img"/> | |
| </div> | |
| <div class="video-showcase"> | |
| <div class="video-frame"> | |
| <video autoplay loop muted playsinline> | |
| <source src="caelum_spotify_manager.mp4" type="video/mp4"> | |
| </video> | |
| </div> | |
| <p class="video-label">MuJoCo simulator — gesture control, voice commands, robot feedback</p> | |
| </div> | |
| <section class="features" id="features"> | |
| <h2>Features</h2> | |
| <p class="subtitle">Three ways to control your music</p> | |
| <div class="feature-grid"> | |
| <div class="feature-card"> | |
| <div class="icon">🖐️</div> | |
| <h3>Gesture Control</h3> | |
| <p>6 hand gestures via MediaPipe — wave to skip, thumbs up to like, open palm to play/pause.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="icon">🎤</div> | |
| <h3>Voice Commands</h3> | |
| <p>Say "pon Arctic Monkeys" or "next" — Whisper STT understands Spanish and English naturally.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="icon">🤖</div> | |
| <h3>Robot Personality</h3> | |
| <p>Every action triggers unique physical feedback — head flicks, antenna spreads, curious tilts, and beat pulses.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="gestures" id="gestures"> | |
| <h2>Gesture Map</h2> | |
| <p class="subtitle">Your hands are the remote</p> | |
| <div class="feature-grid"> | |
| <div class="feature-card"> | |
| <div class="icon">🖐️</div> | |
| <h3>Open Palm</h3> | |
| <p>Play / Pause toggle</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="icon">👆</div> | |
| <h3>Point Right</h3> | |
| <p>Next track</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="icon">👈</div> | |
| <h3>Point Left</h3> | |
| <p>Previous track</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="icon">👍</div> | |
| <h3>Thumbs Up</h3> | |
| <p>Like current track</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="icon">✊</div> | |
| <h3>Fist</h3> | |
| <p>Volume down</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="icon">👋</div> | |
| <h3>Wave</h3> | |
| <p>Skip track</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="install" id="install"> | |
| <h2>Get Started</h2> | |
| <div class="steps"> | |
| <div class="step"> | |
| <div class="step-num">1</div> | |
| <div><h4>Install spogo</h4><p>The CLI handles Spotify auth via browser cookies — no OAuth dance needed.</p></div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-num">2</div> | |
| <div><h4>Install App</h4><p>From the Reachy Mini dashboard, search "Spotify Manager" and install.</p></div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-num">3</div> | |
| <div><h4>Play Music</h4><p>Wave your hand or say "play" — your robot takes over as DJ.</p></div> | |
| </div> | |
| </div> | |
| </section> | |
| <footer> | |
| 🎵 Spotify Manager · Built by <a href="https://huggingface.co/jrubiosainz">jrubiosainz</a> · <a href="https://huggingface.co/reachy-mini#/apps">Browse More Apps</a> | |
| </footer> | |
| </body> | |
| </html> | |