Hugging Face's logo

Spaces:
varanraghu
/
anycoder-fca004a1
Running

App Files Community
varanraghu commited on
Commit
7546394
·
verified ·
1 Parent(s): 4ae4cef

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1416 -19
index.html CHANGED
@@ -1,19 +1,1416 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>StreamHub - Premium Browser Streaming</title>
7
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
8
+ <style>
9
+ :root {
10
+ --primary-color: #e50914;
11
+ --primary-hover: #f40612;
12
+ --bg-dark: #0d0d0d;
13
+ --bg-card: #1a1a1a;
14
+ --bg-card-hover: #2a2a2a;
15
+ --text-primary: #ffffff;
16
+ --text-secondary: #b3b3b3;
17
+ --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
18
+ --gold-gradient: linear-gradient(135deg, #f5af19 0%, #f12711 100%);
19
+ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
20
+ --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
21
+ --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
22
+ --transition-fast: 0.2s ease;
23
+ --transition-medium: 0.3s ease;
24
+ --border-radius: 8px;
25
+ }
26
+
27
+ * {
28
+ margin: 0;
29
+ padding: 0;
30
+ box-sizing: border-box;
31
+ }
32
+
33
+ body {
34
+ font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
35
+ background-color: var(--bg-dark);
36
+ color: var(--text-primary);
37
+ overflow-x: hidden;
38
+ line-height: 1.6;
39
+ }
40
+
41
+ /* Scrollbar Styling */
42
+ ::-webkit-scrollbar {
43
+ width: 8px;
44
+ }
45
+
46
+ ::-webkit-scrollbar-track {
47
+ background: var(--bg-dark);
48
+ }
49
+
50
+ ::-webkit-scrollbar-thumb {
51
+ background: var(--bg-card-hover);
52
+ border-radius: 4px;
53
+ }
54
+
55
+ ::-webkit-scrollbar-thumb:hover {
56
+ background: var(--text-secondary);
57
+ }
58
+
59
+ /* Header Navigation */
60
+ .header {
61
+ position: fixed;
62
+ top: 0;
63
+ left: 0;
64
+ right: 0;
65
+ z-index: 1000;
66
+ display: flex;
67
+ align-items: center;
68
+ justify-content: space-between;
69
+ padding: 0 4%;
70
+ height: 70px;
71
+ background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, transparent 100%);
72
+ transition: background var(--transition-medium);
73
+ }
74
+
75
+ .header.scrolled {
76
+ background: var(--bg-dark);
77
+ box-shadow: var(--shadow-md);
78
+ }
79
+
80
+ .logo {
81
+ display: flex;
82
+ align-items: center;
83
+ gap: 10px;
84
+ font-size: 1.8rem;
85
+ font-weight: 800;
86
+ color: var(--primary-color);
87
+ text-decoration: none;
88
+ letter-spacing: -1px;
89
+ }
90
+
91
+ .logo i {
92
+ font-size: 2rem;
93
+ }
94
+
95
+ .logo span {
96
+ background: var(--gold-gradient);
97
+ -webkit-background-clip: text;
98
+ -webkit-text-fill-color: transparent;
99
+ background-clip: text;
100
+ }
101
+
102
+ .nav-links {
103
+ display: flex;
104
+ gap: 30px;
105
+ list-style: none;
106
+ }
107
+
108
+ .nav-links a {
109
+ color: var(--text-primary);
110
+ text-decoration: none;
111
+ font-weight: 500;
112
+ font-size: 0.95rem;
113
+ opacity: 0.8;
114
+ transition: opacity var(--transition-fast);
115
+ position: relative;
116
+ }
117
+
118
+ .nav-links a::after {
119
+ content: '';
120
+ position: absolute;
121
+ bottom: -5px;
122
+ left: 0;
123
+ width: 0;
124
+ height: 2px;
125
+ background: var(--primary-color);
126
+ transition: width var(--transition-fast);
127
+ }
128
+
129
+ .nav-links a:hover {
130
+ opacity: 1;
131
+ }
132
+
133
+ .nav-links a:hover::after {
134
+ width: 100%;
135
+ }
136
+
137
+ .nav-links a.active {
138
+ opacity: 1;
139
+ }
140
+
141
+ .nav-links a.active::after {
142
+ width: 100%;
143
+ }
144
+
145
+ .header-actions {
146
+ display: flex;
147
+ align-items: center;
148
+ gap: 20px;
149
+ }
150
+
151
+ .search-box {
152
+ position: relative;
153
+ }
154
+
155
+ .search-box input {
156
+ background: rgba(255,255,255,0.1);
157
+ border: 1px solid rgba(255,255,255,0.2);
158
+ padding: 10px 15px 10px 42px;
159
+ border-radius: 25px;
160
+ color: var(--text-primary);
161
+ font-size: 0.9rem;
162
+ width: 0;
163
+ opacity: 0;
164
+ transition: all var(--transition-medium);
165
+ }
166
+
167
+ .search-box.active input {
168
+ width: 250px;
169
+ opacity: 1;
170
+ }
171
+
172
+ .search-box i {
173
+ position: absolute;
174
+ left: 15px;
175
+ top: 50%;
176
+ transform: translateY(-50%);
177
+ cursor: pointer;
178
+ color: var(--text-secondary);
179
+ }
180
+
181
+ .notification-btn {
182
+ position: relative;
183
+ background: none;
184
+ border: none;
185
+ color: var(--text-primary);
186
+ font-size: 1.2rem;
187
+ cursor: pointer;
188
+ transition: transform var(--transition-fast);
189
+ }
190
+
191
+ .notification-btn:hover {
192
+ transform: scale(1.1);
193
+ }
194
+
195
+ .notification-badge {
196
+ position: absolute;
197
+ top: -5px;
198
+ right: -5px;
199
+ background: var(--primary-color);
200
+ color: white;
201
+ font-size: 0.7rem;
202
+ padding: 2px 6px;
203
+ border-radius: 10px;
204
+ }
205
+
206
+ .user-profile {
207
+ display: flex;
208
+ align-items: center;
209
+ gap: 10px;
210
+ cursor: pointer;
211
+ padding: 5px 10px;
212
+ border-radius: 25px;
213
+ transition: background var(--transition-fast);
214
+ }
215
+
216
+ .user-profile:hover {
217
+ background: rgba(255,255,255,0.1);
218
+ }
219
+
220
+ .user-avatar {
221
+ width: 35px;
222
+ height: 35px;
223
+ border-radius: 50%;
224
+ background: var(--accent-gradient);
225
+ display: flex;
226
+ align-items: center;
227
+ justify-content: center;
228
+ font-weight: 600;
229
+ font-size: 0.9rem;
230
+ }
231
+
232
+ .user-name {
233
+ font-weight: 500;
234
+ font-size: 0.9rem;
235
+ }
236
+
237
+ /* Main Content */
238
+ .main-content {
239
+ margin-top: 70px;
240
+ }
241
+
242
+ /* Hero Section */
243
+ .hero {
244
+ position: relative;
245
+ height: 85vh;
246
+ min-height: 500px;
247
+ display: flex;
248
+ align-items: center;
249
+ overflow: hidden;
250
+ }
251
+
252
+ .hero-bg {
253
+ position: absolute;
254
+ top: 0;
255
+ left: 0;
256
+ width: 100%;
257
+ height: 100%;
258
+ background: url('https://images.unsplash.com/photo-1626814026160-2237a95fc5a0?w=1920&q=80') center/cover;
259
+ filter: brightness(0.4);
260
+ }
261
+
262
+ .hero-bg::after {
263
+ content: '';
264
+ position: absolute;
265
+ top: 0;
266
+ left: 0;
267
+ width: 100%;
268
+ height: 100%;
269
+ background: linear-gradient(to right, rgba(13,13,13,0.9) 0%, rgba(13,13,13,0.3) 50%, transparent 100%),
270
+ linear-gradient(to top, rgba(13,13,13,1) 0%, transparent 50%);
271
+ }
272
+
273
+ .hero-content {
274
+ position: relative;
275
+ z-index: 10;
276
+ padding: 0 4%;
277
+ max-width: 700px;
278
+ }
279
+
280
+ .hero-badge {
281
+ display: inline-flex;
282
+ align-items: center;
283
+ gap: 8px;
284
+ background: rgba(229, 9, 20, 0.2);
285
+ border: 1px solid var(--primary-color);
286
+ padding: 6px 14px;
287
+ border-radius: 20px;
288
+ font-size: 0.8rem;
289
+ font-weight: 600;
290
+ margin-bottom: 20px;
291
+ animation: pulse 2s infinite;
292
+ }
293
+
294
+ @keyframes pulse {
295
+ 0%, 100% { box-shadow: 0 0 0 0 rgba(229, 9, 20, 0.4); }
296
+ 50% { box-shadow: 0 0 0 10px rgba(229, 9, 20, 0); }
297
+ }
298
+
299
+ .hero-title {
300
+ font-size: 4rem;
301
+ font-weight: 800;
302
+ line-height: 1.1;
303
+ margin-bottom: 20px;
304
+ text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
305
+ }
306
+
307
+ .hero-meta {
308
+ display: flex;
309
+ align-items: center;
310
+ gap: 15px;
311
+ margin-bottom: 20px;
312
+ font-size: 0.9rem;
313
+ }
314
+
315
+ .hero-rating {
316
+ color: #46d369;
317
+ font-weight: 600;
318
+ }
319
+
320
+ .hero-year, .hero-duration, .hero-quality {
321
+ color: var(--text-secondary);
322
+ }
323
+
324
+ .hero-quality {
325
+ border: 1px solid var(--text-secondary);
326
+ padding: 2px 6px;
327
+ border-radius: 4px;
328
+ font-size: 0.75rem;
329
+ }
330
+
331
+ .hero-description {
332
+ font-size: 1.1rem;
333
+ color: var(--text-secondary);
334
+ margin-bottom: 30px;
335
+ line-height: 1.7;
336
+ display: -webkit-box;
337
+ -webkit-line-clamp: 3;
338
+ -webkit-box-orient: vertical;
339
+ overflow: hidden;
340
+ }
341
+
342
+ .hero-actions {
343
+ display: flex;
344
+ gap: 15px;
345
+ }
346
+
347
+ .btn {
348
+ display: inline-flex;
349
+ align-items: center;
350
+ gap: 10px;
351
+ padding: 14px 30px;
352
+ border-radius: 30px;
353
+ font-size: 1rem;
354
+ font-weight: 600;
355
+ cursor: pointer;
356
+ border: none;
357
+ transition: all var(--transition-medium);
358
+ text-decoration: none;
359
+ }
360
+
361
+ .btn-primary {
362
+ background: var(--primary-color);
363
+ color: white;
364
+ }
365
+
366
+ .btn-primary:hover {
367
+ background: var(--primary-hover);
368
+ transform: translateY(-2px);
369
+ box-shadow: 0 5px 20px rgba(229, 9, 20, 0.4);
370
+ }
371
+
372
+ .btn-secondary {
373
+ background: rgba(255,255,255,0.2);
374
+ color: white;
375
+ backdrop-filter: blur(10px);
376
+ }
377
+
378
+ .btn-secondary:hover {
379
+ background: rgba(255,255,255,0.3);
380
+ transform: translateY(-2px);
381
+ }
382
+
383
+ .btn i {
384
+ font-size: 1.1rem;
385
+ }
386
+
387
+ /* Content Rows */
388
+ .content-section {
389
+ padding: 40px 0;
390
+ }
391
+
392
+ .section-header {
393
+ display: flex;
394
+ align-items: center;
395
+ justify-content: space-between;
396
+ padding: 0 4%;
397
+ margin-bottom: 20px;
398
+ }
399
+
400
+ .section-title {
401
+ font-size: 1.5rem;
402
+ font-weight: 700;
403
+ display: flex;
404
+ align-items: center;
405
+ gap: 10px;
406
+ }
407
+
408
+ .section-title i {
409
+ color: var(--primary-color);
410
+ }
411
+
412
+ .view-all {
413
+ color: var(--text-secondary);
414
+ text-decoration: none;
415
+ font-size: 0.9rem;
416
+ display: flex;
417
+ align-items: center;
418
+ gap: 5px;
419
+ transition: color var(--transition-fast);
420
+ }
421
+
422
+ .view-all:hover {
423
+ color: var(--text-primary);
424
+ }
425
+
426
+ .content-row {
427
+ display: flex;
428
+ gap: 15px;
429
+ padding: 0 4%;
430
+ overflow-x: auto;
431
+ scroll-behavior: smooth;
432
+ padding-bottom: 20px;
433
+ }
434
+
435
+ .content-row::-webkit-scrollbar {
436
+ height: 8px;
437
+ }
438
+
439
+ .content-row::-webkit-scrollbar-thumb {
440
+ background: var(--bg-card-hover);
441
+ border-radius: 4px;
442
+ }
443
+
444
+ .content-card {
445
+ flex: 0 0 auto;
446
+ width: 220px;
447
+ border-radius: var(--border-radius);
448
+ overflow: hidden;
449
+ cursor: pointer;
450
+ transition: all var(--transition-medium);
451
+ position: relative;
452
+ }
453
+
454
+ .content-card:hover {
455
+ transform: scale(1.05) translateY(-10px);
456
+ z-index: 100;
457
+ }
458
+
459
+ .content-card:hover .card-image {
460
+ box-shadow: var(--shadow-lg);
461
+ }
462
+
463
+ .card-image {
464
+ width: 100%;
465
+ height: 330px;
466
+ object-fit: cover;
467
+ transition: box-shadow var(--transition-medium);
468
+ }
469
+
470
+ .card-overlay {
471
+ position: absolute;
472
+ bottom: 0;
473
+ left: 0;
474
+ right: 0;
475
+ padding: 20px 15px;
476
+ background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
477
+ opacity: 0;
478
+ transition: opacity var(--transition-fast);
479
+ }
480
+
481
+ .content-card:hover .card-overlay {
482
+ opacity: 1;
483
+ }
484
+
485
+ .card-title {
486
+ font-size: 1rem;
487
+ font-weight: 600;
488
+ margin-bottom: 8px;
489
+ white-space: nowrap;
490
+ overflow: hidden;
491
+ text-overflow: ellipsis;
492
+ }
493
+
494
+ .card-meta {
495
+ display: flex;
496
+ align-items: center;
497
+ gap: 10px;
498
+ font-size: 0.8rem;
499
+ color: var(--text-secondary);
500
+ }
501
+
502
+ .card-rating {
503
+ color: #46d369;
504
+ }
505
+
506
+ .card-genre {
507
+ background: rgba(255,255,255,0.2);
508
+ padding: 2px 8px;
509
+ border-radius: 4px;
510
+ font-size: 0.7rem;
511
+ }
512
+
513
+ /* Live Section */
514
+ .live-section {
515
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
516
+ margin: 40px 0;
517
+ padding: 40px 4%;
518
+ }
519
+
520
+ .live-badge {
521
+ display: inline-flex;
522
+ align-items: center;
523
+ gap: 8px;
524
+ background: #e50914;
525
+ padding: 6px 14px;
526
+ border-radius: 20px;
527
+ font-size: 0.8rem;
528
+ font-weight: 600;
529
+ margin-bottom: 20px;
530
+ animation: livePulse 1.5s infinite;
531
+ }
532
+
533
+ @keyframes livePulse {
534
+ 0%, 100% { opacity: 1; }
535
+ 50% { opacity: 0.7; }
536
+ }
537
+
538
+ .live-dot {
539
+ width: 8px;
540
+ height: 8px;
541
+ background: white;
542
+ border-radius: 50%;
543
+ animation: blink 1s infinite;
544
+ }
545
+
546
+ @keyframes blink {
547
+ 0%, 100% { opacity: 1; }
548
+ 50% { opacity: 0.3; }
549
+ }
550
+
551
+ .live-grid {
552
+ display: grid;
553
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
554
+ gap: 20px;
555
+ }
556
+
557
+ .live-card {
558
+ background: rgba(255,255,255,0.05);
559
+ border-radius: var(--border-radius);
560
+ overflow: hidden;
561
+ cursor: pointer;
562
+ transition: all var(--transition-medium);
563
+ }
564
+
565
+ .live-card:hover {
566
+ background: rgba(255,255,255,0.1);
567
+ transform: translateY(-5px);
568
+ }
569
+
570
+ .live-thumbnail {
571
+ position: relative;
572
+ height: 180px;
573
+ }
574
+
575
+ .live-thumbnail img {
576
+ width: 100%;
577
+ height: 100%;
578
+ object-fit: cover;
579
+ }
580
+
581
+ .live-viewers {
582
+ position: absolute;
583
+ bottom: 10px;
584
+ left: 10px;
585
+ background: rgba(0,0,0,0.7);
586
+ padding: 4px 10px;
587
+ border-radius: 15px;
588
+ font-size: 0.75rem;
589
+ display: flex;
590
+ align-items: center;
591
+ gap: 5px;
592
+ }
593
+
594
+ .live-viewers i {
595
+ color: #e50914;
596
+ }
597
+
598
+ .live-info {
599
+ padding: 15px;
600
+ }
601
+
602
+ .live-title {
603
+ font-weight: 600;
604
+ margin-bottom: 5px;
605
+ }
606
+
607
+ .live-host {
608
+ font-size: 0.85rem;
609
+ color: var(--text-secondary);
610
+ }
611
+
612
+ /* Sidebar */
613
+ .sidebar-toggle {
614
+ display: none;
615
+ background: none;
616
+ border: none;
617
+ color: var(--text-primary);
618
+ font-size: 1.5rem;
619
+ cursor: pointer;
620
+ }
621
+
622
+ .sidebar {
623
+ position: fixed;
624
+ top: 70px;
625
+ left: 0;
626
+ width: 250px;
627
+ height: calc(100vh - 70px);
628
+ background: var(--bg-card);
629
+ padding: 20px 0;
630
+ overflow-y: auto;
631
+ z-index: 100;
632
+ transition: transform var(--transition-medium);
633
+ }
634
+
635
+ .sidebar.collapsed {
636
+ transform: translateX(-100%);
637
+ }
638
+
639
+ .sidebar-section {
640
+ padding: 0 15px;
641
+ margin-bottom: 30px;
642
+ }
643
+
644
+ .sidebar-title {
645
+ font-size: 0.75rem;
646
+ font-weight: 600;
647
+ color: var(--text-secondary);
648
+ text-transform: uppercase;
649
+ letter-spacing: 1px;
650
+ margin-bottom: 15px;
651
+ padding: 0 10px;
652
+ }
653
+
654
+ .sidebar-menu {
655
+ list-style: none;
656
+ }
657
+
658
+ .sidebar-menu li {
659
+ margin-bottom: 5px;
660
+ }
661
+
662
+ .sidebar-menu a {
663
+ display: flex;
664
+ align-items: center;
665
+ gap: 12px;
666
+ padding: 12px 15px;
667
+ color: var(--text-secondary);
668
+ text-decoration: none;
669
+ border-radius: 8px;
670
+ transition: all var(--transition-fast);
671
+ }
672
+
673
+ .sidebar-menu a:hover, .sidebar-menu a.active {
674
+ background: rgba(255,255,255,0.1);
675
+ color: var(--text-primary);
676
+ }
677
+
678
+ .sidebar-menu a.active {
679
+ background: var(--primary-color);
680
+ }
681
+
682
+ .sidebar-menu i {
683
+ width: 20px;
684
+ text-align: center;
685
+ }
686
+
687
+ .sidebar-menu .badge {
688
+ margin-left: auto;
689
+ background: var(--primary-color);
690
+ padding: 2px 8px;
691
+ border-radius: 10px;
692
+ font-size: 0.7rem;
693
+ }
694
+
695
+ .main-content-with-sidebar {
696
+ margin-left: 250px;
697
+ transition: margin-left var(--transition-medium);
698
+ }
699
+
700
+ .main-content-with-sidebar.expanded {
701
+ margin-left: 0;
702
+ }
703
+
704
+ /* Player Modal */
705
+ .player-modal {
706
+ position: fixed;
707
+ top: 0;
708
+ left: 0;
709
+ width: 100%;
710
+ height: 100%;
711
+ background: rgba(0,0,0,0.95);
712
+ z-index: 2000;
713
+ display: none;
714
+ align-items: center;
715
+ justify-content: center;
716
+ }
717
+
718
+ .player-modal.active {
719
+ display: flex;
720
+ }
721
+
722
+ .player-container {
723
+ width: 90%;
724
+ max-width: 1200px;
725
+ aspect-ratio: 16/9;
726
+ background: #000;
727
+ border-radius: 10px;
728
+ overflow: hidden;
729
+ position: relative;
730
+ }
731
+
732
+ .player-close {
733
+ position: absolute;
734
+ top: -50px;
735
+ right: 0;
736
+ background: none;
737
+ border: none;
738
+ color: white;
739
+ font-size: 2rem;
740
+ cursor: pointer;
741
+ transition: transform var(--transition-fast);
742
+ }
743
+
744
+ .player-close:hover {
745
+ transform: scale(1.1);
746
+ }
747
+
748
+ .video-placeholder {
749
+ width: 100%;
750
+ height: 100%;
751
+ display: flex;
752
+ flex-direction: column;
753
+ align-items: center;
754
+ justify-content: center;
755
+ background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%);
756
+ }
757
+
758
+ .play-icon-large {
759
+ font-size: 5rem;
760
+ color: var(--primary-color);
761
+ margin-bottom: 20px;
762
+ animation: playPulse 2s infinite;
763
+ }
764
+
765
+ @keyframes playPulse {
766
+ 0%, 100% { transform: scale(1); opacity: 1; }
767
+ 50% { transform: scale(1.1); opacity: 0.8; }
768
+ }
769
+
770
+ .player-controls {
771
+ position: absolute;
772
+ bottom: 0;
773
+ left: 0;
774
+ right: 0;
775
+ padding: 20px;
776
+ background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
777
+ display: flex;
778
+ align-items: center;
779
+ gap: 20px;
780
+ }
781
+
782
+ .control-btn {
783
+ background: none;
784
+ border: none;
785
+ color: white;
786
+ font-size: 1.2rem;
787
+ cursor: pointer;
788
+ transition: transform var(--transition-fast);
789
+ }
790
+
791
+ .control-btn:hover {
792
+ transform: scale(1.2);
793
+ }
794
+
795
+ .progress-bar {
796
+ flex: 1;
797
+ height: 5px;
798
+ background: rgba(255,255,255,0.3);
799
+ border-radius: 5px;
800
+ cursor: pointer;
801
+ position: relative;
802
+ }
803
+
804
+ .progress-fill {
805
+ height: 100%;
806
+ width: 35%;
807
+ background: var(--primary-color);
808
+ border-radius: 5px;
809
+ position: relative;
810
+ }
811
+
812
+ .progress-fill::after {
813
+ content: '';
814
+ position: absolute;
815
+ right: -6px;
816
+ top: 50%;
817
+ transform: translateY(-50%);
818
+ width: 12px;
819
+ height: 12px;
820
+ background: var(--primary-color);
821
+ border-radius: 50%;
822
+ opacity: 0;
823
+ transition: opacity var(--transition-fast);
824
+ }
825
+
826
+ .progress-bar:hover .progress-fill::after {
827
+ opacity: 1;
828
+ }
829
+
830
+ .volume-control {
831
+ display: flex;
832
+ align-items: center;
833
+ gap: 10px;
834
+ }
835
+
836
+ .volume-slider {
837
+ width: 80px;
838
+ height: 4px;
839
+ background: rgba(255,255,255,0.3);
840
+ border-radius: 2px;
841
+ cursor: pointer;
842
+ }
843
+
844
+ .volume-level {
845
+ width: 70%;
846
+ height: 100%;
847
+ background: white;
848
+ border-radius: 2px;
849
+ }
850
+
851
+ /* Footer */
852
+ .footer {
853
+ background: var(--bg-card);
854
+ padding: 60px 4% 30px;
855
+ margin-top: 60px;
856
+ }
857
+
858
+ .footer-content {
859
+ display: grid;
860
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
861
+ gap: 40px;
862
+ margin-bottom: 40px;
863
+ }
864
+
865
+ .footer-section h4 {
866
+ font-size: 1.1rem;
867
+ margin-bottom: 20px;
868
+ color: var(--text-primary);
869
+ }
870
+
871
+ .footer-links {
872
+ list-style: none;
873
+ }
874
+
875
+ .footer-links li {
876
+ margin-bottom: 12px;
877
+ }
878
+
879
+ .footer-links a {
880
+ color: var(--text-secondary);
881
+ text-decoration: none;
882
+ font-size: 0.9rem;
883
+ transition: color var(--transition-fast);
884
+ }
885
+
886
+ .footer-links a:hover {
887
+ color: var(--text-primary);
888
+ }
889
+
890
+ .social-links {
891
+ display: flex;
892
+ gap: 15px;
893
+ margin-top: 20px;
894
+ }
895
+
896
+ .social-links a {
897
+ width: 40px;
898
+ height: 40px;
899
+ border-radius: 50%;
900
+ background: rgba(255,255,255,0.1);
901
+ display: flex;
902
+ align-items: center;
903
+ justify-content: center;
904
+ color: var(--text-primary);
905
+ text-decoration: none;
906
+ transition: all var(--transition-fast);
907
+ }
908
+
909
+ .social-links a:hover {
910
+ background: var(--primary-color);
911
+ transform: translateY(-3px);
912
+ }
913
+
914
+ .footer-bottom {
915
+ border-top: 1px solid rgba(255,255,255,0.1);
916
+ padding-top: 30px;
917
+ display: flex;
918
+ flex-wrap: wrap;
919
+ justify-content: space-between;
920
+ align-items: center;
921
+ gap: 20px;
922
+ }
923
+
924
+ .footer-logo {
925
+ display: flex;
926
+ align-items: center;
927
+ gap: 10px;
928
+ font-size: 1.5rem;
929
+ font-weight: 800;
930
+ color: var(--primary-color);
931
+ }
932
+
933
+ .copyright {
934
+ color: var(--text-secondary);
935
+ font-size: 0.85rem;
936
+ }
937
+
938
+ /* Mobile Responsiveness */
939
+ @media (max-width: 1024px) {
940
+ .nav-links {
941
+ display: none;
942
+ }
943
+
944
+ .sidebar-toggle {
945
+ display: block;
946
+ }
947
+
948
+ .main-content-with-sidebar {
949
+ margin-left: 0;
950
+ }
951
+
952
+ .hero-title {
953
+ font-size: 3rem;
954
+ }
955
+ }
956
+
957
+ @media (max-width: 768px) {
958
+ .header {
959
+ padding: 0 20px;
960
+ }
961
+
962
+ .search-box.active input {
963
+ width: 150px;
964
+ }
965
+
966
+ .user-name {
967
+ display: none;
968
+ }
969
+
970
+ .hero {
971
+ height: 70vh;
972
+ }
973
+
974
+ .hero-title {
975
+ font-size: 2.2rem;
976
+ }
977
+
978
+ .hero-description {
979
+ font-size: 0.95rem;
980
+ -webkit-line-clamp: 2;
981
+ }
982
+
983
+ .hero-actions {
984
+ flex-direction: column;
985
+ }
986
+
987
+ .btn {
988
+ justify-content: center;
989
+ }
990
+
991
+ .content-card {
992
+ width: 160px;
993
+ }
994
+
995
+ .card-image {
996
+ height: 240px;
997
+ }
998
+
999
+ .sidebar {
1000
+ width: 280px;
1001
+ }
1002
+ }
1003
+
1004
+ @media (max-width: 480px) {
1005
+ .hero-title {
1006
+ font-size: 1.8rem;
1007
+ }
1008
+
1009
+ .content-card {
1010
+ width: 140px;
1011
+ }
1012
+
1013
+ .card-image {
1014
+ height: 210px;
1015
+ }
1016
+
1017
+ .live-grid {
1018
+ grid-template-columns: 1fr;
1019
+ }
1020
+ }
1021
+
1022
+ /* Animations */
1023
+ @keyframes fadeIn {
1024
+ from { opacity: 0; transform: translateY(20px); }
1025
+ to { opacity: 1; transform: translateY(0); }
1026
+ }
1027
+
1028
+ .animate-in {
1029
+ animation: fadeIn 0.6s ease forwards;
1030
+ }
1031
+
1032
+ /* Custom select dropdown */
1033
+ .language-select {
1034
+ background: rgba(255,255,255,0.1);
1035
+ border: 1px solid rgba(255,255,255,0.2);
1036
+ color: var(--text-primary);
1037
+ padding: 8px 12px;
1038
+ border-radius: 5px;
1039
+ cursor: pointer;
1040
+ }
1041
+
1042
+ /* Trending indicator */
1043
+ .trending-badge {
1044
+ position: absolute;
1045
+ top: 10px;
1046
+ left: 10px;
1047
+ background: var(--gold-gradient);
1048
+ padding: 4px 10px;
1049
+ border-radius: 4px;
1050
+ font-size: 0.7rem;
1051
+ font-weight: 600;
1052
+ display: flex;
1053
+ align-items: center;
1054
+ gap: 5px;
1055
+ z-index: 10;
1056
+ }
1057
+
1058
+ /* Genre pills */
1059
+ .genre-pills {
1060
+ display: flex;
1061
+ gap: 10px;
1062
+ padding: 0 4%;
1063
+ margin-bottom: 30px;
1064
+ overflow-x: auto;
1065
+ padding-bottom: 10px;
1066
+ }
1067
+
1068
+ .genre-pill {
1069
+ padding: 8px 20px;
1070
+ background: rgba(255,255,255,0.1);
1071
+ border: 1px solid rgba(255,255,255,0.2);
1072
+ border-radius: 20px;
1073
+ font-size: 0.85rem;
1074
+ cursor: pointer;
1075
+ transition: all var(--transition-fast);
1076
+ white-space: nowrap;
1077
+ }
1078
+
1079
+ .genre-pill:hover, .genre-pill.active {
1080
+ background: var(--primary-color);
1081
+ border-color: var(--primary-color);
1082
+ }
1083
+
1084
+ /* Built with anycoder */
1085
+ .built-with {
1086
+ position: fixed;
1087
+ bottom: 20px;
1088
+ right: 20px;
1089
+ background: rgba(255,255,255,0.1);
1090
+ backdrop-filter: blur(10px);
1091
+ padding: 10px 20px;
1092
+ border-radius: 25px;
1093
+ font-size: 0.85rem;
1094
+ z-index: 1000;
1095
+ transition: all var(--transition-fast);
1096
+ }
1097
+
1098
+ .built-with:hover {
1099
+ background: var(--primary-color);
1100
+ transform: scale(1.05);
1101
+ }
1102
+
1103
+ .built-with a {
1104
+ color: var(--text-primary);
1105
+ text-decoration: none;
1106
+ font-weight: 600;
1107
+ }
1108
+ </style>
1109
+ </head>
1110
+ <body>
1111
+ <!-- Header -->
1112
+ <header class="header" id="header">
1113
+ <div style="display: flex; align-items: center; gap: 20px;">
1114
+ <button class="sidebar-toggle" id="sidebarToggle">
1115
+ <i class="fas fa-bars"></i>
1116
+ </button>
1117
+ <a href="#" class="logo">
1118
+ <i class="fas fa-play-circle"></i>
1119
+ <span>StreamHub</span>
1120
+ </a>
1121
+ </div>
1122
+
1123
+ <nav>
1124
+ <ul class="nav-links">
1125
+ <li><a href="#" class="active">Home</a></li>
1126
+ <li><a href="#">Movies</a></li>
1127
+ <li><a href="#">TV Shows</a></li>
1128
+ <li><a href="#">Live</a></li>
1129
+ <li><a href="#">My List</a></li>
1130
+ </ul>
1131
+ </nav>
1132
+
1133
+ <div class="header-actions">
1134
+ <div class="search-box" id="searchBox">
1135
+ <i class="fas fa-search" id="searchIcon"></i>
1136
+ <input type="text" placeholder="Search movies, shows..." id="searchInput">
1137
+ </div>
1138
+ <button class="notification-btn">
1139
+ <i class="fas fa-bell"></i>
1140
+ <span class="notification-badge">3</span>
1141
+ </button>
1142
+ <div class="user-profile">
1143
+ <div class="user-avatar">JD</div>
1144
+ <span class="user-name">John Doe</span>
1145
+ <i class="fas fa-chevron-down" style="font-size: 0.8rem;"></i>
1146
+ </div>
1147
+ </div>
1148
+ </header>
1149
+
1150
+ <!-- Sidebar -->
1151
+ <aside class="sidebar" id="sidebar">
1152
+ <div class="sidebar-section">
1153
+ <h4 class="sidebar-title">Menu</h4>
1154
+ <ul class="sidebar-menu">
1155
+ <li><a href="#" class="active"><i class="fas fa-home"></i> Home</a></li>
1156
+ <li><a href="#"><i class="fas fa-compass"></i> Browse</a></li>
1157
+ <li><a href="#"><i class="fas fa-fire"></i> Trending</a></li>
1158
+ <li><a href="#"><i class="fas fa-clock"></i> Coming Soon</a></li>
1159
+ </ul>
1160
+ </div>
1161
+
1162
+ <div class="sidebar-section">
1163
+ <h4 class="sidebar-title">Library</h4>
1164
+ <ul class="sidebar-menu">
1165
+ <li><a href="#"><i class="fas fa-history"></i> Recently Watched</a></li>
1166
+ <li><a href="#"><i class="fas fa-heart"></i> Favorites</a></li>
1167
+ <li><a href="#"><i class="fas fa-download"></i> Downloads <span class="badge">12</span></a></li>
1168
+ <li><a href="#"><i class="fas fa-bookmark"></i> Watchlist</a></li>
1169
+ </ul>
1170
+ </div>
1171
+
1172
+ <div class="sidebar-section">
1173
+ <h4 class="sidebar-title">Genres</h4>
1174
+ <ul class="sidebar-menu">
1175
+ <li><a href="#"><i class="fas fa-ghost"></i> Horror</a></li>
1176
+ <li><a href="#"><i class="fas fa-rocket"></i> Sci-Fi</a></li>
1177
+ <li><a href="#"><i class="fas fa-heart"></i> Romance</a></li>
1178
+ <li><a href="#"><i class="fas fa-mask"></i> Action</a></li>
1179
+ <li><a href="#"><i class="fas fa-laugh"></i> Comedy</a></li>
1180
+ </ul>
1181
+ </div>
1182
+
1183
+ <div class="sidebar-section">
1184
+ <h4 class="sidebar-title">Settings</h4>
1185
+ <ul class="sidebar-menu">
1186
+ <li><a href="#"><i class="fas fa-cog"></i> Settings</a></li>
1187
+ <li><a href="#"><i class="fas fa-question-circle"></i> Help Center</a></li>
1188
+ <li><a href="#"><i class="fas fa-sign-out-alt"></i> Log Out</a></li>
1189
+ </ul>
1190
+ </div>
1191
+ </aside>
1192
+
1193
+ <!-- Main Content -->
1194
+ <main class="main-content-with-sidebar" id="mainContent">
1195
+ <div class="main-content">
1196
+ <!-- Hero Section -->
1197
+ <section class="hero">
1198
+ <div class="hero-bg"></div>
1199
+ <div class="hero-content animate-in">
1200
+ <div class="hero-badge">
1201
+ <i class="fas fa-star"></i>
1202
+ #1 Trending
1203
+ </div>
1204
+ <h1 class="hero-title">Interstellar Odyssey</h1>
1205
+ <div class="hero-meta">
1206
+ <span class="hero-rating"><i class="fas fa-star"></i> 9.8</span>
1207
+ <span class="hero-year">2024</span>
1208
+ <span class="hero-duration">2h 45m</span>
1209
+ <span class="hero-quality">4K</span>
1210
+ <span class="card-genre">Sci-Fi</span>
1211
+ </div>
1212
+ <p class="hero-description">
1213
+ In a future where Earth is becoming uninhabitable, a team of explorers travels through a wormhole in space in an attempt to ensure humanity's survival. An epic journey of discovery, love, and the power of human connection across the cosmos.
1214
+ </p>
1215
+ <div class="hero-actions">
1216
+ <button class="btn btn-primary" onclick="openPlayer()">
1217
+ <i class="fas fa-play"></i>
1218
+ Watch Now
1219
+ </button>
1220
+ <button class="btn btn-secondary">
1221
+ <i class="fas fa-info-circle"></i>
1222
+ More Info
1223
+ </button>
1224
+ </div>
1225
+ </div>
1226
+ </section>
1227
+
1228
+ <!-- Genre Pills -->
1229
+ <div class="genre-pills">
1230
+ <span class="genre-pill active">All</span>
1231
+ <span class="genre-pill">Action</span>
1232
+ <span class="genre-pill">Comedy</span>
1233
+ <span class="genre-pill">Drama</span>
1234
+ <span class="genre-pill">Sci-Fi</span>
1235
+ <span class="genre-pill">Horror</span>
1236
+ <span class="genre-pill">Romance</span>
1237
+ <span class="genre-pill">Documentary</span>
1238
+ <span class="genre-pill">Animation</span>
1239
+ </div>
1240
+
1241
+ <!-- Trending Section -->
1242
+ <section class="content-section">
1243
+ <div class="section-header">
1244
+ <h2 class="section-title">
1245
+ <i class="fas fa-fire"></i>
1246
+ Trending Now
1247
+ </h2>
1248
+ <a href="#" class="view-all">View All <i class="fas fa-arrow-right"></i></a>
1249
+ </div>
1250
+ <div class="content-row" id="trendingRow">
1251
+ <!-- Content cards will be generated by JavaScript -->
1252
+ </div>
1253
+ </section>
1254
+
1255
+ <!-- Popular Section -->
1256
+ <section class="content-section">
1257
+ <div class="section-header">
1258
+ <h2 class="section-title">
1259
+ <i class="fas fa-thumbs-up"></i>
1260
+ Popular on StreamHub
1261
+ </h2>
1262
+ <a href="#" class="view-all">View All <i class="fas fa-arrow-right"></i></a>
1263
+ </div>
1264
+ <div class="content-row" id="popularRow">
1265
+ <!-- Content cards will be generated by JavaScript -->
1266
+ </div>
1267
+ </section>
1268
+
1269
+ <!-- Live Section -->
1270
+ <section class="live-section">
1271
+ <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 25px;">
1272
+ <div class="live-badge">
1273
+ <span class="live-dot"></span>
1274
+ LIVE
1275
+ </div>
1276
+ <h2 style="font-size: 1.5rem; font-weight: 700;">Live Events</h2>
1277
+ </div>
1278
+ <div class="live-grid" id="liveGrid">
1279
+ <!-- Live cards will be generated by JavaScript -->
1280
+ </div>
1281
+ </section>
1282
+
1283
+ <!-- New Releases Section -->
1284
+ <section class="content-section">
1285
+ <div class="section-header">
1286
+ <h2 class="section-title">
1287
+ <i class="fas fa-star"></i>
1288
+ New Releases
1289
+ </h2>
1290
+ <a href="#" class="view-all">View All <i class="fas fa-arrow-right"></i></a>
1291
+ </div>
1292
+ <div class="content-row" id="newReleasesRow">
1293
+ <!-- Content cards will be generated by JavaScript -->
1294
+ </div>
1295
+ </section>
1296
+
1297
+ <!-- Coming Soon Section -->
1298
+ <section class="content-section">
1299
+ <div class="section-header">
1300
+ <h2 class="section-title">
1301
+ <i class="fas fa-calendar-alt"></i>
1302
+ Coming Soon
1303
+ </h2>
1304
+ <a href="#" class="view-all">View All <i class="fas fa-arrow-right"></i></a>
1305
+ </div>
1306
+ <div class="content-row" id="comingSoonRow">
1307
+ <!-- Content cards will be generated by JavaScript -->
1308
+ </div>
1309
+ </section>
1310
+ </div>
1311
+
1312
+ <!-- Footer -->
1313
+ <footer class="footer">
1314
+ <div class="footer-content">
1315
+ <div class="footer-section">
1316
+ <div class="footer-logo">
1317
+ <i class="fas fa-play-circle"></i>
1318
+ StreamHub
1319
+ </div>
1320
+ <p style="color: var(--text-secondary); font-size: 0.9rem; margin-top: 15px;">
1321
+ Your ultimate destination for movies, TV shows, and live events. Stream anywhere, anytime.
1322
+ </p>
1323
+ <div class="social-links">
1324
+ <a href="#"><i class="fab fa-facebook-f"></i></a>
1325
+ <a href="#"><i class="fab fa-twitter"></i></a>
1326
+ <a href="#"><i class="fab fa-instagram"></i></a>
1327
+ <a href="#"><i class="fab fa-youtube"></i></a>
1328
+ </div>
1329
+ </div>
1330
+ <div class="footer-section">
1331
+ <h4>Browse</h4>
1332
+ <ul class="footer-links">
1333
+ <li><a href="#">Movies</a></li>
1334
+ <li><a href="#">TV Shows</a></li>
1335
+ <li><a href="#">Live TV</a></li>
1336
+ <li><a href="#">Originals</a></li>
1337
+ <li><a href="#">Recently Added</a></li>
1338
+ </ul>
1339
+ </div>
1340
+ <div class="footer-section">
1341
+ <h4>Support</h4>
1342
+ <ul class="footer-links">
1343
+ <li><a href="#">Help Center</a></li>
1344
+ <li><a href="#">Contact Us</a></li>
1345
+ <li><a href="#">Terms of Service</a></li>
1346
+ <li><a href="#">Privacy Policy</a></li>
1347
+ <li><a href="#">Cookie Preferences</a></li>
1348
+ </ul>
1349
+ </div>
1350
+ <div class="footer-section">
1351
+ <h4>Account</h4>
1352
+ <ul class="footer-links">
1353
+ <li><a href="#">Manage Account</a></li>
1354
+ <li><a href="#">Billing</a></li>
1355
+ <li><a href="#">Subscription</a></li>
1356
+ <li><a href="#">Watch History</a></li>
1357
+ <li><a href="#">Parental Controls</a></li>
1358
+ </ul>
1359
+ </div>
1360
+ </div>
1361
+ <div class="footer-bottom">
1362
+ <span class="copyright">© 2024 StreamHub. All rights reserved.</span>
1363
+ <select class="language-select">
1364
+ <option>English</option>
1365
+ <option>Español</option>
1366
+ <option>Français</option>
1367
+ <option>Deutsch</option>
1368
+ </select>
1369
+ </div>
1370
+ </footer>
1371
+ </main>
1372
+
1373
+ <!-- Player Modal -->
1374
+ <div class="player-modal" id="playerModal">
1375
+ <div class="player-container">
1376
+ <button class="player-close" onclick="closePlayer()">
1377
+ <i class="fas fa-times"></i>
1378
+ </button>
1379
+ <div class="video-placeholder">
1380
+ <i class="fas fa-play-circle play-icon-large"></i>
1381
+ <h3 style="margin-bottom: 10px;">Interstellar Odyssey</h3>
1382
+ <p style="color: var(--text-secondary);">Playing now...</p>
1383
+ </div>
1384
+ <div class="player-controls">
1385
+ <button class="control-btn"><i class="fas fa-play"></i></button>
1386
+ <button class="control-btn"><i class="fas fa-step-forward"></i></button>
1387
+ <div class="progress-bar">
1388
+ <div class="progress-fill"></div>
1389
+ </div>
1390
+ <span style="font-size: 0.85rem;">35:00 / 1:45:00</span>
1391
+ <div class="volume-control">
1392
+ <button class="control-btn"><i class="fas fa-volume-up"></i></button>
1393
+ <div class="volume-slider">
1394
+ <div class="volume-level"></div>
1395
+ </div>
1396
+ </div>
1397
+ <button class="control-btn"><i class="fas fa-expand"></i></button>
1398
+ <button class="control-btn"><i class="fas fa-cog"></i></button>
1399
+ </div>
1400
+ </div>
1401
+ </div>
1402
+
1403
+ <!-- Built with anycoder -->
1404
+ <div class="built-with">
1405
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
1406
+ </div>
1407
+
1408
+ <script>
1409
+ // Sample data for content cards
1410
+ const contentData = {
1411
+ trending: [
1412
+ { title: "The Last Empire", rating: "9.2", year: "2024", genre: "Action", img: "https://images.unsplash.com/photo-1536440136628-849c177e76a1?w=400&q=80" },
1413
+ { title: "Cyber Dreams", rating: "8.9", year: "2024", genre: "Sci-Fi", img: "https://images.unsplash.com/photo-1614726365723-49cfae988512?w=400&q=80" },
1414
+ { title: "Ocean's Depth", rating: "8.7", year: "2024", genre: "Adventure", img: "https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?w=400&q=80" },
1415
+ { title: "Midnight Tales", rating: "9.0", year: "2024", genre: "Horror", img: "https://images.unsplash.com/photo-1509347528160-9a9e33742cd4?w=400&q=80" },
1416
+ { title: "Love in Paris", rating: "8.5", year: "2024", genre: "Romance", img: "https://images.unsplash.com/photo-1516893842880-5d8aafa7cc4