Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>StreamFlow - 57,854 Films en Français (AutoPlay)</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, #1a1a2e 0%, #16213e 50%, #0f3460 100%); | |
| } | |
| .movie-card:hover { | |
| transform: scale(1.03); | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.3); | |
| } | |
| .skeleton { | |
| animation: pulse 2s infinite ease-in-out; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .movie-counter { | |
| font-size: 1.2rem; | |
| background: linear-gradient(90deg, #e94560, #ff6b6b); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| font-weight: bold; | |
| } | |
| .auto-play-badge { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| background-color: #e94560; | |
| color: white; | |
| padding: 3px 8px; | |
| border-radius: 4px; | |
| font-size: 12px; | |
| font-weight: bold; | |
| z-index: 10; | |
| } | |
| .auto-play-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0,0,0,0.7); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| color: white; | |
| z-index: 5; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white"> | |
| <!-- Header --> | |
| <header 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-3"> | |
| <i class="fas fa-play-circle text-3xl text-red-500"></i> | |
| <h1 class="text-2xl font-bold">StreamFlow <span class="movie-counter">57,854 Films</span></h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-green-600 px-4 py-2 rounded-full font-medium"> | |
| <i class="fas fa-robot mr-2"></i>Mode AutoPlay Activé | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <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-1/2 mb-10 md:mb-0"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4">57,854 Films Français <span class="text-red-400">en AutoPlay</span></h2> | |
| <p class="text-lg text-gray-300 mb-6">Notre système de lecture automatique vous permet de regarder tous les films sans interruption.</p> | |
| <div class="flex space-x-4"> | |
| <button id="randomPlay" class="bg-red-600 hover:bg-red-700 px-6 py-3 rounded-full font-bold transition flex items-center"> | |
| <i class="fas fa-random mr-2"></i> Film Aléatoire | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 relative"> | |
| <div id="heroBanner" class="rounded-lg shadow-2xl w-full h-64 md:h-96 bg-gray-700 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-robot text-6xl text-green-500 mb-4"></i> | |
| <p class="text-xl font-bold">Mode AutoPlay Activé</p> | |
| <p class="text-gray-300">Tous les films démarrent automatiquement</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Movie Grid --> | |
| <section class="py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl font-bold"><i class="fas fa-fire text-red-500 mr-2"></i> Films Populaires (AutoPlay)</h2> | |
| <div class="relative"> | |
| <select id="genreFilter" class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg px-4 py-2"> | |
| <option value="all">Tous les genres</option> | |
| <option value="28">Action</option> | |
| <option value="12">Aventure</option> | |
| <option value="16">Animation</option> | |
| <option value="35">Comédie</option> | |
| <option value="80">Crime</option> | |
| <option value="18">Drama</option> | |
| <option value="10751">Famille</option> | |
| <option value="14">Fantastique</option> | |
| <option value="27">Horreur</option> | |
| <option value="878">Science-Fiction</option> | |
| <option value="53">Thriller</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div id="movieGrid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6"> | |
| <!-- Movies will be loaded here --> | |
| <div class="skeleton-card bg-gray-800 rounded-lg overflow-hidden shadow-md"> | |
| <div class="relative pt-[150%] bg-gray-700 skeleton"></div> | |
| <div class="p-3"> | |
| <div class="h-5 bg-gray-700 rounded skeleton mb-2"></div> | |
| <div class="flex justify-between"> | |
| <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div> | |
| <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Repeat skeleton cards --> | |
| <div class="skeleton-card bg-gray-800 rounded-lg overflow-hidden shadow-md"> | |
| <div class="relative pt-[150%] bg-gray-700 skeleton"></div> | |
| <div class="p-3"> | |
| <div class="h-5 bg-gray-700 rounded skeleton mb-2"></div> | |
| <div class="flex justify-between"> | |
| <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div> | |
| <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="skeleton-card bg-gray-800 rounded-lg overflow-hidden shadow-md"> | |
| <div class="relative pt-[150%] bg-gray-700 skeleton"></div> | |
| <div class="p-3"> | |
| <div class="h-5 bg-gray-700 rounded skeleton mb-2"></div> | |
| <div class="flex justify-between"> | |
| <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div> | |
| <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="skeleton-card bg-gray-800 rounded-lg overflow-hidden shadow-md"> | |
| <div class="relative pt-[150%] bg-gray-700 skeleton"></div> | |
| <div class="p-3"> | |
| <div class="h-5 bg-gray-700 rounded skeleton mb-2"></div> | |
| <div class="flex justify-between"> | |
| <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div> | |
| <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="skeleton-card bg-gray-800 rounded-lg overflow-hidden shadow-md"> | |
| <div class="relative pt-[150%] bg-gray-700 skeleton"></div> | |
| <div class="p-3"> | |
| <div class="h-5 bg-gray-700 rounded skeleton mb-2"></div> | |
| <div class="flex justify-between"> | |
| <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div> | |
| <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="skeleton-card bg-gray-800 rounded-lg overflow-hidden shadow-md"> | |
| <div class="relative pt-[150%] bg-gray-700 skeleton"></div> | |
| <div class="p-3"> | |
| <div class="h-5 bg-gray-700 rounded skeleton mb-2"></div> | |
| <div class="flex justify-between"> | |
| <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div> | |
| <div class="h-4 w-10 bg-gray-700 rounded skeleton"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <button id="loadMore" class="bg-gray-800 hover:bg-gray-700 px-6 py-3 rounded-full font-medium transition"> | |
| <i class="fas fa-plus-circle mr-2"></i> Charger plus de films | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 border-t border-gray-700 py-8"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <p class="text-gray-400">© 2023 StreamFlow - 57,854 films disponibles en français</p> | |
| <p class="text-gray-500 text-sm mt-2">Tous les films démarrent automatiquement en lecture</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Configuration | |
| const API_KEY = '3fd2be6f0c70a2a598f084ddfb75487c'; | |
| const BASE_URL = 'https://api.themoviedb.org/3'; | |
| const IMG_URL = 'https://image.tmdb.org/t/p/w500'; | |
| let currentPage = 1; | |
| let currentGenre = 'all'; | |
| let totalMovies = 57854; | |
| const autoPlayEnabled = true; // Toujours activé | |
| // Simuler 57,854 films | |
| async function getMovies(page = 1, genre = 'all') { | |
| try { | |
| let url = `${BASE_URL}/discover/movie?api_key=${API_KEY}&language=fr-FR&page=${page}&sort_by=popularity.desc`; | |
| if (genre !== 'all') { | |
| url += `&with_genres=${genre}`; | |
| } | |
| const response = await fetch(url); | |
| const data = await response.json(); | |
| return data.results; | |
| } catch (error) { | |
| console.error('Error fetching movies:', error); | |
| return []; | |
| } | |
| } | |
| // Afficher les films avec AutoPlay | |
| async function displayMovies() { | |
| const movies = await getMovies(currentPage, currentGenre); | |
| const movieGrid = document.getElementById('movieGrid'); | |
| // Supprimer les squelettes de chargement | |
| document.querySelectorAll('.skeleton-card').forEach(el => el.remove()); | |
| movies.forEach(movie => { | |
| const movieCard = document.createElement('div'); | |
| movieCard.className = 'movie-card bg-gray-800 rounded-lg overflow-hidden shadow-md cursor-pointer transition'; | |
| movieCard.innerHTML = ` | |
| <div class="relative pt-[150%] bg-gray-700"> | |
| <div class="auto-play-badge">AUTO</div> | |
| <img src="${movie.poster_path ? IMG_URL + movie.poster_path : 'https://via.placeholder.com/500x750?text=No+Poster'}" | |
| alt="${movie.title}" | |
| class="absolute top-0 left-0 w-full h-full object-cover"> | |
| <div class="auto-play-overlay"> | |
| <i class="fas fa-play-circle text-4xl text-green-500 mb-2"></i> | |
| <p class="font-bold">Lecture Auto</p> | |
| <p class="text-sm">Cliquez pour démarrer</p> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-medium truncate">${movie.title}</h3> | |
| <div class="flex justify-between items-center mt-2 text-sm text-gray-400"> | |
| <span>${movie.release_date ? movie.release_date.substring(0, 4) : 'N/A'}</span> | |
| <span class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| ${movie.vote_average ? movie.vote_average.toFixed(1) : 'N/A'} | |
| </span> | |
| </div> | |
| </div> | |
| `; | |
| // Ouvrir le film avec lecture automatique | |
| movieCard.addEventListener('click', () => { | |
| openMoviePlayer(movie); | |
| }); | |
| movieGrid.appendChild(movieCard); | |
| }); | |
| } | |
| // Ouvrir un lecteur de film avec lecture automatique | |
| function openMoviePlayer(movie) { | |
| // URL de démonstration avec autoplay | |
| const videoUrl = "https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&mute=0"; | |
| const playerWindow = window.open('', '_blank', 'width=1200,height=700,top=100,left=100'); | |
| playerWindow.document.write(` | |
| <!DOCTYPE html> | |
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>${movie.title} - StreamFlow (AutoPlay)</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> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| background-color: #000; | |
| color: white; | |
| font-family: sans-serif; | |
| } | |
| .player-container { | |
| position: relative; | |
| width: 100%; | |
| height: 0; | |
| padding-bottom: 56.25%; | |
| } | |
| .player-container iframe { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| } | |
| .auto-play-notice { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| background-color: rgba(0,0,0,0.7); | |
| color: #10b981; | |
| padding: 5px 10px; | |
| border-radius: 4px; | |
| font-size: 14px; | |
| z-index: 10; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="player-container"> | |
| <div class="auto-play-notice"> | |
| <i class="fas fa-robot mr-1"></i> AutoPlay Activé | |
| </div> | |
| <iframe src="${videoUrl}" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe> | |
| </div> | |
| <div class="bg-gray-900 p-4"> | |
| <h1 class="text-2xl font-bold">${movie.title} <span class="text-green-500 text-sm">(Lecture Auto)</span></h1> | |
| <p class="text-gray-300 mt-2">${movie.overview || 'Description non disponible'}</p> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div> | |
| <span class="text-yellow-400"> | |
| <i class="fas fa-star"></i> ${movie.vote_average ? movie.vote_average.toFixed(1) : 'N/A'} | |
| </span> | |
| <span class="ml-4">${movie.release_date ? movie.release_date.substring(0, 4) : 'N/A'}</span> | |
| </div> | |
| <button onclick="window.close()" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded"> | |
| <i class="fas fa-times mr-2"></i> Fermer | |
| </button> | |
| </div> | |
| </div> | |
| <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/streamflow" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |