Hugging Face's logo

Spaces:
Mousco
/
anycoder-6d1cb1d8
Running

App Files Community
Mousco commited on
Commit
0de2772
·
verified ·
1 Parent(s): f1abad5

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +741 -19
index.html CHANGED
@@ -1,19 +1,741 @@
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="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>StreamFlow - Films, Séries & Animes Gratuits</title>
7
+
8
+ <!-- Importation de FontAwesome pour les icônes -->
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+
11
+ <!-- Police Google Fonts (Inter) -->
12
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap" rel="stylesheet">
13
+
14
+ <style>
15
+ /* --- VARIABLES CSS & RESET --- */
16
+ :root {
17
+ --primary-color: #e50914; /* Rouge style Netflix */
18
+ --primary-hover: #b20710;
19
+ --bg-dark: #141414;
20
+ --bg-black: #000000;
21
+ --bg-card: #1f1f1f;
22
+ --text-white: #ffffff;
23
+ --text-gray: #b3b3b3;
24
+ --shadow: 0 4px 10px rgba(0,0,0,0.5);
25
+ --transition: all 0.3s ease;
26
+ --header-height: 70px;
27
+ }
28
+
29
+ * {
30
+ margin: 0;
31
+ padding: 0;
32
+ box-sizing: border-box;
33
+ }
34
+
35
+ body {
36
+ font-family: 'Inter', sans-serif;
37
+ background-color: var(--bg-dark);
38
+ color: var(--text-white);
39
+ overflow-x: hidden;
40
+ -webkit-font-smoothing: antialiased;
41
+ }
42
+
43
+ a { text-decoration: none; color: inherit; }
44
+ ul { list-style: none; }
45
+ button { border: none; outline: none; cursor: pointer; font-family: inherit; }
46
+
47
+ /* --- HEADER --- */
48
+ header {
49
+ position: fixed;
50
+ top: 0;
51
+ width: 100%;
52
+ height: var(--header-height);
53
+ display: flex;
54
+ align-items: center;
55
+ justify-content: space-between;
56
+ padding: 0 4%;
57
+ background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
58
+ z-index: 1000;
59
+ transition: background-color 0.4s;
60
+ }
61
+
62
+ header.scrolled {
63
+ background-color: var(--bg-black);
64
+ }
65
+
66
+ .logo {
67
+ font-size: 1.8rem;
68
+ font-weight: 800;
69
+ color: var(--primary-color);
70
+ letter-spacing: -1px;
71
+ margin-right: 40px;
72
+ }
73
+
74
+ .nav-links {
75
+ display: flex;
76
+ gap: 20px;
77
+ }
78
+
79
+ .nav-links a {
80
+ font-size: 0.9rem;
81
+ color: var(--text-white);
82
+ transition: color 0.2s;
83
+ }
84
+
85
+ .nav-links a:hover, .nav-links a.active {
86
+ color: var(--text-gray);
87
+ font-weight: 600;
88
+ }
89
+
90
+ .header-actions {
91
+ display: flex;
92
+ align-items: center;
93
+ gap: 20px;
94
+ }
95
+
96
+ .search-box {
97
+ background: rgba(0,0,0,0.75);
98
+ border: 1px solid var(--text-white);
99
+ border-radius: 20px;
100
+ padding: 5px 15px;
101
+ display: flex;
102
+ align-items: center;
103
+ }
104
+
105
+ .search-box input {
106
+ background: transparent;
107
+ border: none;
108
+ color: white;
109
+ padding: 5px;
110
+ width: 0; /* Hidden by default or expandable */
111
+ transition: width 0.3s;
112
+ }
113
+
114
+ .search-box:hover input, .search-box input:focus {
115
+ width: 150px;
116
+ outline: none;
117
+ }
118
+
119
+ .user-avatar {
120
+ width: 32px;
121
+ height: 32px;
122
+ border-radius: 4px;
123
+ background-color: #333;
124
+ overflow: hidden;
125
+ }
126
+
127
+ .user-avatar img { width: 100%; height: 100%; object-fit: cover; }
128
+
129
+ .anycoder-link {
130
+ font-size: 0.75rem;
131
+ color: var(--text-gray);
132
+ margin-left: 10px;
133
+ border: 1px solid #333;
134
+ padding: 4px 8px;
135
+ border-radius: 4px;
136
+ transition: var(--transition);
137
+ }
138
+
139
+ .anycoder-link:hover {
140
+ border-color: var(--primary-color);
141
+ color: var(--primary-color);
142
+ }
143
+
144
+ /* --- HERO SECTION --- */
145
+ #hero {
146
+ position: relative;
147
+ height: 85vh;
148
+ width: 100%;
149
+ background: url('https://picsum.photos/seed/hero1/1920/1080') center/cover no-repeat;
150
+ display: flex;
151
+ align-items: center;
152
+ padding: 0 4%;
153
+ }
154
+
155
+ #hero::after {
156
+ content: '';
157
+ position: absolute;
158
+ top: 0; left: 0; width: 100%; height: 100%;
159
+ background: linear-gradient(to top, var(--bg-dark) 0%, transparent 60%, rgba(0,0,0,0.4) 100%);
160
+ }
161
+
162
+ .hero-content {
163
+ position: relative;
164
+ z-index: 2;
165
+ max-width: 600px;
166
+ margin-top: 50px;
167
+ }
168
+
169
+ .hero-badge {
170
+ background-color: rgba(255,255,255,0.2);
171
+ padding: 5px 10px;
172
+ border-radius: 4px;
173
+ font-size: 0.8rem;
174
+ font-weight: 600;
175
+ text-transform: uppercase;
176
+ letter-spacing: 1px;
177
+ margin-bottom: 15px;
178
+ display: inline-block;
179
+ backdrop-filter: blur(5px);
180
+ }
181
+
182
+ .hero-title {
183
+ font-size: 4rem;
184
+ font-weight: 800;
185
+ line-height: 1.1;
186
+ margin-bottom: 20px;
187
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
188
+ }
189
+
190
+ .hero-desc {
191
+ font-size: 1.1rem;
192
+ color: #ddd;
193
+ margin-bottom: 30px;
194
+ text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
195
+ line-height: 1.5;
196
+ }
197
+
198
+ .hero-buttons {
199
+ display: flex;
200
+ gap: 15px;
201
+ }
202
+
203
+ .btn {
204
+ padding: 12px 30px;
205
+ border-radius: 5px;
206
+ font-weight: 600;
207
+ font-size: 1rem;
208
+ display: flex;
209
+ align-items: center;
210
+ gap: 10px;
211
+ transition: var(--transition);
212
+ }
213
+
214
+ .btn-primary {
215
+ background-color: var(--primary-color);
216
+ color: white;
217
+ }
218
+
219
+ .btn-primary:hover {
220
+ background-color: var(--primary-hover);
221
+ }
222
+
223
+ .btn-secondary {
224
+ background-color: rgba(109, 109, 110, 0.7);
225
+ color: white;
226
+ backdrop-filter: blur(5px);
227
+ }
228
+
229
+ .btn-secondary:hover {
230
+ background-color: rgba(109, 109, 110, 0.4);
231
+ }
232
+
233
+ /* --- CONTENT ROWS --- */
234
+ .section-title {
235
+ font-size: 1.4rem;
236
+ font-weight: 600;
237
+ margin: 30px 0 15px 4%;
238
+ color: #e5e5e5;
239
+ }
240
+
241
+ .row-container {
242
+ position: relative;
243
+ margin-bottom: 20px;
244
+ padding-left: 4%;
245
+ }
246
+
247
+ .row-scroll {
248
+ display: flex;
249
+ gap: 10px;
250
+ overflow-x: auto;
251
+ padding: 20px 0;
252
+ padding-right: 4%;
253
+ scroll-behavior: smooth;
254
+ scrollbar-width: none; /* Firefox */
255
+ }
256
+
257
+ .row-scroll::-webkit-scrollbar {
258
+ display: none; /* Chrome/Safari */
259
+ }
260
+
261
+ .movie-card {
262
+ flex: 0 0 auto;
263
+ width: 200px;
264
+ height: 300px;
265
+ border-radius: 6px;
266
+ overflow: hidden;
267
+ position: relative;
268
+ cursor: pointer;
269
+ transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
270
+ background-color: var(--bg-card);
271
+ }
272
+
273
+ .movie-card img {
274
+ width: 100%;
275
+ height: 100%;
276
+ object-fit: cover;
277
+ }
278
+
279
+ .movie-card:hover {
280
+ transform: scale(1.1);
281
+ z-index: 10;
282
+ box-shadow: 0 10px 20px rgba(0,0,0,0.7);
283
+ }
284
+
285
+ .card-overlay {
286
+ position: absolute;
287
+ bottom: 0;
288
+ left: 0;
289
+ width: 100%;
290
+ padding: 15px;
291
+ background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
292
+ opacity: 0;
293
+ transition: opacity 0.3s;
294
+ }
295
+
296
+ .movie-card:hover .card-overlay {
297
+ opacity: 1;
298
+ }
299
+
300
+ .card-title {
301
+ font-size: 0.9rem;
302
+ font-weight: 600;
303
+ margin-bottom: 5px;
304
+ }
305
+
306
+ .card-info {
307
+ font-size: 0.75rem;
308
+ color: #46d369; /* Green for match/score */
309
+ display: flex;
310
+ align-items: center;
311
+ gap: 10px;
312
+ }
313
+
314
+ .card-meta {
315
+ color: white;
316
+ border: 1px solid rgba(255,255,255,0.4);
317
+ padding: 0 4px;
318
+ font-size: 0.6rem;
319
+ }
320
+
321
+ .card-genre {
322
+ color: #fff;
323
+ font-size: 0.7rem;
324
+ }
325
+
326
+ /* Scroll Buttons */
327
+ .scroll-btn {
328
+ position: absolute;
329
+ top: 0;
330
+ bottom: 0;
331
+ width: 4%;
332
+ background: rgba(0,0,0,0.5);
333
+ color: white;
334
+ display: flex;
335
+ align-items: center;
336
+ justify-content: center;
337
+ font-size: 2rem;
338
+ z-index: 5;
339
+ opacity: 0;
340
+ transition: opacity 0.3s;
341
+ }
342
+
343
+ .row-container:hover .scroll-btn { opacity: 1; }
344
+ .scroll-btn.left { left: 0; }
345
+ .scroll-btn.right { right: 0; }
346
+ .scroll-btn:hover { background: rgba(0,0,0,0.7); transform: scale(1.1); }
347
+
348
+ /* --- MODAL PLAYER --- */
349
+ #modal-overlay {
350
+ position: fixed;
351
+ top: 0; left: 0; width: 100%; height: 100%;
352
+ background: rgba(0,0,0,0.9);
353
+ z-index: 2000;
354
+ display: none;
355
+ justify-content: center;
356
+ align-items: center;
357
+ opacity: 0;
358
+ transition: opacity 0.3s;
359
+ }
360
+
361
+ #modal-overlay.active {
362
+ display: flex;
363
+ opacity: 1;
364
+ }
365
+
366
+ .modal-content {
367
+ width: 90%;
368
+ max-width: 1000px;
369
+ background: #181818;
370
+ border-radius: 10px;
371
+ overflow: hidden;
372
+ box-shadow: 0 20px 50px rgba(0,0,0,0.8);
373
+ position: relative;
374
+ }
375
+
376
+ .close-modal {
377
+ position: absolute;
378
+ top: 15px;
379
+ right: 15px;
380
+ background: rgba(0,0,0,0.7);
381
+ color: white;
382
+ width: 36px;
383
+ height: 36px;
384
+ border-radius: 50%;
385
+ display: flex;
386
+ align-items: center;
387
+ justify-content: center;
388
+ font-size: 1.2rem;
389
+ z-index: 10;
390
+ cursor: pointer;
391
+ }
392
+
393
+ .video-container {
394
+ width: 100%;
395
+ aspect-ratio: 16/9;
396
+ background: black;
397
+ position: relative;
398
+ }
399
+
400
+ video {
401
+ width: 100%;
402
+ height: 100%;
403
+ }
404
+
405
+ .modal-details {
406
+ padding: 30px;
407
+ }
408
+
409
+ .modal-title {
410
+ font-size: 2rem;
411
+ font-weight: 700;
412
+ margin-bottom: 10px;
413
+ }
414
+
415
+ .modal-meta {
416
+ display: flex;
417
+ gap: 15px;
418
+ color: var(--text-gray);
419
+ font-size: 0.9rem;
420
+ margin-bottom: 20px;
421
+ }
422
+
423
+ .match-score { color: #46d369; font-weight: 700; }
424
+
425
+ .modal-desc {
426
+ font-size: 1rem;
427
+ line-height: 1.6;
428
+ color: #fff;
429
+ max-width: 80%;
430
+ }
431
+
432
+ /* --- FOOTER --- */
433
+ footer {
434
+ margin-top: 50px;
435
+ padding: 50px 4%;
436
+ background-color: var(--bg-black);
437
+ color: #757575;
438
+ font-size: 0.9rem;
439
+ }
440
+
441
+ .footer-grid {
442
+ display: grid;
443
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
444
+ gap: 20px;
445
+ margin-bottom: 20px;
446
+ }
447
+
448
+ .footer-link {
449
+ margin-bottom: 10px;
450
+ display: block;
451
+ }
452
+
453
+ .footer-link:hover { text-decoration: underline; }
454
+
455
+ .footer-bottom {
456
+ margin-top: 20px;
457
+ font-size: 0.8rem;
458
+ display: flex;
459
+ justify-content: space-between;
460
+ align-items: center;
461
+ }
462
+
463
+ /* --- RESPONSIVE --- */
464
+ @media (max-width: 768px) {
465
+ .hero-title { font-size: 2.5rem; }
466
+ .nav-links { display: none; } /* Simplified for mobile */
467
+ .movie-card { width: 140px; height: 210px; }
468
+ .header-actions .search-box { display: none; }
469
+ .hero-buttons { flex-direction: column; width: 100%; }
470
+ .btn { width: 100%; justify-content: center; }
471
+ }
472
+ </style>
473
+ </head>
474
+ <body>
475
+
476
+ <!-- Header -->
477
+ <header id="navbar">
478
+ <div style="display: flex; align-items: center;">
479
+ <div class="logo">STREAMFLOW</div>
480
+ <nav class="nav-links">
481
+ <a href="#" class="active">Accueil</a>
482
+ <a href="#">Films</a>
483
+ <a href="#">Séries</a>
484
+ <a href="#">Animés</a>
485
+ <a href="#">Ma Liste</a>
486
+ </nav>
487
+ </div>
488
+
489
+ <div class="header-actions">
490
+ <div class="search-box">
491
+ <i class="fas fa-search" style="color: white;"></i>
492
+ <input type="text" placeholder="Titres, genres, personnes...">
493
+ </div>
494
+ <div class="user-avatar">
495
+ <img src="https://picsum.photos/seed/user/50/50" alt="User">
496
+ </div>
497
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
498
+ Built with anycoder
499
+ </a>
500
+ </div>
501
+ </header>
502
+
503
+ <!-- Main Content -->
504
+ <main>
505
+ <!-- Hero Section -->
506
+ <section id="hero">
507
+ <div class="hero-content">
508
+ <div class="hero-badge">Original</div>
509
+ <h1 class="hero-title">L'Ère Cyberpunk</h1>
510
+ <p class="hero-desc">
511
+ Dans une dystopie obsédée par la technologie et la modification corporelle, un mercenaire marginal essaie de survivre en devenant une légende des rues de Night City.
512
+ </p>
513
+ <div class="hero-buttons">
514
+ <button class="btn btn-primary" onclick="playVideo('L\'Ère Cyberpunk', 'https://media.w3.org/2010/05/sintel/trailer.mp4')">
515
+ <i class="fas fa-play"></i> Lecture
516
+ </button>
517
+ <button class="btn btn-secondary">
518
+ <i class="fas fa-info-circle"></i> Plus d'infos
519
+ </button>
520
+ </div>
521
+ </div>
522
+ </section>
523
+
524
+ <!-- Dynamic Content Container -->
525
+ <div id="content-feed">
526
+ <!-- Rows will be injected here via JS -->
527
+ </div>
528
+ </main>
529
+
530
+ <!-- Video Player Modal -->
531
+ <div id="modal-overlay">
532
+ <div class="modal-content">
533
+ <div class="close-modal" onclick="closeVideo()">
534
+ <i class="fas fa-times"></i>
535
+ </div>
536
+ <div class="video-container">
537
+ <video id="main-player" controls poster="https://picsum.photos/seed/poster/800/450">
538
+ <source src="" type="video/mp4">
539
+ Votre navigateur ne supporte pas la vidéo HTML5.
540
+ </video>
541
+ </div>
542
+ <div class="modal-details">
543
+ <h2 class="modal-title" id="modal-title">Titre du Film</h2>
544
+ <div class="modal-meta">
545
+ <span class="match-score">98% Match</span>
546
+ <span>2023</span>
547
+ <span class="card-meta">HD</span>
548
+ <span>2h 15min</span>
549
+ </div>
550
+ <p class="modal-desc">
551
+ Description détaillée du contenu sélectionné. C'est ici que l'utilisateur trouverait le synopsis officiel du film ou de l'anime qu'il s'apprête à regarder.
552
+ </p>
553
+ </div>
554
+ </div>
555
+ </div>
556
+
557
+ <!-- Footer -->
558
+ <footer>
559
+ <div class="footer-grid">
560
+ <div>
561
+ <a href="#" class="footer-link">FAQ</a>
562
+ <a href="#" class="footer-link">Relations Investisseurs</a>
563
+ <a href="#" class="footer-link">Modes de lecture</a>
564
+ </div>
565
+ <div>
566
+ <a href="#" class="footer-link">Centre d'aide</a>
567
+ <a href="#" class="footer-link">Emplois</a>
568
+ <a href="#" class="footer-link">Conditions d'utilisation</a>
569
+ </div>
570
+ <div>
571
+ <a href="#" class="footer-link">Compte</a>
572
+ <a href="#" class="footer-link">Se connecter</a>
573
+ <a href="#" class="footer-link">Confidentialité</a>
574
+ </div>
575
+ </div>
576
+ <div class="footer-bottom">
577
+ <span>StreamFlow France</span>
578
+ <span>© 2023-2024 StreamFlow Inc.</span>
579
+ </div>
580
+ </footer>
581
+
582
+ <!-- JavaScript Application Logic -->
583
+ <script>
584
+ // --- DATA MOCKUP ---
585
+ // Simulating a database of movies, series and animes
586
+ const categories = [
587
+ { id: 'trending', title: 'Tendances actuelles' },
588
+ { id: 'anime', title: 'Animés à ne pas manquer' },
589
+ { id: 'action', title: 'Films d\'Action & Aventure' },
590
+ { id: 'series', title: 'Séries TV Populaires' },
591
+ { id: 'scifi', title: 'Science-Fiction' }
592
+ ];
593
+
594
+ // Helper to generate random images
595
+ const getImg = (seed, w, h) => `https://picsum.photos/seed/${seed}/${w}/${h}`;
596
+
597
+ const database = {
598
+ 'trending': [
599
+ { title: "Stranger Things", seed: "st1", rating: "99%", year: "2022", duration: "50min", type: "Série" },
600
+ { title: "Wednesday", seed: "wed1", rating: "95%", year: "2022", duration: "45min", type: "Série" },
601
+ { title: "Glass Onion", seed: "glass", rating: "92%", year: "2022", duration: "2h 10", type: "Film" },
602
+ { title: "One Piece", seed: "op1", rating: "98%", year: "2023", duration: "24min", type: "Animé" },
603
+ { title: "The Witcher", seed: "wit1", rating: "91%", year: "2023", duration: "1h", type: "Série" },
604
+ { title: "Top Gun 2", seed: "topgun", rating: "97%", year: "2022", duration: "2h 30", type: "Film" },
605
+ { title: "Arcane", seed: "arcane", rating: "99%", year: "2021", duration: "40min", type: "Animé" },
606
+ ],
607
+ 'anime': [
608
+ { title: "Attack on Titan", seed: "aot", rating: "99%", year: "2023", duration: "25min", type: "Animé" },
609
+ { title: "Demon Slayer", seed: "dslayer", rating: "98%", year: "2023", duration: "24min", type: "Animé" },
610
+ { title: "Jujutsu Kaisen", seed: "jjk", rating: "97%", year: "2022", duration: "23min", type: "Animé" },
611
+ { title: "Spy x Family", seed: "spy", rating: "96%", year: "2022", duration: "25min", type: "Animé" },
612
+ { title: "Chainsaw Man", seed: "csm", rating: "95%", year: "2022", duration: "24min", type: "Animé" },
613
+ { title: "Bleach TYBW", seed: "bleach", rating: "98%", year: "2022", duration: "24min", type: "Animé" },
614
+ { title: "Blue Lock", seed: "blue", rating: "94%", year: "2023", duration: "24min", type: "Animé" },
615
+ ],
616
+ 'action': [
617
+ { title: "Fast X", seed: "fast", rating: "85%", year: "2023", duration: "2h 20", type: "Film" },
618
+ { title: "John Wick 4", seed: "wick", rating: "96%", year: "2023", duration: "2h 49", type: "Film" },
619
+ { title: "Extraction 2", seed: "extract", rating: "89%", year: "2023", duration: "2h", type: "Film" },
620
+ { title: "Mission Impossible", seed: "mi", rating: "94%", year: "2023", duration: "2h 30", type: "Film" },
621
+ { title: "The Equalizer 3", seed: "eq3", rating: "88%", year: "2023", duration: "2h", type: "Film" },
622
+ { title: "Gran Turismo", seed: "gt", rating: "90%", year: "2023", duration: "2h 15", type: "Film" },
623
+ ],
624
+ 'series': [
625
+ { title: "Breaking Bad", seed: "bb", rating: "99%", year: "2013", duration: "49min", type: "Série" },
626
+ { title: "The Last of Us", seed: "tlou", rating: "98%", year: "2023", duration: "55min", type: "Série" },
627
+ { title: "House of Dragon", seed: "hotd", rating: "94%", year: "2022", duration: "1h", type: "Série" },
628
+ { title: "Peaky Blinders", seed: "pb", rating: "97%", year: "2022", duration: "1h", type: "Série" },
629
+ { title: "The Mandalorian", seed: "mando", rating: "96%", year: "2023", duration: "40min", type: "Série" },
630
+ ],
631
+ 'scifi': [
632
+ { title: "Dune", seed: "dune", rating: "95%", year: "2021", duration: "2h 35", type: "Film" },
633
+ { title: "Interstellar", seed: "inter", rating: "98%", year: "2014", duration: "2h 49", type: "Film" },
634
+ { title: "Blade Runner 2049", seed: "br", rating: "96%", year: "2017", duration: "2h 44", type: "Film" },
635
+ { title: "Matrix Resurrections", seed: "matrix", rating: "85%", year: "2021", duration: "2h 28", type: "Film" },
636
+ { title: "Avatar 2", seed: "avatar", rating: "92%", year: "2022", duration: "3h 12", type: "Film" },
637
+ ]
638
+ };
639
+
640
+ // --- RENDER FUNCTIONS ---
641
+
642
+ function renderApp() {
643
+ const container = document.getElementById('content-feed');
644
+
645
+ categories.forEach(cat => {
646
+ const section = document.createElement('section');
647
+ section.innerHTML = `
648
+ <h2 class="section-title">${cat.title}</h2>
649
+ <div class="row-container">
650
+ <button class="scroll-btn left" onclick="scrollRow(this, -300)"><i class="fas fa-chevron-left"></i></button>
651
+ <div class="row-scroll" id="row-${cat.id}">
652
+ <!-- Cards injected here -->
653
+ </div>
654
+ <button class="scroll-btn right" onclick="scrollRow(this, 300)"><i class="fas fa-chevron-right"></i></button>
655
+ </div>
656
+ `;
657
+ container.appendChild(section);
658
+
659
+ const row = section.querySelector('.row-scroll');
660
+ const items = database[cat.id] || [];
661
+
662
+ items.forEach(item => {
663
+ const card = document.createElement('div');
664
+ card.className = 'movie-card';
665
+ card.onclick = () => playVideo(item.title, 'https://media.w3.org/2010/05/sintel/trailer.mp4', item);
666
+
667
+ card.innerHTML = `
668
+ <img src="${getImg(item.seed, 300, 450)}" alt="${item.title}" loading="lazy">
669
+ <div class="card-overlay">
670
+ <div class="card-title">${item.title}</div>
671
+ <div class="card-info">
672
+ <span>${item.rating} Match</span>
673
+ <span class="card-meta">${item.type}</span>
674
+ <span class="card-genre">${item.duration}</span>
675
+ </div>
676
+ <div style="margin-top: 10px; display: flex; gap: 10px;">
677
+ <i class="fas fa-play-circle" style="font-size: 1.5rem; color: white;"></i>
678
+ <i class="fas fa-plus-circle" style="font-size: 1.5rem; color: #777;"></i>
679
+ </div>
680
+ </div>
681
+ `;
682
+ row.appendChild(card);
683
+ });
684
+ });
685
+ }
686
+
687
+ // --- INTERACTION LOGIC ---
688
+
689
+ // Scroll Row
690
+ window.scrollRow = function(btn, amount) {
691
+ const container = btn.parentElement.querySelector('.row-scroll');
692
+ container.scrollBy({ left: amount, behavior: 'smooth' });
693
+ }
694
+
695
+ // Navbar Scroll Effect
696
+ window.addEventListener('scroll', () => {
697
+ const nav = document.getElementById('navbar');
698
+ if (window.scrollY > 50) {
699
+ nav.classList.add('scrolled');
700
+ } else {
701
+ nav.classList.remove('scrolled');
702
+ }
703
+ });
704
+
705
+ // Video Player Logic
706
+ const modal = document.getElementById('modal-overlay');
707
+ const player = document.getElementById('main-player');
708
+ const modalTitle = document.getElementById('modal-title');
709
+
710
+ window.playVideo = function(title, src, info = {}) {
711
+ modalTitle.innerText = title;
712
+ player.src = src;
713
+ modal.classList.add('active');
714
+ player.play().catch(e => console.log("Auto-play prevented by browser"));
715
+
716
+ // Adjust description based on clicked item if available
717
+ if(info.type) {
718
+ const desc = document.querySelector('.modal-desc');
719
+ desc.innerText = `Vous regardez ${title}, un ${info.type} sorti en ${info.year}. Noté ${info.rating} par les critiques. Profitez de ce contenu en haute définition gratuitement sur StreamFlow.`;
720
+ }
721
+ }
722
+
723
+ window.closeVideo = function() {
724
+ modal.classList.remove('active');
725
+ player.pause();
726
+ player.src = ""; // Reset source to stop buffering
727
+ }
728
+
729
+ // Close modal when clicking outside content
730
+ modal.addEventListener('click', (e) => {
731
+ if (e.target === modal) {
732
+ closeVideo();
733
+ }
734
+ });
735
+
736
+ // Initialize App
737
+ document.addEventListener('DOMContentLoaded', renderApp);
738
+
739
+ </script>
740
+ </body>
741
+ </html>