@howssatoshi/quantumcss 1.11.0 → 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 (10) hide show
  1. package/README.md +1 -1
  2. package/dist/quantum.min.css +2 -2
  3. package/examples/admin-panel.html +9 -31
  4. package/examples/analytics-dashboard.html +2 -4
  5. package/examples/index.html +1 -1
  6. package/examples/portfolio.html +16 -0
  7. package/examples/video-streaming.html +1025 -757
  8. package/package.json +1 -1
  9. package/src/styles/quantum-components.css +2 -1
  10. package/src/styles/starlight.css +10 -10
package/examples/video-streaming.html CHANGED
@@ -1,796 +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
- <link rel="stylesheet" href="../src/styles/quantum-icons.css">
10
- <script src="../src/starlight.js"></script>
11
- <style>
12
- * { margin: 0; padding: 0; box-sizing: border-box; }
13
- body {
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%);
19
- color: var(--text-primary, #f1f5f9);
20
- font-family: 'Inter', system-ui, sans-serif;
21
- min-height: 100vh;
22
- }
23
-
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
- }
87
-
88
- header {
89
- display: flex;
90
- align-items: center;
91
- justify-content: space-between;
92
- padding: 0.75rem 1.5rem;
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);
97
- }
98
- .logo {
99
- display: flex;
100
- align-items: center;
101
- gap: 0.75rem;
102
- font-size: 1.5rem;
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;
108
- }
109
- .logo-icon {
110
- width: 40px; height: 40px;
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);
113
- border-radius: 10px;
114
- display: flex; align-items: center; justify-content: center;
115
- backdrop-filter: blur(10px);
116
- }
117
- .logo-icon .q-icon {
118
- color: #00d4ff;
119
- }
120
- .search-bar {
121
- flex: 1;
122
- max-width: 640px;
123
- margin: 0 2rem;
124
- display: flex;
125
- }
126
- .video-search-input {
127
- flex: 1;
128
- padding: 0.625rem 1.25rem;
129
- background: rgba(255, 255, 255, 0.05);
130
- border: 1px solid rgba(255, 255, 255, 0.1);
131
- border-radius: 0.5rem 0 0 0.5rem;
132
- color: var(--text-primary, #f1f5f9);
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);
145
- }
146
- .search-btn {
147
- padding: 0 1.25rem;
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);
150
- border-left: none;
151
- border-radius: 0 0.5rem 0.5rem 0;
152
- color: #00d4ff;
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);
159
- }
160
- .header-actions {
161
- display: flex;
162
- align-items: center;
163
- gap: 1rem;
164
- }
165
- .icon-btn {
166
- width: 40px; height: 40px;
167
- border-radius: 12px;
168
- background: rgba(255, 255, 255, 0.05);
169
- border: 1px solid rgba(255, 255, 255, 0.1);
170
- color: var(--text-primary, #f1f5f9);
171
- cursor: pointer;
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;
184
- }
185
- .user-avatar {
186
- width: 36px; height: 36px;
187
- border-radius: 50%;
188
- background: linear-gradient(135deg, #3b82f6, #00d4ff);
189
- display: flex; align-items: center; justify-content: center;
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);
193
- }
194
-
195
- .main-content {
196
- display: grid;
197
- grid-template-columns: 240px 1fr;
198
- overflow: hidden;
199
- }
200
-
201
- @media (max-width: 1024px) {
202
- .main-content {
203
- 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;
204
129
  }
205
- .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;
206
142
  justify-content: center;
207
- 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);
208
197
  }
209
- .sidebar .nav-item span:last-child,
210
- .sidebar .nav-section-title {
211
- display: none;
198
+ .header-actions {
199
+ display: flex;
200
+ align-items: center;
201
+ gap: 1rem;
212
202
  }
213
- }
214
-
215
- @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
+
216
240
  .main-content {
217
- 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
+ }
218
267
  }
268
+
219
269
  .sidebar {
220
- display: none;
221
- }
222
- }
223
-
224
- .sidebar {
225
- padding: 0.75rem;
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);
229
- }
230
- .nav-item {
231
- display: flex;
232
- align-items: center;
233
- gap: 1.25rem;
234
- padding: 0.75rem 1rem;
235
- color: var(--text-secondary, #94a3b8);
236
- text-decoration: none;
237
- font-size: 0.9375rem;
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;
247
- }
248
- .video-app .nav-item:hover, .video-app .nav-item.active {
249
- background: rgba(0, 212, 255, 0.08);
250
- border-color: rgba(0, 212, 255, 0.15);
251
- color: var(--text-primary, #f1f5f9);
252
- }
253
- .nav-item.active {
254
- font-weight: 600;
255
- color: #00d4ff;
256
- }
257
- .nav-item.active .q-icon {
258
- color: #00d4ff;
259
- }
260
- .nav-section {
261
- padding: 0.75rem 0;
262
- border-bottom: 1px solid rgba(255, 255, 255, 0.06);
263
- margin-bottom: 0.5rem;
264
- }
265
- .nav-title {
266
- padding: 0.5rem 1rem;
267
- font-size: 0.75rem;
268
- font-weight: 700;
269
- text-transform: uppercase;
270
- letter-spacing: 0.1em;
271
- color: var(--text-muted, #64748b);
272
- }
273
-
274
- .video-feed {
275
- padding: 1.5rem;
276
- overflow-y: auto;
277
- background: rgba(5, 5, 16, 0.3);
278
- }
279
- .category-tabs {
280
- display: flex;
281
- gap: 0.75rem;
282
- margin-bottom: 1.5rem;
283
- overflow-x: auto;
284
- padding-bottom: 0.5rem;
285
- }
286
- .category-tab {
287
- padding: 0.5rem 1rem;
288
- background: rgba(255, 255, 255, 0.05);
289
- border: 1px solid rgba(255, 255, 255, 0.1);
290
- border-radius: 9999px;
291
- color: var(--text-primary, #f1f5f9);
292
- font-size: 0.875rem;
293
- cursor: pointer;
294
- white-space: nowrap;
295
- transition: all 0.2s;
296
- backdrop-filter: blur(10px);
297
- }
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);
308
- }
309
-
310
- .video-grid {
311
- display: grid;
312
- grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
313
- gap: 1.5rem;
314
- }
315
- .video-card {
316
- cursor: pointer;
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);
328
- }
329
- .video-thumbnail {
330
- position: relative;
331
- aspect-ratio: 16/9;
332
- background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(139, 92, 246, 0.1));
333
- border-radius: 12px;
334
- overflow: hidden;
335
- margin-bottom: 0.75rem;
336
- border: 1px solid rgba(255, 255, 255, 0.08);
337
- }
338
- .video-thumbnail img {
339
- width: 100%; height: 100%;
340
- object-fit: cover;
341
- }
342
- .video-duration {
343
- position: absolute;
344
- bottom: 0.5rem;
345
- right: 0.5rem;
346
- padding: 0.25rem 0.5rem;
347
- background: rgba(0, 0, 0, 0.8);
348
- backdrop-filter: blur(10px);
349
- border-radius: 6px;
350
- font-size: 0.75rem;
351
- font-weight: 600;
352
- border: 1px solid rgba(255, 255, 255, 0.1);
353
- }
354
- .video-info {
355
- display: flex;
356
- gap: 0.875rem;
357
- }
358
- .channel-avatar {
359
- width: 36px; height: 36px;
360
- border-radius: 50%;
361
- background: linear-gradient(135deg, #3b82f6, #8b5cf6);
362
- display: flex; align-items: center; justify-content: center;
363
- font-weight: 600; font-size: 0.875rem;
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);
367
- }
368
- .video-meta { flex: 1; }
369
- .video-title {
370
- font-size: 0.9375rem;
371
- font-weight: 600;
372
- line-height: 1.4;
373
- margin-bottom: 0.375rem;
374
- display: -webkit-box;
375
- -webkit-line-clamp: 2;
376
- -webkit-box-orient: vertical;
377
- overflow: hidden;
378
- }
379
- .video-channel {
380
- font-size: 0.875rem;
381
- color: var(--text-secondary, #94a3b8);
382
- margin-bottom: 0.25rem;
383
- }
384
- .video-stats {
385
- font-size: 0.8125rem;
386
- color: var(--text-muted, #64748b);
387
- }
388
-
389
- .featured-section {
390
- margin-bottom: 2rem;
391
- }
392
- .featured-header {
393
- display: flex;
394
- align-items: center;
395
- justify-content: space-between;
396
- margin-bottom: 1rem;
397
- }
398
- .featured-header h2 {
399
- font-size: 1.25rem;
400
- font-weight: 700;
401
- display: flex;
402
- align-items: center;
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;
415
- }
416
- .see-all {
417
- color: var(--color-starlight, #00d4ff);
418
- text-decoration: none;
419
- font-size: 0.875rem;
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);
425
- }
426
-
427
- .shorts-grid {
428
- display: grid;
429
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
430
- gap: 1rem;
431
- }
432
- .short-card {
433
- cursor: pointer;
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);
445
- }
446
- .short-thumbnail {
447
- aspect-ratio: 9/16;
448
- background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(236, 72, 153, 0.15));
449
- border-radius: 12px;
450
- overflow: hidden;
451
- margin-bottom: 0.5rem;
452
- position: relative;
453
- border: 1px solid rgba(255, 255, 255, 0.08);
454
- }
455
- .short-thumbnail img {
456
- width: 100%; height: 100%;
457
- object-fit: cover;
458
- }
459
- .short-views {
460
- position: absolute;
461
- bottom: 0.5rem;
462
- left: 0.5rem;
463
- font-size: 0.75rem;
464
- font-weight: 600;
465
- background: rgba(0, 0, 0, 0.8);
466
- backdrop-filter: blur(10px);
467
- padding: 0.25rem 0.5rem;
468
- border-radius: 6px;
469
- border: 1px solid rgba(255, 255, 255, 0.1);
470
- }
471
- .short-title {
472
- font-size: 0.875rem;
473
- font-weight: 500;
474
- line-height: 1.3;
475
- display: -webkit-box;
476
- -webkit-line-clamp: 2;
477
- -webkit-box-orient: vertical;
478
- overflow: hidden;
479
- padding: 0 0.25rem;
480
- }
481
-
482
- 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
- }
528
-
529
- @media (max-width: 1024px) {
530
- .video-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
531
- }
532
- @media (max-width: 640px) {
533
- .search-bar { display: none; }
534
- .video-grid { grid-template-columns: 1fr; }
535
- .shorts-grid { grid-template-columns: repeat(2, 1fr); }
536
- }
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; }
553
- </style>
554
- </head>
555
- <body>
556
- <div class="stars"></div>
557
- <div class="video-app">
558
- <header>
559
- <div class="logo">
560
- <div class="logo-icon">
561
- <span class="q-icon q-icon-play-fill"></span>
562
- </div>
563
- <span>Starlight</span>
564
- </div>
565
- <div class="search-bar">
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>
568
- </div>
569
- <div class="header-actions">
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>
573
- <span class="notification-dot"></span>
574
- </button>
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>
577
- </div>
578
- </header>
579
-
580
- <div class="main-content">
581
- <aside class="sidebar">
582
- <div class="nav-section">
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>
586
- </div>
587
- <div class="nav-section">
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>
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>
594
683
  </div>
595
- <div class="nav-section">
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>
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>
601
693
  </div>
602
- </aside>
603
-
604
- <main class="video-feed">
605
- <div class="category-tabs">
606
- <button class="category-tab active">All</button>
607
- <button class="category-tab">Gaming</button>
608
- <button class="category-tab">Music</button>
609
- <button class="category-tab">Technology</button>
610
- <button class="category-tab">Programming</button>
611
- <button class="category-tab">Design</button>
612
- <button class="category-tab">Science</button>
613
- <button class="category-tab">Comedy</button>
614
- <button class="category-tab">News</button>
615
- <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>
616
710
  </div>
617
-
618
- <section class="featured-section">
619
- <div class="featured-header">
620
- <h2><span class="q-icon q-icon-trend-up"></span> Trending Now</h2>
621
- <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
+ >
622
728
  </div>
623
- <div class="video-grid">
624
- <div class="video-card">
625
- <div class="video-thumbnail">
626
- <img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?w=640&h=360&fit=crop" alt="Video">
627
- <span class="video-duration">12:34</span>
628
- </div>
629
- <div class="video-info">
630
- <div class="channel-avatar">G</div>
631
- <div class="video-meta">
632
- <h3 class="video-title">Epic Gaming Moments That Will Blow Your Mind</h3>
633
- <p class="video-channel">Gaming Channel</p>
634
- <p class="video-stats">2.3M views • 2 days ago</p>
635
- </div>
636
- </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>
637
794
  </div>
638
- <div class="video-card">
639
- <div class="video-thumbnail">
640
- <img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=640&h=360&fit=crop" alt="Video">
641
- <span class="video-duration">8:45</span>
642
- </div>
643
- <div class="video-info">
644
- <div class="channel-avatar">T</div>
645
- <div class="video-meta">
646
- <h3 class="video-title">The Future of AI Technology in 2025</h3>
647
- <p class="video-channel">Tech Review</p>
648
- <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>
649
803
  </div>
650
- </div>
651
- </div>
652
- <div class="video-card">
653
- <div class="video-thumbnail">
654
- <img src="https://images.unsplash.com/photo-1511379938547-c1f69419868d?w=640&h=360&fit=crop" alt="Video">
655
- <span class="video-duration">15:20</span>
656
- </div>
657
- <div class="video-info">
658
- <div class="channel-avatar">M</div>
659
- <div class="video-meta">
660
- <h3 class="video-title">Top 10 Songs That Defined This Year</h3>
661
- <p class="video-channel">Music Studio</p>
662
- <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>
663
818
  </div>
664
819
  </div>
665
- </div>
666
- <div class="video-card">
667
- <div class="video-thumbnail">
668
- <img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=640&h=360&fit=crop" alt="Video">
669
- <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>
670
840
  </div>
671
- <div class="video-info">
672
- <div class="channel-avatar">C</div>
673
- <div class="video-meta">
674
- <h3 class="video-title">Learn React in 2024 - Complete Tutorial</h3>
675
- <p class="video-channel">Code Masters</p>
676
- <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>
677
862
  </div>
678
863
  </div>
679
- </div>
680
- </div>
681
- </section>
682
-
683
- <section class="featured-section">
684
- <div class="featured-header">
685
- <h2><span class="q-icon q-icon-grid"></span> Shorts</h2>
686
- <a href="#" class="see-all">See all</a>
687
- </div>
688
- <div class="shorts-grid">
689
- <div class="short-card">
690
- <div class="short-thumbnail">
691
- <img src="https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=400&h=711&fit=crop" alt="Short">
692
- <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>
693
887
  </div>
694
- <h3 class="short-title">This trick will change your life!</h3>
695
888
  </div>
696
- <div class="short-card">
697
- <div class="short-thumbnail">
698
- <img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=400&h=711&fit=crop" alt="Short">
699
- <span class="short-views">890K views</span>
700
- </div>
701
- <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>
702
897
  </div>
703
- <div class="short-card">
704
- <div class="short-thumbnail">
705
- <img src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?w=400&h=711&fit=crop" alt="Short">
706
- <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>
707
910
  </div>
708
- <h3 class="short-title">Mac vs PC - The Truth</h3>
709
- </div>
710
- <div class="short-card">
711
- <div class="short-thumbnail">
712
- <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=400&h=711&fit=crop" alt="Short">
713
- <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>
714
922
  </div>
715
- <h3 class="short-title">Music production tips</h3>
716
- </div>
717
- <div class="short-card">
718
- <div class="short-thumbnail">
719
- <img src="https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=400&h=711&fit=crop" alt="Short">
720
- <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>
721
934
  </div>
722
- <h3 class="short-title">AI Robot Does Backflip!</h3>
723
- </div>
724
- <div class="short-card">
725
- <div class="short-thumbnail">
726
- <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=711&fit=crop" alt="Short">
727
- <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>
728
946
  </div>
729
- <h3 class="short-title">Epic drone footage</h3>
730
- </div>
731
- </div>
732
- </section>
733
-
734
- <section>
735
- <div class="featured-header">
736
- <h2><span class="q-icon q-icon-star"></span> Recommended</h2>
737
- </div>
738
- <div class="video-grid">
739
- <div class="video-card">
740
- <div class="video-thumbnail">
741
- <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=640&h=360&fit=crop" alt="Video">
742
- <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>
743
958
  </div>
744
- <div class="video-info">
745
- <div class="channel-avatar">D</div>
746
- <div class="video-meta">
747
- <h3 class="video-title">The Art of Minimalist Design</h3>
748
- <p class="video-channel">Design Hub</p>
749
- <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>
750
966
  </div>
967
+ <h3 class="short-title">Epic drone footage</h3>
751
968
  </div>
752
969
  </div>
753
- <div class="video-card">
754
- <div class="video-thumbnail">
755
- <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=640&h=360&fit=crop" alt="Video">
756
- <span class="video-duration">45:00</span>
757
- </div>
758
- <div class="video-info">
759
- <div class="channel-avatar">S</div>
760
- <div class="video-meta">
761
- <h3 class="video-title">Space Exploration: Journey to Mars</h3>
762
- <p class="video-channel">Science Daily</p>
763
- <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>
764
999
  </div>
765
1000
  </div>
766
- </div>
767
- <div class="video-card">
768
- <div class="video-thumbnail">
769
- <img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=640&h=360&fit=crop" alt="Video">
770
- <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>
771
1023
  </div>
772
- <div class="video-info">
773
- <div class="channel-avatar">P</div>
774
- <div class="video-meta">
775
- <h3 class="video-title">Python for Beginners - Full Course</h3>
776
- <p class="video-channel">Programming Pro</p>
777
- <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>
778
1045
  </div>
779
1046
  </div>
780
1047
  </div>
781
- </div>
782
- </section>
783
- </main>
1048
+ </section>
1049
+ </main>
1050
+ </div>
784
1051
  </div>
785
- </div>
786
-
787
- <script>
788
- document.querySelectorAll('.category-tab').forEach(tab => {
789
- tab.addEventListener('click', function() {
790
- document.querySelectorAll('.category-tab').forEach(t => t.classList.remove('active'));
791
- 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
+ });
792
1061
  });
793
- });
794
- </script>
795
- </body>
1062
+ </script>
1063
+ </body>
796
1064
  </html>