@howssatoshi/quantumcss 1.8.0 → 1.11.0
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/README.md +11 -10
- package/dist/quantum.min.css +10 -1
- package/examples/admin-panel.html +317 -600
- package/examples/analytics-dashboard.html +136 -299
- package/examples/blog.css +297 -0
- package/examples/blog.html +216 -0
- package/examples/chat-messaging.html +43 -70
- package/examples/email-client.css +582 -0
- package/examples/email-client.html +432 -0
- package/examples/gaming-portal.css +352 -0
- package/examples/gaming-portal.html +239 -0
- package/examples/images/eric.png +0 -0
- package/examples/index.html +342 -259
- package/examples/kitchen-sink.html +332 -94
- package/examples/music-streaming.html +32 -91
- package/examples/news.html +199 -0
- package/examples/nova-shop.css +984 -0
- package/examples/portfolio.html +235 -0
- package/examples/shopping.html +812 -0
- package/examples/starlight.html +11 -9
- package/examples/task.md +12 -0
- package/examples/travel.html +514 -0
- package/examples/video-streaming.html +310 -92
- package/package.json +9 -3
- package/src/cli.js +5 -5
- package/src/defaults.js +19 -16
- package/src/generator.js +12 -3
- package/src/starlight.js +20 -15
- package/src/styles/quantum-animations.css +13 -13
- package/src/styles/quantum-base.css +110 -58
- package/src/styles/quantum-components.css +2379 -349
- package/src/styles/quantum-icons.css +345 -0
- package/src/styles/starlight.css +2702 -1054
- package/dist/index.html +0 -232
- package/dist/quantum.css +0 -2374
- package/examples/blog-template.html +0 -287
- package/examples/email-template.html +0 -712
- package/examples/gaming-template.html +0 -340
- package/examples/gradient-test.html +0 -124
- package/examples/news-template.html +0 -317
- package/examples/portfolio-resume.html +0 -647
- package/examples/shopping/images/headset.jpg +0 -0
- package/examples/shopping/images/sneakers.jpg +0 -0
- package/examples/shopping/images/windbreaker.jpg +0 -0
- package/examples/shopping/index.html +0 -338
- package/examples/theme-test.html +0 -159
- package/examples/travel/index.html +0 -275
- package/examples/verify_fixes.html +0 -52
- package/examples/verify_presets.html +0 -32
|
@@ -6,26 +6,94 @@
|
|
|
6
6
|
<title>Starlight Video - Watch</title>
|
|
7
7
|
<link rel="stylesheet" href="../dist/quantum.min.css">
|
|
8
8
|
<link rel="stylesheet" href="../src/styles/quantum-components.css">
|
|
9
|
+
<link rel="stylesheet" href="../src/styles/quantum-icons.css">
|
|
9
10
|
<script src="../src/starlight.js"></script>
|
|
10
11
|
<style>
|
|
11
12
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
12
13
|
body {
|
|
13
|
-
background: var(--bg-primary, #
|
|
14
|
+
background: var(--bg-primary, #050510);
|
|
15
|
+
background-image:
|
|
16
|
+
radial-gradient(ellipse at 20% 30%, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
|
|
17
|
+
radial-gradient(ellipse at 80% 70%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
|
|
18
|
+
radial-gradient(circle at 50% 50%, rgba(15, 23, 42, 1) 0%, #050510 100%);
|
|
14
19
|
color: var(--text-primary, #f1f5f9);
|
|
15
20
|
font-family: 'Inter', system-ui, sans-serif;
|
|
21
|
+
min-height: 100vh;
|
|
16
22
|
}
|
|
17
23
|
|
|
18
|
-
|
|
19
|
-
|
|
24
|
+
.stars {
|
|
25
|
+
position: fixed;
|
|
26
|
+
inset: 0;
|
|
27
|
+
pointer-events: none;
|
|
28
|
+
overflow: hidden;
|
|
29
|
+
z-index: 0;
|
|
30
|
+
}
|
|
31
|
+
.stars::before,
|
|
32
|
+
.stars::after {
|
|
33
|
+
content: '';
|
|
34
|
+
position: absolute;
|
|
35
|
+
width: 2px;
|
|
36
|
+
height: 2px;
|
|
37
|
+
background: white;
|
|
38
|
+
border-radius: 50%;
|
|
39
|
+
box-shadow:
|
|
40
|
+
100px 50px 0 rgba(255,255,255,0.3),
|
|
41
|
+
200px 150px 0 rgba(255,255,255,0.2),
|
|
42
|
+
400px 80px 0 rgba(255,255,255,0.25),
|
|
43
|
+
600px 200px 0 rgba(255,255,255,0.2),
|
|
44
|
+
800px 100px 0 rgba(255,255,255,0.3),
|
|
45
|
+
150px 300px 0 rgba(255,255,255,0.2),
|
|
46
|
+
350px 350px 0 rgba(255,255,255,0.15),
|
|
47
|
+
550px 400px 0 rgba(255,255,255,0.25),
|
|
48
|
+
750px 450px 0 rgba(255,255,255,0.2),
|
|
49
|
+
50px 500px 0 rgba(255,255,255,0.3),
|
|
50
|
+
250px 550px 0 rgba(255,255,255,0.15),
|
|
51
|
+
450px 600px 0 rgba(255,255,255,0.25),
|
|
52
|
+
650px 650px 0 rgba(255,255,255,0.2),
|
|
53
|
+
850px 700px 0 rgba(255,255,255,0.3),
|
|
54
|
+
900px 250px 0 rgba(255,255,255,0.2),
|
|
55
|
+
700px 300px 0 rgba(255,255,255,0.15);
|
|
56
|
+
animation: twinkle 4s ease-in-out infinite;
|
|
57
|
+
}
|
|
58
|
+
.stars::after {
|
|
59
|
+
left: 50px;
|
|
60
|
+
animation-delay: 2s;
|
|
61
|
+
box-shadow:
|
|
62
|
+
80px 100px 0 rgba(255,255,255,0.2),
|
|
63
|
+
180px 200px 0 rgba(255,255,255,0.3),
|
|
64
|
+
320px 120px 0 rgba(255,255,255,0.2),
|
|
65
|
+
520px 280px 0 rgba(255,255,255,0.25),
|
|
66
|
+
720px 180px 0 rgba(255,255,255,0.2),
|
|
67
|
+
920px 380px 0 rgba(255,255,255,0.3),
|
|
68
|
+
120px 420px 0 rgba(255,255,255,0.2),
|
|
69
|
+
380px 480px 0 rgba(255,255,255,0.25),
|
|
70
|
+
580px 520px 0 rgba(255,255,255,0.15),
|
|
71
|
+
780px 580px 0 rgba(255,255,255,0.2),
|
|
72
|
+
980px 620px 0 rgba(255,255,255,0.3);
|
|
73
|
+
}
|
|
74
|
+
@keyframes twinkle {
|
|
75
|
+
0%, 100% { opacity: 0.5; }
|
|
76
|
+
50% { opacity: 1; }
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.video-app {
|
|
80
|
+
display: grid;
|
|
81
|
+
grid-template-rows: auto 1fr;
|
|
82
|
+
height: 100vh;
|
|
83
|
+
overflow: hidden;
|
|
84
|
+
position: relative;
|
|
85
|
+
z-index: 1;
|
|
86
|
+
}
|
|
20
87
|
|
|
21
|
-
/* Header */
|
|
22
88
|
header {
|
|
23
89
|
display: flex;
|
|
24
90
|
align-items: center;
|
|
25
91
|
justify-content: space-between;
|
|
26
92
|
padding: 0.75rem 1.5rem;
|
|
27
|
-
background: rgba(
|
|
28
|
-
|
|
93
|
+
background: rgba(15, 23, 42, 0.8);
|
|
94
|
+
backdrop-filter: blur(16px);
|
|
95
|
+
-webkit-backdrop-filter: blur(16px);
|
|
96
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
29
97
|
}
|
|
30
98
|
.logo {
|
|
31
99
|
display: flex;
|
|
@@ -33,12 +101,21 @@
|
|
|
33
101
|
gap: 0.75rem;
|
|
34
102
|
font-size: 1.5rem;
|
|
35
103
|
font-weight: 700;
|
|
104
|
+
background: linear-gradient(135deg, #00d4ff, #8b5cf6);
|
|
105
|
+
-webkit-background-clip: text;
|
|
106
|
+
-webkit-text-fill-color: transparent;
|
|
107
|
+
background-clip: text;
|
|
36
108
|
}
|
|
37
109
|
.logo-icon {
|
|
38
110
|
width: 40px; height: 40px;
|
|
39
|
-
background: linear-gradient(135deg,
|
|
111
|
+
background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(139, 92, 246, 0.2));
|
|
112
|
+
border: 1px solid rgba(0, 212, 255, 0.3);
|
|
40
113
|
border-radius: 10px;
|
|
41
114
|
display: flex; align-items: center; justify-content: center;
|
|
115
|
+
backdrop-filter: blur(10px);
|
|
116
|
+
}
|
|
117
|
+
.logo-icon .q-icon {
|
|
118
|
+
color: #00d4ff;
|
|
42
119
|
}
|
|
43
120
|
.search-bar {
|
|
44
121
|
flex: 1;
|
|
@@ -46,23 +123,39 @@
|
|
|
46
123
|
margin: 0 2rem;
|
|
47
124
|
display: flex;
|
|
48
125
|
}
|
|
49
|
-
.search-input {
|
|
126
|
+
.video-search-input {
|
|
50
127
|
flex: 1;
|
|
51
|
-
padding: 0.625rem
|
|
128
|
+
padding: 0.625rem 1.25rem;
|
|
52
129
|
background: rgba(255, 255, 255, 0.05);
|
|
53
130
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
54
131
|
border-radius: 0.5rem 0 0 0.5rem;
|
|
55
132
|
color: var(--text-primary, #f1f5f9);
|
|
56
133
|
font-size: 0.9375rem;
|
|
134
|
+
outline: none;
|
|
135
|
+
transition: all 0.2s;
|
|
136
|
+
backdrop-filter: blur(10px);
|
|
137
|
+
}
|
|
138
|
+
.video-search-input:focus {
|
|
139
|
+
border-color: var(--color-starlight, #00d4ff);
|
|
140
|
+
background: rgba(0, 212, 255, 0.08);
|
|
141
|
+
box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2), 0 0 20px rgba(0, 212, 255, 0.1);
|
|
142
|
+
}
|
|
143
|
+
.video-search-input::placeholder {
|
|
144
|
+
color: rgba(255, 255, 255, 0.4);
|
|
57
145
|
}
|
|
58
146
|
.search-btn {
|
|
59
147
|
padding: 0 1.25rem;
|
|
60
|
-
background: rgba(
|
|
61
|
-
border: 1px solid rgba(
|
|
148
|
+
background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(139, 92, 246, 0.15));
|
|
149
|
+
border: 1px solid rgba(0, 212, 255, 0.2);
|
|
62
150
|
border-left: none;
|
|
63
151
|
border-radius: 0 0.5rem 0.5rem 0;
|
|
64
|
-
color:
|
|
152
|
+
color: #00d4ff;
|
|
65
153
|
cursor: pointer;
|
|
154
|
+
transition: all 0.2s;
|
|
155
|
+
}
|
|
156
|
+
.search-btn:hover {
|
|
157
|
+
background: linear-gradient(135deg, rgba(0, 212, 255, 0.25), rgba(139, 92, 246, 0.25));
|
|
158
|
+
box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
|
|
66
159
|
}
|
|
67
160
|
.header-actions {
|
|
68
161
|
display: flex;
|
|
@@ -71,23 +164,34 @@
|
|
|
71
164
|
}
|
|
72
165
|
.icon-btn {
|
|
73
166
|
width: 40px; height: 40px;
|
|
74
|
-
border-radius:
|
|
75
|
-
background:
|
|
76
|
-
border:
|
|
167
|
+
border-radius: 12px;
|
|
168
|
+
background: rgba(255, 255, 255, 0.05);
|
|
169
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
77
170
|
color: var(--text-primary, #f1f5f9);
|
|
78
171
|
cursor: pointer;
|
|
79
172
|
display: flex; align-items: center; justify-content: center;
|
|
173
|
+
transition: all 0.2s;
|
|
174
|
+
backdrop-filter: blur(10px);
|
|
175
|
+
}
|
|
176
|
+
.icon-btn:hover {
|
|
177
|
+
background: rgba(0, 212, 255, 0.1);
|
|
178
|
+
border-color: rgba(0, 212, 255, 0.3);
|
|
179
|
+
box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
|
|
180
|
+
}
|
|
181
|
+
.icon-btn .q-icon {
|
|
182
|
+
width: 18px;
|
|
183
|
+
height: 18px;
|
|
80
184
|
}
|
|
81
|
-
.icon-btn:hover { background: rgba(255, 255, 255, 0.1); }
|
|
82
185
|
.user-avatar {
|
|
83
186
|
width: 36px; height: 36px;
|
|
84
187
|
border-radius: 50%;
|
|
85
188
|
background: linear-gradient(135deg, #3b82f6, #00d4ff);
|
|
86
189
|
display: flex; align-items: center; justify-content: center;
|
|
87
190
|
font-weight: 600; font-size: 0.875rem;
|
|
191
|
+
border: 2px solid rgba(0, 212, 255, 0.3);
|
|
192
|
+
box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
|
|
88
193
|
}
|
|
89
194
|
|
|
90
|
-
/* Main Content */
|
|
91
195
|
.main-content {
|
|
92
196
|
display: grid;
|
|
93
197
|
grid-template-columns: 240px 1fr;
|
|
@@ -117,42 +221,60 @@
|
|
|
117
221
|
}
|
|
118
222
|
}
|
|
119
223
|
|
|
120
|
-
/* Sidebar */
|
|
121
224
|
.sidebar {
|
|
122
|
-
padding: 0.75rem
|
|
225
|
+
padding: 0.75rem;
|
|
123
226
|
overflow-y: auto;
|
|
227
|
+
background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(8, 8, 26, 0.98) 100%);
|
|
228
|
+
border-right: 1px solid rgba(255, 255, 255, 0.06);
|
|
124
229
|
}
|
|
125
230
|
.nav-item {
|
|
126
231
|
display: flex;
|
|
127
232
|
align-items: center;
|
|
128
233
|
gap: 1.25rem;
|
|
129
|
-
padding: 0.75rem
|
|
234
|
+
padding: 0.75rem 1rem;
|
|
130
235
|
color: var(--text-secondary, #94a3b8);
|
|
131
236
|
text-decoration: none;
|
|
132
237
|
font-size: 0.9375rem;
|
|
133
238
|
transition: all 0.2s;
|
|
239
|
+
border-radius: 12px;
|
|
240
|
+
border: 1px solid transparent;
|
|
241
|
+
margin-bottom: 0.25rem;
|
|
242
|
+
}
|
|
243
|
+
.nav-item .q-icon {
|
|
244
|
+
width: 20px;
|
|
245
|
+
height: 20px;
|
|
246
|
+
flex-shrink: 0;
|
|
134
247
|
}
|
|
135
248
|
.video-app .nav-item:hover, .video-app .nav-item.active {
|
|
136
|
-
background: rgba(
|
|
249
|
+
background: rgba(0, 212, 255, 0.08);
|
|
250
|
+
border-color: rgba(0, 212, 255, 0.15);
|
|
137
251
|
color: var(--text-primary, #f1f5f9);
|
|
138
252
|
}
|
|
139
|
-
.nav-item.active {
|
|
253
|
+
.nav-item.active {
|
|
254
|
+
font-weight: 600;
|
|
255
|
+
color: #00d4ff;
|
|
256
|
+
}
|
|
257
|
+
.nav-item.active .q-icon {
|
|
258
|
+
color: #00d4ff;
|
|
259
|
+
}
|
|
140
260
|
.nav-section {
|
|
141
261
|
padding: 0.75rem 0;
|
|
142
|
-
border-bottom: 1px solid rgba(255, 255, 255, 0.
|
|
262
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
263
|
+
margin-bottom: 0.5rem;
|
|
143
264
|
}
|
|
144
265
|
.nav-title {
|
|
145
|
-
padding: 0.5rem
|
|
146
|
-
font-size: 0.
|
|
147
|
-
font-weight:
|
|
148
|
-
color: var(--text-muted, #64748b);
|
|
266
|
+
padding: 0.5rem 1rem;
|
|
267
|
+
font-size: 0.75rem;
|
|
268
|
+
font-weight: 700;
|
|
149
269
|
text-transform: uppercase;
|
|
270
|
+
letter-spacing: 0.1em;
|
|
271
|
+
color: var(--text-muted, #64748b);
|
|
150
272
|
}
|
|
151
273
|
|
|
152
|
-
/* Video Feed */
|
|
153
274
|
.video-feed {
|
|
154
275
|
padding: 1.5rem;
|
|
155
276
|
overflow-y: auto;
|
|
277
|
+
background: rgba(5, 5, 16, 0.3);
|
|
156
278
|
}
|
|
157
279
|
.category-tabs {
|
|
158
280
|
display: flex;
|
|
@@ -165,19 +287,26 @@
|
|
|
165
287
|
padding: 0.5rem 1rem;
|
|
166
288
|
background: rgba(255, 255, 255, 0.05);
|
|
167
289
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
168
|
-
border-radius:
|
|
290
|
+
border-radius: 9999px;
|
|
169
291
|
color: var(--text-primary, #f1f5f9);
|
|
170
292
|
font-size: 0.875rem;
|
|
171
293
|
cursor: pointer;
|
|
172
294
|
white-space: nowrap;
|
|
173
295
|
transition: all 0.2s;
|
|
296
|
+
backdrop-filter: blur(10px);
|
|
174
297
|
}
|
|
175
|
-
.category-tab:hover
|
|
176
|
-
background:
|
|
177
|
-
color:
|
|
298
|
+
.category-tab:hover {
|
|
299
|
+
background: rgba(0, 212, 255, 0.1);
|
|
300
|
+
border-color: rgba(0, 212, 255, 0.3);
|
|
301
|
+
color: #00d4ff;
|
|
302
|
+
}
|
|
303
|
+
.category-tab.active {
|
|
304
|
+
background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(139, 92, 246, 0.2));
|
|
305
|
+
border-color: rgba(0, 212, 255, 0.4);
|
|
306
|
+
color: #00d4ff;
|
|
307
|
+
box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
|
|
178
308
|
}
|
|
179
309
|
|
|
180
|
-
/* Video Grid */
|
|
181
310
|
.video-grid {
|
|
182
311
|
display: grid;
|
|
183
312
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
@@ -185,16 +314,26 @@
|
|
|
185
314
|
}
|
|
186
315
|
.video-card {
|
|
187
316
|
cursor: pointer;
|
|
188
|
-
transition: transform 0.
|
|
317
|
+
transition: transform 0.3s, box-shadow 0.3s;
|
|
318
|
+
border-radius: 16px;
|
|
319
|
+
background: rgba(255, 255, 255, 0.03);
|
|
320
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
321
|
+
padding: 0.75rem;
|
|
322
|
+
backdrop-filter: blur(10px);
|
|
323
|
+
}
|
|
324
|
+
.video-card:hover {
|
|
325
|
+
transform: translateY(-4px);
|
|
326
|
+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 212, 255, 0.1);
|
|
327
|
+
border-color: rgba(0, 212, 255, 0.2);
|
|
189
328
|
}
|
|
190
|
-
.video-card:hover { transform: scale(1.02); }
|
|
191
329
|
.video-thumbnail {
|
|
192
330
|
position: relative;
|
|
193
331
|
aspect-ratio: 16/9;
|
|
194
|
-
background: linear-gradient(135deg,
|
|
195
|
-
border-radius:
|
|
332
|
+
background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(139, 92, 246, 0.1));
|
|
333
|
+
border-radius: 12px;
|
|
196
334
|
overflow: hidden;
|
|
197
335
|
margin-bottom: 0.75rem;
|
|
336
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
198
337
|
}
|
|
199
338
|
.video-thumbnail img {
|
|
200
339
|
width: 100%; height: 100%;
|
|
@@ -206,9 +345,11 @@
|
|
|
206
345
|
right: 0.5rem;
|
|
207
346
|
padding: 0.25rem 0.5rem;
|
|
208
347
|
background: rgba(0, 0, 0, 0.8);
|
|
209
|
-
|
|
348
|
+
backdrop-filter: blur(10px);
|
|
349
|
+
border-radius: 6px;
|
|
210
350
|
font-size: 0.75rem;
|
|
211
351
|
font-weight: 600;
|
|
352
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
212
353
|
}
|
|
213
354
|
.video-info {
|
|
214
355
|
display: flex;
|
|
@@ -221,6 +362,8 @@
|
|
|
221
362
|
display: flex; align-items: center; justify-content: center;
|
|
222
363
|
font-weight: 600; font-size: 0.875rem;
|
|
223
364
|
flex-shrink: 0;
|
|
365
|
+
border: 2px solid rgba(139, 92, 246, 0.3);
|
|
366
|
+
box-shadow: 0 0 10px rgba(139, 92, 246, 0.2);
|
|
224
367
|
}
|
|
225
368
|
.video-meta { flex: 1; }
|
|
226
369
|
.video-title {
|
|
@@ -243,7 +386,6 @@
|
|
|
243
386
|
color: var(--text-muted, #64748b);
|
|
244
387
|
}
|
|
245
388
|
|
|
246
|
-
/* Featured Section */
|
|
247
389
|
.featured-section {
|
|
248
390
|
margin-bottom: 2rem;
|
|
249
391
|
}
|
|
@@ -259,15 +401,29 @@
|
|
|
259
401
|
display: flex;
|
|
260
402
|
align-items: center;
|
|
261
403
|
gap: 0.5rem;
|
|
404
|
+
background: linear-gradient(135deg, #f1f5f9, #94a3b8);
|
|
405
|
+
-webkit-background-clip: text;
|
|
406
|
+
-webkit-text-fill-color: transparent;
|
|
407
|
+
background-clip: text;
|
|
408
|
+
}
|
|
409
|
+
.featured-header h2 .q-icon {
|
|
410
|
+
width: 22px;
|
|
411
|
+
height: 22px;
|
|
412
|
+
background: linear-gradient(135deg, #00d4ff, #f59e0b);
|
|
413
|
+
-webkit-mask: none;
|
|
414
|
+
mask: none;
|
|
262
415
|
}
|
|
263
416
|
.see-all {
|
|
264
417
|
color: var(--color-starlight, #00d4ff);
|
|
265
418
|
text-decoration: none;
|
|
266
419
|
font-size: 0.875rem;
|
|
267
420
|
font-weight: 500;
|
|
421
|
+
transition: all 0.2s;
|
|
422
|
+
}
|
|
423
|
+
.see-all:hover {
|
|
424
|
+
text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
|
|
268
425
|
}
|
|
269
426
|
|
|
270
|
-
/* Shorts */
|
|
271
427
|
.shorts-grid {
|
|
272
428
|
display: grid;
|
|
273
429
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
@@ -275,16 +431,26 @@
|
|
|
275
431
|
}
|
|
276
432
|
.short-card {
|
|
277
433
|
cursor: pointer;
|
|
278
|
-
transition: transform 0.
|
|
434
|
+
transition: transform 0.3s, box-shadow 0.3s;
|
|
435
|
+
border-radius: 16px;
|
|
436
|
+
background: rgba(255, 255, 255, 0.03);
|
|
437
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
438
|
+
padding: 0.5rem;
|
|
439
|
+
backdrop-filter: blur(10px);
|
|
440
|
+
}
|
|
441
|
+
.short-card:hover {
|
|
442
|
+
transform: scale(1.02);
|
|
443
|
+
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(139, 92, 246, 0.1);
|
|
444
|
+
border-color: rgba(139, 92, 246, 0.3);
|
|
279
445
|
}
|
|
280
|
-
.short-card:hover { transform: scale(1.02); }
|
|
281
446
|
.short-thumbnail {
|
|
282
447
|
aspect-ratio: 9/16;
|
|
283
|
-
background: linear-gradient(135deg,
|
|
284
|
-
border-radius:
|
|
448
|
+
background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(236, 72, 153, 0.15));
|
|
449
|
+
border-radius: 12px;
|
|
285
450
|
overflow: hidden;
|
|
286
451
|
margin-bottom: 0.5rem;
|
|
287
452
|
position: relative;
|
|
453
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
288
454
|
}
|
|
289
455
|
.short-thumbnail img {
|
|
290
456
|
width: 100%; height: 100%;
|
|
@@ -296,9 +462,11 @@
|
|
|
296
462
|
left: 0.5rem;
|
|
297
463
|
font-size: 0.75rem;
|
|
298
464
|
font-weight: 600;
|
|
299
|
-
background: rgba(0, 0, 0, 0.
|
|
465
|
+
background: rgba(0, 0, 0, 0.8);
|
|
466
|
+
backdrop-filter: blur(10px);
|
|
300
467
|
padding: 0.25rem 0.5rem;
|
|
301
|
-
border-radius:
|
|
468
|
+
border-radius: 6px;
|
|
469
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
302
470
|
}
|
|
303
471
|
.short-title {
|
|
304
472
|
font-size: 0.875rem;
|
|
@@ -308,20 +476,55 @@
|
|
|
308
476
|
-webkit-line-clamp: 2;
|
|
309
477
|
-webkit-box-orient: vertical;
|
|
310
478
|
overflow: hidden;
|
|
479
|
+
padding: 0 0.25rem;
|
|
311
480
|
}
|
|
312
481
|
|
|
313
|
-
/* Light Mode */
|
|
314
482
|
html[data-theme="light"] {
|
|
315
|
-
--bg-primary: #
|
|
316
|
-
--text-primary: #
|
|
317
|
-
--text-secondary: #
|
|
318
|
-
--text-muted: #
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
html[data-theme="light"]
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
html[data-theme="light"]
|
|
483
|
+
--bg-primary: #f8fafc;
|
|
484
|
+
--text-primary: #0f172a;
|
|
485
|
+
--text-secondary: #475569;
|
|
486
|
+
--text-muted: #94a3b8;
|
|
487
|
+
color-scheme: light;
|
|
488
|
+
}
|
|
489
|
+
html[data-theme="light"] body {
|
|
490
|
+
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);
|
|
491
|
+
}
|
|
492
|
+
html[data-theme="light"] header {
|
|
493
|
+
background: rgba(255, 255, 255, 0.8);
|
|
494
|
+
border-bottom-color: rgba(0, 0, 0, 0.08);
|
|
495
|
+
}
|
|
496
|
+
html[data-theme="light"] .sidebar {
|
|
497
|
+
background: rgba(255, 255, 255, 0.6);
|
|
498
|
+
border-right-color: rgba(0, 0, 0, 0.06);
|
|
499
|
+
}
|
|
500
|
+
html[data-theme="light"] .video-feed {
|
|
501
|
+
background: rgba(255, 255, 255, 0.3);
|
|
502
|
+
}
|
|
503
|
+
html[data-theme="light"] .nav-item:hover, html[data-theme="light"] .nav-item.active {
|
|
504
|
+
background: rgba(0, 212, 255, 0.1);
|
|
505
|
+
}
|
|
506
|
+
html[data-theme="light"] .category-tab {
|
|
507
|
+
background: rgba(255, 255, 255, 0.8);
|
|
508
|
+
border-color: rgba(0, 0, 0, 0.1);
|
|
509
|
+
}
|
|
510
|
+
html[data-theme="light"] .category-tab.active {
|
|
511
|
+
background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(139, 92, 246, 0.15));
|
|
512
|
+
border-color: rgba(0, 212, 255, 0.3);
|
|
513
|
+
color: #2563eb;
|
|
514
|
+
}
|
|
515
|
+
html[data-theme="light"] .video-card,
|
|
516
|
+
html[data-theme="light"] .short-card {
|
|
517
|
+
background: rgba(255, 255, 255, 0.8);
|
|
518
|
+
border-color: rgba(0, 0, 0, 0.08);
|
|
519
|
+
}
|
|
520
|
+
html[data-theme="light"] .video-thumbnail,
|
|
521
|
+
html[data-theme="light"] .short-thumbnail {
|
|
522
|
+
background: linear-gradient(135deg, rgba(0, 212, 255, 0.05), rgba(139, 92, 246, 0.05));
|
|
523
|
+
}
|
|
524
|
+
html[data-theme="light"] .video-search-input {
|
|
525
|
+
background: rgba(255, 255, 255, 0.9);
|
|
526
|
+
border-color: rgba(0, 0, 0, 0.1);
|
|
527
|
+
}
|
|
325
528
|
|
|
326
529
|
@media (max-width: 1024px) {
|
|
327
530
|
.video-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
|
|
@@ -331,54 +534,70 @@
|
|
|
331
534
|
.video-grid { grid-template-columns: 1fr; }
|
|
332
535
|
.shorts-grid { grid-template-columns: repeat(2, 1fr); }
|
|
333
536
|
}
|
|
334
|
-
::-webkit-scrollbar { width: 8px;
|
|
335
|
-
::-webkit-scrollbar-
|
|
336
|
-
|
|
537
|
+
::-webkit-scrollbar { width: 8px; }
|
|
538
|
+
::-webkit-scrollbar-track { background: transparent; }
|
|
539
|
+
::-webkit-scrollbar-thumb {
|
|
540
|
+
background: linear-gradient(135deg, var(--q-color-starlight-peach, #f97316) 0%, var(--q-color-starlight-blue, #00d4ff) 100%);
|
|
541
|
+
border-radius: 10px;
|
|
542
|
+
border: 2px solid var(--q-bg-primary, #050510);
|
|
543
|
+
}
|
|
544
|
+
::-webkit-scrollbar-thumb:hover {
|
|
545
|
+
background: linear-gradient(135deg, var(--q-color-starlight-peach, #f97316) 0%, var(--q-color-starlight-blue, #00d4ff) 100%);
|
|
546
|
+
}
|
|
547
|
+
html[data-theme="light"] ::-webkit-scrollbar-thumb {
|
|
548
|
+
background: linear-gradient(135deg, var(--q-color-starlight-peach, #f97316) 40%, var(--q-color-starlight-blue, #00d4ff) 100%);
|
|
549
|
+
border-color: var(--q-light-bg, #f1f5f9);
|
|
550
|
+
}
|
|
551
|
+
|
|
552
|
+
.hidden { display: none !important; }
|
|
337
553
|
</style>
|
|
338
554
|
</head>
|
|
339
555
|
<body>
|
|
556
|
+
<div class="stars"></div>
|
|
340
557
|
<div class="video-app">
|
|
341
558
|
<header>
|
|
342
559
|
<div class="logo">
|
|
343
|
-
<div class="logo-icon"
|
|
560
|
+
<div class="logo-icon">
|
|
561
|
+
<span class="q-icon q-icon-play-fill"></span>
|
|
562
|
+
</div>
|
|
344
563
|
<span>Starlight</span>
|
|
345
564
|
</div>
|
|
346
565
|
<div class="search-bar">
|
|
347
|
-
<input type="text" class="search-input" placeholder="Search">
|
|
348
|
-
<button class="search-btn"
|
|
566
|
+
<input type="text" class="video-search-input" placeholder="Search videos...">
|
|
567
|
+
<button class="search-btn"><span class="q-icon q-icon-search"></span></button>
|
|
349
568
|
</div>
|
|
350
569
|
<div class="header-actions">
|
|
351
|
-
<button class="icon-btn icon-
|
|
352
|
-
<button class="icon-btn
|
|
353
|
-
|
|
570
|
+
<button class="icon-btn"><span class="q-icon q-icon-video"></span></button>
|
|
571
|
+
<button class="icon-btn" style="position: relative;">
|
|
572
|
+
<span class="q-icon q-icon-notification"></span>
|
|
354
573
|
<span class="notification-dot"></span>
|
|
355
574
|
</button>
|
|
356
|
-
<button class="icon-btn icon-
|
|
357
|
-
<div class="avatar
|
|
575
|
+
<button class="icon-btn theme-toggle"><span class="q-icon q-icon-sun sun-icon hidden"></span><span class="q-icon q-icon-moon moon-icon hidden"></span><span class="q-icon q-icon-display auto-icon"></span></button>
|
|
576
|
+
<div class="user-avatar">U</div>
|
|
358
577
|
</div>
|
|
359
578
|
</header>
|
|
360
579
|
|
|
361
580
|
<div class="main-content">
|
|
362
581
|
<aside class="sidebar">
|
|
363
582
|
<div class="nav-section">
|
|
364
|
-
<a href="#" class="nav-item active"><span
|
|
365
|
-
<a href="#" class="nav-item"><span
|
|
366
|
-
<a href="#" class="nav-item"><span
|
|
583
|
+
<a href="#" class="nav-item active"><span class="q-icon q-icon-home-fill"></span> <span>Home</span></a>
|
|
584
|
+
<a href="#" class="nav-item"><span class="q-icon q-icon-grid"></span> <span>Shorts</span></a>
|
|
585
|
+
<a href="#" class="nav-item"><span class="q-icon q-icon-users"></span> <span>Subscriptions</span></a>
|
|
367
586
|
</div>
|
|
368
587
|
<div class="nav-section">
|
|
369
|
-
<div class="nav-
|
|
370
|
-
<a href="#" class="nav-item"><span
|
|
371
|
-
<a href="#" class="nav-item"><span
|
|
372
|
-
<a href="#" class="nav-item"><span
|
|
373
|
-
<a href="#" class="nav-item"><span
|
|
374
|
-
<a href="#" class="nav-item"><span
|
|
588
|
+
<div class="nav-title">You</div>
|
|
589
|
+
<a href="#" class="nav-item"><span class="q-icon q-icon-clock-fill"></span> <span>History</span></a>
|
|
590
|
+
<a href="#" class="nav-item"><span class="q-icon q-icon-content"></span> <span>Playlists</span></a>
|
|
591
|
+
<a href="#" class="nav-item"><span class="q-icon q-icon-eye-fill"></span> <span>Your videos</span></a>
|
|
592
|
+
<a href="#" class="nav-item"><span class="q-icon q-icon-clock-fill"></span> <span>Watch later</span></a>
|
|
593
|
+
<a href="#" class="nav-item"><span class="q-icon q-icon-heart-fill"></span> <span>Liked videos</span></a>
|
|
375
594
|
</div>
|
|
376
595
|
<div class="nav-section">
|
|
377
|
-
<div class="nav-
|
|
378
|
-
<a href="#" class="nav-item"><span
|
|
379
|
-
<a href="#" class="nav-item"><span
|
|
380
|
-
<a href="#" class="nav-item"><span
|
|
381
|
-
<a href="#" class="nav-item"><span
|
|
596
|
+
<div class="nav-title">Subscriptions</div>
|
|
597
|
+
<a href="#" class="nav-item"><span class="q-icon q-icon-grid"></span> <span>Gaming Channel</span></a>
|
|
598
|
+
<a href="#" class="nav-item"><span class="q-icon q-icon-display"></span> <span>Tech Review</span></a>
|
|
599
|
+
<a href="#" class="nav-item"><span class="q-icon q-icon-music"></span> <span>Music Studio</span></a>
|
|
600
|
+
<a href="#" class="nav-item"><span class="q-icon q-icon-play-fill"></span> <span>Film Makers</span></a>
|
|
382
601
|
</div>
|
|
383
602
|
</aside>
|
|
384
603
|
|
|
@@ -398,7 +617,7 @@
|
|
|
398
617
|
|
|
399
618
|
<section class="featured-section">
|
|
400
619
|
<div class="featured-header">
|
|
401
|
-
<h2
|
|
620
|
+
<h2><span class="q-icon q-icon-trend-up"></span> Trending Now</h2>
|
|
402
621
|
<a href="#" class="see-all">See all</a>
|
|
403
622
|
</div>
|
|
404
623
|
<div class="video-grid">
|
|
@@ -463,7 +682,7 @@
|
|
|
463
682
|
|
|
464
683
|
<section class="featured-section">
|
|
465
684
|
<div class="featured-header">
|
|
466
|
-
<h2
|
|
685
|
+
<h2><span class="q-icon q-icon-grid"></span> Shorts</h2>
|
|
467
686
|
<a href="#" class="see-all">See all</a>
|
|
468
687
|
</div>
|
|
469
688
|
<div class="shorts-grid">
|
|
@@ -472,49 +691,49 @@
|
|
|
472
691
|
<img src="https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=400&h=711&fit=crop" alt="Short">
|
|
473
692
|
<span class="short-views">1.2M views</span>
|
|
474
693
|
</div>
|
|
475
|
-
<h3 class="short-title">This trick will change your life
|
|
694
|
+
<h3 class="short-title">This trick will change your life!</h3>
|
|
476
695
|
</div>
|
|
477
696
|
<div class="short-card">
|
|
478
697
|
<div class="short-thumbnail">
|
|
479
698
|
<img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=400&h=711&fit=crop" alt="Short">
|
|
480
699
|
<span class="short-views">890K views</span>
|
|
481
700
|
</div>
|
|
482
|
-
<h3 class="short-title">Gaming setup tour 2024
|
|
701
|
+
<h3 class="short-title">Gaming setup tour 2024</h3>
|
|
483
702
|
</div>
|
|
484
703
|
<div class="short-card">
|
|
485
704
|
<div class="short-thumbnail">
|
|
486
705
|
<img src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?w=400&h=711&fit=crop" alt="Short">
|
|
487
706
|
<span class="short-views">2.5M views</span>
|
|
488
707
|
</div>
|
|
489
|
-
<h3 class="short-title">Mac vs PC - The Truth
|
|
708
|
+
<h3 class="short-title">Mac vs PC - The Truth</h3>
|
|
490
709
|
</div>
|
|
491
710
|
<div class="short-card">
|
|
492
711
|
<div class="short-thumbnail">
|
|
493
712
|
<img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=400&h=711&fit=crop" alt="Short">
|
|
494
713
|
<span class="short-views">650K views</span>
|
|
495
714
|
</div>
|
|
496
|
-
<h3 class="short-title">Music production tips
|
|
715
|
+
<h3 class="short-title">Music production tips</h3>
|
|
497
716
|
</div>
|
|
498
717
|
<div class="short-card">
|
|
499
718
|
<div class="short-thumbnail">
|
|
500
719
|
<img src="https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=400&h=711&fit=crop" alt="Short">
|
|
501
720
|
<span class="short-views">3.2M views</span>
|
|
502
721
|
</div>
|
|
503
|
-
<h3 class="short-title">AI Robot Does Backflip
|
|
722
|
+
<h3 class="short-title">AI Robot Does Backflip!</h3>
|
|
504
723
|
</div>
|
|
505
724
|
<div class="short-card">
|
|
506
725
|
<div class="short-thumbnail">
|
|
507
726
|
<img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=711&fit=crop" alt="Short">
|
|
508
727
|
<span class="short-views">1.8M views</span>
|
|
509
728
|
</div>
|
|
510
|
-
<h3 class="short-title">Epic drone footage
|
|
729
|
+
<h3 class="short-title">Epic drone footage</h3>
|
|
511
730
|
</div>
|
|
512
731
|
</div>
|
|
513
732
|
</section>
|
|
514
733
|
|
|
515
734
|
<section>
|
|
516
735
|
<div class="featured-header">
|
|
517
|
-
<h2
|
|
736
|
+
<h2><span class="q-icon q-icon-star"></span> Recommended</h2>
|
|
518
737
|
</div>
|
|
519
738
|
<div class="video-grid">
|
|
520
739
|
<div class="video-card">
|
|
@@ -566,7 +785,6 @@
|
|
|
566
785
|
</div>
|
|
567
786
|
|
|
568
787
|
<script>
|
|
569
|
-
|
|
570
788
|
document.querySelectorAll('.category-tab').forEach(tab => {
|
|
571
789
|
tab.addEventListener('click', function() {
|
|
572
790
|
document.querySelectorAll('.category-tab').forEach(t => t.classList.remove('active'));
|