Hugging Face's logo

Spaces:
Crambit
/
lgm
Running

App Files Community
Crambit commited on
Commit
ee9ea75
·
verified ·
1 Parent(s): eaa3262

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +802 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Lgm
3
- emoji: 🐨
4
- colorFrom: green
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: lgm
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,802 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Liquid Glass Music</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
15
+ color: white;
16
+ min-height: 100vh;
17
+ overflow-x: hidden;
18
+ }
19
+
20
+ .glass-card {
21
+ background: rgba(255, 255, 255, 0.1);
22
+ backdrop-filter: blur(20px);
23
+ -webkit-backdrop-filter: blur(20px);
24
+ border: 1px solid rgba(255, 255, 255, 0.2);
25
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
26
+ }
27
+
28
+ .waveform {
29
+ height: 60px;
30
+ width: 100%;
31
+ background: linear-gradient(90deg, rgba(99, 102, 241, 0.8) 0%, rgba(168, 85, 247, 0.8) 100%);
32
+ border-radius: 10px;
33
+ position: relative;
34
+ overflow: hidden;
35
+ }
36
+
37
+ .waveform::before {
38
+ content: '';
39
+ position: absolute;
40
+ top: 0;
41
+ left: 0;
42
+ width: 100%;
43
+ height: 100%;
44
+ background: repeating-linear-gradient(
45
+ 90deg,
46
+ transparent,
47
+ transparent 2px,
48
+ rgba(255, 255, 255, 0.2) 2px,
49
+ rgba(255, 255, 255, 0.2) 4px
50
+ );
51
+ animation: wave 2s linear infinite;
52
+ }
53
+
54
+ @keyframes wave {
55
+ 0% { transform: translateX(0); }
56
+ 100% { transform: translateX(-4px); }
57
+ }
58
+
59
+ .progress-bar {
60
+ position: absolute;
61
+ top: 0;
62
+ left: 0;
63
+ height: 100%;
64
+ width: 30%;
65
+ background: rgba(255, 255, 255, 0.3);
66
+ border-radius: 10px;
67
+ }
68
+
69
+ .player-controls button {
70
+ transition: all 0.3s ease;
71
+ }
72
+
73
+ .player-controls button:hover {
74
+ transform: scale(1.1);
75
+ }
76
+
77
+ .play-btn {
78
+ box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
79
+ }
80
+
81
+ .song-card:hover .play-icon {
82
+ opacity: 1;
83
+ transform: translateY(0);
84
+ }
85
+
86
+ .play-icon {
87
+ opacity: 0;
88
+ transform: translateY(10px);
89
+ transition: all 0.3s ease;
90
+ }
91
+
92
+ .tab-indicator {
93
+ height: 3px;
94
+ width: 30px;
95
+ background: white;
96
+ border-radius: 3px;
97
+ transition: all 0.3s ease;
98
+ }
99
+
100
+ .active-tab .tab-indicator {
101
+ width: 50px;
102
+ background: #6366f1;
103
+ }
104
+
105
+ .ripple {
106
+ position: absolute;
107
+ border-radius: 50%;
108
+ background-color: rgba(255, 255, 255, 0.3);
109
+ transform: scale(0);
110
+ animation: ripple 0.6s linear;
111
+ pointer-events: none;
112
+ }
113
+
114
+ @keyframes ripple {
115
+ to {
116
+ transform: scale(4);
117
+ opacity: 0;
118
+ }
119
+ }
120
+
121
+ .upload-zone {
122
+ border: 2px dashed rgba(255, 255, 255, 0.3);
123
+ transition: all 0.3s ease;
124
+ }
125
+
126
+ .upload-zone.active {
127
+ border-color: #6366f1;
128
+ background: rgba(99, 102, 241, 0.1);
129
+ }
130
+ </style>
131
+ </head>
132
+ <body class="relative pb-32">
133
+ <!-- Main Content -->
134
+ <div class="container mx-auto px-4 py-6">
135
+ <!-- Header -->
136
+ <header class="flex justify-between items-center mb-8">
137
+ <div class="flex items-center">
138
+ <div class="w-10 h-10 rounded-full glass-card flex items-center justify-center mr-3">
139
+ <i class="fas fa-music text-purple-500"></i>
140
+ </div>
141
+ <h1 class="text-2xl font-bold">Liquid Glass</h1>
142
+ </div>
143
+ <div class="flex items-center space-x-4">
144
+ <button class="glass-card w-10 h-10 rounded-full flex items-center justify-center">
145
+ <i class="fas fa-search"></i>
146
+ </button>
147
+ <button class="glass-card w-10 h-10 rounded-full flex items-center justify-center">
148
+ <i class="fas fa-user"></i>
149
+ </button>
150
+ </div>
151
+ </header>
152
+
153
+ <!-- Tab Navigation -->
154
+ <div class="flex justify-around mb-8">
155
+ <button class="tab-btn active-tab flex flex-col items-center pb-2">
156
+ <i class="fas fa-home text-xl mb-1"></i>
157
+ <div class="tab-indicator"></div>
158
+ </button>
159
+ <button class="tab-btn flex flex-col items-center pb-2">
160
+ <i class="fas fa-search text-xl mb-1"></i>
161
+ <div class="tab-indicator"></div>
162
+ </button>
163
+ <button class="tab-btn flex flex-col items-center pb-2">
164
+ <i class="fas fa-heart text-xl mb-1"></i>
165
+ <div class="tab-indicator"></div>
166
+ </button>
167
+ <button class="tab-btn flex flex-col items-center pb-2">
168
+ <i class="fas fa-list text-xl mb-1"></i>
169
+ <div class="tab-indicator"></div>
170
+ </button>
171
+ </div>
172
+
173
+ <!-- Home Content -->
174
+ <div id="home-content" class="tab-content active">
175
+ <h2 class="text-xl font-semibold mb-4">Recently Played</h2>
176
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 mb-8">
177
+ <!-- Song Cards -->
178
+ <div class="song-card glass-card rounded-xl p-4 relative overflow-hidden">
179
+ <div class="relative mb-3">
180
+ <img src="https://source.unsplash.com/random/300x300/?music" alt="Album Cover" class="w-full rounded-lg aspect-square object-cover">
181
+ <button class="play-icon absolute bottom-2 right-2 w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center">
182
+ <i class="fas fa-play text-white"></i>
183
+ </button>
184
+ </div>
185
+ <h3 class="font-medium truncate">Liquid Dreams</h3>
186
+ <p class="text-sm text-gray-300 truncate">Waveform Collective</p>
187
+ </div>
188
+
189
+ <div class="song-card glass-card rounded-xl p-4 relative overflow-hidden">
190
+ <div class="relative mb-3">
191
+ <img src="https://source.unsplash.com/random/300x300/?album" alt="Album Cover" class="w-full rounded-lg aspect-square object-cover">
192
+ <button class="play-icon absolute bottom-2 right-2 w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center">
193
+ <i class="fas fa-play text-white"></i>
194
+ </button>
195
+ </div>
196
+ <h3 class="font-medium truncate">Glass Beats</h3>
197
+ <p class="text-sm text-gray-300 truncate">Transparent Sounds</p>
198
+ </div>
199
+
200
+ <div class="song-card glass-card rounded-xl p-4 relative overflow-hidden">
201
+ <div class="relative mb-3">
202
+ <img src="https://source.unsplash.com/random/300x300/?vinyl" alt="Album Cover" class="w-full rounded-lg aspect-square object-cover">
203
+ <button class="play-icon absolute bottom-2 right-2 w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center">
204
+ <i class="fas fa-play text-white"></i>
205
+ </button>
206
+ </div>
207
+ <h3 class="font-medium truncate">Fluid Motion</h3>
208
+ <p class="text-sm text-gray-300 truncate">Liquid Harmony</p>
209
+ </div>
210
+
211
+ <div class="song-card glass-card rounded-xl p-4 relative overflow-hidden">
212
+ <div class="relative mb-3">
213
+ <img src="https://source.unsplash.com/random/300x300/?concert" alt="Album Cover" class="w-full rounded-lg aspect-square object-cover">
214
+ <button class="play-icon absolute bottom-2 right-2 w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center">
215
+ <i class="fas fa-play text-white"></i>
216
+ </button>
217
+ </div>
218
+ <h3 class="font-medium truncate">Crystal Clear</h3>
219
+ <p class="text-sm text-gray-300 truncate">Pure Audio</p>
220
+ </div>
221
+
222
+ <div class="song-card glass-card rounded-xl p-4 relative overflow-hidden">
223
+ <div class="relative mb-3">
224
+ <img src="https://source.unsplash.com/random/300x300/?dj" alt="Album Cover" class="w-full rounded-lg aspect-square object-cover">
225
+ <button class="play-icon absolute bottom-2 right-2 w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center">
226
+ <i class="fas fa-play text-white"></i>
227
+ </button>
228
+ </div>
229
+ <h3 class="font-medium truncate">Reflections</h3>
230
+ <p class="text-sm text-gray-300 truncate">Mirror Sounds</p>
231
+ </div>
232
+ </div>
233
+
234
+ <h2 class="text-xl font-semibold mb-4">Trending Now</h2>
235
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
236
+ <!-- Trending Playlists -->
237
+ <div class="glass-card rounded-xl p-4 flex items-center">
238
+ <div class="w-16 h-16 rounded-lg overflow-hidden mr-4">
239
+ <img src="https://source.unsplash.com/random/300x300/?playlist" alt="Playlist Cover" class="w-full h-full object-cover">
240
+ </div>
241
+ <div>
242
+ <h3 class="font-medium">Liquid Vibes</h3>
243
+ <p class="text-sm text-gray-300">Chill beats for your glass world</p>
244
+ </div>
245
+ <button class="ml-auto w-10 h-10 rounded-full glass-card flex items-center justify-center">
246
+ <i class="fas fa-play"></i>
247
+ </button>
248
+ </div>
249
+
250
+ <div class="glass-card rounded-xl p-4 flex items-center">
251
+ <div class="w-16 h-16 rounded-lg overflow-hidden mr-4">
252
+ <img src="https://source.unsplash.com/random/300x300/?music,night" alt="Playlist Cover" class="w-full h-full object-cover">
253
+ </div>
254
+ <div>
255
+ <h3 class="font-medium">Night Waves</h3>
256
+ <p class="text-sm text-gray-300">Smooth nocturnal frequencies</p>
257
+ </div>
258
+ <button class="ml-auto w-10 h-10 rounded-full glass-card flex items-center justify-center">
259
+ <i class="fas fa-play"></i>
260
+ </button>
261
+ </div>
262
+ </div>
263
+
264
+ <h2 class="text-xl font-semibold mb-4">New Releases</h2>
265
+ <div class="mb-8">
266
+ <!-- Song List with Waveforms -->
267
+ <div class="glass-card rounded-xl overflow-hidden">
268
+ <div class="flex items-center p-4 border-b border-white/10 hover:bg-white/5 transition-colors cursor-pointer">
269
+ <div class="w-10 h-10 rounded mr-4 flex-shrink-0">
270
+ <img src="https://source.unsplash.com/random/300x300/?music,cover" alt="Album Cover" class="w-full h-full object-cover rounded">
271
+ </div>
272
+ <div class="flex-grow min-w-0">
273
+ <h3 class="font-medium truncate">Liquid Dreams</h3>
274
+ <p class="text-sm text-gray-300 truncate">Waveform Collective</p>
275
+ </div>
276
+ <div class="w-24 md:w-32 ml-4">
277
+ <div class="waveform">
278
+ <div class="progress-bar"></div>
279
+ </div>
280
+ </div>
281
+ <button class="ml-4 w-8 h-8 rounded-full flex items-center justify-center text-gray-300 hover:text-white">
282
+ <i class="fas fa-ellipsis-h"></i>
283
+ </button>
284
+ </div>
285
+
286
+ <div class="flex items-center p-4 border-b border-white/10 hover:bg-white/5 transition-colors cursor-pointer">
287
+ <div class="w-10 h-10 rounded mr-4 flex-shrink-0">
288
+ <img src="https://source.unsplash.com/random/300x300/?album,art" alt="Album Cover" class="w-full h-full object-cover rounded">
289
+ </div>
290
+ <div class="flex-grow min-w-0">
291
+ <h3 class="font-medium truncate">Glass Beats</h3>
292
+ <p class="text-sm text-gray-300 truncate">Transparent Sounds</p>
293
+ </div>
294
+ <div class="w-24 md:w-32 ml-4">
295
+ <div class="waveform">
296
+ <div class="progress-bar" style="width: 45%"></div>
297
+ </div>
298
+ </div>
299
+ <button class="ml-4 w-8 h-8 rounded-full flex items-center justify-center text-gray-300 hover:text-white">
300
+ <i class="fas fa-ellipsis-h"></i>
301
+ </button>
302
+ </div>
303
+
304
+ <div class="flex items-center p-4 hover:bg-white/5 transition-colors cursor-pointer">
305
+ <div class="w-10 h-10 rounded mr-4 flex-shrink-0">
306
+ <img src="https://source.unsplash.com/random/300x300/?vinyl,record" alt="Album Cover" class="w-full h-full object-cover rounded">
307
+ </div>
308
+ <div class="flex-grow min-w-0">
309
+ <h3 class="font-medium truncate">Fluid Motion</h3>
310
+ <p class="text-sm text-gray-300 truncate">Liquid Harmony</p>
311
+ </div>
312
+ <div class="w-24 md:w-32 ml-4">
313
+ <div class="waveform">
314
+ <div class="progress-bar" style="width: 15%"></div>
315
+ </div>
316
+ </div>
317
+ <button class="ml-4 w-8 h-8 rounded-full flex items-center justify-center text-gray-300 hover:text-white">
318
+ <i class="fas fa-ellipsis-h"></i>
319
+ </button>
320
+ </div>
321
+ </div>
322
+ </div>
323
+
324
+ <!-- Upload Section -->
325
+ <div class="glass-card rounded-xl p-6 mb-8">
326
+ <h2 class="text-xl font-semibold mb-4">Upload Your Music</h2>
327
+ <div class="upload-zone rounded-xl p-8 text-center cursor-pointer">
328
+ <i class="fas fa-cloud-upload-alt text-4xl mb-3 text-purple-500"></i>
329
+ <p class="mb-2 font-medium">Drag & drop your audio files here</p>
330
+ <p class="text-sm text-gray-300 mb-4">or click to browse files</p>
331
+ <button class="px-6 py-2 rounded-full bg-purple-600 hover:bg-purple-700 transition-colors">
332
+ Select Files
333
+ </button>
334
+ </div>
335
+
336
+ <div class="mt-6">
337
+ <h3 class="font-medium mb-3">Upload Queue</h3>
338
+ <div class="space-y-3">
339
+ <div class="flex items-center glass-card rounded-lg p-3">
340
+ <div class="w-12 h-12 rounded mr-3 bg-purple-500/10 flex items-center justify-center">
341
+ <i class="fas fa-music text-purple-500"></i>
342
+ </div>
343
+ <div class="flex-grow">
344
+ <h4 class="font-medium">My New Track.mp3</h4>
345
+ <div class="w-full bg-gray-700 rounded-full h-1.5 mt-1">
346
+ <div class="bg-purple-500 h-1.5 rounded-full" style="width: 45%"></div>
347
+ </div>
348
+ </div>
349
+ <button class="ml-3 text-gray-400 hover:text-white">
350
+ <i class="fas fa-times"></i>
351
+ </button>
352
+ </div>
353
+
354
+ <div class="flex items-center glass-card rounded-lg p-3">
355
+ <div class="w-12 h-12 rounded mr-3 bg-purple-500/10 flex items-center justify-center">
356
+ <i class="fas fa-music text-purple-500"></i>
357
+ </div>
358
+ <div class="flex-grow">
359
+ <h4 class="font-medium">Liquid Dreams.wav</h4>
360
+ <div class="w-full bg-gray-700 rounded-full h-1.5 mt-1">
361
+ <div class="bg-purple-500 h-1.5 rounded-full" style="width: 80%"></div>
362
+ </div>
363
+ </div>
364
+ <button class="ml-3 text-gray-400 hover:text-white">
365
+ <i class="fas fa-times"></i>
366
+ </button>
367
+ </div>
368
+ </div>
369
+ </div>
370
+ </div>
371
+ </div>
372
+
373
+ <!-- Search Content (Hidden) -->
374
+ <div id="search-content" class="tab-content hidden">
375
+ <div class="glass-card rounded-xl p-4 mb-6">
376
+ <div class="relative">
377
+ <input type="text" placeholder="Search for songs, artists, or albums" class="w-full bg-transparent border-0 focus:ring-0 pl-10 pr-4 py-3">
378
+ <i class="fas fa-search absolute left-3 top-3.5 text-gray-400"></i>
379
+ </div>
380
+ </div>
381
+
382
+ <h2 class="text-xl font-semibold mb-4">Browse All</h2>
383
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
384
+ <div class="glass-card rounded-xl aspect-square flex flex-col items-center justify-center p-4">
385
+ <div class="w-16 h-16 rounded-full bg-purple-500/10 flex items-center justify-center mb-3">
386
+ <i class="fas fa-compact-disc text-purple-500 text-2xl"></i>
387
+ </div>
388
+ <span class="font-medium">Albums</span>
389
+ </div>
390
+
391
+ <div class="glass-card rounded-xl aspect-square flex flex-col items-center justify-center p-4">
392
+ <div class="w-16 h-16 rounded-full bg-pink-500/10 flex items-center justify-center mb-3">
393
+ <i class="fas fa-music text-pink-500 text-2xl"></i>
394
+ </div>
395
+ <span class="font-medium">Songs</span>
396
+ </div>
397
+
398
+ <div class="glass-card rounded-xl aspect-square flex flex-col items-center justify-center p-4">
399
+ <div class="w-16 h-16 rounded-full bg-blue-500/10 flex items-center justify-center mb-3">
400
+ <i class="fas fa-users text-blue-500 text-2xl"></i>
401
+ </div>
402
+ <span class="font-medium">Artists</span>
403
+ </div>
404
+
405
+ <div class="glass-card rounded-xl aspect-square flex flex-col items-center justify-center p-4">
406
+ <div class="w-16 h-16 rounded-full bg-green-500/10 flex items-center justify-center mb-3">
407
+ <i class="fas fa-list text-green-500 text-2xl"></i>
408
+ </div>
409
+ <span class="font-medium">Playlists</span>
410
+ </div>
411
+
412
+ <div class="glass-card rounded-xl aspect-square flex flex-col items-center justify-center p-4">
413
+ <div class="w-16 h-16 rounded-full bg-yellow-500/10 flex items-center justify-center mb-3">
414
+ <i class="fas fa-tags text-yellow-500 text-2xl"></i>
415
+ </div>
416
+ <span class="font-medium">Genres</span>
417
+ </div>
418
+ </div>
419
+ </div>
420
+
421
+ <!-- Library Content (Hidden) -->
422
+ <div id="library-content" class="tab-content hidden">
423
+ <h2 class="text-xl font-semibold mb-4">Your Library</h2>
424
+
425
+ <div class="flex space-x-2 mb-6 overflow-x-auto pb-2">
426
+ <button class="px-4 py-1 rounded-full glass-card text-sm whitespace-nowrap">Playlists</button>
427
+ <button class="px-4 py-1 rounded-full glass-card text-sm whitespace-nowrap">Liked Songs</button>
428
+ <button class="px-4 py-1 rounded-full glass-card text-sm whitespace-nowrap">Albums</button>
429
+ <button class="px-4 py-1 rounded-full glass-card text-sm whitespace-nowrap">Artists</button>
430
+ <button class="px-4 py-1 rounded-full glass-card text-sm whitespace-nowrap">Downloads</button>
431
+ </div>
432
+
433
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
434
+ <div class="glass-card rounded-xl p-4 aspect-square flex flex-col">
435
+ <div class="w-full h-3/4 rounded-lg mb-3 bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center">
436
+ <i class="fas fa-heart text-white text-4xl"></i>
437
+ </div>
438
+ <h3 class="font-medium truncate">Liked Songs</h3>
439
+ <p class="text-sm text-gray-300">24 songs</p>
440
+ </div>
441
+
442
+ <div class="glass-card rounded-xl p-4 aspect-square flex flex-col">
443
+ <div class="w-full h-3/4 rounded-lg mb-3 bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center">
444
+ <i class="fas fa-headphones text-white text-4xl"></i>
445
+ </div>
446
+ <h3 class="font-medium truncate">Chill Vibes</h3>
447
+ <p class="text-sm text-gray-300">12 songs</p>
448
+ </div>
449
+
450
+ <div class="glass-card rounded-xl p-4 aspect-square flex flex-col">
451
+ <div class="w-full h-3/4 rounded-lg mb-3 bg-gradient-to-br from-green-500 to-emerald-500 flex items-center justify-center">
452
+ <i class="fas fa-running text-white text-4xl"></i>
453
+ </div>
454
+ <h3 class="font-medium truncate">Workout Mix</h3>
455
+ <p class="text-sm text-gray-300">18 songs</p>
456
+ </div>
457
+
458
+ <div class="glass-card rounded-xl p-4 aspect-square flex flex-col">
459
+ <div class="w-full h-3/4 rounded-lg mb-3 bg-gradient-to-br from-red-500 to-orange-500 flex items-center justify-center">
460
+ <i class="fas fa-moon text-white text-4xl"></i>
461
+ </div>
462
+ <h3 class="font-medium truncate">Sleep Sounds</h3>
463
+ <p class="text-sm text-gray-300">8 songs</p>
464
+ </div>
465
+
466
+ <div class="glass-card rounded-xl p-4 aspect-square flex flex-col">
467
+ <div class="w-full h-3/4 rounded-lg mb-3 bg-gradient-to-br from-yellow-500 to-amber-500 flex items-center justify-center">
468
+ <i class="fas fa-plus text-white text-4xl"></i>
469
+ </div>
470
+ <h3 class="font-medium truncate">New Playlist</h3>
471
+ <p class="text-sm text-gray-300">Create</p>
472
+ </div>
473
+ </div>
474
+ </div>
475
+
476
+ <!-- Playlist Content (Hidden) -->
477
+ <div id="playlist-content" class="tab-content hidden">
478
+ <div class="flex items-start mb-6">
479
+ <div class="w-24 h-24 sm:w-32 sm:h-32 md:w-48 md:h-48 rounded-xl glass-card overflow-hidden mr-4 md:mr-6 flex-shrink-0">
480
+ <img src="https://source.unsplash.com/random/300x300/?playlist" alt="Playlist Cover" class="w-full h-full object-cover">
481
+ </div>
482
+ <div class="flex-grow">
483
+ <p class="text-sm text-gray-300 mb-1">PLAYLIST</p>
484
+ <h1 class="text-2xl md:text-4xl font-bold mb-3">Liquid Dreams</h1>
485
+ <p class="text-gray-300 mb-4">A collection of smooth liquid glass tracks to relax and unwind</p>
486
+ <div class="flex items-center text-sm text-gray-300">
487
+ <span class="font-medium text-white">Waveform Collective</span>
488
+ <span class="mx-2">•</span>
489
+ <span>12 songs</span>
490
+ <span class="mx-2">•</span>
491
+ <span>45 min</span>
492
+ </div>
493
+ </div>
494
+ </div>
495
+
496
+ <div class="glass-card rounded-xl overflow-hidden">
497
+ <div class="p-4 border-b border-white/10 flex items-center">
498
+ <div class="w-10 flex-shrink-0 text-center text-gray-400">#</div>
499
+ <div class="flex-grow">TITLE</div>
500
+ <div class="w-24 md:w-32">WAVEFORM</div>
501
+ <div class="w-10 flex-shrink-0 text-right text-gray-400">
502
+ <i class="far fa-clock"></i>
503
+ </div>
504
+ </div>
505
+
506
+ <div class="flex items-center p-4 border-b border-white/10 hover:bg-white/5 transition-colors cursor-pointer">
507
+ <div class="w-10 flex-shrink-0 text-center text-gray-400">1</div>
508
+ <div class="flex items-center flex-grow min-w-0">
509
+ <div class="w-10 h-10 rounded mr-3 flex-shrink-0">
510
+ <img src="https://source.unsplash.com/random/300x300/?music,cover" alt="Album Cover" class="w-full h-full object-cover rounded">
511
+ </div>
512
+ <div>
513
+ <h3 class="font-medium truncate">Liquid Dreams</h3>
514
+ <p class="text-sm text-gray-300 truncate">Waveform Collective</p>
515
+ </div>
516
+ </div>
517
+ <div class="w-24 md:w-32">
518
+ <div class="waveform">
519
+ <div class="progress-bar"></div>
520
+ </div>
521
+ </div>
522
+ <div class="w-10 flex-shrink-0 text-right text-gray-400">3:42</div>
523
+ </div>
524
+
525
+ <div class="flex items-center p-4 border-b border-white/10 hover:bg-white/5 transition-colors cursor-pointer">
526
+ <div class="w-10 flex-shrink-0 text-center text-gray-400">2</div>
527
+ <div class="flex items-center flex-grow min-w-0">
528
+ <div class="w-10 h-10 rounded mr-3 flex-shrink-0">
529
+ <img src="https://source.unsplash.com/random/300x300/?album,art" alt="Album Cover" class="w-full h-full object-cover rounded">
530
+ </div>
531
+ <div>
532
+ <h3 class="font-medium truncate">Glass Beats</h3>
533
+ <p class="text-sm text-gray-300 truncate">Transparent Sounds</p>
534
+ </div>
535
+ </div>
536
+ <div class="w-24 md:w-32">
537
+ <div class="waveform">
538
+ <div class="progress-bar" style="width: 45%"></div>
539
+ </div>
540
+ </div>
541
+ <div class="w-10 flex-shrink-0 text-right text-gray-400">4:15</div>
542
+ </div>
543
+
544
+ <div class="flex items-center p-4 hover:bg-white/5 transition-colors cursor-pointer">
545
+ <div class="w-10 flex-shrink-0 text-center text-gray-400">3</div>
546
+ <div class="flex items-center flex-grow min-w-0">
547
+ <div class="w-10 h-10 rounded mr-3 flex-shrink-0">
548
+ <img src="https://source.unsplash.com/random/300x300/?vinyl,record" alt="Album Cover" class="w-full h-full object-cover rounded">
549
+ </div>
550
+ <div>
551
+ <h3 class="font-medium truncate">Fluid Motion</h3>
552
+ <p class="text-sm text-gray-300 truncate">Liquid Harmony</p>
553
+ </div>
554
+ </div>
555
+ <div class="w-24 md:w-32">
556
+ <div class="waveform">
557
+ <div class="progress-bar" style="width: 15%"></div>
558
+ </div>
559
+ </div>
560
+ <div class="w-10 flex-shrink-0 text-right text-gray-400">3:28</div>
561
+ </div>
562
+ </div>
563
+ </div>
564
+ </div>
565
+
566
+ <!-- Mini Player -->
567
+ <div class="fixed bottom-0 left-0 right-0 glass-card backdrop-blur-xl border-t border-white/10">
568
+ <div class="container mx-auto px-4 py-3">
569
+ <div class="flex items-center">
570
+ <div class="w-12 h-12 rounded mr-3 flex-shrink-0">
571
+ <img src="https://source.unsplash.com/random/300x300/?music,cover" alt="Album Cover" class="w-full h-full object-cover rounded">
572
+ </div>
573
+ <div class="flex-grow min-w-0">
574
+ <h3 class="font-medium truncate">Liquid Dreams</h3>
575
+ <p class="text-sm text-gray-300 truncate">Waveform Collective</p>
576
+ </div>
577
+ <div class="flex items-center space-x-4 ml-4">
578
+ <button class="player-controls">
579
+ <i class="fas fa-step-backward text-lg"></i>
580
+ </button>
581
+ <button class="player-controls play-btn w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center">
582
+ <i class="fas fa-play text-white"></i>
583
+ </button>
584
+ <button class="player-controls">
585
+ <i class="fas fa-step-forward text-lg"></i>
586
+ </button>
587
+ </div>
588
+ </div>
589
+
590
+ <div class="mt-2 flex items-center">
591
+ <span class="text-xs text-gray-400 w-10">1:23</span>
592
+ <div class="flex-grow mx-2">
593
+ <div class="waveform">
594
+ <div class="progress-bar" style="width: 30%"></div>
595
+ </div>
596
+ </div>
597
+ <span class="text-xs text-gray-400 w-10">3:42</span>
598
+ </div>
599
+ </div>
600
+ </div>
601
+
602
+ <!-- Full Player (Hidden) -->
603
+ <div id="full-player" class="fixed inset-0 bg-gradient-to-b from-purple-900/80 to-indigo-900/80 backdrop-blur-3xl z-50 hidden flex flex-col items-center justify-center p-6">
604
+ <button id="close-player" class="absolute top-6 right-6 w-10 h-10 rounded-full glass-card flex items-center justify-center">
605
+ <i class="fas fa-times"></i>
606
+ </button>
607
+
608
+ <div class="w-full max-w-md mb-8">
609
+ <div class="w-full aspect-square rounded-2xl overflow-hidden mb-6 glass-card">
610
+ <img src="https://source.unsplash.com/random/600x600/?music,cover" alt="Album Cover" class="w-full h-full object-cover">
611
+ </div>
612
+
613
+ <div class="text-center mb-8">
614
+ <h1 class="text-2xl font-bold mb-1">Liquid Dreams</h1>
615
+ <p class="text-gray-300">Waveform Collective</p>
616
+ </div>
617
+
618
+ <div class="mb-6">
619
+ <div class="waveform h-16 rounded-xl mb-2">
620
+ <div class="progress-bar" style="width: 30%"></div>
621
+ </div>
622
+ <div class="flex justify-between text-sm text-gray-300">
623
+ <span>1:23</span>
624
+ <span>3:42</span>
625
+ </div>
626
+ </div>
627
+
628
+ <div class="flex items-center justify-center space-x-8 mb-8">
629
+ <button class="w-10 h-10 rounded-full glass-card flex items-center justify-center">
630
+ <i class="fas fa-random"></i>
631
+ </button>
632
+ <button class="w-10 h-10 rounded-full glass-card flex items-center justify-center">
633
+ <i class="fas fa-step-backward"></i>
634
+ </button>
635
+ <button class="play-btn w-16 h-16 rounded-full bg-purple-600 flex items-center justify-center">
636
+ <i class="fas fa-play text-white text-2xl"></i>
637
+ </button>
638
+ <button class="w-10 h-10 rounded-full glass-card flex items-center justify-center">
639
+ <i class="fas fa-step-forward"></i>
640
+ </button>
641
+ <button class="w-10 h-10 rounded-full glass-card flex items-center justify-center">
642
+ <i class="fas fa-redo"></i>
643
+ </button>
644
+ </div>
645
+
646
+ <div class="flex items-center justify-between">
647
+ <button class="w-10 h-10 rounded-full glass-card flex items-center justify-center">
648
+ <i class="fas fa-heart"></i>
649
+ </button>
650
+ <button class="w-10 h-10 rounded-full glass-card flex items-center justify-center">
651
+ <i class="fas fa-download"></i>
652
+ </button>
653
+ <button class="w-10 h-10 rounded-full glass-card flex items-center justify-center">
654
+ <i class="fas fa-share-alt"></i>
655
+ </button>
656
+ <button class="w-10 h-10 rounded-full glass-card flex items-center justify-center">
657
+ <i class="fas fa-ellipsis-h"></i>
658
+ </button>
659
+ </div>
660
+ </div>
661
+ </div>
662
+
663
+ <script>
664
+ // Tab switching functionality
665
+ const tabButtons = document.querySelectorAll('.tab-btn');
666
+ const tabContents = document.querySelectorAll('.tab-content');
667
+
668
+ tabButtons.forEach(button => {
669
+ button.addEventListener('click', () => {
670
+ // Remove active class from all buttons and contents
671
+ tabButtons.forEach(btn => btn.classList.remove('active-tab'));
672
+ tabContents.forEach(content => {
673
+ content.classList.remove('active');
674
+ content.classList.add('hidden');
675
+ });
676
+
677
+ // Add active class to clicked button
678
+ button.classList.add('active-tab');
679
+
680
+ // Show corresponding content
681
+ const tabName = button.querySelector('i').className.split(' ')[1];
682
+ let contentId;
683
+
684
+ if (tabName === 'fa-home') contentId = 'home-content';
685
+ else if (tabName === 'fa-search') contentId = 'search-content';
686
+ else if (tabName === 'fa-heart') contentId = 'library-content';
687
+ else if (tabName === 'fa-list') contentId = 'playlist-content';
688
+
689
+ const content = document.getElementById(contentId);
690
+ content.classList.remove('hidden');
691
+ content.classList.add('active');
692
+ });
693
+ });
694
+
695
+ // Mini player expand to full player
696
+ const miniPlayer = document.querySelector('.fixed.bottom-0');
697
+ const fullPlayer = document.getElementById('full-player');
698
+ const closePlayer = document.getElementById('close-player');
699
+
700
+ miniPlayer.addEventListener('click', (e) => {
701
+ // Only trigger if clicking on the player background, not controls
702
+ if (e.target === miniPlayer || e.target.classList.contains('flex-grow')) {
703
+ fullPlayer.classList.remove('hidden');
704
+ fullPlayer.classList.add('flex');
705
+ document.body.style.overflow = 'hidden';
706
+ }
707
+ });
708
+
709
+ closePlayer.addEventListener('click', () => {
710
+ fullPlayer.classList.add('hidden');
711
+ fullPlayer.classList.remove('flex');
712
+ document.body.style.overflow = '';
713
+ });
714
+
715
+ // Play/pause toggle
716
+ const playButtons = document.querySelectorAll('.play-btn');
717
+
718
+ playButtons.forEach(button => {
719
+ button.addEventListener('click', (e) => {
720
+ e.stopPropagation(); // Prevent triggering mini player expand
721
+ const icon = button.querySelector('i');
722
+ if (icon.classList.contains('fa-play')) {
723
+ icon.classList.remove('fa-play');
724
+ icon.classList.add('fa-pause');
725
+ // Add actual play functionality here
726
+ } else {
727
+ icon.classList.remove('fa-pause');
728
+ icon.classList.add('fa-play');
729
+ // Add actual pause functionality here
730
+ }
731
+ });
732
+ });
733
+
734
+ // Song card play functionality
735
+ const songCards = document.querySelectorAll('.song-card');
736
+ songCards.forEach(card => {
737
+ card.addEventListener('click', (e) => {
738
+ if (!e.target.closest('.play-icon')) {
739
+ // Navigate to song details or play the song
740
+ const title = card.querySelector('h3').textContent;
741
+ const artist = card.querySelector('p').textContent;
742
+ console.log(`Playing: ${title} by ${artist}`);
743
+ }
744
+ });
745
+
746
+ const playBtn = card.querySelector('.play-icon');
747
+ if (playBtn) {
748
+ playBtn.addEventListener('click', (e) => {
749
+ e.stopPropagation();
750
+ const icon = playBtn.querySelector('i');
751
+ if (icon.classList.contains('fa-play')) {
752
+ icon.classList.remove('fa-play');
753
+ icon.classList.add('fa-pause');
754
+ } else {
755
+ icon.classList.remove('fa-pause');
756
+ icon.classList.add('fa-play');
757
+ }
758
+ });
759
+ }
760
+ });
761
+
762
+ // Ripple effect for buttons
763
+ document.addEventListener('click', function(e) {
764
+ if (e.target.closest('.glass-card, .play-btn')) {
765
+ const button = e.target.closest('.glass-card, .play-btn');
766
+ const rect = button.getBoundingClientRect();
767
+ const x = e.clientX - rect.left;
768
+ const y = e.clientY - rect.top;
769
+
770
+ const ripple = document.createElement('span');
771
+ ripple.className = 'ripple';
772
+ ripple.style.left = `${x}px`;
773
+ ripple.style.top = `${y}px`;
774
+
775
+ button.appendChild(ripple);
776
+
777
+ setTimeout(() => {
778
+ ripple.remove();
779
+ }, 600);
780
+ }
781
+ });
782
+
783
+ // Upload zone hover effect
784
+ const uploadZone = document.querySelector('.upload-zone');
785
+
786
+ uploadZone.addEventListener('dragover', (e) => {
787
+ e.preventDefault();
788
+ uploadZone.classList.add('active');
789
+ });
790
+
791
+ uploadZone.addEventListener('dragleave', () => {
792
+ uploadZone.classList.remove('active');
793
+ });
794
+
795
+ uploadZone.addEventListener('drop', (e) => {
796
+ e.preventDefault();
797
+ uploadZone.classList.remove('active');
798
+ // Handle file upload here
799
+ });
800
+ </script>
801
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Crambit/lgm" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
802
+ </html>