Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CinéFutur - Lecteur de Films</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap'); | |
| :root { | |
| --primary: #ff6b00; | |
| --secondary: #8a2be2; | |
| --dark: #0a0a1a; | |
| } | |
| body { | |
| font-family: 'Orbitron', sans-serif; | |
| background-color: var(--dark); | |
| color: white; | |
| overflow-x: hidden; | |
| } | |
| .glow { | |
| text-shadow: 0 0 10px rgba(255, 107, 0, 0.7); | |
| } | |
| .cyber-button { | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.3s; | |
| } | |
| .cyber-button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(255, 107, 0, 0.4); | |
| } | |
| .film-card { | |
| transition: all 0.3s; | |
| background: rgba(30, 30, 60, 0.5); | |
| border-radius: 10px; | |
| overflow: hidden; | |
| } | |
| .film-card:hover { | |
| transform: scale(1.03); | |
| box-shadow: 0 0 20px rgba(138, 43, 226, 0.5); | |
| } | |
| .video-container { | |
| position: relative; | |
| padding-bottom: 56.25%; /* 16:9 */ | |
| height: 0; | |
| overflow: hidden; | |
| } | |
| .video-container iframe { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| } | |
| .progress-bar { | |
| height: 4px; | |
| background: rgba(255,255,255,0.2); | |
| margin-top: 10px; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--secondary), var(--primary)); | |
| width: 0%; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gradient-to-br from-gray-900 to-gray-800"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="flex justify-between items-center mb-8"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-film text-3xl text-orange-500 mr-3"></i> | |
| <h1 class="text-2xl font-bold glow">CinéFutur <span class="text-sm text-gray-400">Lecteur Premium</span></h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="autoPlayBtn" class="cyber-button bg-gradient-to-r from-purple-600 to-orange-500 text-white py-2 px-4 rounded-lg flex items-center"> | |
| <i class="fas fa-play mr-2"></i> Auto | |
| </button> | |
| <div class="relative"> | |
| <input type="text" placeholder="Rechercher..." class="bg-gray-800 border border-gray-700 rounded-lg py-2 px-4 text-white focus:outline-none focus:border-orange-500"> | |
| <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main> | |
| <!-- Current Video Player --> | |
| <div class="mb-8 bg-gray-900 rounded-xl overflow-hidden shadow-2xl"> | |
| <div class="video-container" id="mainVideoContainer"> | |
| <iframe id="mainVideo" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| <div class="p-4"> | |
| <h2 id="currentFilmTitle" class="text-xl font-bold mb-2">Sélectionnez un film</h2> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <span class="text-sm text-gray-400"><i class="fas fa-clock mr-1"></i> <span id="currentFilmDuration">--:--</span></span> | |
| <span class="text-sm text-gray-400"><i class="fas fa-star mr-1 text-yellow-400"></i> <span id="currentFilmRating">--</span>/10</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button id="fullscreenBtn" class="cyber-button bg-gray-800 text-white py-1 px-3 rounded-lg text-sm"> | |
| <i class="fas fa-expand mr-1"></i> Plein écran | |
| </button> | |
| <button id="nextFilmBtn" class="cyber-button bg-gradient-to-r from-purple-600 to-orange-500 text-white py-1 px-3 rounded-lg text-sm"> | |
| <i class="fas fa-step-forward mr-1"></i> Suivant | |
| </button> | |
| </div> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="progressFill"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Film Library --> | |
| <section> | |
| <h2 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-film text-orange-500 mr-2"></i> | |
| <span>Bibliothèque de Films</span> | |
| </h2> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4"> | |
| <!-- Film 1 - Dune --> | |
| <div class="film-card" data-video="https://www.youtube.com/embed/w0HgHet0sxg" data-title="Dune (2021)" data-duration="2h35m" data-rating="8.0"> | |
| <div class="h-40 bg-cover bg-center" style="background-image: url('https://m.media-amazon.com/images/M/MV5BN2FjNmEyNWMtYzM0ZS00NjIyLTg5YzYtYThlMGVjNzE1OGViXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_.jpg')"> | |
| <div class="bg-black bg-opacity-60 h-full flex items-end p-3"> | |
| <div> | |
| <h3 class="font-bold">Dune</h3> | |
| <p class="text-xs text-gray-300">2021 • Sci-Fi</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Film 2 - Interstellar --> | |
| <div class="film-card" data-video="https://www.youtube.com/embed/zSWdZVtXT7E" data-title="Interstellar (2014)" data-duration="2h49m" data-rating="8.6"> | |
| <div class="h-40 bg-cover bg-center" style="background-image: url('https://m.media-amazon.com/images/M/MV5BZjdkOTU5MDktM2IxOS00OGEyLWFmMjktY2FiMmZkNWIyODZiXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_.jpg')"> | |
| <div class="bg-black bg-opacity-60 h-full flex items-end p-3"> | |
| <div> | |
| <h3 class="font-bold">Interstellar</h3> | |
| <p class="text-xs text-gray-300">2014 • Sci-Fi</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Film 3 - Blade Runner 2049 --> | |
| <div class="film-card" data-video="https://www.youtube.com/embed/gCcx85zbxz4" data-title="Blade Runner 2049 (2017)" data-duration="2h44m" data-rating="8.0"> | |
| <div class="h-40 bg-cover bg-center" style="background-image: url('https://m.media-amazon.com/images/M/MV5BNzA1Njg4NzYxOV5BMl5BanBnXkFtZTgwODk5NjU3MzI@._V1_FMjpg_UX1000_.jpg')"> | |
| <div class="bg-black bg-opacity-60 h-full flex items-end p-3"> | |
| <div> | |
| <h3 class="font-bold">Blade Runner 2049</h3> | |
| <p class="text-xs text-gray-300">2017 • Cyberpunk</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Film 4 - The Matrix --> | |
| <div class="film-card" data-video="https://www.youtube.com/embed/vKQi3bBA1y8" data-title="The Matrix (1999)" data-duration="2h16m" data-rating="8.7"> | |
| <div class="h-40 bg-cover bg-center" style="background-image: url('https://m.media-amazon.com/images/M/MV5BNzQzOTk3OTAtNDQ0Zi00ZTVkLWI0MTEtMDllZjNkYzNjNTc4L2ltYWdlXkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_.jpg')"> | |
| <div class="bg-black bg-opacity-60 h-full flex items-end p-3"> | |
| <div> | |
| <h3 class="font-bold">The Matrix</h3> | |
| <p class="text-xs text-gray-300">1999 • Sci-Fi</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Film 5 - Inception --> | |
| <div class="film-card" data-video="https://www.youtube.com/embed/YoHD9XEInc0" data-title="Inception (2010)" data-duration="2h28m" data-rating="8.8"> | |
| <div class="h-40 bg-cover bg-center" style="background-image: url('https://m.media-amazon.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_FMjpg_UX1000_.jpg')"> | |
| <div class="bg-black bg-opacity-60 h-full flex items-end p-3"> | |
| <div> | |
| <h3 class="font-bold">Inception</h3> | |
| <p class="text-xs text-gray-300">2010 • Sci-Fi</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Film 6 - Tenet --> | |
| <div class="film-card" data-video="https://www.youtube.com/embed/LdOM0x0XDMo" data-title="Tenet (2020)" data-duration="2h30m" data-rating="7.5"> | |
| <div class="h-40 bg-cover bg-center" style="background-image: url('https://m.media-amazon.com/images/M/MV5BYzg0NGM2NjAtNmIxOC00MDJmLTg5ZmItMjE3M2JkMTYyOTQzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_.jpg')"> | |
| <div class="bg-black bg-opacity-60 h-full flex items-end p-3"> | |
| <div> | |
| <h3 class="font-bold">Tenet</h3> | |
| <p class="text-xs text-gray-300">2020 • Sci-Fi</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Film 7 - Arrival --> | |
| <div class="film-card" data-video="https://www.youtube.com/embed/tFMo3UJ4B4g" data-title="Arrival (2016)" data-duration="1h56m" data-rating="7.9"> | |
| <div class="h-40 bg-cover bg-center" style="background-image: url('https://m.media-amazon.com/images/M/MV5BNGU0NTA2YjctYWNlYy00ZDg1LTg5ZTItZWM3MWZiMDI5OGYzL2ltYWdlXkEyXkFqcGdeQXVyNDM3ODU2NDM@._V1_FMjpg_UX1000_.jpg')"> | |
| <div class="bg-black bg-opacity-60 h-full flex items-end p-3"> | |
| <div> | |
| <h3 class="font-bold">Arrival</h3> | |
| <p class="text-xs text-gray-300">2016 • Sci-Fi</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Film 8 - Ex Machina --> | |
| <div class="film-card" data-video="https://www.youtube.com/embed/EoQuVnKhxaM" data-title="Ex Machina (2014)" data-duration="1h48m" data-rating="7.7"> | |
| <div class="h-40 bg-cover bg-center" style="background-image: url('https://m.media-amazon.com/images/M/MV5BMTUxNzc0OTIxMV5BMl5BanBnXkFtZTgwNDI3NzU2NDE@._V1_.jpg')"> | |
| <div class="bg-black bg-opacity-60 h-full flex items-end p-3"> | |
| <div> | |
| <h3 class="font-bold">Ex Machina</h3> | |
| <p class="text-xs text-gray-300">2014 • Sci-Fi</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="mt-12 pt-6 border-t border-gray-800 text-center text-gray-400 text-sm"> | |
| <p>© 2024 CinéFutur - Tous droits réservés</p> | |
| <p class="mt-1">Films intégrés depuis YouTube - À des fins éducatives uniquement</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Configuration des films | |
| const films = [ | |
| { | |
| title: "Dune (2021)", | |
| video: "https://www.youtube.com/embed/w0HgHet0sxg", | |
| duration: "2h35m", | |
| rating: "8.0" | |
| }, | |
| { | |
| title: "Interstellar (2014)", | |
| video: "https://www.youtube.com/embed/zSWdZVtXT7E", | |
| duration: "2h49m", | |
| rating: "8.6" | |
| }, | |
| { | |
| title: "Blade Runner 2049 (2017)", | |
| video: "https://www.youtube.com/embed/gCcx85zbxz4", | |
| duration: "2h44m", | |
| rating: "8.0" | |
| }, | |
| { | |
| title: "The Matrix (1999)", | |
| video: "https://www.youtube.com/embed/vKQi3bBA1y8", | |
| duration: "2h16m", | |
| rating: "8.7" | |
| }, | |
| { | |
| title: "Inception (2010)", | |
| video: "https://www.youtube.com/embed/YoHD9XEInc0", | |
| duration: "2h28m", | |
| rating: "8.8" | |
| }, | |
| { | |
| title: "Tenet (2020)", | |
| video: "https://www.youtube.com/embed/LdOM0x0XDMo", | |
| duration: "2h30m", | |
| rating: "7.5" | |
| }, | |
| { | |
| title: "Arrival (2016)", | |
| video: "https://www.youtube.com/embed/tFMo3UJ4B4g", | |
| duration: "1h56m", | |
| rating: "7.9" | |
| }, | |
| { | |
| title: "Ex Machina (2014)", | |
| video: "https://www.youtube.com/embed/EoQuVnKhxaM", | |
| duration: "1h48m", | |
| rating: "7.7" | |
| } | |
| ]; | |
| // Éléments DOM | |
| const mainVideo = document.getElementById('mainVideo'); | |
| const currentFilmTitle = document.getElementById('currentFilmTitle'); | |
| const currentFilmDuration = document.getElementById('currentFilmDuration'); | |
| const currentFilmRating = document.getElementById('currentFilmRating'); | |
| const progressFill = document.getElementById('progressFill'); | |
| const autoPlayBtn = document.getElementById('autoPlayBtn'); | |
| const nextFilmBtn = document.getElementById('nextFilmBtn'); | |
| const fullscreenBtn = document.getElementById('fullscreenBtn'); | |
| const filmCards = document.querySelectorAll('.film-card'); | |
| const mainVideoContainer = document.getElementById('mainVideoContainer'); | |
| // Variables d'état | |
| let currentFilmIndex = 0; | |
| let isAutoPlaying = false; | |
| let autoPlayInterval; | |
| let progressInterval; | |
| // Charger un film | |
| function loadFilm(index) { | |
| if (index >= 0 && index < films.length) { | |
| currentFilmIndex = index; | |
| const film = films[index]; | |
| mainVideo.src = film.video; | |
| currentFilmTitle.textContent = film.title; | |
| currentFilmDuration.textContent = film.duration; | |
| currentFilmRating.textContent = film.rating; | |
| // Réinitialiser la barre de progression | |
| progressFill.style.width = '0%'; | |
| // Démarrer la mise à jour de la progression | |
| if (progressInterval) clearInterval(progressInterval); | |
| progressInterval = setInterval(updateProgress, 1000); | |
| // Si en mode auto, passer au film suivant après la durée estimée | |
| if (isAutoPlaying) { | |
| if (autoPlayInterval) clearInterval(autoPlayInterval); | |
| const durationInMs = convertDurationToMs(film.duration); | |
| autoPlayInterval = setTimeout(playNextFilm, durationInMs); | |
| } | |
| } | |
| } | |
| // Convertir la durée en millisecondes (approximatif) | |
| function convertDurationToMs(duration) { | |
| const [hours, minutes] = duration.split('h'); | |
| const mins = minutes ? minutes.replace('m', '') : '0'; | |
| return (parseInt(hours) * 3600 + parseInt(mins) * 60) * 1000; | |
| } | |
| // Mettre à jour la barre de progression | |
| function updateProgress() { | |
| const duration = convertDurationToMs(films[currentFilmIndex].duration); | |
| const elapsed = parseInt(progressFill.style.width || '0'); | |
| if (elapsed < 100) { | |
| progressFill.style.width = (elapsed + (100 / (duration / 1000))) + '%'; | |
| } else { | |
| clearInterval(progressInterval); | |
| if (isAutoPlaying) playNextFilm(); | |
| } | |
| } | |
| // Jouer le film suivant | |
| function playNextFilm() { | |
| const nextIndex = (currentFilmIndex + 1) % films.length; | |
| loadFilm(nextIndex); | |
| } | |
| // Basculer le mode auto | |
| function toggleAutoPlay() { | |
| isAutoPlaying = !isAutoPlaying; | |
| if (isAutoPlaying) { | |
| autoPlayBtn.innerHTML = '<i class="fas fa-pause mr-2"></i> Auto'; | |
| const durationInMs = convertDurationToMs(films[currentFilmIndex].duration); | |
| autoPlayInterval = setTimeout(playNextFilm, durationInMs); | |
| } else { | |
| autoPlayBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Auto'; | |
| if (autoPlayInterval) clearInterval(autoPlayInterval); | |
| } | |
| } | |
| // Plein écran | |
| function toggleFullscreen() { | |
| if (!document.fullscreenElement) { | |
| mainVideoContainer.requestFullscreen().catch(err => { | |
| alert(`Erreur plein écran: ${err.message}`); | |
| }); | |
| } else { | |
| document.exitFullscreen(); | |
| } | |
| } | |
| // Événements | |
| autoPlayBtn.addEventListener('click', toggleAutoPlay); | |
| nextFilmBtn.addEventListener('click', playNextFilm); | |
| fullscreenBtn.addEventListener('click', toggleFullscreen); | |
| filmCards.forEach((card, index) => { | |
| card.addEventListener('click', () => { | |
| // Arrêter le mode auto si actif | |
| if (isAutoPlaying) { | |
| toggleAutoPlay(); | |
| } | |
| // Charger le film sélectionné | |
| loadFilm(index); | |
| }); | |
| }); | |
| // Charger le premier film au démarrage | |
| loadFilm(0); | |
| </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/importation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |