Spaces:

docto41
/

neoflix

Running

App Files Files Community

docto41 commited on May 19

Commit

608069d

verified ·

1 Parent(s): 8e4756d

Add 2 files

Browse files

Files changed (2) hide show

index.html +44 -22
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -154,6 +154,14 @@
             50% { width: 100%; left: 0; }
             100% { width: 0%; left: 100%; }
         }
     </style>
 </head>
 <body class="relative overflow-hidden">
@@ -275,10 +283,9 @@
                 </div>
             </div>
-            <div class="mt-10 text-center">
-                <button id="loadMoreBtn" class="neon-button neon-border text-white px-8 py-3 rounded-full font-bold flex items-center mx-auto">
-                    <i class="fas fa-chevron-circle-down mr-2"></i> Charger plus de films
-                </button>
             </div>
         </div>
     </section>
@@ -504,6 +511,7 @@
         // Variables d'état
         let currentPage = 1;
         let totalMovies = 0;
         // Toggle IA Console
         document.getElementById('iaButton').addEventListener('click', function() {
@@ -519,6 +527,9 @@
         // Fonction pour charger les films populaires
         async function fetchPopularMovies(page = 1) {
             try {
                 const response = await fetch(`${TMDB_BASE_URL}/movie/popular?api_key=${TMDB_API_KEY}&language=fr-FR&page=${page}`);
                 const data = await response.json();
@@ -536,6 +547,9 @@
             } catch (error) {
                 console.error('Erreur lors du chargement des films:', error);
                 return [];
             }
         }
@@ -567,6 +581,11 @@
         function displayMovies(movies) {
             const moviesContainer = document.getElementById('moviesContainer');
             movies.forEach(movie => {
                 const movieCard = document.createElement('div');
                 movieCard.className = 'holographic-card group';
@@ -595,21 +614,34 @@
             });
         }
-        // Fonction pour charger plus de films
-        document.getElementById('loadMoreBtn').addEventListener('click', async function() {
             currentPage++;
             const movies = await fetchPopularMovies(currentPage);
             displayMovies(movies);
-            // Animation de chargement
             const robotVoice = document.createElement('div');
-            robotVoice.className = 'robot-voice mb-8';
-            robotVoice.innerHTML = `<p class="text-cyan-300">SYSTÈME IA: Chargement de ${movies.length} films supplémentaires...</p>`;
-            this.parentNode.insertBefore(robotVoice, this);
             setTimeout(() => {
-                robotVoice.innerHTML = `<p class="text-green-400">SYSTÈME IA: Chargement terminé. ${movies.length} films ajoutés.</p>`;
-            }, 1500);
         });
         // Initialisation
@@ -637,16 +669,6 @@
             // Arrêter les messages de chargement
             clearInterval(loadingInterval);
             robotVoice.innerHTML = `<p class="text-green-400">SYSTÈME IA: Chargement terminé. ${movies.length} films chargés avec succès.</p>`;
-            // Auto-scroll des films
-            setInterval(() => {
-                const container = document.getElementById('moviesContainer');
-                container.scrollBy({ left: 10, behavior: 'smooth' });
-                if (container.scrollLeft + container.clientWidth >= container.scrollWidth - 100) {
-                    container.scrollTo({ left: 0, behavior: 'smooth' });
-                }
-            }, 50);
         });
     </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/neoflix" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

             50% { width: 100%; left: 0; }
             100% { width: 0%; left: 100%; }
         }
+        /* Nouveau style pour le chargement automatique */
+        .loading-more {
+            display: none;
+            text-align: center;
+            padding: 20px;
+            color: var(--neon-blue);
+        }
     </style>
 </head>
 <body class="relative overflow-hidden">
                 </div>
             </div>
+            <div id="loadingMore" class="loading-more">
+                <div class="loading-bar mb-2 mx-auto" style="width: 200px;"></div>
+                <p class="text-cyan-400">Chargement automatique des films...</p>
             </div>
         </div>
     </section>
         // Variables d'état
         let currentPage = 1;
         let totalMovies = 0;
+        let isLoading = false;
         // Toggle IA Console
         document.getElementById('iaButton').addEventListener('click', function() {
         // Fonction pour charger les films populaires
         async function fetchPopularMovies(page = 1) {
             try {
+                isLoading = true;
+                document.getElementById('loadingMore').style.display = 'block';
                 const response = await fetch(`${TMDB_BASE_URL}/movie/popular?api_key=${TMDB_API_KEY}&language=fr-FR&page=${page}`);
                 const data = await response.json();
             } catch (error) {
                 console.error('Erreur lors du chargement des films:', error);
                 return [];
+            } finally {
+                isLoading = false;
+                document.getElementById('loadingMore').style.display = 'none';
             }
         }
         function displayMovies(movies) {
             const moviesContainer = document.getElementById('moviesContainer');
+            // Si c'est la première page, on vide le conteneur
+            if (currentPage === 1) {
+                moviesContainer.innerHTML = '';
+            }
             movies.forEach(movie => {
                 const movieCard = document.createElement('div');
                 movieCard.className = 'holographic-card group';
             });
         }
+        // Fonction pour charger plus de films automatiquement
+        async function loadMoreMovies() {
+            if (isLoading) return;
             currentPage++;
             const movies = await fetchPopularMovies(currentPage);
             displayMovies(movies);
+            // Ajouter un message de notification IA
             const robotVoice = document.createElement('div');
+            robotVoice.className = 'robot-voice';
+            robotVoice.innerHTML = `<p class="text-green-400">SYSTÈME IA: ${movies.length} films supplémentaires chargés automatiquement.</p>`;
+            document.querySelector('#moviesContainer').parentNode.insertBefore(robotVoice, document.getElementById('loadingMore'));
+            // Supprimer le message après 3 secondes
             setTimeout(() => {
+                robotVoice.remove();
+            }, 3000);
+        }
+        // Détection du scroll pour le chargement automatique
+        window.addEventListener('scroll', () => {
+            const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
+            // Si l'utilisateur est proche du bas de la page (à 200px près)
+            if (scrollTop + clientHeight >= scrollHeight - 200) {
+                loadMoreMovies();
+            }
         });
         // Initialisation
             // Arrêter les messages de chargement
             clearInterval(loadingInterval);
             robotVoice.innerHTML = `<p class="text-green-400">SYSTÈME IA: Chargement terminé. ${movies.length} films chargés avec succès.</p>`;
         });
     </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/neoflix" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

prompts.txt CHANGED Viewed

@@ -1,2 +1,3 @@
 je veux pas des site d'exemple je veux un vrais site avec plus de 975623123 films version Français en auto Play robotisé   ,, en mode futuriste
-voici les cléé api tmdb ::: Jeton d'accès en lecture à l'API eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJmYjQzN2IxMDcyN2E1YTRlYjhkOTEzNGUyOWM4MmFlMCIsIm5iZiI6MTY4MDYzNzkxMC44NjUsInN1YiI6IjY0MmM3ZmQ2OGI5NTllMDBmNDRkNzNhMCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.Nhl261Ha3z0Ujg5vM1PpFoZBiTGjlXQ1g9VFPh6dVvs Clé d'API fb437b10727a5a4eb8d9134e29c82ae0

 je veux pas des site d'exemple je veux un vrais site avec plus de 975623123 films version Français en auto Play robotisé   ,, en mode futuriste
+voici les cléé api tmdb ::: Jeton d'accès en lecture à l'API eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJmYjQzN2IxMDcyN2E1YTRlYjhkOTEzNGUyOWM4MmFlMCIsIm5iZiI6MTY4MDYzNzkxMC44NjUsInN1YiI6IjY0MmM3ZmQ2OGI5NTllMDBmNDRkNzNhMCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.Nhl261Ha3z0Ujg5vM1PpFoZBiTGjlXQ1g9VFPh6dVvs Clé d'API fb437b10727a5a4eb8d9134e29c82ae0
+CHERGER LES FILMS AUTOMATIQUEMENT