|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>CinéStream - Films en Streaming VF</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=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background: #0f0f0f; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.film-card:hover .play-icon { |
|
|
opacity: 1; |
|
|
transform: translate(-50%, -50%) scale(1.1); |
|
|
} |
|
|
|
|
|
.autoplay-toggle { |
|
|
position: relative; |
|
|
width: 50px; |
|
|
height: 24px; |
|
|
} |
|
|
|
|
|
.autoplay-toggle input { |
|
|
opacity: 0; |
|
|
width: 0; |
|
|
height: 0; |
|
|
} |
|
|
|
|
|
.autoplay-slider { |
|
|
position: absolute; |
|
|
cursor: pointer; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background-color: #ccc; |
|
|
transition: .4s; |
|
|
border-radius: 24px; |
|
|
} |
|
|
|
|
|
.autoplay-slider:before { |
|
|
position: absolute; |
|
|
content: ""; |
|
|
height: 16px; |
|
|
width: 16px; |
|
|
left: 4px; |
|
|
bottom: 4px; |
|
|
background-color: white; |
|
|
transition: .4s; |
|
|
border-radius: 50%; |
|
|
} |
|
|
|
|
|
input:checked + .autoplay-slider { |
|
|
background-color: #e50914; |
|
|
} |
|
|
|
|
|
input:checked + .autoplay-slider:before { |
|
|
transform: translateX(26px); |
|
|
} |
|
|
|
|
|
.server-btn { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.server-btn:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.server-btn.active { |
|
|
background-color: #e50914; |
|
|
border-color: #e50914; |
|
|
} |
|
|
|
|
|
.quality-badge { |
|
|
position: absolute; |
|
|
top: 8px; |
|
|
right: 8px; |
|
|
background: rgba(0, 0, 0, 0.7); |
|
|
padding: 2px 6px; |
|
|
border-radius: 4px; |
|
|
font-size: 12px; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.lang-badge { |
|
|
position: absolute; |
|
|
top: 8px; |
|
|
left: 8px; |
|
|
background: rgba(0, 0, 0, 0.7); |
|
|
padding: 2px 6px; |
|
|
border-radius: 4px; |
|
|
font-size: 12px; |
|
|
font-weight: bold; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<nav class="fixed w-full z-50 bg-black bg-opacity-90"> |
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<i class="fas fa-film text-red-500 text-2xl"></i> |
|
|
<span class="text-xl font-bold">CinéStream VF</span> |
|
|
<div class="hidden md:flex space-x-6 ml-10"> |
|
|
<a href="#" class="hover:text-gray-300">Accueil</a> |
|
|
<a href="#" class="hover:text-gray-300">Films VF</a> |
|
|
<a href="#" class="hover:text-gray-300">Séries VF</a> |
|
|
<a href="#" class="hover:text-gray-300">Nouveautés</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="hidden sm:inline">Autoplay</span> |
|
|
<label class="autoplay-toggle"> |
|
|
<input type="checkbox" checked> |
|
|
<span class="autoplay-slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
<div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center cursor-pointer"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="pt-16 pb-8 relative"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent z-10"></div> |
|
|
<div class="absolute inset-0 bg-black opacity-40 z-0"></div> |
|
|
<img src="https://image.tmdb.org/t/p/original/8b8R8l88Qje9dn9OE8PY05Hxl3X.jpg" |
|
|
alt="Dune" |
|
|
class="w-full h-[70vh] object-cover"> |
|
|
<div class="container mx-auto px-4 relative z-20 mt-[-150px]"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-4">Dune : Partie Deux (VF)</h1> |
|
|
<div class="flex items-center space-x-4 mb-6"> |
|
|
<span class="text-green-500 font-semibold">97% Match</span> |
|
|
<span>2024</span> |
|
|
<span class="border px-2">4K Ultra HD</span> |
|
|
<span>2h 46m</span> |
|
|
<span class="bg-blue-500 px-2 rounded">VF</span> |
|
|
</div> |
|
|
<p class="max-w-2xl text-lg mb-6">Paul Atreides s'unit avec Chani et les Fremen pour venger la trahison de sa famille et empêcher un terrible futur que lui seul peut prévoir.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<button class="px-6 py-3 bg-white text-black rounded flex items-center font-semibold hover:bg-opacity-80" onclick="playMovie('dune2')"> |
|
|
<i class="fas fa-play mr-2"></i> Lecture |
|
|
</button> |
|
|
<button class="px-6 py-3 bg-gray-600 bg-opacity-70 rounded flex items-center font-semibold hover:bg-opacity-50"> |
|
|
<i class="fas fa-info-circle mr-2"></i> Plus d'infos |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<div class="mb-10"> |
|
|
<h2 class="text-2xl font-bold mb-6">Nouveaux films VF ajoutés</h2> |
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4"> |
|
|
|
|
|
<div class="film-card relative rounded overflow-hidden group"> |
|
|
<img src="https://image.tmdb.org/t/p/w500/1pdfLvkbY9ohJlCjQH2CZjjYVvJ.jpg" |
|
|
alt="Oppenheimer" |
|
|
class="w-full h-auto object-cover rounded"> |
|
|
<span class="quality-badge">4K</span> |
|
|
<span class="lang-badge">VF</span> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300"> |
|
|
<div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300" onclick="playMovie('oppenheimer')"> |
|
|
<i class="fas fa-play-circle text-5xl text-white opacity-90 hover:text-red-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent"> |
|
|
<h3 class="font-semibold">Oppenheimer (VF)</h3> |
|
|
<div class="flex justify-between text-xs text-gray-300"> |
|
|
<span>2023</span> |
|
|
<span>3h</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="film-card relative rounded overflow-hidden group"> |
|
|
<img src="https://image.tmdb.org/t/p/w500/kDp1vUBnMpe8ak4rjgl3cLELqjU.jpg" |
|
|
alt="Killers of the Flower Moon" |
|
|
class="w-full h-auto object-cover rounded"> |
|
|
<span class="quality-badge">1080p</span> |
|
|
<span class="lang-badge">VF</span> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300"> |
|
|
<div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300" onclick="playMovie('killers')"> |
|
|
<i class="fas fa-play-circle text-5xl text-white opacity-90 hover:text-red-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent"> |
|
|
<h3 class="font-semibold">Killers of the Flower Moon (VF)</h3> |
|
|
<div class="flex justify-between text-xs text-gray-300"> |
|
|
<span>2023</span> |
|
|
<span>3h 26m</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="film-card relative rounded overflow-hidden group"> |
|
|
<img src="https://image.tmdb.org/t/p/w500/8Vt6mWRCeplUPZQoKvXvxQyFsVu.jpg" |
|
|
alt="The Marvels" |
|
|
class="w-full h-auto object-cover rounded"> |
|
|
<span class="quality-badge">1080p</span> |
|
|
<span class="lang-badge">VF</span> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300"> |
|
|
<div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300" onclick="playMovie('marvels')"> |
|
|
<i class="fas fa-play-circle text-5xl text-white opacity-90 hover:text-red-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent"> |
|
|
<h3 class="font-semibold">The Marvels (VF)</h3> |
|
|
<div class="flex justify-between text-xs text-gray-300"> |
|
|
<span>2023</span> |
|
|
<span>1h 45m</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="film-card relative rounded overflow-hidden group"> |
|
|
<img src="https://image.tmdb.org/t/p/w500/4m1Au3YkjqsxF8iwQy0fPYSxE0h.jpg" |
|
|
alt="Napoleon" |
|
|
class="w-full h-auto object-cover rounded"> |
|
|
<span class="quality-badge">720p</span> |
|
|
<span class="lang-badge">VF</span> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300"> |
|
|
<div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300" onclick="playMovie('napoleon')"> |
|
|
<i class="fas fa-play-circle text-5xl text-white opacity-90 hover:text-red-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent"> |
|
|
<h3 class="font-semibold">Napoléon (VF)</h3> |
|
|
<div class="flex justify-between text-xs text-gray-300"> |
|
|
<span>2023</span> |
|
|
<span>2h 38m</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="film-card relative rounded overflow-hidden group"> |
|
|
<img src="https://image.tmdb.org/t/p/w500/1X7l9L2FVaxbZluYrGq4h8QZQpM.jpg" |
|
|
alt="Wonka" |
|
|
class="w-full h-auto object-cover rounded"> |
|
|
<span class="quality-badge">1080p</span> |
|
|
<span class="lang-badge">VF</span> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300"> |
|
|
<div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300" onclick="playMovie('wonka')"> |
|
|
<i class="fas fa-play-circle text-5xl text-white opacity-90 hover:text-red-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent"> |
|
|
<h3 class="font-semibold">Wonka (VF)</h3> |
|
|
<div class="flex justify-between text-xs text-gray-300"> |
|
|
<span>2023</span> |
|
|
<span>1h 56m</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-10"> |
|
|
<h2 class="text-2xl font-bold mb-6">Recommandations VF pour vous</h2> |
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4"> |
|
|
|
|
|
<div class="film-card relative rounded overflow-hidden group"> |
|
|
<img src="https://image.tmdb.org/t/p/w500/8Gxv8gSFCU0XGDykEGv7zR1nBua.jpg" |
|
|
alt="Poor Things" |
|
|
class="w-full h-auto object-cover rounded"> |
|
|
<span class="quality-badge">1080p</span> |
|
|
<span class="lang-badge">VF</span> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300"> |
|
|
<div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300" onclick="playMovie('poorthings')"> |
|
|
<i class="fas fa-play-circle text-5xl text-white opacity-90 hover:text-red-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent"> |
|
|
<h3 class="font-semibold">Poor Things (VF)</h3> |
|
|
<div class="flex justify-between text-xs text-gray-300"> |
|
|
<span>2023</span> |
|
|
<span>2h 21m</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="film-card relative rounded overflow-hidden group"> |
|
|
<img src="https://image.tmdb.org/t/p/w500/4HodYYKEIsGOdinkGi2Ucz6X9i0.jpg" |
|
|
alt="The Boy and the Heron" |
|
|
class="w-full h-auto object-cover rounded"> |
|
|
<span class="quality-badge">720p</span> |
|
|
<span class="lang-badge">VF</span> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300"> |
|
|
<div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300" onclick="playMovie('boyheron')"> |
|
|
<i class="fas fa-play-circle text-5xl text-white opacity-90 hover:text-red-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent"> |
|
|
<h3 class="font-semibold">Le Garçon et le Héron (VF)</h3> |
|
|
<div class="flex justify-between text-xs text-gray-300"> |
|
|
<span>2023</span> |
|
|
<span>2h 4m</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="film-card relative rounded overflow-hidden group"> |
|
|
<img src="https://image.tmdb.org/t/p/w500/1XDDXPXGiI8g7Gf0rwQUdWJ6q2S.jpg" |
|
|
alt="The Hunger Games: The Ballad of Songbirds & Snakes" |
|
|
class="w-full h-auto object-cover rounded"> |
|
|
<span class="quality-badge">1080p</span> |
|
|
<span class="lang-badge">VF</span> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300"> |
|
|
<div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300" onclick="playMovie('hungergames')"> |
|
|
<i class="fas fa-play-circle text-5xl text-white opacity-90 hover:text-red-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent"> |
|
|
<h3 class="font-semibold">Hunger Games : La Ballade... (VF)</h3> |
|
|
<div class="flex justify-between text-xs text-gray-300"> |
|
|
<span>2023</span> |
|
|
<span>2h 37m</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="film-card relative rounded overflow-hidden group"> |
|
|
<img src="https://image.tmdb.org/t/p/w500/5mzr6JZbrqnqD8rCEvPhuCE5Fw2.jpg" |
|
|
alt="The Iron Claw" |
|
|
class="w-full h-auto object-cover rounded"> |
|
|
<span class="quality-badge">720p</span> |
|
|
<span class="lang-badge">VF</span> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300"> |
|
|
<div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300" onclick="playMovie('ironclaw')"> |
|
|
<i class="fas fa-play-circle text-5xl text-white opacity-90 hover:text-red-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent"> |
|
|
<h3 class="font-semibold">The Iron Claw (VF)</h3> |
|
|
<div class="flex justify-between text-xs text-gray-300"> |
|
|
<span>2023</span> |
|
|
<span>2h 12m</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="film-card relative rounded overflow-hidden group"> |
|
|
<img src="https://image.tmdb.org/t/p/w500/1e2yX2LFT7xRSEiir9bsIc3UR1K.jpg" |
|
|
alt="Aquaman and the Lost Kingdom" |
|
|
class="w-full h-auto object-cover rounded"> |
|
|
<span class="quality-badge">4K</span> |
|
|
<span class="lang-badge">VF</span> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300"> |
|
|
<div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300" onclick="playMovie('aquaman2')"> |
|
|
<i class="fas fa-play-circle text-5xl text-white opacity-90 hover:text-red-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent"> |
|
|
<h3 class="font-semibold">Aquaman 2 (VF)</h3> |
|
|
<div class="flex justify-between text-xs text-gray-300"> |
|
|
<span>2023</span> |
|
|
<span>2h 4m</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-black py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row justify-between"> |
|
|
<div class="mb-8 md:mb-0"> |
|
|
<div class="flex items-center space-x-2 mb-4"> |
|
|
<i class="fas fa-film text-red-500 text-2xl"></i> |
|
|
<span class="text-xl font-bold">CinéStream VF</span> |
|
|
</div> |
|
|
<p class="text-gray-400 max-w-md">La meilleure plateforme pour regarder des films en VF directement en streaming.</p> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Navigation</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Accueil</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Films VF</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Séries VF</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Nouveautés</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Compte</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Mon compte</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Abonnements</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Paramètres</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Nous suivre</h3> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-red-500"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-red-500"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-red-500"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500"> |
|
|
<p>© 2023 CinéStream VF. Tous droits réservés.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div id="playerModal" class="fixed inset-0 z-50 hidden bg-black bg-opacity-90 flex items-center justify-center p-4"> |
|
|
<div class="relative w-full max-w-6xl"> |
|
|
<button id="closePlayer" class="absolute -top-12 right-0 text-white text-3xl hover:text-red-500"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
<div class="aspect-w-16 aspect-h-9"> |
|
|
<video id="moviePlayer" controls autoplay class="w-full rounded-lg"> |
|
|
|
|
|
Votre navigateur ne supporte pas la lecture de vidéos. |
|
|
</video> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-4 bg-gray-900 p-4 rounded-lg"> |
|
|
<h3 class="text-lg font-semibold mb-3">Serveurs VF disponibles</h3> |
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3" id="serverList"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4 text-white"> |
|
|
<h2 class="text-2xl font-bold" id="movieTitle">Titre du film</h2> |
|
|
<div class="flex items-center mt-2 space-x-4 text-sm text-gray-300"> |
|
|
<span id="movieQuality">4K UHD</span> |
|
|
<span id="movieDuration">2h 46m</span> |
|
|
<span id="movieGenre">Science-Fiction</span> |
|
|
<span class="bg-blue-500 px-2 rounded">VF</span> |
|
|
</div> |
|
|
<div class="flex space-x-4 mt-4"> |
|
|
<button class="px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700"> |
|
|
<i class="fas fa-closed-captioning mr-2"></i>Sous-titres |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700" id="qualityBtn"> |
|
|
<i class="fas fa-cog mr-2"></i>Qualité |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700" onclick="openFullscreen()"> |
|
|
<i class="fas fa-expand mr-2"></i>Plein écran |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const moviesDatabase = { |
|
|
'dune2': { |
|
|
title: 'Dune : Partie Deux (VF)', |
|
|
quality: '4K UHD', |
|
|
duration: '2h 46m', |
|
|
genre: 'Science-Fiction', |
|
|
servers: [ |
|
|
{ name: 'Serveur VF 1', url: 'https://example.com/stream/dune2/vf1', quality: '4K' }, |
|
|
{ name: 'Serveur VF 2', url: 'https://example.com/stream/dune2/vf2', quality: '1080p' }, |
|
|
{ name: 'Serveur VF 3', url: 'https://example.com/stream/dune2/vf3', quality: '720p' }, |
|
|
{ name: 'Serveur VF 4', url: 'https://example.com/stream/dune2/vf4', quality: '1080p' } |
|
|
] |
|
|
}, |
|
|
'oppenheimer': { |
|
|
title: 'Oppenheimer (VF)', |
|
|
quality: '4K UHD', |
|
|
duration: '3h', |
|
|
genre: 'Drame Historique', |
|
|
servers: [ |
|
|
{ name: 'Serveur VF 1', url: 'https://example.com/stream/oppenheimer/vf1', quality: '4K' }, |
|
|
{ name: 'Serveur VF 2', url: 'https://example.com/stream/oppenheimer/vf2', quality: '1080p' } |
|
|
] |
|
|
}, |
|
|
'killers': { |
|
|
title: 'Killers of the Flower Moon (VF)', |
|
|
quality: '1080p', |
|
|
duration: '3h 26m', |
|
|
genre: 'Drame', |
|
|
servers: [ |
|
|
{ name: 'Serveur VF 1', url: 'https://example.com/stream/killers/vf1', quality: '1080p' }, |
|
|
{ name: 'Serveur VF 2', url: 'https://example.com/stream/killers/vf2', quality: '720p' } |
|
|
] |
|
|
}, |
|
|
'marvels': { |
|
|
title: 'The Marvels (VF)', |
|
|
quality: '1080p', |
|
|
duration: '1h 45m', |
|
|
genre: 'Action', |
|
|
servers: [ |
|
|
{ name: 'Serveur VF 1', url: 'https://example.com/stream/marvels/vf1', quality: '1080p' }, |
|
|
{ name: 'Serveur VF 2', url: 'https://example.com/stream/marvels/vf2', quality: '720p' }, |
|
|
{ name: 'Serveur VF 3', url: 'https://example.com/stream/marvels/vf3', quality: '1080p' } |
|
|
] |
|
|
}, |
|
|
'napoleon': { |
|
|
title: 'Napoléon (VF)', |
|
|
quality: '720p', |
|
|
duration: '2h 38m', |
|
|
genre: 'Historique', |
|
|
servers: [ |
|
|
{ name: 'Serveur VF 1', url: 'https://example.com/stream/napoleon/vf1', quality: '720p' }, |
|
|
{ name: 'Serveur VF 2', url: 'https://example.com/stream/napoleon/vf2', quality: '1080p' } |
|
|
] |
|
|
}, |
|
|
'wonka': { |
|
|
title: 'Wonka (VF)', |
|
|
quality: '1080p', |
|
|
duration: '1h 56m', |
|
|
genre: 'Fantaisie', |
|
|
servers: [ |
|
|
{ name: 'Serveur VF 1', url: 'https://example.com/stream/wonka/vf1', quality: '1080p' }, |
|
|
{ name: 'Serveur VF 2', url: 'https://example.com/stream/wonka/vf2', quality: '720p' } |
|
|
] |
|
|
}, |
|
|
'poorthings': { |
|
|
title: 'Poor Things (VF)', |
|
|
quality: '1080p', |
|
|
duration: '2h 21m', |
|
|
genre: 'Drame', |
|
|
servers: [ |
|
|
{ name: 'Serveur VF 1', url: 'https://example.com/stream/poorthings/vf1', quality: '1080p' } |
|
|
] |
|
|
}, |
|
|
'boyheron': { |
|
|
title: 'Le Garçon et le Héron (VF)', |
|
|
quality: '720p', |
|
|
duration: '2h 4m', |
|
|
genre: 'Animation', |
|
|
servers: [ |
|
|
{ name: 'Serveur VF 1', url: 'https://example.com/stream/boyheron/vf1', quality: '720p' }, |
|
|
{ name: 'Serveur VF 2', url: 'https://example.com/stream/boyheron/vf2', quality: '1080p' } |
|
|
] |
|
|
}, |
|
|
'hungergames': { |
|
|
title: 'Hunger Games : La Ballade... (VF)', |
|
|
quality: '1080p', |
|
|
duration: '2h 37m', |
|
|
genre: 'Action', |
|
|
servers: [ |
|
|
{ name: 'Serveur VF 1', url: 'https://example.com/stream/hungergames/vf1', quality: '1080p' }, |
|
|
{ name: 'Serveur VF 2', url: 'https://example.com/stream/hungergames/vf2', quality: '720p' } |
|
|
] |
|
|
}, |
|
|
'ironclaw': { |
|
|
title: 'The Iron Claw (VF)', |
|
|
quality: '720p', |
|
|
duration: '2h 12m', |
|
|
genre: 'Drame', |
|
|
servers: [ |
|
|
{ name: 'Serveur VF 1', url: 'https://example.com/stream/ironclaw/vf1', quality: '720p' } |
|
|
] |
|
|
}, |
|
|
'aquaman2': { |
|
|
title: 'Aquaman 2 (VF)', |
|
|
quality: '4K UHD', |
|
|
duration: '2h 4m', |
|
|
genre: 'Action', |
|
|
servers: [ |
|
|
{ name: 'Serveur VF 1', url: 'https://example.com/stream/aquaman2/vf1', quality: '4K' }, |
|
|
{ name: 'Serveur VF 2', url: 'https://example.com/stream/aquaman2/vf2', quality: '1080p' } |
|
|
] |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
document.getElementById('closePlayer').addEventListener('click', function() { |
|
|
closePlayer(); |
|
|
}); |
|
|
|
|
|
|
|
|
function openFullscreen() { |
|
|
const elem = document.getElementById('moviePlayer'); |
|
|
if (elem.requestFullscreen) { |
|
|
elem.requestFullscreen(); |
|
|
} else if (elem.webkitRequestFullscreen) { |
|
|
elem.webkitRequestFullscreen(); |
|
|
} else if (elem.msRequestFullscreen) { |
|
|
elem.msRequestFullscreen(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const player = document.getElementById('moviePlayer'); |
|
|
player.addEventListener('ended', function() { |
|
|
if (document.querySelector('input[type="checkbox"]').checked) { |
|
|
|
|
|
setTimeout(() => { |
|
|
alert('Lecture automatique : Le prochain film va commencer'); |
|
|
|
|
|
player.currentTime = 0; |
|
|
player.play(); |
|
|
}, 2000); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function playMovie(movieId) { |
|
|
const movie = moviesDatabase[movieId]; |
|
|
if (!movie) return; |
|
|
|
|
|
|
|
|
document.getElementById('movieTitle').textContent = movie.title; |
|
|
document.getElementById('movieQuality').textContent = movie.quality; |
|
|
document.getElementById('movieDuration').textContent = movie.duration; |
|
|
document.getElementById('movieGenre').textContent = movie.genre; |
|
|
|
|
|
|
|
|
const serverList = document.getElementById('serverList'); |
|
|
serverList.innerHTML = ''; |
|
|
|
|
|
movie.servers.forEach((server, index) => { |
|
|
const serverBtn = document.createElement('button'); |
|
|
serverBtn.className = 'server-btn bg-gray-800 hover:bg-gray-700 border border-gray-700 rounded-lg p-2 text-sm flex flex-col items-center'; |
|
|
if (index === 0) { |
|
|
serverBtn.classList.add('active'); |
|
|
} |
|
|
|
|
|
serverBtn.innerHTML = ` |
|
|
<span class="font-medium">${server.name}</span> |
|
|
<span class="text-xs text-gray-400 mt-1">${server.quality}</span> |
|
|
`; |
|
|
|
|
|
serverBtn.addEventListener('click', function() { |
|
|
|
|
|
document.querySelectorAll('.server-btn').forEach(btn => { |
|
|
btn.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
this.classList.add('active'); |
|
|
|
|
|
|
|
|
loadVideo(server.url); |
|
|
}); |
|
|
|
|
|
serverList.appendChild(serverBtn); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('playerModal').classList.remove('hidden'); |
|
|
document.body.style.overflow = 'hidden'; |
|
|
|
|
|
|
|
|
if (movie.servers.length > 0) { |
|
|
loadVideo(movie.servers[0].url); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function loadVideo(url) { |
|
|
const player = document.getElementById('moviePlayer'); |
|
|
player.src = url; |
|
|
player.load(); |
|
|
player.play().catch(e => { |
|
|
console.error('Erreur de lecture automatique:', e); |
|
|
|
|
|
const playBtn = document.createElement('button'); |
|
|
playBtn.className = 'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-red-500 hover:bg-red-600 text-white rounded-full p-4'; |
|
|
playBtn.innerHTML = '<i class="fas fa-play text-xl"></i>'; |
|
|
playBtn.onclick = function() { |
|
|
player.play(); |
|
|
this.remove(); |
|
|
}; |
|
|
|
|
|
const playerContainer = player.parentElement; |
|
|
const existingBtn = playerContainer.querySelector('button'); |
|
|
if (!existingBtn) { |
|
|
playerContainer.appendChild(playBtn); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function closePlayer() { |
|
|
const player = document.getElementById('moviePlayer'); |
|
|
player.pause(); |
|
|
document.getElementById('playerModal').classList.add('hidden'); |
|
|
document.body.style.overflow = 'auto'; |
|
|
} |
|
|
</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-plus" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
