<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radio Stream Player</title>
    <link rel="stylesheet" href="rsp-player.css">
</head>
<body>
    <!-- Header da Página (Exemplo) -->
    <header style="position: fixed; top: 0; left: 0; right: 0; height: 80px; background: #333; z-index: 999; display: flex; align-items: center; padding: 0 20px; color: white;">
        <h1>Minha Página</h1>
        <nav style="margin-left: auto;">
            <a href="#" style="color: white; margin: 0 15px; text-decoration: none;">Início</a>
            <a href="#" style="color: white; margin: 0 15px; text-decoration: none;">Rádios</a>
            <a href="#" style="color: white; margin: 0 15px; text-decoration: none;">Sobre</a>
        </nav>
    </header>

    <!-- Conteúdo Principal -->
    <main style="margin-top: 100px; padding: 20px;">
        <h2>Conteúdo da Página</h2>
        <p>Seu conteúdo aqui... O player mini ficará abaixo do header fixo!</p>
    </main>

    <!-- PLAYER MINI (POSIÇÃO BOTTOM - PADRÃO) -->
    <div class="rsp-mini-container position-bottom" id="rspMiniContainer">
        <div class="rsp-mini-player" id="rspMiniPlayer">
            <!-- Botão Expandir -->
            <button class="rsp-mini-close-btn" title="Abrir Player Completo" onclick="toggleFullPlayer()">
                ⤢
            </button>
            
            <!-- Cover -->
            <div class="rsp-mini-cover">
                <img class="rsp-mini-cover-img" id="miniCoverImg" src="https://via.placeholder.com/300x300/1a1a2e/ffffff?text=COVER" alt="Cover">
                <div class="rsp-mini-equalizer">
                    <div class="rsp-eq-bar"></div>
                    <div class="rsp-eq-bar"></div>
                    <div class="rsp-eq-bar"></div>
                    <div class="rsp-eq-bar"></div>
                    <div class="rsp-eq-bar"></div>
                </div>
            </div>
            
            <!-- Info -->
            <div class="rsp-mini-info">
                <div class="rsp-mini-station" id="miniStation">Rádio Online</div>
                <div class="rsp-mini-track" id="miniTrackTitle">Carregando...</div>
            </div>
            
            <!-- Controles -->
            <div class="rsp-mini-controls">
                <button class="rsp-mini-btn rsp-mini-btn-play" id="miniPlayBtn" onclick="togglePlay()">
                    <svg class="rsp-icon" viewBox="0 0 24 24">
                        <path d="M8 5v14l11-7z"/>
                    </svg>
                </button>
            </div>
            
            <!-- Volume -->
            <div class="rsp-mini-volume">
                <button class="rsp-mini-btn rsp-mini-btn-volume" onclick="toggleVolumeControl()">
                    <svg class="rsp-icon" viewBox="0 0 24 24">
                        <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>
                    </svg>
                </button>
                <input type="range" class="rsp-mini-volume-slider" id="miniVolumeSlider" min="0" max="100" value="70" onchange="setVolume(this.value)">
            </div>
            
            <!-- Status -->
            <div class="rsp-mini-status">
                <div class="rsp-status-dot"></div>
                <span class="rsp-mini-status-text" id="miniStatusText">Conectando</span>
            </div>
        </div>
    </div>

    <!-- PLAYER COMPLETO (OCULTO POR PADRÃO) -->
    <div class="rsp-player-container" id="rspFullContainer" style="display: none;">
        <div class="rsp-player" id="rspFullPlayer">
            <!-- Album Art -->
            <div class="rsp-album-art">
                <div class="rsp-album-art-inner">
                    <img class="rsp-cover-img" id="fullCoverImg" src="https://via.placeholder.com/300x300/1a1a2e/ffffff?text=COVER" alt="Cover">
                    <div class="rsp-vinyl-overlay">
                        <div class="rsp-vinyl"></div>
                    </div>
                    <div class="rsp-equalizer">
                        <div class="rsp-eq-bar"></div>
                        <div class="rsp-eq-bar"></div>
                        <div class="rsp-eq-bar"></div>
                        <div class="rsp-eq-bar"></div>
                        <div class="rsp-eq-bar"></div>
                    </div>
                </div>
            </div>
            
            <!-- Track Info -->
            <div class="rsp-track-info">
                <div class="rsp-station-name" id="fullStation">Rádio Online</div>
                <div class="rsp-track-title" id="fullTrackTitle">Carregando música...</div>
                <div class="rsp-track-artist" id="fullTrackArtist">Artista</div>
                <div class="rsp-track-album" id="fullTrackAlbum">Álbum</div>
            </div>
            
            <!-- Progress Bar -->
            <div class="rsp-progress-bar">
                <div class="rsp-progress-fill"></div>
            </div>
            
            <!-- Controls -->
            <div class="rsp-controls">
                <div class="rsp-volume-control">
                    <button class="rsp-btn rsp-btn-volume" onclick="toggleVolumeControl()">
                        <svg class="rsp-icon" viewBox="0 0 24 24">
                            <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>
                        </svg>
                    </button>
                    <input type="range" class="rsp-volume-slider" id="fullVolumeSlider" min="0" max="100" value="70" onchange="setVolume(this.value)">
                </div>
                <button class="rsp-btn rsp-btn-play" id="fullPlayBtn" onclick="togglePlay()">
                    <svg class="rsp-icon" viewBox="0 0 24 24" id="fullPlayIcon">
                        <path d="M8 5v14l11-7z"/>
                    </svg>
                </button>
            </div>
            
            <!-- Status -->
            <div class="rsp-status">
                <div class="rsp-status-dot"></div>
                <span class="rsp-status-text" id="fullStatusText">Conectando</span>
            </div>
        </div>
    </div>

    <script src="rsp-player.js"></script>
</body>
</html>