Hugging Face's logo

Spaces:
docto41
/
cineflix
Running

App Files Community
cineflix / index.html
docto41's picture
docto41
Add 2 files
5c61a1b verified
raw
history blame contribute delete
40.2 kB
<!DOCTYPE html>
<html lang="fr">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>CIN-FLIX | Streaming Automatique</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-color: #0f0f1a;
 color: white;
 overflow-x: hidden;
 }
.hero-gradient {
 background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
 }
.movie-card {
 transition: all 0.3s ease;
 transform: scale(0.95);
 }
.movie-card:hover {
 transform: scale(1);
 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
 z-index: 10;
 }
.glow {
 box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
 }
.video-container {
 position: relative;
 padding-bottom: 56.25%;
 height: 0;
 overflow: hidden;
 }
.video-container iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border: none;
 }
.scroll-container {
 scroll-snap-type: x mandatory;
 }
.scroll-item {
 scroll-snap-align: start;
 }
@keyframes float {
 0%, 100% {
 transform: translateY(0);
 }
 50% {
 transform: translateY(-10px);
 }
 }
.floating {
 animation: float 3s ease-in-out infinite;
 }
.blur-bg {
 backdrop-filter: blur(10px);
 background-color: rgba(15, 15, 26, 0.7);
 }
.progress-bar {
 height: 4px;
 background-color: rgba(255, 255, 255, 0.2);
 }
.progress-fill {
 height: 100%;
 background-color: #3b82f6;
 transition: width 0.3s ease;
 }
.genre-tag {
 transition: all 0.2s ease;
 }
.genre-tag:hover {
 transform: translateY(-2px);
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
.fade-in {
 animation: fadeIn 0.5s ease-in;
 }
@keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
 }
.player-container {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.9);
 z-index: 100;
 display: none;
 justify-content: center;
 align-items: center;
 }
.player-content {
 width: 90%;
 max-width: 1200px;
 position: relative;
 }
.close-player {
 position: absolute;
 top: -40px;
 right: 0;
 font-size: 24px;
 cursor: pointer;
 color: white;
 background-color: rgba(255, 255, 255, 0.2);
 width: 36px;
 height: 36px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 }
.auto-play-toggle {
 position: absolute;
 bottom: 20px;
 right: 20px;
 z-index: 10;
 background-color: rgba(0, 0, 0, 0.7);
 border-radius: 20px;
 padding: 8px 16px;
 display: flex;
 align-items: center;
 gap: 8px;
 color: white;
 cursor: pointer;
 }
.auto-play-toggle.active {
 background-color: rgba(59, 130, 246, 0.7);
 }
 </style>
</head>
<body class="min-h-screen">
 <!-- Navigation -->
 <nav class="blur-bg fixed w-full z-50 py-4 px-6 flex justify-between items-center">
 <div class="flex items-center space-x-2">
 <i class="fas fa-film text-3xl text-blue-500"></i>
 <span class="text-2xl font-bold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">CIN-FLIX</span>
 </div>
<div class="hidden md:flex space-x-6">
 <a href="#" class="hover:text-blue-400 transition">Accueil</a>
 <a href="#" class="hover:text-blue-400 transition">Films</a>
 <a href="#" class="hover:text-blue-400 transition">Séries</a>
 <a href="#" class="hover:text-blue-400 transition">Ma Liste</a>
 </div>
<div class="flex items-center space-x-4">
 <button class="p-2 rounded-full hover:bg-gray-800 transition">
 <i class="fas fa-search"></i>
 </button>
 <button class="p-2 rounded-full hover:bg-gray-800 transition">
 <i class="fas fa-bell"></i>
 </button>
 <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
 <i class="fas fa-user"></i>
 </div>
 </div>
 </nav>
<!-- Video Player -->
 <div class="player-container" id="player-container">
 <div class="player-content">
 <div class="close-player" id="close-player">
 <i class="fas fa-times"></i>
 </div>
 <div class="video-container">
 <iframe id="movie-player" allowfullscreen></iframe>
 </div>
 <div class="auto-play-toggle active" id="auto-play-toggle">
 <i class="fas fa-infinity"></i>
 <span>Lecture Auto</span>
 </div>
 </div>
 </div>
<!-- Hero Section -->
 <section class="hero-gradient pt-20 pb-16">
 <div class="container mx-auto px-4">
 <div class="flex flex-col lg:flex-row items-center gap-8">
 <div class="lg:w-1/2 space-y-6 mt-12">
 <h1 class="text-4xl md:text-5xl font-bold leading-tight">
 <span class="bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">Streaming Illimité</span><br>
 Films & Séries en Automatique
 </h1>
 <p class="text-gray-300 text-lg">Regardez n'importe où. Annulez quand vous voulez. Contenu premium du monde entier.</p>
<div class="flex flex-wrap gap-3 mt-6">
 <button class="px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-full font-medium flex items-center gap-2 transition transform hover:scale-105" id="hero-play-btn">
 <i class="fas fa-play"></i> Regarder Maintenant
 </button>
 <button class="px-6 py-3 bg-gray-800 hover:bg-gray-700 rounded-full font-medium flex items-center gap-2 transition transform hover:scale-105">
 <i class="fas fa-info-circle"></i> Plus d'Infos
 </button>
 </div>
<div class="mt-8">
 <div class="flex items-center gap-3 mb-2">
 <span class="text-sm text-gray-400">Nouveaux épisodes chaque vendredi</span>
 <span class="w-1 h-1 bg-gray-500 rounded-full"></span>
 <span class="text-sm text-gray-400">4K Ultra HD</span>
 </div>
 <div class="progress-bar rounded-full">
 <div class="progress-fill rounded-full" style="width: 65%"></div>
 </div>
 </div>
 </div>
<div class="lg:w-1/2 mt-12 lg:mt-0 relative floating">
 <div class="video-container rounded-xl overflow-hidden shadow-2xl glow">
 <iframe id="hero-video" src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&mute=1&controls=0&loop=1&playlist=dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 <div class="absolute -bottom-4 -left-4 w-24 h-24 bg-purple-500 rounded-full opacity-20 blur-xl"></div>
 <div class="absolute -top-4 -right-4 w-20 h-20 bg-blue-500 rounded-full opacity-20 blur-xl"></div>
 </div>
 </div>
 </div>
 </section>
<!-- Main Content -->
 <main class="py-12">
 <div class="container mx-auto px-4">
 <!-- Trending Now -->
 <section class="mb-16 fade-in">
 <div class="flex justify-between items-center mb-6">
 <h2 class="text-2xl font-bold flex items-center gap-2">
 <i class="fas fa-fire text-red-500"></i>
 <span>Tendances Actuelles</span>
 </h2>
 <a href="#" class="text-blue-400 hover:underline">Voir Tout</a>
 </div>
<div class="relative">
 <div class="scroll-container flex overflow-x-auto pb-6 gap-4 scrollbar-hide" id="trending-movies">
 <!-- Movies will be loaded here by JavaScript -->
 </div>
 </div>
 </section>
<!-- Continue Watching -->
 <section class="mb-16 fade-in">
 <div class="flex justify-between items-center mb-6">
 <h2 class="text-2xl font-bold flex items-center gap-2">
 <i class="fas fa-history text-blue-400"></i>
 <span>Continuer à Regarder</span>
 </h2>
 <a href="#" class="text-blue-400 hover:underline">Voir Tout</a>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="continue-watching">
 <!-- Continue watching items will be loaded here by JavaScript -->
 </div>
 </section>
<!-- Popular Genres -->
 <section class="mb-16 fade-in">
 <h2 class="text-2xl font-bold mb-6 flex items-center gap-2">
 <i class="fas fa-tags text-purple-500"></i>
 <span>Genres Populaires</span>
 </h2>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
 <a href="#" class="genre-card h-32 rounded-xl bg-gradient-to-br from-blue-900/50 to-blue-600/30 hover:from-blue-900/70 hover:to-blue-600/40 transition flex flex-col items-center justify-center border border-blue-900/30 hover:border-blue-900/50">
 <i class="fas fa-explosion text-3xl mb-2 text-blue-400"></i>
 <span class="font-medium">Action</span>
 </a>
<a href="#" class="genre-card h-32 rounded-xl bg-gradient-to-br from-purple-900/50 to-purple-600/30 hover:from-purple-900/70 hover:to-purple-600/40 transition flex flex-col items-center justify-center border border-purple-900/30 hover:border-purple-900/50">
 <i class="fas fa-heart text-3xl mb-2 text-purple-400"></i>
 <span class="font-medium">Romance</span>
 </a>
<a href="#" class="genre-card h-32 rounded-xl bg-gradient-to-br from-red-900/50 to-red-600/30 hover:from-red-900/70 hover:to-red-600/40 transition flex flex-col items-center justify-center border border-red-900/30 hover:border-red-900/50">
 <i class="fas fa-ghost text-3xl mb-2 text-red-400"></i>
 <span class="font-medium">Horreur</span>
 </a>
<a href="#" class="genre-card h-32 rounded-xl bg-gradient-to-br from-yellow-900/50 to-yellow-600/30 hover:from-yellow-900/70 hover:to-yellow-600/40 transition flex flex-col items-center justify-center border border-yellow-900/30 hover:border-yellow-900/50">
 <i class="fas fa-laugh-squint text-3xl mb-2 text-yellow-400"></i>
 <span class="font-medium">Comédie</span>
 </a>
<a href="#" class="genre-card h-32 rounded-xl bg-gradient-to-br from-green-900/50 to-green-600/30 hover:from-green-900/70 hover:to-green-600/40 transition flex flex-col items-center justify-center border border-green-900/30 hover:border-green-900/50">
 <i class="fas fa-rocket text-3xl mb-2 text-green-400"></i>
 <span class="font-medium">Sci-Fi</span>
 </a>
<a href="#" class="genre-card h-32 rounded-xl bg-gradient-to-br from-indigo-900/50 to-indigo-600/30 hover:from-indigo-900/70 hover:to-indigo-600/40 transition flex flex-col items-center justify-center border border-indigo-900/30 hover:border-indigo-900/50">
 <i class="fas fa-user-secret text-3xl mb-2 text-indigo-400"></i>
 <span class="font-medium">Thriller</span>
 </a>
 </div>
 </section>
<!-- New Releases -->
 <section class="mb-16 fade-in">
 <div class="flex justify-between items-center mb-6">
 <h2 class="text-2xl font-bold flex items-center gap-2">
 <i class="fas fa-star text-yellow-400"></i>
 <span>Nouveautés</span>
 </h2>
 <a href="#" class="text-blue-400 hover:underline">Voir Tout</a>
 </div>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4" id="new-releases">
 <!-- New releases will be loaded here by JavaScript -->
 </div>
 </section>
<!-- Recommended For You -->
 <section class="mb-16 fade-in">
 <div class="flex justify-between items-center mb-6">
 <h2 class="text-2xl font-bold flex items-center gap-2">
 <i class="fas fa-thumbs-up text-green-500"></i>
 <span>Recommandé Pour Vous</span>
 </h2>
 <a href="#" class="text-blue-400 hover:underline">Voir Tout</a>
 </div>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4" id="recommended-movies">
 <!-- Recommended movies will be loaded here by JavaScript -->
 </div>
 </section>
 </div>
 </main>
<!-- Footer -->
 <footer class="bg-gray-900/50 py-12 border-t border-gray-800">
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 container mx-auto px-4">
 <div>
 <div class="flex items-center space-x-2 mb-4">
 <i class="fas fa-film text-3xl text-blue-500"></i>
 <span class="text-2xl font-bold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">CIN-FLIX</span>
 </div>
 <p class="text-gray-400">L'expérience ultime de streaming avec des milliers de films et séries.</p>
 <div class="flex space-x-4 mt-6">
 <a href="#" class="text-gray-400 hover:text-blue-400 transition"><i class="fab fa-facebook-f"></i></a>
 <a href="#" class="text-gray-400 hover:text-blue-400 transition"><i class="fab fa-twitter"></i></a>
 <a href="#" class="text-gray-400 hover:text-blue-400 transition"><i class="fab fa-instagram"></i></a>
 <a href="#" class="text-gray-400 hover:text-blue-400 transition"><i class="fab fa-youtube"></i></a>
 </div>
 </div>
<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-blue-400 transition">Accueil</a></li>
 <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Films</a></li>
 <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Séries</a></li>
 <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Ma Liste</a></li>
 <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Parcourir</a></li>
 </ul>
 </div>
<div>
 <h3 class="text-lg font-semibold mb-4">Légal</h3>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Conditions d'utilisation</a></li>
 <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Politique de confidentialité</a></li>
 <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Politique des cookies</a></li>
 <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">RGPD</a></li>
 </ul>
 </div>
<div>
 <h3 class="text-lg font-semibold mb-4">Contact</h3>
 <ul class="space-y-2">
 <li class="text-gray-400"><i class="fas fa-envelope mr-2"></i> support@cinflix.com</li>
 <li class="text-gray-400"><i class="fas fa-phone mr-2"></i> +33 1 23 45 67 89</li>
 <li class="text-gray-400"><i class="fas fa-map-marker-alt mr-2"></i> 123 Rue du Cinéma, Paris</li>
 </ul>
 </div>
 </div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center container mx-auto px-4">
 <p class="text-gray-500 text-sm">© 2023 CIN-FLIX. Tous droits réservés.</p>
 <div class="flex space-x-6 mt-4 md:mt-0">
 <a href="#" class="text-gray-500 hover:text-blue-400 text-sm transition">Centre d'aide</a>
 <a href="#" class="text-gray-500 hover:text-blue-400 text-sm transition">Carrières</a>
 <a href="#" class="text-gray-500 hover:text-blue-400 text-sm transition">Cartes cadeaux</a>
 </div>
 </div>
 </footer>
<script>
 // Base de données complète de films avec des liens YouTube valides
 const moviesDatabase = [
 {
 id: 1,
 title: "Le Dernier Samouraï",
 year: 2003,
 duration: "2h 34m",
 genres: ["Action", "Drame", "Historique"],
 description: "Un capitaine américain est capturé par des samouraïs et découvre leur mode de vie.",
 image: "https://source.unsplash.com/random/300x450/?samurai",
 videoId: "T50pHAgKYY4",
 rating: 7.8,
 isNew: true,
 progress: 0
 },
 {
 id: 2,
 title: "Inception",
 year: 2010,
 duration: "2h 28m",
 genres: ["Sci-Fi", "Action", "Thriller"],
 description: "Un voleur qui s'infiltre dans les rêves est chargé de planter une idée dans l'esprit d'un PDG.",
 image: "https://source.unsplash.com/random/300x450/?inception",
 videoId: "YoHD9XEInc0",
 rating: 8.8,
 isNew: false,
 progress: 45
 },
 {
 id: 3,
 title: "The Dark Knight",
 year: 2008,
 duration: "2h 32m",
 genres: ["Action", "Crime", "Drame"],
 description: "Batman affronte le chaos provoqué par le Joker à Gotham City.",
 image: "https://source.unsplash.com/random/300x450/?batman",
 videoId: "EXeTwQWrcwY",
 rating: 9.0,
 isNew: false,
 progress: 78
 },
 {
 id: 4,
 title: "Pulp Fiction",
 year: 1994,
 duration: "2h 34m",
 genres: ["Crime", "Drame"],
 description: "Les vies de deux hommes de main, d'un boxeur et d'un gangster s'entrecroisent.",
 image: "https://source.unsplash.com/random/300x450/?pulp-fiction",
 videoId: "s7EdQ4FqbhY",
 rating: 8.9,
 isNew: false,
 progress: 32
 },
 {
 id: 5,
 title: "The Shawshank Redemption",
 year: 1994,
 duration: "2h 22m",
 genres: ["Drame"],
 description: "Un banquier condamné à perpétuité trouve rédemption dans l'amitié avec un autre détenu.",
 image: "https://source.unsplash.com/random/300x450/?prison",
 videoId: "6hB3S9bIaco",
 rating: 9.3,
 isNew: false,
 progress: 0
 },
 {
 id: 6,
 title: "Interstellar",
 year: 2014,
 duration: "2h 49m",
 genres: ["Sci-Fi", "Drame", "Aventure"],
 description: "Une équipe d'explorateurs voyage à travers un trou de ver dans l'espace.",
 image: "https://source.unsplash.com/random/300x450/?space",
 videoId: "zSWdZVtXT7E",
 rating: 8.6,
 isNew: true,
 progress: 0
 },
 {
 id: 7,
 title: "The Matrix",
 year: 1999,
 duration: "2h 16m",
 genres: ["Sci-Fi", "Action"],
 description: "Un hacker découvre la vérité sur la réalité et son rôle dans la guerre contre ses contrôleurs.",
 image: "https://source.unsplash.com/random/300x450/?matrix",
 videoId: "vKQi3bBA1y8",
 rating: 8.7,
 isNew: false,
 progress: 90
 },
 {
 id: 8,
 title: "Fight Club",
 year: 1999,
 duration: "2h 19m",
 genres: ["Drame"],
 description: "Un homme déprimé rencontre un vendeur de savon et forme un club de combat souterrain.",
 image: "https://source.unsplash.com/random/300x450/?fight",
 videoId: "qtRKdVHc-cE",
 rating: 8.8,
 isNew: false,
 progress: 15
 },
 {
 id: 9,
 title: "Forrest Gump",
 year: 1994,
 duration: "2h 22m",
 genres: ["Drame", "Romance"],
 description: "L'histoire d'un homme au QI faible qui vit des événements historiques extraordinaires.",
 image: "https://source.unsplash.com/random/300x450/?run",
 videoId: "bLvqoHBptjg",
 rating: 8.8,
 isNew: false,
 progress: 0
 },
 {
 id: 10,
 title: "The Godfather",
 year: 1972,
 duration: "2h 55m",
 genres: ["Crime", "Drame"],
 description: "Le patriarche d'une dynastie mafieuse transmet le contrôle à son fils réticent.",
 image: "https://source.unsplash.com/random/300x450/?mafia",
 videoId: "sY1S34973zA",
 rating: 9.2,
 isNew: false,
 progress: 60
 },
 {
 id: 11,
 title: "Parasite",
 year: 2019,
 duration: "2h 12m",
 genres: ["Thriller", "Drame", "Comédie"],
 description: "Les membres d'une famille pauvre s'infiltrent dans une riche maison en se faisant passer pour des professionnels qualifiés.",
 image: "https://source.unsplash.com/random/300x450/?korean",
 videoId: "5xH0HfJHsaY",
 rating: 8.6,
 isNew: true,
 progress: 0
 },
 {
 id: 12,
 title: "The Social Network",
 year: 2010,
 duration: "2h 1m",
 genres: ["Drama", "Biography"],
 description: "L'histoire de la création de Facebook et des conflits qui en ont résulté.",
 image: "https://source.unsplash.com/random/300x450/?facebook",
 videoId: "2RB3edZyeYw",
 rating: 7.8,
 isNew: false,
 progress: 0
 },
 {
 id: 13,
 title: "Avengers: Endgame",
 year: 2019,
 duration: "3h 1m",
 genres: ["Action", "Sci-Fi", "Aventure"],
 description: "Les Avengers tentent de restaurer l'univers après les événements dévastateurs d'Infinity War.",
 image: "https://source.unsplash.com/random/300x450/?avengers",
 videoId: "TcMBFSGVi1c",
 rating: 8.4,
 isNew: false,
 progress: 25
 },
 {
 id: 14,
 title: "The Wolf of Wall Street",
 year: 2013,
 duration: "3h",
 genres: ["Biography", "Comedy", "Crime"],
 description: "L'histoire vraie de Jordan Belfort, de son ascension à Wall Street à sa chute.",
 image: "https://source.unsplash.com/random/300x450/?wallstreet",
 videoId: "iszwuX1AK6A",
 rating: 8.2,
 isNew: false,
 progress: 0
 },
 {
 id: 15,
 title: "Gladiator",
 year: 2000,
 duration: "2h 35m",
 genres: ["Action", "Drama", "Adventure"],
 description: "Un général romain déchu cherche à se venger de l'empereur corrompu qui a assassiné sa famille.",
 image: "https://source.unsplash.com/random/300x450/?gladiator",
 videoId: "P5ieIbInFpg",
 rating: 8.5,
 isNew: false,
 progress: 50
 }
 ];
 // Fonction pour générer une carte de film
 function generateMovieCard(movie, isContinueWatching = false) {
 if (isContinueWatching) {
 return `
 <div class="movie-card group relative rounded-xl overflow-hidden bg-gray-800/50 hover:bg-gray-800/70 transition p-4 flex gap-4 items-center" data-id="${movie.id}">
 <div class="w-24 h-24 flex-shrink-0 rounded-lg overflow-hidden">
 <img src="${movie.image}" alt="${movie.title}" class="w-full h-full object-cover">
 </div>
 <div class="flex-1">
 <h3 class="font-bold">${movie.title}</h3>
 <p class="text-sm text-gray-400 mt-1">${movie.duration}</p>
 <div class="progress-bar rounded-full mt-3">
 <div class="progress-fill rounded-full" style="width: ${movie.progress}%"></div>
 </div>
 </div>
 <button class="play-btn p-2 rounded-full hover:bg-gray-700 transition" data-id="${movie.id}">
 <i class="fas fa-play"></i>
 </button>
 </div>
 `;
 } else {
 return `
 <div class="scroll-item flex-shrink-0 w-64 movie-card group relative rounded-xl overflow-hidden" data-id="${movie.id}">
 <img src="${movie.image}" alt="${movie.title}" class="w-full h-full object-cover transition group-hover:opacity-70">
 <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition flex flex-col justify-end p-4">
 <h3 class="font-bold text-lg">${movie.title}</h3>
 <div class="flex items-center gap-2 text-sm text-gray-300 mt-1">
 <span>${movie.year}</span>
 <span>•</span>
 <span>${movie.duration}</span>
 </div>
 <div class="flex gap-2 mt-2 flex-wrap">
 ${movie.genres.map(genre => `<span class="genre-tag px-2 py-1 bg-blue-900/50 text-xs rounded">${genre}</span>`).join('')}
 </div>
 <button class="play-btn mt-3 w-full py-2 bg-blue-600 hover:bg-blue-700 rounded-md text-sm font-medium transition" data-id="${movie.id}">Regarder</button>
 </div>
 ${movie.isNew ? '<div class="absolute top-2 left-2 bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded">NEW</div>' : ''}
 </div>
 `;
 }
 }
 // Fonction pour charger les films dans les sections
 function loadMovies() {
 const trendingSection = document.getElementById('trending-movies');
 const continueWatchingSection = document.getElementById('continue-watching');
 const newReleasesSection = document.getElementById('new-releases');
 const recommendedSection = document.getElementById('recommended-movies');
 // Trier les films par popularité (simulée par rating)
 const trendingMovies = [...moviesDatabase].sort((a, b) => b.rating - a.rating).slice(0, 10);
// Films avec progression (continue watching)
 const continueWatchingMovies = moviesDatabase.filter(movie => movie.progress > 0 && movie.progress < 100);
// Nouveaux films
 const newReleases = moviesDatabase.filter(movie => movie.isNew);
// Recommandations (mélange aléatoire)
 const recommendedMovies = [...moviesDatabase].sort(() => 0.5 - Math.random()).slice(0, 5);
 // Charger les films dans chaque section
 trendingMovies.forEach(movie => {
 trendingSection.innerHTML += generateMovieCard(movie);
 });
 continueWatchingMovies.forEach(movie => {
 continueWatchingSection.innerHTML += generateMovieCard(movie, true);
 });
 newReleases.forEach(movie => {
 newReleasesSection.innerHTML += generateMovieCard(movie);
 });
 recommendedMovies.forEach(movie => {
 recommendedSection.innerHTML += generateMovieCard(movie);
 });
 }
 // Variables pour la lecture automatique
 let autoPlayEnabled = true;
 let currentMovieIndex = 0;
 let movieQueue = [];
 let playerOpen = false;
 let player;
 // Fonction pour ouvrir le lecteur avec un film spécifique
 function openPlayer(movieId) {
 const movie = moviesDatabase.find(m => m.id === movieId);
 if (!movie) return;
 const playerContainer = document.getElementById('player-container');
 const moviePlayer = document.getElementById('movie-player');
// Charger le lecteur YouTube avec le film sélectionné
 moviePlayer.src = `https://www.youtube.com/embed/${movie.videoId}?autoplay=1&mute=0&controls=1&rel=0&enablejsapi=1`;
 playerContainer.style.display = 'flex';
 playerOpen = true;
// Mettre à jour la queue pour la lecture automatique
 if (autoPlayEnabled) {
 movieQueue = [...moviesDatabase]
 .sort(() => 0.5 - Math.random())
 .filter(m => m.id !== movieId)
 .slice(0, 5);
 currentMovieIndex = 0;
 }
 }
 // Fonction pour fermer le lecteur
 function closePlayer() {
 const playerContainer = document.getElementById('player-container');
 const moviePlayer = document.getElementById('movie-player');
// Arrêter la vidéo en cours
 if (player && player.stopVideo) {
 player.stopVideo();
 }
moviePlayer.src = '';
 playerContainer.style.display = 'none';
 playerOpen = false;
 }
 // Fonction pour passer au film suivant dans la queue
 function playNextMovie() {
 if (!autoPlayEnabled || movieQueue.length === 0) return;
currentMovieIndex = (currentMovieIndex + 1) % movieQueue.length;
 openPlayer(movieQueue[currentMovieIndex].id);
 }
 // Initialisation lorsque le DOM est chargé
 document.addEventListener('DOMContentLoaded', function() {
 // Charger les films
 loadMovies();
// Configurer les écouteurs d'événements
 document.addEventListener('click', function(e) {
 if (e.target.classList.contains('play-btn') || e.target.closest('.play-btn')) {
 const btn = e.target.classList.contains('play-btn') ? e.target : e.target.closest('.play-btn');
 const movieId = parseInt(btn.getAttribute('data-id'));
 openPlayer(movieId);
 }
 });
 // Bouton "Regarder Maintenant" dans le hero
 document.getElementById('hero-play-btn').addEventListener('click', function() {
 // Jouer un film aléatoire
 const randomMovie = moviesDatabase[Math.floor(Math.random() * moviesDatabase.length)];
 openPlayer(randomMovie.id);
 });
 document.getElementById('close-player').addEventListener('click', closePlayer);
document.getElementById('auto-play-toggle').addEventListener('click', function() {
 autoPlayEnabled = !autoPlayEnabled;
 this.classList.toggle('active');
if (autoPlayEnabled && playerOpen) {
 // Recréer la queue si la lecture automatique est réactivée
 const currentSrc = document.getElementById('movie-player').src;
 const currentVideoId = currentSrc.split('/embed/')[1].split('?')[0];
 const currentMovie = moviesDatabase.find(m => m.videoId === currentVideoId);
if (currentMovie) {
 movieQueue = [...moviesDatabase]
 .sort(() => 0.5 - Math.random())
 .filter(m => m.id !== currentMovie.id)
 .slice(0, 5);
 currentMovieIndex = 0;
 }
 }
 });
 // Auto-scroll pour la section tendances
 const trendingContainer = document.getElementById('trending-movies');
 let scrollPos = 0;
 let scrollDirection = 1;
function autoScroll() {
 const maxScroll = trendingContainer.scrollWidth - trendingContainer.clientWidth;
if (scrollPos >= maxScroll) {
 scrollDirection = -1;
 } else if (scrollPos <= 0) {
 scrollDirection = 1;
 }
scrollPos += scrollDirection * 0.5;
 trendingContainer.scrollLeft = scrollPos;
requestAnimationFrame(autoScroll);
 }
// Démarrer le défilement automatique après un délai
 setTimeout(autoScroll, 3000);
// Mettre en pause le défilement au survol
 trendingContainer.addEventListener('mouseenter', () => {
 scrollDirection = 0;
 });
trendingContainer.addEventListener('mouseleave', () => {
 scrollDirection = 1;
 autoScroll();
 });
 // Ajouter un délai d'animation aux éléments
 const fadeElements = document.querySelectorAll('.fade-in');
 fadeElements.forEach((el, index) => {
 el.style.animationDelay = `${index * 0.1}s`;
 });
// Simuler la progression du chargement
 const progressBars = document.querySelectorAll('.progress-fill');
 progressBars.forEach(bar => {
 const targetWidth = bar.style.width;
 bar.style.width = '0';
 setTimeout(() => {
 bar.style.width = targetWidth;
 }, 300);
 });
// Effets de survol des cartes de film
 const movieCards = document.querySelectorAll('.movie-card');
 movieCards.forEach(card => {
 card.addEventListener('mouseenter', () => {
 card.classList.add('glow');
 });
 card.addEventListener('mouseleave', () => {
 card.classList.remove('glow');
 });
 });
 });
 // API YouTube (chargée dynamiquement)
 const tag = document.createElement('script');
 tag.src = "https://www.youtube.com/iframe_api";
 const firstScriptTag = document.getElementsByTagName('script')[0];
 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 // Fonction appelée par l'API YouTube
 function onYouTubeIframeAPIReady() {
 player = new YT.Player('movie-player', {
 events: {
 'onStateChange': onPlayerStateChange
 }
 });
 }
 // Fonction pour détecter la fin de la vidéo
 function onPlayerStateChange(event) {
 if (event.data === YT.PlayerState.ENDED && autoPlayEnabled && playerOpen) {
 setTimeout(playNextMovie, 2000); // Délai avant de passer au suivant
 }
 }
 </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/cineflix" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>