PrometheusGroup/voidscape-noir
0
1<!DOCTYPE html>2<html lang="en" class="dark">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>VoidScape Player</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script>11 tailwind.config = {12 darkMode: 'class',13 theme: {14 extend: {15 colors: {16 primary: {17 50: '#f0f9ff',18 100: '#e0f2fe',19 200: '#bae6fd',20 300: '#7dd3fc',21 400: '#38bdf8',22 500: '#0ea5e9',23 600: '#0284c7',24 700: '#0369a1',25 800: '#075985',26 900: '#0c4a6e',27 },28 secondary: {29 50: '#f5f3ff',30 100: '#ede9fe',31 200: '#ddd6fe',32 300: '#c4b5fd',33 400: '#a78bfa',34 500: '#8b5cf6',35 600: '#7c3aed',36 700: '#6d28d9',37 800: '#5b21b6',38 900: '#4c1d95',39 }40 }41 }42 }43 }44 </script>45</head>46<body class="bg-gray-900 text-gray-100 min-h-screen">47 <custom-navbar></custom-navbar>48 49 <main class="container mx-auto px-4 py-12">50 <div class="max-w-6xl mx-auto">51 <h1 class="text-4xl font-bold mb-8 text-transparent bg-clip-text bg-gradient-to-r from-primary-500 to-secondary-500">52 VoidScape Player53 </h1>54 55 <div class="relative mb-8">56 <input type="text" id="search-input" placeholder="Search for music..." 57 class="w-full bg-gray-800 border border-gray-700 rounded-lg px-6 py-4 text-lg focus:outline-none focus:ring-2 focus:ring-primary-500">58 <button id="search-btn" class="absolute right-3 top-1/2 transform -translate-y-1/2 bg-primary-600 hover:bg-primary-700 rounded-lg px-4 py-2 transition-all">59 Search60 </button>61 </div>62 <div class="flex justify-between items-center mb-6">63 <h2 class="text-2xl font-semibold">Your Playlist</h2>64 <div class="flex gap-4">65 <button id="download-all" class="px-4 py-2 bg-green-600 hover:bg-green-700 rounded-lg font-medium">66 Download New67 </button>68 <div class="flex gap-2">69 <button id="zoom-out" class="p-2 bg-gray-800 rounded-lg hover:bg-gray-700">70 <i data-feather="minus"></i>71 </button>72 <button id="zoom-in" class="p-2 bg-gray-800 rounded-lg hover:bg-gray-700">73 <i data-feather="plus"></i>74 </button>75 </div>76 </div>77 </div>78<div id="playlist-grid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">79 <!-- Playlist items will be inserted here -->80 </div>81 </div>82 </main>83 84 <!-- Search Modal -->85 <div id="search-modal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden overflow-y-auto">86 <div class="container mx-auto px-4 py-12">87 <div class="flex justify-between items-center mb-8">88 <h2 class="text-2xl font-semibold">Search Results</h2>89 <button id="back-btn" class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg">90 Back to Playlist91 </button>92 </div>93 94 <div id="search-grid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">95 <!-- Search results will be inserted here -->96 </div>97 </div>98 </div>99 100 <!-- Mini Player -->101 <div id="mini-player" class="fixed bottom-4 right-4 bg-gray-800 border border-gray-700 rounded-lg shadow-xl w-80 overflow-hidden draggable">102 <div class="p-4 cursor-move">103 <div class="flex items-center gap-4">104 <img id="mini-player-thumb" src="http://static.photos/music/200x200/1" class="w-12 h-12 rounded-lg object-cover">105 <div class="flex-1 min-w-0">106 <h3 id="mini-player-title" class="font-medium truncate">Song Title</h3>107 <p id="mini-player-artist" class="text-sm text-gray-400 truncate">Artist Name</p>108 </div>109 <div class="flex items-center gap-2">110 <span id="mini-player-count" class="text-sm text-gray-400">1/10</span>111 </div>112 </div>113 114 <div class="flex justify-between items-center mt-4">115 <button id="shuffle-btn" class="p-2 text-gray-400 hover:text-white">116 <i data-feather="shuffle"></i>117 </button>118 <button id="prev-btn" class="p-2 text-gray-400 hover:text-white">119 <i data-feather="skip-back"></i>120 </button>121 <button id="play-btn" class="p-2 bg-primary-600 hover:bg-primary-700 rounded-full">122 <i data-feather="play"></i>123 </button>124 <button id="next-btn" class="p-2 text-gray-400 hover:text-white">125 <i data-feather="skip-forward"></i>126 </button>127 <button id="close-player" class="p-2 text-gray-400 hover:text-white">128 <i data-feather="x"></i>129 </button>130 </div>131 132 <div class="mt-2 flex items-center gap-2">133 <span class="text-xs text-gray-400">0:00</span>134 <div class="flex-1 h-1 bg-gray-700 rounded-full">135 <div id="progress-bar" class="h-full bg-primary-500 rounded-full w-0"></div>136 </div>137 <span class="text-xs text-gray-400">3:45</span>138 </div>139 </div>140 </div>141 142 <script src="components/navbar.js"></script>143 <script src="script.js"></script>144 <script>145 feather.replace();146 147 // Make mini-player draggable148 const player = document.getElementById('mini-player');149 let isDragging = false;150 let offsetX, offsetY;151 152 player.addEventListener('mousedown', (e) => {153 if (e.target.closest('button')) return;154 155 isDragging = true;156 offsetX = e.clientX - player.getBoundingClientRect().left;157 offsetY = e.clientY - player.getBoundingClientRect().top;158 player.style.cursor = 'grabbing';159 });160 161 document.addEventListener('mousemove', (e) => {162 if (!isDragging) return;163 164 player.style.left = `${e.clientX - offsetX}px`;165 player.style.top = `${e.clientY - offsetY}px`;166 });167 168 document.addEventListener('mouseup', () => {169 isDragging = false;170 player.style.cursor = 'grab';171 });172 173 // Modal functionality174 const searchBtn = document.getElementById('search-btn');175 const searchModal = document.getElementById('search-modal');176 const backBtn = document.getElementById('back-btn');177 178 searchBtn.addEventListener('click', () => {179 searchModal.classList.remove('hidden');180 // Here you would fetch search results and populate the search grid181 });182 183 backBtn.addEventListener('click', () => {184 searchModal.classList.add('hidden');185 });186 187 // Zoom functionality188 const zoomIn = document.getElementById('zoom-in');189 const zoomOut = document.getElementById('zoom-out');190 const playlistGrid = document.getElementById('playlist-grid');191 192 let zoomLevel = 5; // Default to 5 columns193 194 zoomIn.addEventListener('click', () => {195 if (zoomLevel < 8) {196 zoomLevel++;197 updateGridColumns();198 }199 });200 201 zoomOut.addEventListener('click', () => {202 if (zoomLevel > 2) {203 zoomLevel--;204 updateGridColumns();205 }206 });207 208 function updateGridColumns() {209 playlistGrid.className = `grid gap-4 grid-cols-${zoomLevel}`;210 }211 </script>212</body>213</html>