Spaces:

docto41
/

plateformecin-ma

Running

App Files Files Community

docto41 commited on May 17, 2025

Commit

73c7f84

verified ·

1 Parent(s): e35d6e6

Add 2 files

Browse files

Files changed (2) hide show

index.html +253 -29
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -70,6 +70,21 @@
             width: 90%;
             max-width: 900px;
         }
     </style>
 </head>
 <body>
@@ -129,11 +144,16 @@
     <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
             </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>
     </section>
@@ -209,6 +229,19 @@
         </div>
     </div>
     <script>
         // Données des films (simulées)
         const movies = [
@@ -221,7 +254,8 @@
                 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
             },
             {
                 id: 2,
@@ -232,7 +266,8 @@
                 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
             },
             {
                 id: 3,
@@ -243,7 +278,8 @@
                 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
             },
             {
                 id: 4,
@@ -254,7 +290,8 @@
                 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
             },
             {
                 id: 5,
@@ -265,7 +302,8 @@
                 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
             },
             {
                 id: 6,
@@ -276,7 +314,8 @@
                 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
             },
             {
                 id: 7,
@@ -287,7 +326,8 @@
                 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
             },
             {
                 id: 8,
@@ -298,12 +338,89 @@
                 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
             }
         ];
         // Initialisation du site
         document.addEventListener('DOMContentLoaded', function() {
             // Remplir le carrousel hero
             const heroCarousel = document.getElementById('heroCarousel');
             const featuredMovies = movies.filter(movie => movie.featured);
@@ -323,7 +440,7 @@
                             </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="showMovieDetails(${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})">
@@ -343,9 +460,9 @@
                 trendingMovies.appendChild(movieCard);
             });
-            // Remplir les nouveautés
             const newReleases = document.getElementById('newReleases');
-            movies.slice().reverse().slice(0, 8).forEach(movie => {
                 const movieCard = createMovieCard(movie);
                 newReleases.appendChild(movieCard);
             });
@@ -357,9 +474,45 @@
             document.querySelectorAll('.genre-tag').forEach(button => {
                 button.addEventListener('click', function() {
                     const genre = this.getAttribute('data-genre');
-                    filterMoviesByGenre(genre);
                 });
             });
         });
         // Créer une carte de film
@@ -367,7 +520,7 @@
             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" onclick="showMovieDetails(${movie.id})">
                     <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>
@@ -380,33 +533,49 @@
                             <i class="fas fa-star text-yellow-400 mr-1"></i>
                             <span class="text-white">${movie.rating}/5</span>
                         </div>
                     </div>
                 </div>
             `;
             return card;
         }
         // Filtrer les films par genre
-        function filterMoviesByGenre(genre) {
             const moviesByGenre = document.getElementById('moviesByGenre');
-            moviesByGenre.innerHTML = '';
-            const filteredMovies = movies.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;
-            }
-            filteredMovies.forEach(movie => {
-                const movieCard = createMovieCard(movie);
-                moviesByGenre.appendChild(movieCard);
-            });
         }
         // Afficher les détails du film dans un modal
         function showMovieDetails(movieId) {
-            const movie = movies.find(m => m.id === movieId);
             if (!movie) return;
             const modal = document.getElementById('movieModal');
@@ -429,7 +598,7 @@
                         </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">
                                 <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">
@@ -444,6 +613,27 @@
             document.body.style.overflow = 'hidden';
         }
         // Fermer le modal
         function closeModal() {
             document.getElementById('movieModal').style.display = 'none';
@@ -484,12 +674,46 @@
             });
         }
         // Fermer le modal si on clique en dehors
         window.onclick = function(event) {
             const modal = document.getElementById('movieModal');
             if (event.target == modal) {
                 closeModal();
             }
         }
     </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>

             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>
     <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>
         </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">&times;</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 = [
                 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,
                 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,
                 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,
                 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,
                 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,
                 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,
                 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,
                 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);
                             </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})">
                 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);
             });
             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
             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>
                             <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');
                         </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">
             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';
             });
         }
+        // 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>

prompts.txt CHANGED Viewed

@@ -7,4 +7,5 @@ je veux un hacker de code d'achat et  de envao et codecanyon  je veux   avoir le
 je veux un hacker de code d'achat et  de envao et codecanyon  je veux   avoir les code d'achat  apartir de l'image du produit , et a partir du non du produit etc..
 je veux un crerateur de site a partir d image et de titre du site uniquement
 aucun bouton fonction
-https://plateformecinema.com/ : creer moi se site en pilotage automatique

 je veux un hacker de code d'achat et  de envao et codecanyon  je veux   avoir les code d'achat  apartir de l'image du produit , et a partir du non du produit etc..
 je veux un crerateur de site a partir d image et de titre du site uniquement
 aucun bouton fonction
+https://plateformecinema.com/ : creer moi se site en pilotage automatique
+ajouter 25654 film nouveauté en automatique et lecture des film dans une nouvel fenetre