Spaces:

docto41
/

cin-auto

Running

App Files Files Community

docto41 commited on May 17

Commit

da03f70

verified ·

1 Parent(s): d6ba7ac

Add 2 files

Browse files

Files changed (2) hide show

index.html +213 -34
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CinéAuto Pro - Tous les films</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>
@@ -83,6 +83,45 @@
             padding: 20px 0;
             text-align: center;
         }
     </style>
 </head>
 <body class="font-sans bg-gray-900 text-white">
@@ -122,14 +161,14 @@
                 <div>
                     <h1 class="text-4xl md:text-5xl font-bold mb-6">Découvrez notre collection complète</h1>
                     <p class="text-xl text-gray-300 max-w-2xl mb-8">
-                        Plus de 10 000 films disponibles instantanément. Parcourez, découvrez et regardez vos films préférés.
                     </p>
                     <div class="flex flex-wrap gap-4">
-                        <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 flex items-center">
                             <i class="fas fa-play mr-2"></i> Film aléatoire
                         </button>
-                        <button class="bg-transparent border-2 border-gray-300 hover:bg-gray-800 font-bold py-3 px-6 rounded-lg transition duration-300 flex items-center">
-                            <i class="fas fa-filter mr-2"></i> Filtrer
                         </button>
                     </div>
                 </div>
@@ -157,7 +196,7 @@
             <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
                 <div>
                     <h2 class="text-3xl font-bold">Tous les films</h2>
-                    <p class="text-gray-400">Parcourez notre collection complète</p>
                 </div>
                 <div class="mt-4 md:mt-0 flex space-x-4">
                     <div class="relative">
@@ -199,33 +238,32 @@
         </div>
     </section>
-    <!-- Genres Section -->
-    <section id="genres" class="py-16 bg-gray-800">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <h2 class="text-3xl font-bold mb-8">Explorer par genres</h2>
-            <div id="genres-grid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
-                <!-- Genres will be loaded here by JavaScript -->
-            </div>
         </div>
-    </section>
-    <!-- Trending Section -->
-    <section id="tendances" class="py-16 bg-gray-900">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between items-center mb-8">
-                <h2 class="text-3xl font-bold">Tendances du moment</h2>
-                <div class="flex space-x-2">
-                    <button id="trending-day" class="px-4 py-2 bg-red-600 rounded-lg font-medium">Aujourd'hui</button>
-                    <button id="trending-week" class="px-4 py-2 bg-gray-800 rounded-lg hover:bg-gray-700">Cette semaine</button>
-                </div>
-            </div>
-            <div id="trending-movies" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
-                <!-- Trending movies will be loaded here by JavaScript -->
-            </div>
         </div>
-    </section>
     <!-- Footer -->
     <footer class="bg-gray-950 text-gray-400 py-12">
@@ -237,7 +275,7 @@
                         <span class="text-xl font-bold text-white">CinéAuto Pro</span>
                     </div>
                     <p class="mb-4">
-                        La plus grande collection de films en ligne.
                     </p>
                     <div class="flex space-x-4">
                         <a href="#" class="text-gray-400 hover:text-white">
@@ -302,6 +340,11 @@
         let genres = [];
         let isLoading = false;
         let trendingTimeWindow = 'day';
         // Éléments DOM
         const filmGrid = document.getElementById('film-grid');
@@ -315,6 +358,14 @@
         const trendingMovies = document.getElementById('trending-movies');
         const trendingDayBtn = document.getElementById('trending-day');
         const trendingWeekBtn = document.getElementById('trending-week');
         // Charger les genres
         async function loadGenres() {
@@ -416,6 +467,13 @@
                 currentPage = data.page;
                 totalPages = data.total_pages > 500 ? 500 : data.total_pages; // L'API limite à 500 pages
                 // Afficher les films
                 if (page === 1) {
                     displayMovies(data.results);
@@ -427,6 +485,12 @@
                     // Masquer le loader
                     infiniteScrollLoader.style.display = 'none';
                 }
             } catch (error) {
                 console.error('Erreur lors du chargement des films:', error);
                 filmGrid.innerHTML = '<div class="col-span-full text-center py-12 text-red-400">Erreur lors du chargement des films. Veuillez réessayer.</div>';
@@ -441,8 +505,8 @@
                 return '<div class="col-span-full text-center py-12">Aucun film trouvé avec ces critères.</div>';
             }
-            return movies.map(movie => `
-                <div class="film-card bg-gray-800 rounded-lg overflow-hidden shadow-md transition duration-300 fade-in">
                     <div class="relative pb-[150%]">
                         ${movie.poster_path ?
                             `<img src="${IMAGE_BASE_URL}w500${movie.poster_path}" alt="${movie.title}" class="absolute h-full w-full object-cover">` :
@@ -516,6 +580,106 @@
             }
         }
         // Gestionnaires d'événements
         sortSelect.addEventListener('change', () => {
             currentSort = sortSelect.value;
@@ -547,6 +711,21 @@
             loadTrendingMovies();
         });
         // Initialisation
         document.addEventListener('DOMContentLoaded', () => {
             loadGenres();

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CinéAuto Pro - Tous les films en autopilotage</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>
             padding: 20px 0;
             text-align: center;
         }
+        .autoplay-controls {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(30, 41, 59, 0.9);
+            padding: 10px 20px;
+            border-radius: 50px;
+            z-index: 100;
+            display: flex;
+            gap: 15px;
+            align-items: center;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+        }
+        .autoplay-indicator {
+            position: absolute;
+            top: -10px;
+            right: -10px;
+            background: #ef4444;
+            color: white;
+            border-radius: 50%;
+            width: 20px;
+            height: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            animation: pulse 1.5s infinite;
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+            100% { transform: scale(1); }
+        }
+        .current-playing {
+            position: relative;
+            border: 2px solid #ef4444;
+            box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
+        }
     </style>
 </head>
 <body class="font-sans bg-gray-900 text-white">
                 <div>
                     <h1 class="text-4xl md:text-5xl font-bold mb-6">Découvrez notre collection complète</h1>
                     <p class="text-xl text-gray-300 max-w-2xl mb-8">
+                        Plus de 10 000 films disponibles instantanément. Parcourez, découvrez et regardez vos films préférés en mode autopilotage.
                     </p>
                     <div class="flex flex-wrap gap-4">
+                        <button id="random-movie-btn" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 flex items-center">
                             <i class="fas fa-play mr-2"></i> Film aléatoire
                         </button>
+                        <button id="toggle-autoplay-btn" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 flex items-center">
+                            <i class="fas fa-robot mr-2"></i> Activer l'autopilotage
                         </button>
                     </div>
                 </div>
             <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
                 <div>
                     <h2 class="text-3xl font-bold">Tous les films</h2>
+                    <p class="text-gray-400">Parcourez notre collection complète en autopilotage</p>
                 </div>
                 <div class="mt-4 md:mt-0 flex space-x-4">
                     <div class="relative">
         </div>
     </section>
+    <!-- Autoplay Controls -->
+    <div id="autoplay-controls" class="autoplay-controls hidden">
+        <div class="autoplay-indicator">
+            <i class="fas fa-play"></i>
         </div>
+        <button id="prev-movie-btn" class="text-white hover:text-red-400">
+            <i class="fas fa-step-backward text-xl"></i>
+        </button>
+        <button id="play-pause-btn" class="text-white hover:text-red-400">
+            <i class="fas fa-pause text-2xl"></i>
+        </button>
+        <button id="next-movie-btn" class="text-white hover:text-red-400">
+            <i class="fas fa-step-forward text-xl"></i>
+        </button>
+        <div class="text-white text-sm">
+            <span id="current-movie-title">Aucun film en cours</span>
         </div>
+        <div class="flex items-center ml-4">
+            <span class="text-gray-400 text-sm mr-2">Vitesse:</span>
+            <select id="autoplay-speed" class="bg-gray-700 text-white text-sm px-2 py-1 rounded">
+                <option value="5000">Lente</option>
+                <option value="3000" selected>Normale</option>
+                <option value="1500">Rapide</option>
+            </select>
+        </div>
+    </div>
     <!-- Footer -->
     <footer class="bg-gray-950 text-gray-400 py-12">
                         <span class="text-xl font-bold text-white">CinéAuto Pro</span>
                     </div>
                     <p class="mb-4">
+                        La plus grande collection de films en ligne avec autopilotage.
                     </p>
                     <div class="flex space-x-4">
                         <a href="#" class="text-gray-400 hover:text-white">
         let genres = [];
         let isLoading = false;
         let trendingTimeWindow = 'day';
+        let allMovies = [];
+        let currentMovieIndex = 0;
+        let autoplayInterval;
+        let isAutoplayActive = false;
+        let autoplaySpeed = 3000; // 3 secondes par défaut
         // Éléments DOM
         const filmGrid = document.getElementById('film-grid');
         const trendingMovies = document.getElementById('trending-movies');
         const trendingDayBtn = document.getElementById('trending-day');
         const trendingWeekBtn = document.getElementById('trending-week');
+        const autoplayControls = document.getElementById('autoplay-controls');
+        const toggleAutoplayBtn = document.getElementById('toggle-autoplay-btn');
+        const playPauseBtn = document.getElementById('play-pause-btn');
+        const prevMovieBtn = document.getElementById('prev-movie-btn');
+        const nextMovieBtn = document.getElementById('next-movie-btn');
+        const currentMovieTitle = document.getElementById('current-movie-title');
+        const autoplaySpeedSelect = document.getElementById('autoplay-speed');
+        const randomMovieBtn = document.getElementById('random-movie-btn');
         // Charger les genres
         async function loadGenres() {
                 currentPage = data.page;
                 totalPages = data.total_pages > 500 ? 500 : data.total_pages; // L'API limite à 500 pages
+                // Stocker tous les films pour l'autopilotage
+                if (page === 1) {
+                    allMovies = data.results;
+                } else {
+                    allMovies = [...allMovies, ...data.results];
+                }
                 // Afficher les films
                 if (page === 1) {
                     displayMovies(data.results);
                     // Masquer le loader
                     infiniteScrollLoader.style.display = 'none';
                 }
+                // Si l'autopilotage est actif, redémarrer avec la nouvelle liste
+                if (isAutoplayActive) {
+                    stopAutoplay();
+                    startAutoplay();
+                }
             } catch (error) {
                 console.error('Erreur lors du chargement des films:', error);
                 filmGrid.innerHTML = '<div class="col-span-full text-center py-12 text-red-400">Erreur lors du chargement des films. Veuillez réessayer.</div>';
                 return '<div class="col-span-full text-center py-12">Aucun film trouvé avec ces critères.</div>';
             }
+            return movies.map((movie, index) => `
+                <div class="film-card bg-gray-800 rounded-lg overflow-hidden shadow-md transition duration-300 fade-in ${index === currentMovieIndex && isAutoplayActive ? 'current-playing' : ''}" data-movie-id="${movie.id}" data-movie-index="${index}">
                     <div class="relative pb-[150%]">
                         ${movie.poster_path ?
                             `<img src="${IMAGE_BASE_URL}w500${movie.poster_path}" alt="${movie.title}" class="absolute h-full w-full object-cover">` :
             }
         }
+        // Fonctions pour l'autopilotage
+        function startAutoplay() {
+            if (allMovies.length === 0) return;
+            isAutoplayActive = true;
+            toggleAutoplayBtn.innerHTML = '<i class="fas fa-stop mr-2"></i> Arrêter l\'autopilotage';
+            toggleAutoplayBtn.classList.remove('bg-red-600');
+            toggleAutoplayBtn.classList.add('bg-red-800');
+            autoplayControls.classList.remove('hidden');
+            // Mettre en surbrillance le film en cours
+            highlightCurrentMovie();
+            // Démarrer l'intervalle
+            autoplayInterval = setInterval(() => {
+                nextMovie();
+            }, autoplaySpeed);
+        }
+        function stopAutoplay() {
+            isAutoplayActive = false;
+            toggleAutoplayBtn.innerHTML = '<i class="fas fa-robot mr-2"></i> Activer l\'autopilotage';
+            toggleAutoplayBtn.classList.add('bg-red-600');
+            toggleAutoplayBtn.classList.remove('bg-red-800');
+            if (autoplayInterval) {
+                clearInterval(autoplayInterval);
+            }
+            // Retirer la surbrillance du film en cours
+            document.querySelectorAll('.film-card').forEach(card => {
+                card.classList.remove('current-playing');
+            });
+        }
+        function toggleAutoplay() {
+            if (isAutoplayActive) {
+                stopAutoplay();
+                autoplayControls.classList.add('hidden');
+            } else {
+                startAutoplay();
+            }
+        }
+        function nextMovie() {
+            if (allMovies.length === 0) return;
+            currentMovieIndex = (currentMovieIndex + 1) % allMovies.length;
+            highlightCurrentMovie();
+            scrollToCurrentMovie();
+        }
+        function prevMovie() {
+            if (allMovies.length === 0) return;
+            currentMovieIndex = (currentMovieIndex - 1 + allMovies.length) % allMovies.length;
+            highlightCurrentMovie();
+            scrollToCurrentMovie();
+        }
+        function highlightCurrentMovie() {
+            // Retirer la surbrillance de tous les films
+            document.querySelectorAll('.film-card').forEach(card => {
+                card.classList.remove('current-playing');
+            });
+            // Ajouter la surbrillance au film actuel
+            const currentCard = document.querySelector(`.film-card[data-movie-index="${currentMovieIndex}"]`);
+            if (currentCard) {
+                currentCard.classList.add('current-playing');
+                // Mettre à jour le titre dans les contrôles
+                const movie = allMovies[currentMovieIndex];
+                currentMovieTitle.textContent = movie.title;
+            }
+        }
+        function scrollToCurrentMovie() {
+            const currentCard = document.querySelector(`.film-card[data-movie-index="${currentMovieIndex}"]`);
+            if (currentCard) {
+                currentCard.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'center'
+                });
+            }
+        }
+        function playRandomMovie() {
+            if (allMovies.length === 0) return;
+            currentMovieIndex = Math.floor(Math.random() * allMovies.length);
+            highlightCurrentMovie();
+            scrollToCurrentMovie();
+            // Si l'autopilotage n'est pas actif, le démarrer
+            if (!isAutoplayActive) {
+                startAutoplay();
+            }
+        }
         // Gestionnaires d'événements
         sortSelect.addEventListener('change', () => {
             currentSort = sortSelect.value;
             loadTrendingMovies();
         });
+        toggleAutoplayBtn.addEventListener('click', toggleAutoplay);
+        playPauseBtn.addEventListener('click', toggleAutoplay);
+        prevMovieBtn.addEventListener('click', prevMovie);
+        nextMovieBtn.addEventListener('click', nextMovie);
+        randomMovieBtn.addEventListener('click', playRandomMovie);
+        autoplaySpeedSelect.addEventListener('change', () => {
+            autoplaySpeed = parseInt(autoplaySpeedSelect.value);
+            if (isAutoplayActive) {
+                stopAutoplay();
+                startAutoplay();
+            }
+        });
         // Initialisation
         document.addEventListener('DOMContentLoaded', () => {
             loadGenres();

prompts.txt CHANGED Viewed

@@ -7,4 +7,5 @@ https://plateformecinema.com ? ACTIVER LES FILMS EN PILOTE AUTOMATIQUE AVEC UNE
 ajouter 784574 film complet avec leur images des film d'origine en pilotage automatique
 afficher toutes les images des film reelement
 ajouté plus de fonction plus d'outils en pilotage automatique
-afficher toutes les films directement sur la page d'accueil

 ajouter 784574 film complet avec leur images des film d'origine en pilotage automatique
 afficher toutes les images des film reelement
 ajouté plus de fonction plus d'outils en pilotage automatique
+afficher toutes les films directement sur la page d'accueil
+je veux que toutes les film joue en autopilotage