@howssatoshi/quantumcss 1.10.1 → 1.11.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.
Files changed (43) hide show
  1. package/README.md +11 -10
  2. package/dist/quantum.min.css +2 -2
  3. package/examples/admin-panel.html +303 -608
  4. package/examples/analytics-dashboard.html +128 -288
  5. package/examples/blog.css +297 -0
  6. package/examples/blog.html +216 -0
  7. package/examples/chat-messaging.html +11 -27
  8. package/examples/email-client.css +582 -0
  9. package/examples/email-client.html +432 -0
  10. package/examples/gaming-portal.css +352 -0
  11. package/examples/gaming-portal.html +239 -0
  12. package/examples/index.html +342 -232
  13. package/examples/kitchen-sink.html +284 -94
  14. package/examples/music-streaming.html +32 -91
  15. package/examples/{news-template.html → news.html} +35 -11
  16. package/examples/{portfolio-resume.html → portfolio.html} +72 -26
  17. package/examples/shopping.html +812 -0
  18. package/examples/starlight.html +7 -6
  19. package/examples/task.md +12 -0
  20. package/examples/travel.html +514 -0
  21. package/examples/video-streaming.html +1025 -546
  22. package/package.json +9 -3
  23. package/src/cli.js +5 -5
  24. package/src/defaults.js +18 -16
  25. package/src/starlight.js +20 -15
  26. package/src/styles/quantum-base.css +4 -0
  27. package/src/styles/quantum-components.css +1882 -136
  28. package/src/styles/quantum-icons.css +345 -0
  29. package/src/styles/starlight.css +2606 -1186
  30. package/dist/quantum.css +0 -2374
  31. package/examples/blog-template.html +0 -288
  32. package/examples/email-template.html +0 -712
  33. package/examples/gaming-template.html +0 -471
  34. package/examples/gradient-test.html +0 -129
  35. package/examples/shopping/images/headset.jpg +0 -0
  36. package/examples/shopping/images/sneakers.jpg +0 -0
  37. package/examples/shopping/images/windbreaker.jpg +0 -0
  38. package/examples/shopping/index.html +0 -525
  39. package/examples/theme-test.html +0 -159
  40. package/examples/travel/index.html +0 -432
  41. package/examples/verify_fixes.html +0 -52
  42. package/examples/verify_presets.html +0 -32
  43. /package/examples/{shopping/nova-shop.css → nova-shop.css} +0 -0
package/examples/video-streaming.html CHANGED
@@ -1,585 +1,1064 @@
1
- <!DOCTYPE html>
1
+ <!doctype html>
2
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 Video - Watch</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
- * { margin: 0; padding: 0; box-sizing: border-box; }
12
- body {
13
- background: var(--bg-primary, #0a0a0a);
14
- color: var(--text-primary, #f1f5f9);
15
- font-family: 'Inter', system-ui, sans-serif;
16
- }
17
-
18
- /* Layout */
19
- .video-app { display: grid; grid-template-rows: auto 1fr; height: 100vh; overflow: hidden; }
20
-
21
- /* Header */
22
- header {
23
- display: flex;
24
- align-items: center;
25
- justify-content: space-between;
26
- padding: 0.75rem 1.5rem;
27
- background: rgba(10, 10, 10, 0.95);
28
- border-bottom: 1px solid rgba(255, 255, 255, 0.05);
29
- }
30
- .logo {
31
- display: flex;
32
- align-items: center;
33
- gap: 0.75rem;
34
- font-size: 1.5rem;
35
- font-weight: 700;
36
- }
37
- .logo-icon {
38
- width: 40px; height: 40px;
39
- background: linear-gradient(135deg, #ef4444, #dc2626);
40
- border-radius: 10px;
41
- display: flex; align-items: center; justify-content: center;
42
- }
43
- .search-bar {
44
- flex: 1;
45
- max-width: 640px;
46
- margin: 0 2rem;
47
- display: flex;
48
- }
49
- .video-search-input {
50
- flex: 1;
51
- padding: 0.625rem 1.25rem;
52
- background: rgba(255, 255, 255, 0.05);
53
- border: 1px solid rgba(255, 255, 255, 0.1);
54
- border-radius: 0.5rem 0 0 0.5rem;
55
- color: var(--text-primary, #f1f5f9);
56
- font-size: 0.9375rem;
57
- outline: none;
58
- transition: all 0.2s;
59
- }
60
- .video-search-input:focus {
61
- border-color: var(--color-starlight, #00d4ff);
62
- background: rgba(255, 255, 255, 0.08);
63
- box-shadow: 0 0 0 2px var(--q-color-starlight-deep), 0 0 0 4px var(--q-color-starlight-blue);
64
- }
65
- .search-btn {
66
- padding: 0 1.25rem;
67
- background: rgba(255, 255, 255, 0.1);
68
- border: 1px solid rgba(255, 255, 255, 0.1);
69
- border-left: none;
70
- border-radius: 0 0.5rem 0.5rem 0;
71
- color: var(--text-primary, #f1f5f9);
72
- cursor: pointer;
73
- }
74
- .header-actions {
75
- display: flex;
76
- align-items: center;
77
- gap: 1rem;
78
- }
79
- .icon-btn {
80
- width: 40px; height: 40px;
81
- border-radius: 50%;
82
- background: transparent;
83
- border: none;
84
- color: var(--text-primary, #f1f5f9);
85
- cursor: pointer;
86
- display: flex; align-items: center; justify-content: center;
87
- }
88
- .icon-btn:hover { background: rgba(255, 255, 255, 0.1); }
89
- .user-avatar {
90
- width: 36px; height: 36px;
91
- border-radius: 50%;
92
- background: linear-gradient(135deg, #3b82f6, #00d4ff);
93
- display: flex; align-items: center; justify-content: center;
94
- font-weight: 600; font-size: 0.875rem;
95
- }
96
-
97
- /* Main Content */
98
- .main-content {
99
- display: grid;
100
- grid-template-columns: 240px 1fr;
101
- overflow: hidden;
102
- }
103
-
104
- @media (max-width: 1024px) {
105
- .main-content {
106
- grid-template-columns: 72px 1fr;
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Starlight Video - Watch</title>
7
+ <link rel="stylesheet" href="../dist/quantum.min.css" />
8
+ <link rel="stylesheet" href="../src/styles/quantum-components.css" />
9
+ <link rel="stylesheet" href="../src/styles/quantum-icons.css" />
10
+ <script src="../src/starlight.js"></script>
11
+ <style>
12
+ * {
13
+ margin: 0;
14
+ padding: 0;
15
+ box-sizing: border-box;
16
+ }
17
+ body {
18
+ background: var(--bg-primary, #050510);
19
+ background-image:
20
+ radial-gradient(
21
+ ellipse at 20% 30%,
22
+ rgba(0, 212, 255, 0.08) 0%,
23
+ transparent 50%
24
+ ),
25
+ radial-gradient(
26
+ ellipse at 80% 70%,
27
+ rgba(139, 92, 246, 0.06) 0%,
28
+ transparent 50%
29
+ ),
30
+ radial-gradient(
31
+ circle at 50% 50%,
32
+ rgba(15, 23, 42, 1) 0%,
33
+ #050510 100%
34
+ );
35
+ color: var(--text-primary, #f1f5f9);
36
+ font-family: "Inter", system-ui, sans-serif;
37
+ min-height: 100vh;
38
+ }
39
+
40
+ .stars {
41
+ position: fixed;
42
+ inset: 0;
43
+ pointer-events: none;
44
+ overflow: hidden;
45
+ z-index: 0;
46
+ }
47
+ .stars::before,
48
+ .stars::after {
49
+ content: "";
50
+ position: absolute;
51
+ width: 2px;
52
+ height: 2px;
53
+ background: white;
54
+ border-radius: 50%;
55
+ box-shadow:
56
+ 100px 50px 0 rgba(255, 255, 255, 0.3),
57
+ 200px 150px 0 rgba(255, 255, 255, 0.2),
58
+ 400px 80px 0 rgba(255, 255, 255, 0.25),
59
+ 600px 200px 0 rgba(255, 255, 255, 0.2),
60
+ 800px 100px 0 rgba(255, 255, 255, 0.3),
61
+ 150px 300px 0 rgba(255, 255, 255, 0.2),
62
+ 350px 350px 0 rgba(255, 255, 255, 0.15),
63
+ 550px 400px 0 rgba(255, 255, 255, 0.25),
64
+ 750px 450px 0 rgba(255, 255, 255, 0.2),
65
+ 50px 500px 0 rgba(255, 255, 255, 0.3),
66
+ 250px 550px 0 rgba(255, 255, 255, 0.15),
67
+ 450px 600px 0 rgba(255, 255, 255, 0.25),
68
+ 650px 650px 0 rgba(255, 255, 255, 0.2),
69
+ 850px 700px 0 rgba(255, 255, 255, 0.3),
70
+ 900px 250px 0 rgba(255, 255, 255, 0.2),
71
+ 700px 300px 0 rgba(255, 255, 255, 0.15);
72
+ animation: twinkle 4s ease-in-out infinite;
73
+ }
74
+ .stars::after {
75
+ left: 50px;
76
+ animation-delay: 2s;
77
+ box-shadow:
78
+ 80px 100px 0 rgba(255, 255, 255, 0.2),
79
+ 180px 200px 0 rgba(255, 255, 255, 0.3),
80
+ 320px 120px 0 rgba(255, 255, 255, 0.2),
81
+ 520px 280px 0 rgba(255, 255, 255, 0.25),
82
+ 720px 180px 0 rgba(255, 255, 255, 0.2),
83
+ 920px 380px 0 rgba(255, 255, 255, 0.3),
84
+ 120px 420px 0 rgba(255, 255, 255, 0.2),
85
+ 380px 480px 0 rgba(255, 255, 255, 0.25),
86
+ 580px 520px 0 rgba(255, 255, 255, 0.15),
87
+ 780px 580px 0 rgba(255, 255, 255, 0.2),
88
+ 980px 620px 0 rgba(255, 255, 255, 0.3);
89
+ }
90
+ @keyframes twinkle {
91
+ 0%,
92
+ 100% {
93
+ opacity: 0.5;
94
+ }
95
+ 50% {
96
+ opacity: 1;
97
+ }
98
+ }
99
+
100
+ .video-app {
101
+ display: grid;
102
+ grid-template-rows: auto 1fr;
103
+ height: 100vh;
104
+ overflow: hidden;
105
+ position: relative;
106
+ z-index: 1;
107
+ }
108
+
109
+ header {
110
+ display: flex;
111
+ align-items: center;
112
+ justify-content: space-between;
113
+ padding: 0.75rem 1.5rem;
114
+ background: rgba(15, 23, 42, 0.8);
115
+ backdrop-filter: blur(16px);
116
+ -webkit-backdrop-filter: blur(16px);
117
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
118
+ }
119
+ .logo {
120
+ display: flex;
121
+ align-items: center;
122
+ gap: 0.75rem;
123
+ font-size: 1.5rem;
124
+ font-weight: 700;
125
+ background: linear-gradient(135deg, #00d4ff, #8b5cf6);
126
+ -webkit-background-clip: text;
127
+ -webkit-text-fill-color: transparent;
128
+ background-clip: text;
107
129
  }
108
- .sidebar .nav-item {
130
+ .logo-icon {
131
+ width: 40px;
132
+ height: 40px;
133
+ background: linear-gradient(
134
+ 135deg,
135
+ rgba(0, 212, 255, 0.2),
136
+ rgba(139, 92, 246, 0.2)
137
+ );
138
+ border: 1px solid rgba(0, 212, 255, 0.3);
139
+ border-radius: 10px;
140
+ display: flex;
141
+ align-items: center;
109
142
  justify-content: center;
110
- padding: 0.75rem 0;
143
+ backdrop-filter: blur(10px);
144
+ }
145
+ .logo-icon .q-icon {
146
+ color: #00d4ff;
147
+ }
148
+ .search-bar {
149
+ flex: 1;
150
+ max-width: 640px;
151
+ margin: 0 2rem;
152
+ display: flex;
153
+ }
154
+ .video-search-input {
155
+ flex: 1;
156
+ padding: 0.625rem 1.25rem;
157
+ background: rgba(255, 255, 255, 0.05);
158
+ border: 1px solid rgba(255, 255, 255, 0.1);
159
+ border-radius: 0.5rem 0 0 0.5rem;
160
+ color: var(--text-primary, #f1f5f9);
161
+ font-size: 0.9375rem;
162
+ outline: none;
163
+ transition: all 0.2s;
164
+ backdrop-filter: blur(10px);
165
+ }
166
+ .video-search-input:focus {
167
+ border-color: var(--color-starlight, #00d4ff);
168
+ background: rgba(0, 212, 255, 0.08);
169
+ box-shadow:
170
+ 0 0 0 2px rgba(0, 212, 255, 0.2),
171
+ 0 0 20px rgba(0, 212, 255, 0.1);
172
+ }
173
+ .video-search-input::placeholder {
174
+ color: rgba(255, 255, 255, 0.4);
175
+ }
176
+ .search-btn {
177
+ padding: 0 1.25rem;
178
+ background: linear-gradient(
179
+ 135deg,
180
+ rgba(0, 212, 255, 0.15),
181
+ rgba(139, 92, 246, 0.15)
182
+ );
183
+ border: 1px solid rgba(0, 212, 255, 0.2);
184
+ border-left: none;
185
+ border-radius: 0 0.5rem 0.5rem 0;
186
+ color: #00d4ff;
187
+ cursor: pointer;
188
+ transition: all 0.2s;
189
+ }
190
+ .search-btn:hover {
191
+ background: linear-gradient(
192
+ 135deg,
193
+ rgba(0, 212, 255, 0.25),
194
+ rgba(139, 92, 246, 0.25)
195
+ );
196
+ box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
111
197
  }
112
- .sidebar .nav-item span:last-child,
113
- .sidebar .nav-section-title {
114
- display: none;
198
+ .header-actions {
199
+ display: flex;
200
+ align-items: center;
201
+ gap: 1rem;
115
202
  }
116
- }
117
-
118
- @media (max-width: 768px) {
203
+ .icon-btn {
204
+ width: 40px;
205
+ height: 40px;
206
+ border-radius: 12px;
207
+ background: rgba(255, 255, 255, 0.05);
208
+ border: 1px solid rgba(255, 255, 255, 0.1);
209
+ color: var(--text-primary, #f1f5f9);
210
+ cursor: pointer;
211
+ display: flex;
212
+ align-items: center;
213
+ justify-content: center;
214
+ transition: all 0.2s;
215
+ backdrop-filter: blur(10px);
216
+ }
217
+ .icon-btn:hover {
218
+ background: rgba(0, 212, 255, 0.1);
219
+ border-color: rgba(0, 212, 255, 0.3);
220
+ box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
221
+ }
222
+ .icon-btn .q-icon {
223
+ width: 18px;
224
+ height: 18px;
225
+ }
226
+ .user-avatar {
227
+ width: 36px;
228
+ height: 36px;
229
+ border-radius: 50%;
230
+ background: linear-gradient(135deg, #3b82f6, #00d4ff);
231
+ display: flex;
232
+ align-items: center;
233
+ justify-content: center;
234
+ font-weight: 600;
235
+ font-size: 0.875rem;
236
+ border: 2px solid rgba(0, 212, 255, 0.3);
237
+ box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
238
+ }
239
+
119
240
  .main-content {
120
- grid-template-columns: 1fr;
241
+ display: grid;
242
+ grid-template-columns: 240px 1fr;
243
+ overflow: hidden;
244
+ }
245
+
246
+ @media (max-width: 1024px) {
247
+ .main-content {
248
+ grid-template-columns: 72px 1fr;
249
+ }
250
+ .sidebar .nav-item {
251
+ justify-content: center;
252
+ padding: 0.75rem 0;
253
+ }
254
+ .sidebar .nav-item span:last-child,
255
+ .sidebar .nav-section-title {
256
+ display: none;
257
+ }
258
+ }
259
+
260
+ @media (max-width: 768px) {
261
+ .main-content {
262
+ grid-template-columns: 1fr;
263
+ }
264
+ .sidebar {
265
+ display: none;
266
+ }
121
267
  }
268
+
122
269
  .sidebar {
123
- display: none;
124
- }
125
- }
126
-
127
- /* Sidebar */
128
- .sidebar {
129
- padding: 0.75rem 0;
130
- overflow-y: auto;
131
- }
132
- .nav-item {
133
- display: flex;
134
- align-items: center;
135
- gap: 1.25rem;
136
- padding: 0.75rem 1.5rem;
137
- color: var(--text-secondary, #94a3b8);
138
- text-decoration: none;
139
- font-size: 0.9375rem;
140
- transition: all 0.2s;
141
- }
142
- .video-app .nav-item:hover, .video-app .nav-item.active {
143
- background: rgba(255, 255, 255, 0.05);
144
- color: var(--text-primary, #f1f5f9);
145
- }
146
- .nav-item.active { font-weight: 600; }
147
- .nav-section {
148
- padding: 0.75rem 0;
149
- border-bottom: 1px solid rgba(255, 255, 255, 0.05);
150
- }
151
- .nav-title {
152
- padding: 0.5rem 1.5rem;
153
- font-size: 0.875rem;
154
- font-weight: 600;
155
- color: var(--text-muted, #64748b);
156
- text-transform: uppercase;
157
- }
158
-
159
- /* Video Feed */
160
- .video-feed {
161
- padding: 1.5rem;
162
- overflow-y: auto;
163
- }
164
- .category-tabs {
165
- display: flex;
166
- gap: 0.75rem;
167
- margin-bottom: 1.5rem;
168
- overflow-x: auto;
169
- padding-bottom: 0.5rem;
170
- }
171
- .category-tab {
172
- padding: 0.5rem 1rem;
173
- background: rgba(255, 255, 255, 0.05);
174
- border: 1px solid rgba(255, 255, 255, 0.1);
175
- border-radius: 0.5rem;
176
- color: var(--text-primary, #f1f5f9);
177
- font-size: 0.875rem;
178
- cursor: pointer;
179
- white-space: nowrap;
180
- transition: all 0.2s;
181
- }
182
- .category-tab:hover, .category-tab.active {
183
- background: var(--text-primary, #f1f5f9);
184
- color: var(--bg-primary, #0a0a0a);
185
- }
186
-
187
- /* Video Grid */
188
- .video-grid {
189
- display: grid;
190
- grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
191
- gap: 1.5rem;
192
- }
193
- .video-card {
194
- cursor: pointer;
195
- transition: transform 0.2s;
196
- }
197
- .video-card:hover { transform: scale(1.02); }
198
- .video-thumbnail {
199
- position: relative;
200
- aspect-ratio: 16/9;
201
- background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
202
- border-radius: 0.75rem;
203
- overflow: hidden;
204
- margin-bottom: 0.75rem;
205
- }
206
- .video-thumbnail img {
207
- width: 100%; height: 100%;
208
- object-fit: cover;
209
- }
210
- .video-duration {
211
- position: absolute;
212
- bottom: 0.5rem;
213
- right: 0.5rem;
214
- padding: 0.25rem 0.5rem;
215
- background: rgba(0, 0, 0, 0.8);
216
- border-radius: 0.25rem;
217
- font-size: 0.75rem;
218
- font-weight: 600;
219
- }
220
- .video-info {
221
- display: flex;
222
- gap: 0.875rem;
223
- }
224
- .channel-avatar {
225
- width: 36px; height: 36px;
226
- border-radius: 50%;
227
- background: linear-gradient(135deg, #3b82f6, #8b5cf6);
228
- display: flex; align-items: center; justify-content: center;
229
- font-weight: 600; font-size: 0.875rem;
230
- flex-shrink: 0;
231
- }
232
- .video-meta { flex: 1; }
233
- .video-title {
234
- font-size: 0.9375rem;
235
- font-weight: 600;
236
- line-height: 1.4;
237
- margin-bottom: 0.375rem;
238
- display: -webkit-box;
239
- -webkit-line-clamp: 2;
240
- -webkit-box-orient: vertical;
241
- overflow: hidden;
242
- }
243
- .video-channel {
244
- font-size: 0.875rem;
245
- color: var(--text-secondary, #94a3b8);
246
- margin-bottom: 0.25rem;
247
- }
248
- .video-stats {
249
- font-size: 0.8125rem;
250
- color: var(--text-muted, #64748b);
251
- }
252
-
253
- /* Featured Section */
254
- .featured-section {
255
- margin-bottom: 2rem;
256
- }
257
- .featured-header {
258
- display: flex;
259
- align-items: center;
260
- justify-content: space-between;
261
- margin-bottom: 1rem;
262
- }
263
- .featured-header h2 {
264
- font-size: 1.25rem;
265
- font-weight: 700;
266
- display: flex;
267
- align-items: center;
268
- gap: 0.5rem;
269
- }
270
- .see-all {
271
- color: var(--color-starlight, #00d4ff);
272
- text-decoration: none;
273
- font-size: 0.875rem;
274
- font-weight: 500;
275
- }
276
-
277
- /* Shorts */
278
- .shorts-grid {
279
- display: grid;
280
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
281
- gap: 1rem;
282
- }
283
- .short-card {
284
- cursor: pointer;
285
- transition: transform 0.2s;
286
- }
287
- .short-card:hover { transform: scale(1.02); }
288
- .short-thumbnail {
289
- aspect-ratio: 9/16;
290
- background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
291
- border-radius: 0.75rem;
292
- overflow: hidden;
293
- margin-bottom: 0.5rem;
294
- position: relative;
295
- }
296
- .short-thumbnail img {
297
- width: 100%; height: 100%;
298
- object-fit: cover;
299
- }
300
- .short-views {
301
- position: absolute;
302
- bottom: 0.5rem;
303
- left: 0.5rem;
304
- font-size: 0.75rem;
305
- font-weight: 600;
306
- background: rgba(0, 0, 0, 0.7);
307
- padding: 0.25rem 0.5rem;
308
- border-radius: 0.25rem;
309
- }
310
- .short-title {
311
- font-size: 0.875rem;
312
- font-weight: 500;
313
- line-height: 1.3;
314
- display: -webkit-box;
315
- -webkit-line-clamp: 2;
316
- -webkit-box-orient: vertical;
317
- overflow: hidden;
318
- }
319
-
320
- /* Light Mode */
321
- html[data-theme="light"] {
322
- --bg-primary: #ffffff;
323
- --text-primary: #0f0f0f;
324
- --text-secondary: #606060;
325
- --text-muted: #909090;
326
- }
327
- html[data-theme="light"] header { background: #ffffff; border-bottom-color: #e5e5e5; }
328
- html[data-theme="light"] .nav-item:hover, html[data-theme="light"] .nav-item.active { background: #f2f2f2; }
329
- html[data-theme="light"] .category-tab { background: #f2f2f2; border-color: #e5e5e5; color: #0f0f0f; }
330
- html[data-theme="light"] .category-tab.active { background: #0f0f0f; color: #ffffff; }
331
- html[data-theme="light"] .video-thumbnail, html[data-theme="light"] .short-thumbnail { background: #f2f2f2; }
332
-
333
- @media (max-width: 1024px) {
334
- .video-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
335
- }
336
- @media (max-width: 640px) {
337
- .search-bar { display: none; }
338
- .video-grid { grid-template-columns: 1fr; }
339
- .shorts-grid { grid-template-columns: repeat(2, 1fr); }
340
- }
341
- ::-webkit-scrollbar { width: 8px; height: 8px; }
342
- ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; }
343
- html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #ccc; }
344
- </style>
345
- </head>
346
- <body>
347
- <div class="video-app">
348
- <header>
349
- <div class="logo">
350
- <div class="logo-icon">▶️</div>
351
- <span>Starlight</span>
352
- </div>
353
- <div class="search-bar">
354
- <input type="text" class="video-search-input" placeholder="Search">
355
- <button class="search-btn">🔍</button>
356
- </div>
357
- <div class="header-actions">
358
- <button class="icon-btn icon-btn-circle">📹</button>
359
- <button class="icon-btn icon-btn-circle" style="position: relative;">
360
- 🔔
361
- <span class="notification-dot"></span>
362
- </button>
363
- <button class="icon-btn icon-btn-circle" onclick="toggleTheme()">🌓</button>
364
- <div class="avatar avatar-sm">U</div>
365
- </div>
366
- </header>
367
-
368
- <div class="main-content">
369
- <aside class="sidebar">
370
- <div class="nav-section">
371
- <a href="#" class="nav-item active"><span>🏠</span> <span>Home</span></a>
372
- <a href="#" class="nav-item"><span>🔥</span> <span>Shorts</span></a>
373
- <a href="#" class="nav-item"><span>📺</span> <span>Subscriptions</span></a>
374
- </div>
375
- <div class="nav-section">
376
- <div class="nav-section-title">You</div>
377
- <a href="#" class="nav-item"><span>📃</span> <span>History</span></a>
378
- <a href="#" class="nav-item"><span>📁</span> <span>Playlists</span></a>
379
- <a href="#" class="nav-item"><span>👁️</span> <span>Your videos</span></a>
380
- <a href="#" class="nav-item"><span>⏰</span> <span>Watch later</span></a>
381
- <a href="#" class="nav-item"><span>👍</span> <span>Liked videos</span></a>
270
+ padding: 0.75rem;
271
+ overflow-y: auto;
272
+ background: linear-gradient(
273
+ 180deg,
274
+ rgba(15, 23, 42, 0.98) 0%,
275
+ rgba(8, 8, 26, 0.98) 100%
276
+ );
277
+ border-right: 1px solid rgba(255, 255, 255, 0.06);
278
+ }
279
+ .nav-item {
280
+ display: flex;
281
+ align-items: center;
282
+ gap: 1.25rem;
283
+ padding: 0.75rem 1rem;
284
+ color: var(--text-secondary, #94a3b8);
285
+ text-decoration: none;
286
+ font-size: 0.9375rem;
287
+ transition: all 0.2s;
288
+ border-radius: 12px;
289
+ border: 1px solid transparent;
290
+ margin-bottom: 0.25rem;
291
+ }
292
+ .nav-item .q-icon {
293
+ width: 20px;
294
+ height: 20px;
295
+ flex-shrink: 0;
296
+ }
297
+ .video-app .nav-item:hover,
298
+ .video-app .nav-item.active {
299
+ background: rgba(0, 212, 255, 0.08);
300
+ border-color: rgba(0, 212, 255, 0.15);
301
+ color: var(--text-primary, #f1f5f9);
302
+ }
303
+ .nav-item.active {
304
+ font-weight: 600;
305
+ color: #00d4ff;
306
+ }
307
+ .nav-item.active .q-icon {
308
+ color: #00d4ff;
309
+ }
310
+ .nav-section {
311
+ padding: 0.75rem 0;
312
+ border-bottom: 1px solid rgba(255, 255, 255, 0.06);
313
+ margin-bottom: 0.5rem;
314
+ }
315
+ .nav-title {
316
+ padding: 0.5rem 1rem;
317
+ font-size: 0.75rem;
318
+ font-weight: 700;
319
+ text-transform: uppercase;
320
+ letter-spacing: 0.1em;
321
+ color: var(--text-muted, #64748b);
322
+ }
323
+
324
+ .video-feed {
325
+ padding: 1.5rem;
326
+ overflow-y: auto;
327
+ background: rgba(5, 5, 16, 0.3);
328
+ }
329
+ .category-tabs {
330
+ display: flex;
331
+ gap: 0.75rem;
332
+ margin-bottom: 1.5rem;
333
+ overflow-x: auto;
334
+ padding-bottom: 0.5rem;
335
+ }
336
+ .category-tab {
337
+ padding: 0.5rem 1rem;
338
+ background: rgba(255, 255, 255, 0.05);
339
+ border: 1px solid rgba(255, 255, 255, 0.1);
340
+ border-radius: 9999px;
341
+ color: var(--text-primary, #f1f5f9);
342
+ font-size: 0.875rem;
343
+ cursor: pointer;
344
+ white-space: nowrap;
345
+ transition: all 0.2s;
346
+ backdrop-filter: blur(10px);
347
+ }
348
+ .category-tab:hover {
349
+ background: rgba(0, 212, 255, 0.1);
350
+ border-color: rgba(0, 212, 255, 0.3);
351
+ color: #00d4ff;
352
+ }
353
+ .category-tab.active {
354
+ background: linear-gradient(
355
+ 135deg,
356
+ rgba(0, 212, 255, 0.2),
357
+ rgba(139, 92, 246, 0.2)
358
+ );
359
+ border-color: rgba(0, 212, 255, 0.4);
360
+ color: #00d4ff;
361
+ box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
362
+ }
363
+
364
+ .video-grid {
365
+ display: grid;
366
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
367
+ gap: 1.5rem;
368
+ }
369
+ .video-card {
370
+ cursor: pointer;
371
+ transition:
372
+ transform 0.3s,
373
+ box-shadow 0.3s;
374
+ border-radius: 16px;
375
+ background: rgba(255, 255, 255, 0.03);
376
+ border: 1px solid rgba(255, 255, 255, 0.08);
377
+ padding: 0.75rem;
378
+ backdrop-filter: blur(10px);
379
+ }
380
+ .video-card:hover {
381
+ transform: translateY(-4px);
382
+ box-shadow:
383
+ 0 20px 40px rgba(0, 0, 0, 0.3),
384
+ 0 0 30px rgba(0, 212, 255, 0.1);
385
+ border-color: rgba(0, 212, 255, 0.2);
386
+ }
387
+ .video-thumbnail {
388
+ position: relative;
389
+ aspect-ratio: 16/9;
390
+ background: linear-gradient(
391
+ 135deg,
392
+ rgba(0, 212, 255, 0.1),
393
+ rgba(139, 92, 246, 0.1)
394
+ );
395
+ border-radius: 12px;
396
+ overflow: hidden;
397
+ margin-bottom: 0.75rem;
398
+ border: 1px solid rgba(255, 255, 255, 0.08);
399
+ }
400
+ .video-thumbnail img {
401
+ width: 100%;
402
+ height: 100%;
403
+ object-fit: cover;
404
+ }
405
+ .video-duration {
406
+ position: absolute;
407
+ bottom: 0.5rem;
408
+ right: 0.5rem;
409
+ padding: 0.25rem 0.5rem;
410
+ background: rgba(0, 0, 0, 0.8);
411
+ backdrop-filter: blur(10px);
412
+ border-radius: 6px;
413
+ font-size: 0.75rem;
414
+ font-weight: 600;
415
+ border: 1px solid rgba(255, 255, 255, 0.1);
416
+ }
417
+ .video-info {
418
+ display: flex;
419
+ gap: 0.875rem;
420
+ }
421
+ .channel-avatar {
422
+ width: 36px;
423
+ height: 36px;
424
+ border-radius: 50%;
425
+ background: linear-gradient(135deg, #3b82f6, #8b5cf6);
426
+ display: flex;
427
+ align-items: center;
428
+ justify-content: center;
429
+ font-weight: 600;
430
+ font-size: 0.875rem;
431
+ flex-shrink: 0;
432
+ border: 2px solid rgba(139, 92, 246, 0.3);
433
+ box-shadow: 0 0 10px rgba(139, 92, 246, 0.2);
434
+ }
435
+ .video-meta {
436
+ flex: 1;
437
+ }
438
+ .video-title {
439
+ font-size: 0.9375rem;
440
+ font-weight: 600;
441
+ line-height: 1.4;
442
+ margin-bottom: 0.375rem;
443
+ display: -webkit-box;
444
+ -webkit-line-clamp: 2;
445
+ -webkit-box-orient: vertical;
446
+ overflow: hidden;
447
+ }
448
+ .video-channel {
449
+ font-size: 0.875rem;
450
+ color: var(--text-secondary, #94a3b8);
451
+ margin-bottom: 0.25rem;
452
+ }
453
+ .video-stats {
454
+ font-size: 0.8125rem;
455
+ color: var(--text-muted, #64748b);
456
+ }
457
+
458
+ .featured-section {
459
+ margin-bottom: 2rem;
460
+ }
461
+ .featured-header {
462
+ display: flex;
463
+ align-items: center;
464
+ justify-content: space-between;
465
+ margin-bottom: 1rem;
466
+ }
467
+ .featured-header h2 {
468
+ font-size: 1.25rem;
469
+ font-weight: 700;
470
+ display: flex;
471
+ align-items: center;
472
+ gap: 0.5rem;
473
+ background: linear-gradient(135deg, #f1f5f9, #94a3b8);
474
+ -webkit-background-clip: text;
475
+ -webkit-text-fill-color: transparent;
476
+ background-clip: text;
477
+ }
478
+ .featured-header h2 .q-icon {
479
+ width: 22px;
480
+ height: 22px;
481
+ background: linear-gradient(135deg, #00d4ff, #f59e0b);
482
+ }
483
+ .see-all {
484
+ color: var(--color-starlight, #00d4ff);
485
+ text-decoration: none;
486
+ font-size: 0.875rem;
487
+ font-weight: 500;
488
+ transition: all 0.2s;
489
+ }
490
+ .see-all:hover {
491
+ text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
492
+ }
493
+
494
+ .shorts-grid {
495
+ display: grid;
496
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
497
+ gap: 1rem;
498
+ }
499
+ .short-card {
500
+ cursor: pointer;
501
+ transition:
502
+ transform 0.3s,
503
+ box-shadow 0.3s;
504
+ border-radius: 16px;
505
+ background: rgba(255, 255, 255, 0.03);
506
+ border: 1px solid rgba(255, 255, 255, 0.08);
507
+ padding: 0.5rem;
508
+ backdrop-filter: blur(10px);
509
+ }
510
+ .short-card:hover {
511
+ transform: scale(1.02);
512
+ box-shadow:
513
+ 0 15px 30px rgba(0, 0, 0, 0.3),
514
+ 0 0 20px rgba(139, 92, 246, 0.1);
515
+ border-color: rgba(139, 92, 246, 0.3);
516
+ }
517
+ .short-thumbnail {
518
+ aspect-ratio: 9/16;
519
+ background: linear-gradient(
520
+ 135deg,
521
+ rgba(139, 92, 246, 0.15),
522
+ rgba(236, 72, 153, 0.15)
523
+ );
524
+ border-radius: 12px;
525
+ overflow: hidden;
526
+ margin-bottom: 0.5rem;
527
+ position: relative;
528
+ border: 1px solid rgba(255, 255, 255, 0.08);
529
+ }
530
+ .short-thumbnail img {
531
+ width: 100%;
532
+ height: 100%;
533
+ object-fit: cover;
534
+ }
535
+ .short-views {
536
+ position: absolute;
537
+ bottom: 0.5rem;
538
+ left: 0.5rem;
539
+ font-size: 0.75rem;
540
+ font-weight: 600;
541
+ background: rgba(0, 0, 0, 0.8);
542
+ backdrop-filter: blur(10px);
543
+ padding: 0.25rem 0.5rem;
544
+ border-radius: 6px;
545
+ border: 1px solid rgba(255, 255, 255, 0.1);
546
+ }
547
+ .short-title {
548
+ font-size: 0.875rem;
549
+ font-weight: 500;
550
+ line-height: 1.3;
551
+ display: -webkit-box;
552
+ -webkit-line-clamp: 2;
553
+ -webkit-box-orient: vertical;
554
+ overflow: hidden;
555
+ padding: 0 0.25rem;
556
+ }
557
+
558
+ html[data-theme="light"] {
559
+ --bg-primary: #f8fafc;
560
+ --text-primary: #0f172a;
561
+ --text-secondary: #475569;
562
+ --text-muted: #94a3b8;
563
+ color-scheme: light;
564
+ }
565
+ html[data-theme="light"] body {
566
+ background: linear-gradient(
567
+ 135deg,
568
+ #f8fafc 0%,
569
+ #e2e8f0 50%,
570
+ #f1f5f9 100%
571
+ );
572
+ }
573
+ html[data-theme="light"] header {
574
+ background: rgba(255, 255, 255, 0.8);
575
+ border-bottom-color: rgba(0, 0, 0, 0.08);
576
+ }
577
+ html[data-theme="light"] .sidebar {
578
+ background: rgba(255, 255, 255, 0.6);
579
+ border-right-color: rgba(0, 0, 0, 0.06);
580
+ }
581
+ html[data-theme="light"] .video-feed {
582
+ background: rgba(255, 255, 255, 0.3);
583
+ }
584
+ html[data-theme="light"] .nav-item:hover,
585
+ html[data-theme="light"] .nav-item.active {
586
+ background: rgba(0, 212, 255, 0.1);
587
+ }
588
+ html[data-theme="light"] .category-tab {
589
+ background: rgba(255, 255, 255, 0.8);
590
+ border-color: rgba(0, 0, 0, 0.1);
591
+ }
592
+ html[data-theme="light"] .category-tab.active {
593
+ background: linear-gradient(
594
+ 135deg,
595
+ rgba(0, 212, 255, 0.15),
596
+ rgba(139, 92, 246, 0.15)
597
+ );
598
+ border-color: rgba(0, 212, 255, 0.3);
599
+ color: #2563eb;
600
+ }
601
+ html[data-theme="light"] .video-card,
602
+ html[data-theme="light"] .short-card {
603
+ background: rgba(255, 255, 255, 0.8);
604
+ border-color: rgba(0, 0, 0, 0.08);
605
+ }
606
+ html[data-theme="light"] .video-thumbnail,
607
+ html[data-theme="light"] .short-thumbnail {
608
+ background: linear-gradient(
609
+ 135deg,
610
+ rgba(0, 212, 255, 0.05),
611
+ rgba(139, 92, 246, 0.05)
612
+ );
613
+ }
614
+ html[data-theme="light"] .video-search-input {
615
+ background: rgba(255, 255, 255, 0.9);
616
+ border-color: rgba(0, 0, 0, 0.1);
617
+ }
618
+
619
+ @media (max-width: 1024px) {
620
+ .video-grid {
621
+ grid-template-columns: repeat(
622
+ auto-fill,
623
+ minmax(280px, 1fr)
624
+ );
625
+ }
626
+ }
627
+ @media (max-width: 640px) {
628
+ .search-bar {
629
+ display: none;
630
+ }
631
+ .video-grid {
632
+ grid-template-columns: 1fr;
633
+ }
634
+ .shorts-grid {
635
+ grid-template-columns: repeat(2, 1fr);
636
+ }
637
+ }
638
+ ::-webkit-scrollbar {
639
+ width: 8px;
640
+ }
641
+ ::-webkit-scrollbar-track {
642
+ background: transparent;
643
+ }
644
+ ::-webkit-scrollbar-thumb {
645
+ background: linear-gradient(
646
+ 135deg,
647
+ var(--q-color-starlight-peach, #f97316) 0%,
648
+ var(--q-color-starlight-blue, #00d4ff) 100%
649
+ );
650
+ border-radius: 10px;
651
+ border: 2px solid var(--q-bg-primary, #050510);
652
+ }
653
+ ::-webkit-scrollbar-thumb:hover {
654
+ background: linear-gradient(
655
+ 135deg,
656
+ var(--q-color-starlight-peach, #f97316) 0%,
657
+ var(--q-color-starlight-blue, #00d4ff) 100%
658
+ );
659
+ }
660
+ html[data-theme="light"] ::-webkit-scrollbar-thumb {
661
+ background: linear-gradient(
662
+ 135deg,
663
+ var(--q-color-starlight-peach, #f97316) 40%,
664
+ var(--q-color-starlight-blue, #00d4ff) 100%
665
+ );
666
+ border-color: var(--q-light-bg, #f1f5f9);
667
+ }
668
+
669
+ .hidden {
670
+ display: none !important;
671
+ }
672
+ </style>
673
+ </head>
674
+ <body>
675
+ <div class="stars"></div>
676
+ <div class="video-app">
677
+ <header>
678
+ <div class="logo">
679
+ <div class="logo-icon">
680
+ <span class="q-icon q-icon-play-fill"></span>
681
+ </div>
682
+ <span>Starlight</span>
382
683
  </div>
383
- <div class="nav-section">
384
- <div class="nav-section-title">Subscriptions</div>
385
- <a href="#" class="nav-item"><span>🎮</span> <span>Gaming Channel</span></a>
386
- <a href="#" class="nav-item"><span>💻</span> <span>Tech Review</span></a>
387
- <a href="#" class="nav-item"><span>🎵</span> <span>Music Studio</span></a>
388
- <a href="#" class="nav-item"><span>🎬</span> <span>Film Makers</span></a>
684
+ <div class="search-bar">
685
+ <input
686
+ type="text"
687
+ class="video-search-input"
688
+ placeholder="Search videos..."
689
+ />
690
+ <button class="search-btn">
691
+ <span class="q-icon q-icon-search"></span>
692
+ </button>
389
693
  </div>
390
- </aside>
391
-
392
- <main class="video-feed">
393
- <div class="category-tabs">
394
- <button class="category-tab active">All</button>
395
- <button class="category-tab">Gaming</button>
396
- <button class="category-tab">Music</button>
397
- <button class="category-tab">Technology</button>
398
- <button class="category-tab">Programming</button>
399
- <button class="category-tab">Design</button>
400
- <button class="category-tab">Science</button>
401
- <button class="category-tab">Comedy</button>
402
- <button class="category-tab">News</button>
403
- <button class="category-tab">Sports</button>
694
+ <div class="header-actions">
695
+ <button class="icon-btn">
696
+ <span class="q-icon q-icon-video"></span>
697
+ </button>
698
+ <button class="icon-btn" style="position: relative">
699
+ <span class="q-icon q-icon-notification"></span>
700
+ <span class="notification-dot"></span>
701
+ </button>
702
+ <button class="icon-btn theme-toggle">
703
+ <span class="q-icon q-icon-sun sun-icon hidden"></span
704
+ ><span
705
+ class="q-icon q-icon-moon moon-icon hidden"
706
+ ></span
707
+ ><span class="q-icon q-icon-display auto-icon"></span>
708
+ </button>
709
+ <div class="user-avatar">U</div>
404
710
  </div>
405
-
406
- <section class="featured-section">
407
- <div class="featured-header">
408
- <h2>🔥 Trending Now</h2>
409
- <a href="#" class="see-all">See all</a>
711
+ </header>
712
+
713
+ <div class="main-content">
714
+ <aside class="sidebar">
715
+ <div class="nav-section">
716
+ <a href="#" class="nav-item active"
717
+ ><span class="q-icon q-icon-home-fill"></span>
718
+ <span>Home</span></a
719
+ >
720
+ <a href="#" class="nav-item"
721
+ ><span class="q-icon q-icon-grid"></span>
722
+ <span>Shorts</span></a
723
+ >
724
+ <a href="#" class="nav-item"
725
+ ><span class="q-icon q-icon-users"></span>
726
+ <span>Subscriptions</span></a
727
+ >
410
728
  </div>
411
- <div class="video-grid">
412
- <div class="video-card">
413
- <div class="video-thumbnail">
414
- <img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?w=640&h=360&fit=crop" alt="Video">
415
- <span class="video-duration">12:34</span>
416
- </div>
417
- <div class="video-info">
418
- <div class="channel-avatar">G</div>
419
- <div class="video-meta">
420
- <h3 class="video-title">Epic Gaming Moments That Will Blow Your Mind</h3>
421
- <p class="video-channel">Gaming Channel</p>
422
- <p class="video-stats">2.3M views • 2 days ago</p>
423
- </div>
424
- </div>
729
+ <div class="nav-section">
730
+ <div class="nav-title">You</div>
731
+ <a href="#" class="nav-item"
732
+ ><span class="q-icon q-icon-clock-fill"></span>
733
+ <span>History</span></a
734
+ >
735
+ <a href="#" class="nav-item"
736
+ ><span class="q-icon q-icon-content"></span>
737
+ <span>Playlists</span></a
738
+ >
739
+ <a href="#" class="nav-item"
740
+ ><span class="q-icon q-icon-eye-fill"></span>
741
+ <span>Your videos</span></a
742
+ >
743
+ <a href="#" class="nav-item"
744
+ ><span class="q-icon q-icon-clock-fill"></span>
745
+ <span>Watch later</span></a
746
+ >
747
+ <a href="#" class="nav-item"
748
+ ><span class="q-icon q-icon-heart-fill"></span>
749
+ <span>Liked videos</span></a
750
+ >
751
+ </div>
752
+ <div class="nav-section">
753
+ <div class="nav-title">Subscriptions</div>
754
+ <a href="#" class="nav-item"
755
+ ><span class="q-icon q-icon-grid"></span>
756
+ <span>Gaming Channel</span></a
757
+ >
758
+ <a href="#" class="nav-item"
759
+ ><span class="q-icon q-icon-display"></span>
760
+ <span>Tech Review</span></a
761
+ >
762
+ <a href="#" class="nav-item"
763
+ ><span class="q-icon q-icon-music"></span>
764
+ <span>Music Studio</span></a
765
+ >
766
+ <a href="#" class="nav-item"
767
+ ><span class="q-icon q-icon-play-fill"></span>
768
+ <span>Film Makers</span></a
769
+ >
770
+ </div>
771
+ </aside>
772
+
773
+ <main class="video-feed">
774
+ <div class="category-tabs">
775
+ <button class="category-tab active">All</button>
776
+ <button class="category-tab">Gaming</button>
777
+ <button class="category-tab">Music</button>
778
+ <button class="category-tab">Technology</button>
779
+ <button class="category-tab">Programming</button>
780
+ <button class="category-tab">Design</button>
781
+ <button class="category-tab">Science</button>
782
+ <button class="category-tab">Comedy</button>
783
+ <button class="category-tab">News</button>
784
+ <button class="category-tab">Sports</button>
785
+ </div>
786
+
787
+ <section class="featured-section">
788
+ <div class="featured-header">
789
+ <h2>
790
+ <span class="q-icon q-icon-trend-up"></span>
791
+ Trending Now
792
+ </h2>
793
+ <a href="#" class="see-all">See all</a>
425
794
  </div>
426
- <div class="video-card">
427
- <div class="video-thumbnail">
428
- <img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=640&h=360&fit=crop" alt="Video">
429
- <span class="video-duration">8:45</span>
430
- </div>
431
- <div class="video-info">
432
- <div class="channel-avatar">T</div>
433
- <div class="video-meta">
434
- <h3 class="video-title">The Future of AI Technology in 2025</h3>
435
- <p class="video-channel">Tech Review</p>
436
- <p class="video-stats">1.8M views • 5 hours ago</p>
795
+ <div class="video-grid">
796
+ <div class="video-card">
797
+ <div class="video-thumbnail">
798
+ <img
799
+ src="https://images.unsplash.com/photo-1542751371-adc38448a05e?w=640&h=360&fit=crop"
800
+ alt="Video"
801
+ />
802
+ <span class="video-duration">12:34</span>
437
803
  </div>
438
- </div>
439
- </div>
440
- <div class="video-card">
441
- <div class="video-thumbnail">
442
- <img src="https://images.unsplash.com/photo-1511379938547-c1f69419868d?w=640&h=360&fit=crop" alt="Video">
443
- <span class="video-duration">15:20</span>
444
- </div>
445
- <div class="video-info">
446
- <div class="channel-avatar">M</div>
447
- <div class="video-meta">
448
- <h3 class="video-title">Top 10 Songs That Defined This Year</h3>
449
- <p class="video-channel">Music Studio</p>
450
- <p class="video-stats">3.1M views • 1 week ago</p>
804
+ <div class="video-info">
805
+ <div class="channel-avatar">G</div>
806
+ <div class="video-meta">
807
+ <h3 class="video-title">
808
+ Epic Gaming Moments That Will Blow
809
+ Your Mind
810
+ </h3>
811
+ <p class="video-channel">
812
+ Gaming Channel
813
+ </p>
814
+ <p class="video-stats">
815
+ 2.3M views • 2 days ago
816
+ </p>
817
+ </div>
451
818
  </div>
452
819
  </div>
453
- </div>
454
- <div class="video-card">
455
- <div class="video-thumbnail">
456
- <img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=640&h=360&fit=crop" alt="Video">
457
- <span class="video-duration">22:15</span>
820
+ <div class="video-card">
821
+ <div class="video-thumbnail">
822
+ <img
823
+ src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=640&h=360&fit=crop"
824
+ alt="Video"
825
+ />
826
+ <span class="video-duration">8:45</span>
827
+ </div>
828
+ <div class="video-info">
829
+ <div class="channel-avatar">T</div>
830
+ <div class="video-meta">
831
+ <h3 class="video-title">
832
+ The Future of AI Technology in 2025
833
+ </h3>
834
+ <p class="video-channel">Tech Review</p>
835
+ <p class="video-stats">
836
+ 1.8M views • 5 hours ago
837
+ </p>
838
+ </div>
839
+ </div>
458
840
  </div>
459
- <div class="video-info">
460
- <div class="channel-avatar">C</div>
461
- <div class="video-meta">
462
- <h3 class="video-title">Learn React in 2024 - Complete Tutorial</h3>
463
- <p class="video-channel">Code Masters</p>
464
- <p class="video-stats">856K views • 3 days ago</p>
841
+ <div class="video-card">
842
+ <div class="video-thumbnail">
843
+ <img
844
+ src="https://images.unsplash.com/photo-1511379938547-c1f69419868d?w=640&h=360&fit=crop"
845
+ alt="Video"
846
+ />
847
+ <span class="video-duration">15:20</span>
848
+ </div>
849
+ <div class="video-info">
850
+ <div class="channel-avatar">M</div>
851
+ <div class="video-meta">
852
+ <h3 class="video-title">
853
+ Top 10 Songs That Defined This Year
854
+ </h3>
855
+ <p class="video-channel">
856
+ Music Studio
857
+ </p>
858
+ <p class="video-stats">
859
+ 3.1M views • 1 week ago
860
+ </p>
861
+ </div>
465
862
  </div>
466
863
  </div>
467
- </div>
468
- </div>
469
- </section>
470
-
471
- <section class="featured-section">
472
- <div class="featured-header">
473
- <h2>⚡ Shorts</h2>
474
- <a href="#" class="see-all">See all</a>
475
- </div>
476
- <div class="shorts-grid">
477
- <div class="short-card">
478
- <div class="short-thumbnail">
479
- <img src="https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=400&h=711&fit=crop" alt="Short">
480
- <span class="short-views">1.2M views</span>
864
+ <div class="video-card">
865
+ <div class="video-thumbnail">
866
+ <img
867
+ src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=640&h=360&fit=crop"
868
+ alt="Video"
869
+ />
870
+ <span class="video-duration">22:15</span>
871
+ </div>
872
+ <div class="video-info">
873
+ <div class="channel-avatar">C</div>
874
+ <div class="video-meta">
875
+ <h3 class="video-title">
876
+ Learn React in 2024 - Complete
877
+ Tutorial
878
+ </h3>
879
+ <p class="video-channel">
880
+ Code Masters
881
+ </p>
882
+ <p class="video-stats">
883
+ 856K views • 3 days ago
884
+ </p>
885
+ </div>
886
+ </div>
481
887
  </div>
482
- <h3 class="short-title">This trick will change your life! 😱</h3>
483
888
  </div>
484
- <div class="short-card">
485
- <div class="short-thumbnail">
486
- <img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=400&h=711&fit=crop" alt="Short">
487
- <span class="short-views">890K views</span>
488
- </div>
489
- <h3 class="short-title">Gaming setup tour 2024 🎮</h3>
889
+ </section>
890
+
891
+ <section class="featured-section">
892
+ <div class="featured-header">
893
+ <h2>
894
+ <span class="q-icon q-icon-grid"></span> Shorts
895
+ </h2>
896
+ <a href="#" class="see-all">See all</a>
490
897
  </div>
491
- <div class="short-card">
492
- <div class="short-thumbnail">
493
- <img src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?w=400&h=711&fit=crop" alt="Short">
494
- <span class="short-views">2.5M views</span>
898
+ <div class="shorts-grid">
899
+ <div class="short-card">
900
+ <div class="short-thumbnail">
901
+ <img
902
+ src="https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=400&h=711&fit=crop"
903
+ alt="Short"
904
+ />
905
+ <span class="short-views">1.2M views</span>
906
+ </div>
907
+ <h3 class="short-title">
908
+ This trick will change your life!
909
+ </h3>
495
910
  </div>
496
- <h3 class="short-title">Mac vs PC - The Truth 💻</h3>
497
- </div>
498
- <div class="short-card">
499
- <div class="short-thumbnail">
500
- <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=400&h=711&fit=crop" alt="Short">
501
- <span class="short-views">650K views</span>
911
+ <div class="short-card">
912
+ <div class="short-thumbnail">
913
+ <img
914
+ src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=400&h=711&fit=crop"
915
+ alt="Short"
916
+ />
917
+ <span class="short-views">890K views</span>
918
+ </div>
919
+ <h3 class="short-title">
920
+ Gaming setup tour 2024
921
+ </h3>
502
922
  </div>
503
- <h3 class="short-title">Music production tips 🎵</h3>
504
- </div>
505
- <div class="short-card">
506
- <div class="short-thumbnail">
507
- <img src="https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=400&h=711&fit=crop" alt="Short">
508
- <span class="short-views">3.2M views</span>
923
+ <div class="short-card">
924
+ <div class="short-thumbnail">
925
+ <img
926
+ src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?w=400&h=711&fit=crop"
927
+ alt="Short"
928
+ />
929
+ <span class="short-views">2.5M views</span>
930
+ </div>
931
+ <h3 class="short-title">
932
+ Mac vs PC - The Truth
933
+ </h3>
509
934
  </div>
510
- <h3 class="short-title">AI Robot Does Backflip! 🤖</h3>
511
- </div>
512
- <div class="short-card">
513
- <div class="short-thumbnail">
514
- <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=711&fit=crop" alt="Short">
515
- <span class="short-views">1.8M views</span>
935
+ <div class="short-card">
936
+ <div class="short-thumbnail">
937
+ <img
938
+ src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=400&h=711&fit=crop"
939
+ alt="Short"
940
+ />
941
+ <span class="short-views">650K views</span>
942
+ </div>
943
+ <h3 class="short-title">
944
+ Music production tips
945
+ </h3>
516
946
  </div>
517
- <h3 class="short-title">Epic drone footage 🏔️</h3>
518
- </div>
519
- </div>
520
- </section>
521
-
522
- <section>
523
- <div class="featured-header">
524
- <h2>📺 Recommended</h2>
525
- </div>
526
- <div class="video-grid">
527
- <div class="video-card">
528
- <div class="video-thumbnail">
529
- <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=640&h=360&fit=crop" alt="Video">
530
- <span class="video-duration">18:42</span>
947
+ <div class="short-card">
948
+ <div class="short-thumbnail">
949
+ <img
950
+ src="https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=400&h=711&fit=crop"
951
+ alt="Short"
952
+ />
953
+ <span class="short-views">3.2M views</span>
954
+ </div>
955
+ <h3 class="short-title">
956
+ AI Robot Does Backflip!
957
+ </h3>
531
958
  </div>
532
- <div class="video-info">
533
- <div class="channel-avatar">D</div>
534
- <div class="video-meta">
535
- <h3 class="video-title">The Art of Minimalist Design</h3>
536
- <p class="video-channel">Design Hub</p>
537
- <p class="video-stats">456K views • 4 days ago</p>
959
+ <div class="short-card">
960
+ <div class="short-thumbnail">
961
+ <img
962
+ src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=711&fit=crop"
963
+ alt="Short"
964
+ />
965
+ <span class="short-views">1.8M views</span>
538
966
  </div>
967
+ <h3 class="short-title">Epic drone footage</h3>
539
968
  </div>
540
969
  </div>
541
- <div class="video-card">
542
- <div class="video-thumbnail">
543
- <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=640&h=360&fit=crop" alt="Video">
544
- <span class="video-duration">45:00</span>
545
- </div>
546
- <div class="video-info">
547
- <div class="channel-avatar">S</div>
548
- <div class="video-meta">
549
- <h3 class="video-title">Space Exploration: Journey to Mars</h3>
550
- <p class="video-channel">Science Daily</p>
551
- <p class="video-stats">5.2M views • 1 month ago</p>
970
+ </section>
971
+
972
+ <section>
973
+ <div class="featured-header">
974
+ <h2>
975
+ <span class="q-icon q-icon-star"></span>
976
+ Recommended
977
+ </h2>
978
+ </div>
979
+ <div class="video-grid">
980
+ <div class="video-card">
981
+ <div class="video-thumbnail">
982
+ <img
983
+ src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=640&h=360&fit=crop"
984
+ alt="Video"
985
+ />
986
+ <span class="video-duration">18:42</span>
987
+ </div>
988
+ <div class="video-info">
989
+ <div class="channel-avatar">D</div>
990
+ <div class="video-meta">
991
+ <h3 class="video-title">
992
+ The Art of Minimalist Design
993
+ </h3>
994
+ <p class="video-channel">Design Hub</p>
995
+ <p class="video-stats">
996
+ 456K views • 4 days ago
997
+ </p>
998
+ </div>
552
999
  </div>
553
1000
  </div>
554
- </div>
555
- <div class="video-card">
556
- <div class="video-thumbnail">
557
- <img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=640&h=360&fit=crop" alt="Video">
558
- <span class="video-duration">32:18</span>
1001
+ <div class="video-card">
1002
+ <div class="video-thumbnail">
1003
+ <img
1004
+ src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=640&h=360&fit=crop"
1005
+ alt="Video"
1006
+ />
1007
+ <span class="video-duration">45:00</span>
1008
+ </div>
1009
+ <div class="video-info">
1010
+ <div class="channel-avatar">S</div>
1011
+ <div class="video-meta">
1012
+ <h3 class="video-title">
1013
+ Space Exploration: Journey to Mars
1014
+ </h3>
1015
+ <p class="video-channel">
1016
+ Science Daily
1017
+ </p>
1018
+ <p class="video-stats">
1019
+ 5.2M views • 1 month ago
1020
+ </p>
1021
+ </div>
1022
+ </div>
559
1023
  </div>
560
- <div class="video-info">
561
- <div class="channel-avatar">P</div>
562
- <div class="video-meta">
563
- <h3 class="video-title">Python for Beginners - Full Course</h3>
564
- <p class="video-channel">Programming Pro</p>
565
- <p class="video-stats">1.2M views • 2 weeks ago</p>
1024
+ <div class="video-card">
1025
+ <div class="video-thumbnail">
1026
+ <img
1027
+ src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=640&h=360&fit=crop"
1028
+ alt="Video"
1029
+ />
1030
+ <span class="video-duration">32:18</span>
1031
+ </div>
1032
+ <div class="video-info">
1033
+ <div class="channel-avatar">P</div>
1034
+ <div class="video-meta">
1035
+ <h3 class="video-title">
1036
+ Python for Beginners - Full Course
1037
+ </h3>
1038
+ <p class="video-channel">
1039
+ Programming Pro
1040
+ </p>
1041
+ <p class="video-stats">
1042
+ 1.2M views • 2 weeks ago
1043
+ </p>
1044
+ </div>
566
1045
  </div>
567
1046
  </div>
568
1047
  </div>
569
- </div>
570
- </section>
571
- </main>
1048
+ </section>
1049
+ </main>
1050
+ </div>
572
1051
  </div>
573
- </div>
574
-
575
- <script>
576
-
577
- document.querySelectorAll('.category-tab').forEach(tab => {
578
- tab.addEventListener('click', function() {
579
- document.querySelectorAll('.category-tab').forEach(t => t.classList.remove('active'));
580
- this.classList.add('active');
1052
+
1053
+ <script>
1054
+ document.querySelectorAll(".category-tab").forEach((tab) => {
1055
+ tab.addEventListener("click", function () {
1056
+ document
1057
+ .querySelectorAll(".category-tab")
1058
+ .forEach((t) => t.classList.remove("active"));
1059
+ this.classList.add("active");
1060
+ });
581
1061
  });
582
- });
583
- </script>
584
- </body>
1062
+ </script>
1063
+ </body>
585
1064
  </html>