Hugging Face's logo

Spaces:
docto41
/
cin-futur
Running

App Files Community
docto41 commited on
Commit
81c4b1b
·
verified ·
1 Parent(s): 2c48bbd

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +529 -321
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>CinéFutur - Plateforme Cinématographique du Futur</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <script>
@@ -156,6 +156,76 @@
156
  @keyframes spin {
157
  to { transform: rotate(360deg); }
158
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
159
  </style>
160
  </head>
161
  <body class="scroll-smooth">
@@ -170,8 +240,8 @@
170
  <div class="hidden md:block">
171
  <div class="ml-10 flex items-baseline space-x-4">
172
  <a href="#accueil" class="text-white hover:text-neon-blue px-3 py-2 rounded-md text-sm font-medium transition-all duration-300">Accueil</a>
173
- <a href="#films" class="text-white hover:text-neon-pink px-3 py-2 rounded-md text-sm font-medium transition-all duration-300">Films</a>
174
- <a href="#nouveautes" class="text-white hover:text-neon-green px-3 py-2 rounded-md text-sm font-medium transition-all duration-300">Nouveautés</a>
175
  <a href="#abonnement" class="text-white hover:text-neon-purple px-3 py-2 rounded-md text-sm font-medium transition-all duration-300">Abonnement</a>
176
  </div>
177
  </div>
@@ -184,7 +254,7 @@
184
  <i class="fas fa-search"></i>
185
  </button>
186
  </div>
187
- <button class="ml-4 bg-gradient-to-r from-neon-blue to-neon-purple text-white px-4 py-1 rounded-full text-sm font-medium hover:opacity-90 transition-all duration-300">
188
  Connexion
189
  </button>
190
  </div>
@@ -202,8 +272,8 @@
202
  <div id="mobile-menu" class="hidden md:hidden bg-gray-900">
203
  <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
204
  <a href="#accueil" class="text-white block px-3 py-2 rounded-md text-base font-medium">Accueil</a>
205
- <a href="#films" class="text-white block px-3 py-2 rounded-md text-base font-medium">Films</a>
206
  <a href="#nouveautes" class="text-white block px-3 py-2 rounded-md text-base font-medium">Nouveautés</a>
 
207
  <a href="#abonnement" class="text-white block px-3 py-2 rounded-md text-base font-medium">Abonnement</a>
208
  </div>
209
  <div class="pt-4 pb-3 border-t border-gray-700 px-4">
@@ -213,7 +283,7 @@
213
  <i class="fas fa-search"></i>
214
  </button>
215
  </div>
216
- <button class="w-full bg-gradient-to-r from-neon-blue to-neon-purple text-white px-4 py-1 rounded-full text-sm font-medium hover:opacity-90 transition-all duration-300">
217
  Connexion
218
  </button>
219
  </div>
@@ -223,7 +293,7 @@
223
  <!-- Section Hero -->
224
  <section id="accueil" class="scroll-section relative h-screen flex items-center justify-center overflow-hidden bg-black">
225
  <div class="absolute inset-0 z-0">
226
- <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-black via-black/80 to-black/20 z-10"></div>
227
  <video autoplay muted loop class="w-full h-full object-cover opacity-40">
228
  <source src="https://assets.mixkit.co/videos/preview/mixkit-futuristic-interface-with-holographic-dashboard-46606-large.mp4" type="video/mp4">
229
  </video>
@@ -231,24 +301,24 @@
231
 
232
  <div class="relative z-10 text-center px-4 sm:px-6 lg:px-8 max-w-6xl mx-auto">
233
  <h1 class="text-5xl md:text-7xl font-bold mb-6 futuriste glow">
234
- <span class="gradient-text">L'AVENIR DU CINÉMA</span>
235
  </h1>
236
  <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto text-gray-300">
237
- Découvrez <span class="text-neon-blue">7,878,987 films</span> dans notre collection futuriste.
238
- Des dernières sorties aux classiques intemporels, tout en haute définition quantique.
239
  </p>
240
  <div class="flex flex-col sm:flex-row justify-center gap-4">
241
- <button class="bg-gradient-to-r from-neon-blue to-neon-purple text-white px-8 py-3 rounded-full text-lg font-bold hover:opacity-90 transition-all duration-300 transform hover:scale-105">
242
- Commencer l'essai gratuit
243
- </button>
244
  <button class="border-2 border-neon-pink text-white px-8 py-3 rounded-full text-lg font-bold hover:bg-neon-pink hover:bg-opacity-10 transition-all duration-300 transform hover:scale-105">
245
- Explorer les films
246
  </button>
247
  </div>
248
  </div>
249
 
250
  <div class="absolute bottom-10 left-0 right-0 flex justify-center z-10">
251
- <a href="#films" class="text-white animate-bounce">
252
  <i class="fas fa-chevron-down text-2xl"></i>
253
  </a>
254
  </div>
@@ -258,8 +328,8 @@
258
  <div class="absolute bottom-20 right-20 w-32 h-32 rounded-full bg-neon-pink opacity-20 filter blur-3xl animate-pulse-slow"></div>
259
  </section>
260
 
261
- <!-- Section Films -->
262
- <section id="films" class="scroll-section min-h-screen py-20 bg-gradient-to-b from-black to-gray-900 relative overflow-hidden">
263
  <div class="absolute top-0 left-0 w-full h-full opacity-5">
264
  <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-neon-blue filter blur-3xl"></div>
265
  <div class="absolute top-3/4 left-3/4 w-64 h-64 rounded-full bg-neon-purple filter blur-3xl"></div>
@@ -267,39 +337,52 @@
267
 
268
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
269
  <div class="text-center mb-16">
270
- <h2 class="text-4xl md:text-5xl font-bold mb-4 futuriste gradient-text">NOTRE COLLECTION</h2>
271
  <p class="text-xl text-gray-400 max-w-3xl mx-auto">
272
- Parcourez notre vaste bibliothèque de <span class="text-neon-green">7,878,987 films</span> en streaming quantique.
273
- Des blockbusters aux films d'art et essai, tout est disponible en un clic.
274
  </p>
275
  </div>
276
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
277
  <!-- Filtres -->
278
  <div class="flex flex-wrap justify-center gap-4 mb-12">
279
  <button class="px-4 py-2 rounded-full bg-neon-blue text-black font-medium">Tous</button>
280
- <button class="px-4 py-2 rounded-full bg-gray-800 text-white hover:bg-gray-700">Action</button>
281
- <button class="px-4 py-2 rounded-full bg-gray-800 text-white hover:bg-gray-700">Science-fiction</button>
282
- <button class="px-4 py-2 rounded-full bg-gray-800 text-white hover:bg-gray-700">Drame</button>
283
- <button class="px-4 py-2 rounded-full bg-gray-800 text-white hover:bg-gray-700">Comédie</button>
284
- <button class="px-4 py-2 rounded-full bg-gray-800 text-white hover:bg-gray-700">Horreur</button>
285
- <button class="px-4 py-2 rounded-full bg-gray-800 text-white hover:bg-gray-700">Animation</button>
286
  </div>
287
 
288
- <!-- Grille de films (générée automatiquement) -->
289
- <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="films-grid">
290
  <!-- Les films seront générés par JavaScript -->
291
  </div>
292
 
293
- <!-- Chargement automatique -->
294
- <div id="loading-container" class="text-center mt-12 hidden">
295
- <div class="loading-spinner mx-auto"></div>
296
- <p class="mt-4 text-neon-blue">Chargement des films...</p>
 
297
  </div>
298
  </div>
299
  </section>
300
 
301
- <!-- Section Nouveautés -->
302
- <section id="nouveautes" class="scroll-section min-h-screen py-20 bg-gray-900 relative overflow-hidden">
303
  <div class="absolute inset-0 z-0">
304
  <div class="absolute inset-0 bg-[url('https://image.tmdb.org/t/p/original/8YFL5QQVPy3AgrEQxNYVSgiPEbe.jpg')] opacity-10 bg-cover bg-center"></div>
305
  <div class="absolute inset-0 bg-gradient-to-t from-black via-black/70 to-black/30"></div>
@@ -307,25 +390,33 @@
307
 
308
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
309
  <div class="text-center mb-16">
310
- <h2 class="text-4xl md:text-5xl font-bold mb-4 futuriste gradient-text">NOUVELLES SORTIES</h2>
311
  <p class="text-xl text-gray-400 max-w-3xl mx-auto">
312
- Découvrez les dernières sorties cinéma disponibles en exclusivité sur notre plateforme.
313
- Des films qui repoussent les limites de la technologie et du storytelling.
314
  </p>
315
  </div>
316
 
317
- <!-- Carrousel de nouveautés -->
318
- <div class="relative">
319
- <div class="flex overflow-x-auto pb-10 scrollbar-hide space-x-6" id="nouveautes-carousel">
320
- <!-- Les nouveautés seront générées par JavaScript -->
321
- </div>
322
-
323
- <button class="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 bg-black bg-opacity-70 text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-neon-blue transition-all duration-300 z-20" id="prev-btn">
324
- <i class="fas fa-chevron-left"></i>
325
- </button>
326
- <button class="absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 bg-black bg-opacity-70 text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-neon-blue transition-all duration-300 z-20" id="next-btn">
327
- <i class="fas fa-chevron-right"></i>
328
- </button>
 
 
 
 
 
 
 
 
329
  </div>
330
  </div>
331
  </section>
@@ -339,10 +430,10 @@
339
 
340
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
341
  <div class="text-center mb-16">
342
- <h2 class="text-4xl md:text-5xl font-bold mb-4 futuriste gradient-text">ABONNEMENT FUTURISTE</h2>
343
  <p class="text-xl text-gray-400 max-w-3xl mx-auto">
344
- Choisissez l'abonnement qui correspond à votre expérience cinématographique.
345
- Accès illimité à notre collection de 7,878,987 films en qualité quantique.
346
  </p>
347
  </div>
348
 
@@ -360,7 +451,7 @@
360
  <ul class="space-y-3 mb-8">
361
  <li class="flex items-center">
362
  <i class="fas fa-check text-neon-green mr-2"></i>
363
- <span>Accès à 5,000,000 films</span>
364
  </li>
365
  <li class="flex items-center">
366
  <i class="fas fa-check text-neon-green mr-2"></i>
@@ -372,7 +463,7 @@
372
  </li>
373
  <li class="flex items-center text-gray-500">
374
  <i class="fas fa-times text-red-500 mr-2"></i>
375
- <span>Pas de réalité virtuelle</span>
376
  </li>
377
  </ul>
378
  <button class="w-full bg-gray-800 text-white py-3 rounded-full font-medium hover:bg-gray-700 transition-all duration-300">
@@ -383,7 +474,7 @@
383
  <!-- Forfait Premium -->
384
  <div class="holographic rounded-2xl p-6 border-2 border-neon-purple transform transition-all duration-500 hover:scale-105 relative">
385
  <div class="absolute top-0 right-0 bg-neon-purple text-black px-3 py-1 text-xs font-bold rounded-bl-lg rounded-tr-lg">
386
- POPULAIRE
387
  </div>
388
  <div class="text-center mb-6">
389
  <h3 class="text-2xl font-bold text-neon-purple mb-2">Premium</h3>
@@ -396,7 +487,7 @@
396
  <ul class="space-y-3 mb-8">
397
  <li class="flex items-center">
398
  <i class="fas fa-check text-neon-green mr-2"></i>
399
- <span>Accès à 7,878,987 films</span>
400
  </li>
401
  <li class="flex items-center">
402
  <i class="fas fa-check text-neon-green mr-2"></i>
@@ -408,7 +499,7 @@
408
  </li>
409
  <li class="flex items-center">
410
  <i class="fas fa-check text-neon-green mr-2"></i>
411
- <span>Expérience VR basique</span>
412
  </li>
413
  </ul>
414
  <button class="w-full bg-gradient-to-r from-neon-purple to-neon-blue text-black py-3 rounded-full font-bold hover:opacity-90 transition-all duration-300">
@@ -419,7 +510,7 @@
419
  <!-- Forfait Quantique -->
420
  <div class="holographic rounded-2xl p-6 transform transition-all duration-500 hover:scale-105">
421
  <div class="text-center mb-6">
422
- <h3 class="text-2xl font-bold text-neon-pink mb-2">Quantique</h3>
423
  <p class="text-gray-400">L'expérience ultime pour cinéphiles</p>
424
  </div>
425
  <div class="text-center mb-8">
@@ -429,11 +520,11 @@
429
  <ul class="space-y-3 mb-8">
430
  <li class="flex items-center">
431
  <i class="fas fa-check text-neon-green mr-2"></i>
432
- <span>Accès illimité à tous les films</span>
433
  </li>
434
  <li class="flex items-center">
435
  <i class="fas fa-check text-neon-green mr-2"></i>
436
- <span>Qualité 8K HDR+</span>
437
  </li>
438
  <li class="flex items-center">
439
  <i class="fas fa-check text-neon-green mr-2"></i>
@@ -441,7 +532,7 @@
441
  </li>
442
  <li class="flex items-center">
443
  <i class="fas fa-check text-neon-green mr-2"></i>
444
- <span>Expérience VR complète</span>
445
  </li>
446
  </ul>
447
  <button class="w-full bg-gray-800 text-white py-3 rounded-full font-medium hover:bg-gray-700 transition-all duration-300">
@@ -451,10 +542,10 @@
451
  </div>
452
 
453
  <div class="text-center mt-16 max-w-3xl mx-auto">
454
- <h3 class="text-2xl font-bold mb-4">Essai gratuit de 30 jours</h3>
455
  <p class="text-gray-400 mb-6">
456
- Profitez d'un essai gratuit de 30 jours sans engagement. Annulez à tout moment.
457
- Accès complet à toute notre bibliothèque pendant la période d'essai.
458
  </p>
459
  <button class="bg-gradient-to-r from-neon-blue to-neon-green text-black px-8 py-3 rounded-full text-lg font-bold hover:opacity-90 transition-all duration-300">
460
  Commencer l'essai gratuit
@@ -475,7 +566,7 @@
475
  <div>
476
  <h3 class="text-xl font-bold mb-4 gradient-text futuriste">CINÉFUTUR</h3>
477
  <p class="text-gray-400">
478
- La plateforme cinématographique du futur. Accès à 7,878,987 films en qualité quantique.
479
  </p>
480
  <div class="flex space-x-4 mt-4">
481
  <a href="#" class="text-gray-400 hover:text-neon-blue transition-all duration-300">
@@ -497,8 +588,8 @@
497
  <h4 class="text-lg font-bold mb-4 text-white">Navigation</h4>
498
  <ul class="space-y-2">
499
  <li><a href="#accueil" class="text-gray-400 hover:text-neon-blue transition-all duration-300">Accueil</a></li>
500
- <li><a href="#films" class="text-gray-400 hover:text-neon-pink transition-all duration-300">Films</a></li>
501
- <li><a href="#nouveautes" class="text-gray-400 hover:text-neon-purple transition-all duration-300">Nouveautés</a></li>
502
  <li><a href="#abonnement" class="text-gray-400 hover:text-neon-green transition-all duration-300">Abonnement</a></li>
503
  </ul>
504
  </div>
@@ -545,308 +636,339 @@
545
  mobileMenu.classList.toggle('hidden');
546
  });
547
 
548
- // Données des films réels avec images de TMDB
549
  const filmsReels = [
550
  {
551
- titre: "Dune",
552
- annee: 2021,
553
- duree: "2h35min",
554
  genre1: "Science-fiction",
555
  genre2: "Aventure",
556
- description: "Paul Atréides se rend sur la planète désertique Arrakis, la seule source de l'épice, la substance la plus précieuse de l'univers.",
557
- note: "8.0",
558
- image: "https://image.tmdb.org/t/p/w500/8L7LQv5R0qd8WxQz4O2xGH5T2kQ.jpg"
559
- },
560
- {
561
- titre: "Spider-Man: No Way Home",
562
- annee: 2021,
563
- duree: "2h28min",
564
- genre1: "Action",
565
- genre2: "Aventure",
566
- description: "Peter Parker demande de l'aide au docteur Strange pour que le monde oublie qu'il est Spider-Man.",
567
- note: "8.3",
568
- image: "https://image.tmdb.org/t/p/w500/1g0dhYtq4irTY1GPXvft6k4YLjm.jpg"
569
  },
570
  {
571
- titre: "The Batman",
572
- annee: 2022,
573
- duree: "2h56min",
574
- genre1: "Action",
575
- genre2: "Crime",
576
- description: "Batman enquête sur la corruption à Gotham City et affronte le Riddler, un tueur en série ciblant l'élite de Gotham.",
577
- note: "7.9",
578
- image: "https://image.tmdb.org/t/p/w500/seyWFgGInaLqW7nOZvu0CPU95Rx.jpg"
579
- },
580
- {
581
- titre: "Top Gun: Maverick",
582
- annee: 2022,
583
- duree: "2h11min",
584
- genre1: "Action",
585
- genre2: "Drame",
586
- description: "Trente ans après son service en tant que l'un des meilleurs pilotes de la Navy, Maverick est de retour pour former une nouvelle génération.",
587
- note: "8.3",
588
- image: "https://image.tmdb.org/t/p/w500/62HCnUTziyWcpDaBO2i1DX17ljH.jpg"
589
  },
590
  {
591
- titre: "Avatar: The Way of Water",
592
- annee: 2022,
593
- duree: "3h12min",
594
  genre1: "Science-fiction",
595
- genre2: "Aventure",
596
- description: "Jake Sully et Ney'tiri forment une famille sur Pandora mais doivent quitter leur maison et explorer les régions de Pandora.",
597
- note: "7.7",
598
- image: "https://image.tmdb.org/t/p/w500/t6HIqrRAclMCA60NsSmeqe9RmNV.jpg"
599
- },
600
- {
601
- titre: "Black Panther: Wakanda Forever",
602
- annee: 2022,
603
- duree: "2h41min",
604
- genre1: "Action",
605
- genre2: "Aventure",
606
- description: "Le peuple de Wakanda se bat pour protéger leur nation après la mort du roi T'Challa.",
607
  note: "7.3",
608
- image: "https://image.tmdb.org/t/p/w500/sv1xJUazXeYqALzczSZ3O6nkH75.jpg"
 
 
 
 
 
 
 
609
  },
610
  {
611
- titre: "Everything Everywhere All at Once",
612
- annee: 2022,
613
- duree: "2h19min",
614
- genre1: "Science-fiction",
615
- genre2: "Comédie",
616
- description: "Une femme âgée est emportée dans une aventure folle où seule elle peut sauver le monde en explorant d'autres univers.",
617
- note: "8.0",
618
- image: "https://image.tmdb.org/t/p/w500/w3LxiVYdWWRvEVdn5RYq6jIqkb1.jpg"
619
- },
620
- {
621
- titre: "Jurassic World: Dominion",
622
- annee: 2022,
623
- duree: "2h27min",
624
  genre1: "Action",
625
- genre2: "Aventure",
626
- description: "Quatre ans après la destruction d'Isla Nublar, les dinosaures vivent maintenant parmi les humains partout dans le monde.",
627
- note: "6.5",
628
- image: "https://image.tmdb.org/t/p/w500/kAVRgw7GgK1CdYENEqXrwy2qbqs.jpg"
 
 
 
 
 
 
629
  },
630
  {
631
- titre: "Doctor Strange in the Multiverse of Madness",
632
- annee: 2022,
633
  duree: "2h06min",
634
  genre1: "Action",
635
- genre2: "Fantastique",
636
- description: "Le Docteur Strange voyage dans le multivers avec l'aide d'América Chávez pour affronter une nouvelle menace mystique.",
637
- note: "7.0",
638
- image: "https://image.tmdb.org/t/p/w500/9Gtg2DzBhmYamXBS1hKAhiwbBKS.jpg"
 
 
 
 
 
 
 
639
  },
640
  {
641
- titre: "The Northman",
642
- annee: 2022,
643
- duree: "2h17min",
644
  genre1: "Action",
645
- genre2: "Drame",
646
- description: "Un prince viking part en quête de vengeance pour le meurtre de son père.",
647
- note: "7.4",
648
- image: "https://image.tmdb.org/t/p/w500/zhLKlUaF1SEpO58ppHIAyENkwgw.jpg"
649
- },
650
- {
651
- titre: "Nope",
652
- annee: 2022,
653
- duree: "2h10min",
654
- genre1: "Horreur",
655
  genre2: "Science-fiction",
656
- description: "Les habitants d'une vallée isolée en Californie assistent à une découverte étrange et terrifiante.",
657
- note: "7.0",
658
- image: "https://image.tmdb.org/t/p/w500/AcKVlWiNdgHUQoB8JTV3P3NTwva.jpg"
 
 
 
 
 
 
659
  },
660
  {
661
- titre: "Elvis",
662
- annee: 2022,
663
- duree: "2h39min",
664
- genre1: "Drame",
665
- genre2: "Musique",
666
- description: "La vie du roi du rock 'n' roll Elvis Presley, des débuts à sa montée en tant que star mondiale.",
667
- note: "7.5",
668
- image: "https://image.tmdb.org/t/p/w500/qBOKWqAFbxtoECVb0g7j6EkXQpO.jpg"
 
 
 
 
 
 
 
669
  },
670
  {
671
- titre: "The Menu",
672
- annee: 2022,
673
- duree: "1h47min",
674
- genre1: "Comédie",
675
- genre2: "Horreur",
676
- description: "Un couple se rend dans un restaurant exclusif sur une île isolée où le chef a préparé un menu luxueux avec des surprises choquantes.",
677
- note: "7.3",
678
- image: "https://image.tmdb.org/t/p/w500/3A7JqF2xIsQAdVQfkwOxe3dQxvw.jpg"
 
 
 
 
 
 
679
  },
680
  {
681
- titre: "Bullet Train",
682
- annee: 2022,
683
- duree: "2h07min",
684
- genre1: "Action",
685
  genre2: "Comédie",
686
- description: "Cinq assassins se retrouvent à bord d'un train à grande vitesse allant de Tokyo à Morioka avec des destinations finales communes.",
687
- note: "7.4",
688
- image: "https://image.tmdb.org/t/p/w500/tVxDe01Zy3kZqaZRNiXFGDICdZk.jpg"
 
 
 
 
 
 
689
  },
690
  {
691
- titre: "Black Adam",
692
- annee: 2022,
693
- duree: "2h05min",
694
- genre1: "Action",
695
- genre2: "Fantastique",
696
- description: "Près de 5000 ans après avoir été doté des pouvoirs des dieux égyptiens, Black Adam est libéré de sa tombe terrestre.",
697
- note: "7.1",
698
- image: "https://image.tmdb.org/t/p/w500/pFlaoHTZeyNkG83vxsAJiGzfSsa.jpg"
 
 
 
 
 
 
 
699
  },
 
700
  {
701
- titre: "Thor: Love and Thunder",
702
- annee: 2022,
703
- duree: "1h59min",
704
  genre1: "Action",
705
- genre2: "Aventure",
706
- description: "Thor tente de retrouver la paix intérieure, mais doit revenir au combat pour affronter Gorr le Dieu Boucher.",
707
- note: "6.6",
708
- image: "https://image.tmdb.org/t/p/w500/pIkRyD18kl4FhoCNQuWxWu5cBLM.jpg"
 
 
 
 
 
 
709
  },
710
  {
711
- titre: "Smile",
712
- annee: 2022,
713
- duree: "1h55min",
714
- genre1: "Horreur",
715
  genre2: "Thriller",
716
- description: "Après avoir été témoin d'un incident traumatisant, une médecin commence à faire l'expérience d'événements effrayants.",
717
- note: "6.8",
718
- image: "https://image.tmdb.org/t/p/w500/aPqcQwu4VGEewLiagUq1HIR9K3d.jpg"
 
 
 
 
 
 
 
719
  },
720
  {
721
- titre: "Tár",
722
- annee: 2022,
723
- duree: "2h38min",
724
- genre1: "Drame",
725
- genre2: "Musique",
726
- description: "L'histoire de la légendaire chef d'orchestre Lydia Tár.",
727
- note: "7.5",
728
- image: "https://image.tmdb.org/t/p/w500/ms5J3BQdfiqLHdQwjQYxGLqxR6o.jpg"
 
 
 
 
 
 
729
  },
730
  {
731
- titre: "The Whale",
732
- annee: 2022,
733
- duree: "1h57min",
734
- genre1: "Drame",
735
- genre2: "Thriller",
736
- description: "Un professeur d'anglais solitaire et obèse tente de renouer avec sa fille adolescente.",
737
- note: "8.0",
738
- image: "https://image.tmdb.org/t/p/w500/jQ0gylJMxWSL490sy0RrPj1Lj7e.jpg"
 
 
 
 
 
 
 
739
  },
740
  {
741
- titre: "Babylon",
742
- annee: 2022,
743
- duree: "3h09min",
744
  genre1: "Drame",
745
- genre2: "Comédie",
746
- description: "Une histoire d'ambition et d'excès retraçant la montée et la chute de multiples personnages à Hollywood dans les années 1920.",
747
- note: "7.4",
748
- image: "https://image.tmdb.org/t/p/w500/wjOHjWCUE0YPPDiA9QHv4kXmq1Q.jpg"
 
 
 
 
 
 
749
  },
750
- // Ajout de plus de films pour le chargement automatique
751
  {
752
- titre: "Avengers: Endgame",
753
- annee: 2019,
754
- duree: "3h01min",
755
  genre1: "Action",
756
  genre2: "Science-fiction",
757
- description: "Les Avengers tentent de restaurer l'ordre dans l'univers après les événements dévastateurs d'Infinity War.",
758
- note: "8.4",
759
- image: "https://image.tmdb.org/t/p/w500/or06FN3Dka5tukK1e9sl16pB3iy.jpg"
760
- },
761
- {
762
- titre: "Joker",
763
- annee: 2019,
764
- duree: "2h02min",
765
- genre1: "Drame",
766
- genre2: "Thriller",
767
- description: "L'histoire de la transformation d'Arthur Fleck, un comédien raté, en le criminel emblématique Joker.",
768
- note: "8.4",
769
- image: "https://image.tmdb.org/t/p/w500/udDclJoHjfjb8Ekgsd4FDteOkCU.jpg"
770
  },
771
  {
772
- titre: "Parasite",
773
- annee: 2019,
774
- duree: "2h12min",
775
  genre1: "Drame",
776
- genre2: "Thriller",
777
- description: "Une famille pauvre s'infiltre dans le ménage d'une famille riche en se faisant passer pour des professionnels hautement qualifiés.",
778
- note: "8.5",
779
- image: "https://image.tmdb.org/t/p/w500/7IiTTgloJzvGI1TAYymCfbfl3vT.jpg"
780
- },
781
- {
782
- titre: "Inception",
783
- annee: 2010,
784
- duree: "2h28min",
785
- genre1: "Science-fiction",
786
- genre2: "Action",
787
- description: "Un voleur qui vole des secrets corporatifs grâce à l'utilisation de la technologie de partage de rêves reçoit la tâche inverse.",
788
- note: "8.8",
789
- image: "https://image.tmdb.org/t/p/w500/9gk7adHYeDvHkCSEqAvQNLV5Uge.jpg"
790
  },
791
  {
792
- titre: "Interstellar",
793
- annee: 2014,
794
- duree: "2h49min",
795
- genre1: "Science-fiction",
796
- genre2: "Drame",
797
- description: "Une équipe d'explorateurs voyage à travers un trou de ver dans l'espace pour assurer la survie de l'humanité.",
798
- note: "8.6",
799
- image: "https://image.tmdb.org/t/p/w500/gEU2QniE6E77NI6lCU6MxlNBvIx.jpg"
 
 
 
 
 
 
 
800
  },
801
  {
802
- titre: "The Dark Knight",
803
- annee: 2008,
804
- duree: "2h32min",
805
  genre1: "Action",
806
- genre2: "Crime",
807
- description: "Batman a relevé le défi du Joker, un criminel qui plonge Gotham City dans l'anarchie.",
808
- note: "9.0",
809
- image: "https://image.tmdb.org/t/p/w500/qJ2tW6WMUDux911r6m7haRef0WH.jpg"
810
- },
811
- {
812
- titre: "Pulp Fiction",
813
- annee: 1994,
814
- duree: "2h34min",
815
- genre1: "Crime",
816
- genre2: "Drame",
817
- description: "Les vies de deux hommes de main, d'un boxeur, d'un gangster et de sa femme s'entrelacent dans quatre histoires de violence et de rachat.",
818
- note: "8.9",
819
- image: "https://image.tmdb.org/t/p/w500/d5iIlFn5s0ImszYzBPb8JPIfbXD.jpg"
820
  },
821
  {
822
- titre: "The Shawshank Redemption",
823
- annee: 1994,
824
- duree: "2h22min",
825
- genre1: "Drame",
826
  genre2: "Crime",
827
- description: "Deux prisonniers se lient d'amitié au fil des ans, trouvant réconfort et rédemption finale grâce à des actes de décence commune.",
828
- note: "9.3",
829
- image: "https://image.tmdb.org/t/p/w500/q6y0Go1tsGEsmtFryDOJo3dEmqu.jpg"
830
- },
831
- {
832
- titre: "The Godfather",
833
- annee: 1972,
834
- duree: "2h55min",
835
- genre1: "Crime",
836
- genre2: "Drame",
837
- description: "Le patriarche vieillissant d'une dynastie criminelle new-yorkaise transfère le contrôle de son empire clandestin à son fils réticent.",
838
- note: "9.2",
839
- image: "https://image.tmdb.org/t/p/w500/3bhkrj58Vtu7enYsRolD1fZdja1.jpg"
840
- },
841
- {
842
- titre: "Fight Club",
843
- annee: 1999,
844
- duree: "2h19min",
845
- genre1: "Drame",
846
- genre2: "Thriller",
847
- description: "Un employé de bureau insomniaque et un fabricant de savon diabolique forment un club de combat souterrain qui évolue en quelque chose de bien plus grand.",
848
- note: "8.8",
849
- image: "https://image.tmdb.org/t/p/w500/pB8BM7pdSp6B6Ih7QZ4DrQ3PmJK.jpg"
850
  }
851
  ];
852
 
@@ -855,14 +977,39 @@
855
  const batchSize = 12; // Nombre de films à charger à chaque fois
856
  const loadingContainer = document.getElementById('loading-container');
857
  const filmsGrid = document.getElementById('films-grid');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
858
 
859
  // Générer les films dans la grille
860
- function genererFilmsGrid(films) {
861
  films.forEach(film => {
862
  const filmElement = document.createElement('div');
863
  filmElement.className = 'film-card group relative rounded-xl overflow-hidden transition-all duration-500 hover:z-10';
864
  filmElement.innerHTML = `
865
  <div class="relative aspect-[2/3] rounded-xl overflow-hidden">
 
 
866
  <img src="${film.image}" alt="${film.titre}" class="w-full h-full object-cover group-hover:opacity-70 transition-all duration-500">
867
  <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
868
  <div class="absolute bottom-0 left-0 right-0 p-4 translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500">
@@ -889,30 +1036,74 @@
889
  <span>${film.annee}</span>
890
  </div>
891
  </div>
 
 
 
 
 
 
892
  `;
893
- filmsGrid.appendChild(filmElement);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
894
  });
895
  }
896
 
897
  // Charger plus de films
898
  function chargerPlusDeFilms() {
899
- if (filmsCharges >= filmsReels.length) return;
 
 
 
 
900
 
901
- loadingContainer.classList.remove('hidden');
902
 
903
  // Simulation de chargement asynchrone
904
  setTimeout(() => {
905
  const nouveauxFilms = filmsReels.slice(filmsCharges, filmsCharges + batchSize);
906
- genererFilmsGrid(nouveauxFilms);
907
  filmsCharges += batchSize;
908
 
909
- loadingContainer.classList.add('hidden');
910
 
911
- // Si on a chargé tous les films, supprimer l'observateur
912
  if (filmsCharges >= filmsReels.length) {
913
- observer.unobserve(loadingContainer);
 
914
  }
915
- }, 1000);
916
  }
917
 
918
  // Générer les films dans le carrousel de nouveautés
@@ -924,6 +1115,8 @@
924
  filmElement.innerHTML = `
925
  <div class="relative group rounded-xl overflow-hidden">
926
  <div class="relative aspect-[3/4] rounded-xl overflow-hidden">
 
 
927
  <img src="${film.image}" alt="${film.titre}" class="w-full h-full object-cover group-hover:opacity-70 transition-all duration-500">
928
  <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
929
  <div class="absolute bottom-0 left-0 right-0 p-4 translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500">
@@ -947,6 +1140,12 @@
947
  NOUVEAU
948
  </div>
949
  </div>
 
 
 
 
 
 
950
  </div>
951
  `;
952
  nouveautesCarousel.appendChild(filmElement);
@@ -968,7 +1167,13 @@
968
  // Initialisation
969
  document.addEventListener('DOMContentLoaded', () => {
970
  // Charger le premier lot de films
971
- chargerPlusDeFilms();
 
 
 
 
 
 
972
 
973
  // Générer le carrousel de nouveautés
974
  genererNouveautesCarousel(filmsReels);
@@ -989,6 +1194,9 @@
989
  document.querySelectorAll('.scroll-section').forEach(section => {
990
  observer.observe(section);
991
  });
 
 
 
992
  });
993
 
994
  // Observer pour le chargement automatique
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CinéFutur - Dernières Sorties en Français HD</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <script>
 
156
  @keyframes spin {
157
  to { transform: rotate(360deg); }
158
  }
159
+
160
+ /* Style pour les serveurs de streaming */
161
+ .server-btn {
162
+ transition: all 0.3s ease;
163
+ }
164
+
165
+ .server-btn:hover {
166
+ transform: translateY(-3px);
167
+ box-shadow: 0 4px 15px rgba(0, 240, 255, 0.3);
168
+ }
169
+
170
+ /* Style pour le menu déroulant des serveurs */
171
+ .server-dropdown {
172
+ display: none;
173
+ position: absolute;
174
+ bottom: 100%;
175
+ left: 0;
176
+ background: rgba(26, 26, 26, 0.95);
177
+ border: 1px solid rgba(255, 255, 255, 0.1);
178
+ border-radius: 8px;
179
+ padding: 10px;
180
+ min-width: 200px;
181
+ z-index: 100;
182
+ backdrop-filter: blur(10px);
183
+ }
184
+
185
+ .server-dropdown.show {
186
+ display: block;
187
+ animation: fadeIn 0.3s ease-out forwards;
188
+ }
189
+
190
+ .server-option {
191
+ padding: 8px 12px;
192
+ border-radius: 4px;
193
+ cursor: pointer;
194
+ margin-bottom: 5px;
195
+ }
196
+
197
+ .server-option:hover {
198
+ background: rgba(0, 240, 255, 0.1);
199
+ }
200
+
201
+ /* Badge VF */
202
+ .vf-badge {
203
+ position: absolute;
204
+ top: 10px;
205
+ right: 10px;
206
+ background: linear-gradient(45deg, #00f0ff, #00ff7b);
207
+ color: black;
208
+ font-weight: bold;
209
+ padding: 3px 8px;
210
+ border-radius: 4px;
211
+ font-size: 12px;
212
+ z-index: 2;
213
+ }
214
+
215
+ /* Badge HD */
216
+ .hd-badge {
217
+ position: absolute;
218
+ top: 10px;
219
+ left: 10px;
220
+ background: rgba(0, 0, 0, 0.7);
221
+ color: white;
222
+ font-weight: bold;
223
+ padding: 3px 8px;
224
+ border-radius: 4px;
225
+ font-size: 12px;
226
+ border: 1px solid #00f0ff;
227
+ z-index: 2;
228
+ }
229
  </style>
230
  </head>
231
  <body class="scroll-smooth">
 
240
  <div class="hidden md:block">
241
  <div class="ml-10 flex items-baseline space-x-4">
242
  <a href="#accueil" class="text-white hover:text-neon-blue px-3 py-2 rounded-md text-sm font-medium transition-all duration-300">Accueil</a>
243
+ <a href="#nouveautes" class="text-white hover:text-neon-pink px-3 py-2 rounded-md text-sm font-medium transition-all duration-300">Nouveautés</a>
244
+ <a href="#films" class="text-white hover:text-neon-green px-3 py-2 rounded-md text-sm font-medium transition-all duration-300">Films</a>
245
  <a href="#abonnement" class="text-white hover:text-neon-purple px-3 py-2 rounded-md text-sm font-medium transition-all duration-300">Abonnement</a>
246
  </div>
247
  </div>
 
254
  <i class="fas fa-search"></i>
255
  </button>
256
  </div>
257
+ <button class="ml-4 bg-gradient-to-r from-neon-blue to-neon-purple text-black px-4 py-1 rounded-full text-sm font-medium hover:opacity-90 transition-all duration-300">
258
  Connexion
259
  </button>
260
  </div>
 
272
  <div id="mobile-menu" class="hidden md:hidden bg-gray-900">
273
  <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
274
  <a href="#accueil" class="text-white block px-3 py-2 rounded-md text-base font-medium">Accueil</a>
 
275
  <a href="#nouveautes" class="text-white block px-3 py-2 rounded-md text-base font-medium">Nouveautés</a>
276
+ <a href="#films" class="text-white block px-3 py-2 rounded-md text-base font-medium">Films</a>
277
  <a href="#abonnement" class="text-white block px-3 py-2 rounded-md text-base font-medium">Abonnement</a>
278
  </div>
279
  <div class="pt-4 pb-3 border-t border-gray-700 px-4">
 
283
  <i class="fas fa-search"></i>
284
  </button>
285
  </div>
286
+ <button class="w-full bg-gradient-to-r from-neon-blue to-neon-purple text-black px-4 py-1 rounded-full text-sm font-medium hover:opacity-90 transition-all duration-300">
287
  Connexion
288
  </button>
289
  </div>
 
293
  <!-- Section Hero -->
294
  <section id="accueil" class="scroll-section relative h-screen flex items-center justify-center overflow-hidden bg-black">
295
  <div class="absolute inset-0 z-0">
296
+ <div class="absolute inset-0 bg-gradient-to-b from-black via-black/80 to-black/20 z-10"></div>
297
  <video autoplay muted loop class="w-full h-full object-cover opacity-40">
298
  <source src="https://assets.mixkit.co/videos/preview/mixkit-futuristic-interface-with-holographic-dashboard-46606-large.mp4" type="video/mp4">
299
  </video>
 
301
 
302
  <div class="relative z-10 text-center px-4 sm:px-6 lg:px-8 max-w-6xl mx-auto">
303
  <h1 class="text-5xl md:text-7xl font-bold mb-6 futuriste glow">
304
+ <span class="gradient-text">FILMS EN FRANÇAIS HD</span>
305
  </h1>
306
  <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto text-gray-300">
307
+ Regardez les <span class="text-neon-pink">dernières sorties</span> en version française et haute qualité.
308
+ Streaming fluide sur tous vos appareils avec <span class="text-neon-blue">multiples serveurs</span> disponibles.
309
  </p>
310
  <div class="flex flex-col sm:flex-row justify-center gap-4">
311
+ <a href="#nouveautes" class="bg-gradient-to-r from-neon-blue to-neon-purple text-black px-8 py-3 rounded-full text-lg font-bold hover:opacity-90 transition-all duration-300 transform hover:scale-105">
312
+ Voir les nouveautés
313
+ </a>
314
  <button class="border-2 border-neon-pink text-white px-8 py-3 rounded-full text-lg font-bold hover:bg-neon-pink hover:bg-opacity-10 transition-all duration-300 transform hover:scale-105">
315
+ <i class="fas fa-crown mr-2"></i> Premium
316
  </button>
317
  </div>
318
  </div>
319
 
320
  <div class="absolute bottom-10 left-0 right-0 flex justify-center z-10">
321
+ <a href="#nouveautes" class="text-white animate-bounce">
322
  <i class="fas fa-chevron-down text-2xl"></i>
323
  </a>
324
  </div>
 
328
  <div class="absolute bottom-20 right-20 w-32 h-32 rounded-full bg-neon-pink opacity-20 filter blur-3xl animate-pulse-slow"></div>
329
  </section>
330
 
331
+ <!-- Section Nouveautés -->
332
+ <section id="nouveautes" class="scroll-section min-h-screen py-20 bg-gradient-to-b from-black to-gray-900 relative overflow-hidden">
333
  <div class="absolute top-0 left-0 w-full h-full opacity-5">
334
  <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-neon-blue filter blur-3xl"></div>
335
  <div class="absolute top-3/4 left-3/4 w-64 h-64 rounded-full bg-neon-purple filter blur-3xl"></div>
 
337
 
338
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
339
  <div class="text-center mb-16">
340
+ <h2 class="text-4xl md:text-5xl font-bold mb-4 futuriste gradient-text">DERNIÈRES SORTIES VF</h2>
341
  <p class="text-xl text-gray-400 max-w-3xl mx-auto">
342
+ Tous les films récemment ajoutés en <span class="text-neon-green">version française</span> et <span class="text-neon-blue">haute qualité</span>.
343
+ Disponibles immédiatement sur nos serveurs optimisés.
344
  </p>
345
  </div>
346
 
347
+ <!-- Carrousel de nouveautés -->
348
+ <div class="relative mb-16">
349
+ <div class="flex overflow-x-auto pb-10 scrollbar-hide space-x-6" id="nouveautes-carousel">
350
+ <!-- Les nouveautés seront générées par JavaScript -->
351
+ </div>
352
+
353
+ <button class="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 bg-black bg-opacity-70 text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-neon-blue transition-all duration-300 z-20" id="prev-btn">
354
+ <i class="fas fa-chevron-left"></i>
355
+ </button>
356
+ <button class="absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 bg-black bg-opacity-70 text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-neon-blue transition-all duration-300 z-20" id="next-btn">
357
+ <i class="fas fa-chevron-right"></i>
358
+ </button>
359
+ </div>
360
+
361
  <!-- Filtres -->
362
  <div class="flex flex-wrap justify-center gap-4 mb-12">
363
  <button class="px-4 py-2 rounded-full bg-neon-blue text-black font-medium">Tous</button>
364
+ <button class="px-4 py-2 rounded-full bg-gray-800 text-white hover:bg-gray-700">Cinéma</button>
365
+ <button class="px-4 py-2 rounded-full bg-gray-800 text-white hover:bg-gray-700">VF</button>
366
+ <button class="px-4 py-2 rounded-full bg-gray-800 text-white hover:bg-gray-700">4K</button>
367
+ <button class="px-4 py-2 rounded-full bg-gray-800 text-white hover:bg-gray-700">Populaire</button>
 
 
368
  </div>
369
 
370
+ <!-- Grille de films récents -->
371
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="nouveautes-grid">
372
  <!-- Les films seront générés par JavaScript -->
373
  </div>
374
 
375
+ <!-- Bouton pour charger plus de films -->
376
+ <div class="text-center mt-12">
377
+ <button id="load-more-btn" class="bg-gradient-to-r from-neon-purple to-neon-pink text-black px-8 py-3 rounded-full text-lg font-bold hover:opacity-90 transition-all duration-300 inline-flex items-center">
378
+ <i class="fas fa-sync-alt mr-2"></i> Charger plus de films
379
+ </button>
380
  </div>
381
  </div>
382
  </section>
383
 
384
+ <!-- Section Films -->
385
+ <section id="films" class="scroll-section min-h-screen py-20 bg-gray-900 relative overflow-hidden">
386
  <div class="absolute inset-0 z-0">
387
  <div class="absolute inset-0 bg-[url('https://image.tmdb.org/t/p/original/8YFL5QQVPy3AgrEQxNYVSgiPEbe.jpg')] opacity-10 bg-cover bg-center"></div>
388
  <div class="absolute inset-0 bg-gradient-to-t from-black via-black/70 to-black/30"></div>
 
390
 
391
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
392
  <div class="text-center mb-16">
393
+ <h2 class="text-4xl md:text-5xl font-bold mb-4 futuriste gradient-text">TOUS LES FILMS VF</h2>
394
  <p class="text-xl text-gray-400 max-w-3xl mx-auto">
395
+ Parcourez notre vaste bibliothèque de <span class="text-neon-green">films en version française</span>.
396
+ Tous disponibles en <span class="text-neon-blue">haute qualité</span> avec plusieurs serveurs de streaming.
397
  </p>
398
  </div>
399
 
400
+ <!-- Filtres -->
401
+ <div class="flex flex-wrap justify-center gap-4 mb-12">
402
+ <button class="px-4 py-2 rounded-full bg-neon-blue text-black font-medium">Tous</button>
403
+ <button class="px-4 py-2 rounded-full bg-gray-800 text-white hover:bg-gray-700">Action</button>
404
+ <button class="px-4 py-2 rounded-full bg-gray-800 text-white hover:bg-gray-700">Science-fiction</button>
405
+ <button class="px-4 py-2 rounded-full bg-gray-800 text-white hover:bg-gray-700">Drame</button>
406
+ <button class="px-4 py-2 rounded-full bg-gray-800 text-white hover:bg-gray-700">Comédie</button>
407
+ <button class="px-4 py-2 rounded-full bg-gray-800 text-white hover:bg-gray-700">Horreur</button>
408
+ <button class="px-4 py-2 rounded-full bg-gray-800 text-white hover:bg-gray-700">Animation</button>
409
+ </div>
410
+
411
+ <!-- Grille de films (générée automatiquement) -->
412
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="films-grid">
413
+ <!-- Les films seront générés par JavaScript -->
414
+ </div>
415
+
416
+ <!-- Chargement automatique -->
417
+ <div id="loading-container" class="text-center mt-12 hidden">
418
+ <div class="loading-spinner mx-auto"></div>
419
+ <p class="mt-4 text-neon-blue">Chargement des films...</p>
420
  </div>
421
  </div>
422
  </section>
 
430
 
431
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
432
  <div class="text-center mb-16">
433
+ <h2 class="text-4xl md:text-5xl font-bold mb-4 futuriste gradient-text">ABONNEMENT PREMIUM</h2>
434
  <p class="text-xl text-gray-400 max-w-3xl mx-auto">
435
+ Accédez à tous les films en <span class="text-neon-green">qualité 4K</span> sans publicité et avec
436
+ <span class="text-neon-blue">serveurs prioritaires</span> pour un streaming ultra-fluide.
437
  </p>
438
  </div>
439
 
 
451
  <ul class="space-y-3 mb-8">
452
  <li class="flex items-center">
453
  <i class="fas fa-check text-neon-green mr-2"></i>
454
+ <span>Accès à tous les films VF</span>
455
  </li>
456
  <li class="flex items-center">
457
  <i class="fas fa-check text-neon-green mr-2"></i>
 
463
  </li>
464
  <li class="flex items-center text-gray-500">
465
  <i class="fas fa-times text-red-500 mr-2"></i>
466
+ <span>Publicités occasionnelles</span>
467
  </li>
468
  </ul>
469
  <button class="w-full bg-gray-800 text-white py-3 rounded-full font-medium hover:bg-gray-700 transition-all duration-300">
 
474
  <!-- Forfait Premium -->
475
  <div class="holographic rounded-2xl p-6 border-2 border-neon-purple transform transition-all duration-500 hover:scale-105 relative">
476
  <div class="absolute top-0 right-0 bg-neon-purple text-black px-3 py-1 text-xs font-bold rounded-bl-lg rounded-tr-lg">
477
+ RECOMMANDÉ
478
  </div>
479
  <div class="text-center mb-6">
480
  <h3 class="text-2xl font-bold text-neon-purple mb-2">Premium</h3>
 
487
  <ul class="space-y-3 mb-8">
488
  <li class="flex items-center">
489
  <i class="fas fa-check text-neon-green mr-2"></i>
490
+ <span>Tous les films en VF HD</span>
491
  </li>
492
  <li class="flex items-center">
493
  <i class="fas fa-check text-neon-green mr-2"></i>
 
499
  </li>
500
  <li class="flex items-center">
501
  <i class="fas fa-check text-neon-green mr-2"></i>
502
+ <span>Serveurs prioritaires</span>
503
  </li>
504
  </ul>
505
  <button class="w-full bg-gradient-to-r from-neon-purple to-neon-blue text-black py-3 rounded-full font-bold hover:opacity-90 transition-all duration-300">
 
510
  <!-- Forfait Quantique -->
511
  <div class="holographic rounded-2xl p-6 transform transition-all duration-500 hover:scale-105">
512
  <div class="text-center mb-6">
513
+ <h3 class="text-2xl font-bold text-neon-pink mb-2">Ultimate</h3>
514
  <p class="text-gray-400">L'expérience ultime pour cinéphiles</p>
515
  </div>
516
  <div class="text-center mb-8">
 
520
  <ul class="space-y-3 mb-8">
521
  <li class="flex items-center">
522
  <i class="fas fa-check text-neon-green mr-2"></i>
523
+ <span>Tous les films en 4K HDR+</span>
524
  </li>
525
  <li class="flex items-center">
526
  <i class="fas fa-check text-neon-green mr-2"></i>
527
+ <span>Accès aux avant-premières</span>
528
  </li>
529
  <li class="flex items-center">
530
  <i class="fas fa-check text-neon-green mr-2"></i>
 
532
  </li>
533
  <li class="flex items-center">
534
  <i class="fas fa-check text-neon-green mr-2"></i>
535
+ <span>Serveurs exclusifs</span>
536
  </li>
537
  </ul>
538
  <button class="w-full bg-gray-800 text-white py-3 rounded-full font-medium hover:bg-gray-700 transition-all duration-300">
 
542
  </div>
543
 
544
  <div class="text-center mt-16 max-w-3xl mx-auto">
545
+ <h3 class="text-2xl font-bold mb-4">Essai gratuit de 7 jours</h3>
546
  <p class="text-gray-400 mb-6">
547
+ Profitez d'un essai gratuit de 7 jours sans engagement. Annulez à tout moment.
548
+ Accès complet à toute notre bibliothèque en qualité Premium pendant la période d'essai.
549
  </p>
550
  <button class="bg-gradient-to-r from-neon-blue to-neon-green text-black px-8 py-3 rounded-full text-lg font-bold hover:opacity-90 transition-all duration-300">
551
  Commencer l'essai gratuit
 
566
  <div>
567
  <h3 class="text-xl font-bold mb-4 gradient-text futuriste">CINÉFUTUR</h3>
568
  <p class="text-gray-400">
569
+ La plateforme cinématographique du futur. Tous les films en version française et haute qualité.
570
  </p>
571
  <div class="flex space-x-4 mt-4">
572
  <a href="#" class="text-gray-400 hover:text-neon-blue transition-all duration-300">
 
588
  <h4 class="text-lg font-bold mb-4 text-white">Navigation</h4>
589
  <ul class="space-y-2">
590
  <li><a href="#accueil" class="text-gray-400 hover:text-neon-blue transition-all duration-300">Accueil</a></li>
591
+ <li><a href="#nouveautes" class="text-gray-400 hover:text-neon-pink transition-all duration-300">Nouveautés</a></li>
592
+ <li><a href="#films" class="text-gray-400 hover:text-neon-purple transition-all duration-300">Films</a></li>
593
  <li><a href="#abonnement" class="text-gray-400 hover:text-neon-green transition-all duration-300">Abonnement</a></li>
594
  </ul>
595
  </div>
 
636
  mobileMenu.classList.toggle('hidden');
637
  });
638
 
639
+ // Données des films réels avec images de TMDB (version française)
640
  const filmsReels = [
641
  {
642
+ titre: "Dune - Partie 2",
643
+ annee: 2024,
644
+ duree: "2h46min",
645
  genre1: "Science-fiction",
646
  genre2: "Aventure",
647
+ description: "Paul Atréides s'unit avec Chani et les Fremen pour venger son peuple et empêcher un terrible futur que lui seul peut prévoir.",
648
+ note: "8.7",
649
+ image: "https://image.tmdb.org/t/p/w500/8b8R8l88Qje9dn9OE8PY05HsKXE.jpg",
650
+ vf: true,
651
+ hd: true,
652
+ serveurs: [
653
+ { nom: "Serveur Premium", qualite: "4K HDR", url: "#" },
654
+ { nom: "Serveur Rapide", qualite: "1080p", url: "#" },
655
+ { nom: "Serveur Standard", qualite: "720p", url: "#" },
656
+ { nom: "Serveur Mobile", qualite: "480p", url: "#" }
657
+ ]
 
 
658
  },
659
  {
660
+ titre: "Kung Fu Panda 4",
661
+ annee: 2024,
662
+ duree: "1h34min",
663
+ genre1: "Animation",
664
+ genre2: "Action",
665
+ description: "Po doit former un nouveau guerrier pour devenir le leader spirituel de la Vallée de la Paix. Cependant, une méchante sorcière menace de ressusciter tous les maîtres du mal que Po a vaincus.",
666
+ note: "7.1",
667
+ image: "https://image.tmdb.org/t/p/w500/k60II7PJZ3h0qHw1QYQqU3kXIR.jpg",
668
+ vf: true,
669
+ hd: true,
670
+ serveurs: [
671
+ { nom: "Serveur Premium", qualite: "4K", url: "#" },
672
+ { nom: "Serveur Rapide", qualite: "1080p", url: "#" },
673
+ { nom: "Serveur Standard", qualite: "720p", url: "#" }
674
+ ]
 
 
 
675
  },
676
  {
677
+ titre: "Godzilla x Kong",
678
+ annee: 2024,
679
+ duree: "1h55min",
680
  genre1: "Science-fiction",
681
+ genre2: "Action",
682
+ description: "Godzilla et Kong s'unissent contre une menace colossale cachée dans notre monde, mettant en péril leur existence et la nôtre.",
 
 
 
 
 
 
 
 
 
 
683
  note: "7.3",
684
+ image: "https://image.tmdb.org/t/p/w500/z1p34vh7dEOnLDmyCrlUVLuoDzd.jpg",
685
+ vf: true,
686
+ hd: true,
687
+ serveurs: [
688
+ { nom: "Serveur Titan", qualite: "4K HDR", url: "#" },
689
+ { nom: "Serveur Monarch", qualite: "1080p", url: "#" },
690
+ { nom: "Serveur Standard", qualite: "720p", url: "#" }
691
+ ]
692
  },
693
  {
694
+ titre: "Civil War",
695
+ annee: 2024,
696
+ duree: "1h49min",
 
 
 
 
 
 
 
 
 
 
697
  genre1: "Action",
698
+ genre2: "Thriller",
699
+ description: "Une équipe de journalistes voyage à travers les États-Unis déchirés par la guerre alors que le gouvernement fédéral s'effondre.",
700
+ note: "7.5",
701
+ image: "https://image.tmdb.org/t/p/w500/sh7Rg8Er3tFcN9BpKIPOMvALgZd.jpg",
702
+ vf: true,
703
+ hd: true,
704
+ serveurs: [
705
+ { nom: "Serveur Premium", qualite: "4K", url: "#" },
706
+ { nom: "Serveur Rapide", qualite: "1080p", url: "#" }
707
+ ]
708
  },
709
  {
710
+ titre: "The Fall Guy",
711
+ annee: 2024,
712
  duree: "2h06min",
713
  genre1: "Action",
714
+ genre2: "Comédie",
715
+ description: "Un cascadeur tombe amoureux d'une réalisatrice, mais quand la star du film disparaît, il se lance dans une enquête dangereuse.",
716
+ note: "7.5",
717
+ image: "https://image.tmdb.org/t/p/w500/tSz1qsmSJon0rqjHBxXZmrotnE9.jpg",
718
+ vf: true,
719
+ hd: true,
720
+ serveurs: [
721
+ { nom: "Serveur Cascade", qualite: "4K", url: "#" },
722
+ { nom: "Serveur Action", qualite: "1080p", url: "#" },
723
+ { nom: "Serveur Standard", qualite: "720p", url: "#" }
724
+ ]
725
  },
726
  {
727
+ titre: "Furiosa",
728
+ annee: 2024,
729
+ duree: "2h28min",
730
  genre1: "Action",
 
 
 
 
 
 
 
 
 
 
731
  genre2: "Science-fiction",
732
+ description: "L'histoire de la jeune Furiosa avant sa rencontre avec Max Rockatansky dans Mad Max: Fury Road.",
733
+ note: "7.8",
734
+ image: "https://image.tmdb.org/t/p/w500/iako05xNM5R9HpI6D0DvqcoyLxP.jpg",
735
+ vf: true,
736
+ hd: true,
737
+ serveurs: [
738
+ { nom: "Serveur Wasteland", qualite: "4K HDR", url: "#" },
739
+ { nom: "Serveur Fury", qualite: "1080p", url: "#" }
740
+ ]
741
  },
742
  {
743
+ titre: "Deadpool & Wolverine",
744
+ annee: 2024,
745
+ duree: "2h07min",
746
+ genre1: "Action",
747
+ genre2: "Comédie",
748
+ description: "Deadpool rejoint les Wolverine dans une aventure multiverselle qui changera l'histoire du MCU.",
749
+ note: "8.9",
750
+ image: "https://image.tmdb.org/t/p/w500/uxBHXaoOvAwy4NpPpP7nNx2rXYQ.jpg",
751
+ vf: true,
752
+ hd: true,
753
+ serveurs: [
754
+ { nom: "Serveur Premium", qualite: "4K HDR", url: "#" },
755
+ { nom: "Serveur Mutant", qualite: "1080p", url: "#" },
756
+ { nom: "Serveur Standard", qualite: "720p", url: "#" }
757
+ ]
758
  },
759
  {
760
+ titre: "Kingdom of the Planet of the Apes",
761
+ annee: 2024,
762
+ duree: "2h25min",
763
+ genre1: "Science-fiction",
764
+ genre2: "Aventure",
765
+ description: "Plusieurs générations après le règne de César, les singes sont devenus la race dominante et vivent en harmonie.",
766
+ note: "7.2",
767
+ image: "https://image.tmdb.org/t/p/w500/3TJH6zYXTJJKXO9v5zvF1Z4h8XZ.jpg",
768
+ vf: true,
769
+ hd: true,
770
+ serveurs: [
771
+ { nom: "Serveur Ape", qualite: "4K", url: "#" },
772
+ { nom: "Serveur Caesar", qualite: "1080p", url: "#" }
773
+ ]
774
  },
775
  {
776
+ titre: "The Garfield Movie",
777
+ annee: 2024,
778
+ duree: "1h41min",
779
+ genre1: "Animation",
780
  genre2: "Comédie",
781
+ description: "Garfield, le chat paresseux et gourmand, se retrouve embarqué dans une aventure inattendue avec son père longtemps perdu.",
782
+ note: "6.7",
783
+ image: "https://image.tmdb.org/t/p/w500/pS1X1F5qKoSQN9F0kQlZxJzmZtn.jpg",
784
+ vf: true,
785
+ hd: true,
786
+ serveurs: [
787
+ { nom: "Serveur Premium", qualite: "4K", url: "#" },
788
+ { nom: "Serveur Lasagna", qualite: "1080p", url: "#" }
789
+ ]
790
  },
791
  {
792
+ titre: "Inside Out 2",
793
+ annee: 2024,
794
+ duree: "1h36min",
795
+ genre1: "Animation",
796
+ genre2: "Comédie",
797
+ description: "Riley, maintenant adolescente, accueille de nouvelles émotions dans son QG cérébral alors qu'elle s'adapte à la vie au lycée.",
798
+ note: "8.3",
799
+ image: "https://image.tmdb.org/t/p/w500/4T2fNG5aXA2rH4jGXoH9Yq4iCsz.jpg",
800
+ vf: true,
801
+ hd: true,
802
+ serveurs: [
803
+ { nom: "Serveur Emotion", qualite: "4K", url: "#" },
804
+ { nom: "Serveur Memory", qualite: "1080p", url: "#" },
805
+ { nom: "Serveur Standard", qualite: "720p", url: "#" }
806
+ ]
807
  },
808
+ // Plus de films...
809
  {
810
+ titre: "Argylle",
811
+ annee: 2024,
812
+ duree: "2h19min",
813
  genre1: "Action",
814
+ genre2: "Thriller",
815
+ description: "Une auteure de romans d'espionnage se retrouve plongée dans une véritable mission d'espionnage mondiale.",
816
+ note: "6.5",
817
+ image: "https://image.tmdb.org/t/p/w500/95VlSEfLMqeX36UVcHJuNlWEpwf.jpg",
818
+ vf: true,
819
+ hd: true,
820
+ serveurs: [
821
+ { nom: "Serveur Premium", qualite: "4K", url: "#" },
822
+ { nom: "Serveur Spy", qualite: "1080p", url: "#" }
823
+ ]
824
  },
825
  {
826
+ titre: "The Beekeeper",
827
+ annee: 2024,
828
+ duree: "1h45min",
829
+ genre1: "Action",
830
  genre2: "Thriller",
831
+ description: "Un ancien agent d'une organisation secrète appelée 'Beekeepers' sort de sa retraite pour venger une amie victime d'une arnaque.",
832
+ note: "7.3",
833
+ image: "https://image.tmdb.org/t/p/w500/A7EByudX0eOzlkQ2FIbXzy8Wq4l.jpg",
834
+ vf: true,
835
+ hd: true,
836
+ serveurs: [
837
+ { nom: "Serveur Premium", qualite: "4K", url: "#" },
838
+ { nom: "Serveur Action", qualite: "1080p", url: "#" },
839
+ { nom: "Serveur Standard", qualite: "720p", url: "#" }
840
+ ]
841
  },
842
  {
843
+ titre: "Aquaman 2",
844
+ annee: 2023,
845
+ duree: "2h04min",
846
+ genre1: "Action",
847
+ genre2: "Aventure",
848
+ description: "Aquaman doit protéger l'Atlantide contre un ancien pouvoir déchaîné alors qu'il est confronté à des défis personnels.",
849
+ note: "6.5",
850
+ image: "https://image.tmdb.org/t/p/w500/8xV47NDrjdZDpkVcCFqkdHa3T0D.jpg",
851
+ vf: true,
852
+ hd: true,
853
+ serveurs: [
854
+ { nom: "Serveur Ocean", qualite: "4K HDR", url: "#" },
855
+ { nom: "Serveur Atlantis", qualite: "1080p", url: "#" }
856
+ ]
857
  },
858
  {
859
+ titre: "Wonka",
860
+ annee: 2023,
861
+ duree: "1h56min",
862
+ genre1: "Comédie",
863
+ genre2: "Musical",
864
+ description: "L'histoire du jeune Willy Wonka et de sa rencontre avec l'Oompa-Loompa avant de devenir le célèbre chocolatier.",
865
+ note: "7.2",
866
+ image: "https://image.tmdb.org/t/p/w500/qhb1qOilapbapxWQn9jtRCMwXJF.jpg",
867
+ vf: true,
868
+ hd: true,
869
+ serveurs: [
870
+ { nom: "Serveur Chocolate", qualite: "4K", url: "#" },
871
+ { nom: "Serveur Golden", qualite: "1080p", url: "#" },
872
+ { nom: "Serveur Standard", qualite: "720p", url: "#" }
873
+ ]
874
  },
875
  {
876
+ titre: "Napoléon",
877
+ annee: 2023,
878
+ duree: "2h38min",
879
  genre1: "Drame",
880
+ genre2: "Historique",
881
+ description: "L'histoire de la vie de Napoléon Bonaparte, de ses origines à son ascension en tant qu'empereur de France.",
882
+ note: "6.4",
883
+ image: "https://image.tmdb.org/t/p/w500/jE5oqEcQpLNHNcgvU1lpq56zKA4.jpg",
884
+ vf: true,
885
+ hd: true,
886
+ serveurs: [
887
+ { nom: "Serveur Emperor", qualite: "4K", url: "#" },
888
+ { nom: "Serveur France", qualite: "1080p", url: "#" }
889
+ ]
890
  },
 
891
  {
892
+ titre: "The Marvels",
893
+ annee: 2023,
894
+ duree: "1h45min",
895
  genre1: "Action",
896
  genre2: "Science-fiction",
897
+ description: "Carol Danvers, Monica Rambeau et Kamala Khan voient leurs pouvoirs s'entremêler et doivent travailler ensemble.",
898
+ note: "5.9",
899
+ image: "https://image.tmdb.org/t/p/w500/9GBhzXMFjgcZ3FdR9w3bUMMTps5.jpg",
900
+ vf: true,
901
+ hd: true,
902
+ serveurs: [
903
+ { nom: "Serveur Cosmic", qualite: "4K", url: "#" },
904
+ { nom: "Serveur Hero", qualite: "1080p", url: "#" }
905
+ ]
 
 
 
 
906
  },
907
  {
908
+ titre: "Oppenheimer",
909
+ annee: 2023,
910
+ duree: "3h",
911
  genre1: "Drame",
912
+ genre2: "Historique",
913
+ description: "L'histoire du physicien J. Robert Oppenheimer et de son rôle dans le développement de la bombe atomique.",
914
+ note: "8.3",
915
+ image: "https://image.tmdb.org/t/p/w500/8Gxv8gSFCU0XGDykEGv7zR1nuhua.jpg",
916
+ vf: true,
917
+ hd: true,
918
+ serveurs: [
919
+ { nom: "Serveur IMAX", qualite: "4K", url: "#" },
920
+ { nom: "Serveur Atomic", qualite: "1080p", url: "#" }
921
+ ]
 
 
 
 
922
  },
923
  {
924
+ titre: "Barbie",
925
+ annee: 2023,
926
+ duree: "1h54min",
927
+ genre1: "Comédie",
928
+ genre2: "Aventure",
929
+ description: "Barbie vit dans un monde parfait jusqu'à ce qu'elle découvre des problèmes dans le monde réel et parte à l'aventure.",
930
+ note: "7.0",
931
+ image: "https://image.tmdb.org/t/p/w500/iuFNMS8U5cb6xfzi51Dbkovj7vM.jpg",
932
+ vf: true,
933
+ hd: true,
934
+ serveurs: [
935
+ { nom: "Serveur Pink", qualite: "4K", url: "#" },
936
+ { nom: "Serveur Dream", qualite: "1080p", url: "#" },
937
+ { nom: "Serveur Standard", qualite: "720p", url: "#" }
938
+ ]
939
  },
940
  {
941
+ titre: "Mission: Impossible 7",
942
+ annee: 2023,
943
+ duree: "2h43min",
944
  genre1: "Action",
945
+ genre2: "Thriller",
946
+ description: "Ethan Hunt et son équipe de l'IMF doivent retrouver une nouvelle arme dangereuse avant qu'elle ne tombe entre de mauvaises mains.",
947
+ note: "7.7",
948
+ image: "https://image.tmdb.org/t/p/w500/NNxYkU70HPurnPCSiTMUULQXa.jpg",
949
+ vf: true,
950
+ hd: true,
951
+ serveurs: [
952
+ { nom: "Serveur Impossible", qualite: "4K", url: "#" },
953
+ { nom: "Serveur Stunt", qualite: "1080p", url: "#" }
954
+ ]
 
 
 
 
955
  },
956
  {
957
+ titre: "Fast X",
958
+ annee: 2023,
959
+ duree: "2h21min",
960
+ genre1: "Action",
961
  genre2: "Crime",
962
+ description: "Dom Toretto et sa famille sont confrontés à leur ennemi le plus redoutable et le plus habile qu'ils aient jamais rencontré.",
963
+ note: "7.1",
964
+ image: "https://image.tmdb.org/t/p/w500/fiVW06jE7z9YnO4trhaMEdclSiC.jpg",
965
+ vf: true,
966
+ hd: true,
967
+ serveurs: [
968
+ { nom: "Serveur Family", qualite: "4K", url: "#" },
969
+ { nom: "Serveur Turbo", qualite: "1080p", url: "#" },
970
+ { nom: "Serveur Standard", qualite: "720p", url: "#" }
971
+ ]
 
 
 
 
 
 
 
 
 
 
 
 
 
972
  }
973
  ];
974
 
 
977
  const batchSize = 12; // Nombre de films à charger à chaque fois
978
  const loadingContainer = document.getElementById('loading-container');
979
  const filmsGrid = document.getElementById('films-grid');
980
+ const nouveautesGrid = document.getElementById('nouveautes-grid');
981
+ const loadMoreBtn = document.getElementById('load-more-btn');
982
+
983
+ // Fonction pour générer le menu des serveurs
984
+ function genererMenuServeurs(serveurs) {
985
+ let html = '<div class="server-dropdown rounded-lg shadow-lg p-3">';
986
+ html += '<div class="text-xs text-gray-400 mb-2">CHOISISSEZ UN SERVEUR:</div>';
987
+
988
+ serveurs.forEach(serveur => {
989
+ html += `
990
+ <div class="server-option flex items-center justify-between" data-url="${serveur.url}">
991
+ <div>
992
+ <span class="font-medium">${serveur.nom}</span>
993
+ <span class="text-xs text-neon-blue ml-2">${serveur.qualite}</span>
994
+ </div>
995
+ <i class="fas fa-play text-neon-green"></i>
996
+ </div>
997
+ `;
998
+ });
999
+
1000
+ html += '</div>';
1001
+ return html;
1002
+ }
1003
 
1004
  // Générer les films dans la grille
1005
+ function genererFilmsGrid(films, targetElement) {
1006
  films.forEach(film => {
1007
  const filmElement = document.createElement('div');
1008
  filmElement.className = 'film-card group relative rounded-xl overflow-hidden transition-all duration-500 hover:z-10';
1009
  filmElement.innerHTML = `
1010
  <div class="relative aspect-[2/3] rounded-xl overflow-hidden">
1011
+ ${film.vf ? '<span class="vf-badge">VF</span>' : ''}
1012
+ ${film.hd ? '<span class="hd-badge">HD</span>' : ''}
1013
  <img src="${film.image}" alt="${film.titre}" class="w-full h-full object-cover group-hover:opacity-70 transition-all duration-500">
1014
  <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
1015
  <div class="absolute bottom-0 left-0 right-0 p-4 translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500">
 
1036
  <span>${film.annee}</span>
1037
  </div>
1038
  </div>
1039
+ <div class="mt-2 relative">
1040
+ <button class="server-btn w-full bg-gradient-to-r from-neon-blue to-neon-purple text-black py-2 rounded-full text-sm font-bold hover:opacity-90 transition-all duration-300 flex items-center justify-center">
1041
+ <i class="fas fa-play mr-2"></i> Regarder
1042
+ </button>
1043
+ ${genererMenuServeurs(film.serveurs)}
1044
+ </div>
1045
  `;
1046
+ targetElement.appendChild(filmElement);
1047
+ });
1048
+
1049
+ // Gestion des menus déroulants des serveurs
1050
+ document.querySelectorAll('.server-btn').forEach(btn => {
1051
+ btn.addEventListener('click', function(e) {
1052
+ e.stopPropagation();
1053
+ const dropdown = this.nextElementSibling;
1054
+ dropdown.classList.toggle('show');
1055
+ });
1056
+ });
1057
+
1058
+ // Fermer les menus déroulants quand on clique ailleurs
1059
+ document.addEventListener('click', function() {
1060
+ document.querySelectorAll('.server-dropdown').forEach(dropdown => {
1061
+ dropdown.classList.remove('show');
1062
+ });
1063
+ });
1064
+
1065
+ // Empêcher la fermeture quand on clique dans le menu
1066
+ document.querySelectorAll('.server-dropdown').forEach(dropdown => {
1067
+ dropdown.addEventListener('click', function(e) {
1068
+ e.stopPropagation();
1069
+ });
1070
+ });
1071
+
1072
+ // Gestion du choix de serveur
1073
+ document.querySelectorAll('.server-option').forEach(option => {
1074
+ option.addEventListener('click', function() {
1075
+ const url = this.getAttribute('data-url');
1076
+ // Ici vous pourriez rediriger vers la page de lecture
1077
+ // ou ouvrir un lecteur vidéo avec l'URL du serveur
1078
+ alert(`Redirection vers le serveur: ${url}`);
1079
+ });
1080
  });
1081
  }
1082
 
1083
  // Charger plus de films
1084
  function chargerPlusDeFilms() {
1085
+ if (filmsCharges >= filmsReels.length) {
1086
+ loadMoreBtn.textContent = "Tous les films chargés";
1087
+ loadMoreBtn.disabled = true;
1088
+ return;
1089
+ }
1090
 
1091
+ loadMoreBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Chargement...';
1092
 
1093
  // Simulation de chargement asynchrone
1094
  setTimeout(() => {
1095
  const nouveauxFilms = filmsReels.slice(filmsCharges, filmsCharges + batchSize);
1096
+ genererFilmsGrid(nouveauxFilms, filmsGrid);
1097
  filmsCharges += batchSize;
1098
 
1099
+ loadMoreBtn.innerHTML = '<i class="fas fa-sync-alt mr-2"></i> Charger plus de films';
1100
 
1101
+ // Si on a chargé tous les films, désactiver le bouton
1102
  if (filmsCharges >= filmsReels.length) {
1103
+ loadMoreBtn.textContent = "Tous les films chargés";
1104
+ loadMoreBtn.disabled = true;
1105
  }
1106
+ }, 800);
1107
  }
1108
 
1109
  // Générer les films dans le carrousel de nouveautés
 
1115
  filmElement.innerHTML = `
1116
  <div class="relative group rounded-xl overflow-hidden">
1117
  <div class="relative aspect-[3/4] rounded-xl overflow-hidden">
1118
+ ${film.vf ? '<span class="vf-badge">VF</span>' : ''}
1119
+ ${film.hd ? '<span class="hd-badge">HD</span>' : ''}
1120
  <img src="${film.image}" alt="${film.titre}" class="w-full h-full object-cover group-hover:opacity-70 transition-all duration-500">
1121
  <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
1122
  <div class="absolute bottom-0 left-0 right-0 p-4 translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500">
 
1140
  NOUVEAU
1141
  </div>
1142
  </div>
1143
+ <div class="mt-2 relative">
1144
+ <button class="server-btn w-full bg-gradient-to-r from-neon-purple to-neon-pink text-black py-2 rounded-full text-sm font-bold hover:opacity-90 transition-all duration-300 flex items-center justify-center">
1145
+ <i class="fas fa-play mr-2"></i> Regarder
1146
+ </button>
1147
+ ${genererMenuServeurs(film.serveurs)}
1148
+ </div>
1149
  </div>
1150
  `;
1151
  nouveautesCarousel.appendChild(filmElement);
 
1167
  // Initialisation
1168
  document.addEventListener('DOMContentLoaded', () => {
1169
  // Charger le premier lot de films
1170
+ const premiersFilms = filmsReels.slice(0, batchSize);
1171
+ genererFilmsGrid(premiersFilms, filmsGrid);
1172
+ filmsCharges = batchSize;
1173
+
1174
+ // Charger les nouveautés dans la grille
1175
+ const nouveautes = filmsReels.slice(0, 12); // 12 derniers films
1176
+ genererFilmsGrid(nouveautes, nouveautesGrid);
1177
 
1178
  // Générer le carrousel de nouveautés
1179
  genererNouveautesCarousel(filmsReels);
 
1194
  document.querySelectorAll('.scroll-section').forEach(section => {
1195
  observer.observe(section);
1196
  });
1197
+
1198
+ // Gestion du bouton "Charger plus"
1199
+ loadMoreBtn.addEventListener('click', chargerPlusDeFilms);
1200
  });
1201
 
1202
  // Observer pour le chargement automatique
prompts.txt CHANGED
@@ -1,3 +1,4 @@
1
  https://plateformecinema.com/: je veux le site en francais et sile futuriste animé avec toutes les derniere sortie et ajouter 7878987 film en automatique
2
  AFFICHER LES VRAIS IMAGES DES SITE ET DES VRAIS FILMS JE VEUX PAS DE SITE D EXEMPLE JE VEUX TOUT EN PILOTAGE AUTOMATIQUE
3
- activer charger plus de film en systeme robotisé automaique
 
 
1
  https://plateformecinema.com/: je veux le site en francais et sile futuriste animé avec toutes les derniere sortie et ajouter 7878987 film en automatique
2
  AFFICHER LES VRAIS IMAGES DES SITE ET DES VRAIS FILMS JE VEUX PAS DE SITE D EXEMPLE JE VEUX TOUT EN PILOTAGE AUTOMATIQUE
3
+ activer charger plus de film en systeme robotisé automaique
4
+ afficher toutes les derniere film sortie ajouter des bouton a regarder et leurs serveur je les feux les film en francais de haute qualitéé