Spaces:
Running
Running
| <html lang="fr"> | |
| <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> | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 100%); | |
| } | |
| .movie-card:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.3); | |
| } | |
| .ad-container { | |
| transition: all 0.3s ease; | |
| } | |
| .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 href="#" class="flex items-center"> | |
| <i class="fas fa-play-circle text-blue-500 text-3xl mr-2"></i> | |
| <span class="text-2xl font-bold">StreamFlow</span> | |
| </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"> | |
| <div class="relative hidden md:block"> | |
| <input type="text" placeholder="Rechercher..." class="bg-gray-700 px-4 py-1 rounded-full w-64 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <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> | |
| </div> | |
| </nav> | |
| <!-- Hero Section with Ad --> | |
| <section class="hero-gradient py-16"> | |
| <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> | |
| <div class="md:w-1/3"> | |
| <!-- Publicité premium --> | |
| <div class="ad-container bg-yellow-500 text-gray-900 p-4 rounded-lg shadow-lg"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-crown text-xl mr-2"></i> | |
| <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> | |
| </section> | |
| <!-- Bande de publicité --> | |
| <div class="bg-gray-800 py-4"> | |
| <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> | |
| </div> | |
| </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> | |
| <span class="text-xs">Saison 3</span> | |
| </div> | |
| </div> | |
| </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> | |
| <!-- Série 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="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> | |
| <span class="text-xs">Saison 4</span> | |
| </div> | |
| </div> | |
| </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> | |
| <!-- Série 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="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> | |
| <span class="text-xs">Saison 2</span> | |
| </div> | |
| </div> | |
| </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> | |
| <!-- Série 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="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> | |
| <span class="text-xs">Saison 5</span> | |
| </div> | |
| </div> | |
| </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> | |
| <!-- Série 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="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> | |
| <span class="text-xs">Saison 1</span> | |
| </div> | |
| </div> | |
| </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> | |
| <!-- Série 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="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> | |
| <span class="text-xs">Saison 2</span> | |
| </div> | |
| </div> | |
| </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> | |
| </section> | |
| <!-- Publicité native --> | |
| <div class="ad-container bg-gray-800 rounded-lg p-4 mb-12 flex items-center"> | |
| <div class="w-16 h-16 bg-blue-500 rounded-lg flex items-center justify-center mr-4"> | |
| <i class="fas fa-gamepad text-2xl"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <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> | |
| <!-- Nouveauté 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="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> | |
| <!-- Nouveauté 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="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> | |
| <!-- Nouveauté 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="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> | |
| <!-- Nouveauté 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="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> | |
| <!-- Nouveauté 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="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> | |
| </section> | |
| </div> | |
| <!-- Footer with Ads --> | |
| <footer class="bg-gray-800 pt-12 pb-6"> | |
| <div class="container mx-auto px-4"> | |
| <!-- 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> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <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> |