index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spotify Dancer - Reachy Mini App</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎵 Spotify Dancer</h1>
            <p>Make your Reachy Mini dance to Spotify music!</p>
        </div>

        <div class="features">
            <div class="feature">
                <h3>🎧 Spotify Connect</h3>
                <p>Reachy Mini appears as a speaker in your Spotify app</p>
            </div>
            <div class="feature">
                <h3>🎵 Beat Detection</h3>
                <p>Real-time audio analysis with BPM estimation</p>
            </div>
            <div class="feature">
                <h3>💃 Dance Styles</h3>
                <p>Energetic, Groovy, Chill, and Hip-Hop modes</p>
            </div>
            <div class="feature">
                <h3>🔊 Stream Analysis</h3>
                <p>Direct audio capture via ALSA loopback</p>
            </div>
        </div>

        <div class="install">
            <h2>Installation</h2>
            <p>Install this app on your Reachy Mini from the dashboard, or run:</p>
            <code>pip install spotify_dancer</code>
        </div>

        <div class="setup">
            <h2>Quick Setup</h2>
            <ol>
                <li>Install raspotify for Spotify Connect</li>
                <li>Enable ALSA loopback for best detection</li>
                <li>Start the app from Reachy Mini dashboard</li>
                <li>Select 'loopback_in' as audio input</li>
                <li>Play music on Spotify → Select "Reachy Mini"</li>
                <li>Click "Start Dancing" and enjoy!</li>
            </ol>
        </div>

        <div class="footer">
            <p>Built for the Reachy Mini community</p>
        </div>
    </div>
</body>
</html>