Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CinéPilot - Plateforme Cinéma Automatique</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;900&display=swap'); | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| background-color: #0f172a; | |
| } | |
| .film-card { | |
| transition: all 0.3s ease; | |
| transform-origin: center; | |
| } | |
| .film-card:hover { | |
| transform: scale(1.05) translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); | |
| z-index: 10; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%); | |
| } | |
| .blur-load { | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .blur-load.loaded > img { | |
| opacity: 1; | |
| } | |
| .blur-load > img { | |
| opacity: 0; | |
| transition: opacity 200ms ease-in-out; | |
| } | |
| .loading-spinner { | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| .marquee { | |
| animation: marquee 20s linear infinite; | |
| } | |
| @keyframes marquee { | |
| 0% { transform: translateX(0); } | |
| 100% { transform: translateX(-50%); } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .glow { | |
| box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); | |
| } | |
| .section { | |
| display: none; | |
| } | |
| .section.active { | |
| display: block; | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| </style> | |
| </head> | |
| <body class="text-gray-100"> | |
| <!-- Header --> | |
| <header class="bg-gray-900 border-b border-gray-800 sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-film text-3xl text-blue-500"></i> | |
| <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent">CinéPilot</h1> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#" class="nav-link hover:text-blue-400 transition" data-section="home">Accueil</a> | |
| <a href="#" class="nav-link hover:text-blue-400 transition" data-section="movies">Films</a> | |
| <a href="#" class="nav-link hover:text-blue-400 transition" data-section="series">Séries</a> | |
| <a href="#" class="nav-link hover:text-blue-400 transition" data-section="new">Nouveautés</a> | |
| <a href="#" class="nav-link hover:text-blue-400 transition" data-section="categories">Catégories</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-full font-medium transition" id="loginBtn"> | |
| <i class="fas fa-user mr-2"></i>Connexion | |
| </button> | |
| <button class="text-xl" id="searchBtn"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient py-16 section active" id="home"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4">78,954 films en streaming automatique</h2> | |
| <p class="text-xl text-gray-300 mb-6">Découvrez notre immense catalogue de films mis à jour automatiquement chaque jour.</p> | |
| <div class="flex space-x-4"> | |
| <button class="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-full font-bold text-lg transition glow"> | |
| <i class="fas fa-play mr-2"></i>Commencer | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 px-6 py-3 rounded-full font-bold text-lg transition"> | |
| <i class="fas fa-info-circle mr-2"></i>En savoir plus | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 relative"> | |
| <div class="relative aspect-video rounded-xl overflow-hidden border-4 border-white shadow-2xl"> | |
| <img src="https://image.tmdb.org/t/p/original/8Vt6mWEReuy4Of61Lnj5Xj704m8.jpg" alt="Dune" class="w-full h-full object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <h3 class="text-xl font-bold">Dune: Partie Deux</h3> | |
| <div class="flex items-center space-x-2 text-sm"> | |
| <span class="bg-blue-600 px-2 py-1 rounded">HD</span> | |
| <span>2024</span> | |
| <span>•</span> | |
| <span>2h 46min</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Marquee --> | |
| <div class="bg-gray-800 py-3"> | |
| <div class="marquee whitespace-nowrap"> | |
| <span class="text-lg font-bold text-blue-400 mr-12">NOUVEAUTÉS AJOUTÉES AUTOMATIQUEMENT •</span> | |
| <span class="text-lg font-bold text-blue-400 mr-12">78,954 FILMS DISPONIBLES •</span> | |
| <span class="text-lg font-bold text-blue-400 mr-12">SYSTÈME DE RECOMMANDATION INTELLIGENT •</span> | |
| <span class="text-lg font-bold text-blue-400 mr-12">MISE À JOUR QUOTIDIENNE •</span> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Movies Section --> | |
| <section class="mb-12 section" id="movies"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold">Tous les films</h2> | |
| <a href="#" class="text-blue-400 hover:text-blue-300 flex items-center"> | |
| Voir plus <i class="fas fa-chevron-right ml-1"></i> | |
| </a> | |
| </div> | |
| <div id="allMovies" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4"> | |
| <!-- Films will be loaded here --> | |
| <div class="flex items-center justify-center py-12"> | |
| <div class="loading-spinner text-blue-500 text-4xl"> | |
| <i class="fas fa-spinner"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Series Section --> | |
| <section class="mb-12 section" id="series"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold">Toutes les séries</h2> | |
| <a href="#" class="text-blue-400 hover:text-blue-300 flex items-center"> | |
| Voir plus <i class="fas fa-chevron-right ml-1"></i> | |
| </a> | |
| </div> | |
| <div id="allSeries" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4"> | |
| <!-- Series will be loaded here --> | |
| <div class="flex items-center justify-center py-12"> | |
| <div class="loading-spinner text-blue-500 text-4xl"> | |
| <i class="fas fa-spinner"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Section --> | |
| <section class="mb-12 section" id="new"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold">Nouveautés du jour</h2> | |
| <a href="#" class="text-blue-400 hover:text-blue-300 flex items-center"> | |
| Voir plus <i class="fas fa-chevron-right ml-1"></i> | |
| </a> | |
| </div> | |
| <div id="newReleases" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4"> | |
| <!-- Films will be loaded here --> | |
| <div class="flex items-center justify-center py-12"> | |
| <div class="loading-spinner text-blue-500 text-4xl"> | |
| <i class="fas fa-spinner"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Categories --> | |
| <section class="mb-12 section" id="categories"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold">Catégories populaires</h2> | |
| <a href="#" class="text-blue-400 hover:text-blue-300 flex items-center"> | |
| Toutes les catégories <i class="fas fa-chevron-right ml-1"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4"> | |
| <a href="#" class="category-link bg-gray-800 hover:bg-gray-700 rounded-lg p-4 text-center transition transform hover:scale-105" data-category="action"> | |
| <i class="fas fa-bolt text-yellow-400 text-2xl mb-2"></i> | |
| <h3 class="font-medium">Action</h3> | |
| </a> | |
| <a href="#" class="category-link bg-gray-800 hover:bg-gray-700 rounded-lg p-4 text-center transition transform hover:scale-105" data-category="romance"> | |
| <i class="fas fa-heart text-red-400 text-2xl mb-2"></i> | |
| <h3 class="font-medium">Romance</h3> | |
| </a> | |
| <a href="#" class="category-link bg-gray-800 hover:bg-gray-700 rounded-lg p-4 text-center transition transform hover:scale-105" data-category="horror"> | |
| <i class="fas fa-ghost text-purple-400 text-2xl mb-2"></i> | |
| <h3 class="font-medium">Horreur</h3> | |
| </a> | |
| <a href="#" class="category-link bg-gray-800 hover:bg-gray-700 rounded-lg p-4 text-center transition transform hover:scale-105" data-category="comedy"> | |
| <i class="fas fa-laugh-squint text-green-400 text-2xl mb-2"></i> | |
| <h3 class="font-medium">Comédie</h3> | |
| </a> | |
| <a href="#" class="category-link bg-gray-800 hover:bg-gray-700 rounded-lg p-4 text-center transition transform hover:scale-105" data-category="scifi"> | |
| <i class="fas fa-rocket text-blue-400 text-2xl mb-2"></i> | |
| <h3 class="font-medium">Science-fiction</h3> | |
| </a> | |
| <a href="#" class="category-link bg-gray-800 hover:bg-gray-700 rounded-lg p-4 text-center transition transform hover:scale-105" data-category="thriller"> | |
| <i class="fas fa-user-secret text-gray-400 text-2xl mb-2"></i> | |
| <h3 class="font-medium">Thriller</h3> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Trending Section --> | |
| <section class="mb-12"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold">Tendances cette semaine</h2> | |
| <a href="#" class="text-blue-400 hover:text-blue-300 flex items-center"> | |
| Voir plus <i class="fas fa-chevron-right ml-1"></i> | |
| </a> | |
| </div> | |
| <div id="trending" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4"> | |
| <!-- Films will be loaded here --> | |
| <div class="flex items-center justify-center py-12"> | |
| <div class="loading-spinner text-blue-500 text-4xl"> | |
| <i class="fas fa-spinner"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Recommended Section --> | |
| <section class="mb-12"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold">Recommandé pour vous</h2> | |
| <a href="#" class="text-blue-400 hover:text-blue-300 flex items-center"> | |
| Rafraîchir <i class="fas fa-sync-alt ml-1"></i> | |
| </a> | |
| </div> | |
| <div id="recommended" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4"> | |
| <!-- Films will be loaded here --> | |
| <div class="flex items-center justify-center py-12"> | |
| <div class="loading-spinner text-blue-500 text-4xl"> | |
| <i class="fas fa-spinner"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 border-t border-gray-800 py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i class="fas fa-film text-3xl text-blue-500"></i> | |
| <h3 class="text-2xl font-bold">CinéPilot</h3> | |
| </div> | |
| <p class="text-gray-400">La plateforme de streaming automatique avec la plus grande collection de films.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Navigation</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="nav-link text-gray-400 hover:text-blue-400 transition" data-section="home">Accueil</a></li> | |
| <li><a href="#" class="nav-link text-gray-400 hover:text-blue-400 transition" data-section="movies">Films</a></li> | |
| <li><a href="#" class="nav-link text-gray-400 hover:text-blue-400 transition" data-section="series">Séries</a></li> | |
| <li><a href="#" class="nav-link text-gray-400 hover:text-blue-400 transition" data-section="new">Nouveautés</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Légal</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Conditions d'utilisation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Politique de confidentialité</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">DMCA</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Contact</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center space-x-2"> | |
| <i class="fas fa-envelope text-blue-400"></i> | |
| <span class="text-gray-400">contact@cinepilot.com</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i class="fas fa-phone text-blue-400"></i> | |
| <span class="text-gray-400">+33 1 23 45 67 89</span> | |
| </li> | |
| </ul> | |
| <div class="flex space-x-4 mt-4"> | |
| <a href="#" class="bg-gray-800 hover:bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="bg-gray-800 hover:bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="bg-gray-800 hover:bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500"> | |
| <p>© 2023 CinéPilot. Tous droits réservés. Système de pilotage automatique.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Film Modal --> | |
| <div id="filmModal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden overflow-y-auto"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <div class="flex justify-end mb-4"> | |
| <button id="closeModal" class="text-3xl text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div id="modalContent" class="bg-gray-900 rounded-xl overflow-hidden"> | |
| <!-- Content will be loaded here --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Login Modal --> | |
| <div id="loginModal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden flex items-center justify-center"> | |
| <div class="bg-gray-900 rounded-xl p-8 max-w-md w-full mx-4"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold">Connexion</h2> | |
| <button id="closeLoginModal" class="text-2xl text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <form id="loginForm"> | |
| <div class="mb-4"> | |
| <label for="email" class="block text-gray-300 mb-2">Email</label> | |
| <input type="email" id="email" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="password" class="block text-gray-300 mb-2">Mot de passe</label> | |
| <input type="password" id="password" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg transition"> | |
| Se connecter | |
| </button> | |
| <div class="mt-4 text-center"> | |
| <a href="#" class="text-blue-400 hover:text-blue-300">Créer un compte</a> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Search Modal --> | |
| <div id="searchModal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden flex items-start justify-center pt-16"> | |
| <div class="bg-gray-900 rounded-xl p-6 max-w-3xl w-full mx-4"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <div class="relative w-full"> | |
| <input type="text" placeholder="Rechercher des films, séries..." class="w-full bg-gray-800 border border-gray-700 rounded-full px-6 py-4 pl-12 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i> | |
| </div> | |
| <button id="closeSearchModal" class="ml-4 text-2xl text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div id="searchResults" class="max-h-96 overflow-y-auto"> | |
| <div class="text-center py-8 text-gray-400"> | |
| <i class="fas fa-search text-4xl mb-4"></i> | |
| <p>Recherchez des films, séries ou catégories</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Film database with real movie posters from TMDB | |
| const filmDatabase = { | |
| totalFilms: 78954, | |
| categories: [ | |
| "Action", "Aventure", "Animation", "Comédie", "Crime", | |
| "Documentaire", "Drame", "Familial", "Fantastique", "Histoire", | |
| "Horreur", "Musique", "Mystère", "Romance", "Science-fiction", | |
| "Thriller", "Guerre", "Western" | |
| ], | |
| languages: ["Français", "Anglais", "Espagnol", "Allemand", "Italien", "Japonais"], | |
| popularMovies: [ | |
| { | |
| id: 1, | |
| title: "Dune: Partie Deux", | |
| year: 2024, | |
| rating: "8.5", | |
| duration: "2h 46min", | |
| category: "Science-fiction", | |
| language: "Anglais", | |
| poster: "https://image.tmdb.org/t/p/w500/8Vt6mWEReuy4Of61Lnj5Xj704m8.jpg", | |
| backdrop: "https://image.tmdb.org/t/p/original/8Vt6mWEReuy4Of61Lnj5Xj704m8.jpg", | |
| description: "Paul Atreides s'unit avec Chani et les Fremen pour se venger des conspirateurs qui ont détruit sa famille. Alors qu'il est confronté à un choix entre l'amour de sa vie et le destin de l'univers, il doit empêcher un terrible futur que lui seul peut prévoir." | |
| }, | |
| { | |
| id: 2, | |
| title: "Oppenheimer", | |
| year: 2023, | |
| rating: "8.3", | |
| duration: "3h", | |
| category: "Drame", | |
| language: "Anglais", | |
| poster: "https://image.tmdb.org/t/p/w500/8Gxv8gSFCU0XGDykEGv7zR1n2ua.jpg", | |
| backdrop: "https://image.tmdb.org/t/p/original/8Gxv8gSFCU0XGDykEGv7zR1n2ua.jpg", | |
| description: "L'histoire de J. Robert Oppenheimer, le scientifique qui a dirigé le projet Manhattan pour développer la bombe atomique pendant la Seconde Guerre mondiale." | |
| }, | |
| { | |
| id: 3, | |
| title: "Barbie", | |
| year: 2023, | |
| rating: "7.0", | |
| duration: "1h 54min", | |
| category: "Comédie", | |
| language: "Anglais", | |
| poster: "https://image.tmdb.org/t/p/w500/iuFNMS8U5cb6xfzi51Dbkovj7vM.jpg", | |
| backdrop: "https://image.tmdb.org/t/p/original/iuFNMS8U5cb6xfzi51Dbkovj7vM.jpg", | |
| description: "Barbie vit dans un monde parfait jusqu'à ce qu'elle découvre des problèmes dans le monde réel. Elle part alors pour une aventure qui changera sa vie à jamais." | |
| }, | |
| { | |
| id: 4, | |
| title: "Les Gardiens de la Galaxie Vol. 3", | |
| year: 2023, | |
| rating: "8.0", | |
| duration: "2h 30min", | |
| category: "Science-fiction", | |
| language: "Anglais", | |
| poster: "https://image.tmdb.org/t/p/w500/8hlyQ7qQC1VDqFm37sC8Tkq1Q2a.jpg", | |
| backdrop: "https://image.tmdb.org/t/p/original/8hlyQ7qQC1VDqFm37sC8Tkq1Q2a.jpg", | |
| description: "Peter Quill, toujours en deuil de la perte de Gamora, doit rassembler son équipe pour défendre l'univers et protéger l'un des leurs." | |
| }, | |
| { | |
| id: 5, | |
| title: "John Wick 4", | |
| year: 2023, | |
| rating: "7.8", | |
| duration: "2h 49min", | |
| category: "Action", | |
| language: "Anglais", | |
| poster: "https://image.tmdb.org/t/p/w500/vZloFAK7NmvMGKE7VkF5UHaz0I.jpg", | |
| backdrop: "https://image.tmdb.org/t/p/original/vZloFAK7NmvMGKE7VkF5UHaz0I.jpg", | |
| description: "John Wick découvre un moyen de vaincre le Haut Conseil. Mais avant de pouvoir gagner sa liberté, Wick doit affronter un nouvel ennemi avec des alliances puissantes dans le monde entier." | |
| }, | |
| { | |
| id: 6, | |
| title: "Super Mario Bros. le film", | |
| year: 2023, | |
| rating: "7.8", | |
| duration: "1h 32min", | |
| category: "Animation", | |
| language: "Anglais", | |
| poster: "https://image.tmdb.org/t/p/w500/8YFL5QQ7yNx77pKIgWXaXKprQmZ.jpg", | |
| backdrop: "https://image.tmdb.org/t/p/original/8YFL5QQ7yNx77pKIgWXaXKprQmZ.jpg", | |
| description: "Un plombier nommé Mario voyage à travers un labyrinthe souterrain avec son frère Luigi pour sauver une princesse capturée." | |
| }, | |
| { | |
| id: 7, | |
| title: "Mission Impossible : Dead Reckoning Partie 1", | |
| year: 2023, | |
| rating: "7.7", | |
| duration: "2h 43min", | |
| category: "Action", | |
| language: "Anglais", | |
| poster: "https://image.tmdb.org/t/p/w500/NNxYkU70HPurnNCSiCjYAmacwm.jpg", | |
| backdrop: "https://image.tmdb.org/t/p/original/NNxYkU70HPurnNCSiCjYAmacwm.jpg", | |
| description: "Ethan Hunt et son équipe de l'IMF doivent retrouver une nouvelle arme terrifiante qui menace toute l'humanité avant qu'elle ne tombe entre de mauvaises mains." | |
| }, | |
| { | |
| id: 8, | |
| title: "Avatar : La Voie de l'eau", | |
| year: 2022, | |
| rating: "7.6", | |
| duration: "3h 12min", | |
| category: "Science-fiction", | |
| language: "Anglais", | |
| poster: "https://image.tmdb.org/t/p/w500/jRXYjXNq0Cs2TcJjLkki24MLp7u.jpg", | |
| backdrop: "https://image.tmdb.org/t/p/original/jRXYjXNq0Cs2TcJjLkki24MLp7u.jpg", | |
| description: "Jake Sully et Ney'tiri forment une famille et font tout leur possible pour rester ensemble. Cependant, ils doivent quitter leur foyer et explorer les différentes régions de Pandora." | |
| }, | |
| { | |
| id: 9, | |
| title: "Spider-Man: Across the Spider-Verse", | |
| year: 2023, | |
| rating: "8.6", | |
| duration: "2h 20min", | |
| category: "Animation", | |
| language: "Anglais", | |
| poster: "https://image.tmdb.org/t/p/w500/8Vt6mWEReuy4Of61Lnj5Xj704m8.jpg", | |
| backdrop: "https://image.tmdb.org/t/p/original/8Vt6mWEReuy4Of61Lnj5Xj704m8.jpg", | |
| description: "Miles Morales se lance dans une aventure épique à travers le multivers avec Gwen Stacy et une nouvelle équipe de Spider-People pour affronter un ennemi plus puissant que tout ce qu'ils ont connu." | |
| }, | |
| { | |
| id: 10, | |
| title: "The Batman", | |
| year: 2022, | |
| rating: "7.7", | |
| duration: "2h 56min", | |
| category: "Action", | |
| language: "Anglais", | |
| poster: "https://image.tmdb.org/t/p/w500/seyWFgGItaxDVjtrZYhogY7AuR.jpg", | |
| backdrop: "https://image.tmdb.org/t/p/original/seyWFgGItaxDVjtrZYhogY7AuR.jpg", | |
| description: "Lorsqu'un tueur cible l'élite de Gotham avec une série de machinations sadiques, une piste d'indices énigmatiques lance le plus grand détective du monde dans une enquête dans les bas-fonds." | |
| }, | |
| { | |
| id: 11, | |
| title: "Black Panther: Wakanda Forever", | |
| year: 2022, | |
| rating: "7.2", | |
| duration: "2h 41min", | |
| category: "Action", | |
| language: "Anglais", | |
| poster: "https://image.tmdb.org/t/p/w500/sv1xJUazXeYqALzczSZ3O6nkH75.jpg", | |
| backdrop: "https://image.tmdb.org/t/p/original/sv1xJUazXeYqALzczSZ3O6nkH75.jpg", | |
| description: "La reine Ramonda, Shuri, M'Baku, Okoye et les Dora Milaje luttent pour protéger leur nation des ingérences des puissances mondiales à la suite de la mort du king T'Challa." | |
| }, | |
| { | |
| id: 12, | |
| title: "Top Gun: Maverick", | |
| year: 2022, | |
| rating: "8.3", | |
| duration: "2h 10min", | |
| category: "Action", | |
| language: "Anglais", | |
| poster: "https://image.tmdb.org/t/p/w500/jTswp6KyDYKtvC52GbHagrZbGvD.jpg", | |
| backdrop: "https://image.tmdb.org/t/p/original/jTswp6KyDYKtvC52GbHagrZbGvD.jpg", | |
| description: "Après plus de trente ans de service, Pete 'Maverick' Mitchell est de retour pour former les meilleurs pilotes de Top Gun pour une mission spéciale." | |
| } | |
| ], | |
| popularSeries: [ | |
| { | |
| id: 101, | |
| title: "Stranger Things", | |
| year: 2016, | |
| rating: "8.7", | |
| seasons: 4, | |
| category: "Science-fiction", | |
| language: "Anglais", | |
| poster: "https://image.tmdb.org/t/p/w500/49WJfeN0moxbXIIPmmaFsTExOnJ.jpg", | |
| backdrop: "https://image.tmdb.org/t/p/original/49WJfeN0moxbXIIPmmaFsTExOnJ.jpg", | |
| description: "À Hawkins, en 1983 dans l'Indiana. Lorsque Will Byers disparaît de son domicile, ses amis se lancent dans une recherche semée d'embûches pour le retrouver." | |
| }, | |
| { | |
| id: 102, | |
| title: "The Last of Us", | |
| year: 2023, | |
| rating: "8.8", | |
| seasons: 1, | |
| category: "Drame", | |
| language: "Anglais", | |
| poster: "https://image.tmdb.org/t/p/w500/uKvVjHNqB5VmOrdxqAt2F7J78ED.jpg", | |
| backdrop: "https://image.tmdb.org/t/p/original/uKvVjHNqB5VmOrdxqAt2F7J78ED.jpg", | |
| description: "Vingt ans après la destruction de la civilisation moderne, Joel est chargé de sortir Ellie, une fille de 14 ans, d'une zone de quarantaine oppressive." | |
| }, | |
| { | |
| id: 103, | |
| title: "The Mandalorian", | |
| year: 2019, | |
| rating: "8.5", | |
| seasons: 3, | |
| category: "Science-fiction", | |
| language: "Anglais", | |
| poster: "https://image.tmdb.org/t/p/w500/eU1i6eHXlzMOlEq0ku1Rzq7Y4wA.jpg", | |
| backdrop: "https://image.tmdb.org/t/p/original/eU1i6eHXlzMOlEq0ku1Rzq7Y4wA.jpg", | |
| description: "Après les aventures de Jango et Boba Fett, un autre guerrier émerge dans l'univers Star Wars. The Mandalorian se déroule après la chute de l'Empire et avant l'émergence du Premier Ordre." | |
| }, | |
| { | |
| id: 104, | |
| title: "House of the Dragon", | |
| year: 2022, | |
| rating: "8.5", | |
| seasons: 1, | |
| category: "Fantastique", | |
| language: "Anglais", | |
| poster: "https://image.tmdb.org/t/p/w500/1X4h40fcB4WWUmIBK0auT4pfRWB.jpg", | |
| backdrop: "https://image.tmdb.org/t/p/original/1X4h40fcB4WWUmIBK0auT4pfRWB.jpg", | |
| description: "L'histoire de la maison Targaryen se déroulant 200 ans avant les événements de Game of Thrones." | |
| }, | |
| { | |
| id: 105, | |
| title: "Breaking Bad", | |
| year: 2008, | |
| rating: "8.9", | |
| seasons: 5, | |
| category: "Drame", | |
| language: "Anglais", | |
| poster: "https://image.tmdb.org/t/p/w500/ggFHVNu6YYI5L9pCfOacjizRGt.jpg", | |
| backdrop: "https://image.tmdb.org/t/p/original/ggFHVNu6YYI5L9pCfOacjizRGt.jpg", | |
| description: "Walter White, un professeur de chimie surmené et sous-payé, est diagnostiqué d'un cancer du poumon en phase terminale. Pour assurer l'avenir financier de sa famille, il se lance dans la fabrication et la vente de méthamphétamine." | |
| }, | |
| { | |
| id: 106, | |
| title: "Game of Thrones", | |
| year: 2011, | |
| rating: "8.4", | |
| seasons: 8, | |
| category: "Fantastique", | |
| language: "Anglais", | |
| poster: "https://image.tmdb.org/t/p/w500/7WUHnWGx5OO145IRxPDUkQSh4C7.jpg", | |
| backdrop: "https://image.tmdb.org/t/p/original/7WUHnWGx5OO145IRxPDUkQSh4C7.jpg", | |
| description: "Neuf familles nobles se battent pour le contrôle des terres de Westeros, tandis qu'un ancien ennemi revient après avoir été endormi pendant des milliers d'années." | |
| } | |
| ], | |
| getRandomFilms: function(count) { | |
| const shuffled = [...this.popularMovies].sort(() => 0.5 - Math.random()); | |
| return shuffled.slice(0, count); | |
| }, | |
| getTrendingFilms: function(count) { | |
| return [...this.popularMovies] | |
| .sort((a, b) => b.rating - a.rating) | |
| .slice(0, count); | |
| }, | |
| getRecommendedFilms: function(count) { | |
| return [...this.popularMovies] | |
| .sort((a, b) => b.year - a.year) | |
| .slice(0, count); | |
| }, | |
| getFilmsByCategory: function(category, count) { | |
| return [...this.popularMovies] | |
| .filter(film => film.category.toLowerCase().includes(category.toLowerCase())) | |
| .slice(0, count); | |
| }, | |
| getAllFilms: function() { | |
| return [...this.popularMovies]; | |
| }, | |
| getAllSeries: function() { | |
| return [...this.popularSeries]; | |
| } | |
| }; | |
| // DOM Elements | |
| const sections = { | |
| home: document.getElementById('home'), | |
| movies: document.getElementById('movies'), | |
| series: document.getElementById('series'), | |
| new: document.getElementById('new'), | |
| categories: document.getElementById('categories') | |
| }; | |
| const filmContainers = { | |
| newReleases: document.getElementById('newReleases'), | |
| trending: document.getElementById('trending'), | |
| recommended: document.getElementById('recommended'), | |
| allMovies: document.getElementById('allMovies'), | |
| allSeries: document.getElementById('allSeries') | |
| }; | |
| const filmModal = document.getElementById('filmModal'); | |
| const modalContent = document.getElementById('modalContent'); | |
| const closeModal = document.getElementById('closeModal'); | |
| const loginBtn = document.getElementById('loginBtn'); | |
| const loginModal = document.getElementById('loginModal'); | |
| const closeLoginModal = document.getElementById('closeLoginModal'); | |
| const loginForm = document.getElementById('loginForm'); | |
| const searchBtn = document.getElementById('searchBtn'); | |
| const searchModal = document.getElementById('searchModal'); | |
| const closeSearchModal = document.getElementById('closeSearchModal'); | |
| const searchResults = document.getElementById('searchResults'); | |
| // Navigation functions | |
| function showSection(sectionId) { | |
| // Hide all sections | |
| Object.values(sections).forEach(section => { | |
| section.classList.remove('active'); | |
| }); | |
| // Show the selected section | |
| if (sections[sectionId]) { | |
| sections[sectionId].classList.add('active'); | |
| // Scroll to top | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| // Load specific content if needed | |
| if (sectionId === 'movies') { | |
| loadAllMovies(); | |
| } else if (sectionId === 'series') { | |
| loadAllSeries(); | |
| } else if (sectionId === 'new') { | |
| loadNewReleases(); | |
| } else if (sectionId === 'categories') { | |
| // Already loaded | |
| } | |
| } | |
| } | |
| // Load films | |
| function loadFilms() { | |
| // New releases | |
| loadNewReleases(); | |
| // Trending | |
| loadTrending(); | |
| // Recommended | |
| loadRecommended(); | |
| } | |
| function loadNewReleases() { | |
| const newReleases = filmDatabase.getRandomFilms(12); | |
| renderFilms(newReleases, filmContainers.newReleases); | |
| } | |
| function loadTrending() { | |
| const trending = filmDatabase.getTrendingFilms(12); | |
| renderFilms(trending, filmContainers.trending); | |
| } | |
| function loadRecommended() { | |
| const recommended = filmDatabase.getRecommendedFilms(12); | |
| renderFilms(recommended, filmContainers.recommended); | |
| } | |
| function loadAllMovies() { | |
| const allMovies = filmDatabase.getAllFilms(); | |
| renderFilms(allMovies, filmContainers.allMovies); | |
| } | |
| function loadAllSeries() { | |
| const allSeries = filmDatabase.getAllSeries(); | |
| renderSeries(allSeries, filmContainers.allSeries); | |
| } | |
| function loadCategory(category) { | |
| const films = filmDatabase.getFilmsByCategory(category, 12); | |
| const container = document.createElement('div'); | |
| container.id = `category-${category}`; | |
| container.className = 'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4'; | |
| renderFilms(films, container); | |
| // Show in categories section | |
| sections.categories.innerHTML = ` | |
| <div class="flex items-center mb-6"> | |
| <button onclick="showSection('categories')" class="mr-4 text-blue-400 hover:text-blue-300"> | |
| <i class="fas fa-arrow-left"></i> | |
| </button> | |
| <h2 class="text-2xl font-bold">Catégorie: ${category.charAt(0).toUpperCase() + category.slice(1)}</h2> | |
| </div> | |
| `; | |
| sections.categories.appendChild(container); | |
| } | |
| // Render films | |
| function renderFilms(films, container) { | |
| container.innerHTML = ''; | |
| films.forEach(film => { | |
| const filmElement = document.createElement('div'); | |
| filmElement.className = 'film-card'; | |
| filmElement.innerHTML = ` | |
| <div class="cursor-pointer" onclick="openFilmModal(${film.id})"> | |
| <div class="relative aspect-[2/3] rounded-lg overflow-hidden mb-2"> | |
| <div class="blur-load absolute inset-0 bg-gray-800 flex items-center justify-center"> | |
| <img src="${film.poster}" alt="${film.title}" class="absolute inset-0 w-full h-full object-cover" loading="lazy"> | |
| </div> | |
| <div class="absolute top-2 left-2 bg-blue-600 text-white text-xs px-2 py-1 rounded">HD</div> | |
| <div class="absolute bottom-2 right-2 bg-yellow-500 text-black text-xs px-2 py-1 rounded font-bold"> | |
| ${film.rating} <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <h3 class="font-medium truncate">${film.title}</h3> | |
| <div class="text-sm text-gray-400"> | |
| <span>${film.year}</span> | |
| <span>•</span> | |
| <span>${film.category}</span> | |
| </div> | |
| </div> | |
| `; | |
| container.appendChild(filmElement); | |
| // Lazy load images | |
| const img = filmElement.querySelector('img'); | |
| img.onload = function() { | |
| filmElement.querySelector('.blur-load').classList.add('loaded'); | |
| }; | |
| }); | |
| } | |
| // Render series | |
| function renderSeries(series, container) { | |
| container.innerHTML = ''; | |
| series.forEach(serie => { | |
| const serieElement = document.createElement('div'); | |
| serieElement.className = 'film-card'; | |
| serieElement.innerHTML = ` | |
| <div class="cursor-pointer" onclick="openFilmModal(${serie.id}, true)"> | |
| <div class="relative aspect-[2/3] rounded-lg overflow-hidden mb-2"> | |
| <div class="blur-load absolute inset-0 bg-gray-800 flex items-center justify-center"> | |
| <img src="${serie.poster}" alt="${serie.title}" class="absolute inset-0 w-full h-full object-cover" loading="lazy"> | |
| </div> | |
| <div class="absolute top-2 left-2 bg-blue-600 text-white text-xs px-2 py-1 rounded">HD</div> | |
| <div class="absolute bottom-2 right-2 bg-yellow-500 text-black text-xs px-2 py-1 rounded font-bold"> | |
| ${serie.rating} <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <h3 class="font-medium truncate">${serie.title}</h3> | |
| <div class="text-sm text-gray-400"> | |
| <span>${serie.year}</span> | |
| <span>•</span> | |
| <span>${serie.seasons} saison${serie.seasons > 1 ? 's' : ''}</span> | |
| </div> | |
| </div> | |
| `; | |
| container.appendChild(serieElement); | |
| // Lazy load images | |
| const img = serieElement.querySelector('img'); | |
| img.onload = function() { | |
| serieElement.querySelector('.blur-load').classList.add('loaded'); | |
| }; | |
| }); | |
| } | |
| // Open film modal | |
| window.openFilmModal = function(filmId, isSeries = false) { | |
| // Find film/series in database | |
| let item; | |
| if (isSeries) { | |
| item = filmDatabase.popularSeries.find(serie => serie.id === filmId); | |
| } else { | |
| item = filmDatabase.popularMovies.find(movie => movie.id === filmId); | |
| } | |
| if (!item) return; | |
| modalContent.innerHTML = ` | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/3"> | |
| <div class="relative aspect-[2/3]"> | |
| <img src="${item.poster}" alt="${item.title}" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 p-6"> | |
| <h2 class="text-3xl font-bold mb-2">${item.title} <span class="text-gray-400">(${item.year})</span></h2> | |
| <div class="flex flex-wrap items-center gap-2 mb-4"> | |
| <span class="bg-blue-600 text-white px-2 py-1 rounded text-sm">HD</span> | |
| <span class="text-yellow-500 font-bold">${item.rating} <i class="fas fa-star"></i></span> | |
| ${isSeries ? | |
| `<span>${item.seasons} saison${item.seasons > 1 ? 's' : ''}</span>` : | |
| `<span>${item.duration}</span>` | |
| } | |
| <span>•</span> | |
| <span>${item.category}</span> | |
| <span>•</span> | |
| <span>${item.language}</span> | |
| </div> | |
| <p class="text-gray-300 mb-6">${item.description}</p> | |
| <div class="flex space-x-4"> | |
| <button class="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-full font-bold flex items-center"> | |
| <i class="fas fa-play mr-2"></i> Regarder | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 px-6 py-3 rounded-full font-bold flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Ma liste | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| filmModal.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| }; | |
| // Close modal | |
| closeModal.addEventListener('click', function() { | |
| filmModal.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| }); | |
| // Close modal when clicking outside | |
| filmModal.addEventListener('click', function(e) { | |
| if (e.target === filmModal) { | |
| filmModal.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| } | |
| }); | |
| // Login modal | |
| loginBtn.addEventListener('click', function() { | |
| loginModal.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| }); | |
| closeLoginModal.addEventListener('click', function() { | |
| loginModal.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| }); | |
| loginForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| alert('Connexion en cours... (simulation)'); | |
| loginModal.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| }); | |
| // Search modal | |
| searchBtn.addEventListener('click', function() { | |
| searchModal.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| }); | |
| closeSearchModal.addEventListener('click', function() { | |
| searchModal.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| }); | |
| // Navigation links | |
| document.querySelectorAll('.nav-link').forEach(link => { | |
| link.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const section = this.getAttribute('data-section'); | |
| showSection(section); | |
| }); | |
| }); | |
| // Category links | |
| document.querySelectorAll('.category-link').forEach(link => { | |
| link.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const category = this.getAttribute('data-category'); | |
| loadCategory(category); | |
| }); | |
| }); | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Show home section by default | |
| showSection('home'); | |
| // Load all films | |
| loadFilms(); | |
| // Simulate automatic updates every 30 seconds | |
| setInterval(() => { | |
| // Rotate some films | |
| const containers = [filmContainers.newReleases, filmContainers.trending, filmContainers.recommended]; | |
| containers.forEach(container => { | |
| const films = Array.from(container.children); | |
| if (films.length > 6) { | |
| // Remove first 2 and add 2 new ones | |
| films[0].remove(); | |
| films[1].remove(); | |
| const newFilms = filmDatabase.getRandomFilms(2); | |
| renderFilms(newFilms, container); | |
| } | |
| }); | |
| }, 30000); | |
| }); | |
| // Display total films count in console | |
| console.log(`%cCinéPilot - Base de données de ${filmDatabase.totalFilms.toLocaleString()} films`, | |
| 'color: #3b82f6; font-size: 16px; font-weight: bold;'); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/cin-pilote" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |