Hugging Face's logo

Spaces:
docto41
/
streamflix
Running

App Files Community
streamflix / index.html
docto41's picture
docto41
Add 2 files
313c55c verified
raw
history blame contribute delete
50.7 kB
 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CineMax Pro - Films Complets en Streaming</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: #ffffff;
overflow-x: hidden;
}
.hero-gradient {
background: linear-gradient(135deg, rgba(229,9,20,0.8) 0%, rgba(0,0,0,0.9) 70%);
}
.film-card {
transition: all 0.3s ease;
perspective: 1000px;
}
.film-inner {
transition: transform 0.6s;
transform-style: preserve-3d;
}
.film-card:hover .film-inner {
transform: rotateY(10deg) scale(1.03);
}
.film-overlay {
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%);
opacity: 0;
transition: opacity 0.3s ease;
}
.film-card:hover .film-overlay {
opacity: 1;
}
.glow {
box-shadow: 0 0 15px rgba(229, 9, 20, 0.5);
}
.player-gradient {
background: linear-gradient(to bottom, #000000 0%, #1a1a1a 100%);
}
.progress-bar {
height: 4px;
background: rgba(255,255,255,0.2);
}
.progress-fill {
height: 100%;
background: #e50914;
width: 0%;
transition: width 0.1s linear;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.category-tab {
transition: all 0.3s ease;
}
.category-tab:hover {
transform: translateY(-3px);
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.animate-pulse-slow {
animation: pulse 2s infinite;
}
/* Nouveaux styles pour le mode cinéma */
.cinema-mode {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
background: #000;
display: flex;
flex-direction: column;
}
.cinema-controls {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.7);
padding: 15px;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.cinema-mode:hover .cinema-controls {
transform: translateY(0);
}
.quality-selector {
position: absolute;
top: 20px;
right: 20px;
z-index: 101;
background: rgba(0,0,0,0.7);
border-radius: 5px;
overflow: hidden;
display: none;
}
.quality-selector.show {
display: block;
}
</style>
</head>
<body class="bg-black text-white">
<!-- Navigation -->
<nav class="bg-black bg-opacity-90 fixed w-full z-50 shadow-xl border-b border-gray-800">
<div class="container mx-auto px-6 py-3 flex justify-between items-center">
<div class="flex items-center space-x-10">
<a href="#" class="flex items-center">
<i class="fas fa-film text-red-600 text-3xl mr-2"></i>
<span class="text-2xl font-bold bg-gradient-to-r from-red-600 to-purple-600 bg-clip-text text-transparent">CineMax Pro</span>
</a>
<div class="hidden lg:flex space-x-8">
<a href="#" class="hover:text-red-400 transition duration-300 flex items-center">
<i class="fas fa-home mr-2"></i> Accueil
</a>
<a href="#" class="hover:text-red-400 transition duration-300 flex items-center">
<i class="fas fa-film mr-2"></i> Films Complets
</a>
<a href="#" class="hover:text-red-400 transition duration-300 flex items-center">
<i class="fas fa-tv mr-2"></i> Séries
</a>
<a href="#" class="hover:text-red-400 transition duration-300 flex items-center">
<i class="fas fa-star mr-2"></i> Nouveautés
</a>
</div>
</div>
<div class="flex items-center space-x-6">
<div class="relative hidden md:block">
<input type="text" placeholder="Rechercher un film..." class="bg-gray-800 rounded-full py-2 px-4 pl-10 w-64 focus:outline-none focus:ring-2 focus:ring-red-500">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
</div>
<div class="flex items-center space-x-4">
<button class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-full font-bold text-sm transition duration-300">
S'abonner
</button>
<div class="relative group">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profil" class="w-10 h-10 rounded-full cursor-pointer border-2 border-transparent group-hover:border-red-500 transition duration-300">
<div class="absolute right-0 mt-2 w-48 bg-gray-800 rounded-md shadow-lg py-1 hidden group-hover:block">
<a href="#" class="block px-4 py-2 hover:bg-gray-700">Mon compte</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-700">Paramètres</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-700">Déconnexion</a>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- Bannière Hero -->
<section class="relative h-screen pt-16">
<div class="absolute inset-0">
<img src="https://image.tmdb.org/t/p/original/9yBVqNruk6Ykrwc32qrK2TIE5xw.jpg" alt="Dune" class="w-full h-full object-cover">
<div class="absolute inset-0 hero-gradient"></div>
</div>
<div class="container mx-auto px-6 relative z-10 h-full flex items-center">
<div class="max-w-2xl">
<div class="flex items-center mb-4">
<span class="bg-red-600 text-white px-3 py-1 rounded-full text-sm font-bold mr-3">Nouveau</span>
<span class="text-gray-300">Sortie cette semaine</span>
</div>
<h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">Films Complets en HD</h1>
<p class="text-xl mb-8">Regardez vos films préférés en entier, sans coupure, avec une qualité optimale. Plus de 20,000 films disponibles.</p>
<div class="flex space-x-4">
<button id="playRandomBtn" class="bg-red-600 hover:bg-red-700 px-8 py-3 rounded-full font-bold flex items-center transition duration-300 transform hover:scale-105 glow">
<i class="fas fa-random mr-2"></i> Film aléatoire
</button>
<button class="bg-gray-800 bg-opacity-70 hover:bg-opacity-90 px-8 py-3 rounded-full font-bold flex items-center transition duration-300">
<i class="fas fa-info-circle mr-2"></i> Plus d'infos
</button>
</div>
<div class="mt-12 flex items-center space-x-6">
<div class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Qualité 4K HDR</span>
</div>
<div class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Audio français</span>
</div>
<div class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Sous-titres</span>
</div>
</div>
</div>
</div>
</section>
<!-- Lecteur vidéo en mode cinéma -->
<div id="cinemaPlayer" class="cinema-mode hidden">
<div class="flex-grow relative">
<!-- Contenu du lecteur -->
<div class="absolute inset-0 flex items-center justify-center bg-black">
<div class="text-center">
<i class="fas fa-play-circle text-6xl text-red-500 mb-4 animate-pulse-slow"></i>
<p class="text-xl">Lecture en cours...</p>
</div>
</div>
<!-- Contrôles qualité -->
<div class="quality-selector" id="qualitySelector">
<button class="block w-full px-4 py-2 text-left hover:bg-gray-700" data-quality="auto">Auto</button>
<button class="block w-full px-4 py-2 text-left hover:bg-gray-700" data-quality="1080">1080p</button>
<button class="block w-full px-4 py-2 text-left hover:bg-gray-700" data-quality="720">720p</button>
<button class="block w-full px-4 py-2 text-left hover:bg-gray-700" data-quality="480">480p</button>
</div>
<!-- Contrôles du lecteur -->
<div class="cinema-controls">
<div class="progress-bar mb-4">
<div id="cinemaProgress" class="progress-fill"></div>
</div>
<div class="flex justify-between items-center">
<div class="flex items-center space-x-4">
<button id="cinemaPlayPause" class="text-white text-xl">
<i class="fas fa-pause"></i>
</button>
<button class="text-white text-xl">
<i class="fas fa-step-backward"></i>
</button>
<button class="text-white text-xl">
<i class="fas fa-step-forward"></i>
</button>
<span id="cinemaCurrentTime" class="text-sm">00:00:00</span>
<span class="text-sm">/</span>
<span id="cinemaTotalTime" class="text-sm">02:30:00</span>
</div>
<div class="flex items-center space-x-4">
<button class="text-white text-xl">
<i class="fas fa-volume-up"></i>
</button>
<button class="text-white text-xl">
<i class="fas fa-closed-captioning"></i>
</button>
<button id="qualityBtn" class="text-white text-xl">
<i class="fas fa-cog"></i>
</button>
<button id="fullscreenBtn" class="text-white text-xl">
<i class="fas fa-expand"></i>
</button>
<button id="closeCinemaBtn" class="text-white text-xl">
<i class="fas fa-times"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Catalogue de films -->
<section class="py-16 bg-black">
<div class="container mx-auto px-6">
<!-- Catégories -->
<div class="mb-8 overflow-x-auto scrollbar-hide">
<div class="flex space-x-4 pb-2">
<button class="category-tab bg-red-600 text-white px-6 py-2 rounded-full font-bold">Tous</button>
<button class="category-tab bg-gray-800 hover:bg-gray-700 px-6 py-2 rounded-full">Action</button>
<button class="category-tab bg-gray-800 hover:bg-gray-700 px-6 py-2 rounded-full">Comédie</button>
<button class="category-tab bg-gray-800 hover:bg-gray-700 px-6 py-2 rounded-full">Drame</button>
<button class="category-tab bg-gray-800 hover:bg-gray-700 px-6 py-2 rounded-full">Science-fiction</button>
<button class="category-tab bg-gray-800 hover:bg-gray-700 px-6 py-2 rounded-full">Horreur</button>
<button class="category-tab bg-gray-800 hover:bg-gray-700 px-6 py-2 rounded-full">Animation</button>
<button class="category-tab bg-gray-800 hover:bg-gray-700 px-6 py-2 rounded-full">Documentaire</button>
</div>
</div>
<!-- Barre de filtres -->
<div class="mb-8 bg-gray-900 rounded-xl p-6 shadow-lg">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center">
<h2 class="text-2xl font-bold mb-4 md:mb-0">Trouvez vos films préférés</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 w-full md:w-auto">
<div>
<select class="w-full bg-gray-800 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-red-500 text-sm">
<option>Tous les genres</option>
<option>Action</option>
<option>Comédie</option>
<option>Drame</option>
</select>
</div>
<div>
<select class="w-full bg-gray-800 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-red-500 text-sm">
<option>Toutes les années</option>
<option>2020-2024</option>
<option>2010-2019</option>
</select>
</div>
<div>
<select class="w-full bg-gray-800 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-red-500 text-sm">
<option>Toutes les notes</option>
<option>4+ étoiles</option>
<option>3+ étoiles</option>
</select>
</div>
<div>
<select class="w-full bg-gray-800 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-red-500 text-sm">
<option>Populaire</option>
<option>Récent</option>
<option>Ancien</option>
</select>
</div>
</div>
</div>
</div>
<!-- Résultats -->
<div class="mb-8 flex justify-between items-center">
<h3 class="text-2xl font-bold">20,543 films complets disponibles</h3>
<div class="flex items-center space-x-2">
<span class="text-gray-400">1-24 sur 20,543</span>
<button class="p-2 rounded-full bg-gray-800 hover:bg-gray-700">
<i class="fas fa-chevron-left"></i>
</button>
<button class="p-2 rounded-full bg-gray-800 hover:bg-gray-700">
<i class="fas fa-chevron-right"></i>
</button>
</div>
</div>
<!-- Grille de films -->
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
<!-- Film 1 -->
<div class="film-card relative rounded-xl overflow-hidden shadow-lg">
<div class="film-inner">
<img src="https://image.tmdb.org/t/p/w500/8Vt6mWEReuy4Of61Lnj5Xj704m8.jpg" alt="Dune" class="w-full h-80 object-cover">
<div class="film-overlay absolute inset-0 flex flex-col justify-between p-4">
<div class="flex justify-end">
<button class="cinema-play-btn bg-red-600 hover:bg-red-700 rounded-full w-10 h-10 flex items-center justify-center"
data-title="Dune : Partie Deux"
data-duration="02:46:00"
data-poster="https://image.tmdb.org/t/p/w500/8Vt6mWEReuy4Of61Lnj5Xj704m8.jpg">
<i class="fas fa-play"></i>
</button>
</div>
<div>
<h4 class="font-bold text-lg mb-1">Dune : Partie Deux</h4>
<div class="flex items-center text-sm text-gray-300 mb-2">
<span>2024</span>
<span class="mx-2">•</span>
<span>2h 46m</span>
</div>
<div class="flex mb-2">
<i class="fas fa-star text-yellow-400 mr-1"></i>
<span>8.7/10</span>
</div>
<div class="flex flex-wrap gap-1">
<span class="text-xs bg-gray-700 px-2 py-1 rounded">Science-fiction</span>
<span class="text-xs bg-gray-700 px-2 py-1 rounded">Aventure</span>
</div>
</div>
</div>
</div>
</div>
<!-- Film 2 -->
<div class="film-card relative rounded-xl overflow-hidden shadow-lg">
<div class="film-inner">
<img src="https://image.tmdb.org/t/p/w500/1pdfLvkbY9ohJlCjQHlyCZ8O7C4.jpg" alt="Furiosa" class="w-full h-80 object-cover">
<div class="film-overlay absolute inset-0 flex flex-col justify-between p-4">
<div class="flex justify-end">
<button class="cinema-play-btn bg-red-600 hover:bg-red-700 rounded-full w-10 h-10 flex items-center justify-center"
data-title="Furiosa"
data-duration="02:30:00"
data-poster="https://image.tmdb.org/t/p/w500/1pdfLvkbY9ohJlCjQHlyCZ8O7C4.jpg">
<i class="fas fa-play"></i>
</button>
</div>
<div>
<h4 class="font-bold text-lg mb-1">Furiosa</h4>
<div class="flex items-center text-sm text-gray-300 mb-2">
<span>2024</span>
<span class="mx-2">•</span>
<span>2h 30m</span>
</div>
<div class="flex mb-2">
<i class="fas fa-star text-yellow-400 mr-1"></i>
<span>8.1/10</span>
</div>
<div class="flex flex-wrap gap-1">
<span class="text-xs bg-gray-700 px-2 py-1 rounded">Action</span>
<span class="text-xs bg-gray-700 px-2 py-1 rounded">Science-fiction</span>
</div>
</div>
</div>
</div>
</div>
<!-- Film 3 -->
<div class="film-card relative rounded-xl overflow-hidden shadow-lg">
<div class="film-inner">
<img src="https://image.tmdb.org/t/p/w500/4uH7T0vOGQmVfZQZgYnxoMXzQmU.jpg" alt="Joker" class="w-full h-80 object-cover">
<div class="film-overlay absolute inset-0 flex flex-col justify-between p-4">
<div class="flex justify-end">
<button class="cinema-play-btn bg-red-600 hover:bg-red-700 rounded-full w-10 h-10 flex items-center justify-center"
data-title="Joker: Folie à Deux"
data-duration="02:30:00"
data-poster="https://image.tmdb.org/t/p/w500/4uH7T0vOGQmVfZQZgYnxoMXzQmU.jpg">
<i class="fas fa-play"></i>
</button>
</div>
<div>
<h4 class="font-bold text-lg mb-1">Joker: Folie à Deux</h4>
<div class="flex items-center text-sm text-gray-300 mb-2">
<span>2024</span>
<span class="mx-2">•</span>
<span>2h 30m</span>
</div>
<div class="flex mb-2">
<i class="fas fa-star text-yellow-400 mr-1"></i>
<span>8.5/10</span>
</div>
<div class="flex flex-wrap gap-1">
<span class="text-xs bg-gray-700 px-2 py-1 rounded">Drame</span>
<span class="text-xs bg-gray-700 px-2 py-1 rounded">Thriller</span>
</div>
</div>
</div>
</div>
</div>
<!-- Film 4 -->
<div class="film-card relative rounded-xl overflow-hidden shadow-lg">
<div class="film-inner">
<img src="https://image.tmdb.org/t/p/w500/kDp1vUBnMpe8ak4rjgl3cLELqjU.jpg" alt="Gladiator" class="w-full h-80 object-cover">
<div class="film-overlay absolute inset-0 flex flex-col justify-between p-4">
<div class="flex justify-end">
<button class="cinema-play-btn bg-red-600 hover:bg-red-700 rounded-full w-10 h-10 flex items-center justify-center"
data-title="Gladiator 2"
data-duration="02:45:00"
data-poster="https://image.tmdb.org/t/p/w500/kDp1vUBnMpe8ak4rjgl3cLELqjU.jpg">
<i class="fas fa-play"></i>
</button>
</div>
<div>
<h4 class="font-bold text-lg mb-1">Gladiator 2</h4>
<div class="flex items-center text-sm text-gray-300 mb-2">
<span>2024</span>
<span class="mx-2">•</span>
<span>2h 45m</span>
</div>
<div class="flex mb-2">
<i class="fas fa-star text-yellow-400 mr-1"></i>
<span>8.9/10</span>
</div>
<div class="flex flex-wrap gap-1">
<span class="text-xs bg-gray-700 px-2 py-1 rounded">Action</span>
<span class="text-xs bg-gray-700 px-2 py-1 rounded">Historique</span>
</div>
</div>
</div>
</div>
</div>
<!-- Film 5 -->
<div class="film-card relative rounded-xl overflow-hidden shadow-lg">
<div class="film-inner">
<img src="https://image.tmdb.org/t/p/w500/5mzr6JZbrqnqD8rCEvPhuCE5Fw2.jpg" alt="The Batman" class="w-full h-80 object-cover">
<div class="film-overlay absolute inset-0 flex flex-col justify-between p-4">
<div class="flex justify-end">
<button class="cinema-play-btn bg-red-600 hover:bg-red-700 rounded-full w-10 h-10 flex items-center justify-center"
data-title="The Batman Part II"
data-duration="02:55:00"
data-poster="https://image.tmdb.org/t/p/w500/5mzr6JZbrqnqD8rCEvPhuCE5Fw2.jpg">
<i class="fas fa-play"></i>
</button>
</div>
<div>
<h4 class="font-bold text-lg mb-1">The Batman Part II</h4>
<div class="flex items-center text-sm text-gray-300 mb-2">
<span>2025</span>
<span class="mx-2">•</span>
<span>2h 55m</span>
</div>
<div class="flex mb-2">
<i class="fas fa-star text-yellow-400 mr-1"></i>
<span>8.3/10</span>
</div>
<div class="flex flex-wrap gap-1">
<span class="text-xs bg-gray-700 px-2 py-1 rounded">Action</span>
<span class="text-xs bg-gray-700 px-2 py-1 rounded">Policier</span>
</div>
</div>
</div>
</div>
</div>
<!-- Film 6 -->
<div class="film-card relative rounded-xl overflow-hidden shadow-lg">
<div class="film-inner">
<img src="https://image.tmdb.org/t/p/w500/1X7Y7g7GqZ6KjZgQbbZ4JkZkZmZ.jpg" alt="Deadpool" class="w-full h-80 object-cover">
<div class="film-overlay absolute inset-0 flex flex-col justify-between p-4">
<div class="flex justify-end">
<button class="cinema-play-btn bg-red-600 hover:bg-red-700 rounded-full w-10 h-10 flex items-center justify-center"
data-title="Deadpool & Wolverine"
data-duration="02:10:00"
data-poster="https://image.tmdb.org/t/p/w500/1X7Y7g7GqZ6KjZgQbbZ4JkZkZmZ.jpg">
<i class="fas fa-play"></i>
</button>
</div>
<div>
<h4 class="font-bold text-lg mb-1">Deadpool & Wolverine</h4>
<div class="flex items-center text-sm text-gray-300 mb-2">
<span>2024</span>
<span class="mx-2">•</span>
<span>2h 10m</span>
</div>
<div class="flex mb-2">
<i class="fas fa-star text-yellow-400 mr-1"></i>
<span>8.6/10</span>
</div>
<div class="flex flex-wrap gap-1">
<span class="text-xs bg-gray-700 px-2 py-1 rounded">Action</span>
<span class="text-xs bg-gray-700 px-2 py-1 rounded">Comédie</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Pagination -->
<div class="mt-12 flex justify-center">
<nav class="flex items-center space-x-2">
<button class="px-4 py-2 border border-gray-700 rounded-lg hover:bg-gray-800">
<i class="fas fa-chevron-left"></i>
</button>
<button class="px-4 py-2 bg-red-600 rounded-lg font-bold">1</button>
<button class="px-4 py-2 border border-gray-700 rounded-lg hover:bg-gray-800">2</button>
<button class="px-4 py-2 border border-gray-700 rounded-lg hover:bg-gray-800">3</button>
<span class="px-2">...</span>
<button class="px-4 py-2 border border-gray-700 rounded-lg hover:bg-gray-800">856</button>
<button class="px-4 py-2 border border-gray-700 rounded-lg hover:bg-gray-800">
<i class="fas fa-chevron-right"></i>
</button>
</nav>
</div>
</div>
</section>
<!-- Section Abonnement -->
<section class="py-16 bg-gray-900">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12">Choisissez votre abonnement</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<!-- Offre 1 -->
<div class="bg-gray-800 rounded-xl p-8 shadow-lg border border-gray-700 hover:border-red-500 transition duration-300">
<h3 class="text-xl font-bold mb-4">Basique</h3>
<div class="mb-6">
<span class="text-3xl font-bold">9,99€</span>
<span class="text-gray-400">/mois</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Accès à 10,000 films</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Qualité HD</span>
</li>
<li class="flex items-center text-gray-500">
<i class="fas fa-times text-red-500 mr-2"></i>
<span>Pas de 4K</span>
</li>
<li class="flex items-center text-gray-500">
<i class="fas fa-times text-red-500 mr-2"></i>
<span>1 écran à la fois</span>
</li>
</ul>
<button class="w-full bg-gray-700 hover:bg-gray-600 py-3 rounded-lg font-bold transition duration-300">
Choisir cette offre
</button>
</div>
<!-- Offre 2 (mise en avant) -->
<div class="bg-gray-800 rounded-xl p-8 shadow-lg border-2 border-red-500 relative transform hover:scale-105 transition duration-300">
<div class="absolute top-0 right-0 bg-red-500 text-white px-4 py-1 rounded-bl-lg rounded-tr-lg text-sm font-bold">
POPULAIRE
</div>
<h3 class="text-xl font-bold mb-4">Standard</h3>
<div class="mb-6">
<span class="text-3xl font-bold">14,99€</span>
<span class="text-gray-400">/mois</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Accès à 20,500 films</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Qualité Full HD</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>4K disponible</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>2 écrans simultanés</span>
</li>
</ul>
<button class="w-full bg-red-600 hover:bg-red-700 py-3 rounded-lg font-bold transition duration-300">
Choisir cette offre
</button>
</div>
<!-- Offre 3 -->
<div class="bg-gray-800 rounded-xl p-8 shadow-lg border border-gray-700 hover:border-red-500 transition duration-300">
<h3 class="text-xl font-bold mb-4">Premium</h3>
<div class="mb-6">
<span class="text-3xl font-bold">19,99€</span>
<span class="text-gray-400">/mois</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Accès complet à 20,500 films</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Qualité Full HD</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>4K HDR disponible</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>4 écrans simultanés</span>
</li>
</ul>
<button class="w-full bg-gray-700 hover:bg-gray-600 py-3 rounded-lg font-bold transition duration-300">
Choisir cette offre
</button>
</div>
</div>
</div>
</section>
<!-- Section Appareils -->
<section class="py-16 bg-black">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12">Disponible sur tous vos appareils</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
<div class="flex flex-col items-center">
<div class="bg-gray-800 p-6 rounded-full mb-4 hover:bg-red-500 transition duration-300">
<i class="fas fa-tv text-4xl text-white"></i>
</div>
<h3 class="font-bold">TV</h3>
</div>
<div class="flex flex-col items-center">
<div class="bg-gray-800 p-6 rounded-full mb-4 hover:bg-red-500 transition duration-300">
<i class="fas fa-laptop text-4xl text-white"></i>
</div>
<h3 class="font-bold">Ordinateur</h3>
</div>
<div class="flex flex-col items-center">
<div class="bg-gray-800 p-6 rounded-full mb-4 hover:bg-red-500 transition duration-300">
<i class="fas fa-tablet-alt text-4xl text-white"></i>
</div>
<h3 class="font-bold">Tablette</h3>
</div>
<div class="flex flex-col items-center">
<div class="bg-gray-800 p-6 rounded-full mb-4 hover:bg-red-500 transition duration-300">
<i class="fas fa-mobile-alt text-4xl text-white"></i>
</div>
<h3 class="font-bold">Smartphone</h3>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-black py-12 border-t border-gray-800">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
<div>
<h3 class="text-lg font-bold mb-4">À propos</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="#" class="hover:text-white">Qui sommes-nous</a></li>
<li><a href="#" class="hover:text-white">Carrières</a></li>
<li><a href="#" class="hover:text-white">Presse</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-4">Légal</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="#" class="hover:text-white">Conditions d'utilisation</a></li>
<li><a href="#" class="hover:text-white">Confidentialité</a></li>
<li><a href="#" class="hover:text-white">Préférences de cookies</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-4">Aide</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="#" class="hover:text-white">Centre d'aide</a></li>
<li><a href="#" class="hover:text-white">FAQ</a></li>
<li><a href="#" class="hover:text-white">Nous contacter</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-4">Suivez-nous</h3>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-facebook-f text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-twitter text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-instagram text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-youtube text-xl"></i>
</a>
</div>
</div>
</div>
<div class="border-t border-gray-800 pt-8">
<p class="text-gray-400 text-center">© 2024 CineMax Pro. Tous droits réservés.</p>
</div>
</div>
</footer>
<script>
// Simulation de lecture robotisée en mode cinéma
document.addEventListener('DOMContentLoaded', function() {
const cinemaPlayer = document.getElementById('cinemaPlayer');
const closeCinemaBtn = document.getElementById('closeCinemaBtn');
const playRandomBtn = document.getElementById('playRandomBtn');
const cinemaProgress = document.getElementById('cinemaProgress');
const cinemaCurrentTime = document.getElementById('cinemaCurrentTime');
const cinemaTotalTime = document.getElementById('cinemaTotalTime');
const cinemaPlayPause = document.getElementById('cinemaPlayPause');
const qualityBtn = document.getElementById('qualityBtn');
const qualitySelector = document.getElementById('qualitySelector');
const fullscreenBtn = document.getElementById('fullscreenBtn');
const cinemaPlayButtons = document.querySelectorAll('.cinema-play-btn');
// Films disponibles pour la lecture aléatoire
const films = [
{
title: "Dune : Partie Deux",
duration: "02:46:00",
poster: "https://image.tmdb.org/t/p/w500/8Vt6mWEReuy4Of61Lnj5Xj704m8.jpg"
},
{
title: "Furiosa",
duration: "02:30:00",
poster: "https://image.tmdb.org/t/p/w500/1pdfLvkbY9ohJlCjQHlyCZ8O7C4.jpg"
},
{
title: "Joker: Folie à Deux",
duration: "02:30:00",
poster: "https://image.tmdb.org/t/p/w500/4uH7T0vOGQmVfZQZgYnxoMXzQmU.jpg"
},
{
title: "Gladiator 2",
duration: "02:45:00",
poster: "https://image.tmdb.org/t/p/w500/kDp1vUBnMpe8ak4rjgl3cLELqjU.jpg"
},
{
title: "The Batman Part II",
duration: "02:55:00",
poster: "https://image.tmdb.org/t/p/w500/5mzr6JZbrqnqD8rCEvPhuCE5Fw2.jpg"
},
{
title: "Deadpool & Wolverine",
duration: "02:10:00",
poster: "https://image.tmdb.org/t/p/w500/1X7Y7g7GqZ6KjZgQbbZ4JkZkZmZ.jpg"
}
];
let isPlaying = false;
let progressInterval;
// Ouvrir le lecteur en mode cinéma
function openCinemaMode(title, duration, poster) {
cinemaPlayer.querySelector('.absolute.inset-0').style.backgroundImage = `url(${poster})`;
cinemaPlayer.querySelector('.absolute.inset-0').style.backgroundSize = 'cover';
cinemaPlayer.querySelector('.absolute.inset-0').style.backgroundPosition = 'center';
cinemaTotalTime.textContent = duration;
cinemaCurrentTime.textContent = "00:00:00";
cinemaProgress.style.width = "0%";
cinemaPlayer.classList.remove('hidden');
document.body.style.overflow = 'hidden';
// Démarrer la simulation de lecture
startPlayback(duration);
}
// Démarrer la lecture
function startPlayback(duration) {
isPlaying = true;
cinemaPlayPause.innerHTML = '<i class="fas fa-pause"></i>';
let seconds = 0;
const totalSeconds = convertDurationToSeconds(duration);
// Nettoyer tout intervalle existant
if (progressInterval) {
clearInterval(progressInterval);
}
progressInterval = setInterval(() => {
if (isPlaying) {
seconds++;
const percent = (seconds / totalSeconds) * 100;
cinemaProgress.style.width = `${percent}%`;
// Mettre à jour le temps actuel
const hours = Math.floor(seconds / 3600);
const minutes = Math.floor((seconds % 3600) / 60);
const secs = seconds % 60;
cinemaCurrentTime.textContent = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
if (seconds >= totalSeconds) {
clearInterval(progressInterval);
isPlaying = false;
cinemaPlayPause.innerHTML = '<i class="fas fa-play"></i>';
}
}
}, 1000);
}
// Mettre en pause la lecture
function pausePlayback() {
isPlaying = false;
cinemaPlayPause.innerHTML = '<i class="fas fa-play"></i>';
}
// Fermer le mode cinéma
function closeCinemaMode() {
cinemaPlayer.classList.add('hidden');
document.body.style.overflow = '';
isPlaying = false;
// Nettoyer l'intervalle de progression
if (progressInterval) {
clearInterval(progressInterval);
}
}
// Convertir une durée HH:MM:SS en secondes
function convertDurationToSeconds(duration) {
const parts = duration.split(':');
return parseInt(parts[0]) * 3600 + parseInt(parts[1]) * 60 + parseInt(parts[2]);
}
// Écouteurs d'événements
closeCinemaBtn.addEventListener('click', closeCinemaMode);
// Lecture aléatoire
playRandomBtn.addEventListener('click', function() {
const randomFilm = films[Math.floor(Math.random() * films.length)];
openCinemaMode(randomFilm.title, randomFilm.duration, randomFilm.poster);
});
// Lecture depuis les cartes de film
cinemaPlayButtons.forEach(button => {
button.addEventListener('click', function() {
const title = this.dataset.title;
const duration = this.dataset.duration;
const poster = this.dataset.poster;
openCinemaMode(title, duration, poster);
});
});
// Play/Pause
cinemaPlayPause.addEventListener('click', function() {
if (isPlaying) {
pausePlayback();
} else {
startPlayback(cinemaTotalTime.textContent);
}
});
// Sélecteur de qualité
qualityBtn.addEventListener('click', function(e) {
e.stopPropagation();
qualitySelector.classList.toggle('show');
});
// Fermer le sélecteur de qualité en cliquant ailleurs
document.addEventListener('click', function() {
qualitySelector.classList.remove('show');
});
// Empêcher la propagation du clic sur le sélecteur de qualité
qualitySelector.addEventListener('click', function(e) {
e.stopPropagation();
});
// Sélection de qualité
document.querySelectorAll('.quality-selector button').forEach(button => {
button.addEventListener('click', function() {
const quality = this.dataset.quality;
alert(`Qualité changée en ${quality}p`);
qualitySelector.classList.remove('show');
});
});
// Plein écran
fullscreenBtn.addEventListener('click', function() {
if (!document.fullscreenElement) {
cinemaPlayer.requestFullscreen().catch(err => {
alert(`Erreur lors du passage en plein écran: ${err.message}`);
});
} else {
document.exitFullscreen();
}
});
// Animation pour les cartes de films
const filmCards = document.querySelectorAll('.film-card');
filmCards.forEach(card => {
card.addEventListener('mouseenter', function() {
this.querySelector('img').style.transform = 'scale(1.05)';
});
card.addEventListener('mouseleave', function() {
this.querySelector('img').style.transform = 'scale(1)';
});
});
// Simulation de recherche
const searchInput = document.querySelector('input[type="text"]');
searchInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
alert('Recherche simulée pour: ' + this.value + '\n\nCette fonctionnalité rechercherait dans une base de 20,500 films sur une vraie plateforme.');
}
});
// Simulation d'abonnement
const subscriptionButtons = document.querySelectorAll('section.bg-gray-900 button');
subscriptionButtons.forEach(button => {
button.addEventListener('click', function() {
alert('Fonctionnalité d\'abonnement simulée. Sur une vraie plateforme, cela redirigerait vers le processus de paiement.');
});
});
});
</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/streamflix" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>