Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NexusStream - Plateforme de Streaming Automatisé</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"> | |
| <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap'); | |
| :root { | |
| --neon-purple: #a855f7; | |
| --neon-blue: #3b82f6; | |
| --neon-pink: #ec4899; | |
| --neon-cyan: #06b6d4; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #0f172a; | |
| color: white; | |
| overflow-x: hidden; | |
| } | |
| .futuristic-font { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .movie-card { | |
| transition: all 0.3s ease; | |
| position: relative; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .movie-card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3); | |
| } | |
| .poster-placeholder { | |
| background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); | |
| } | |
| .loading-spinner { | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| #video-player { | |
| width: 100%; | |
| height: 70vh; | |
| background-color: black; | |
| border-radius: 16px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .progress-container { | |
| height: 6px; | |
| background-color: #334155; | |
| border-radius: 3px; | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--neon-purple), var(--neon-blue)); | |
| width: 0%; | |
| border-radius: 3px; | |
| } | |
| .automation-panel { | |
| background: rgba(15, 23, 42, 0.9); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(168, 85, 247, 0.2); | |
| border-radius: 16px; | |
| } | |
| .genre-filter { | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--neon-purple) #1e293b; | |
| } | |
| .genre-filter::-webkit-scrollbar { | |
| height: 6px; | |
| } | |
| .genre-filter::-webkit-scrollbar-track { | |
| background: #1e293b; | |
| } | |
| .genre-filter::-webkit-scrollbar-thumb { | |
| background-color: var(--neon-purple); | |
| border-radius: 6px; | |
| } | |
| .server-card { | |
| background: linear-gradient(145deg, #1e293b, #0f172a); | |
| border: 1px solid rgba(168, 85, 247, 0.2); | |
| transition: all 0.3s ease; | |
| } | |
| .server-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px -3px rgba(168, 85, 247, 0.3); | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 5px var(--neon-purple), 0 0 10px var(--neon-purple); | |
| } | |
| .neon-border { | |
| box-shadow: 0 0 10px var(--neon-purple), 0 0 20px rgba(168, 85, 247, 0.3); | |
| } | |
| .neon-button { | |
| background: linear-gradient(90deg, var(--neon-purple), var(--neon-blue)); | |
| transition: all 0.3s ease; | |
| } | |
| .neon-button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(168, 85, 247, 0.4); | |
| } | |
| .language-selector { | |
| background: rgba(15, 23, 42, 0.8); | |
| border: 1px solid rgba(168, 85, 247, 0.3); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.6; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.6; } | |
| } | |
| .robot-icon { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .glow-effect { | |
| position: relative; | |
| } | |
| .glow-effect::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: radial-gradient(circle at center, rgba(168, 85, 247, 0.2) 0%, transparent 70%); | |
| z-index: -1; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .glow-effect:hover::after { | |
| opacity: 1; | |
| } | |
| .server-status-indicator { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin-right: 6px; | |
| } | |
| .server-status-online { | |
| background-color: #10b981; | |
| box-shadow: 0 0 10px #10b981; | |
| } | |
| .server-status-optimizing { | |
| background-color: #f59e0b; | |
| box-shadow: 0 0 10px #f59e0b; | |
| animation: pulse 1.5s infinite; | |
| } | |
| .server-status-offline { | |
| background-color: #ef4444; | |
| box-shadow: 0 0 10px #ef4444; | |
| } | |
| .search-box { | |
| background: rgba(30, 41, 59, 0.7); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(168, 85, 247, 0.3); | |
| } | |
| .search-box:focus { | |
| outline: none; | |
| border-color: var(--neon-purple); | |
| box-shadow: 0 0 10px rgba(168, 85, 247, 0.5); | |
| } | |
| .neon-tab { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .neon-tab::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, var(--neon-purple), var(--neon-blue)); | |
| transition: width 0.3s ease; | |
| } | |
| .neon-tab.active::after { | |
| width: 100%; | |
| } | |
| .cyber-grid { | |
| background-image: | |
| linear-gradient(rgba(168, 85, 247, 0.1) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(168, 85, 247, 0.1) 1px, transparent 1px); | |
| background-size: 40px 40px; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen cyber-grid"> | |
| <!-- Navigation --> | |
| <nav class="bg-gray-900 bg-opacity-90 backdrop-blur-md fixed w-full z-50 shadow-lg border-b border-purple-900/30"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-robot text-purple-400 mr-2 text-xl"></i> | |
| <span class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-400 futuristic-font">NexusStream</span> | |
| </div> | |
| <div class="hidden md:block ml-10"> | |
| <div class="flex space-x-1"> | |
| <a href="#" class="text-white px-4 py-2 rounded-md text-sm font-medium bg-gradient-to-r from-purple-600 to-blue-600 shadow-lg neon-tab active"> | |
| <i class="fas fa-home mr-2"></i>Accueil | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-white px-4 py-2 rounded-md text-sm font-medium neon-tab"> | |
| <i class="fas fa-film mr-2"></i>Bibliothèque | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-white px-4 py-2 rounded-md text-sm font-medium neon-tab"> | |
| <i class="fas fa-robot mr-2"></i>Automatisation | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-white px-4 py-2 rounded-md text-sm font-medium neon-tab"> | |
| <i class="fas fa-server mr-2"></i>Serveurs | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-4 flex items-center md:ml-6 space-x-4"> | |
| <div class="relative"> | |
| <div class="search-box flex items-center px-4 py-2 rounded-full"> | |
| <input type="text" id="search-input" placeholder="Rechercher un film..." | |
| class="bg-transparent text-white px-2 py-1 w-64 focus:outline-none placeholder-gray-400"> | |
| <button id="search-btn" class="text-gray-400 hover:text-white ml-2"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <select id="language-select" class="language-selector text-white rounded-full px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <option value="fr-FR">🇫🇷 Français</option> | |
| <option value="en-US">🇺🇸 English</option> | |
| <option value="es-ES">🇪🇸 Español</option> | |
| <option value="de-DE">🇩🇪 Deutsch</option> | |
| <option value="it-IT">🇮🇹 Italiano</option> | |
| <option value="ja-JP">🇯🇵 日本語</option> | |
| </select> | |
| </div> | |
| <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none relative glow-effect"> | |
| <i class="fas fa-user-circle text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="pt-24 pb-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <!-- Player Section --> | |
| <section class="mb-12 rounded-xl overflow-hidden shadow-2xl neon-border"> | |
| <div id="video-player" class="relative"> | |
| <video id="video" class="w-full h-full" controls></video> | |
| <div id="player-overlay" class="absolute inset-0 bg-black bg-opacity-70 flex flex-col items-center justify-center"> | |
| <div class="text-center p-6 max-w-2xl"> | |
| <div class="robot-icon mb-6"> | |
| <i class="fas fa-robot text-6xl text-purple-400"></i> | |
| </div> | |
| <h2 class="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-400 mb-4 futuristic-font">NEXUS STREAM</h2> | |
| <p class="text-gray-300 mb-6 text-lg">Système automatisé de recherche et streaming haute performance</p> | |
| <button id="start-demo" class="neon-button text-white px-8 py-3 rounded-lg font-medium text-lg shadow-lg"> | |
| <i class="fas fa-play mr-2"></i> Démarrer l'expérience | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-r from-gray-800 to-gray-900 p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h2 id="current-movie-title" class="text-xl font-bold text-white"> | |
| <i class="fas fa-film text-purple-400 mr-2"></i> | |
| <span>Aucun film sélectionné</span> | |
| </h2> | |
| <div class="flex items-center space-x-4"> | |
| <button id="auto-next" class="text-purple-400 hover:text-purple-300 flex items-center"> | |
| <i class="fas fa-robot mr-2"></i> <span>Auto ON</span> | |
| </button> | |
| <button id="quality-btn" class="text-gray-300 hover:text-white flex items-center"> | |
| <i class="fas fa-tachometer-alt mr-2"></i> <span>Auto (1080p)</span> | |
| </button> | |
| <button id="subtitle-btn" class="text-gray-300 hover:text-white flex items-center"> | |
| <i class="fas fa-closed-captioning mr-2"></i> <span>FR</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="progress-container mb-2"> | |
| <div id="progress-bar" class="progress-bar"></div> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-400"> | |
| <span id="current-time">00:00:00</span> | |
| <span id="duration">00:00:00</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Server Network Panel --> | |
| <section class="mb-12 automation-panel rounded-xl p-6 shadow-lg"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-400 futuristic-font"> | |
| <i class="fas fa-network-wired mr-3"></i>Réseau de Serveurs Automatisés | |
| </h2> | |
| <div class="flex items-center space-x-3"> | |
| <span class="text-sm text-gray-300"><span id="active-servers">15</span>/<span id="total-servers">25</span> serveurs actifs</span> | |
| <div class="h-2 w-2 rounded-full bg-green-500 animate-pulse"></div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Crawler Server --> | |
| <div class="server-card p-4 rounded-lg glow-effect"> | |
| <div class="flex items-center mb-3"> | |
| <div class="server-status-indicator server-status-online"></div> | |
| <h3 class="text-lg font-semibold text-white">Crawler Alpha</h3> | |
| </div> | |
| <p class="text-gray-400 text-sm mb-4">Robot spécialisé dans la recherche automatique de sources vidéo en français</p> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span><i class="fas fa-bolt mr-1"></i> 98% succès</span> | |
| <span><i class="fas fa-clock mr-1"></i> 0.4s latency</span> | |
| </div> | |
| <div class="mt-3 bg-gray-900 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-purple-500 to-blue-500 h-2 rounded-full" style="width: 98%"></div> | |
| </div> | |
| </div> | |
| <!-- AI Translator Server --> | |
| <div class="server-card p-4 rounded-lg glow-effect"> | |
| <div class="flex items-center mb-3"> | |
| <div class="server-status-indicator server-status-online"></div> | |
| <h3 class="text-lg font-semibold text-white">AI Translator</h3> | |
| </div> | |
| <p class="text-gray-400 text-sm mb-4">Traduction automatique et synchronisation des sous-titres en 12 langues</p> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span><i class="fas fa-language mr-1"></i> 12 langues</span> | |
| <span><i class="fas fa-database mr-1"></i> 3.2TB data</span> | |
| </div> | |
| <div class="mt-3 bg-gray-900 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-blue-500 to-cyan-500 h-2 rounded-full" style="width: 92%"></div> | |
| </div> | |
| </div> | |
| <!-- Quality Optimizer --> | |
| <div class="server-card p-4 rounded-lg glow-effect"> | |
| <div class="flex items-center mb-3"> | |
| <div class="server-status-indicator server-status-optimizing"></div> | |
| <h3 class="text-lg font-semibold text-white">Quality Optimizer</h3> | |
| </div> | |
| <p class="text-gray-400 text-sm mb-4">Adaptation automatique de la qualité en fonction de votre connexion</p> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span><i class="fas fa-sliders-h mr-1"></i> 4K/1080p/720p</span> | |
| <span><i class="fas fa-wifi mr-1"></i> 12Mbps</span> | |
| </div> | |
| <div class="mt-3 bg-gray-900 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-cyan-500 to-green-500 h-2 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <button id="optimize-servers" class="w-full bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white py-3 rounded-lg font-medium flex items-center justify-center"> | |
| <i class="fas fa-sync-alt mr-3"></i> Optimiser le réseau | |
| </button> | |
| <button id="server-stats-btn" class="w-full bg-gray-800 hover:bg-gray-700 text-white py-3 rounded-lg font-medium flex items-center justify-center"> | |
| <i class="fas fa-chart-line mr-3"></i> Statistiques avancées | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Automation Panel --> | |
| <section class="mb-12 automation-panel rounded-xl p-6 shadow-lg"> | |
| <h2 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-400 mb-6 futuristic-font"> | |
| <i class="fas fa-robot mr-3"></i>Panneau d'Automatisation | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-gray-800 p-4 rounded-lg glow-effect"> | |
| <h3 class="text-lg font-semibold text-white mb-3"><i class="fas fa-cog mr-2 text-purple-400"></i>Paramètres</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm text-gray-300 mb-1">Mode de lecture</label> | |
| <select id="playback-mode" class="w-full bg-gray-700 text-white rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <option value="sequential">Séquentiel</option> | |
| <option value="random">Aléatoire</option> | |
| <option value="by_genre">Par genre</option> | |
| <option value="by_year">Par année</option> | |
| <option value="ai_recommend">Recommandation IA</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-300 mb-1">Langue préférée</label> | |
| <select id="preferred-language" class="w-full bg-gray-700 text-white rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <option value="fr">Français</option> | |
| <option value="en">English</option> | |
| <option value="es">Español</option> | |
| <option value="de">Deutsch</option> | |
| <option value="it">Italiano</option> | |
| <option value="ja">日本語</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-300 mb-1">Qualité automatique</label> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" id="adaptive-quality" class="form-checkbox h-5 w-5 text-purple-600 rounded focus:ring-purple-500" checked> | |
| <span class="ml-2 text-gray-300">Adaptative</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 p-4 rounded-lg glow-effect"> | |
| <h3 class="text-lg font-semibold text-white mb-3"><i class="fas fa-server mr-2 text-blue-400"></i>Serveurs</h3> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-300"><span class="server-status-indicator server-status-online"></span> Serveur Principal</span> | |
| <span class="text-green-400 text-sm font-mono">Paris, FR</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-300"><span class="server-status-indicator server-status-online"></span> Serveur Secondaire</span> | |
| <span class="text-green-400 text-sm font-mono">Montréal, CA</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-300"><span class="server-status-indicator server-status-online"></span> Serveur Cloud</span> | |
| <span class="text-green-400 text-sm font-mono">Global CDN</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-300"><span class="server-status-indicator server-status-optimizing"></span> AI Translator</span> | |
| <span class="text-yellow-400 text-sm font-mono">Optimizing...</span> | |
| </div> | |
| <div class="mt-4"> | |
| <button id="server-details-btn" class="w-full bg-gray-700 hover:bg-gray-600 text-white py-2 rounded text-sm"> | |
| <i class="fas fa-info-circle mr-2"></i> Détails techniques | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 p-4 rounded-lg glow-effect"> | |
| <h3 class="text-lg font-semibold text-white mb-3"><i class="fas fa-bolt mr-2 text-yellow-400"></i>Actions Rapides</h3> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button id="play-btn" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-3 rounded text-sm flex items-center justify-center"> | |
| <i class="fas fa-play mr-1"></i> Démarrer | |
| </button> | |
| <button id="pause-btn" class="bg-gray-700 hover:bg-gray-600 text-white py-2 px-3 rounded text-sm flex items-center justify-center"> | |
| <i class="fas fa-pause mr-1"></i> Pause | |
| </button> | |
| <button id="random-btn" class="bg-purple-600 hover:bg-purple-700 text-white py-2 px-3 rounded text-sm flex items-center justify-center"> | |
| <i class="fas fa-random mr-1"></i> Aléatoire | |
| </button> | |
| <button id="add-to-list" class="bg-green-600 hover:bg-green-700 text-white py-2 px-3 rounded text-sm flex items-center justify-center"> | |
| <i class="fas fa-plus mr-1"></i> Liste | |
| </button> | |
| <button id="favorite-btn" class="bg-yellow-600 hover:bg-yellow-700 text-white py-2 px-3 rounded text-sm flex items-center justify-center"> | |
| <i class="fas fa-star mr-1"></i> Favoris | |
| </button> | |
| <button id="stop-btn" class="bg-red-600 hover:bg-red-700 text-white py-2 px-3 rounded text-sm flex items-center justify-center"> | |
| <i class="fas fa-power-off mr-1"></i> Stop | |
| </button> | |
| </div> | |
| <div class="mt-4"> | |
| <button id="ai-recommend-btn" class="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white py-2 rounded text-sm flex items-center justify-center"> | |
| <i class="fas fa-brain mr-2"></i> Recommandation IA | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Filters --> | |
| <section class="mb-6 bg-gray-800 rounded-lg p-4 glow-effect"> | |
| <div class="flex flex-wrap items-center justify-between gap-4"> | |
| <div class="flex items-center space-x-4"> | |
| <h3 class="text-lg font-semibold text-white"> | |
| <i class="fas fa-filter text-purple-400 mr-2"></i> | |
| Filtres : | |
| </h3> | |
| <select id="year-filter" class="bg-gray-700 text-white rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <option value="">Toutes les années</option> | |
| <option value="2023">2023</option> | |
| <option value="2022">2022</option> | |
| <option value="2021">2021</option> | |
| <option value="2020">2020</option> | |
| <option value="2010-2019">2010-2019</option> | |
| <option value="2000-2009">2000-2009</option> | |
| <option value="1990-1999">1990-1999</option> | |
| <option value="1980-1989">1980-1989</option> | |
| <option value="1970-1979">1970-1979</option> | |
| </select> | |
| <select id="rating-filter" class="bg-gray-700 text-white rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <option value="0">Toutes les notes</option> | |
| <option value="9">9+</option> | |
| <option value="8">8+</option> | |
| <option value="7">7+</option> | |
| <option value="6">6+</option> | |
| </select> | |
| <select id="language-filter" class="bg-gray-700 text-white rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <option value="">Toutes langues</option> | |
| <option value="fr">Français</option> | |
| <option value="en">English</option> | |
| <option value="es">Español</option> | |
| <option value="de">Deutsch</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-sm text-gray-300">Trier par :</span> | |
| <select id="sort-by" class="bg-gray-700 text-white rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <option value="popularity.desc">Popularité</option> | |
| <option value="vote_average.desc">Note</option> | |
| <option value="release_date.desc">Date de sortie</option> | |
| <option value="revenue.desc">Box-office</option> | |
| <option value="ai_score.desc">Score IA</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mt-4 genre-filter flex space-x-3 overflow-x-auto py-2"> | |
| <button class="genre-tag px-3 py-1 bg-purple-600 text-white rounded-full text-sm whitespace-nowrap" data-id="">Tous</button> | |
| <!-- Genres will be loaded here --> | |
| </div> | |
| </section> | |
| <!-- Movie Library --> | |
| <section class="mb-12"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-white"> | |
| <i class="fas fa-film text-purple-400 mr-2"></i> | |
| <span id="library-title">Bibliothèque de Films</span> | |
| <span id="movie-count" class="text-gray-400 text-lg ml-2">(Chargement...)</span> | |
| </h2> | |
| <div class="flex space-x-3"> | |
| <button id="refresh-btn" class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-white rounded-lg flex items-center"> | |
| <i class="fas fa-sync-alt mr-2"></i>Actualiser | |
| </button> | |
| <button id="random-movie-btn" class="px-4 py-2 bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white rounded-lg flex items-center"> | |
| <i class="fas fa-random mr-2"></i>Aléatoire | |
| </button> | |
| </div> | |
| </div> | |
| <div id="loading-indicator" class="flex justify-center items-center py-12"> | |
| <div class="relative"> | |
| <div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-purple-500"></div> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i class="fas fa-robot text-purple-400 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="movie-library"> | |
| <!-- Movie cards will be loaded here --> | |
| </div> | |
| <div id="load-more-container" class="mt-8 text-center hidden"> | |
| <button id="load-more-btn" class="px-8 py-3 bg-gray-800 hover:bg-gray-700 text-white rounded-lg font-medium flex items-center justify-center mx-auto"> | |
| <i class="fas fa-arrow-down mr-2"></i> Charger plus de films | |
| </button> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-gray-400 py-8 border-t border-purple-900/30"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-white text-lg font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-robot text-purple-400 mr-2"></i>NexusStream | |
| </h3> | |
| <p class="text-sm">Plateforme de streaming automatisé avec recherche intelligente de sources et gestion optimisée des serveurs.</p> | |
| <div class="mt-4 flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-discord"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-lg font-semibold mb-4">Technologies</h3> | |
| <ul class="space-y-2 text-sm"> | |
| <li class="flex items-center"><span class="w-2 h-2 bg-purple-400 rounded-full mr-2"></span> <span class="text-purple-400">AI Crawlers</span> - Recherche automatique</li> | |
| <li class="flex items-center"><span class="w-2 h-2 bg-blue-400 rounded-full mr-2"></span> <span class="text-blue-400">HLS.js</span> - Streaming adaptatif</li> | |
| <li class="flex items-center"><span class="w-2 h-2 bg-cyan-400 rounded-full mr-2"></span> <span class="text-cyan-400">WebRTC</span> - P2P optimisé</li> | |
| <li class="flex items-center"><span class="w-2 h-2 bg-pink-400 rounded-full mr-2"></span> <span class="text-pink-400">NLP</span> - Traduction automatique</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-lg font-semibold mb-4">Performances</h3> | |
| <ul class="space-y-2 text-sm"> | |
| <li class="flex items-center"><i class="fas fa-bolt text-yellow-400 mr-3"></i>Latence minimale (0.2-0.5s)</li> | |
| <li class="flex items-center"><i class="fas fa-tachometer-alt text-green-400 mr-3"></i>4K Ultra HD & Dolby Atmos</li> | |
| <li class="flex items-center"><i class="fas fa-server text-blue-400 mr-3"></i>25 serveurs mondiaux</li> | |
| <li class="flex items-center"><i class="fas fa-language text-purple-400 mr-3"></i>12 langues supportées</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-lg font-semibold mb-4">Support</h3> | |
| <div class="space-y-3"> | |
| <a href="#" class="flex items-center text-gray-400 hover:text-white"> | |
| <i class="fas fa-question-circle mr-3"></i> Centre d'aide | |
| </a> | |
| <a href="#" class="flex items-center text-gray-400 hover:text-white"> | |
| <i class="fas fa-bug mr-3"></i> Signaler un problème | |
| </a> | |
| <a href="#" class="flex items-center text-gray-400 hover:text-white"> | |
| <i class="fas fa-lightbulb mr-3"></i> Suggestions | |
| </a> | |
| <a href="#" class="flex items-center text-gray-400 hover:text-white"> | |
| <i class="fas fa-envelope mr-3"></i> Contact | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-sm text-center"> | |
| <p>© 2023 NexusStream. Système automatisé de streaming haute performance.</p> | |
| <p class="mt-2 text-xs text-gray-600">Cette application utilise l'API TMDb mais n'est pas approuvée ou certifiée par TMDb.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Configuration | |
| const TMDB_API_KEY = 'fb437b10727a5a4eb8d9134e29c82ae0'; | |
| const TMDB_ACCESS_TOKEN = 'eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJmYjQzN2IxMDcyN2E1YTRlYjhkOTEzNGUyOWM4MmFlMCIsInN1YiI6IjY0MmM3ZmQ2OGI5NTllMDBmNDRkNzNhMCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.Nhl261Ha3z0Ujg5vM1PpFoZBiTGjlXQ1g9VFPh6dVvs'; | |
| const BASE_URL = 'https://api.themoviedb.org/3'; | |
| const IMAGE_BASE_URL = 'https://image.tmdb.org/t/p/w500'; | |
| const BACKDROP_BASE_URL = 'https://image.tmdb.org/t/p/original'; | |
| // Elements | |
| const video = document.getElementById('video'); | |
| const videoPlayer = document.getElementById('video-player'); | |
| const playerOverlay = document.getElementById('player-overlay'); | |
| const progressBar = document.getElementById('progress-bar'); | |
| const currentTime = document.getElementById('current-time'); | |
| const duration = document.getElementById('duration'); | |
| const autoNextBtn = document.getElementById('auto-next'); | |
| const movieLibrary = document.getElementById('movie-library'); | |
| const currentMovieTitle = document.getElementById('current-movie-title'); | |
| const loadingIndicator = document.getElementById('loading-indicator'); | |
| const loadMoreContainer = document.getElementById('load-more-container'); | |
| const loadMoreBtn = document.getElementById('load-more-btn'); | |
| const movieCount = document.getElementById('movie-count'); | |
| const libraryTitle = document.getElementById('library-title'); | |
| const searchInput = document.getElementById('search-input'); | |
| const searchBtn = document.getElementById('search-btn'); | |
| const refreshBtn = document.getElementById('refresh-btn'); | |
| const randomMovieBtn = document.getElementById('random-movie-btn'); | |
| const genreFilterContainer = document.querySelector('.genre-filter'); | |
| const yearFilter = document.getElementById('year-filter'); | |
| const ratingFilter = document.getElementById('rating-filter'); | |
| const languageFilter = document.getElementById('language-filter'); | |
| const sortBy = document.getElementById('sort-by'); | |
| const startDemoBtn = document.getElementById('start-demo'); | |
| const languageSelect = document.getElementById('language-select'); | |
| const preferredLanguage = document.getElementById('preferred-language'); | |
| const optimizeServersBtn = document.getElementById('optimize-servers'); | |
| const aiRecommendBtn = document.getElementById('ai-recommend-btn'); | |
| const activeServersSpan = document.getElementById('active-servers'); | |
| const totalServersSpan = document.getElementById('total-servers'); | |
| // Player controls | |
| const playBtn = document.getElementById('play-btn'); | |
| const pauseBtn = document.getElementById('pause-btn'); | |
| const randomBtn = document.getElementById('random-btn'); | |
| const addToListBtn = document.getElementById('add-to-list'); | |
| const favoriteBtn = document.getElementById('favorite-btn'); | |
| const stopBtn = document.getElementById('stop-btn'); | |
| const subtitleBtn = document.getElementById('subtitle-btn'); | |
| const qualityBtn = document.getElementById('quality-btn'); | |
| // State | |
| let hls = new Hls(); | |
| let autoPlayEnabled = true; | |
| let currentMovieIndex = 0; | |
| let currentPage = 1; | |
| let totalPages = 1; | |
| let totalResults = 0; | |
| let currentMovies = []; | |
| let genres = []; | |
| let currentGenre = ''; | |
| let currentSearchQuery = ''; | |
| let isSearching = false; | |
| let currentLanguage = 'fr-FR'; | |
| let serverOptimizationInProgress = false; | |
| // Initialize player with automated source finding | |
| function initPlayer(movie) { | |
| // Simulate automated source finding | |
| simulateFindSources(movie).then(sources => { | |
| const bestSource = findBestSource(sources); | |
| if (bestSource) { | |
| playMovieFromSource(bestSource.url, movie); | |
| } else { | |
| showError("Aucune source valide trouvée pour ce film"); | |
| } | |
| }); | |
| } | |
| // Simulate automated source finding with crawlers | |
| function simulateFindSources(movie) { | |
| return new Promise((resolve) => { | |
| // Show loading state | |
| playerOverlay.classList.remove('hidden'); | |
| playerOverlay.innerHTML = ` | |
| <div class="text-center p-6 max-w-2xl"> | |
| <div class="robot-icon mb-6"> | |
| <i class="fas fa-robot text-6xl text-purple-400"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold text-white mb-4">Recherche de sources en cours...</h2> | |
| <p class="text-gray-300 mb-6">Notre réseau automatisé recherche les meilleures sources pour "${movie.title}"</p> | |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> | |
| <div id="search-progress" class="bg-gradient-to-r from-purple-500 to-blue-500 h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| <div class="mt-4 grid grid-cols-3 gap-4 text-xs text-gray-400"> | |
| <div><i class="fas fa-server mr-1"></i> <span id="server-count">0</span>/5 serveurs</div> | |
| <div><i class="fas fa-check-circle mr-1"></i> <span id="source-count">0</span> sources trouvées</div> | |
| <div><i class="fas fa-bolt mr-1"></i> <span id="speed-indicator">0.0</span> Mbps</div> | |
| </div> | |
| </div> | |
| `; | |
| // Simulate progress | |
| let progress = 0; | |
| let servers = 0; | |
| let sources = 0; | |
| let speed = 0; | |
| const progressInterval = setInterval(() => { | |
| progress += Math.random() * 10; | |
| if (progress >= 100) progress = 100; | |
| document.getElementById('search-progress').style.width = `${progress}%`; | |
| // Simulate servers connecting | |
| if (progress > 20 && servers < 5) { | |
| servers++; | |
| document.getElementById('server-count').textContent = servers; | |
| } | |
| // Simulate sources found | |
| if (progress > 40 && sources < 3) { | |
| sources += Math.floor(Math.random()); | |
| document.getElementById('source-count').textContent = sources; | |
| } | |
| // Simulate speed test | |
| if (progress > 60 && speed < 12) { | |
| speed += Math.random() * 2; | |
| document.getElementById('speed-indicator').textContent = speed.toFixed(1); | |
| } | |
| if (progress >= 100) { | |
| clearInterval(progressInterval); | |
| // Simulate found sources (in a real app, these would be actual sources) | |
| const demoSources = [ | |
| { | |
| url: getMovieStreamUrl(movie), // Use the new function to get real URLs | |
| quality: '1080p', | |
| language: 'fr', | |
| type: 'hls', | |
| server: 'Paris #1', | |
| bitrate: 4500 | |
| }, | |
| { | |
| url: getMovieStreamUrl(movie, '720p'), | |
| quality: '720p', | |
| language: 'fr', | |
| type: 'hls', | |
| server: 'Montréal #2', | |
| bitrate: 2500 | |
| }, | |
| { | |
| url: getMovieStreamUrl(movie, '480p'), | |
| quality: '480p', | |
| language: 'en', | |
| type: 'hls', | |
| server: 'Londres #3', | |
| bitrate: 1200 | |
| } | |
| ]; | |
| setTimeout(() => resolve(demoSources), 500); | |
| } | |
| }, 200); | |
| }); | |
| } | |
| // Function to get real movie stream URLs based on movie ID and quality | |
| function getMovieStreamUrl(movie, quality = '1080p') { | |
| // This is a simulation - in a real app, you would use a proper API or backend service | |
| // Here we're using some public test streams and mapping them to movie IDs | |
| const movieStreams = { | |
| // Popular movies with test streams | |
| 299534: { // Avengers: Endgame | |
| '1080p': 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', | |
| '720p': 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', | |
| '480p': 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8' | |
| }, | |
| 181808: { // Star Wars: The Last Jedi | |
| '1080p': 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', | |
| '720p': 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', | |
| '480p': 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8' | |
| }, | |
| 284054: { // Black Panther | |
| '1080p': 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', | |
| '720p': 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', | |
| '480p': 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8' | |
| }, | |
| 383498: { // Deadpool 2 | |
| '1080p': 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', | |
| '720p': 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', | |
| '480p': 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8' | |
| }, | |
| 353081: { // Mission: Impossible - Fallout | |
| '1080p': 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', | |
| '720p': 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', | |
| '480p': 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8' | |
| }, | |
| // French movies | |
| 490132: { // Le Grand Bain | |
| '1080p': 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', | |
| '720p': 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', | |
| '480p': 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8' | |
| }, | |
| 496243: { // Parasite | |
| '1080p': 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', | |
| '720p': 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', | |
| '480p': 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8' | |
| }, | |
| 19404: { // Dilwale Dulhania Le Jayenge | |
| '1080p': 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', | |
| '720p': 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', | |
| '480p': 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8' | |
| } | |
| }; | |
| // If we have a specific stream for this movie, return it | |
| if (movieStreams[movie.id] && movieStreams[movie.id][quality]) { | |
| return movieStreams[movie.id][quality]; | |
| } | |
| // Default fallback stream | |
| return 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'; | |
| } | |
| // Find best source based on quality, language preference, etc. | |
| function findBestSource(sources) { | |
| // Filter by preferred language | |
| const prefLang = preferredLanguage.value || 'fr'; | |
| const langSources = sources.filter(s => s.language === prefLang); | |
| // If no sources in preferred language, try other languages | |
| const availableSources = langSources.length > 0 ? langSources : sources; | |
| // Sort by bitrate (quality) | |
| return availableSources.sort((a, b) => b.bitrate - a.bitrate)[0]; | |
| } | |
| // Play movie from source URL | |
| function playMovieFromSource(url, movie) { | |
| if (Hls.isSupported()) { | |
| hls.loadSource(url); | |
| hls.attachMedia(video); | |
| hls.on(Hls.Events.MANIFEST_PARSED, function() { | |
| video.play(); | |
| playerOverlay.classList.add('hidden'); | |
| // Update UI with source info | |
| qualityBtn.innerHTML = `<i class="fas fa-tachometer-alt mr-2"></i> <span>Auto (1080p)</span>`; | |
| subtitleBtn.innerHTML = `<i class="fas fa-closed-captioning mr-2"></i> <span>${movie.original_language !== 'fr' ? 'FR (ST)' : 'FR'}</span>`; | |
| }); | |
| } else if (video.canPlayType('application/vnd.apple.mpegurl')) { | |
| video.src = url; | |
| video.addEventListener('loadedmetadata', function() { | |
| video.play(); | |
| playerOverlay.classList.add('hidden'); | |
| }); | |
| } | |
| currentMovieTitle.innerHTML = ` | |
| <i class="fas fa-film text-purple-400 mr-2"></i> | |
| <span>${movie.title} (${movie.release_date ? movie.release_date.substring(0, 4) : 'N/A'})</span> | |
| `; | |
| // Update video player background with movie backdrop | |
| if (movie.backdrop_path) { | |
| videoPlayer.style.backgroundImage = `url(${BACKDROP_BASE_URL}${movie.backdrop_path})`; | |
| videoPlayer.style.backgroundSize = 'cover'; | |
| videoPlayer.style.backgroundPosition = 'center'; | |
| } | |
| } | |
| // Show error message | |
| function showError(message) { | |
| playerOverlay.innerHTML = ` | |
| <div class="text-center p-6 max-w-2xl"> | |
| <i class="fas fa-exclamation-triangle text-5xl text-red-500 mb-4"></i> | |
| <h2 class="text-2xl font-bold text-white mb-4">Erreur</h2> | |
| <p class="text-gray-300 mb-6">${message}</p> | |
| <button id="retry-btn" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium"> | |
| <i class="fas fa-sync-alt mr-2"></i> Réessayer | |
| </button> | |
| </div> | |
| `; | |
| document.getElementById('retry-btn').addEventListener('click', () => { | |
| if (currentMovies.length > 0) { | |
| initPlayer(currentMovies[currentMovieIndex]); | |
| } | |
| }); | |
| } | |
| // Format time | |
| function formatTime(seconds) { | |
| const h = Math.floor(seconds / 3600); | |
| const m = Math.floor((seconds % 3600) / 60); | |
| const s = Math.floor(seconds % 60); | |
| return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`; | |
| } | |
| // Play next movie | |
| function playNextMovie() { | |
| const playbackMode = document.getElementById('playback-mode').value; | |
| if (playbackMode === 'random') { | |
| currentMovieIndex = Math.floor(Math.random() * currentMovies.length); | |
| } else if (playbackMode === 'ai_recommend') { | |
| // In a real app, this would use AI recommendations | |
| currentMovieIndex = (currentMovieIndex + Math.floor(Math.random() * 3) + 1) % currentMovies.length; | |
| } else { | |
| currentMovieIndex = (currentMovieIndex + 1) % currentMovies.length; | |
| } | |
| initPlayer(currentMovies[currentMovieIndex]); | |
| } | |
| // Load genres from TMDB | |
| async function loadGenres() { | |
| try { | |
| const response = await fetch(`${BASE_URL}/genre/movie/list?api_key=${TMDB_API_KEY}&language=${currentLanguage}`); | |
| const data = await response.json(); | |
| genres = data.genres; | |
| // Add genre tags to filter | |
| genres.forEach(genre => { | |
| const genreTag = document.createElement('button'); | |
| genreTag.className = 'genre-tag px-3 py-1 bg-gray-700 hover:bg-purple-600 text-white rounded-full text-sm whitespace-nowrap'; | |
| genreTag.textContent = genre.name; | |
| genreTag.dataset.id = genre.id; | |
| genreTag.addEventListener('click', () => filterByGenre(genre.id, genre.name)); | |
| genreFilterContainer.appendChild(genreTag); | |
| }); | |
| } catch (error) { | |
| console.error('Error loading genres:', error); | |
| } | |
| } | |
| // Filter by genre | |
| function filterByGenre(genreId, genreName) { | |
| currentGenre = genreId; | |
| currentPage = 1; | |
| isSearching = false; | |
| currentSearchQuery = ''; | |
| // Update UI | |
| document.querySelectorAll('.genre-tag').forEach(tag => { | |
| if (tag.dataset.id === genreId.toString()) { | |
| tag.classList.add('bg-purple-600'); | |
| tag.classList.remove('bg-gray-700'); | |
| } else { | |
| tag.classList.remove('bg-purple-600'); | |
| tag.classList.add('bg-gray-700'); | |
| } | |
| }); | |
| libraryTitle.textContent = genreName ? `Films ${genreName}` : 'Bibliothèque de Films'; | |
| loadMovies(); | |
| } | |
| // Load movies from TMDB | |
| async function loadMovies() { | |
| loadingIndicator.classList.remove('hidden'); | |
| movieLibrary.innerHTML = ''; | |
| loadMoreContainer.classList.add('hidden'); | |
| let url; | |
| if (isSearching) { | |
| url = `${BASE_URL}/search/movie?api_key=${TMDB_API_KEY}&language=${currentLanguage}&query=${encodeURIComponent(currentSearchQuery)}&page=${currentPage}`; | |
| } else if (currentGenre) { | |
| url = `${BASE_URL}/discover/movie?api_key=${TMDB_API_KEY}&language=${currentLanguage}&with_genres=${currentGenre}&page=${currentPage}`; | |
| } else { | |
| url = `${BASE_URL}/movie/popular?api_key=${TMDB_API_KEY}&language=${currentLanguage}&page=${currentPage}`; | |
| } | |
| // Add filters | |
| const yearValue = yearFilter.value; | |
| const ratingValue = ratingFilter.value; | |
| const languageValue = languageFilter.value; | |
| const sortValue = sortBy.value; | |
| if (yearValue) { | |
| if (yearValue.includes('-')) { | |
| const [start, end] = yearValue.split('-'); | |
| url += `&primary_release_date.gte=${start}-01-01&primary_release_date.lte=${end}-12-31`; | |
| } else { | |
| url += `&primary_release_year=${yearValue}`; | |
| } | |
| } | |
| if (ratingValue > 0) { | |
| url += `&vote_average.gte=${ratingValue}`; | |
| } | |
| if (languageValue) { | |
| url += `&with_original_language=${languageValue}`; | |
| } | |
| if (sortValue) { | |
| url += `&sort_by=${sortValue}`; | |
| } | |
| try { | |
| const response = await fetch(url); | |
| const data = await response.json(); | |
| currentMovies = data.results; | |
| totalPages = data.total_pages; | |
| totalResults = data.total_results; | |
| movieCount.textContent = `(${totalResults.toLocaleString()} disponibles)`; | |
| if (currentMovies.length > 0) { | |
| renderMovies(currentMovies); | |
| if (currentPage < totalPages) { | |
| loadMoreContainer.classList.remove('hidden'); | |
| } | |
| } else { | |
| movieLibrary.innerHTML = ` | |
| <div class="col-span-full text-center py-12"> | |
| <i class="fas fa-film text-4xl text-gray-600 mb-4"></i> | |
| <h3 class="text-xl text-white">Aucun film trouvé</h3> | |
| <p class="text-gray-400 mt-2">Essayez de modifier vos filtres de recherche</p> | |
| </div> | |
| `; | |
| } | |
| } catch (error) { | |
| console.error('Error loading movies:', error); | |
| movieLibrary.innerHTML = ` | |
| <div class="col-span-full text-center py-12"> | |
| <i class="fas fa-exclamation-triangle text-4xl text-red-500 mb-4"></i> | |
| <h3 class="text-xl text-white">Erreur de chargement</h3> | |
| <p class="text-gray-400 mt-2">Impossible de charger les films. Veuillez réessayer.</p> | |
| </div> | |
| `; | |
| } finally { | |
| loadingIndicator.classList.add('hidden'); | |
| } | |
| } | |
| // Render movies | |
| function renderMovies(movies) { | |
| movies.forEach((movie, index) => { | |
| const movieCard = document.createElement('div'); | |
| movieCard.className = 'movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer glow-effect'; | |
| movieCard.innerHTML = ` | |
| <div class="relative h-64"> | |
| ${movie.poster_path ? | |
| `<img src="${IMAGE_BASE_URL}${movie.poster_path}" alt="${movie.title}" class="w-full h-full object-cover">` : | |
| `<div class="poster-placeholder w-full h-full flex items-center justify-center"> | |
| <i class="fas fa-film text-4xl text-gray-600"></i> | |
| </div>` | |
| } | |
| <div class="absolute inset-0 bg-black bg-opacity-30 opacity-0 hover:opacity-100 transition flex items-center justify-center"> | |
| <button class="play-btn bg-purple-600 hover:bg-purple-700 text-white rounded-full w-12 h-12 flex items-center justify-center transform hover:scale-110 transition"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| ${movie.vote_average ? ` | |
| <div class="absolute top-2 left-2 bg-gray-900 bg-opacity-80 text-yellow-400 px-2 py-1 rounded text-xs font-bold flex items-center"> | |
| ${movie.vote_average.toFixed(1)} <i class="fas fa-star ml-1"></i> | |
| </div> | |
| ` : ''} | |
| ${movie.original_language !== 'fr' ? ` | |
| <div class="absolute top-2 right-2 bg-gray-900 bg-opacity-80 text-blue-400 px-2 py-1 rounded text-xs font-bold"> | |
| ${movie.original_language.toUpperCase()} | |
| </div> | |
| ` : ''} | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-white font-medium truncate">${movie.title}</h3> | |
| <div class="flex items-center mt-2"> | |
| <span class="text-gray-400 text-sm"> | |
| ${movie.release_date ? movie.release_date.substring(0, 4) : 'N/A'} | |
| </span> | |
| <span class="text-gray-400 text-sm ml-auto"> | |
| ${movie.genre_ids && genres.length ? | |
| genres.find(g => g.id === movie.genre_ids[0])?.name || '' : ''} | |
| </span> | |
| </div> | |
| </div> | |
| `; | |
| movieCard.addEventListener('click', () => { | |
| currentMovieIndex = index; | |
| initPlayer(movie); | |
| }); | |
| movieLibrary.appendChild(movieCard); | |
| }); | |
| } | |
| // Search movies | |
| function searchMovies(query) { | |
| currentSearchQuery = query.trim(); | |
| isSearching = currentSearchQuery.length > 0; | |
| currentPage = 1; | |
| currentGenre = ''; | |
| // Update UI | |
| document.querySelectorAll('.genre-tag').forEach(tag => { | |
| tag.classList.remove('bg-purple-600'); | |
| tag.classList.add('bg-gray-700'); | |
| }); | |
| libraryTitle.textContent = isSearching ? `Résultats pour "${currentSearchQuery}"` : 'Bibliothèque de Films'; | |
| loadMovies(); | |
| } | |
| // Optimize servers (simulation) | |
| function optimizeServers() { | |
| if (serverOptimizationInProgress) return; | |
| serverOptimizationInProgress = true; | |
| optimizeServersBtn.innerHTML = `<i class="fas fa-cog fa-spin mr-2"></i> Optimisation en cours...`; | |
| // Simulate server optimization | |
| let activeCount = 15; | |
| const totalCount = 25; | |
| let progress = 0; | |
| const optimizationInterval = setInterval(() => { | |
| progress += 5; | |
| if (progress >= 100) progress = 100; | |
| // Simulate activating more servers | |
| if (progress % 20 === 0 && activeCount < totalCount) { | |
| activeCount += 2; | |
| activeServersSpan.textContent = activeCount; | |
| } | |
| if (progress >= 100) { | |
| clearInterval(optimizationInterval); | |
| serverOptimizationInProgress = false; | |
| optimizeServersBtn.innerHTML = `<i class="fas fa-check-circle mr-2"></i> Optimisation terminée`; | |
| // Show notification | |
| showNotification(`Réseau optimisé! ${activeCount} serveurs actifs`); | |
| // Reset button after delay | |
| setTimeout(() => { | |
| optimizeServersBtn.innerHTML = `<i class="fas fa-sync-alt mr-2"></i> Optimiser le réseau`; | |
| }, 3000); | |
| } | |
| }, 200); | |
| } | |
| // Show notification | |
| function showNotification(message) { | |
| const notification = document.createElement('div'); | |
| notification.className = 'fixed bottom-4 right-4 bg-gray-800 text-white px-4 py-3 rounded-lg shadow-lg flex items-center border-l-4 border-purple-500 transform translate-x-full opacity-0 transition-all duration-300'; | |
| notification.innerHTML = ` | |
| <i class="fas fa-check-circle text-green-400 mr-3"></i> | |
| <span>${message}</span> | |
| `; | |
| document.body.appendChild(notification); | |
| setTimeout(() => { | |
| notification.classList.remove('translate-x-full'); | |
| notification.classList.remove('opacity-0'); | |
| notification.classList.add('translate-x-0'); | |
| notification.classList.add('opacity-100'); | |
| }, 10); | |
| setTimeout(() => { | |
| notification.classList.remove('translate-x-0'); | |
| notification.classList.remove('opacity-100'); | |
| notification.classList.add('translate-x-full'); | |
| notification.classList.add('opacity-0'); | |
| setTimeout(() => notification.remove(), 300); | |
| }, 3000); | |
| } | |
| // Event listeners | |
| video.addEventListener('timeupdate', function() { | |
| const progress = (video.currentTime / video.duration) * 100; | |
| progressBar.style.width = progress + '%'; | |
| currentTime.textContent = formatTime(video.currentTime); | |
| duration.textContent = formatTime(video.duration); | |
| if (autoPlayEnabled && video.currentTime > 0 && video.duration > 0 && | |
| (video.duration - video.currentTime) < 1) { | |
| playNextMovie(); | |
| } | |
| }); | |
| autoNextBtn.addEventListener('click', function() { | |
| autoPlayEnabled = !autoPlayEnabled; | |
| this.classList.toggle('text-purple-400'); | |
| this.classList.toggle('text-green-400'); | |
| this.innerHTML = autoPlayEnabled ? | |
| '<i class="fas fa-robot mr-2"></i> Auto ON' : | |
| '<i class="fas fa-robot mr-2"></i> Auto OFF'; | |
| }); | |
| playBtn.addEventListener('click', () => video.play()); | |
| pauseBtn.addEventListener('click', () => video.pause()); | |
| stopBtn.addEventListener('click', () => { | |
| video.pause(); | |
| video.currentTime = 0; | |
| }); | |
| randomBtn.addEventListener('click', () => { | |
| currentMovieIndex = Math.floor(Math.random() * currentMovies.length); | |
| initPlayer(currentMovies[currentMovieIndex]); | |
| }); | |
| searchBtn.addEventListener('click', () => searchMovies(searchInput.value)); | |
| searchInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') searchMovies(searchInput.value); | |
| }); | |
| refreshBtn.addEventListener('click', () => { | |
| currentPage = 1; | |
| loadMovies(); | |
| }); | |
| randomMovieBtn.addEventListener('click', () => { | |
| currentMovieIndex = Math.floor(Math.random() * currentMovies.length); | |
| initPlayer(currentMovies[currentMovieIndex]); | |
| }); | |
| loadMoreBtn.addEventListener('click', () => { | |
| currentPage++; | |
| loadMovies(); | |
| }); | |
| yearFilter.addEventListener('change', () => { | |
| currentPage = 1; | |
| loadMovies(); | |
| }); | |
| ratingFilter.addEventListener('change', () => { | |
| currentPage = 1; | |
| loadMovies(); | |
| }); | |
| languageFilter.addEventListener('change', () => { | |
| currentPage = 1; | |
| loadMovies(); | |
| }); | |
| sortBy.addEventListener('change', () => { | |
| currentPage = 1; | |
| loadMovies(); | |
| }); | |
| startDemoBtn.addEventListener('click', () => { | |
| if (currentMovies.length > 0) { | |
| initPlayer(currentMovies[0]); | |
| } | |
| }); | |
| languageSelect.addEventListener('change', () => { | |
| currentLanguage = languageSelect.value; | |
| currentPage = 1; | |
| loadGenres(); | |
| loadMovies(); | |
| }); | |
| optimizeServersBtn.addEventListener('click', optimizeServers); | |
| aiRecommendBtn.addEventListener('click', () => { | |
| document.getElementById('playback-mode').value = 'ai_recommend'; | |
| playNextMovie(); | |
| showNotification("Mode recommandation IA activé"); | |
| }); | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', function() { | |
| loadGenres(); | |
| loadMovies(); | |
| // Show player overlay initially | |
| playerOverlay.classList.remove('hidden'); | |
| // Set initial server counts | |
| activeServersSpan.textContent = '15'; | |
| totalServersSpan.textContent = '25'; | |
| }); | |
| </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/nexus-stream" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |