Spaces:

docto41
/

cin-futur

Running

App Files Files Community

docto41 commited on May 18

Commit

2c48bbd

verified ·

1 Parent(s): 6b0ee00

Add 2 files

Browse files

Files changed (2) hide show

index.html +165 -21
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -141,6 +141,21 @@
         .animate-fadeIn {
             animation: fadeIn 1s ease-out forwards;
         }
     </style>
 </head>
 <body class="scroll-smooth">
@@ -275,10 +290,10 @@
                 <!-- Les films seront générés par JavaScript -->
             </div>
-            <div class="text-center mt-12">
-                <button id="load-more" class="border-2 border-neon-purple text-white px-8 py-3 rounded-full text-lg font-bold hover:bg-neon-purple hover:bg-opacity-10 transition-all duration-300">
-                    Charger plus de films
-                </button>
             </div>
         </div>
     </section>
@@ -503,7 +518,7 @@
                     <ul class="space-y-2">
                         <li><a href="#" class="text-gray-400 hover:text-neon-blue transition-all duration-300">Conditions d'utilisation</a></li>
                         <li><a href="#" class="text-gray-400 hover:text-neon-pink transition-all duration-300">Politique de confidentialité</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-neon-purple transition-all duration-300">Cookies</a></li>
                         <li><a href="#" class="text-gray-400 hover:text-neon-green transitionall duration-300">Mentions légales</a></li>
                     </ul>
                 </div>
@@ -731,12 +746,118 @@
                 description: "Une histoire d'ambition et d'excès retraçant la montée et la chute de multiples personnages à Hollywood dans les années 1920.",
                 note: "7.4",
                 image: "https://image.tmdb.org/t/p/w500/wjOHjWCUE0YPPDiA9QHv4kXmq1Q.jpg"
             }
         ];
         // Générer les films dans la grille
         function genererFilmsGrid(films) {
-            filmsGrid.innerHTML = '';
             films.forEach(film => {
                 const filmElement = document.createElement('div');
                 filmElement.className = 'film-card group relative rounded-xl overflow-hidden transition-all duration-500 hover:z-10';
@@ -773,9 +894,30 @@
             });
         }
         // Générer les films dans le carrousel de nouveautés
         function genererNouveautesCarousel(films) {
-            nouveautesCarousel.innerHTML = '';
             films.slice(0, 10).forEach(film => {
                 const filmElement = document.createElement('div');
                 filmElement.className = 'flex-shrink-0 w-64 sm:w-72 md:w-80';
@@ -816,27 +958,19 @@
         const nextBtn = document.getElementById('next-btn');
         prevBtn.addEventListener('click', () => {
-            nouveautesCarousel.scrollBy({ left: -300, behavior: 'smooth' });
         });
         nextBtn.addEventListener('click', () => {
-            nouveautesCarousel.scrollBy({ left: 300, behavior: 'smooth' });
-        });
-        // Charger plus de films
-        let filmsCharges = 12;
-        loadMoreButton.addEventListener('click', () => {
-            const nouveauxFilms = filmsReels.slice(filmsCharges, filmsCharges + 8);
-            genererFilmsGrid([...document.querySelectorAll('#films-grid .film-card'), ...nouveauxFilms]);
-            filmsCharges += 8;
-            if (filmsCharges >= filmsReels.length) {
-                loadMoreButton.classList.add('hidden');
-            }
         });
         // Initialisation
         document.addEventListener('DOMContentLoaded', () => {
-            genererFilmsGrid(filmsReels.slice(0, 12));
             genererNouveautesCarousel(filmsReels);
             // Animation au scroll
@@ -856,6 +990,16 @@
                 observer.observe(section);
             });
         });
     </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-futur" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

         .animate-fadeIn {
             animation: fadeIn 1s ease-out forwards;
         }
+        /* Loading spinner */
+        .loading-spinner {
+            display: inline-block;
+            width: 50px;
+            height: 50px;
+            border: 5px solid rgba(0, 240, 255, 0.3);
+            border-radius: 50%;
+            border-top-color: #00f0ff;
+            animation: spin 1s ease-in-out infinite;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
     </style>
 </head>
 <body class="scroll-smooth">
                 <!-- Les films seront générés par JavaScript -->
             </div>
+            <!-- Chargement automatique -->
+            <div id="loading-container" class="text-center mt-12 hidden">
+                <div class="loading-spinner mx-auto"></div>
+                <p class="mt-4 text-neon-blue">Chargement des films...</p>
             </div>
         </div>
     </section>
                     <ul class="space-y-2">
                         <li><a href="#" class="text-gray-400 hover:text-neon-blue transition-all duration-300">Conditions d'utilisation</a></li>
                         <li><a href="#" class="text-gray-400 hover:text-neon-pink transition-all duration-300">Politique de confidentialité</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-neon-purple transitionall duration-300">Cookies</a></li>
                         <li><a href="#" class="text-gray-400 hover:text-neon-green transitionall duration-300">Mentions légales</a></li>
                     </ul>
                 </div>
                 description: "Une histoire d'ambition et d'excès retraçant la montée et la chute de multiples personnages à Hollywood dans les années 1920.",
                 note: "7.4",
                 image: "https://image.tmdb.org/t/p/w500/wjOHjWCUE0YPPDiA9QHv4kXmq1Q.jpg"
+            },
+            // Ajout de plus de films pour le chargement automatique
+            {
+                titre: "Avengers: Endgame",
+                annee: 2019,
+                duree: "3h01min",
+                genre1: "Action",
+                genre2: "Science-fiction",
+                description: "Les Avengers tentent de restaurer l'ordre dans l'univers après les événements dévastateurs d'Infinity War.",
+                note: "8.4",
+                image: "https://image.tmdb.org/t/p/w500/or06FN3Dka5tukK1e9sl16pB3iy.jpg"
+            },
+            {
+                titre: "Joker",
+                annee: 2019,
+                duree: "2h02min",
+                genre1: "Drame",
+                genre2: "Thriller",
+                description: "L'histoire de la transformation d'Arthur Fleck, un comédien raté, en le criminel emblématique Joker.",
+                note: "8.4",
+                image: "https://image.tmdb.org/t/p/w500/udDclJoHjfjb8Ekgsd4FDteOkCU.jpg"
+            },
+            {
+                titre: "Parasite",
+                annee: 2019,
+                duree: "2h12min",
+                genre1: "Drame",
+                genre2: "Thriller",
+                description: "Une famille pauvre s'infiltre dans le ménage d'une famille riche en se faisant passer pour des professionnels hautement qualifiés.",
+                note: "8.5",
+                image: "https://image.tmdb.org/t/p/w500/7IiTTgloJzvGI1TAYymCfbfl3vT.jpg"
+            },
+            {
+                titre: "Inception",
+                annee: 2010,
+                duree: "2h28min",
+                genre1: "Science-fiction",
+                genre2: "Action",
+                description: "Un voleur qui vole des secrets corporatifs grâce à l'utilisation de la technologie de partage de rêves reçoit la tâche inverse.",
+                note: "8.8",
+                image: "https://image.tmdb.org/t/p/w500/9gk7adHYeDvHkCSEqAvQNLV5Uge.jpg"
+            },
+            {
+                titre: "Interstellar",
+                annee: 2014,
+                duree: "2h49min",
+                genre1: "Science-fiction",
+                genre2: "Drame",
+                description: "Une équipe d'explorateurs voyage à travers un trou de ver dans l'espace pour assurer la survie de l'humanité.",
+                note: "8.6",
+                image: "https://image.tmdb.org/t/p/w500/gEU2QniE6E77NI6lCU6MxlNBvIx.jpg"
+            },
+            {
+                titre: "The Dark Knight",
+                annee: 2008,
+                duree: "2h32min",
+                genre1: "Action",
+                genre2: "Crime",
+                description: "Batman a relevé le défi du Joker, un criminel qui plonge Gotham City dans l'anarchie.",
+                note: "9.0",
+                image: "https://image.tmdb.org/t/p/w500/qJ2tW6WMUDux911r6m7haRef0WH.jpg"
+            },
+            {
+                titre: "Pulp Fiction",
+                annee: 1994,
+                duree: "2h34min",
+                genre1: "Crime",
+                genre2: "Drame",
+                description: "Les vies de deux hommes de main, d'un boxeur, d'un gangster et de sa femme s'entrelacent dans quatre histoires de violence et de rachat.",
+                note: "8.9",
+                image: "https://image.tmdb.org/t/p/w500/d5iIlFn5s0ImszYzBPb8JPIfbXD.jpg"
+            },
+            {
+                titre: "The Shawshank Redemption",
+                annee: 1994,
+                duree: "2h22min",
+                genre1: "Drame",
+                genre2: "Crime",
+                description: "Deux prisonniers se lient d'amitié au fil des ans, trouvant réconfort et rédemption finale grâce à des actes de décence commune.",
+                note: "9.3",
+                image: "https://image.tmdb.org/t/p/w500/q6y0Go1tsGEsmtFryDOJo3dEmqu.jpg"
+            },
+            {
+                titre: "The Godfather",
+                annee: 1972,
+                duree: "2h55min",
+                genre1: "Crime",
+                genre2: "Drame",
+                description: "Le patriarche vieillissant d'une dynastie criminelle new-yorkaise transfère le contrôle de son empire clandestin à son fils réticent.",
+                note: "9.2",
+                image: "https://image.tmdb.org/t/p/w500/3bhkrj58Vtu7enYsRolD1fZdja1.jpg"
+            },
+            {
+                titre: "Fight Club",
+                annee: 1999,
+                duree: "2h19min",
+                genre1: "Drame",
+                genre2: "Thriller",
+                description: "Un employé de bureau insomniaque et un fabricant de savon diabolique forment un club de combat souterrain qui évolue en quelque chose de bien plus grand.",
+                note: "8.8",
+                image: "https://image.tmdb.org/t/p/w500/pB8BM7pdSp6B6Ih7QZ4DrQ3PmJK.jpg"
             }
         ];
+        // Variables pour le chargement automatique
+        let filmsCharges = 0;
+        const batchSize = 12; // Nombre de films à charger à chaque fois
+        const loadingContainer = document.getElementById('loading-container');
+        const filmsGrid = document.getElementById('films-grid');
         // Générer les films dans la grille
         function genererFilmsGrid(films) {
             films.forEach(film => {
                 const filmElement = document.createElement('div');
                 filmElement.className = 'film-card group relative rounded-xl overflow-hidden transition-all duration-500 hover:z-10';
             });
         }
+        // Charger plus de films
+        function chargerPlusDeFilms() {
+            if (filmsCharges >= filmsReels.length) return;
+            loadingContainer.classList.remove('hidden');
+            // Simulation de chargement asynchrone
+            setTimeout(() => {
+                const nouveauxFilms = filmsReels.slice(filmsCharges, filmsCharges + batchSize);
+                genererFilmsGrid(nouveauxFilms);
+                filmsCharges += batchSize;
+                loadingContainer.classList.add('hidden');
+                // Si on a chargé tous les films, supprimer l'observateur
+                if (filmsCharges >= filmsReels.length) {
+                    observer.unobserve(loadingContainer);
+                }
+            }, 1000);
+        }
         // Générer les films dans le carrousel de nouveautés
         function genererNouveautesCarousel(films) {
+            const nouveautesCarousel = document.getElementById('nouveautes-carousel');
             films.slice(0, 10).forEach(film => {
                 const filmElement = document.createElement('div');
                 filmElement.className = 'flex-shrink-0 w-64 sm:w-72 md:w-80';
         const nextBtn = document.getElementById('next-btn');
         prevBtn.addEventListener('click', () => {
+            document.getElementById('nouveautes-carousel').scrollBy({ left: -300, behavior: 'smooth' });
         });
         nextBtn.addEventListener('click', () => {
+            document.getElementById('nouveautes-carousel').scrollBy({ left: 300, behavior: 'smooth' });
         });
         // Initialisation
         document.addEventListener('DOMContentLoaded', () => {
+            // Charger le premier lot de films
+            chargerPlusDeFilms();
+            // Générer le carrousel de nouveautés
             genererNouveautesCarousel(filmsReels);
             // Animation au scroll
                 observer.observe(section);
             });
         });
+        // Observer pour le chargement automatique
+        const observer = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting) {
+                chargerPlusDeFilms();
+            }
+        }, { threshold: 0.1 });
+        // Observer le conteneur de chargement
+        observer.observe(loadingContainer);
     </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-futur" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt CHANGED Viewed

@@ -1,2 +1,3 @@
 https://plateformecinema.com/:  je veux le site en francais et sile futuriste animé avec toutes les derniere sortie  et ajouter 7878987 film en automatique
-AFFICHER LES VRAIS IMAGES DES SITE ET DES VRAIS FILMS JE VEUX PAS DE SITE D EXEMPLE  JE VEUX TOUT EN PILOTAGE AUTOMATIQUE

 https://plateformecinema.com/:  je veux le site en francais et sile futuriste animé avec toutes les derniere sortie  et ajouter 7878987 film en automatique
+AFFICHER LES VRAIS IMAGES DES SITE ET DES VRAIS FILMS JE VEUX PAS DE SITE D EXEMPLE  JE VEUX TOUT EN PILOTAGE AUTOMATIQUE
+activer charger plus de film en systeme robotisé automaique