@howssatoshi/quantumcss 1.5.2 → 1.6.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/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 +954 -0
|
@@ -0,0 +1,564 @@
|
|
|
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 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
|
+
.search-input {
|
|
50
|
+
flex: 1;
|
|
51
|
+
padding: 0.625rem 1rem;
|
|
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
|
+
}
|
|
58
|
+
.search-btn {
|
|
59
|
+
padding: 0 1.25rem;
|
|
60
|
+
background: rgba(255, 255, 255, 0.1);
|
|
61
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
62
|
+
border-left: none;
|
|
63
|
+
border-radius: 0 0.5rem 0.5rem 0;
|
|
64
|
+
color: var(--text-primary, #f1f5f9);
|
|
65
|
+
cursor: pointer;
|
|
66
|
+
}
|
|
67
|
+
.header-actions {
|
|
68
|
+
display: flex;
|
|
69
|
+
align-items: center;
|
|
70
|
+
gap: 1rem;
|
|
71
|
+
}
|
|
72
|
+
.icon-btn {
|
|
73
|
+
width: 40px; height: 40px;
|
|
74
|
+
border-radius: 50%;
|
|
75
|
+
background: transparent;
|
|
76
|
+
border: none;
|
|
77
|
+
color: var(--text-primary, #f1f5f9);
|
|
78
|
+
cursor: pointer;
|
|
79
|
+
display: flex; align-items: center; justify-content: center;
|
|
80
|
+
}
|
|
81
|
+
.icon-btn:hover { background: rgba(255, 255, 255, 0.1); }
|
|
82
|
+
.user-avatar {
|
|
83
|
+
width: 36px; height: 36px;
|
|
84
|
+
border-radius: 50%;
|
|
85
|
+
background: linear-gradient(135deg, #3b82f6, #00d4ff);
|
|
86
|
+
display: flex; align-items: center; justify-content: center;
|
|
87
|
+
font-weight: 600; font-size: 0.875rem;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/* Main Content */
|
|
91
|
+
.main-content {
|
|
92
|
+
display: grid;
|
|
93
|
+
grid-template-columns: 240px 1fr;
|
|
94
|
+
overflow: hidden;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/* Sidebar */
|
|
98
|
+
.sidebar {
|
|
99
|
+
padding: 0.75rem 0;
|
|
100
|
+
overflow-y: auto;
|
|
101
|
+
}
|
|
102
|
+
.nav-item {
|
|
103
|
+
display: flex;
|
|
104
|
+
align-items: center;
|
|
105
|
+
gap: 1.25rem;
|
|
106
|
+
padding: 0.75rem 1.5rem;
|
|
107
|
+
color: var(--text-secondary, #94a3b8);
|
|
108
|
+
text-decoration: none;
|
|
109
|
+
font-size: 0.9375rem;
|
|
110
|
+
transition: all 0.2s;
|
|
111
|
+
}
|
|
112
|
+
.video-app .nav-item:hover, .video-app .nav-item.active {
|
|
113
|
+
background: rgba(255, 255, 255, 0.05);
|
|
114
|
+
color: var(--text-primary, #f1f5f9);
|
|
115
|
+
}
|
|
116
|
+
.nav-item.active { font-weight: 600; }
|
|
117
|
+
.nav-section {
|
|
118
|
+
padding: 0.75rem 0;
|
|
119
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
120
|
+
}
|
|
121
|
+
.nav-title {
|
|
122
|
+
padding: 0.5rem 1.5rem;
|
|
123
|
+
font-size: 0.875rem;
|
|
124
|
+
font-weight: 600;
|
|
125
|
+
color: var(--text-muted, #64748b);
|
|
126
|
+
text-transform: uppercase;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
/* Video Feed */
|
|
130
|
+
.video-feed {
|
|
131
|
+
padding: 1.5rem;
|
|
132
|
+
overflow-y: auto;
|
|
133
|
+
}
|
|
134
|
+
.category-tabs {
|
|
135
|
+
display: flex;
|
|
136
|
+
gap: 0.75rem;
|
|
137
|
+
margin-bottom: 1.5rem;
|
|
138
|
+
overflow-x: auto;
|
|
139
|
+
padding-bottom: 0.5rem;
|
|
140
|
+
}
|
|
141
|
+
.category-tab {
|
|
142
|
+
padding: 0.5rem 1rem;
|
|
143
|
+
background: rgba(255, 255, 255, 0.05);
|
|
144
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
145
|
+
border-radius: 0.5rem;
|
|
146
|
+
color: var(--text-primary, #f1f5f9);
|
|
147
|
+
font-size: 0.875rem;
|
|
148
|
+
cursor: pointer;
|
|
149
|
+
white-space: nowrap;
|
|
150
|
+
transition: all 0.2s;
|
|
151
|
+
}
|
|
152
|
+
.category-tab:hover, .category-tab.active {
|
|
153
|
+
background: var(--text-primary, #f1f5f9);
|
|
154
|
+
color: var(--bg-primary, #0a0a0a);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/* Video Grid */
|
|
158
|
+
.video-grid {
|
|
159
|
+
display: grid;
|
|
160
|
+
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
161
|
+
gap: 1.5rem;
|
|
162
|
+
}
|
|
163
|
+
.video-card {
|
|
164
|
+
cursor: pointer;
|
|
165
|
+
transition: transform 0.2s;
|
|
166
|
+
}
|
|
167
|
+
.video-card:hover { transform: scale(1.02); }
|
|
168
|
+
.video-thumbnail {
|
|
169
|
+
position: relative;
|
|
170
|
+
aspect-ratio: 16/9;
|
|
171
|
+
background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
|
|
172
|
+
border-radius: 0.75rem;
|
|
173
|
+
overflow: hidden;
|
|
174
|
+
margin-bottom: 0.75rem;
|
|
175
|
+
}
|
|
176
|
+
.video-thumbnail img {
|
|
177
|
+
width: 100%; height: 100%;
|
|
178
|
+
object-fit: cover;
|
|
179
|
+
}
|
|
180
|
+
.video-duration {
|
|
181
|
+
position: absolute;
|
|
182
|
+
bottom: 0.5rem;
|
|
183
|
+
right: 0.5rem;
|
|
184
|
+
padding: 0.25rem 0.5rem;
|
|
185
|
+
background: rgba(0, 0, 0, 0.8);
|
|
186
|
+
border-radius: 0.25rem;
|
|
187
|
+
font-size: 0.75rem;
|
|
188
|
+
font-weight: 600;
|
|
189
|
+
}
|
|
190
|
+
.video-info {
|
|
191
|
+
display: flex;
|
|
192
|
+
gap: 0.875rem;
|
|
193
|
+
}
|
|
194
|
+
.channel-avatar {
|
|
195
|
+
width: 36px; height: 36px;
|
|
196
|
+
border-radius: 50%;
|
|
197
|
+
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
|
|
198
|
+
display: flex; align-items: center; justify-content: center;
|
|
199
|
+
font-weight: 600; font-size: 0.875rem;
|
|
200
|
+
flex-shrink: 0;
|
|
201
|
+
}
|
|
202
|
+
.video-meta { flex: 1; }
|
|
203
|
+
.video-title {
|
|
204
|
+
font-size: 0.9375rem;
|
|
205
|
+
font-weight: 600;
|
|
206
|
+
line-height: 1.4;
|
|
207
|
+
margin-bottom: 0.375rem;
|
|
208
|
+
display: -webkit-box;
|
|
209
|
+
-webkit-line-clamp: 2;
|
|
210
|
+
-webkit-box-orient: vertical;
|
|
211
|
+
overflow: hidden;
|
|
212
|
+
}
|
|
213
|
+
.video-channel {
|
|
214
|
+
font-size: 0.875rem;
|
|
215
|
+
color: var(--text-secondary, #94a3b8);
|
|
216
|
+
margin-bottom: 0.25rem;
|
|
217
|
+
}
|
|
218
|
+
.video-stats {
|
|
219
|
+
font-size: 0.8125rem;
|
|
220
|
+
color: var(--text-muted, #64748b);
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
/* Featured Section */
|
|
224
|
+
.featured-section {
|
|
225
|
+
margin-bottom: 2rem;
|
|
226
|
+
}
|
|
227
|
+
.featured-header {
|
|
228
|
+
display: flex;
|
|
229
|
+
align-items: center;
|
|
230
|
+
justify-content: space-between;
|
|
231
|
+
margin-bottom: 1rem;
|
|
232
|
+
}
|
|
233
|
+
.featured-header h2 {
|
|
234
|
+
font-size: 1.25rem;
|
|
235
|
+
font-weight: 700;
|
|
236
|
+
display: flex;
|
|
237
|
+
align-items: center;
|
|
238
|
+
gap: 0.5rem;
|
|
239
|
+
}
|
|
240
|
+
.see-all {
|
|
241
|
+
color: var(--color-starlight, #00d4ff);
|
|
242
|
+
text-decoration: none;
|
|
243
|
+
font-size: 0.875rem;
|
|
244
|
+
font-weight: 500;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
/* Shorts */
|
|
248
|
+
.shorts-grid {
|
|
249
|
+
display: grid;
|
|
250
|
+
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
251
|
+
gap: 1rem;
|
|
252
|
+
}
|
|
253
|
+
.short-card {
|
|
254
|
+
cursor: pointer;
|
|
255
|
+
transition: transform 0.2s;
|
|
256
|
+
}
|
|
257
|
+
.short-card:hover { transform: scale(1.02); }
|
|
258
|
+
.short-thumbnail {
|
|
259
|
+
aspect-ratio: 9/16;
|
|
260
|
+
background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
|
|
261
|
+
border-radius: 0.75rem;
|
|
262
|
+
overflow: hidden;
|
|
263
|
+
margin-bottom: 0.5rem;
|
|
264
|
+
position: relative;
|
|
265
|
+
}
|
|
266
|
+
.short-thumbnail img {
|
|
267
|
+
width: 100%; height: 100%;
|
|
268
|
+
object-fit: cover;
|
|
269
|
+
}
|
|
270
|
+
.short-views {
|
|
271
|
+
position: absolute;
|
|
272
|
+
bottom: 0.5rem;
|
|
273
|
+
left: 0.5rem;
|
|
274
|
+
font-size: 0.75rem;
|
|
275
|
+
font-weight: 600;
|
|
276
|
+
background: rgba(0, 0, 0, 0.7);
|
|
277
|
+
padding: 0.25rem 0.5rem;
|
|
278
|
+
border-radius: 0.25rem;
|
|
279
|
+
}
|
|
280
|
+
.short-title {
|
|
281
|
+
font-size: 0.875rem;
|
|
282
|
+
font-weight: 500;
|
|
283
|
+
line-height: 1.3;
|
|
284
|
+
display: -webkit-box;
|
|
285
|
+
-webkit-line-clamp: 2;
|
|
286
|
+
-webkit-box-orient: vertical;
|
|
287
|
+
overflow: hidden;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
/* Light Mode */
|
|
291
|
+
body.light-mode {
|
|
292
|
+
--bg-primary: #ffffff;
|
|
293
|
+
--text-primary: #0f0f0f;
|
|
294
|
+
--text-secondary: #606060;
|
|
295
|
+
--text-muted: #909090;
|
|
296
|
+
}
|
|
297
|
+
body.light-mode header { background: #ffffff; border-bottom-color: #e5e5e5; }
|
|
298
|
+
body.light-mode .nav-item:hover, body.light-mode .nav-item.active { background: #f2f2f2; }
|
|
299
|
+
body.light-mode .category-tab { background: #f2f2f2; border-color: #e5e5e5; color: #0f0f0f; }
|
|
300
|
+
body.light-mode .category-tab.active { background: #0f0f0f; color: #ffffff; }
|
|
301
|
+
body.light-mode .video-thumbnail, body.light-mode .short-thumbnail { background: #f2f2f2; }
|
|
302
|
+
|
|
303
|
+
@media (max-width: 1024px) {
|
|
304
|
+
.main-content { grid-template-columns: 1fr; }
|
|
305
|
+
.sidebar { display: none; }
|
|
306
|
+
.video-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
|
|
307
|
+
}
|
|
308
|
+
@media (max-width: 640px) {
|
|
309
|
+
.search-bar { display: none; }
|
|
310
|
+
.video-grid { grid-template-columns: 1fr; }
|
|
311
|
+
.shorts-grid { grid-template-columns: repeat(2, 1fr); }
|
|
312
|
+
}
|
|
313
|
+
::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
314
|
+
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; }
|
|
315
|
+
body.light-mode ::-webkit-scrollbar-thumb { background: #ccc; }
|
|
316
|
+
</style>
|
|
317
|
+
</head>
|
|
318
|
+
<body>
|
|
319
|
+
<div class="video-app">
|
|
320
|
+
<header>
|
|
321
|
+
<div class="logo">
|
|
322
|
+
<div class="logo-icon">▶️</div>
|
|
323
|
+
<span>Starlight</span>
|
|
324
|
+
</div>
|
|
325
|
+
<div class="search-bar">
|
|
326
|
+
<input type="text" class="search-input" placeholder="Search">
|
|
327
|
+
<button class="search-btn">🔍</button>
|
|
328
|
+
</div>
|
|
329
|
+
<div class="header-actions">
|
|
330
|
+
<button class="icon-btn icon-btn-circle">📹</button>
|
|
331
|
+
<button class="icon-btn icon-btn-circle" style="position: relative;">
|
|
332
|
+
🔔
|
|
333
|
+
<span class="notification-dot"></span>
|
|
334
|
+
</button>
|
|
335
|
+
<button class="icon-btn icon-btn-circle" onclick="toggleTheme()">🌓</button>
|
|
336
|
+
<div class="avatar avatar-sm">U</div>
|
|
337
|
+
</div>
|
|
338
|
+
</header>
|
|
339
|
+
|
|
340
|
+
<div class="main-content">
|
|
341
|
+
<aside class="sidebar">
|
|
342
|
+
<div class="nav-section">
|
|
343
|
+
<a href="#" class="nav-item active"><span>🏠</span> <span>Home</span></a>
|
|
344
|
+
<a href="#" class="nav-item"><span>🔥</span> <span>Shorts</span></a>
|
|
345
|
+
<a href="#" class="nav-item"><span>📺</span> <span>Subscriptions</span></a>
|
|
346
|
+
</div>
|
|
347
|
+
<div class="nav-section">
|
|
348
|
+
<div class="nav-section-title">You</div>
|
|
349
|
+
<a href="#" class="nav-item"><span>📃</span> <span>History</span></a>
|
|
350
|
+
<a href="#" class="nav-item"><span>📁</span> <span>Playlists</span></a>
|
|
351
|
+
<a href="#" class="nav-item"><span>👁️</span> <span>Your videos</span></a>
|
|
352
|
+
<a href="#" class="nav-item"><span>⏰</span> <span>Watch later</span></a>
|
|
353
|
+
<a href="#" class="nav-item"><span>👍</span> <span>Liked videos</span></a>
|
|
354
|
+
</div>
|
|
355
|
+
<div class="nav-section">
|
|
356
|
+
<div class="nav-section-title">Subscriptions</div>
|
|
357
|
+
<a href="#" class="nav-item"><span>🎮</span> <span>Gaming Channel</span></a>
|
|
358
|
+
<a href="#" class="nav-item"><span>💻</span> <span>Tech Review</span></a>
|
|
359
|
+
<a href="#" class="nav-item"><span>🎵</span> <span>Music Studio</span></a>
|
|
360
|
+
<a href="#" class="nav-item"><span>🎬</span> <span>Film Makers</span></a>
|
|
361
|
+
</div>
|
|
362
|
+
</aside>
|
|
363
|
+
|
|
364
|
+
<main class="video-feed">
|
|
365
|
+
<div class="category-tabs">
|
|
366
|
+
<button class="category-tab active">All</button>
|
|
367
|
+
<button class="category-tab">Gaming</button>
|
|
368
|
+
<button class="category-tab">Music</button>
|
|
369
|
+
<button class="category-tab">Technology</button>
|
|
370
|
+
<button class="category-tab">Programming</button>
|
|
371
|
+
<button class="category-tab">Design</button>
|
|
372
|
+
<button class="category-tab">Science</button>
|
|
373
|
+
<button class="category-tab">Comedy</button>
|
|
374
|
+
<button class="category-tab">News</button>
|
|
375
|
+
<button class="category-tab">Sports</button>
|
|
376
|
+
</div>
|
|
377
|
+
|
|
378
|
+
<section class="featured-section">
|
|
379
|
+
<div class="featured-header">
|
|
380
|
+
<h2>🔥 Trending Now</h2>
|
|
381
|
+
<a href="#" class="see-all">See all</a>
|
|
382
|
+
</div>
|
|
383
|
+
<div class="video-grid">
|
|
384
|
+
<div class="video-card">
|
|
385
|
+
<div class="video-thumbnail">
|
|
386
|
+
<img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?w=640&h=360&fit=crop" alt="Video">
|
|
387
|
+
<span class="video-duration">12:34</span>
|
|
388
|
+
</div>
|
|
389
|
+
<div class="video-info">
|
|
390
|
+
<div class="channel-avatar">G</div>
|
|
391
|
+
<div class="video-meta">
|
|
392
|
+
<h3 class="video-title">Epic Gaming Moments That Will Blow Your Mind</h3>
|
|
393
|
+
<p class="video-channel">Gaming Channel</p>
|
|
394
|
+
<p class="video-stats">2.3M views • 2 days ago</p>
|
|
395
|
+
</div>
|
|
396
|
+
</div>
|
|
397
|
+
</div>
|
|
398
|
+
<div class="video-card">
|
|
399
|
+
<div class="video-thumbnail">
|
|
400
|
+
<img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=640&h=360&fit=crop" alt="Video">
|
|
401
|
+
<span class="video-duration">8:45</span>
|
|
402
|
+
</div>
|
|
403
|
+
<div class="video-info">
|
|
404
|
+
<div class="channel-avatar">T</div>
|
|
405
|
+
<div class="video-meta">
|
|
406
|
+
<h3 class="video-title">The Future of AI Technology in 2025</h3>
|
|
407
|
+
<p class="video-channel">Tech Review</p>
|
|
408
|
+
<p class="video-stats">1.8M views • 5 hours ago</p>
|
|
409
|
+
</div>
|
|
410
|
+
</div>
|
|
411
|
+
</div>
|
|
412
|
+
<div class="video-card">
|
|
413
|
+
<div class="video-thumbnail">
|
|
414
|
+
<img src="https://images.unsplash.com/photo-1511379938547-c1f69419868d?w=640&h=360&fit=crop" alt="Video">
|
|
415
|
+
<span class="video-duration">15:20</span>
|
|
416
|
+
</div>
|
|
417
|
+
<div class="video-info">
|
|
418
|
+
<div class="channel-avatar">M</div>
|
|
419
|
+
<div class="video-meta">
|
|
420
|
+
<h3 class="video-title">Top 10 Songs That Defined This Year</h3>
|
|
421
|
+
<p class="video-channel">Music Studio</p>
|
|
422
|
+
<p class="video-stats">3.1M views • 1 week ago</p>
|
|
423
|
+
</div>
|
|
424
|
+
</div>
|
|
425
|
+
</div>
|
|
426
|
+
<div class="video-card">
|
|
427
|
+
<div class="video-thumbnail">
|
|
428
|
+
<img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=640&h=360&fit=crop" alt="Video">
|
|
429
|
+
<span class="video-duration">22:15</span>
|
|
430
|
+
</div>
|
|
431
|
+
<div class="video-info">
|
|
432
|
+
<div class="channel-avatar">C</div>
|
|
433
|
+
<div class="video-meta">
|
|
434
|
+
<h3 class="video-title">Learn React in 2024 - Complete Tutorial</h3>
|
|
435
|
+
<p class="video-channel">Code Masters</p>
|
|
436
|
+
<p class="video-stats">856K views • 3 days ago</p>
|
|
437
|
+
</div>
|
|
438
|
+
</div>
|
|
439
|
+
</div>
|
|
440
|
+
</div>
|
|
441
|
+
</section>
|
|
442
|
+
|
|
443
|
+
<section class="featured-section">
|
|
444
|
+
<div class="featured-header">
|
|
445
|
+
<h2>⚡ Shorts</h2>
|
|
446
|
+
<a href="#" class="see-all">See all</a>
|
|
447
|
+
</div>
|
|
448
|
+
<div class="shorts-grid">
|
|
449
|
+
<div class="short-card">
|
|
450
|
+
<div class="short-thumbnail">
|
|
451
|
+
<img src="https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=400&h=711&fit=crop" alt="Short">
|
|
452
|
+
<span class="short-views">1.2M views</span>
|
|
453
|
+
</div>
|
|
454
|
+
<h3 class="short-title">This trick will change your life! 😱</h3>
|
|
455
|
+
</div>
|
|
456
|
+
<div class="short-card">
|
|
457
|
+
<div class="short-thumbnail">
|
|
458
|
+
<img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=400&h=711&fit=crop" alt="Short">
|
|
459
|
+
<span class="short-views">890K views</span>
|
|
460
|
+
</div>
|
|
461
|
+
<h3 class="short-title">Gaming setup tour 2024 🎮</h3>
|
|
462
|
+
</div>
|
|
463
|
+
<div class="short-card">
|
|
464
|
+
<div class="short-thumbnail">
|
|
465
|
+
<img src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?w=400&h=711&fit=crop" alt="Short">
|
|
466
|
+
<span class="short-views">2.5M views</span>
|
|
467
|
+
</div>
|
|
468
|
+
<h3 class="short-title">Mac vs PC - The Truth 💻</h3>
|
|
469
|
+
</div>
|
|
470
|
+
<div class="short-card">
|
|
471
|
+
<div class="short-thumbnail">
|
|
472
|
+
<img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=400&h=711&fit=crop" alt="Short">
|
|
473
|
+
<span class="short-views">650K views</span>
|
|
474
|
+
</div>
|
|
475
|
+
<h3 class="short-title">Music production tips 🎵</h3>
|
|
476
|
+
</div>
|
|
477
|
+
<div class="short-card">
|
|
478
|
+
<div class="short-thumbnail">
|
|
479
|
+
<img src="https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=400&h=711&fit=crop" alt="Short">
|
|
480
|
+
<span class="short-views">3.2M views</span>
|
|
481
|
+
</div>
|
|
482
|
+
<h3 class="short-title">AI Robot Does Backflip! 🤖</h3>
|
|
483
|
+
</div>
|
|
484
|
+
<div class="short-card">
|
|
485
|
+
<div class="short-thumbnail">
|
|
486
|
+
<img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=711&fit=crop" alt="Short">
|
|
487
|
+
<span class="short-views">1.8M views</span>
|
|
488
|
+
</div>
|
|
489
|
+
<h3 class="short-title">Epic drone footage 🏔️</h3>
|
|
490
|
+
</div>
|
|
491
|
+
</div>
|
|
492
|
+
</section>
|
|
493
|
+
|
|
494
|
+
<section>
|
|
495
|
+
<div class="featured-header">
|
|
496
|
+
<h2>📺 Recommended</h2>
|
|
497
|
+
</div>
|
|
498
|
+
<div class="video-grid">
|
|
499
|
+
<div class="video-card">
|
|
500
|
+
<div class="video-thumbnail">
|
|
501
|
+
<img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=640&h=360&fit=crop" alt="Video">
|
|
502
|
+
<span class="video-duration">18:42</span>
|
|
503
|
+
</div>
|
|
504
|
+
<div class="video-info">
|
|
505
|
+
<div class="channel-avatar">D</div>
|
|
506
|
+
<div class="video-meta">
|
|
507
|
+
<h3 class="video-title">The Art of Minimalist Design</h3>
|
|
508
|
+
<p class="video-channel">Design Hub</p>
|
|
509
|
+
<p class="video-stats">456K views • 4 days ago</p>
|
|
510
|
+
</div>
|
|
511
|
+
</div>
|
|
512
|
+
</div>
|
|
513
|
+
<div class="video-card">
|
|
514
|
+
<div class="video-thumbnail">
|
|
515
|
+
<img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=640&h=360&fit=crop" alt="Video">
|
|
516
|
+
<span class="video-duration">45:00</span>
|
|
517
|
+
</div>
|
|
518
|
+
<div class="video-info">
|
|
519
|
+
<div class="channel-avatar">S</div>
|
|
520
|
+
<div class="video-meta">
|
|
521
|
+
<h3 class="video-title">Space Exploration: Journey to Mars</h3>
|
|
522
|
+
<p class="video-channel">Science Daily</p>
|
|
523
|
+
<p class="video-stats">5.2M views • 1 month ago</p>
|
|
524
|
+
</div>
|
|
525
|
+
</div>
|
|
526
|
+
</div>
|
|
527
|
+
<div class="video-card">
|
|
528
|
+
<div class="video-thumbnail">
|
|
529
|
+
<img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=640&h=360&fit=crop" alt="Video">
|
|
530
|
+
<span class="video-duration">32:18</span>
|
|
531
|
+
</div>
|
|
532
|
+
<div class="video-info">
|
|
533
|
+
<div class="channel-avatar">P</div>
|
|
534
|
+
<div class="video-meta">
|
|
535
|
+
<h3 class="video-title">Python for Beginners - Full Course</h3>
|
|
536
|
+
<p class="video-channel">Programming Pro</p>
|
|
537
|
+
<p class="video-stats">1.2M views • 2 weeks ago</p>
|
|
538
|
+
</div>
|
|
539
|
+
</div>
|
|
540
|
+
</div>
|
|
541
|
+
</div>
|
|
542
|
+
</section>
|
|
543
|
+
</main>
|
|
544
|
+
</div>
|
|
545
|
+
</div>
|
|
546
|
+
|
|
547
|
+
<script>
|
|
548
|
+
function toggleTheme() {
|
|
549
|
+
document.body.classList.toggle('light-mode');
|
|
550
|
+
localStorage.setItem('theme', document.body.classList.contains('light-mode') ? 'light' : 'dark');
|
|
551
|
+
}
|
|
552
|
+
if (localStorage.getItem('theme') === 'light') {
|
|
553
|
+
document.body.classList.add('light-mode');
|
|
554
|
+
}
|
|
555
|
+
|
|
556
|
+
document.querySelectorAll('.category-tab').forEach(tab => {
|
|
557
|
+
tab.addEventListener('click', function() {
|
|
558
|
+
document.querySelectorAll('.category-tab').forEach(t => t.classList.remove('active'));
|
|
559
|
+
this.classList.add('active');
|
|
560
|
+
});
|
|
561
|
+
});
|
|
562
|
+
</script>
|
|
563
|
+
</body>
|
|
564
|
+
</html>
|