Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CinéAuto 2.0 - Streaming Automatisé Intelligent</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; | |
| --dark-space: #0f172a; | |
| --cyber-gray: #1e293b; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--dark-space); | |
| color: white; | |
| overflow-x: hidden; | |
| } | |
| .cyber-font { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .movie-card { | |
| transition: all 0.3s ease; | |
| position: relative; | |
| border: 1px solid rgba(168, 85, 247, 0.2); | |
| } | |
| .movie-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 0 15px var(--neon-purple); | |
| border-color: var(--neon-purple); | |
| } | |
| .poster-placeholder { | |
| background: linear-gradient(135deg, var(--cyber-gray) 0%, var(--dark-space) 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; | |
| position: relative; | |
| } | |
| .progress-container { | |
| height: 5px; | |
| background-color: var(--cyber-gray); | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--neon-pink), var(--neon-purple)); | |
| width: 0%; | |
| } | |
| .automation-panel { | |
| background: rgba(15, 23, 42, 0.9); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(168, 85, 247, 0.3); | |
| } | |
| .genre-filter { | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--neon-purple) var(--cyber-gray); | |
| } | |
| .genre-filter::-webkit-scrollbar { | |
| height: 6px; | |
| } | |
| .genre-filter::-webkit-scrollbar-track { | |
| background: var(--cyber-gray); | |
| } | |
| .genre-filter::-webkit-scrollbar-thumb { | |
| background-color: var(--neon-purple); | |
| border-radius: 6px; | |
| } | |
| .server-status { | |
| position: relative; | |
| padding-left: 20px; | |
| } | |
| .server-status::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background-color: #10b981; | |
| box-shadow: 0 0 10px #10b981; | |
| animation: pulse 2s infinite; | |
| } | |
| .server-status.offline::before { | |
| background-color: #ef4444; | |
| box-shadow: 0 0 10px #ef4444; | |
| } | |
| .server-status.optimizing::before { | |
| background-color: #f59e0b; | |
| box-shadow: 0 0 10px #f59e0b; | |
| animation: pulse-fast 1s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } | |
| } | |
| @keyframes pulse-fast { | |
| 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); } | |
| } | |
| .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), inset 0 0 5px var(--neon-purple); | |
| border: 1px solid var(--neon-purple); | |
| } | |
| .cyber-btn { | |
| background: linear-gradient(135deg, var(--neon-purple), var(--neon-blue)); | |
| border: none; | |
| color: white; | |
| transition: all 0.3s; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .cyber-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(168, 85, 247, 0.4); | |
| } | |
| .cyber-btn::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); | |
| transition: all 0.5s; | |
| } | |
| .cyber-btn:hover::before { | |
| left: 100%; | |
| } | |
| .server-node { | |
| position: relative; | |
| background: rgba(30, 41, 59, 0.7); | |
| border-radius: 10px; | |
| padding: 15px; | |
| transition: all 0.3s; | |
| } | |
| .server-node:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3); | |
| } | |
| .server-node::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| border-radius: 10px; | |
| border: 1px solid transparent; | |
| background: linear-gradient(135deg, var(--neon-purple), var(--neon-blue)) border-box; | |
| -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: destination-out; | |
| mask-composite: exclude; | |
| pointer-events: none; | |
| } | |
| .language-selector { | |
| position: relative; | |
| background: var(--cyber-gray); | |
| border: 1px solid var(--neon-purple); | |
| color: white; | |
| appearance: none; | |
| background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e"); | |
| background-repeat: no-repeat; | |
| background-position: right 0.5rem center; | |
| background-size: 1.5em; | |
| } | |
| .glow-effect { | |
| animation: glow 2s infinite alternate; | |
| } | |
| @keyframes glow { | |
| from { | |
| box-shadow: 0 0 5px var(--neon-purple); | |
| } | |
| to { | |
| box-shadow: 0 0 20px var(--neon-purple); | |
| } | |
| } | |
| .cyber-loader { | |
| width: 60px; | |
| height: 60px; | |
| border: 5px solid transparent; | |
| border-top-color: var(--neon-purple); | |
| border-bottom-color: var(--neon-blue); | |
| border-radius: 50%; | |
| animation: spin 1.5s linear infinite; | |
| position: relative; | |
| } | |
| .cyber-loader::before { | |
| content: ''; | |
| position: absolute; | |
| top: 5px; | |
| left: 5px; | |
| right: 5px; | |
| bottom: 5px; | |
| border: 5px solid transparent; | |
| border-top-color: var(--neon-pink); | |
| border-bottom-color: var(--neon-blue); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite reverse; | |
| } | |
| .server-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 20px; | |
| } | |
| .server-activity { | |
| height: 100px; | |
| background: linear-gradient(to bottom, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.8)); | |
| border-radius: 8px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .server-activity::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.1), transparent); | |
| animation: server-scan 3s linear infinite; | |
| } | |
| @keyframes server-scan { | |
| 0% { transform: translateX(-100%); } | |
| 100% { transform: translateX(100%); } | |
| } | |
| .server-stats { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 30px; | |
| background: rgba(15, 23, 42, 0.7); | |
| display: flex; | |
| justify-content: space-around; | |
| align-items: center; | |
| font-size: 0.8rem; | |
| } | |
| .server-stat { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .server-stat i { | |
| margin-right: 5px; | |
| font-size: 0.7rem; | |
| } | |
| .server-stat.cpu i { color: #3b82f6; } | |
| .server-stat.ram i { color: #ec4899; } | |
| .server-stat.bandwidth i { color: #10b981; } | |
| .neon-tab { | |
| position: relative; | |
| padding: 10px 20px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .neon-tab.active { | |
| color: white; | |
| background: rgba(168, 85, 247, 0.2); | |
| border-bottom: 2px solid var(--neon-purple); | |
| } | |
| .neon-tab:hover:not(.active) { | |
| color: var(--neon-purple); | |
| } | |
| .neon-tab::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| width: 0; | |
| height: 2px; | |
| background: var(--neon-purple); | |
| transition: all 0.3s; | |
| } | |
| .neon-tab:hover::after { | |
| left: 10%; | |
| width: 80%; | |
| } | |
| .neon-tab.active::after { | |
| left: 10%; | |
| width: 80%; | |
| background: var(--neon-purple); | |
| } | |
| .cyber-input { | |
| background: rgba(30, 41, 59, 0.7); | |
| border: 1px solid rgba(168, 85, 247, 0.3); | |
| color: white; | |
| transition: all 0.3s; | |
| } | |
| .cyber-input:focus { | |
| outline: none; | |
| border-color: var(--neon-purple); | |
| box-shadow: 0 0 10px rgba(168, 85, 247, 0.5); | |
| } | |
| .floating-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| opacity: 0.1; | |
| background: radial-gradient(circle at 20% 30%, var(--neon-purple), transparent 40%), | |
| radial-gradient(circle at 80% 70%, var(--neon-blue), transparent 40%); | |
| animation: float 20s infinite alternate ease-in-out; | |
| } | |
| @keyframes float { | |
| 0% { transform: translate(0, 0); } | |
| 50% { transform: translate(-5%, -5%); } | |
| 100% { transform: translate(5%, 5%); } | |
| } | |
| .cyber-badge { | |
| display: inline-block; | |
| padding: 2px 8px; | |
| border-radius: 12px; | |
| font-size: 0.7rem; | |
| font-weight: bold; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .badge-new { | |
| background: var(--neon-pink); | |
| color: white; | |
| animation: pulse 2s infinite; | |
| } | |
| .badge-ai { | |
| background: linear-gradient(135deg, var(--neon-purple), var(--neon-blue)); | |
| color: white; | |
| } | |
| .badge-auto { | |
| background: linear-gradient(135deg, #10b981, #3b82f6); | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Floating Background --> | |
| <div class="floating-bg"></div> | |
| <!-- Navigation --> | |
| <nav class="bg-gray-900 bg-opacity-90 backdrop-blur-md fixed w-full z-50 shadow-lg border-b border-purple-900"> | |
| <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"> | |
| <div class="w-8 h-8 rounded-full bg-purple-600 mr-2 flex items-center justify-center neon-border"> | |
| <i class="fas fa-robot text-white"></i> | |
| </div> | |
| <span class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-400 cyber-font">CinéAuto 2.0</span> | |
| </div> | |
| <div class="hidden md:block ml-10"> | |
| <div class="flex space-x-1"> | |
| <a href="#" class="neon-tab active"> | |
| <i class="fas fa-home mr-2"></i>Accueil | |
| </a> | |
| <a href="#" class="neon-tab"> | |
| <i class="fas fa-film mr-2"></i>Bibliothèque | |
| </a> | |
| <a href="#" class="neon-tab"> | |
| <i class="fas fa-network-wired mr-2"></i>Serveurs | |
| </a> | |
| <a href="#" class="neon-tab"> | |
| <i class="fas fa-cogs mr-2"></i>Automatisation | |
| </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"> | |
| <select id="language-selector" class="language-selector px-4 py-2 rounded-full 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> | |
| <div class="relative mx-4"> | |
| <input type="text" id="search-input" placeholder="Rechercher un film..." | |
| class="cyber-input px-4 py-2 rounded-full w-64 focus:outline-none text-sm"> | |
| <button id="search-btn" class="absolute right-3 top-2 text-gray-400 hover:text-purple-400"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none relative"> | |
| <i class="fas fa-user-circle text-xl"></i> | |
| <span class="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-gray-900"></span> | |
| </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"> | |
| <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="cyber-loader mb-6"></div> | |
| <h2 class="text-3xl font-bold text-white mb-4 cyber-font neon-text">CinéAuto 2.0 Player</h2> | |
| <p class="text-gray-300 mb-6">Lecteur haute performance avec streaming adaptatif et automatisation intelligente</p> | |
| <div class="flex justify-center space-x-4"> | |
| <button id="start-demo" class="cyber-btn px-6 py-3 rounded-lg font-medium"> | |
| <i class="fas fa-play mr-2"></i> Démarrer la démo | |
| </button> | |
| <button id="auto-scan" class="bg-gray-800 hover:bg-gray-700 text-white px-6 py-3 rounded-lg font-medium border border-purple-500"> | |
| <i class="fas fa-satellite-dish mr-2"></i> Scan Auto | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 p-4 border-t border-purple-900"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h2 id="current-movie-title" class="text-xl font-bold text-white cyber-font"> | |
| <span class="text-purple-400">[SYSTEM]</span> Aucun film sélectionné | |
| </h2> | |
| <div class="flex items-center space-x-4"> | |
| <button id="auto-next" class="text-green-400 hover:text-green-300 flex items-center"> | |
| <i class="fas fa-robot mr-2"></i> | |
| <span class="cyber-font">AUTO</span> | |
| <span class="ml-2 cyber-badge badge-auto">ON</span> | |
| </button> | |
| <button id="quality-btn" class="text-blue-400 hover:text-blue-300 flex items-center"> | |
| <i class="fas fa-tachometer-alt mr-2"></i> | |
| <span class="cyber-font">AI-Q 1080p</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" class="font-mono">00:00:00</span> | |
| <span id="duration" class="font-mono">00:00:00</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Server Network --> | |
| <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-white cyber-font"> | |
| <i class="fas fa-network-wired text-purple-400 mr-3"></i> | |
| Réseau de Serveurs Automatisés | |
| <span class="cyber-badge badge-ai ml-2">AI-Powered</span> | |
| </h2> | |
| <div class="flex items-center space-x-3"> | |
| <span class="text-sm text-gray-400"> | |
| <span class="text-green-400">●</span> 12/12 Serveurs Actifs | |
| </span> | |
| <button id="optimize-servers" class="cyber-btn px-4 py-2 rounded-lg text-sm"> | |
| <i class="fas fa-sync-alt mr-2"></i> Optimiser | |
| </button> | |
| </div> | |
| </div> | |
| <div class="server-grid mb-6"> | |
| <!-- Main Server --> | |
| <div class="server-node"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div> | |
| <h3 class="text-lg font-bold text-white flex items-center"> | |
| <i class="fas fa-server text-purple-400 mr-2"></i> | |
| Serveur Principal | |
| </h3> | |
| <span class="text-xs text-gray-400">Paris, FR</span> | |
| </div> | |
| <span class="server-status">En ligne</span> | |
| </div> | |
| <div class="server-activity mb-3"> | |
| <div class="server-stats"> | |
| <div class="server-stat cpu"> | |
| <i class="fas fa-microchip"></i> 24% | |
| </div> | |
| <div class="server-stat ram"> | |
| <i class="fas fa-memory"></i> 18% | |
| </div> | |
| <div class="server-stat bandwidth"> | |
| <i class="fas fa-tachometer-alt"></i> 45Mbps | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-xs"> | |
| <span class="text-gray-400">AI Scanner: <span class="text-green-400">Actif</span></span> | |
| <span class="text-purple-400">4K Ready</span> | |
| </div> | |
| </div> | |
| <!-- Cloud Server --> | |
| <div class="server-node"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div> | |
| <h3 class="text-lg font-bold text-white flex items-center"> | |
| <i class="fas fa-cloud text-blue-400 mr-2"></i> | |
| Serveur Cloud | |
| </h3> | |
| <span class="text-xs text-gray-400">Global CDN</span> | |
| </div> | |
| <span class="server-status">En ligne</span> | |
| </div> | |
| <div class="server-activity mb-3"> | |
| <div class="server-stats"> | |
| <div class="server-stat cpu"> | |
| <i class="fas fa-microchip"></i> 32% | |
| </div> | |
| <div class="server-stat ram"> | |
| <i class="fas fa-memory"></i> 25% | |
| </div> | |
| <div class="server-stat bandwidth"> | |
| <i class="fas fa-tachometer-alt"></i> 120Mbps | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-xs"> | |
| <span class="text-gray-400">AI Scanner: <span class="text-green-400">Actif</span></span> | |
| <span class="text-blue-400">P2P Optimisé</span> | |
| </div> | |
| </div> | |
| <!-- AI Scanner Server --> | |
| <div class="server-node glow-effect"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div> | |
| <h3 class="text-lg font-bold text-white flex items-center"> | |
| <i class="fas fa-robot text-green-400 mr-2"></i> | |
| AI Scanner FR | |
| </h3> | |
| <span class="text-xs text-gray-400">Spécialisé Français</span> | |
| </div> | |
| <span class="server-status">En ligne</span> | |
| </div> | |
| <div class="server-activity mb-3"> | |
| <div class="server-stats"> | |
| <div class="server-stat cpu"> | |
| <i class="fas fa-microchip"></i> 68% | |
| </div> | |
| <div class="server-stat ram"> | |
| <i class="fas fa-memory"></i> 45% | |
| </div> | |
| <div class="server-stat bandwidth"> | |
| <i class="fas fa-tachometer-alt"></i> 85Mbps | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-xs"> | |
| <span class="text-gray-400">Scan: <span class="text-pink-400">12 films FR/min</span></span> | |
| <span class="text-green-400">VFF/VFQ</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-white"> | |
| <i class="fas fa-satellite-dish text-purple-400 mr-2"></i> | |
| Scanner Automatique | |
| </h3> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-xs text-gray-400">Dernier scan: <span class="text-purple-400">2 min ago</span></span> | |
| <button id="start-scan" class="cyber-btn px-3 py-1 rounded text-xs"> | |
| <i class="fas fa-play mr-1"></i> Lancer | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center"> | |
| <div class="bg-gray-900 p-3 rounded-lg"> | |
| <div class="text-purple-400 text-2xl mb-1">1,248</div> | |
| <div class="text-xs text-gray-400">Films FR</div> | |
| </div> | |
| <div class="bg-gray-900 p-3 rounded-lg"> | |
| <div class="text-blue-400 text-2xl mb-1">4,562</div> | |
| <div class="text-xs text-gray-400">Films EN</div> | |
| </div> | |
| <div class="bg-gray-900 p-3 rounded-lg"> | |
| <div class="text-green-400 text-2xl mb-1">98%</div> | |
| <div class="text-xs text-gray-400">Qualité VFF</div> | |
| </div> | |
| <div class="bg-gray-900 p-3 rounded-lg"> | |
| <div class="text-pink-400 text-2xl mb-1">24/7</div> | |
| <div class="text-xs text-gray-400">Scan Actif</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Automation Panel --> | |
| <section class="mb-12 automation-panel rounded-xl p-6 shadow-lg"> | |
| <h2 class="text-2xl font-bold text-white mb-6 cyber-font"> | |
| <i class="fas fa-cogs text-purple-400 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 border border-purple-900"> | |
| <h3 class="text-lg font-semibold text-white mb-3 flex items-center"> | |
| <i class="fas fa-cog text-purple-400 mr-2"></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 cyber-input rounded px-3 py-2 text-sm"> | |
| <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_recommended">AI Recommandé</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 cyber-input rounded px-3 py-2 text-sm"> | |
| <option value="fr-FR">Français (VFF)</option> | |
| <option value="fr-CA">Français (VFQ)</option> | |
| <option value="en-US">English</option> | |
| <option value="multi">Multilingue</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" checked> | |
| <span class="ml-2 text-gray-300">AI Adaptative</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 p-4 rounded-lg border border-purple-900"> | |
| <h3 class="text-lg font-semibold text-white mb-3 flex items-center"> | |
| <i class="fas fa-robot text-green-400 mr-2"></i>AI Scanner | |
| </h3> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-300">Scan Français</span> | |
| <span class="text-green-400 text-sm font-mono">Actif</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-300">Scan International</span> | |
| <span class="text-green-400 text-sm font-mono">Actif</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-300">Détection Qualité</span> | |
| <span class="text-green-400 text-sm font-mono">AI Active</span> | |
| </div> | |
| <div class="mt-4"> | |
| <button id="ai-scan-btn" class="w-full cyber-btn text-white py-2 rounded flex items-center justify-center"> | |
| <i class="fas fa-brain mr-2"></i> Optimiser AI Scanner | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 p-4 rounded-lg border border-purple-900"> | |
| <h3 class="text-lg font-semibold text-white mb-3 flex items-center"> | |
| <i class="fas fa-bolt text-yellow-400 mr-2"></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> | |
| </div> | |
| </section> | |
| <!-- Filters --> | |
| <section class="mb-6 bg-gray-800 rounded-lg p-4 border border-purple-900"> | |
| <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 flex items-center"> | |
| <i class="fas fa-filter text-purple-400 mr-2"></i> | |
| Filtres : | |
| </h3> | |
| <select id="year-filter" class="cyber-input rounded px-3 py-2 text-sm"> | |
| <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="cyber-input rounded px-3 py-2 text-sm"> | |
| <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="cyber-input rounded px-3 py-2 text-sm"> | |
| <option value="">Toutes langues</option> | |
| <option value="fr">Français</option> | |
| <option value="en">Anglais</option> | |
| <option value="es">Espagnol</option> | |
| <option value="de">Allemand</option> | |
| <option value="it">Italien</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="cyber-input rounded px-3 py-2 text-sm"> | |
| <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 AI</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-gray-700 hover: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 cyber-font"> | |
| <i class="fas fa-film text-purple-400 mr-3"></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 border border-purple-900"> | |
| <i class="fas fa-sync-alt mr-2"></i>Actualiser | |
| </button> | |
| <button id="random-movie-btn" class="cyber-btn px-4 py-2 rounded-lg"> | |
| <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="cyber-loader"></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="cyber-btn px-6 py-3 rounded-lg font-medium"> | |
| <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"> | |
| <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 cyber-font">CinéAuto 2.0</h3> | |
| <p class="text-sm">Plateforme de streaming automatisé avec AI Scanner et gestion intelligente des serveurs.</p> | |
| <div class="mt-4 flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-purple-400"><i class="fab fa-github"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-pink-400"><i class="fab fa-instagram"></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">HLS.js</span> - Streaming adaptatif</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">WebRTC</span> - P2P optimisé</li> | |
| <li class="flex items-center"><span class="w-2 h-2 bg-green-400 rounded-full mr-2"></span> <span class="text-green-400">AI Scanner</span> - Détection automatique</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">Neural Networks</span> - Recommandations</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-2"></i>Latence minimale</li> | |
| <li class="flex items-center"><i class="fas fa-tachometer-alt text-green-400 mr-2"></i>4K Ultra HD</li> | |
| <li class="flex items-center"><i class="fas fa-server text-blue-400 mr-2"></i>12 serveurs mondiaux</li> | |
| <li class="flex items-center"><i class="fas fa-language text-purple-400 mr-2"></i>5+ langues supportées</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-lg font-semibold mb-4">Support</h3> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#" class="text-gray-400 hover:text-purple-400"><i class="fab fa-discord"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400"><i class="fas fa-envelope"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-green-400"><i class="fas fa-question-circle"></i></a> | |
| </div> | |
| <div class="text-sm"> | |
| <p class="flex items-center"> | |
| <i class="fas fa-shield-alt text-purple-400 mr-2"></i> | |
| <span>Système sécurisé et crypté</span> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-sm text-center"> | |
| <p class="cyber-font">© 2023 CinéAuto 2.0. 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.eyJhdWQiOiJmYjQzN2IxMDcyN2E1YTRlYjhkOTEzNGUyOWM4MmFlMCIsIm5iZiI6MTY4MDYzNzkxMC44NjUsInN1YiI6IjY0MmM3ZmQ2OGI5NTllMDBmNDRkNzNhMCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.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 sortBy = document.getElementById('sort-by'); | |
| const startDemoBtn = document.getElementById('start-demo'); | |
| const autoScanBtn = document.getElementById('auto-scan'); | |
| const optimizeServersBtn = document.getElementById('optimize-servers'); | |
| const languageSelector = document.getElementById('language-selector'); | |
| const preferredLanguage = document.getElementById('preferred-language'); | |
| const languageFilter = document.getElementById('language-filter'); | |
| const aiScanBtn = document.getElementById('ai-scan-btn'); | |
| const startScanBtn = document.getElementById('start-scan'); | |
| // 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'); | |
| // 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 serverStatus = 'online'; | |
| // Initialize player | |
| function initPlayer(movie) { | |
| // Simulate AI finding the best stream URL | |
| simulateAIScan(movie).then(streamUrl => { | |
| if (Hls.isSupported()) { | |
| hls.loadSource(streamUrl); | |
| hls.attachMedia(video); | |
| hls.on(Hls.Events.MANIFEST_PARSED, function() { | |
| video.play(); | |
| playerOverlay.classList.add('hidden'); | |
| // Update UI with AI quality selection | |
| document.getElementById('quality-btn').innerHTML = ` | |
| <i class="fas fa-tachometer-alt mr-2"></i> | |
| <span class="cyber-font">AI-Q ${Math.random() > 0.5 ? '1080p' : '720p'}</span> | |
| `; | |
| }); | |
| } else if (video.canPlayType('application/vnd.apple.mpegurl')) { | |
| video.src = streamUrl; | |
| video.addEventListener('loadedmetadata', function() { | |
| video.play(); | |
| playerOverlay.classList.add('hidden'); | |
| }); | |
| } | |
| currentMovieTitle.innerHTML = ` | |
| <span class="text-green-400">[AI-SELECTED]</span> ${movie.title} | |
| <span class="text-purple-400">(${movie.release_date ? movie.release_date.substring(0, 4) : 'N/A'})</span> | |
| ${movie.original_language !== 'fr' ? `<span class="text-blue-400 text-sm">[${getLanguageName(movie.original_language)}]</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'; | |
| } | |
| }); | |
| } | |
| // Simulate AI finding the best stream URL | |
| function simulateAIScan(movie) { | |
| return new Promise(resolve => { | |
| // Show scanning animation | |
| playerOverlay.innerHTML = ` | |
| <div class="text-center p-6 max-w-2xl"> | |
| <div class="cyber-loader mb-6"></div> | |
| <h2 class="text-2xl font-bold text-white mb-4 cyber-font">AI Scanner en cours...</h2> | |
| <p class="text-gray-300 mb-4">Recherche des meilleures sources pour: <span class="text-purple-400">${movie.title}</span></p> | |
| <div class="text-left max-w-md mx-auto"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-gray-400">Analyse qualité:</span> | |
| <span class="text-yellow-400">En cours...</span> | |
| </div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-gray-400">Détection langue:</span> | |
| <span class="text-blue-400">${movie.original_language === 'fr' ? 'Français (VFF)' : getLanguageName(movie.original_language)}</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-400">Serveurs disponibles:</span> | |
| <span class="text-green-400">${Math.floor(Math.random() * 5) + 3}</span> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| // Simulate AI scan delay | |
| setTimeout(() => { | |
| // In a real app, this would return actual stream URLs | |
| // For demo, we use a placeholder | |
| const demoUrls = [ | |
| 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', | |
| 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8', | |
| 'https://mnmedias.api.telequebec.tv/m3u8/29880.m3u8' | |
| ]; | |
| resolve(demoUrls[Math.floor(Math.random() * demoUrls.length)]); | |
| }, 2000); | |
| }); | |
| } | |
| // Get language name from code | |
| function getLanguageName(code) { | |
| const languages = { | |
| 'fr': 'Français', | |
| 'en': 'English', | |
| 'es': 'Español', | |
| 'de': 'Deutsch', | |
| 'it': 'Italiano', | |
| 'ja': '日本語' | |
| }; | |
| return languages[code] || code; | |
| } | |
| // 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_recommended') { | |
| // Simulate AI recommendation by sorting by vote average | |
| currentMovies.sort((a, b) => b.vote_average - a.vote_average); | |
| currentMovieIndex = 0; | |
| } 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 sortValue = sortBy.value; | |
| const languageValue = languageFilter.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 (sortValue) { | |
| url += `&sort_by=${sortValue}`; | |
| } | |
| if (languageValue) { | |
| url += `&with_original_language=${languageValue}`; | |
| } | |
| 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'; | |
| // Add AI badge for high-rated movies | |
| const aiBadge = movie.vote_average > 7.5 ? | |
| `<span class="absolute top-2 right-2 cyber-badge badge-ai">AI TOP</span>` : ''; | |
| // Add language badge for non-French movies | |
| const langBadge = movie.original_language !== 'fr' ? | |
| `<span class="absolute bottom-2 right-2 bg-blue-900 text-blue-100 text-xs px-2 py-1 rounded">${movie.original_language.toUpperCase()}</span>` : ''; | |
| 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"> | |
| <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"> | |
| ${movie.vote_average.toFixed(1)} <i class="fas fa-star"></i> | |
| </div> | |
| ` : ''} | |
| ${aiBadge} | |
| ${langBadge} | |
| </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() { | |
| const serverNodes = document.querySelectorAll('.server-node'); | |
| const statusElements = document.querySelectorAll('.server-status'); | |
| // Show optimizing status | |
| statusElements.forEach(el => { | |
| el.textContent = 'Optimisation...'; | |
| el.classList.add('optimizing'); | |
| }); | |
| optimizeServersBtn.innerHTML = `<i class="fas fa-cog fa-spin mr-2"></i> Optimisation...`; | |
| // Simulate optimization | |
| setTimeout(() => { | |
| statusElements.forEach(el => { | |
| el.textContent = 'En ligne'; | |
| el.classList.remove('optimizing'); | |
| }); | |
| optimizeServersBtn.innerHTML = `<i class="fas fa-check mr-2"></i> Optimisé`; | |
| // Show notification | |
| showNotification('Serveurs optimisés avec succès!', 'success'); | |
| // Reset button after delay | |
| setTimeout(() => { | |
| optimizeServersBtn.innerHTML = `<i class="fas fa-sync-alt mr-2"></i> Optimiser`; | |
| }, 2000); | |
| }, 3000); | |
| } | |
| // Show notification | |
| function showNotification(message, type) { | |
| const notification = document.createElement('div'); | |
| notification.className = `fixed bottom-4 right-4 px-4 py-2 rounded-lg shadow-lg z-50 ${ | |
| type === 'success' ? 'bg-green-600' : 'bg-red-600' | |
| }`; | |
| notification.innerHTML = ` | |
| <div class="flex items-center"> | |
| <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-triangle'} mr-2"></i> | |
| <span>${message}</span> | |
| </div> | |
| `; | |
| document.body.appendChild(notification); | |
| setTimeout(() => { | |
| notification.classList.add('opacity-0', 'transition', 'duration-500'); | |
| setTimeout(() => notification.remove(), 500); | |
| }, 3000); | |
| } | |
| // Simulate AI scan | |
| function simulateAIScanProcess() { | |
| startScanBtn.innerHTML = `<i class="fas fa-cog fa-spin mr-1"></i> Scanning...`; | |
| // Update server activity during scan | |
| const serverActivities = document.querySelectorAll('.server-activity'); | |
| serverActivities.forEach(activity => { | |
| activity.innerHTML = ` | |
| <div class="server-stats"> | |
| <div class="server-stat cpu"> | |
| <i class="fas fa-microchip"></i> ${Math.floor(Math.random() * 30) + 50}% | |
| </div> | |
| <div class="server-stat ram"> | |
| <i class="fas fa-memory"></i> ${Math.floor(Math.random() * 40) + 30}% | |
| </div> | |
| <div class="server-stat bandwidth"> | |
| <i class="fas fa-tachometer-alt"></i> ${Math.floor(Math.random() * 100) + 50}Mbps | |
| </div> | |
| </div> | |
| `; | |
| }); | |
| setTimeout(() => { | |
| startScanBtn.innerHTML = `<i class="fas fa-check mr-1"></i> Terminé`; | |
| showNotification('Scan AI terminé: 12 nouveaux films trouvés', 'success'); | |
| // Reset after delay | |
| setTimeout(() => { | |
| startScanBtn.innerHTML = `<i class="fas fa-play mr-1"></i> Lancer`; | |
| }, 2000); | |
| }, 4000); | |
| } | |
| // 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; | |
| const badge = this.querySelector('.badge-auto'); | |
| if (autoPlayEnabled) { | |
| badge.textContent = 'ON'; | |
| badge.className = 'cyber-badge badge-auto'; | |
| this.classList.add('text-green-400'); | |
| this.classList.remove('text-gray-400'); | |
| showNotification('Mode automatique activé', 'success'); | |
| } else { | |
| badge.textContent = 'OFF'; | |
| badge.className = 'cyber-badge bg-gray-600'; | |
| this.classList.remove('text-green-400'); | |
| this.classList.add('text-gray-400'); | |
| showNotification('Mode automatique désactivé', 'success'); | |
| } | |
| }); | |
| playBtn.addEventListener('click', () => { | |
| video.play(); | |
| showNotification('Lecture démarrée', 'success'); | |
| }); | |
| pauseBtn.addEventListener('click', () => { | |
| video.pause(); | |
| showNotification('Lecture en pause', 'success'); | |
| }); | |
| stopBtn.addEventListener('click', () => { | |
| video.pause(); | |
| video.currentTime = 0; | |
| showNotification('Lecture arrêtée', 'success'); | |
| }); | |
| randomBtn.addEventListener('click', () => { | |
| currentMovieIndex = Math.floor(Math.random() * currentMovies.length); | |
| initPlayer(currentMovies[currentMovieIndex]); | |
| showNotification('Film aléatoire sélectionné', 'success'); | |
| }); | |
| searchBtn.addEventListener('click', () => searchMovies(searchInput.value)); | |
| searchInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') searchMovies(searchInput.value); | |
| }); | |
| refreshBtn.addEventListener('click', () => { | |
| currentPage = 1; | |
| loadMovies(); | |
| showNotification('Bibliothèque actualisée', 'success'); | |
| }); | |
| randomMovieBtn.addEventListener('click', () => { | |
| currentMovieIndex = Math.floor(Math.random() * currentMovies.length); | |
| initPlayer(currentMovies[currentMovieIndex]); | |
| showNotification('Film aléatoire sélectionné', 'success'); | |
| }); | |
| loadMoreBtn.addEventListener('click', () => { | |
| currentPage++; | |
| loadMovies(); | |
| }); | |
| yearFilter.addEventListener('change', () => { | |
| currentPage = 1; | |
| loadMovies(); | |
| }); | |
| ratingFilter.addEventListener('change', () => { | |
| currentPage = 1; | |
| loadMovies(); | |
| }); | |
| sortBy.addEventListener('change', () => { | |
| currentPage = 1; | |
| loadMovies(); | |
| }); | |
| languageFilter.addEventListener('change', () => { | |
| currentPage = 1; | |
| loadMovies(); | |
| }); | |
| startDemoBtn.addEventListener('click', () => { | |
| if (currentMovies.length > 0) { | |
| initPlayer(currentMovies[0]); | |
| } | |
| }); | |
| autoScanBtn.addEventListener('click', () => { | |
| playerOverlay.innerHTML = ` | |
| <div class="text-center p-6 max-w-2xl"> | |
| <div class="cyber-loader mb-6"></div> | |
| <h2 class="text-2xl font-bold text-white mb-4 cyber-font">Scan Automatique en cours</h2> | |
| <p class="text-gray-300 mb-6">Recherche des meilleurs films en français...</p> | |
| <div class="text-left max-w-md mx-auto"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-gray-400">Serveurs analysés:</span> | |
| <span class="text-purple-400">3/12</span> | |
| </div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-gray-400">Films trouvés:</span> | |
| <span class="text-blue-400">24</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-400">Qualité VFF:</span> | |
| <span class="text-green-400">92%</span> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| setTimeout(() => { | |
| if (currentMovies.length > 0) { | |
| initPlayer(currentMovies[Math.floor(Math.random() * currentMovies.length)]); | |
| } | |
| }, 3000); | |
| }); | |
| optimizeServersBtn.addEventListener('click', optimizeServers); | |
| aiScanBtn.addEventListener('click', simulateAIScanProcess); | |
| startScanBtn.addEventListener('click', simulateAIScanProcess); | |
| languageSelector.addEventListener('change', function() { | |
| currentLanguage = this.value; | |
| showNotification(`Langue changée: ${this.options[this.selectedIndex].text}`, 'success'); | |
| // In a real app, you would reload content with the new language | |
| }); | |
| preferredLanguage.addEventListener('change', function() { | |
| showNotification(`Langue préférée changée: ${this.options[this.selectedIndex].text}`, 'success'); | |
| }); | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', function() { | |
| loadGenres(); | |
| loadMovies(); | |
| // Show player overlay initially | |
| playerOverlay.classList.remove('hidden'); | |
| // Simulate server status updates | |
| setInterval(() => { | |
| const serverActivities = document.querySelectorAll('.server-activity'); | |
| serverActivities.forEach(activity => { | |
| const stats = activity.querySelector('.server-stats'); | |
| if (stats) { | |
| stats.innerHTML = ` | |
| <div class="server-stat cpu"> | |
| <i class="fas fa-microchip"></i> ${Math.floor(Math.random() * 30) + 10}% | |
| </div> | |
| <div class="server-stat ram"> | |
| <i class="fas fa-memory"></i> ${Math.floor(Math.random() * 30) + 15}% | |
| </div> | |
| <div class="server-stat bandwidth"> | |
| <i class="fas fa-tachometer-alt"></i> ${Math.floor(Math.random() * 80) + 20}Mbps | |
| </div> | |
| `; | |
| } | |
| }); | |
| }, 5000); | |
| }); | |
| </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/cin-auto-2-0" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |