Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PlateformeCinéma - Votre cinéma en ligne</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=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #0f172a; | |
| color: #f8fafc; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); | |
| } | |
| .movie-card { | |
| transition: all 0.3s ease; | |
| transform-origin: center; | |
| } | |
| .movie-card:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3); | |
| } | |
| .autoplay-carousel { | |
| scroll-behavior: smooth; | |
| scroll-snap-type: x mandatory; | |
| } | |
| .autoplay-carousel::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .carousel-slide { | |
| scroll-snap-align: start; | |
| } | |
| .genre-tag { | |
| transition: all 0.2s ease; | |
| } | |
| .genre-tag:hover { | |
| background-color: #f43f5e; | |
| } | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| z-index: 100; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0,0,0,0.9); | |
| overflow-y: auto; | |
| } | |
| .modal-content { | |
| background-color: #1e293b; | |
| margin: 2% auto; | |
| padding: 20px; | |
| border-radius: 10px; | |
| width: 90%; | |
| max-width: 900px; | |
| } | |
| .loading-spinner { | |
| border: 4px solid rgba(255, 255, 255, 0.3); | |
| border-radius: 50%; | |
| border-top: 4px solid #f43f5e; | |
| width: 40px; | |
| height: 40px; | |
| animation: spin 1s linear infinite; | |
| margin: 20px auto; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Barre de navigation --> | |
| <nav class="bg-black bg-opacity-80 backdrop-blur-sm fixed w-full z-50"> | |
| <div class="container mx-auto px-6 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-film text-red-500 text-2xl"></i> | |
| <span class="text-xl font-bold">Plateforme<span class="text-red-500">Cinéma</span></span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="hover:text-red-400">Accueil</a> | |
| <a href="#" class="hover:text-red-400">Films</a> | |
| <a href="#" class="hover:text-red-400">Séries</a> | |
| <a href="#" class="hover:text-red-400">Nouveautés</a> | |
| <a href="#" class="hover:text-red-400">Ma liste</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Rechercher..." class="bg-gray-800 rounded-full py-1 px-4 pl-10 text-sm focus:outline-none focus:ring-2 focus:ring-red-500"> | |
| <i class="fas fa-search absolute left-3 top-2 text-gray-400"></i> | |
| </div> | |
| <button class="bg-red-600 hover:bg-red-700 text-white px-4 py-1 rounded-full text-sm font-medium"> | |
| Connexion | |
| </button> | |
| <button class="md:hidden"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section avec carrousel auto-défilant --> | |
| <section class="hero-gradient pt-24 pb-16"> | |
| <div class="container mx-auto px-6"> | |
| <div class="autoplay-carousel flex overflow-x-auto space-x-4 py-4 scroll-snap-type-x mandatory" id="heroCarousel"> | |
| <!-- Les slides seront ajoutées dynamiquement par JavaScript --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Section Films tendances --> | |
| <section class="py-12"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i class="fas fa-fire text-red-500 mr-3"></i> Films tendances | |
| </h2> | |
| <div class="autoplay-carousel flex overflow-x-auto space-x-6 py-4" id="trendingMovies"> | |
| <!-- Les films seront ajoutés dynamiquement par JavaScript --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Section Nouveautés --> | |
| <section class="py-12 bg-gray-900 bg-opacity-50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i class="fas fa-star text-yellow-400 mr-3"></i> Nouveautés (25,654 films) | |
| </h2> | |
| <div class="autoplay-carousel flex overflow-x-auto space-x-6 py-4" id="newReleases"> | |
| <!-- Les nouveautés seront ajoutées dynamiquement par JavaScript --> | |
| </div> | |
| <div class="flex justify-center mt-6"> | |
| <button id="loadMoreNew" class="bg-gray-800 hover:bg-gray-700 text-white px-6 py-2 rounded-full font-medium"> | |
| Charger plus de nouveautés | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Section Catégories --> | |
| <section class="py-12"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i class="fas fa-tags text-blue-400 mr-3"></i> Par catégories | |
| </h2> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4"> | |
| <button class="genre-tag bg-gray-800 hover:bg-gray-700 rounded-full px-4 py-2 text-sm font-medium" data-genre="action">Action</button> | |
| <button class="genre-tag bg-gray-800 hover:bg-gray-700 rounded-full px-4 py-2 text-sm font-medium" data-genre="comedy">Comédie</button> | |
| <button class="genre-tag bg-gray-800 hover:bg-gray-700 rounded-full px-4 py-2 text-sm font-medium" data-genre="drama">Drame</button> | |
| <button class="genre-tag bg-gray-800 hover:bg-gray-700 rounded-full px-4 py-2 text-sm font-medium" data-genre="horror">Horreur</button> | |
| <button class="genre-tag bg-gray-800 hover:bg-gray-700 rounded-full px-4 py-2 text-sm font-medium" data-genre="sci-fi">Sci-Fi</button> | |
| <button class="genre-tag bg-gray-800 hover:bg-gray-700 rounded-full px-4 py-2 text-sm font-medium" data-genre="thriller">Thriller</button> | |
| </div> | |
| <div class="mt-8 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="moviesByGenre"> | |
| <!-- Les films par catégorie seront ajoutés dynamiquement --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-black bg-opacity-90 py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">PlateformeCinéma</h3> | |
| <p class="text-gray-400">Votre destination ultime pour le cinéma en ligne. Des milliers de films et séries à portée de clic.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Navigation</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Accueil</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Films</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Séries</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Nouveautés</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Légal</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Conditions d'utilisation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Politique de confidentialité</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Mentions légales</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Nous suivre</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500"> | |
| <p>© 2023 PlateformeCinéma. Tous droits réservés.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Modal pour les détails du film --> | |
| <div id="movieModal" class="modal"> | |
| <div class="modal-content"> | |
| <button onclick="closeModal()" class="float-right text-gray-400 hover:text-white text-2xl">×</button> | |
| <div id="modalContent" class="mt-8"> | |
| <!-- Le contenu du modal sera injecté ici --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Fenêtre de lecture --> | |
| <div id="playerWindow" class="fixed inset-0 z-50 bg-black hidden flex-col"> | |
| <div class="flex justify-between items-center p-4 bg-black bg-opacity-90"> | |
| <h3 id="playerTitle" class="text-xl font-bold"></h3> | |
| <button onclick="closePlayer()" class="text-white text-2xl">×</button> | |
| </div> | |
| <div class="flex-grow flex items-center justify-center"> | |
| <video id="moviePlayer" controls class="w-full h-full max-w-6xl"> | |
| Votre navigateur ne supporte pas la lecture de vidéos. | |
| </video> | |
| </div> | |
| </div> | |
| <script> | |
| // Données des films (simulées) | |
| const movies = [ | |
| { | |
| id: 1, | |
| title: "Dune", | |
| year: 2021, | |
| genre: ["sci-fi", "adventure"], | |
| rating: 4.5, | |
| duration: "2h35m", | |
| description: "Paul Atreides se rend sur la planète désertique Arrakis, connue sous le nom de Dune, où sa famille a pris le contrôle de la production d'une épice précieuse.", | |
| image: "https://m.media-amazon.com/images/M/MV5BN2FjNmEyNWMtYzM0ZS00NjIyLTg5YzYtYThlMGVjNzE1OGViXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_.jpg", | |
| featured: true, | |
| videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" | |
| }, | |
| { | |
| id: 2, | |
| title: "The Batman", | |
| year: 2022, | |
| genre: ["action", "thriller"], | |
| rating: 4.3, | |
| duration: "2h56m", | |
| description: "Batman enquête sur la corruption à Gotham City et affronte le Riddler, un tueur en série qui cible l'élite de Gotham.", | |
| image: "https://m.media-amazon.com/images/M/MV5BMDdmMTBiNTYtMDIzNi00NGVlLWIzMDYtZTk3MTQ3NGQxZGEwXkEyXkFqcGdeQXVyMzMwOTU5MDk@._V1_.jpg", | |
| featured: true, | |
| videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" | |
| }, | |
| { | |
| id: 3, | |
| title: "Everything Everywhere All at Once", | |
| year: 2022, | |
| genre: ["sci-fi", "comedy", "adventure"], | |
| rating: 4.7, | |
| duration: "2h19m", | |
| description: "Une femme chinoise vieillissante est emportée dans une aventure folle où seule elle peut sauver le monde en explorant d'autres univers.", | |
| image: "https://m.media-amazon.com/images/M/MV5BYTdiOTIyZTQtNmQ1OS00NjZlLWIyMTgtYzk5Y2M3ZDVmOTkxXkEyXkFqcGdeQXVyMTAzMDg4NzU0._V1_.jpg", | |
| featured: true, | |
| videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" | |
| }, | |
| { | |
| id: 4, | |
| title: "Top Gun: Maverick", | |
| year: 2022, | |
| genre: ["action", "drama"], | |
| rating: 4.6, | |
| duration: "2h11m", | |
| description: "Après plus de trente ans de service, Pete 'Maverick' Mitchell est de retour pour former une nouvelle génération de pilotes.", | |
| image: "https://m.media-amazon.com/images/M/MV5BZWYzOGEwNTgtNWU3NS00ZTQ0LWJkODUtM2FkNzE0ZGViMGY4XkEyXkFqcGdeQXVyMjkwOTAyMDU@._V1_.jpg", | |
| featured: true, | |
| videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" | |
| }, | |
| { | |
| id: 5, | |
| title: "Nope", | |
| year: 2022, | |
| genre: ["horror", "sci-fi"], | |
| rating: 4.0, | |
| duration: "2h10m", | |
| description: "Les habitants d'une ville isolée de l'intérieur de la Californie sont témoins d'une découverte étrange et terrifiante.", | |
| image: "https://m.media-amazon.com/images/M/MV5BZjA2NmY0OTEtZTY1OC00NmM1LWE0NzMtZDc1MWY0OTk0ZWEyXkEyXkFqcGdeQXVyMTA3MDk2NDg2._V1_.jpg", | |
| featured: false, | |
| videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" | |
| }, | |
| { | |
| id: 6, | |
| title: "The Northman", | |
| year: 2022, | |
| genre: ["action", "adventure", "drama"], | |
| rating: 4.1, | |
| duration: "2h17m", | |
| description: "Un prince viking part en quête de vengeance après l'assassinat de son père.", | |
| image: "https://m.media-amazon.com/images/M/MV5BMzVlMmY2NTctODgwOC00NDMzLWEzMWYtM2RiYmIyNTNhMTI0XkEyXkFqcGdeQXVyNTAzNzgwNTg@._V1_.jpg", | |
| featured: false, | |
| videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" | |
| }, | |
| { | |
| id: 7, | |
| title: "Doctor Strange in the Multiverse of Madness", | |
| year: 2022, | |
| genre: ["action", "sci-fi", "fantasy"], | |
| rating: 3.9, | |
| duration: "2h06m", | |
| description: "Le Docteur Strange voyage dans le multivers avec l'aide de America Chavez pour affronter une nouvelle menace mystique.", | |
| image: "https://m.media-amazon.com/images/M/MV5BNWM0ZGJlMzMtZmYwMi00NzI3LTgzMzMtNjMzNjliNDRmZmFlXkEyXkFqcGdeQXVyMTM1MTE1NDMx._V1_.jpg", | |
| featured: false, | |
| videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" | |
| }, | |
| { | |
| id: 8, | |
| title: "The Unbearable Weight of Massive Talent", | |
| year: 2022, | |
| genre: ["comedy", "action"], | |
| rating: 4.0, | |
| duration: "1h47m", | |
| description: "Nicolas Cage joue son propre rôle alors qu'il accepte un million de dollars pour assister à l'anniversaire d'un fan.", | |
| image: "https://m.media-amazon.com/images/M/MV5BNDMxODI5NDMtNTg0NC00ZjhlLTk3NjAtYzFmODllY2M4ZGRjXkEyXkFqcGdeQXVyMTA2MDU0NjM5._V1_.jpg", | |
| featured: false, | |
| videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" | |
| } | |
| ]; | |
| // Générer 25,654 films supplémentaires | |
| function generateMassiveMovieDatabase() { | |
| const genres = ["action", "comedy", "drama", "horror", "sci-fi", "thriller", "romance", "fantasy", "animation", "documentary"]; | |
| const years = Array.from({length: 30}, (_, i) => 1993 + i); | |
| const ratings = [3.0, 3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7, 3.8, 3.9, 4.0, 4.1, 4.2, 4.3, 4.4, 4.5]; | |
| const durations = ["1h30m", "1h45m", "2h00m", "2h15m", "2h30m"]; | |
| const baseTitles = [ | |
| "Le Secret de", "L'Énigme du", "La Malédiction des", "Les Aventures de", "La Revanche des", | |
| "Le Retour de", "La Légende du", "Le Mystère de", "La Prophétie des", "Les Guerriers de", | |
| "Le Trésor perdu de", "La Colère de", "L'Héritage des", "Le Pouvoir des", "La Quête du" | |
| ]; | |
| const baseNames = [ | |
| "l'Ombre", "la Lumière", "la Nuit", "l'Éternité", "la Destinée", "le Passé", "l'Avenir", | |
| "les Étoiles", "la Mer", "la Montagne", "la Forêt", "le Désert", "le Temps", "l'Espace", | |
| "le Dragon", "le Phénix", "le Sorcier", "le Guerrier", "le Roi", "la Reine", "le Chevalier" | |
| ]; | |
| const massiveMovies = []; | |
| const totalMovies = 25654; | |
| for (let i = 0; i < totalMovies; i++) { | |
| // Générer un titre aléatoire | |
| const titlePart1 = baseTitles[Math.floor(Math.random() * baseTitles.length)]; | |
| const titlePart2 = baseNames[Math.floor(Math.random() * baseNames.length)]; | |
| const title = `${titlePart1} ${titlePart2}`; | |
| // Générer des données aléatoires | |
| const year = years[Math.floor(Math.random() * years.length)]; | |
| const rating = ratings[Math.floor(Math.random() * ratings.length)]; | |
| const duration = durations[Math.floor(Math.random() * durations.length)]; | |
| // Sélectionner 1-3 genres aléatoires | |
| const movieGenres = []; | |
| const numGenres = Math.floor(Math.random() * 3) + 1; | |
| for (let j = 0; j < numGenres; j++) { | |
| const randomGenre = genres[Math.floor(Math.random() * genres.length)]; | |
| if (!movieGenres.includes(randomGenre)) { | |
| movieGenres.push(randomGenre); | |
| } | |
| } | |
| // Description générée aléatoirement | |
| const descriptions = [ | |
| `Une histoire captivante sur ${titlePart2.toLowerCase()} qui changera à jamais votre vision du monde.`, | |
| `Dans ce film épique, découvrez les secrets cachés de ${titlePart2.toLowerCase()} à travers une aventure inoubliable.`, | |
| `Une quête périlleuse attend ceux qui osent affronter ${titlePart2.toLowerCase()} dans ce chef-d'œuvre cinématographique.`, | |
| `Plongez dans un univers fantastique où ${titlePart2.toLowerCase()} détient le pouvoir de changer le destin.` | |
| ]; | |
| const description = descriptions[Math.floor(Math.random() * descriptions.length)]; | |
| // Utiliser une image aléatoire parmi les 8 de base pour la démo | |
| const imageIndex = Math.floor(Math.random() * 8); | |
| const image = movies[imageIndex].image; | |
| massiveMovies.push({ | |
| id: 9 + i, // Commencer après les 8 films initiaux | |
| title, | |
| year, | |
| genre: movieGenres, | |
| rating, | |
| duration, | |
| description, | |
| image, | |
| featured: false, | |
| videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" | |
| }); | |
| } | |
| return massiveMovies; | |
| } | |
| // Initialisation du site | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Générer la base de données massive | |
| const allMovies = [...movies, ...generateMassiveMovieDatabase()]; | |
| // Remplir le carrousel hero | |
| const heroCarousel = document.getElementById('heroCarousel'); | |
| const featuredMovies = movies.filter(movie => movie.featured); | |
| featuredMovies.forEach(movie => { | |
| const slide = document.createElement('div'); | |
| slide.className = 'carousel-slide flex-shrink-0 w-full md:w-2/3 lg:w-1/2 px-2'; | |
| slide.innerHTML = ` | |
| <div class="relative rounded-xl overflow-hidden h-64 md:h-96"> | |
| <img src="${movie.image}" alt="${movie.title}" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent flex flex-col justify-end p-6"> | |
| <h3 class="text-2xl md:text-4xl font-bold">${movie.title}</h3> | |
| <div class="flex items-center mt-2 space-x-4"> | |
| <span class="bg-red-500 text-white px-2 py-1 rounded text-xs">Nouveau</span> | |
| <span class="text-gray-300">${movie.year}</span> | |
| <span class="text-gray-300">${movie.duration}</span> | |
| </div> | |
| <p class="text-gray-300 mt-2 line-clamp-2">${movie.description}</p> | |
| <div class="flex space-x-4 mt-4"> | |
| <button class="bg-red-600 hover:bg-red-700 text-white px-6 py-2 rounded-full font-medium" onclick="playMovie(${movie.id})"> | |
| <i class="fas fa-play mr-2"></i> Regarder | |
| </button> | |
| <button class="bg-gray-800 bg-opacity-60 hover:bg-opacity-100 text-white px-4 py-2 rounded-full" onclick="showMovieDetails(${movie.id})"> | |
| <i class="fas fa-info-circle"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| heroCarousel.appendChild(slide); | |
| }); | |
| // Remplir les films tendances | |
| const trendingMovies = document.getElementById('trendingMovies'); | |
| movies.slice(0, 8).forEach(movie => { | |
| const movieCard = createMovieCard(movie); | |
| trendingMovies.appendChild(movieCard); | |
| }); | |
| // Remplir les nouveautés (première page) | |
| const newReleases = document.getElementById('newReleases'); | |
| allMovies.slice(0, 20).forEach(movie => { | |
| const movieCard = createMovieCard(movie); | |
| newReleases.appendChild(movieCard); | |
| }); | |
| // Configurer le défilement automatique | |
| setupAutoplay(); | |
| // Gestion des clics sur les genres | |
| document.querySelectorAll('.genre-tag').forEach(button => { | |
| button.addEventListener('click', function() { | |
| const genre = this.getAttribute('data-genre'); | |
| filterMoviesByGenre(genre, allMovies); | |
| }); | |
| }); | |
| // Bouton "Charger plus" pour les nouveautés | |
| let currentPage = 1; | |
| const moviesPerPage = 20; | |
| document.getElementById('loadMoreNew').addEventListener('click', function() { | |
| this.disabled = true; | |
| this.innerHTML = '<div class="loading-spinner"></div>'; | |
| // Simuler un chargement asynchrone | |
| setTimeout(() => { | |
| const startIndex = currentPage * moviesPerPage; | |
| const endIndex = startIndex + moviesPerPage; | |
| const nextMovies = allMovies.slice(startIndex, endIndex); | |
| if (nextMovies.length > 0) { | |
| const newReleases = document.getElementById('newReleases'); | |
| nextMovies.forEach(movie => { | |
| const movieCard = createMovieCard(movie); | |
| newReleases.appendChild(movieCard); | |
| }); | |
| currentPage++; | |
| this.disabled = false; | |
| this.textContent = 'Charger plus de nouveautés'; | |
| // Faire défiler doucement vers le bas pour voir les nouveaux films | |
| window.scrollBy({ | |
| top: 300, | |
| behavior: 'smooth' | |
| }); | |
| } else { | |
| this.textContent = 'Tous les films chargés'; | |
| } | |
| }, 1000); | |
| }); | |
| }); | |
| // Créer une carte de film | |
| function createMovieCard(movie) { | |
| const card = document.createElement('div'); | |
| card.className = 'movie-card flex-shrink-0 w-40 sm:w-48 md:w-56 cursor-pointer'; | |
| card.innerHTML = ` | |
| <div class="relative rounded-lg overflow-hidden"> | |
| <img src="${movie.image}" alt="${movie.title}" class="w-full h-60 sm:h-72 object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-0 hover:opacity-100 transition-opacity flex flex-col justify-end p-4"> | |
| <h3 class="text-white font-bold">${movie.title}</h3> | |
| <div class="flex items-center mt-1 text-sm text-gray-300"> | |
| <span>${movie.year}</span> | |
| <span class="mx-2">•</span> | |
| <span>${movie.duration}</span> | |
| </div> | |
| <div class="flex items-center mt-2"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span class="text-white">${movie.rating}/5</span> | |
| </div> | |
| <div class="flex space-x-2 mt-4"> | |
| <button class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded-full text-sm" onclick="playMovie(${movie.id}); event.stopPropagation();"> | |
| <i class="fas fa-play mr-1"></i> | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 text-white px-3 py-1 rounded-full text-sm" onclick="showMovieDetails(${movie.id}); event.stopPropagation();"> | |
| <i class="fas fa-info-circle"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| card.addEventListener('click', () => showMovieDetails(movie.id)); | |
| return card; | |
| } | |
| // Filtrer les films par genre | |
| function filterMoviesByGenre(genre, allMovies) { | |
| const moviesByGenre = document.getElementById('moviesByGenre'); | |
| moviesByGenre.innerHTML = '<div class="col-span-full flex justify-center"><div class="loading-spinner"></div></div>'; | |
| // Simuler un chargement asynchrone | |
| setTimeout(() => { | |
| moviesByGenre.innerHTML = ''; | |
| const filteredMovies = allMovies.filter(movie => movie.genre.includes(genre)); | |
| if (filteredMovies.length === 0) { | |
| moviesByGenre.innerHTML = '<p class="col-span-full text-center text-gray-400">Aucun film trouvé dans cette catégorie.</p>'; | |
| return; | |
| } | |
| // Afficher les 20 premiers films pour la démo | |
| filteredMovies.slice(0, 20).forEach(movie => { | |
| const movieCard = createMovieCard(movie); | |
| moviesByGenre.appendChild(movieCard); | |
| }); | |
| }, 500); | |
| } | |
| // Afficher les détails du film dans un modal | |
| function showMovieDetails(movieId) { | |
| // Trouver le film dans la base de données massive | |
| const movie = findMovieById(movieId); | |
| if (!movie) return; | |
| const modal = document.getElementById('movieModal'); | |
| const modalContent = document.getElementById('modalContent'); | |
| modalContent.innerHTML = ` | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="md:col-span-1"> | |
| <img src="${movie.image}" alt="${movie.title}" class="w-full rounded-lg shadow-xl"> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <h2 class="text-3xl font-bold">${movie.title} <span class="text-gray-400">(${movie.year})</span></h2> | |
| <div class="flex flex-wrap items-center mt-4 space-x-4"> | |
| <div class="flex items-center bg-gray-800 px-3 py-1 rounded-full"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span>${movie.rating}/5</span> | |
| </div> | |
| <span class="text-gray-400">${movie.duration}</span> | |
| ${movie.genre.map(g => `<span class="bg-gray-700 px-3 py-1 rounded-full text-sm">${g}</span>`).join('')} | |
| </div> | |
| <p class="mt-6 text-gray-300">${movie.description}</p> | |
| <div class="mt-8 flex space-x-4"> | |
| <button class="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-full font-medium" onclick="playMovie(${movie.id})"> | |
| <i class="fas fa-play mr-2"></i> Regarder maintenant | |
| </button> | |
| <button class="border border-gray-600 hover:border-gray-400 text-white px-6 py-3 rounded-full"> | |
| <i class="fas fa-plus mr-2"></i> Ma liste | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| modal.style.display = 'block'; | |
| document.body.style.overflow = 'hidden'; | |
| } | |
| // Trouver un film par ID dans la base de données massive | |
| function findMovieById(id) { | |
| // Pour la démo, nous allons simplement retourner un des 8 films initiaux | |
| // ou générer un film fictif si l'ID est supérieur à 8 | |
| if (id <= 8) { | |
| return movies.find(m => m.id === id); | |
| } else { | |
| return { | |
| id, | |
| title: `Film Généré #${id}`, | |
| year: 2000 + (id % 23), | |
| genre: ["action", "sci-fi"], | |
| rating: 4.0, | |
| duration: "2h00m", | |
| description: "Ceci est un film généré automatiquement pour la démonstration de la plateforme.", | |
| image: movies[id % 8].image, | |
| videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" | |
| }; | |
| } | |
| } | |
| // Fermer le modal | |
| function closeModal() { | |
| document.getElementById('movieModal').style.display = 'none'; | |
| document.body.style.overflow = 'auto'; | |
| } | |
| // Configurer le défilement automatique | |
| function setupAutoplay() { | |
| const carousels = document.querySelectorAll('.autoplay-carousel'); | |
| carousels.forEach(carousel => { | |
| let scrollAmount = 0; | |
| const scrollStep = 1; | |
| const scrollDelay = 3000; // 3 secondes | |
| function autoScroll() { | |
| scrollAmount += scrollStep; | |
| if (scrollAmount >= carousel.scrollWidth - carousel.clientWidth) { | |
| scrollAmount = 0; | |
| carousel.scrollTo({ left: 0, behavior: 'instant' }); | |
| } else { | |
| carousel.scrollTo({ left: scrollAmount, behavior: 'smooth' }); | |
| } | |
| } | |
| let scrollInterval = setInterval(autoScroll, scrollDelay); | |
| // Arrêter le défilement quand la souris est sur le carrousel | |
| carousel.addEventListener('mouseenter', () => { | |
| clearInterval(scrollInterval); | |
| }); | |
| // Reprendre le défilement quand la souris quitte le carrousel | |
| carousel.addEventListener('mouseleave', () => { | |
| scrollInterval = setInterval(autoScroll, scrollDelay); | |
| }); | |
| }); | |
| } | |
| // Lire un film dans une nouvelle fenêtre/fenêtre modale | |
| function playMovie(movieId) { | |
| const movie = findMovieById(movieId); | |
| if (!movie) return; | |
| const playerWindow = document.getElementById('playerWindow'); | |
| const playerTitle = document.getElementById('playerTitle'); | |
| const moviePlayer = document.getElementById('moviePlayer'); | |
| playerTitle.textContent = `${movie.title} (${movie.year})`; | |
| moviePlayer.src = movie.videoUrl; | |
| moviePlayer.load(); | |
| playerWindow.classList.remove('hidden'); | |
| playerWindow.classList.add('flex'); | |
| document.body.style.overflow = 'hidden'; | |
| } | |
| // Fermer le lecteur | |
| function closePlayer() { | |
| const playerWindow = document.getElementById('playerWindow'); | |
| const moviePlayer = document.getElementById('moviePlayer'); | |
| moviePlayer.pause(); | |
| playerWindow.classList.add('hidden'); | |
| playerWindow.classList.remove('flex'); | |
| document.body.style.overflow = 'auto'; | |
| } | |
| // Fermer le modal si on clique en dehors | |
| window.onclick = function(event) { | |
| const modal = document.getElementById('movieModal'); | |
| if (event.target == modal) { | |
| closeModal(); | |
| } | |
| const playerWindow = document.getElementById('playerWindow'); | |
| if (event.target == playerWindow) { | |
| closePlayer(); | |
| } | |
| } | |
| </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/plateformecin-ma" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |