@howssatoshi/quantumcss 1.5.2 → 1.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/quantum.min.css +1 -4885
- package/examples/admin-panel.html +834 -0
- package/examples/analytics-dashboard.html +949 -0
- package/examples/chat-messaging.html +264 -0
- package/examples/email-template.html +697 -0
- package/examples/index.html +128 -0
- package/examples/music-streaming.html +1239 -0
- package/examples/portfolio-resume.html +653 -0
- package/examples/video-streaming.html +564 -0
- package/package.json +1 -1
- package/src/styles/quantum-components.css +961 -0
|
@@ -0,0 +1,1239 @@
|
|
|
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>Starlight Music - Stream Your Universe</title>
|
|
7
|
+
<link rel="stylesheet" href="../dist/quantum.min.css">
|
|
8
|
+
<link rel="stylesheet" href="../src/styles/quantum-components.css">
|
|
9
|
+
<script src="../src/starlight.js"></script>
|
|
10
|
+
<style>
|
|
11
|
+
/* Music App Layout */
|
|
12
|
+
.music-app {
|
|
13
|
+
display: grid;
|
|
14
|
+
grid-template-columns: 280px 1fr;
|
|
15
|
+
grid-template-rows: 1fr 100px;
|
|
16
|
+
height: 100vh;
|
|
17
|
+
background: var(--bg-primary, #08081a);
|
|
18
|
+
overflow: hidden;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* Sidebar overrides */
|
|
22
|
+
.music-sidebar {
|
|
23
|
+
background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(8, 8, 26, 0.98) 100%);
|
|
24
|
+
border-right: 1px solid rgba(255, 255, 255, 0.06);
|
|
25
|
+
padding: 1.5rem;
|
|
26
|
+
display: flex;
|
|
27
|
+
flex-direction: column;
|
|
28
|
+
overflow-y: auto;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.music-logo {
|
|
32
|
+
display: flex;
|
|
33
|
+
align-items: center;
|
|
34
|
+
gap: 0.75rem;
|
|
35
|
+
margin-bottom: 2rem;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.music-logo-icon {
|
|
39
|
+
width: 44px;
|
|
40
|
+
height: 44px;
|
|
41
|
+
background: linear-gradient(135deg, var(--color-starlight, #00d4ff), #3b82f6, #8b5cf6);
|
|
42
|
+
border-radius: 12px;
|
|
43
|
+
display: flex;
|
|
44
|
+
align-items: center;
|
|
45
|
+
justify-content: center;
|
|
46
|
+
box-shadow: 0 4px 20px rgba(0, 212, 255, 0.4);
|
|
47
|
+
animation: pulse-glow 3s ease-in-out infinite;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
@keyframes pulse-glow {
|
|
51
|
+
0%, 100% { box-shadow: 0 4px 20px rgba(0, 212, 255, 0.4); }
|
|
52
|
+
50% { box-shadow: 0 4px 30px rgba(0, 212, 255, 0.6); }
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* Create Playlist Button */
|
|
56
|
+
.create-playlist-btn {
|
|
57
|
+
display: flex;
|
|
58
|
+
align-items: center;
|
|
59
|
+
gap: 0.75rem;
|
|
60
|
+
padding: 0.875rem 1rem;
|
|
61
|
+
background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(59, 130, 246, 0.15));
|
|
62
|
+
border: 1px solid rgba(0, 212, 255, 0.2);
|
|
63
|
+
border-radius: 0.75rem;
|
|
64
|
+
color: var(--color-starlight, #00d4ff);
|
|
65
|
+
font-size: 0.875rem;
|
|
66
|
+
font-weight: 600;
|
|
67
|
+
cursor: pointer;
|
|
68
|
+
transition: all 0.3s ease;
|
|
69
|
+
margin-top: auto;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.create-playlist-btn:hover {
|
|
73
|
+
background: linear-gradient(135deg, rgba(0, 212, 255, 0.25), rgba(59, 130, 246, 0.25));
|
|
74
|
+
transform: translateY(-2px);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* Main Content */
|
|
78
|
+
.main-content {
|
|
79
|
+
overflow-y: auto;
|
|
80
|
+
padding: 2rem;
|
|
81
|
+
position: relative;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* Background Gradient */
|
|
85
|
+
.bg-gradient {
|
|
86
|
+
position: absolute;
|
|
87
|
+
top: 0;
|
|
88
|
+
left: 0;
|
|
89
|
+
right: 0;
|
|
90
|
+
height: 400px;
|
|
91
|
+
background: linear-gradient(180deg, rgba(139, 92, 246, 0.2) 0%, transparent 100%);
|
|
92
|
+
pointer-events: none;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/* Header */
|
|
96
|
+
.music-header {
|
|
97
|
+
display: flex;
|
|
98
|
+
justify-content: space-between;
|
|
99
|
+
align-items: center;
|
|
100
|
+
margin-bottom: 2rem;
|
|
101
|
+
position: relative;
|
|
102
|
+
z-index: 10;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.nav-arrows {
|
|
106
|
+
display: flex;
|
|
107
|
+
gap: 0.75rem;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.nav-arrow {
|
|
111
|
+
width: 36px;
|
|
112
|
+
height: 36px;
|
|
113
|
+
border-radius: 50%;
|
|
114
|
+
background: rgba(0, 0, 0, 0.3);
|
|
115
|
+
border: none;
|
|
116
|
+
color: var(--text-primary, #f1f5f9);
|
|
117
|
+
display: flex;
|
|
118
|
+
align-items: center;
|
|
119
|
+
justify-content: center;
|
|
120
|
+
cursor: pointer;
|
|
121
|
+
transition: all 0.2s ease;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.nav-arrow:hover {
|
|
125
|
+
background: rgba(0, 0, 0, 0.5);
|
|
126
|
+
transform: scale(1.1);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.user-menu {
|
|
130
|
+
display: flex;
|
|
131
|
+
align-items: center;
|
|
132
|
+
gap: 1rem;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.upgrade-btn {
|
|
136
|
+
padding: 0.625rem 1.25rem;
|
|
137
|
+
background: transparent;
|
|
138
|
+
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
139
|
+
border-radius: 9999px;
|
|
140
|
+
color: var(--text-primary, #f1f5f9);
|
|
141
|
+
font-size: 0.875rem;
|
|
142
|
+
font-weight: 600;
|
|
143
|
+
cursor: pointer;
|
|
144
|
+
transition: all 0.2s ease;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.upgrade-btn:hover {
|
|
148
|
+
border-color: var(--color-starlight, #00d4ff);
|
|
149
|
+
color: var(--color-starlight, #00d4ff);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/* Hero Section */
|
|
153
|
+
.hero-section {
|
|
154
|
+
position: relative;
|
|
155
|
+
z-index: 10;
|
|
156
|
+
margin-bottom: 3rem;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.hero-content {
|
|
160
|
+
display: flex;
|
|
161
|
+
gap: 2rem;
|
|
162
|
+
align-items: flex-end;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.hero-image {
|
|
166
|
+
width: 232px;
|
|
167
|
+
height: 232px;
|
|
168
|
+
border-radius: 8px;
|
|
169
|
+
overflow: hidden;
|
|
170
|
+
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
|
|
171
|
+
flex-shrink: 0;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.hero-image img {
|
|
175
|
+
width: 100%;
|
|
176
|
+
height: 100%;
|
|
177
|
+
object-fit: cover;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.hero-info {
|
|
181
|
+
flex: 1;
|
|
182
|
+
padding-bottom: 0.5rem;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.hero-type {
|
|
186
|
+
font-size: 0.875rem;
|
|
187
|
+
font-weight: 600;
|
|
188
|
+
text-transform: uppercase;
|
|
189
|
+
letter-spacing: 0.1em;
|
|
190
|
+
color: var(--text-primary, #f1f5f9);
|
|
191
|
+
margin-bottom: 0.5rem;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.hero-title {
|
|
195
|
+
font-size: 4rem;
|
|
196
|
+
font-weight: 900;
|
|
197
|
+
color: var(--text-primary, #f1f5f9);
|
|
198
|
+
margin-bottom: 1rem;
|
|
199
|
+
line-height: 1;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.hero-meta {
|
|
203
|
+
display: flex;
|
|
204
|
+
align-items: center;
|
|
205
|
+
gap: 0.5rem;
|
|
206
|
+
font-size: 0.875rem;
|
|
207
|
+
color: var(--text-secondary, #94a3b8);
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.hero-meta img {
|
|
211
|
+
width: 24px;
|
|
212
|
+
height: 24px;
|
|
213
|
+
border-radius: 50%;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.hero-meta .artist {
|
|
217
|
+
color: var(--text-primary, #f1f5f9);
|
|
218
|
+
font-weight: 600;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
/* Action Bar */
|
|
222
|
+
.action-bar {
|
|
223
|
+
display: flex;
|
|
224
|
+
align-items: center;
|
|
225
|
+
gap: 1.5rem;
|
|
226
|
+
margin-bottom: 2rem;
|
|
227
|
+
position: relative;
|
|
228
|
+
z-index: 10;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.play-btn {
|
|
232
|
+
width: 56px;
|
|
233
|
+
height: 56px;
|
|
234
|
+
border-radius: 50%;
|
|
235
|
+
background: linear-gradient(135deg, var(--color-starlight, #00d4ff), #3b82f6);
|
|
236
|
+
border: none;
|
|
237
|
+
display: flex;
|
|
238
|
+
align-items: center;
|
|
239
|
+
justify-content: center;
|
|
240
|
+
cursor: pointer;
|
|
241
|
+
transition: all 0.3s ease;
|
|
242
|
+
box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4);
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.play-btn:hover {
|
|
246
|
+
transform: scale(1.1);
|
|
247
|
+
box-shadow: 0 12px 35px rgba(0, 212, 255, 0.5);
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.play-btn svg {
|
|
251
|
+
width: 24px;
|
|
252
|
+
height: 24px;
|
|
253
|
+
color: white;
|
|
254
|
+
margin-left: 3px;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.action-icon {
|
|
258
|
+
width: 40px;
|
|
259
|
+
height: 40px;
|
|
260
|
+
border-radius: 50%;
|
|
261
|
+
background: transparent;
|
|
262
|
+
border: none;
|
|
263
|
+
color: var(--text-muted, #64748b);
|
|
264
|
+
display: flex;
|
|
265
|
+
align-items: center;
|
|
266
|
+
justify-content: center;
|
|
267
|
+
cursor: pointer;
|
|
268
|
+
transition: all 0.2s ease;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.action-icon:hover {
|
|
272
|
+
color: var(--text-primary, #f1f5f9);
|
|
273
|
+
transform: scale(1.1);
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.action-icon.liked {
|
|
277
|
+
color: #ec4899;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
/* Track List */
|
|
281
|
+
.track-list {
|
|
282
|
+
position: relative;
|
|
283
|
+
z-index: 10;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.track-header {
|
|
287
|
+
display: grid;
|
|
288
|
+
grid-template-columns: 50px 1fr 1fr 100px 60px;
|
|
289
|
+
padding: 0.75rem 1rem;
|
|
290
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
291
|
+
font-size: 0.75rem;
|
|
292
|
+
font-weight: 600;
|
|
293
|
+
text-transform: uppercase;
|
|
294
|
+
letter-spacing: 0.1em;
|
|
295
|
+
color: var(--text-muted, #64748b);
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.track-row {
|
|
299
|
+
display: grid;
|
|
300
|
+
grid-template-columns: 50px 1fr 1fr 100px 60px;
|
|
301
|
+
padding: 0.875rem 1rem;
|
|
302
|
+
border-radius: 0.5rem;
|
|
303
|
+
align-items: center;
|
|
304
|
+
cursor: pointer;
|
|
305
|
+
transition: all 0.2s ease;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.track-row:hover {
|
|
309
|
+
background: rgba(255, 255, 255, 0.05);
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
.track-row.active {
|
|
313
|
+
background: rgba(0, 212, 255, 0.1);
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.track-number {
|
|
317
|
+
font-size: 1rem;
|
|
318
|
+
color: var(--text-muted, #64748b);
|
|
319
|
+
display: flex;
|
|
320
|
+
align-items: center;
|
|
321
|
+
justify-content: center;
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
.track-row:hover .track-number span {
|
|
325
|
+
display: none;
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
.track-row:hover .track-number::after {
|
|
329
|
+
content: '';
|
|
330
|
+
width: 0;
|
|
331
|
+
height: 0;
|
|
332
|
+
border-left: 8px solid var(--text-primary, #f1f5f9);
|
|
333
|
+
border-top: 5px solid transparent;
|
|
334
|
+
border-bottom: 5px solid transparent;
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
.track-row.active .track-number {
|
|
338
|
+
color: var(--color-starlight, #00d4ff);
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
.track-info {
|
|
342
|
+
display: flex;
|
|
343
|
+
align-items: center;
|
|
344
|
+
gap: 1rem;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
.track-image {
|
|
348
|
+
width: 40px;
|
|
349
|
+
height: 40px;
|
|
350
|
+
border-radius: 4px;
|
|
351
|
+
overflow: hidden;
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
.track-image img {
|
|
355
|
+
width: 100%;
|
|
356
|
+
height: 100%;
|
|
357
|
+
object-fit: cover;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
.track-details {
|
|
361
|
+
display: flex;
|
|
362
|
+
flex-direction: column;
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
.track-title {
|
|
366
|
+
font-size: 0.9375rem;
|
|
367
|
+
font-weight: 500;
|
|
368
|
+
color: var(--text-primary, #f1f5f9);
|
|
369
|
+
margin-bottom: 0.25rem;
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
.track-row.active .track-title {
|
|
373
|
+
color: var(--color-starlight, #00d4ff);
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
.track-explicit {
|
|
377
|
+
display: inline-flex;
|
|
378
|
+
align-items: center;
|
|
379
|
+
justify-content: center;
|
|
380
|
+
width: 16px;
|
|
381
|
+
height: 16px;
|
|
382
|
+
background: var(--text-muted, #64748b);
|
|
383
|
+
border-radius: 2px;
|
|
384
|
+
font-size: 0.625rem;
|
|
385
|
+
font-weight: 700;
|
|
386
|
+
color: var(--bg-primary, #08081a);
|
|
387
|
+
margin-left: 0.5rem;
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
.track-album {
|
|
391
|
+
font-size: 0.875rem;
|
|
392
|
+
color: var(--text-secondary, #94a3b8);
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
.track-date {
|
|
396
|
+
font-size: 0.875rem;
|
|
397
|
+
color: var(--text-secondary, #94a3b8);
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
.track-duration {
|
|
401
|
+
font-size: 0.875rem;
|
|
402
|
+
color: var(--text-secondary, #94a3b8);
|
|
403
|
+
text-align: right;
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
.track-like {
|
|
407
|
+
display: flex;
|
|
408
|
+
align-items: center;
|
|
409
|
+
justify-content: center;
|
|
410
|
+
opacity: 0;
|
|
411
|
+
transition: opacity 0.2s ease;
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
.track-row:hover .track-like {
|
|
415
|
+
opacity: 1;
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
.track-like svg {
|
|
419
|
+
width: 18px;
|
|
420
|
+
height: 18px;
|
|
421
|
+
color: var(--text-muted, #64748b);
|
|
422
|
+
cursor: pointer;
|
|
423
|
+
transition: all 0.2s ease;
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
.track-like svg:hover {
|
|
427
|
+
color: #ec4899;
|
|
428
|
+
transform: scale(1.2);
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
/* Player Bar */
|
|
432
|
+
.player-bar {
|
|
433
|
+
grid-column: 1 / -1;
|
|
434
|
+
background: linear-gradient(180deg, rgba(20, 20, 35, 0.98) 0%, rgba(8, 8, 26, 0.98) 100%);
|
|
435
|
+
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
|
436
|
+
padding: 1rem 1.5rem;
|
|
437
|
+
display: grid;
|
|
438
|
+
grid-template-columns: 300px 1fr 300px;
|
|
439
|
+
align-items: center;
|
|
440
|
+
gap: 2rem;
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
.now-playing {
|
|
444
|
+
display: flex;
|
|
445
|
+
align-items: center;
|
|
446
|
+
gap: 1rem;
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
.now-playing-image {
|
|
450
|
+
width: 56px;
|
|
451
|
+
height: 56px;
|
|
452
|
+
border-radius: 4px;
|
|
453
|
+
overflow: hidden;
|
|
454
|
+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
|
455
|
+
}
|
|
456
|
+
|
|
457
|
+
.now-playing-image img {
|
|
458
|
+
width: 100%;
|
|
459
|
+
height: 100%;
|
|
460
|
+
object-fit: cover;
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
.now-playing-info {
|
|
464
|
+
display: flex;
|
|
465
|
+
flex-direction: column;
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
.now-playing-title {
|
|
469
|
+
font-size: 0.9375rem;
|
|
470
|
+
font-weight: 600;
|
|
471
|
+
color: var(--text-primary, #f1f5f9);
|
|
472
|
+
margin-bottom: 0.25rem;
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
.now-playing-artist {
|
|
476
|
+
font-size: 0.8125rem;
|
|
477
|
+
color: var(--text-secondary, #94a3b8);
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
.now-playing-like {
|
|
481
|
+
margin-left: auto;
|
|
482
|
+
color: var(--color-starlight, #00d4ff);
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
/* Player Controls */
|
|
486
|
+
.player-controls {
|
|
487
|
+
display: flex;
|
|
488
|
+
flex-direction: column;
|
|
489
|
+
align-items: center;
|
|
490
|
+
gap: 0.75rem;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
.control-buttons {
|
|
494
|
+
display: flex;
|
|
495
|
+
align-items: center;
|
|
496
|
+
gap: 1.5rem;
|
|
497
|
+
}
|
|
498
|
+
|
|
499
|
+
.control-btn {
|
|
500
|
+
background: transparent;
|
|
501
|
+
border: none;
|
|
502
|
+
color: var(--text-secondary, #94a3b8);
|
|
503
|
+
cursor: pointer;
|
|
504
|
+
transition: all 0.2s ease;
|
|
505
|
+
display: flex;
|
|
506
|
+
align-items: center;
|
|
507
|
+
justify-content: center;
|
|
508
|
+
}
|
|
509
|
+
|
|
510
|
+
.control-btn:hover {
|
|
511
|
+
color: var(--text-primary, #f1f5f9);
|
|
512
|
+
transform: scale(1.1);
|
|
513
|
+
}
|
|
514
|
+
|
|
515
|
+
.control-btn.play {
|
|
516
|
+
width: 36px;
|
|
517
|
+
height: 36px;
|
|
518
|
+
border-radius: 50%;
|
|
519
|
+
background: var(--text-primary, #f1f5f9);
|
|
520
|
+
color: var(--bg-primary, #08081a);
|
|
521
|
+
}
|
|
522
|
+
|
|
523
|
+
.control-btn.play:hover {
|
|
524
|
+
transform: scale(1.1);
|
|
525
|
+
}
|
|
526
|
+
|
|
527
|
+
.progress-bar {
|
|
528
|
+
width: 100%;
|
|
529
|
+
max-width: 600px;
|
|
530
|
+
display: flex;
|
|
531
|
+
align-items: center;
|
|
532
|
+
gap: 0.75rem;
|
|
533
|
+
}
|
|
534
|
+
|
|
535
|
+
.time {
|
|
536
|
+
font-size: 0.75rem;
|
|
537
|
+
color: var(--text-muted, #64748b);
|
|
538
|
+
min-width: 35px;
|
|
539
|
+
text-align: center;
|
|
540
|
+
}
|
|
541
|
+
|
|
542
|
+
.progress-track {
|
|
543
|
+
flex: 1;
|
|
544
|
+
height: 4px;
|
|
545
|
+
background: rgba(255, 255, 255, 0.1);
|
|
546
|
+
border-radius: 2px;
|
|
547
|
+
position: relative;
|
|
548
|
+
cursor: pointer;
|
|
549
|
+
}
|
|
550
|
+
|
|
551
|
+
.progress-fill {
|
|
552
|
+
position: absolute;
|
|
553
|
+
left: 0;
|
|
554
|
+
top: 0;
|
|
555
|
+
height: 100%;
|
|
556
|
+
width: 35%;
|
|
557
|
+
background: linear-gradient(90deg, var(--color-starlight, #00d4ff), #3b82f6);
|
|
558
|
+
border-radius: 2px;
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
.progress-handle {
|
|
562
|
+
position: absolute;
|
|
563
|
+
left: 35%;
|
|
564
|
+
top: 50%;
|
|
565
|
+
transform: translate(-50%, -50%);
|
|
566
|
+
width: 12px;
|
|
567
|
+
height: 12px;
|
|
568
|
+
background: var(--text-primary, #f1f5f9);
|
|
569
|
+
border-radius: 50%;
|
|
570
|
+
opacity: 0;
|
|
571
|
+
transition: opacity 0.2s ease;
|
|
572
|
+
}
|
|
573
|
+
|
|
574
|
+
.progress-track:hover .progress-handle {
|
|
575
|
+
opacity: 1;
|
|
576
|
+
}
|
|
577
|
+
|
|
578
|
+
/* Volume Controls */
|
|
579
|
+
.volume-controls {
|
|
580
|
+
display: flex;
|
|
581
|
+
align-items: center;
|
|
582
|
+
justify-content: flex-end;
|
|
583
|
+
gap: 0.75rem;
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
.volume-btn {
|
|
587
|
+
background: transparent;
|
|
588
|
+
border: none;
|
|
589
|
+
color: var(--text-secondary, #94a3b8);
|
|
590
|
+
cursor: pointer;
|
|
591
|
+
transition: all 0.2s ease;
|
|
592
|
+
}
|
|
593
|
+
|
|
594
|
+
.volume-btn:hover {
|
|
595
|
+
color: var(--text-primary, #f1f5f9);
|
|
596
|
+
}
|
|
597
|
+
|
|
598
|
+
.volume-slider {
|
|
599
|
+
width: 100px;
|
|
600
|
+
height: 4px;
|
|
601
|
+
background: rgba(255, 255, 255, 0.1);
|
|
602
|
+
border-radius: 2px;
|
|
603
|
+
position: relative;
|
|
604
|
+
cursor: pointer;
|
|
605
|
+
}
|
|
606
|
+
|
|
607
|
+
.volume-fill {
|
|
608
|
+
position: absolute;
|
|
609
|
+
left: 0;
|
|
610
|
+
top: 0;
|
|
611
|
+
height: 100%;
|
|
612
|
+
width: 70%;
|
|
613
|
+
background: var(--text-secondary, #94a3b8);
|
|
614
|
+
border-radius: 2px;
|
|
615
|
+
}
|
|
616
|
+
|
|
617
|
+
.volume-track:hover .volume-fill {
|
|
618
|
+
background: var(--color-starlight, #00d4ff);
|
|
619
|
+
}
|
|
620
|
+
|
|
621
|
+
/* Theme Toggle */
|
|
622
|
+
.theme-toggle-player {
|
|
623
|
+
background: transparent;
|
|
624
|
+
border: none;
|
|
625
|
+
color: var(--text-secondary, #94a3b8);
|
|
626
|
+
cursor: pointer;
|
|
627
|
+
transition: all 0.2s ease;
|
|
628
|
+
display: flex;
|
|
629
|
+
align-items: center;
|
|
630
|
+
justify-content: center;
|
|
631
|
+
}
|
|
632
|
+
|
|
633
|
+
.theme-toggle-player:hover {
|
|
634
|
+
color: var(--color-starlight, #00d4ff);
|
|
635
|
+
}
|
|
636
|
+
|
|
637
|
+
.sun-icon { display: none; }
|
|
638
|
+
body.light-mode .sun-icon { display: inline; }
|
|
639
|
+
body.light-mode .moon-icon { display: none; }
|
|
640
|
+
|
|
641
|
+
/* Light Mode */
|
|
642
|
+
body.light-mode {
|
|
643
|
+
--bg-primary: #f8fafc;
|
|
644
|
+
--text-primary: #0f172a;
|
|
645
|
+
--text-secondary: #475569;
|
|
646
|
+
--text-muted: #64748b;
|
|
647
|
+
}
|
|
648
|
+
|
|
649
|
+
body.light-mode .music-sidebar {
|
|
650
|
+
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
|
651
|
+
border-right-color: #e2e8f0;
|
|
652
|
+
}
|
|
653
|
+
|
|
654
|
+
body.light-mode .player-bar {
|
|
655
|
+
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
|
656
|
+
border-top-color: #e2e8f0;
|
|
657
|
+
}
|
|
658
|
+
|
|
659
|
+
body.light-mode .track-row:hover {
|
|
660
|
+
background: rgba(0, 0, 0, 0.03);
|
|
661
|
+
}
|
|
662
|
+
|
|
663
|
+
body.light-mode .track-row.active {
|
|
664
|
+
background: rgba(0, 212, 255, 0.08);
|
|
665
|
+
}
|
|
666
|
+
|
|
667
|
+
body.light-mode .nav-arrow {
|
|
668
|
+
background: rgba(0, 0, 0, 0.1);
|
|
669
|
+
}
|
|
670
|
+
|
|
671
|
+
body.light-mode .upgrade-btn {
|
|
672
|
+
border-color: rgba(0, 0, 0, 0.2);
|
|
673
|
+
color: var(--text-primary);
|
|
674
|
+
}
|
|
675
|
+
|
|
676
|
+
body.light-mode .control-btn.play {
|
|
677
|
+
background: var(--text-primary);
|
|
678
|
+
color: white;
|
|
679
|
+
}
|
|
680
|
+
|
|
681
|
+
/* Scrollbar */
|
|
682
|
+
::-webkit-scrollbar {
|
|
683
|
+
width: 12px;
|
|
684
|
+
}
|
|
685
|
+
|
|
686
|
+
::-webkit-scrollbar-track {
|
|
687
|
+
background: transparent;
|
|
688
|
+
}
|
|
689
|
+
|
|
690
|
+
::-webkit-scrollbar-thumb {
|
|
691
|
+
background: rgba(255, 255, 255, 0.1);
|
|
692
|
+
border-radius: 6px;
|
|
693
|
+
}
|
|
694
|
+
|
|
695
|
+
::-webkit-scrollbar-thumb:hover {
|
|
696
|
+
background: rgba(255, 255, 255, 0.2);
|
|
697
|
+
}
|
|
698
|
+
|
|
699
|
+
body.light-mode ::-webkit-scrollbar-thumb {
|
|
700
|
+
background: #cbd5e1;
|
|
701
|
+
}
|
|
702
|
+
|
|
703
|
+
/* Responsive */
|
|
704
|
+
@media (max-width: 1024px) {
|
|
705
|
+
.music-app {
|
|
706
|
+
grid-template-columns: 80px 1fr;
|
|
707
|
+
}
|
|
708
|
+
|
|
709
|
+
.music-sidebar {
|
|
710
|
+
padding: 1rem;
|
|
711
|
+
}
|
|
712
|
+
|
|
713
|
+
.music-logo span,
|
|
714
|
+
.nav-title,
|
|
715
|
+
.nav-item span,
|
|
716
|
+
.create-playlist-btn span {
|
|
717
|
+
display: none;
|
|
718
|
+
}
|
|
719
|
+
|
|
720
|
+
.music-app .nav-item {
|
|
721
|
+
justify-content: center;
|
|
722
|
+
padding: 0.75rem;
|
|
723
|
+
}
|
|
724
|
+
|
|
725
|
+
.hero-title {
|
|
726
|
+
font-size: 2.5rem;
|
|
727
|
+
}
|
|
728
|
+
|
|
729
|
+
.hero-image {
|
|
730
|
+
width: 160px;
|
|
731
|
+
height: 160px;
|
|
732
|
+
}
|
|
733
|
+
|
|
734
|
+
.player-bar {
|
|
735
|
+
grid-template-columns: 200px 1fr 200px;
|
|
736
|
+
}
|
|
737
|
+
}
|
|
738
|
+
|
|
739
|
+
@media (max-width: 768px) {
|
|
740
|
+
.music-app {
|
|
741
|
+
grid-template-columns: 1fr;
|
|
742
|
+
grid-template-rows: 1fr auto 80px;
|
|
743
|
+
}
|
|
744
|
+
|
|
745
|
+
.music-sidebar {
|
|
746
|
+
display: none;
|
|
747
|
+
}
|
|
748
|
+
|
|
749
|
+
.main-content {
|
|
750
|
+
padding: 1rem;
|
|
751
|
+
}
|
|
752
|
+
|
|
753
|
+
.hero-content {
|
|
754
|
+
flex-direction: column;
|
|
755
|
+
align-items: center;
|
|
756
|
+
text-align: center;
|
|
757
|
+
}
|
|
758
|
+
|
|
759
|
+
.hero-title {
|
|
760
|
+
font-size: 2rem;
|
|
761
|
+
}
|
|
762
|
+
|
|
763
|
+
.track-header,
|
|
764
|
+
.track-album,
|
|
765
|
+
.track-date {
|
|
766
|
+
display: none;
|
|
767
|
+
}
|
|
768
|
+
|
|
769
|
+
.track-row {
|
|
770
|
+
grid-template-columns: 40px 1fr 60px 40px;
|
|
771
|
+
}
|
|
772
|
+
|
|
773
|
+
.player-bar {
|
|
774
|
+
grid-template-columns: 1fr;
|
|
775
|
+
padding: 0.75rem;
|
|
776
|
+
gap: 0.5rem;
|
|
777
|
+
}
|
|
778
|
+
|
|
779
|
+
.now-playing {
|
|
780
|
+
justify-content: center;
|
|
781
|
+
}
|
|
782
|
+
|
|
783
|
+
.volume-controls {
|
|
784
|
+
display: none;
|
|
785
|
+
}
|
|
786
|
+
}
|
|
787
|
+
|
|
788
|
+
/* Animations */
|
|
789
|
+
@keyframes slideIn {
|
|
790
|
+
from { opacity: 0; transform: translateY(20px); }
|
|
791
|
+
to { opacity: 1; transform: translateY(0); }
|
|
792
|
+
}
|
|
793
|
+
|
|
794
|
+
.track-row {
|
|
795
|
+
animation: slideIn 0.3s ease-out forwards;
|
|
796
|
+
}
|
|
797
|
+
|
|
798
|
+
.track-row:nth-child(1) { animation-delay: 0.05s; }
|
|
799
|
+
.track-row:nth-child(2) { animation-delay: 0.1s; }
|
|
800
|
+
.track-row:nth-child(3) { animation-delay: 0.15s; }
|
|
801
|
+
.track-row:nth-child(4) { animation-delay: 0.2s; }
|
|
802
|
+
.track-row:nth-child(5) { animation-delay: 0.25s; }
|
|
803
|
+
.track-row:nth-child(6) { animation-delay: 0.3s; }
|
|
804
|
+
</style>
|
|
805
|
+
</head>
|
|
806
|
+
<body>
|
|
807
|
+
<div class="music-app">
|
|
808
|
+
<!-- Sidebar -->
|
|
809
|
+
<aside class="music-sidebar">
|
|
810
|
+
<div class="music-logo">
|
|
811
|
+
<div class="music-logo-icon">
|
|
812
|
+
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
|
|
813
|
+
<path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
|
|
814
|
+
</svg>
|
|
815
|
+
</div>
|
|
816
|
+
<span class="text-xl font-bold text-gradient-starlight">Starlight</span>
|
|
817
|
+
</div>
|
|
818
|
+
|
|
819
|
+
<div class="nav-section">
|
|
820
|
+
<nav>
|
|
821
|
+
<button class="nav-item active">
|
|
822
|
+
<svg fill="currentColor" viewBox="0 0 24 24">
|
|
823
|
+
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
|
|
824
|
+
</svg>
|
|
825
|
+
<span>Home</span>
|
|
826
|
+
</button>
|
|
827
|
+
<button class="nav-item">
|
|
828
|
+
<svg fill="currentColor" viewBox="0 0 24 24">
|
|
829
|
+
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
|
|
830
|
+
</svg>
|
|
831
|
+
<span>Search</span>
|
|
832
|
+
</button>
|
|
833
|
+
<button class="nav-item">
|
|
834
|
+
<svg fill="currentColor" viewBox="0 0 24 24">
|
|
835
|
+
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
|
836
|
+
</svg>
|
|
837
|
+
<span>Your Library</span>
|
|
838
|
+
</button>
|
|
839
|
+
</nav>
|
|
840
|
+
</div>
|
|
841
|
+
|
|
842
|
+
<div class="nav-section">
|
|
843
|
+
<div class="nav-title">Playlists</div>
|
|
844
|
+
<nav>
|
|
845
|
+
<div class="nav-item">
|
|
846
|
+
<svg fill="currentColor" viewBox="0 0 24 24">
|
|
847
|
+
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
|
|
848
|
+
</svg>
|
|
849
|
+
<span>Create Playlist</span>
|
|
850
|
+
</div>
|
|
851
|
+
<div class="nav-item">
|
|
852
|
+
<svg fill="currentColor" viewBox="0 0 24 24" style="color: #ec4899;">
|
|
853
|
+
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
|
|
854
|
+
</svg>
|
|
855
|
+
<span>Liked Songs</span>
|
|
856
|
+
</div>
|
|
857
|
+
</nav>
|
|
858
|
+
</div>
|
|
859
|
+
|
|
860
|
+
<div class="nav-section" style="margin-top: 1rem;">
|
|
861
|
+
<div class="nav-item">
|
|
862
|
+
<span>Cosmic Vibes</span>
|
|
863
|
+
</div>
|
|
864
|
+
<div class="nav-item">
|
|
865
|
+
<span>Deep Focus</span>
|
|
866
|
+
</div>
|
|
867
|
+
<div class="nav-item">
|
|
868
|
+
<span>Starlight Lounge</span>
|
|
869
|
+
</div>
|
|
870
|
+
<div class="nav-item">
|
|
871
|
+
<span>Nebula Nights</span>
|
|
872
|
+
</div>
|
|
873
|
+
<div class="nav-item">
|
|
874
|
+
<span>Quantum Beats</span>
|
|
875
|
+
</div>
|
|
876
|
+
<div class="nav-item">
|
|
877
|
+
<span>Galaxy Groove</span>
|
|
878
|
+
</div>
|
|
879
|
+
</div>
|
|
880
|
+
|
|
881
|
+
<button class="create-playlist-btn">
|
|
882
|
+
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
883
|
+
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
|
|
884
|
+
</svg>
|
|
885
|
+
<span>Create New Playlist</span>
|
|
886
|
+
</button>
|
|
887
|
+
</aside>
|
|
888
|
+
|
|
889
|
+
<!-- Main Content -->
|
|
890
|
+
<main class="main-content">
|
|
891
|
+
<div class="bg-gradient"></div>
|
|
892
|
+
|
|
893
|
+
<!-- Header -->
|
|
894
|
+
<header class="music-header">
|
|
895
|
+
<div class="nav-arrows">
|
|
896
|
+
<button class="nav-arrow">
|
|
897
|
+
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
898
|
+
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
|
|
899
|
+
</svg>
|
|
900
|
+
</button>
|
|
901
|
+
<button class="nav-arrow">
|
|
902
|
+
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
903
|
+
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
|
|
904
|
+
</svg>
|
|
905
|
+
</button>
|
|
906
|
+
</div>
|
|
907
|
+
<div class="user-menu">
|
|
908
|
+
<button class="upgrade-btn">Upgrade to Premium</button>
|
|
909
|
+
<div class="avatar avatar-sm">JD</div>
|
|
910
|
+
</div>
|
|
911
|
+
</header>
|
|
912
|
+
|
|
913
|
+
<!-- Hero Section -->
|
|
914
|
+
<section class="hero-section">
|
|
915
|
+
<div class="hero-content">
|
|
916
|
+
<div class="hero-image">
|
|
917
|
+
<img src="https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=400&h=400&fit=crop" alt="Album Cover">
|
|
918
|
+
</div>
|
|
919
|
+
<div class="hero-info">
|
|
920
|
+
<div class="hero-type">Playlist</div>
|
|
921
|
+
<h1 class="hero-title">Cosmic Vibes</h1>
|
|
922
|
+
<div class="hero-meta">
|
|
923
|
+
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=50&h=50&fit=crop" alt="Creator">
|
|
924
|
+
<span class="artist">Starlight Music</span>
|
|
925
|
+
<span>•</span>
|
|
926
|
+
<span>2,847,392 likes</span>
|
|
927
|
+
<span>•</span>
|
|
928
|
+
<span>50 songs, 3 hr 25 min</span>
|
|
929
|
+
</div>
|
|
930
|
+
</div>
|
|
931
|
+
</div>
|
|
932
|
+
</section>
|
|
933
|
+
|
|
934
|
+
<!-- Action Bar -->
|
|
935
|
+
<div class="action-bar">
|
|
936
|
+
<button class="play-btn">
|
|
937
|
+
<svg fill="currentColor" viewBox="0 0 24 24">
|
|
938
|
+
<path d="M8 5v14l11-7z"/>
|
|
939
|
+
</svg>
|
|
940
|
+
</button>
|
|
941
|
+
<button class="action-icon liked">
|
|
942
|
+
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
|
|
943
|
+
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
|
|
944
|
+
</svg>
|
|
945
|
+
</button>
|
|
946
|
+
<button class="action-icon">
|
|
947
|
+
<svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24">
|
|
948
|
+
<path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
|
|
949
|
+
</svg>
|
|
950
|
+
</button>
|
|
951
|
+
</div>
|
|
952
|
+
|
|
953
|
+
<!-- Track List -->
|
|
954
|
+
<div class="track-list">
|
|
955
|
+
<div class="track-header">
|
|
956
|
+
<div>#</div>
|
|
957
|
+
<div>Title</div>
|
|
958
|
+
<div>Album</div>
|
|
959
|
+
<div>Date added</div>
|
|
960
|
+
<div></div>
|
|
961
|
+
</div>
|
|
962
|
+
|
|
963
|
+
<div class="track-row active">
|
|
964
|
+
<div class="track-number">
|
|
965
|
+
<span>1</span>
|
|
966
|
+
</div>
|
|
967
|
+
<div class="track-info">
|
|
968
|
+
<div class="track-image">
|
|
969
|
+
<img src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=100&h=100&fit=crop" alt="Track">
|
|
970
|
+
</div>
|
|
971
|
+
<div class="track-details">
|
|
972
|
+
<div class="track-title">
|
|
973
|
+
Starlight Dreams
|
|
974
|
+
<span class="track-explicit">E</span>
|
|
975
|
+
</div>
|
|
976
|
+
<div style="font-size: 0.875rem; color: var(--text-secondary, #94a3b8);">Cosmic Collective</div>
|
|
977
|
+
</div>
|
|
978
|
+
</div>
|
|
979
|
+
<div class="track-album">Nebula Nights</div>
|
|
980
|
+
<div class="track-date">2 days ago</div>
|
|
981
|
+
<div style="display: flex; align-items: center; justify-content: flex-end; gap: 1rem;">
|
|
982
|
+
<div class="track-like">
|
|
983
|
+
<svg fill="currentColor" viewBox="0 0 24 24">
|
|
984
|
+
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
|
|
985
|
+
</svg>
|
|
986
|
+
</div>
|
|
987
|
+
<div class="track-duration">3:45</div>
|
|
988
|
+
</div>
|
|
989
|
+
</div>
|
|
990
|
+
|
|
991
|
+
<div class="track-row">
|
|
992
|
+
<div class="track-number">
|
|
993
|
+
<span>2</span>
|
|
994
|
+
</div>
|
|
995
|
+
<div class="track-info">
|
|
996
|
+
<div class="track-image">
|
|
997
|
+
<img src="https://images.unsplash.com/photo-1514525253161-7a46d19cd819?w=100&h=100&fit=crop" alt="Track">
|
|
998
|
+
</div>
|
|
999
|
+
<div class="track-details">
|
|
1000
|
+
<div class="track-title">Quantum Leap</div>
|
|
1001
|
+
<div style="font-size: 0.875rem; color: var(--text-secondary, #94a3b8);">The Nebulas</div>
|
|
1002
|
+
</div>
|
|
1003
|
+
</div>
|
|
1004
|
+
<div class="track-album">Galactic Journey</div>
|
|
1005
|
+
<div class="track-date">5 days ago</div>
|
|
1006
|
+
<div style="display: flex; align-items: center; justify-content: flex-end; gap: 1rem;">
|
|
1007
|
+
<div class="track-like">
|
|
1008
|
+
<svg fill="currentColor" viewBox="0 0 24 24">
|
|
1009
|
+
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
|
|
1010
|
+
</svg>
|
|
1011
|
+
</div>
|
|
1012
|
+
<div class="track-duration">4:12</div>
|
|
1013
|
+
</div>
|
|
1014
|
+
</div>
|
|
1015
|
+
|
|
1016
|
+
<div class="track-row">
|
|
1017
|
+
<div class="track-number">
|
|
1018
|
+
<span>3</span>
|
|
1019
|
+
</div>
|
|
1020
|
+
<div class="track-info">
|
|
1021
|
+
<div class="track-image">
|
|
1022
|
+
<img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=100&h=100&fit=crop" alt="Track">
|
|
1023
|
+
</div>
|
|
1024
|
+
<div class="track-details">
|
|
1025
|
+
<div class="track-title">
|
|
1026
|
+
Midnight in Orbit
|
|
1027
|
+
<span class="track-explicit">E</span>
|
|
1028
|
+
</div>
|
|
1029
|
+
<div style="font-size: 0.875rem; color: var(--text-secondary, #94a3b8);">Lunar Echoes</div>
|
|
1030
|
+
</div>
|
|
1031
|
+
</div>
|
|
1032
|
+
<div class="track-album">Space Cadet</div>
|
|
1033
|
+
<div class="track-date">1 week ago</div>
|
|
1034
|
+
<div style="display: flex; align-items: center; justify-content: flex-end; gap: 1rem;">
|
|
1035
|
+
<div class="track-like">
|
|
1036
|
+
<svg fill="currentColor" viewBox="0 0 24 24">
|
|
1037
|
+
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
|
|
1038
|
+
</svg>
|
|
1039
|
+
</div>
|
|
1040
|
+
<div class="track-duration">3:28</div>
|
|
1041
|
+
</div>
|
|
1042
|
+
</div>
|
|
1043
|
+
|
|
1044
|
+
<div class="track-row">
|
|
1045
|
+
<div class="track-number">
|
|
1046
|
+
<span>4</span>
|
|
1047
|
+
</div>
|
|
1048
|
+
<div class="track-info">
|
|
1049
|
+
<div class="track-image">
|
|
1050
|
+
<img src="https://images.unsplash.com/photo-1511379938547-c1f69419868d?w=100&h=100&fit=crop" alt="Track">
|
|
1051
|
+
</div>
|
|
1052
|
+
<div class="track-details">
|
|
1053
|
+
<div class="track-title">Solar Flare</div>
|
|
1054
|
+
<div style="font-size: 0.875rem; color: var(--text-secondary, #94a3b8);">Stellar Drift</div>
|
|
1055
|
+
</div>
|
|
1056
|
+
</div>
|
|
1057
|
+
<div class="track-album">Sun Sessions</div>
|
|
1058
|
+
<div class="track-date">2 weeks ago</div>
|
|
1059
|
+
<div style="display: flex; align-items: center; justify-content: flex-end; gap: 1rem;">
|
|
1060
|
+
<div class="track-like">
|
|
1061
|
+
<svg fill="currentColor" viewBox="0 0 24 24">
|
|
1062
|
+
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
|
|
1063
|
+
</svg>
|
|
1064
|
+
</div>
|
|
1065
|
+
<div class="track-duration">3:56</div>
|
|
1066
|
+
</div>
|
|
1067
|
+
</div>
|
|
1068
|
+
|
|
1069
|
+
<div class="track-row">
|
|
1070
|
+
<div class="track-number">
|
|
1071
|
+
<span>5</span>
|
|
1072
|
+
</div>
|
|
1073
|
+
<div class="track-info">
|
|
1074
|
+
<div class="track-image">
|
|
1075
|
+
<img src="https://images.unsplash.com/photo-1459749411175-04bf5292ceea?w=100&h=100&fit=crop" alt="Track">
|
|
1076
|
+
</div>
|
|
1077
|
+
<div class="track-details">
|
|
1078
|
+
<div class="track-title">Aurora Borealis</div>
|
|
1079
|
+
<div style="font-size: 0.875rem; color: var(--text-secondary, #94a3b8);">Northern Lights</div>
|
|
1080
|
+
</div>
|
|
1081
|
+
</div>
|
|
1082
|
+
<div class="track-album">Polaris</div>
|
|
1083
|
+
<div class="track-date">3 weeks ago</div>
|
|
1084
|
+
<div style="display: flex; align-items: center; justify-content: flex-end; gap: 1rem;">
|
|
1085
|
+
<div class="track-like">
|
|
1086
|
+
<svg fill="currentColor" viewBox="0 0 24 24">
|
|
1087
|
+
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
|
|
1088
|
+
</svg>
|
|
1089
|
+
</div>
|
|
1090
|
+
<div class="track-duration">4:33</div>
|
|
1091
|
+
</div>
|
|
1092
|
+
</div>
|
|
1093
|
+
|
|
1094
|
+
<div class="track-row">
|
|
1095
|
+
<div class="track-number">
|
|
1096
|
+
<span>6</span>
|
|
1097
|
+
</div>
|
|
1098
|
+
<div class="track-info">
|
|
1099
|
+
<div class="track-image">
|
|
1100
|
+
<img src="https://images.unsplash.com/photo-1506157786151-b8491531f063?w=100&h=100&fit=crop" alt="Track">
|
|
1101
|
+
</div>
|
|
1102
|
+
<div class="track-details">
|
|
1103
|
+
<div class="track-title">
|
|
1104
|
+
Black Hole Sun
|
|
1105
|
+
<span class="track-explicit">E</span>
|
|
1106
|
+
</div>
|
|
1107
|
+
<div style="font-size: 0.875rem; color: var(--text-secondary, #94a3b8);">Event Horizon</div>
|
|
1108
|
+
</div>
|
|
1109
|
+
</div>
|
|
1110
|
+
<div class="track-album">Singularity</div>
|
|
1111
|
+
<div class="track-date">1 month ago</div>
|
|
1112
|
+
<div style="display: flex; align-items: center; justify-content: flex-end; gap: 1rem;">
|
|
1113
|
+
<div class="track-like">
|
|
1114
|
+
<svg fill="currentColor" viewBox="0 0 24 24">
|
|
1115
|
+
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
|
|
1116
|
+
</svg>
|
|
1117
|
+
</div>
|
|
1118
|
+
<div class="track-duration">5:01</div>
|
|
1119
|
+
</div>
|
|
1120
|
+
</div>
|
|
1121
|
+
</div>
|
|
1122
|
+
</main>
|
|
1123
|
+
|
|
1124
|
+
<!-- Player Bar -->
|
|
1125
|
+
<div class="player-bar">
|
|
1126
|
+
<!-- Now Playing -->
|
|
1127
|
+
<div class="now-playing">
|
|
1128
|
+
<div class="now-playing-image">
|
|
1129
|
+
<img src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=100&h=100&fit=crop" alt="Now Playing">
|
|
1130
|
+
</div>
|
|
1131
|
+
<div class="now-playing-info">
|
|
1132
|
+
<div class="now-playing-title">Starlight Dreams</div>
|
|
1133
|
+
<div class="now-playing-artist">Cosmic Collective</div>
|
|
1134
|
+
</div>
|
|
1135
|
+
<div class="now-playing-like">
|
|
1136
|
+
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
1137
|
+
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
|
|
1138
|
+
</svg>
|
|
1139
|
+
</div>
|
|
1140
|
+
</div>
|
|
1141
|
+
|
|
1142
|
+
<!-- Player Controls -->
|
|
1143
|
+
<div class="player-controls">
|
|
1144
|
+
<div class="control-buttons">
|
|
1145
|
+
<button class="control-btn">
|
|
1146
|
+
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
1147
|
+
<path d="M7 6v12l10-6z"/>
|
|
1148
|
+
</svg>
|
|
1149
|
+
</button>
|
|
1150
|
+
<button class="control-btn">
|
|
1151
|
+
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
1152
|
+
<path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/>
|
|
1153
|
+
</svg>
|
|
1154
|
+
</button>
|
|
1155
|
+
<button class="control-btn play">
|
|
1156
|
+
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
1157
|
+
<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
|
|
1158
|
+
</svg>
|
|
1159
|
+
</button>
|
|
1160
|
+
<button class="control-btn">
|
|
1161
|
+
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
1162
|
+
<path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
|
|
1163
|
+
</svg>
|
|
1164
|
+
</button>
|
|
1165
|
+
<button class="control-btn">
|
|
1166
|
+
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
1167
|
+
<path d="M7 6v12l10-6z"/>
|
|
1168
|
+
</svg>
|
|
1169
|
+
</button>
|
|
1170
|
+
</div>
|
|
1171
|
+
<div class="progress-bar">
|
|
1172
|
+
<span class="time">1:24</span>
|
|
1173
|
+
<div class="progress-track">
|
|
1174
|
+
<div class="progress-fill"></div>
|
|
1175
|
+
<div class="progress-handle"></div>
|
|
1176
|
+
</div>
|
|
1177
|
+
<span class="time">3:45</span>
|
|
1178
|
+
</div>
|
|
1179
|
+
</div>
|
|
1180
|
+
|
|
1181
|
+
<!-- Volume Controls -->
|
|
1182
|
+
<div class="volume-controls">
|
|
1183
|
+
<button class="control-btn">
|
|
1184
|
+
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
1185
|
+
<path d="M15 6H3v2h12V6zm0 4H3v2h12v-2zM3 16h8v-2H3v2zM17 6v8.18c-.31-.11-.65-.18-1-.18-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3V8h3V6h-5z"/>
|
|
1186
|
+
</svg>
|
|
1187
|
+
</button>
|
|
1188
|
+
<button class="control-btn">
|
|
1189
|
+
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
1190
|
+
<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.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
|
|
1191
|
+
</svg>
|
|
1192
|
+
</button>
|
|
1193
|
+
<div class="volume-slider">
|
|
1194
|
+
<div class="volume-fill"></div>
|
|
1195
|
+
</div>
|
|
1196
|
+
<button class="theme-toggle-player" onclick="toggleTheme()">
|
|
1197
|
+
<svg class="sun-icon w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
1198
|
+
<path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/>
|
|
1199
|
+
</svg>
|
|
1200
|
+
<svg class="moon-icon w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
1201
|
+
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/>
|
|
1202
|
+
</svg>
|
|
1203
|
+
</button>
|
|
1204
|
+
</div>
|
|
1205
|
+
</div>
|
|
1206
|
+
</div>
|
|
1207
|
+
|
|
1208
|
+
<script>
|
|
1209
|
+
function toggleTheme() {
|
|
1210
|
+
document.body.classList.toggle('light-mode');
|
|
1211
|
+
localStorage.setItem('theme', document.body.classList.contains('light-mode') ? 'light' : 'dark');
|
|
1212
|
+
}
|
|
1213
|
+
|
|
1214
|
+
const savedTheme = localStorage.getItem('theme');
|
|
1215
|
+
if (savedTheme === 'light') {
|
|
1216
|
+
document.body.classList.add('light-mode');
|
|
1217
|
+
}
|
|
1218
|
+
|
|
1219
|
+
// Track row click handler
|
|
1220
|
+
document.querySelectorAll('.track-row').forEach(row => {
|
|
1221
|
+
row.addEventListener('click', function() {
|
|
1222
|
+
document.querySelectorAll('.track-row').forEach(r => r.classList.remove('active'));
|
|
1223
|
+
this.classList.add('active');
|
|
1224
|
+
});
|
|
1225
|
+
});
|
|
1226
|
+
|
|
1227
|
+
// Play button toggle
|
|
1228
|
+
const playBtn = document.querySelector('.control-btn.play');
|
|
1229
|
+
let isPlaying = true;
|
|
1230
|
+
|
|
1231
|
+
playBtn.addEventListener('click', function() {
|
|
1232
|
+
isPlaying = !isPlaying;
|
|
1233
|
+
this.innerHTML = isPlaying
|
|
1234
|
+
? '<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>'
|
|
1235
|
+
: '<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>';
|
|
1236
|
+
});
|
|
1237
|
+
</script>
|
|
1238
|
+
</body>
|
|
1239
|
+
</html>
|