Spaces:

docto41
/

stream-flow

Running

App Files Files Community

docto41 commited on May 17

Commit

06fd82e

verified ·

1 Parent(s): 3271426

Add 2 files

Browse files

Files changed (2) hide show

index.html +441 -188
prompts.txt +6 -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>StreamFlow - Plateforme de Streaming</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>
@@ -20,11 +20,96 @@
         .ad-container:hover {
             transform: scale(1.02);
         }
     </style>
 </head>
 <body class="bg-gray-900 text-white">
     <!-- Navigation -->
-    <nav class="bg-gray-800 shadow-lg">
         <div class="container mx-auto px-4 py-3">
             <div class="flex justify-between items-center">
                 <div class="flex items-center space-x-4">
@@ -34,10 +119,10 @@
                     </a>
                     <div class="hidden md:flex space-x-6">
                         <a href="#" class="hover:text-blue-400">Accueil</a>
-                        <a href="#" class="hover:text-blue-400">Films</a>
-                        <a href="#" class="hover:text-blue-400">Séries</a>
-                        <a href="#" class="hover:text-blue-400">Tendances</a>
-                        <a href="#" class="hover:text-blue-400">Ma liste</a>
                     </div>
                 </div>
                 <div class="flex items-center space-x-4">
@@ -46,7 +131,7 @@
                         <i class="fas fa-search absolute right-3 top-2 text-gray-400"></i>
                     </div>
                     <div class="relative">
-                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-8 h-8 rounded-full cursor-pointer">
                         <div class="absolute right-0 bottom-0 w-3 h-3 bg-green-500 rounded-full border-2 border-gray-800"></div>
                     </div>
                 </div>
@@ -59,14 +144,14 @@
         <div class="container mx-auto px-4">
             <div class="flex flex-col md:flex-row items-center">
                 <div class="md:w-2/3 mb-8 md:mb-0">
-                    <h1 class="text-4xl md:text-5xl font-bold mb-4">Regardez vos films et séries préférés</h1>
-                    <p class="text-xl mb-6">StreamFlow offre une vaste bibliothèque de contenus en haute qualité. Abonnez-vous dès maintenant pour un accès illimité.</p>
                     <div class="flex space-x-4">
-                        <button class="bg-red-600 hover:bg-red-700 px-6 py-3 rounded-lg font-semibold flex items-center">
-                            <i class="fas fa-play mr-2"></i> Regarder maintenant
                         </button>
-                        <button class="bg-gray-700 hover:bg-gray-600 px-6 py-3 rounded-lg font-semibold flex items-center">
-                            <i class="fas fa-info-circle mr-2"></i> Plus d'infos
                         </button>
                     </div>
                 </div>
@@ -78,8 +163,8 @@
                             <span class="font-bold">PUBLICITÉ</span>
                         </div>
                         <h3 class="font-bold text-lg mb-2">Essayez NordVPN aujourd'hui!</h3>
-                        <p class="text-sm mb-3">Protégez votre vie privée en ligne et accédez à plus de contenus.</p>
-                        <button class="w-full bg-black text-white py-2 rounded font-semibold">Obtenir 70% de réduction</button>
                     </div>
                 </div>
             </div>
@@ -91,13 +176,13 @@
         <div class="container mx-auto px-4">
             <div class="flex items-center justify-between">
                 <span class="text-sm font-semibold text-gray-400">Publicité</span>
-                <div class="flex items-center space-x-4 overflow-x-auto whitespace-nowrap">
-                    <span class="text-sm">🎁 Obtenez 3 mois gratuits sur Disney+</span>
-                    <span class="text-sm">📱 Nouveau iPhone 15 Pro - Commandez maintenant!</span>
-                    <span class="text-sm">✈️ Réservez vos vacances avec Booking.com</span>
-                    <span class="text-sm">💳 Carte Amazon Prime - 5% de cashback</span>
                 </div>
-                <button class="text-gray-400 hover:text-white">
                     <i class="fas fa-times"></i>
                 </button>
             </div>
@@ -107,138 +192,54 @@
     <!-- Main Content -->
     <div class="container mx-auto px-4 py-8">
         <!-- Section Films populaires -->
-        <section class="mb-12">
             <div class="flex justify-between items-center mb-6">
-                <h2 class="text-2xl font-bold">Films populaires</h2>
-                <a href="#" class="text-blue-400 hover:underline">Voir tout</a>
-            </div>
-            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
-                <!-- Film Card 1 -->
-                <div class="movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer">
-                    <div class="relative">
-                        <img src="https://via.placeholder.com/300x450" alt="Movie" class="w-full h-auto">
-                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
-                            <div class="flex items-center">
-                                <span class="bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded mr-2">4.5</span>
-                                <span class="text-xs">2023</span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="p-3">
-                        <h3 class="font-semibold truncate">Dune: Partie 2</h3>
-                        <p class="text-gray-400 text-sm">Science-fiction</p>
-                    </div>
-                </div>
-                <!-- Film Card 2 -->
-                <div class="movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer">
-                    <div class="relative">
-                        <img src="https://via.placeholder.com/300x450" alt="Movie" class="w-full h-auto">
-                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
-                            <div class="flex items-center">
-                                <span class="bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded mr-2">4.7</span>
-                                <span class="text-xs">2023</span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="p-3">
-                        <h3 class="font-semibold truncate">Oppenheimer</h3>
-                        <p class="text-gray-400 text-sm">Drame historique</p>
-                    </div>
-                </div>
-                <!-- Film Card 3 -->
-                <div class="movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer">
-                    <div class="relative">
-                        <img src="https://via.placeholder.com/300x450" alt="Movie" class="w-full h-auto">
-                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
-                            <div class="flex items-center">
-                                <span class="bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded mr-2">4.3</span>
-                                <span class="text-xs">2023</span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="p-3">
-                        <h3 class="font-semibold truncate">The Batman</h3>
-                        <p class="text-gray-400 text-sm">Action</p>
-                    </div>
-                </div>
-                <!-- Film Card 4 -->
-                <div class="movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer">
-                    <div class="relative">
-                        <img src="https://via.placeholder.com/300x450" alt="Movie" class="w-full h-auto">
-                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
-                            <div class="flex items-center">
-                                <span class="bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded mr-2">4.1</span>
-                                <span class="text-xs">2023</span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="p-3">
-                        <h3 class="font-semibold truncate">Avatar 2</h3>
-                        <p class="text-gray-400 text-sm">Science-fiction</p>
-                    </div>
-                </div>
-                <!-- Film Card 5 -->
-                <div class="movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer">
-                    <div class="relative">
-                        <img src="https://via.placeholder.com/300x450" alt="Movie" class="w-full h-auto">
-                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
-                            <div class="flex items-center">
-                                <span class="bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded mr-2">4.6</span>
-                                <span class="text-xs">2023</span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="p-3">
-                        <h3 class="font-semibold truncate">John Wick 4</h3>
-                        <p class="text-gray-400 text-sm">Action</p>
-                    </div>
-                </div>
-                <!-- Film Card 6 -->
-                <div class="movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer">
-                    <div class="relative">
-                        <img src="https://via.placeholder.com/300x450" alt="Movie" class="w-full h-auto">
-                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
-                            <div class="flex items-center">
-                                <span class="bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded mr-2">4.0</span>
-                                <span class="text-xs">2023</span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="p-3">
-                        <h3 class="font-semibold truncate">Mission Impossible 7</h3>
-                        <p class="text-gray-400 text-sm">Action</p>
-                    </div>
                 </div>
             </div>
         </section>
         <!-- Publicité intermédiaire -->
         <div class="ad-container bg-blue-900 rounded-lg p-6 mb-12 text-center">
             <div class="max-w-3xl mx-auto">
-                <h3 class="text-xl font-bold mb-2">Abonnez-vous à StreamFlow Premium</h3>
-                <p class="mb-4">Profitez de tous nos contenus sans publicité et en qualité 4K pour seulement 9,99€/mois</p>
-                <button class="bg-red-600 hover:bg-red-700 px-6 py-2 rounded-lg font-semibold">
                     Essai gratuit de 30 jours
                 </button>
             </div>
         </div>
         <!-- Section Séries tendances -->
-        <section class="mb-12">
             <div class="flex justify-between items-center mb-6">
-                <h2 class="text-2xl font-bold">Séries tendances</h2>
-                <a href="#" class="text-blue-400 hover:underline">Voir tout</a>
             </div>
             <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
                 <!-- Série Card 1 -->
                 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer">
                     <div class="relative">
                         <img src="https://via.placeholder.com/300x450" alt="Series" class="w-full h-auto">
                         <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
                             <div class="flex items-center">
                                 <span class="bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded mr-2">4.8</span>
@@ -248,7 +249,7 @@
                     </div>
                     <div class="p-3">
                         <h3 class="font-semibold truncate">The Last of Us</h3>
-                        <p class="text-gray-400 text-sm">Drame</p>
                     </div>
                 </div>
@@ -256,6 +257,9 @@
                 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer">
                     <div class="relative">
                         <img src="https://via.placeholder.com/300x450" alt="Series" class="w-full h-auto">
                         <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
                             <div class="flex items-center">
                                 <span class="bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded mr-2">4.9</span>
@@ -265,7 +269,7 @@
                     </div>
                     <div class="p-3">
                         <h3 class="font-semibold truncate">Stranger Things</h3>
-                        <p class="text-gray-400 text-sm">Science-fiction</p>
                     </div>
                 </div>
@@ -273,6 +277,9 @@
                 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer">
                     <div class="relative">
                         <img src="https://via.placeholder.com/300x450" alt="Series" class="w-full h-auto">
                         <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
                             <div class="flex items-center">
                                 <span class="bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded mr-2">4.7</span>
@@ -282,7 +289,7 @@
                     </div>
                     <div class="p-3">
                         <h3 class="font-semibold truncate">House of the Dragon</h3>
-                        <p class="text-gray-400 text-sm">Fantasy</p>
                     </div>
                 </div>
@@ -290,6 +297,9 @@
                 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer">
                     <div class="relative">
                         <img src="https://via.placeholder.com/300x450" alt="Series" class="w-full h-auto">
                         <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
                             <div class="flex items-center">
                                 <span class="bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded mr-2">4.5</span>
@@ -299,7 +309,7 @@
                     </div>
                     <div class="p-3">
                         <h3 class="font-semibold truncate">The Witcher</h3>
-                        <p class="text-gray-400 text-sm">Fantasy</p>
                     </div>
                 </div>
@@ -307,6 +317,9 @@
                 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer">
                     <div class="relative">
                         <img src="https://via.placeholder.com/300x450" alt="Series" class="w-full h-auto">
                         <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
                             <div class="flex items-center">
                                 <span class="bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded mr-2">4.3</span>
@@ -316,7 +329,7 @@
                     </div>
                     <div class="p-3">
                         <h3 class="font-semibold truncate">Wednesday</h3>
-                        <p class="text-gray-400 text-sm">Comédie</p>
                     </div>
                 </div>
@@ -324,6 +337,9 @@
                 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer">
                     <div class="relative">
                         <img src="https://via.placeholder.com/300x450" alt="Series" class="w-full h-auto">
                         <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
                             <div class="flex items-center">
                                 <span class="bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded mr-2">4.6</span>
@@ -333,7 +349,7 @@
                     </div>
                     <div class="p-3">
                         <h3 class="font-semibold truncate">The Mandalorian</h3>
-                        <p class="text-gray-400 text-sm">Science-fiction</p>
                     </div>
                 </div>
             </div>
@@ -348,27 +364,30 @@
                 <h3 class="font-bold">Découvrez nos jeux exclusifs</h3>
                 <p class="text-sm text-gray-400">Abonnez-vous à StreamFlow Gaming pour accéder à des centaines de jeux premium</p>
             </div>
-            <button class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg text-sm font-semibold">
                 Essayer maintenant
             </button>
         </div>
         <!-- Section Nouveautés -->
-        <section class="mb-12">
             <div class="flex justify-between items-center mb-6">
-                <h2 class="text-2xl font-bold">Nouveautés</h2>
-                <a href="#" class="text-blue-400 hover:underline">Voir tout</a>
             </div>
             <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
                 <!-- Nouveauté Card 1 -->
                 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer">
                     <div class="relative">
                         <img src="https://via.placeholder.com/300x450" alt="New" class="w-full h-auto">
                         <div class="absolute top-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded">NOUVEAU</div>
                     </div>
                     <div class="p-3">
                         <h3 class="font-semibold truncate">The Flash</h3>
-                        <p class="text-gray-400 text-sm">Action</p>
                     </div>
                 </div>
@@ -376,11 +395,14 @@
                 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer">
                     <div class="relative">
                         <img src="https://via.placeholder.com/300x450" alt="New" class="w-full h-auto">
                         <div class="absolute top-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded">NOUVEAU</div>
                     </div>
                     <div class="p-3">
                         <h3 class="font-semibold truncate">Indiana Jones 5</h3>
-                        <p class="text-gray-400 text-sm">Aventure</p>
                     </div>
                 </div>
@@ -388,11 +410,14 @@
                 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer">
                     <div class="relative">
                         <img src="https://via.placeholder.com/300x450" alt="New" class="w-full h-auto">
                         <div class="absolute top-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded">NOUVEAU</div>
                     </div>
                     <div class="p-3">
                         <h3 class="font-semibold truncate">Elemental</h3>
-                        <p class="text-gray-400 text-sm">Animation</p>
                     </div>
                 </div>
@@ -400,11 +425,14 @@
                 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer">
                     <div class="relative">
                         <img src="https://via.placeholder.com/300x450" alt="New" class="w-full h-auto">
                         <div class="absolute top-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded">NOUVEAU</div>
                     </div>
                     <div class="p-3">
                         <h3 class="font-semibold truncate">Transformers 7</h3>
-                        <p class="text-gray-400 text-sm">Action</p>
                     </div>
                 </div>
@@ -412,11 +440,14 @@
                 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer">
                     <div class="relative">
                         <img src="https://via.placeholder.com/300x450" alt="New" class="w-full h-auto">
                         <div class="absolute top-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded">NOUVEAU</div>
                     </div>
                     <div class="p-3">
                         <h3 class="font-semibold truncate">Fast X</h3>
-                        <p class="text-gray-400 text-sm">Action</p>
                     </div>
                 </div>
@@ -424,11 +455,14 @@
                 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer">
                     <div class="relative">
                         <img src="https://via.placeholder.com/300x450" alt="New" class="w-full h-auto">
                         <div class="absolute top-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded">NOUVEAU</div>
                     </div>
                     <div class="p-3">
                         <h3 class="font-semibold truncate">The Little Mermaid</h3>
-                        <p class="text-gray-400 text-sm">Fantasy</p>
                     </div>
                 </div>
             </div>
@@ -441,12 +475,12 @@
             <!-- Publicité footer -->
             <div class="ad-container bg-gray-700 rounded-lg p-6 mb-8 text-center">
                 <h3 class="text-xl font-bold mb-2">Téléchargez notre application mobile</h3>
-                <p class="mb-4">Regardez vos contenus préférés partout, même hors ligne</p>
                 <div class="flex justify-center space-x-4">
-                    <button class="bg-black text-white px-6 py-2 rounded-lg flex items-center">
                         <i class="fab fa-apple mr-2"></i> App Store
                     </button>
-                    <button class="bg-black text-white px-6 py-2 rounded-lg flex items-center">
                         <i class="fab fa-google-play mr-2"></i> Google Play
                     </button>
                 </div>
@@ -456,70 +490,289 @@
                 <div>
                     <h4 class="text-lg font-semibold mb-4">StreamFlow</h4>
                     <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white">À propos</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Carrières</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Presse</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Investisseurs</a></li>
                     </ul>
                 </div>
                 <div>
                     <h4 class="text-lg font-semibold mb-4">Aide</h4>
                     <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white">Centre d'aide</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Options de paiement</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Nous contacter</a></li>
                     </ul>
                 </div>
                 <div>
                     <h4 class="text-lg font-semibold 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">Confidentialité</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Préférences de cookies</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Informations légales</a></li>
                     </ul>
                 </div>
                 <div>
                     <h4 class="text-lg font-semibold mb-4">Suivez-nous</h4>
                     <div class="flex space-x-4">
-                        <a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-facebook"></i></a>
-                        <a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-twitter"></i></a>
-                        <a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-instagram"></i></a>
-                        <a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-youtube"></i></a>
                     </div>
                 </div>
             </div>
             <div class="border-t border-gray-700 pt-6">
-                <p class="text-gray-400 text-sm">© 2023 StreamFlow. Tous droits réservés.</p>
             </div>
         </div>
     </footer>
     <script>
-        // Simulate ad rotation
-        function rotateAds() {
-            const adTexts = [
-                "🎁 Obtenez 3 mois gratuits sur Disney+",
-                "📱 Nouveau iPhone 15 Pro - Commandez maintenant!",
-                "✈️ Réservez vos vacances avec Booking.com",
-                "💳 Carte Amazon Prime - 5% de cashback",
-                "🛒 Livraison gratuite sur toutes vos commandes"
-            ];
-            const adElements = document.querySelectorAll('.flex.items-center.space-x-4.overflow-x-auto.whitespace-nowrap span');
-            let currentIndex = 0;
-            setInterval(() => {
-                currentIndex = (currentIndex + 1) % adTexts.length;
-                adElements.forEach(el => {
-                    el.textContent = adTexts[currentIndex];
-                });
-            }, 5000);
         }
-        // Initialize ad rotation
-        document.addEventListener('DOMContentLoaded', rotateAds);
     </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/stream-flow" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>StreamFlow - Plateforme de Streaming Français</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>
         .ad-container:hover {
             transform: scale(1.02);
         }
+        .movie-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 20px;
+        }
+        .loading-spinner {
+            border: 4px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top: 4px solid #ffffff;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+            margin: 50px auto;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .autoplay-badge {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background-color: rgba(0,0,0,0.7);
+            color: white;
+            padding: 3px 8px;
+            border-radius: 4px;
+            font-size: 12px;
+            display: flex;
+            align-items: center;
+        }
+        .autoplay-badge i {
+            margin-right: 5px;
+            color: #3b82f6;
+        }
+        .auto-player {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            width: 300px;
+            background: rgba(0,0,0,0.8);
+            border-radius: 8px;
+            z-index: 1000;
+            overflow: hidden;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+        }
+        .player-header {
+            background: #1a1a1a;
+            padding: 8px 12px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .player-title {
+            font-size: 14px;
+            font-weight: bold;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .player-close {
+            background: none;
+            border: none;
+            color: white;
+            cursor: pointer;
+        }
+        .player-video {
+            width: 100%;
+            height: 169px;
+            background: black;
+        }
+        .player-controls {
+            padding: 8px;
+            display: flex;
+            justify-content: space-between;
+            background: #1a1a1a;
+        }
+        .player-btn {
+            background: #3b82f6;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            padding: 4px 8px;
+            font-size: 12px;
+            cursor: pointer;
+        }
     </style>
 </head>
 <body class="bg-gray-900 text-white">
     <!-- Navigation -->
+    <nav class="bg-gray-800 shadow-lg sticky top-0 z-50">
         <div class="container mx-auto px-4 py-3">
             <div class="flex justify-between items-center">
                 <div class="flex items-center space-x-4">
                     </a>
                     <div class="hidden md:flex space-x-6">
                         <a href="#" class="hover:text-blue-400">Accueil</a>
+                        <a href="#films" class="hover:text-blue-400">Films</a>
+                        <a href="#series" class="hover:text-blue-400">Séries</a>
+                        <a href="#tendances" class="hover:text-blue-400">Tendances</a>
+                        <a href="#liste" class="hover:text-blue-400">Ma liste</a>
                     </div>
                 </div>
                 <div class="flex items-center space-x-4">
                         <i class="fas fa-search absolute right-3 top-2 text-gray-400"></i>
                     </div>
                     <div class="relative">
+                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-8 h-8 rounded-full cursor-pointer" onclick="window.location.href='#profil'">
                         <div class="absolute right-0 bottom-0 w-3 h-3 bg-green-500 rounded-full border-2 border-gray-800"></div>
                     </div>
                 </div>
         <div class="container mx-auto px-4">
             <div class="flex flex-col md:flex-row items-center">
                 <div class="md:w-2/3 mb-8 md:mb-0">
+                    <h1 class="text-4xl md:text-5xl font-bold mb-4">57,854 films en VF à portée de clic</h1>
+                    <p class="text-xl mb-6">La plus grande bibliothèque de films français en streaming. Lecture automatique en un clic.</p>
                     <div class="flex space-x-4">
+                        <button id="startWatchingBtn" class="bg-red-600 hover:bg-red-700 px-6 py-3 rounded-lg font-semibold flex items-center">
+                            <i class="fas fa-play mr-2"></i> Commencer à regarder
                         </button>
+                        <button id="howItWorksBtn" class="bg-gray-700 hover:bg-gray-600 px-6 py-3 rounded-lg font-semibold flex items-center">
+                            <i class="fas fa-info-circle mr-2"></i> Comment ça marche
                         </button>
                     </div>
                 </div>
                             <span class="font-bold">PUBLICITÉ</span>
                         </div>
                         <h3 class="font-bold text-lg mb-2">Essayez NordVPN aujourd'hui!</h3>
+                        <p class="text-sm mb-3">Débloquez plus de contenus en français avec un VPN.</p>
+                        <button id="vpnBtn" class="w-full bg-black text-white py-2 rounded font-semibold">Obtenir 70% de réduction</button>
                     </div>
                 </div>
             </div>
         <div class="container mx-auto px-4">
             <div class="flex items-center justify-between">
                 <span class="text-sm font-semibold text-gray-400">Publicité</span>
+                <div class="flex items-center space-x-4 overflow-x-auto whitespace-nowrap" id="ad-scroll">
+                    <span class="text-sm">🎁 3 mois gratuits Disney+ pour les nouveaux abonnés</span>
+                    <span class="text-sm">📱 iPhone 15 Pro Max - Livraison gratuite</span>
+                    <span class="text-sm">✈️ Booking.com - Réservez maintenant, payez plus tard</span>
+                    <span class="text-sm">💳 Amazon Prime - 5% de cashback sur tous vos achats</span>
                 </div>
+                <button id="closeAdBtn" class="text-gray-400 hover:text-white">
                     <i class="fas fa-times"></i>
                 </button>
             </div>
     <!-- Main Content -->
     <div class="container mx-auto px-4 py-8">
         <!-- Section Films populaires -->
+        <section class="mb-12" id="films">
             <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-bold">Films populaires en français</h2>
+                <div class="flex space-x-4">
+                    <button id="allFilterBtn" class="bg-blue-600 px-4 py-1 rounded-lg text-sm">Tous</button>
+                    <button id="actionFilterBtn" class="bg-gray-700 hover:bg-gray-600 px-4 py-1 rounded-lg text-sm">Action</button>
+                    <button id="comedyFilterBtn" class="bg-gray-700 hover:bg-gray-600 px-4 py-1 rounded-lg text-sm">Comédie</button>
+                    <button id="dramaFilterBtn" class="bg-gray-700 hover:bg-gray-600 px-4 py-1 rounded-lg text-sm">Drame</button>
                 </div>
             </div>
+            <div class="movie-grid" id="movies-container">
+                <!-- Les films seront chargés ici par JavaScript -->
+                <div class="loading-spinner"></div>
+            </div>
+            <div class="text-center mt-8">
+                <button id="loadMoreBtn" class="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded-lg font-semibold">
+                    <i class="fas fa-plus-circle mr-2"></i> Charger plus de films
+                </button>
+            </div>
         </section>
         <!-- Publicité intermédiaire -->
         <div class="ad-container bg-blue-900 rounded-lg p-6 mb-12 text-center">
             <div class="max-w-3xl mx-auto">
+                <h3 class="text-xl font-bold mb-2">StreamFlow Premium - Sans publicité</h3>
+                <p class="mb-4">Profitez de tous nos 57,854 films sans interruption pour seulement 9,99€/mois</p>
+                <button id="premiumBtn" class="bg-red-600 hover:bg-red-700 px-6 py-2 rounded-lg font-semibold">
                     Essai gratuit de 30 jours
                 </button>
             </div>
         </div>
         <!-- Section Séries tendances -->
+        <section class="mb-12" id="series">
             <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-bold">Séries en VF</h2>
+                <a href="#tous-series" class="text-blue-400 hover:underline">Voir tout</a>
             </div>
             <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
                 <!-- Série Card 1 -->
                 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer">
                     <div class="relative">
                         <img src="https://via.placeholder.com/300x450" alt="Series" class="w-full h-auto">
+                        <div class="autoplay-badge">
+                            <i class="fas fa-play"></i> Auto
+                        </div>
                         <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
                             <div class="flex items-center">
                                 <span class="bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded mr-2">4.8</span>
                     </div>
                     <div class="p-3">
                         <h3 class="font-semibold truncate">The Last of Us</h3>
+                        <p class="text-gray-400 text-sm">Drame | VF</p>
                     </div>
                 </div>
                 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer">
                     <div class="relative">
                         <img src="https://via.placeholder.com/300x450" alt="Series" class="w-full h-auto">
+                        <div class="autoplay-badge">
+                            <i class="fas fa-play"></i> Auto
+                        </div>
                         <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
                             <div class="flex items-center">
                                 <span class="bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded mr-2">4.9</span>
                     </div>
                     <div class="p-3">
                         <h3 class="font-semibold truncate">Stranger Things</h3>
+                        <p class="text-gray-400 text-sm">Science-fiction | VF</p>
                     </div>
                 </div>
                 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer">
                     <div class="relative">
                         <img src="https://via.placeholder.com/300x450" alt="Series" class="w-full h-auto">
+                        <div class="autoplay-badge">
+                            <i class="fas fa-play"></i> Auto
+                        </div>
                         <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
                             <div class="flex items-center">
                                 <span class="bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded mr-2">4.7</span>
                     </div>
                     <div class="p-3">
                         <h3 class="font-semibold truncate">House of the Dragon</h3>
+                        <p class="text-gray-400 text-sm">Fantasy | VF</p>
                     </div>
                 </div>
                 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer">
                     <div class="relative">
                         <img src="https://via.placeholder.com/300x450" alt="Series" class="w-full h-auto">
+                        <div class="autoplay-badge">
+                            <i class="fas fa-play"></i> Auto
+                        </div>
                         <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
                             <div class="flex items-center">
                                 <span class="bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded mr-2">4.5</span>
                     </div>
                     <div class="p-3">
                         <h3 class="font-semibold truncate">The Witcher</h3>
+                        <p class="text-gray-400 text-sm">Fantasy | VF</p>
                     </div>
                 </div>
                 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer">
                     <div class="relative">
                         <img src="https://via.placeholder.com/300x450" alt="Series" class="w-full h-auto">
+                        <div class="autoplay-badge">
+                            <i class="fas fa-play"></i> Auto
+                        </div>
                         <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
                             <div class="flex items-center">
                                 <span class="bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded mr-2">4.3</span>
                     </div>
                     <div class="p-3">
                         <h3 class="font-semibold truncate">Wednesday</h3>
+                        <p class="text-gray-400 text-sm">Comédie | VF</p>
                     </div>
                 </div>
                 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer">
                     <div class="relative">
                         <img src="https://via.placeholder.com/300x450" alt="Series" class="w-full h-auto">
+                        <div class="autoplay-badge">
+                            <i class="fas fa-play"></i> Auto
+                        </div>
                         <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
                             <div class="flex items-center">
                                 <span class="bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded mr-2">4.6</span>
                     </div>
                     <div class="p-3">
                         <h3 class="font-semibold truncate">The Mandalorian</h3>
+                        <p class="text-gray-400 text-sm">Science-fiction | VF</p>
                     </div>
                 </div>
             </div>
                 <h3 class="font-bold">Découvrez nos jeux exclusifs</h3>
                 <p class="text-sm text-gray-400">Abonnez-vous à StreamFlow Gaming pour accéder à des centaines de jeux premium</p>
             </div>
+            <button id="gamingBtn" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg text-sm font-semibold">
                 Essayer maintenant
             </button>
         </div>
         <!-- Section Nouveautés -->
+        <section class="mb-12" id="tendances">
             <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-bold">Nouveautés en VF</h2>
+                <a href="#tous-nouveautes" class="text-blue-400 hover:underline">Voir tout</a>
             </div>
             <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
                 <!-- Nouveauté Card 1 -->
                 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer">
                     <div class="relative">
                         <img src="https://via.placeholder.com/300x450" alt="New" class="w-full h-auto">
+                        <div class="autoplay-badge">
+                            <i class="fas fa-play"></i> Auto
+                        </div>
                         <div class="absolute top-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded">NOUVEAU</div>
                     </div>
                     <div class="p-3">
                         <h3 class="font-semibold truncate">The Flash</h3>
+                        <p class="text-gray-400 text-sm">Action | VF</p>
                     </div>
                 </div>
                 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer">
                     <div class="relative">
                         <img src="https://via.placeholder.com/300x450" alt="New" class="w-full h-auto">
+                        <div class="autoplay-badge">
+                            <i class="fas fa-play"></i> Auto
+                        </div>
                         <div class="absolute top-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded">NOUVEAU</div>
                     </div>
                     <div class="p-3">
                         <h3 class="font-semibold truncate">Indiana Jones 5</h3>
+                        <p class="text-gray-400 text-sm">Aventure | VF</p>
                     </div>
                 </div>
                 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer">
                     <div class="relative">
                         <img src="https://via.placeholder.com/300x450" alt="New" class="w-full h-auto">
+                        <div class="autoplay-badge">
+                            <i class="fas fa-play"></i> Auto
+                        </div>
                         <div class="absolute top-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded">NOUVEAU</div>
                     </div>
                     <div class="p-3">
                         <h3 class="font-semibold truncate">Elemental</h3>
+                        <p class="text-gray-400 text-sm">Animation | VF</p>
                     </div>
                 </div>
                 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer">
                     <div class="relative">
                         <img src="https://via.placeholder.com/300x450" alt="New" class="w-full h-auto">
+                        <div class="autoplay-badge">
+                            <i class="fas fa-play"></i> Auto
+                        </div>
                         <div class="absolute top-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded">NOUVEAU</div>
                     </div>
                     <div class="p-3">
                         <h3 class="font-semibold truncate">Transformers 7</h3>
+                        <p class="text-gray-400 text-sm">Action | VF</p>
                     </div>
                 </div>
                 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer">
                     <div class="relative">
                         <img src="https://via.placeholder.com/300x450" alt="New" class="w-full h-auto">
+                        <div class="autoplay-badge">
+                            <i class="fas fa-play"></i> Auto
+                        </div>
                         <div class="absolute top-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded">NOUVEAU</div>
                     </div>
                     <div class="p-3">
                         <h3 class="font-semibold truncate">Fast X</h3>
+                        <p class="text-gray-400 text-sm">Action | VF</p>
                     </div>
                 </div>
                 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer">
                     <div class="relative">
                         <img src="https://via.placeholder.com/300x450" alt="New" class="w-full h-auto">
+                        <div class="autoplay-badge">
+                            <i class="fas fa-play"></i> Auto
+                        </div>
                         <div class="absolute top-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded">NOUVEAU</div>
                     </div>
                     <div class="p-3">
                         <h3 class="font-semibold truncate">The Little Mermaid</h3>
+                        <p class="text-gray-400 text-sm">Fantasy | VF</p>
                     </div>
                 </div>
             </div>
             <!-- Publicité footer -->
             <div class="ad-container bg-gray-700 rounded-lg p-6 mb-8 text-center">
                 <h3 class="text-xl font-bold mb-2">Téléchargez notre application mobile</h3>
+                <p class="mb-4">Regardez vos 57,854 films préférés partout, même hors ligne</p>
                 <div class="flex justify-center space-x-4">
+                    <button id="appStoreBtn" class="bg-black text-white px-6 py-2 rounded-lg flex items-center">
                         <i class="fab fa-apple mr-2"></i> App Store
                     </button>
+                    <button id="playStoreBtn" class="bg-black text-white px-6 py-2 rounded-lg flex items-center">
                         <i class="fab fa-google-play mr-2"></i> Google Play
                     </button>
                 </div>
                 <div>
                     <h4 class="text-lg font-semibold mb-4">StreamFlow</h4>
                     <ul class="space-y-2">
+                        <li><a href="#apropos" class="text-gray-400 hover:text-white">À propos</a></li>
+                        <li><a href="#carrieres" class="text-gray-400 hover:text-white">Carrières</a></li>
+                        <li><a href="#presse" class="text-gray-400 hover:text-white">Presse</a></li>
+                        <li><a href="#investisseurs" class="text-gray-400 hover:text-white">Investisseurs</a></li>
                     </ul>
                 </div>
                 <div>
                     <h4 class="text-lg font-semibold mb-4">Aide</h4>
                     <ul class="space-y-2">
+                        <li><a href="#aide" class="text-gray-400 hover:text-white">Centre d'aide</a></li>
+                        <li><a href="#paiement" class="text-gray-400 hover:text-white">Options de paiement</a></li>
+                        <li><a href="#faq" class="text-gray-400 hover:text-white">FAQ</a></li>
+                        <li><a href="#contact" class="text-gray-400 hover:text-white">Nous contacter</a></li>
                     </ul>
                 </div>
                 <div>
                     <h4 class="text-lg font-semibold mb-4">Légal</h4>
                     <ul class="space-y-2">
+                        <li><a href="#conditions" class="text-gray-400 hover:text-white">Conditions d'utilisation</a></li>
+                        <li><a href="#confidentialite" class="text-gray-400 hover:text-white">Confidentialité</a></li>
+                        <li><a href="#cookies" class="text-gray-400 hover:text-white">Préférences de cookies</a></li>
+                        <li><a href="#legal" class="text-gray-400 hover:text-white">Informations légales</a></li>
                     </ul>
                 </div>
                 <div>
                     <h4 class="text-lg font-semibold mb-4">Suivez-nous</h4>
                     <div class="flex space-x-4">
+                        <a href="https://facebook.com" class="text-gray-400 hover:text-white text-2xl" target="_blank"><i class="fab fa-facebook"></i></a>
+                        <a href="https://twitter.com" class="text-gray-400 hover:text-white text-2xl" target="_blank"><i class="fab fa-twitter"></i></a>
+                        <a href="https://instagram.com" class="text-gray-400 hover:text-white text-2xl" target="_blank"><i class="fab fa-instagram"></i></a>
+                        <a href="https://youtube.com" class="text-gray-400 hover:text-white text-2xl" target="_blank"><i class="fab fa-youtube"></i></a>
                     </div>
                 </div>
             </div>
             <div class="border-t border-gray-700 pt-6">
+                <p class="text-gray-400 text-sm">© 2023 StreamFlow. Tous droits réservés. 57,854 films disponibles.</p>
             </div>
         </div>
     </footer>
+    <!-- Mini Player -->
+    <div id="miniPlayer" class="auto-player hidden">
+        <div class="player-header">
+            <div class="player-title" id="playerTitle">Lecture en cours</div>
+            <button class="player-close" id="closePlayerBtn">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        <div class="player-video">
+            <video id="autoPlayerVideo" width="100%" height="100%" controls autoplay>
+                <source src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4" type="video/mp4">
+                Votre navigateur ne supporte pas la lecture vidéo.
+            </video>
+        </div>
+        <div class="player-controls">
+            <button class="player-btn" id="nextMovieBtn">
+                <i class="fas fa-forward mr-1"></i> Suivant
+            </button>
+            <button class="player-btn" id="stopAutoplayBtn">
+                <i class="fas fa-stop mr-1"></i> Arrêter
+            </button>
+        </div>
+    </div>
+    <!-- Modal -->
+    <div id="modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
+        <div class="bg-gray-800 rounded-lg w-full max-w-2xl mx-4">
+            <div class="flex justify-between items-center border-b border-gray-700 p-4">
+                <h3 class="text-xl font-bold" id="modalTitle">Modal Title</h3>
+                <button id="closeModalBtn" class="text-gray-400 hover:text-white">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="p-6" id="modalContent">
+                <!-- Content will be inserted here -->
+            </div>
+            <div class="border-t border-gray-700 p-4 flex justify-end">
+                <button id="confirmModalBtn" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg mr-2">Confirmer</button>
+                <button id="cancelModalBtn" class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg">Annuler</button>
+            </div>
+        </div>
+    </div>
     <script>
+        // Base de données de films (simplifiée pour l'exemple)
+        const moviesDatabase = {
+            all: [],
+            action: [],
+            comedy: [],
+            drama: []
+        };
+        // Variables pour l'autoplay
+        let currentMovieIndex = 0;
+        let autoplayInterval;
+        let isAutoplayActive = false;
+        let currentMoviesList = [];
+        // Générer 57,854 films fictifs (en pratique, on en génère 100 pour l'exemple)
+        function generateMovies() {
+            const genres = ['Action', 'Comédie', 'Drame', 'Science-fiction', 'Horreur', 'Romance', 'Thriller', 'Animation'];
+            const years = Array.from({length: 30}, (_, i) => 2023 - i);
+            for (let i = 1; i <= 100; i++) {
+                const genre = genres[Math.floor(Math.random() * genres.length)];
+                const year = years[Math.floor(Math.random() * years.length)];
+                const rating = (Math.random() * 2 + 3).toFixed(1);
+                const movie = {
+                    id: i,
+                    title: `Film ${i} - ${genre}`,
+                    genre: genre.toLowerCase(),
+                    year: year,
+                    rating: rating,
+                    image: `https://via.placeholder.com/300x450?text=Film+${i}`,
+                    url: `https://samplelib.com/lib/preview/mp4/sample-5s.mp4`
+                };
+                moviesDatabase.all.push(movie);
+                if (genre === 'Action') moviesDatabase.action.push(movie);
+                if (genre === 'Comédie') moviesDatabase.comedy.push(movie);
+                if (genre === 'Drame') moviesDatabase.drama.push(movie);
+            }
+        }
+        // Charger les films dans le conteneur
+        function loadMovies(genre = 'all', limit = 20) {
+            const container = document.getElementById('movies-container');
+            container.innerHTML = '';
+            const movies = moviesDatabase[genre].slice(0, limit);
+            currentMoviesList = movies; // Stocker la liste actuelle pour l'autoplay
+            movies.forEach((movie, index) => {
+                const movieCard = document.createElement('div');
+                movieCard.className = 'movie-card bg-gray-800 rounded-lg overflow-hidden transition duration-300 cursor-pointer';
+                movieCard.innerHTML = `
+                    <div class="relative">
+                        <img src="${movie.image}" alt="${movie.title}" class="w-full h-auto">
+                        <div class="autoplay-badge">
+                            <i class="fas fa-play"></i> Auto
+                        </div>
+                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
+                            <div class="flex items-center">
+                                <span class="bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded mr-2">${movie.rating}</span>
+                                <span class="text-xs">${movie.year}</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="p-3">
+                        <h3 class="font-semibold truncate">${movie.title}</h3>
+                        <p class="text-gray-400 text-sm">${movie.genre} | VF</p>
+                    </div>
+                `;
+                movieCard.onclick = () => startAutoplay(index);
+                container.appendChild(movieCard);
+            });
+        }
+        // Démarrer l'autoplay à partir d'un index spécifique
+        function startAutoplay(startIndex = 0) {
+            if (currentMoviesList.length === 0) return;
+            isAutoplayActive = true;
+            currentMovieIndex = startIndex;
+            // Afficher le mini player
+            const miniPlayer = document.getElementById('miniPlayer');
+            miniPlayer.classList.remove('hidden');
+            // Jouer le premier film
+            playCurrentMovie();
+            // Configurer l'intervalle pour passer au film suivant
+            autoplayInterval = setInterval(() => {
+                currentMovieIndex = (currentMovieIndex + 1) % currentMoviesList.length;
+                playCurrentMovie();
+            }, 10000); // Change de film toutes les 10 secondes (pour la démo)
+        }
+        // Jouer le film actuel dans le mini player
+        function playCurrentMovie() {
+            if (currentMovieIndex >= currentMoviesList.length) {
+                currentMovieIndex = 0;
+            }
+            const movie = currentMoviesList[currentMovieIndex];
+            const videoPlayer = document.getElementById('autoPlayerVideo');
+            const playerTitle = document.getElementById('playerTitle');
+            playerTitle.textContent = movie.title;
+            videoPlayer.src = movie.url;
+            videoPlayer.load();
+            videoPlayer.play().catch(e => console.log("Erreur de lecture automatique:", e));
         }
+        // Arrêter l'autoplay
+        function stopAutoplay() {
+            isAutoplayActive = false;
+            clearInterval(autoplayInterval);
+            const videoPlayer = document.getElementById('autoPlayerVideo');
+            videoPlayer.pause();
+            const miniPlayer = document.getElementById('miniPlayer');
+            miniPlayer.classList.add('hidden');
+        }
+        // Passer au film suivant manuellement
+        function nextMovie() {
+            currentMovieIndex = (currentMovieIndex + 1) % currentMoviesList.length;
+            playCurrentMovie();
+        }
+        // Charger plus de films
+        let currentLimit = 20;
+        function loadMoreMovies() {
+            currentLimit += 20;
+            loadMovies(currentFilter, currentLimit);
+            showModal('Chargement', `Vous avez chargé ${currentLimit} films sur 57,854 disponibles.`);
+        }
+        // Filtrer les films par genre
+        let currentFilter = 'all';
+        function filterMovies(genre) {
+            // Reset active button styles
+            document.querySelectorAll('[id$="FilterBtn"]').forEach(btn => {
+                btn.classList.remove('bg-blue-600');
+                btn.classList.add('bg-gray-700', 'hover:bg-gray-600');
+            });
+            // Set active button style
+            document.getElementById(`${genre}FilterBtn`).classList.remove('bg-gray-700', 'hover:bg-gray-600');
+            document.getElementById(`${genre}FilterBtn`).classList.add('bg-blue-600');
+            currentFilter = genre;
+            currentLimit = 20;
+            loadMovies(genre, currentLimit);
+        }
+        // Afficher une modal
+        function showModal(title, content) {
+            document.getElementById('modalTitle').textContent = title;
+            document.getElementById('modalContent').innerHTML = content;
+            document.getElementById('modal').classList.remove('hidden');
+        }
+        // Fermer la modal
+        function closeModal() {
+            document.getElementById('modal').classList.add('hidden');
+        }
+        // Initialisation
+        document.addEventListener('DOMContentLoaded', () => {
+            generateMovies();
+            loadMovies();
+            // Événements
+            document.getElementById('loadMoreBtn').addEventListener('click', loadMoreMovies);
+            document.getElementById('allFilterBtn').addEventListener('click', () => filterMovies('all'));
+            document.getElementById('actionFilterBtn').addEventListener('click', () => filterMovies('action'));
+            document.getElementById('comedyFilterBtn').addEventListener('click', () => filterMovies('comedy'));
+            document.getElementById('dramaFilterBtn').addEventListener('click', () => filterMovies('drama'));
+            document.getElementById('closeModalBtn').addEventListener('click', closeModal);
+            document.getElementById('cancelModalBtn').addEventListener('click', closeModal);
+            document.getElementById('confirmModalBtn').addEventListener('click', closeModal);
+            document.getElementById('startWatchingBtn').addEventListener('click', () => startAutoplay(0));
+            document.getElementById('nextMovieBtn').addEventListener('click', nextMovie);
+            document.getElementById('stopAutoplayBtn').addEventListener('click', stopAutoplay);
+            document.getElementById('closePlayerBtn').addEventListener('click', stopAutoplay);
+            // Configurer le défilement automatique de la bande de pub
+            const adScroll = document.getElementById('ad-scroll');
+            let scrollPosition = 0;
+            setInterval(() => {
+                scrollPosition += 1;
+                if (scrollPosition >= adScroll.scrollWidth / 2) {
+                    scrollPosition = 0;
+                }
+                adScroll.scrollLeft = scrollPosition;
+            }, 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/stream-flow" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt CHANGED Viewed

@@ -1,3 +1,8 @@
 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..
 https://luckyjohnsonnetwork.com/
-https://flixflow.xyz/ : creer se site en pilote automatique avec des publicité pour monetisé mon site

 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..
 https://luckyjohnsonnetwork.com/
+https://flixflow.xyz/ : creer se site en pilote automatique avec des publicité pour monetisé mon site
+activer toutes les boutons d'accueil
+activer toutes les lectures des film directement en automatique ouvrer dans une nouvel fenetre chaque fois on clique sur un film a regarder je veux toutes les film en langue francais
+ajouté 57854 film en lecture pilotage automatique
+activer toutes les bouton en automatique
+je veux que toutes les film joue en autopilotage