Spaces:
Sleeping
Sleeping
File size: 5,539 Bytes
25201bd ba222a5 25201bd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 |
<!DOCTYPE html>
<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> |