Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Music Player</title> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="sidebar"> | |
| <nav> | |
| <h2>Library</h2> | |
| <ul class="nav-menu"> | |
| <li><a href="#" data-view="all" class="active">All Songs</a></li> | |
| <li><a href="#" data-view="albums">Albums</a></li> | |
| <li><a href="#" data-view="artists">Artists</a></li> | |
| <li><a href="#" data-view="playlists">Playlists</a></li> | |
| </ul> | |
| <h3>Playlists</h3> | |
| <ul id="playlist-list" class="playlist-menu"> | |
| <!-- Playlists will be added here dynamically --> | |
| </ul> | |
| <button id="new-playlist-btn" class="btn-new-playlist"> | |
| <i class="fas fa-plus"></i> New Playlist | |
| </button> | |
| </nav> | |
| </div> | |
| <div class="main-content"> | |
| <div class="view-header"> | |
| <h1 id="view-title">All Songs</h1> | |
| <div class="search-box"> | |
| <input type="text" id="search-input" placeholder="Search..."> | |
| <i class="fas fa-search"></i> | |
| </div> | |
| </div> | |
| <div id="view-container"> | |
| <!-- Different views will be rendered here --> | |
| </div> | |
| </div> | |
| <div class="music-player"> | |
| <div class="player-header"> | |
| <h1>Music Player</h1> | |
| </div> | |
| <div class="now-playing"> | |
| <img id="album-art" src="{{ url_for('static', filename='default-cover.png') }}" alt="Album Art"> | |
| <div class="track-info"> | |
| <div id="track-title">No track selected</div> | |
| <div id="track-artist">-</div> | |
| <div id="track-album">-</div> | |
| </div> | |
| <div class="lyrics-container"> | |
| <div class="lyrics-header"> | |
| <h3>Lyrics</h3> | |
| </div> | |
| <div id="lyrics-content" class="lyrics-content"> | |
| <!-- Lyrics will be displayed here --> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="player-controls"> | |
| <div class="time-control"> | |
| <span id="current-time">0:00</span> | |
| <input type="range" id="seek-slider" min="0" max="100" value="0"> | |
| <span id="duration">0:00</span> | |
| </div> | |
| <div class="control-buttons"> | |
| <button id="prev-btn"><i class="fas fa-backward"></i></button> | |
| <button id="play-btn"><i class="fas fa-play"></i></button> | |
| <button id="next-btn"><i class="fas fa-forward"></i></button> | |
| <div class="volume-control"> | |
| <i class="fas fa-volume-up"></i> | |
| <input type="range" id="volume-slider" min="0" max="100" value="100"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Modal for creating/editing playlists --> | |
| <div id="playlist-modal" class="modal"> | |
| <div class="modal-content"> | |
| <h2>Add to Playlist</h2> | |
| <div class="existing-playlists"> | |
| <!-- Existing playlists will be listed here --> | |
| </div> | |
| <div class="new-playlist-section"> | |
| <h3>Create New Playlist</h3> | |
| <input type="text" id="playlist-name" placeholder="Playlist Name"> | |
| </div> | |
| <div class="modal-buttons"> | |
| <button id="cancel-playlist">Cancel</button> | |
| <button id="save-playlist">Create New</button> | |
| </div> | |
| </div> | |
| </div> | |
| <audio id="audio-player"></audio> | |
| <script src="{{ url_for('static', filename='player.js') }}"></script> | |
| <button class="mobile-menu-btn"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <script> | |
| // Mobile menu handling | |
| const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); | |
| const sidebar = document.querySelector('.sidebar'); | |
| const overlay = document.createElement('div'); | |
| overlay.className = 'sidebar-overlay'; | |
| mobileMenuBtn.addEventListener('click', () => { | |
| sidebar.classList.toggle('active'); | |
| if (sidebar.classList.contains('active')) { | |
| document.body.appendChild(overlay); | |
| } else { | |
| overlay.remove(); | |
| } | |
| }); | |
| overlay.addEventListener('click', () => { | |
| sidebar.classList.remove('active'); | |
| overlay.remove(); | |
| }); | |
| // Close sidebar when clicking a menu item on mobile | |
| document.querySelectorAll('.nav-menu a, .playlist-menu a').forEach(link => { | |
| link.addEventListener('click', () => { | |
| if (window.innerWidth <= 768) { | |
| sidebar.classList.remove('active'); | |
| overlay.remove(); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |