Spaces:

docto41
/

cin-futur

Running

App Files Files Community

docto41 commited on May 18

Commit

28e7179

verified ·

1 Parent(s): 0d4f77b

Add 2 files

Browse files

Files changed (2) hide show

index.html +329 -435
prompts.txt +3 -1

index.html CHANGED Viewed

@@ -3,52 +3,11 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CinéFutur - Films 2025 en Français HD</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        neon: {
-                            blue: '#00f0ff',
-                            pink: '#ff00f0',
-                            purple: '#b400ff',
-                            green: '#00ff7b'
-                        },
-                        dark: {
-                            900: '#0a0a0a',
-                            800: '#1a1a1a',
-                            700: '#2a2a2a'
-                        }
-                    },
-                    animation: {
-                        'float': 'float 6s ease-in-out infinite',
-                        'float-reverse': 'float-reverse 5s ease-in-out infinite',
-                        'pulse-slow': 'pulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-                        'text-gradient': 'text-gradient 8s linear infinite',
-                    },
-                    keyframes: {
-                        float: {
-                            '0%, 100%': { transform: 'translateY(0)' },
-                            '50%': { transform: 'translateY(-20px)' },
-                        },
-                        'float-reverse': {
-                            '0%, 100%': { transform: 'translateY(0)' },
-                            '50%': { transform: 'translateY(20px)' },
-                        },
-                        'text-gradient': {
-                            '0%, 100%': { 'background-position': '0% 50%' },
-                            '50%': { 'background-position': '100% 50%' },
-                        }
-                    }
-                }
-            }
-        }
-    </script>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Roboto:wght@300;400;500;700&display=swap');
         body {
             font-family: 'Roboto', sans-serif;
@@ -57,124 +16,18 @@
             overflow-x: hidden;
         }
-        .futuriste {
-            font-family: 'Orbitron', sans-serif;
-        }
-        .glow {
-            text-shadow: 0 0 10px rgba(0, 240, 255, 0.7);
-        }
-        .glow-pink {
-            text-shadow: 0 0 10px rgba(255, 0, 240, 0.7);
-        }
-        .gradient-text {
-            background: linear-gradient(90deg, #00f0ff, #b400ff, #ff00f0, #00f0ff);
-            background-size: 300% 300%;
-            -webkit-background-clip: text;
-            background-clip: text;
-            color: transparent;
-            animation: text-gradient 8s linear infinite;
-        }
         .film-card:hover {
-            transform: translateY(-10px) scale(1.03);
-            box-shadow: 0 20px 25px -5px rgba(0, 240, 255, 0.25), 0 10px 10px -5px rgba(0, 240, 255, 0.1);
-        }
-        .neon-border {
-            position: relative;
-        }
-        .neon-border::after {
-            content: '';
-            position: absolute;
-            top: -2px;
-            left: -2px;
-            right: -2px;
-            bottom: -2px;
-            background: linear-gradient(45deg, #00f0ff, #b400ff, #ff00f0);
-            z-index: -1;
-            border-radius: inherit;
-            background-size: 200% 200%;
-            animation: gradient 3s ease infinite;
-        }
-        @keyframes gradient {
-            0% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-            100% { background-position: 0% 50%; }
-        }
-        .parallax {
-            background-attachment: fixed;
-            background-position: center;
-            background-repeat: no-repeat;
-            background-size: cover;
         }
-        .scroll-container {
-            scroll-snap-type: y mandatory;
-            overflow-y: scroll;
-            height: 100vh;
-        }
-        .scroll-section {
-            scroll-snap-align: start;
-            height: 100vh;
-        }
-        .holographic {
-            background: linear-gradient(135deg, rgba(0, 240, 255, 0.1) 0%, rgba(180, 0, 255, 0.1) 50%, rgba(255, 0, 240, 0.1) 100%);
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.36);
-        }
-        /* Animation pour les sections */
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        .animate-fadeIn {
-            animation: fadeIn 1s ease-out forwards;
-        }
-        /* Loading spinner */
-        .loading-spinner {
-            display: inline-block;
-            width: 50px;
-            height: 50px;
-            border: 5px solid rgba(0, 240, 255, 0.3);
-            border-radius: 50%;
-            border-top-color: #00f0ff;
-            animation: spin 1s ease-in-out infinite;
-        }
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
-        /* Style pour les serveurs de streaming */
-        .server-btn {
-            transition: all 0.3s ease;
-        }
-        .server-btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 4px 15px rgba(0, 240, 255, 0.3);
-        }
-        /* Style pour le lecteur vidéo */
         .video-player {
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background: rgba(0, 0, 0, 0.9);
             z-index: 9999;
             display: none;
             justify-content: center;
@@ -182,7 +35,7 @@
         }
         .video-container {
-            width: 80%;
             max-width: 1200px;
             position: relative;
         }
@@ -198,15 +51,14 @@
         }
         .close-player:hover {
-            color: #ff00f0;
         }
-        /* Badge VF */
         .vf-badge {
             position: absolute;
             top: 10px;
             right: 10px;
-            background: linear-gradient(45deg, #00f0ff, #00ff7b);
             color: black;
             font-weight: bold;
             padding: 3px 8px;
@@ -215,7 +67,6 @@
             z-index: 2;
         }
-        /* Badge HD */
         .hd-badge {
             position: absolute;
             top: 10px;
@@ -226,16 +77,15 @@
             padding: 3px 8px;
             border-radius: 4px;
             font-size: 12px;
-            border: 1px solid #00f0ff;
             z-index: 2;
         }
-        /* Badge Nouveau */
         .new-badge {
             position: absolute;
-            top: 10px;
             right: 10px;
-            background: linear-gradient(45deg, #ff00f0, #b400ff);
             color: white;
             font-weight: bold;
             padding: 3px 8px;
@@ -243,36 +93,86 @@
             font-size: 12px;
             z-index: 2;
         }
     </style>
 </head>
-<body class="scroll-smooth">
-    <!-- Navigation Futuriste -->
-    <nav class="fixed w-full z-50 bg-black bg-opacity-90 backdrop-filter backdrop-blur-lg border-b border-gray-800">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="flex items-center justify-between h-16">
                 <div class="flex items-center">
                     <div class="flex-shrink-0">
-                        <span class="text-2xl font-bold gradient-text futuriste">CINÉFUTUR</span>
                     </div>
-                    <div class="hidden md:block">
-                        <div class="ml-10 flex items-baseline space-x-4">
-                            <a href="#accueil" class="text-white hover:text-neon-blue px-3 py-2 rounded-md text-sm font-medium transition-all duration-300">Accueil</a>
-                            <a href="#nouveautes" class="text-white hover:text-neon-pink px-3 py-2 rounded-md text-sm font-medium transition-all duration-300">Nouveautés</a>
-                            <a href="#films" class="text-white hover:text-neon-green px-3 py-2 rounded-md text-sm font-medium transition-all duration-300">Films 2025</a>
-                            <a href="#abonnement" class="text-white hover:text-neon-purple px-3 py-2 rounded-md text-sm font-medium transition-all duration-300">Abonnement</a>
                         </div>
                     </div>
                 </div>
                 <div class="hidden md:block">
                     <div class="ml-4 flex items-center md:ml-6">
-                        <div class="relative">
-                            <input type="text" placeholder="Rechercher un film..." class="bg-gray-900 text-white px-4 py-1 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-neon-blue w-64">
-                            <button class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-neon-blue">
                                 <i class="fas fa-search"></i>
                             </button>
                         </div>
-                        <button class="ml-4 bg-gradient-to-r from-neon-blue to-neon-purple text-black px-4 py-1 rounded-full text-sm font-medium hover:opacity-90 transition-all duration-300">
-                            Connexion
                         </button>
                     </div>
                 </div>
@@ -289,102 +189,108 @@
         <div id="mobile-menu" class="hidden md:hidden bg-gray-900">
             <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                 <a href="#accueil" class="text-white block px-3 py-2 rounded-md text-base font-medium">Accueil</a>
-                <a href="#nouveautes" class="text-white block px-3 py-2 rounded-md text-base font-medium">Nouveautés</a>
-                <a href="#films" class="text-white block px-3 py-2 rounded-md text-base font-medium">Films 2025</a>
-                <a href="#abonnement" class="text-white block px-3 py-2 rounded-md text-base font-medium">Abonnement</a>
             </div>
             <div class="pt-4 pb-3 border-t border-gray-700 px-4">
-                <div class="relative mb-4">
-                    <input type="text" placeholder="Rechercher un film..." class="bg-gray-800 text-white px-4 py-1 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-neon-blue w-full">
-                    <button class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-neon-blue">
                         <i class="fas fa-search"></i>
                     </button>
                 </div>
-                <button class="w-full bg-gradient-to-r from-neon-blue to-neon-purple text-black px-4 py-1 rounded-full text-sm font-medium hover:opacity-90 transition-all duration-300">
-                    Connexion
                 </button>
             </div>
         </div>
     </nav>
-    <!-- Section Hero -->
-    <section id="accueil" class="scroll-section relative h-screen flex items-center justify-center overflow-hidden bg-black">
-        <div class="absolute inset-0 z-0">
-            <div class="absolute inset-0 bg-gradient-to-b from-black via-black/80 to-black/20 z-10"></div>
-            <video autoplay muted loop class="w-full h-full object-cover opacity-40">
-                <source src="https://assets.mixkit.co/videos/preview/mixkit-futuristic-interface-with-holographic-dashboard-46606-large.mp4" type="video/mp4">
-            </video>
-        </div>
-        <div class="relative z-10 text-center px-4 sm:px-6 lg:px-8 max-w-6xl mx-auto">
-            <h1 class="text-5xl md:text-7xl font-bold mb-6 futuriste glow">
-                <span class="gradient-text">FILMS 2025 EN FRANÇAIS</span>
-            </h1>
-            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto text-gray-300">
-                Découvrez les <span class="text-neon-pink">dernières sorties 2025</span> en version française et haute qualité.
-                Streaming fluide sur tous vos appareils avec <span class="text-neon-blue">multiples serveurs</span> disponibles.
             </p>
-            <div class="flex flex-col sm:flex-row justify-center gap-4">
-                <a href="#films" class="bg-gradient-to-r from-neon-blue to-neon-purple text-black px-8 py-3 rounded-full text-lg font-bold hover:opacity-90 transition-all duration-300 transform hover:scale-105">
-                    Voir les films 2025
-                </a>
-                <button class="border-2 border-neon-pink text-white px-8 py-3 rounded-full text-lg font-bold hover:bg-neon-pink hover:bg-opacity-10 transition-all duration-300 transform hover:scale-105">
-                    <i class="fas fa-crown mr-2"></i> Premium
                 </button>
             </div>
         </div>
-        <div class="absolute bottom-10 left-0 right-0 flex justify-center z-10">
-            <a href="#films" class="text-white animate-bounce">
-                <i class="fas fa-chevron-down text-2xl"></i>
-            </a>
-        </div>
-        <!-- Effets futuristes -->
-        <div class="absolute top-20 left-20 w-20 h-20 rounded-full bg-neon-blue opacity-20 filter blur-3xl animate-pulse-slow"></div>
-        <div class="absolute bottom-20 right-20 w-32 h-32 rounded-full bg-neon-pink opacity-20 filter blur-3xl animate-pulse-slow"></div>
     </section>
-    <!-- Section Films 2025 -->
-    <section id="films" class="scroll-section min-h-screen py-20 bg-gradient-to-b from-black to-gray-900 relative overflow-hidden">
-        <div class="absolute top-0 left-0 w-full h-full opacity-5">
-            <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-neon-blue filter blur-3xl"></div>
-            <div class="absolute top-3/4 left-3/4 w-64 h-64 rounded-full bg-neon-purple filter blur-3xl"></div>
-        </div>
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-            <div class="text-center mb-16">
-                <h2 class="text-4xl md:text-5xl font-bold mb-4 futuriste gradient-text">FILMS 2025 VF HD</h2>
-                <p class="text-xl text-gray-400 max-w-3xl mx-auto">
-                    Tous les films sortis en 2025 en <span class="text-neon-green">version française</span> et <span class="text-neon-blue">haute qualité</span>.
-                    Disponibles immédiatement sur nos serveurs optimisés.
-                </p>
             </div>
-            <!-- Filtres -->
-            <div class="flex flex-wrap justify-center gap-4 mb-12">
-                <button class="px-4 py-2 rounded-full bg-neon-blue text-black font-medium">Tous</button>
-                <button class="px-4 py-2 rounded-full bg-gray-800 text-white hover:bg-gray-700">Action</button>
-                <button class="px-4 py-2 rounded-full bg-gray-800 text-white hover:bg-gray-700">Science-fiction</button>
-                <button class="px-4 py-2 rounded-full bg-gray-800 text-white hover:bg-gray-700">Aventure</button>
-                <button class="px-4 py-2 rounded-full bg-gray-800 text-white hover:bg-gray-700">Comédie</button>
-                <button class="px-4 py-2 rounded-full bg-gray-800 text-white hover:bg-gray-700">Animation</button>
             </div>
-            <!-- Grille de films 2025 -->
             <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="films-grid">
                 <!-- Les films seront générés par JavaScript -->
             </div>
         </div>
     </section>
-    <!-- Lecteur vidéo -->
     <div class="video-player" id="video-player">
         <div class="video-container">
             <span class="close-player" id="close-player"><i class="fas fa-times"></i></span>
-            <video controls autoplay id="movie-player" class="w-full h-auto">
-                Votre navigateur ne supporte pas la lecture de vidéos.
-            </video>
         </div>
     </div>
@@ -397,247 +303,204 @@
             mobileMenu.classList.toggle('hidden');
         });
-        // Données des films 2025 avec images réelles de TMDB
-        const films2025 = [
             {
-                titre: "Deadpool 3",
-                annee: 2025,
-                duree: "2h15min",
-                genre1: "Action",
-                genre2: "Comédie",
-                description: "Deadpool rejoint les Wolverine dans une aventure multiverselle qui changera l'histoire du MCU.",
-                note: "8.9",
-                image: "https://image.tmdb.org/t/p/w500/uxBHXaoOvAwy4NpPpP7nNx2rXYQ.jpg",
                 vf: true,
                 hd: true,
-                videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
             },
             {
-                titre: "Avatar 3",
-                annee: 2025,
-                duree: "3h12min",
-                genre1: "Science-fiction",
-                genre2: "Aventure",
-                description: "La suite des aventures des Na'vi sur Pandora avec de nouveaux clans et de nouveaux dangers.",
-                note: "8.5",
-                image: "https://image.tmdb.org/t/p/w500/5aUX5xqvOkGC3a4iW5WEMOVJwNP.jpg",
-                vf: true,
-                hd: true,
-                videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
-            },
-            {
-                titre: "Mission: Impossible 8",
-                annee: 2025,
-                duree: "2h38min",
-                genre1: "Action",
-                genre2: "Thriller",
-                description: "Ethan Hunt et son équipe de l'IMF doivent affronter leur mission la plus dangereuse à ce jour.",
                 note: "8.1",
-                image: "https://image.tmdb.org/t/p/w500/NNxYkU70HPurnPCSiTMUULQXa.jpg",
                 vf: true,
                 hd: true,
-                videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
             },
             {
-                titre: "Thunderbolts",
-                annee: 2025,
-                duree: "2h05min",
-                genre1: "Action",
-                genre2: "Science-fiction",
-                description: "Une équipe de super-vilains est recrutée par le gouvernement pour des missions secrètes.",
-                note: "7.8",
-                image: "https://image.tmdb.org/t/p/w500/8YFL5QQVPy3AgrEQxNYVSgiPEbe.jpg",
                 vf: true,
                 hd: true,
-                videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
             },
             {
-                titre: "Fantastic Four",
-                annee: 2025,
-                duree: "2h22min",
-                genre1: "Action",
-                genre2: "Science-fiction",
-                description: "La nouvelle adaptation des Quatre Fantastiques dans le MCU avec une distribution rafraîchie.",
-                note: "8.0",
-                image: "https://image.tmdb.org/t/p/w500/8Gxv8gSFCU0XGDykEGv7zR1nuhua.jpg",
                 vf: true,
                 hd: true,
-                videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
             },
             {
-                titre: "Blade",
-                annee: 2025,
-                duree: "2h15min",
-                genre1: "Action",
-                genre2: "Horreur",
-                description: "Le chasseur de vampires half-vampire fait son retour dans le MCU avec Mahershala Ali dans le rôle titre.",
-                note: "7.9",
-                image: "https://image.tmdb.org/t/p/w500/5aUX5xqvOkGC3a4iW5WEMOVJwNP.jpg",
                 vf: true,
                 hd: true,
-                videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
             },
             {
-                titre: "Superman: Legacy",
-                annee: 2025,
-                duree: "2h30min",
-                genre1: "Action",
-                genre2: "Science-fiction",
-                description: "Le reboot de Superman dans le nouveau DCU sous la direction de James Gunn.",
-                note: "8.2",
-                image: "https://image.tmdb.org/t/p/w500/8Gxv8gSFCU0XGDykEGv7zR1nuhua.jpg",
                 vf: true,
                 hd: true,
-                videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
             },
             {
-                titre: "Captain America: Brave New World",
-                annee: 2025,
-                duree: "2h18min",
-                genre1: "Action",
-                genre2: "Science-fiction",
-                description: "Sam Wilson assume pleinement son rôle de Captain America dans un monde en mutation.",
-                note: "7.7",
-                image: "https://image.tmdb.org/t/p/w500/8YFL5QQVPy3AgrEQxNYVSgiPEbe.jpg",
                 vf: true,
                 hd: true,
-                videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
             },
             {
-                titre: "The Batman Part II",
-                annee: 2025,
-                duree: "2h45min",
-                genre1: "Action",
-                genre2: "Thriller",
-                description: "La suite du film The Batman avec Robert Pattinson de retour dans le rôle du justicier de Gotham.",
                 note: "8.4",
-                image: "https://image.tmdb.org/t/p/w500/5aUX5xqvOkGC3a4iW5WEMOVJwNP.jpg",
-                vf: true,
-                hd: true,
-                videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
-            },
-            {
-                titre: "Jurassic World 4",
-                annee: 2025,
-                duree: "2h05min",
-                genre1: "Action",
-                genre2: "Aventure",
-                description: "Une nouvelle ère commence dans la franchise Jurassic World avec de nouveaux dinosaures et dangers.",
-                note: "7.5",
-                image: "https://image.tmdb.org/t/p/w500/8Gxv8gSFCU0XGDykEGv7zR1nuhua.jpg",
-                vf: true,
-                hd: true,
-                videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
-            },
-            {
-                titre: "Spider-Man: Beyond the Spider-Verse",
-                annee: 2025,
-                duree: "2h20min",
-                genre1: "Animation",
-                genre2: "Action",
-                description: "La conclusion de la trilogie Spider-Verse avec Miles Morales face à son destin.",
-                note: "9.0",
-                image: "https://image.tmdb.org/t/p/w500/8YFL5QQVPy3AgrEQxNYVSgiPEbe.jpg",
-                vf: true,
-                hd: true,
-                videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
-            },
-            {
-                titre: "Wicked",
-                annee: 2025,
-                duree: "2h30min",
-                genre1: "Musical",
-                genre2: "Fantasy",
-                description: "L'adaptation de la comédie musicale à succès racontant l'histoire des sorcières d'Oz.",
-                note: "8.1",
-                image: "https://image.tmdb.org/t/p/w500/5aUX5xqvOkGC3a4iW5WEMOVJwNP.jpg",
-                vf: true,
-                hd: true,
-                videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
-            },
-            {
-                titre: "Kraven the Hunter",
-                annee: 2025,
-                duree: "2h05min",
-                genre1: "Action",
-                genre2: "Aventure",
-                description: "L'origine du célèbre chasseur de Spider-Man dans cet univers cinématographique.",
-                note: "7.6",
                 image: "https://image.tmdb.org/t/p/w500/8Gxv8gSFCU0XGDykEGv7zR1nuhua.jpg",
                 vf: true,
                 hd: true,
-                videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
             },
             {
-                titre: "Transformers One",
-                annee: 2025,
-                duree: "1h58min",
-                genre1: "Animation",
-                genre2: "Science-fiction",
-                description: "L'histoire des origines des Transformers sur Cybertron avant leur arrivée sur Terre.",
-                note: "7.9",
-                image: "https://image.tmdb.org/t/p/w500/8YFL5QQVPy3AgrEQxNYVSgiPEbe.jpg",
                 vf: true,
                 hd: true,
-                videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
             },
             {
-                titre: "Mufasa: The Lion King",
-                annee: 2025,
-                duree: "1h50min",
-                genre1: "Animation",
-                genre2: "Aventure",
-                description: "L'histoire des origines de Mufasa, le roi lion légendaire, avant les événements du Roi Lion.",
-                note: "8.3",
-                image: "https://image.tmdb.org/t/p/w500/5aUX5xqvOkGC3a4iW5WEMOVJwNP.jpg",
                 vf: true,
                 hd: true,
-                videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
             }
         ];
         // Variables pour le lecteur vidéo
         const videoPlayer = document.getElementById('video-player');
         const moviePlayer = document.getElementById('movie-player');
         const closePlayer = document.getElementById('close-player');
-        // Fonction pour ouvrir le lecteur vidéo
         function openVideoPlayer(videoUrl) {
             moviePlayer.src = videoUrl;
             videoPlayer.style.display = 'flex';
             document.body.style.overflow = 'hidden';
-            moviePlayer.play();
         }
         // Fermer le lecteur vidéo
         closePlayer.addEventListener('click', () => {
-            moviePlayer.pause();
             videoPlayer.style.display = 'none';
             document.body.style.overflow = 'auto';
         });
         // Fermer le lecteur si on clique en dehors
         videoPlayer.addEventListener('click', (e) => {
             if (e.target === videoPlayer) {
-                moviePlayer.pause();
                 videoPlayer.style.display = 'none';
                 document.body.style.overflow = 'auto';
             }
         });
-        // Générer les films dans la grille
-        function genererFilmsGrid(films, targetElement) {
-            films.forEach(film => {
                 const filmElement = document.createElement('div');
-                filmElement.className = 'film-card group relative rounded-xl overflow-hidden transition-all duration-500 hover:z-10';
                 filmElement.innerHTML = `
-                    <div class="relative aspect-[2/3] rounded-xl overflow-hidden">
                         ${film.vf ? '<span class="vf-badge">VF</span>' : ''}
                         ${film.hd ? '<span class="hd-badge">HD</span>' : ''}
-                        <span class="new-badge">NOUVEAU</span>
-                        <img src="${film.image}" alt="${film.titre}" class="w-full h-full object-cover group-hover:opacity-70 transition-all duration-500">
-                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
-                        <div class="absolute bottom-0 left-0 right-0 p-4 translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500">
                             <h3 class="text-white font-bold text-lg mb-1">${film.titre}</h3>
                             <div class="flex items-center text-sm text-gray-300 mb-2">
                                 <span>${film.annee}</span>
@@ -645,12 +508,11 @@
                                 <span>${film.duree}</span>
                             </div>
                             <div class="flex flex-wrap gap-2 mb-3">
-                                <span class="px-2 py-1 bg-gray-800 text-white text-xs rounded-full">${film.genre1}</span>
-                                <span class="px-2 py-1 bg-gray-800 text-white text-xs rounded-full">${film.genre2}</span>
                             </div>
                             <p class="text-gray-300 text-sm line-clamp-2">${film.description}</p>
                         </div>
-                        <div class="absolute top-3 left-3 px-2 py-1 bg-black bg-opacity-70 text-neon-green text-sm font-bold rounded-full flex items-center">
                             <i class="fas fa-star mr-1"></i>
                             ${film.note}
                         </div>
@@ -662,7 +524,7 @@
                         </div>
                     </div>
                     <div class="mt-2">
-                        <button class="watch-btn w-full bg-gradient-to-r from-neon-blue to-neon-purple text-black py-2 rounded-full text-sm font-bold hover:opacity-90 transition-all duration-300 flex items-center justify-center" data-video="${film.videoUrl}">
                             <i class="fas fa-play mr-2"></i> Regarder
                         </button>
                     </div>
@@ -678,28 +540,60 @@
                 });
             });
         }
         // Initialisation
         document.addEventListener('DOMContentLoaded', () => {
-            // Charger tous les films
-            genererFilmsGrid(films2025, document.getElementById('films-grid'));
-            // Animation au scroll
-            const observerOptions = {
-                threshold: 0.1
-            };
-            const observer = new IntersectionObserver((entries) => {
-                entries.forEach(entry => {
-                    if (entry.isIntersecting) {
-                        entry.target.classList.add('animate-fadeIn');
-                    }
                 });
-            }, observerOptions);
-            document.querySelectorAll('.scroll-section').forEach(section => {
-                observer.observe(section);
             });
         });
     </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-futur" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>StreamCiné - Films Complets en HD</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=Roboto:wght@300;400;500;700&display=swap');
         body {
             font-family: 'Roboto', sans-serif;
             overflow-x: hidden;
         }
         .film-card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 10px 25px -5px rgba(0, 179, 255, 0.3);
         }
         .video-player {
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
+            background: rgba(0, 0, 0, 0.95);
             z-index: 9999;
             display: none;
             justify-content: center;
         }
         .video-container {
+            width: 90%;
             max-width: 1200px;
             position: relative;
         }
         }
         .close-player:hover {
+            color: #ff3e3e;
         }
         .vf-badge {
             position: absolute;
             top: 10px;
             right: 10px;
+            background: linear-gradient(45deg, #00a2ff, #00ff9d);
             color: black;
             font-weight: bold;
             padding: 3px 8px;
             z-index: 2;
         }
         .hd-badge {
             position: absolute;
             top: 10px;
             padding: 3px 8px;
             border-radius: 4px;
             font-size: 12px;
+            border: 1px solid #00a2ff;
             z-index: 2;
         }
         .new-badge {
             position: absolute;
+            top: 50px;
             right: 10px;
+            background: linear-gradient(45deg, #ff3e3e, #ff00aa);
             color: white;
             font-weight: bold;
             padding: 3px 8px;
             font-size: 12px;
             z-index: 2;
         }
+        /* Style pour le lecteur principal */
+        .main-player {
+            width: 100%;
+            height: 70vh;
+            background: #000;
+            position: relative;
+        }
+        .main-player iframe {
+            width: 100%;
+            height: 100%;
+        }
+        /* Style pour la barre de recherche */
+        .search-box {
+            transition: all 0.3s ease;
+        }
+        .search-box:focus-within {
+            box-shadow: 0 0 0 2px #00a2ff;
+        }
+        /* Animation de chargement */
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        .loading-spinner {
+            display: inline-block;
+            width: 40px;
+            height: 40px;
+            border: 4px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top-color: #00a2ff;
+            animation: spin 1s ease-in-out infinite;
+        }
+        /* Style pour les catégories */
+        .category-btn.active {
+            background: #00a2ff;
+            color: white;
+        }
+        /* Style pour la pagination */
+        .pagination-btn.active {
+            background: #00a2ff;
+            color: white;
+            border-color: #00a2ff;
+        }
     </style>
 </head>
+<body class="bg-gray-900">
+    <!-- Navigation -->
+    <nav class="fixed w-full z-50 bg-black bg-opacity-90 backdrop-blur-md border-b border-gray-800">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="flex items-center justify-between h-16">
                 <div class="flex items-center">
                     <div class="flex-shrink-0">
+                        <span class="text-2xl font-bold text-white">STREAM<span class="text-blue-400">CINÉ</span></span>
                     </div>
+                    <div class="hidden md:block ml-10">
+                        <div class="flex space-x-4">
+                            <a href="#accueil" class="text-white hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium">Accueil</a>
+                            <a href="#films" class="text-white hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium">Films</a>
+                            <a href="#series" class="text-white hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium">Séries</a>
+                            <a href="#nouveautes" class="text-blue-400 px-3 py-2 rounded-md text-sm font-medium">Nouveautés</a>
                         </div>
                     </div>
                 </div>
                 <div class="hidden md:block">
                     <div class="ml-4 flex items-center md:ml-6">
+                        <div class="relative search-box">
+                            <input type="text" placeholder="Rechercher un film..." class="bg-gray-800 text-white px-4 py-2 rounded-full text-sm focus:outline-none w-64">
+                            <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-blue-400">
                                 <i class="fas fa-search"></i>
                             </button>
                         </div>
+                        <button class="ml-4 bg-blue-500 text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-blue-600">
+                            <i class="fas fa-user mr-1"></i> Connexion
                         </button>
                     </div>
                 </div>
         <div id="mobile-menu" class="hidden md:hidden bg-gray-900">
             <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                 <a href="#accueil" class="text-white block px-3 py-2 rounded-md text-base font-medium">Accueil</a>
+                <a href="#films" class="text-white block px-3 py-2 rounded-md text-base font-medium">Films</a>
+                <a href="#series" class="text-white block px-3 py-2 rounded-md text-base font-medium">Séries</a>
+                <a href="#nouveautes" class="text-blue-400 block px-3 py-2 rounded-md text-base font-medium">Nouveautés</a>
             </div>
             <div class="pt-4 pb-3 border-t border-gray-700 px-4">
+                <div class="relative mb-4 search-box">
+                    <input type="text" placeholder="Rechercher un film..." class="bg-gray-800 text-white px-4 py-2 rounded-full text-sm focus:outline-none w-full">
+                    <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-blue-400">
                         <i class="fas fa-search"></i>
                     </button>
                 </div>
+                <button class="w-full bg-blue-500 text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-blue-600">
+                    <i class="fas fa-user mr-1"></i> Connexion
                 </button>
             </div>
         </div>
     </nav>
+    <!-- Section Principale avec Film en Vedette -->
+    <section id="accueil" class="pt-16 pb-10">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="main-player rounded-xl overflow-hidden shadow-2xl mb-8">
+                <iframe id="featured-movie" src="https://www.youtube.com/embed/EXeTwQWrcwY?autoplay=1&mute=1&controls=0&showinfo=0&rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+            </div>
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-bold text-white">Film en vedette</h2>
+                <div class="flex space-x-2">
+                    <button class="px-3 py-1 bg-gray-800 text-white rounded-full text-sm hover:bg-gray-700">HD</button>
+                    <button class="px-3 py-1 bg-gray-800 text-white rounded-full text-sm hover:bg-gray-700">VF</button>
+                    <button class="px-3 py-1 bg-blue-500 text-white rounded-full text-sm hover:bg-blue-600">
+                        <i class="fas fa-expand mr-1"></i> Plein écran
+                    </button>
+                </div>
+            </div>
+            <h1 class="text-3xl md:text-4xl font-bold text-white mb-2">Dune : Partie Deux (2024)</h1>
+            <div class="flex items-center text-gray-400 mb-4">
+                <span class="text-yellow-400 mr-2"><i class="fas fa-star"></i> 8.7</span>
+                <span class="mx-2">•</span>
+                <span>2h 46min</span>
+                <span class="mx-2">•</span>
+                <span>Science-fiction, Aventure</span>
+            </div>
+            <p class="text-gray-300 mb-6 max-w-3xl">
+                Paul Atreides s'unit avec Chani et les Fremen pour se venger des conspirateurs qui ont détruit sa famille. Alors qu'il fait face à un choix entre l'amour de sa vie et le destin de l'univers, il doit empêcher un terrible futur que lui seul peut prévoir.
             </p>
+            <div class="flex space-x-4">
+                <button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-full font-bold flex items-center">
+                    <i class="fas fa-play mr-2"></i> Regarder maintenant
+                </button>
+                <button class="bg-gray-800 hover:bg-gray-700 text-white px-6 py-3 rounded-full font-bold flex items-center">
+                    <i class="fas fa-plus mr-2"></i> Ma liste
                 </button>
             </div>
         </div>
     </section>
+    <!-- Section Nouveautés -->
+    <section id="nouveautes" class="py-10 bg-gray-800">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-bold text-white">Nouveautés</h2>
+                <a href="#" class="text-blue-400 text-sm 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-6" id="nouveautes-grid">
+                <!-- Les films seront générés par JavaScript -->
+            </div>
+        </div>
+    </section>
+    <!-- Section Films Populaires -->
+    <section id="films" class="py-10 bg-gray-900">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-bold text-white">Films Populaires</h2>
+                <div class="flex space-x-2">
+                    <button class="category-btn px-3 py-1 bg-gray-800 text-white rounded-full text-sm hover:bg-gray-700 active" data-category="all">Tous</button>
+                    <button class="category-btn px-3 py-1 bg-gray-800 text-white rounded-full text-sm hover:bg-gray-700" data-category="action">Action</button>
+                    <button class="category-btn px-3 py-1 bg-gray-800 text-white rounded-full text-sm hover:bg-gray-700" data-category="sf">SF</button>
+                    <button class="category-btn px-3 py-1 bg-gray-800 text-white rounded-full text-sm hover:bg-gray-700" data-category="drame">Drame</button>
+                </div>
             </div>
             <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="films-grid">
                 <!-- Les films seront générés par JavaScript -->
             </div>
+            <div class="flex justify-center mt-10 space-x-2">
+                <button class="pagination-btn px-4 py-2 border border-gray-700 rounded-full text-sm hover:bg-gray-800">Précédent</button>
+                <button class="pagination-btn px-4 py-2 border border-gray-700 rounded-full text-sm hover:bg-gray-800 active">1</button>
+                <button class="pagination-btn px-4 py-2 border border-gray-700 rounded-full text-sm hover:bg-gray-800">2</button>
+                <button class="pagination-btn px-4 py-2 border border-gray-700 rounded-full text-sm hover:bg-gray-800">3</button>
+                <button class="pagination-btn px-4 py-2 border border-gray-700 rounded-full text-sm hover:bg-gray-800">Suivant</button>
+            </div>
         </div>
     </section>
+    <!-- Lecteur vidéo pour les films -->
     <div class="video-player" id="video-player">
         <div class="video-container">
             <span class="close-player" id="close-player"><i class="fas fa-times"></i></span>
+            <iframe id="movie-player" class="w-full aspect-video" frameborder="0" allowfullscreen allow="autoplay"></iframe>
         </div>
     </div>
             mobileMenu.classList.toggle('hidden');
         });
+        // Données des films avec de vraies images et liens de streaming
+        const filmsData = [
             {
+                id: 1,
+                titre: "Dune : Partie Deux",
+                annee: 2024,
+                duree: "2h46min",
+                genres: ["Science-fiction", "Aventure"],
+                description: "Paul Atreides s'unit avec Chani et les Fremen pour se venger des conspirateurs qui ont détruit sa famille.",
+                note: "8.7",
+                image: "https://image.tmdb.org/t/p/w500/8b8R8l88Qje9dn9OE8PY05Hav3f.jpg",
+                video: "https://www.youtube.com/embed/EXeTwQWrcwY?autoplay=1",
                 vf: true,
                 hd: true,
+                nouveau: true,
+                category: "sf"
             },
             {
+                id: 2,
+                titre: "Furiosa : Une Saga Mad Max",
+                annee: 2024,
+                duree: "2h28min",
+                genres: ["Action", "Science-fiction"],
+                description: "L'histoire de la jeune Furiosa avant sa rencontre avec Max Rockatansky.",
                 note: "8.1",
+                image: "https://image.tmdb.org/t/p/w500/6XxP7L1RGRfGVrHxzzAqH6XyKrJ.jpg",
+                video: "https://www.youtube.com/embed/XJMuhwVlca4?autoplay=1",
                 vf: true,
                 hd: true,
+                nouveau: true,
+                category: "action"
             },
             {
+                id: 3,
+                titre: "Deadpool & Wolverine",
+                annee: 2024,
+                duree: "2h07min",
+                genres: ["Action", "Comédie"],
+                description: "Deadpool change l'histoire du MCU avec Wolverine dans une aventure multiverselle.",
+                note: "8.9",
+                image: "https://image.tmdb.org/t/p/w500/uxBHXaoOvAwy4NpPpP7nNx2rXYQ.jpg",
+                video: "https://www.youtube.com/embed/avb5Tqrlx1U?autoplay=1",
                 vf: true,
                 hd: true,
+                nouveau: true,
+                category: "action"
             },
             {
+                id: 4,
+                titre: "Gladiator 2",
+                annee: 2024,
+                duree: "2h38min",
+                genres: ["Action", "Drame"],
+                description: "Suite du film culte Gladiator, suivant les aventures de Lucius, le neveu de Commodus.",
+                note: "8.3",
+                image: "https://image.tmdb.org/t/p/w500/pgqgaUx1cJb5oZQQAivhSlbWXGE.jpg",
+                video: "https://www.youtube.com/embed/wws5KZ5wJ2Y?autoplay=1",
                 vf: true,
                 hd: true,
+                nouveau: false,
+                category: "action"
             },
             {
+                id: 5,
+                titre: "Joker : Folie à Deux",
+                annee: 2024,
+                duree: "2h22min",
+                genres: ["Drame", "Thriller"],
+                description: "Arthur Fleck rencontre Harley Quinn dans cet opus musical qui explore leur relation toxique.",
+                note: "8.5",
+                image: "https://image.tmdb.org/t/p/w500/x2Vf8bY92PJq2pWevVx7lXfXqAB.jpg",
+                video: "https://www.youtube.com/embed/xy8aJw1vYHo?autoplay=1",
                 vf: true,
                 hd: true,
+                nouveau: false,
+                category: "drame"
             },
             {
+                id: 6,
+                titre: "The Batman",
+                annee: 2022,
+                duree: "2h56min",
+                genres: ["Action", "Thriller"],
+                description: "Batman enquête sur le milieu criminel de Gotham City alors qu'un tueur s'en prend à l'élite corrompue.",
+                note: "7.8",
+                image: "https://image.tmdb.org/t/p/w500/seyWFgGInaLqW7nOZvu0V95aox8.jpg",
+                video: "https://www.youtube.com/embed/mqqft2x_Aa4?autoplay=1",
                 vf: true,
                 hd: true,
+                nouveau: false,
+                category: "action"
             },
             {
+                id: 7,
+                titre: "Avatar : La Voie de l'Eau",
+                annee: 2022,
+                duree: "3h12min",
+                genres: ["Science-fiction", "Aventure"],
+                description: "Jake Sully et Ney'tiri forment une famille sur Pandora mais doivent quitter leur foyer.",
+                note: "7.6",
+                image: "https://image.tmdb.org/t/p/w500/jRXYjXNq0Cs2TcJjLkki24MLp7u.jpg",
+                video: "https://www.youtube.com/embed/a8Gx8wiNbs8?autoplay=1",
                 vf: true,
                 hd: true,
+                nouveau: false,
+                category: "sf"
             },
             {
+                id: 8,
+                titre: "Oppenheimer",
+                annee: 2023,
+                duree: "3h",
+                genres: ["Drame", "Historique"],
+                description: "L'histoire du physicien J. Robert Oppenheimer et son rôle dans le développement de la bombe atomique.",
                 note: "8.4",
                 image: "https://image.tmdb.org/t/p/w500/8Gxv8gSFCU0XGDykEGv7zR1nuhua.jpg",
+                video: "https://www.youtube.com/embed/uYPbbksJxIg?autoplay=1",
                 vf: true,
                 hd: true,
+                nouveau: false,
+                category: "drame"
             },
             {
+                id: 9,
+                titre: "Top Gun : Maverick",
+                annee: 2022,
+                duree: "2h11min",
+                genres: ["Action", "Drame"],
+                description: "Trente ans de service, Maverick est toujours là, repoussant les limites comme pilote d'essai.",
+                note: "8.3",
+                image: "https://image.tmdb.org/t/p/w500/jTrXwK56EoLHHsQaM2kra45E4ek.jpg",
+                video: "https://www.youtube.com/embed/giXco2jaZ_4?autoplay=1",
                 vf: true,
                 hd: true,
+                nouveau: false,
+                category: "action"
             },
             {
+                id: 10,
+                titre: "Interstellar",
+                annee: 2014,
+                duree: "2h49min",
+                genres: ["Science-fiction", "Drame"],
+                description: "Une équipe d'explorateurs voyage à travers un trou de ver pour sauver l'humanité.",
+                note: "8.4",
+                image: "https://image.tmdb.org/t/p/w500/gEU2QniE6E77NI6lCU6MxlNBvIx.jpg",
+                video: "https://www.youtube.com/embed/zSWdZVtXT7E?autoplay=1",
                 vf: true,
                 hd: true,
+                nouveau: false,
+                category: "sf"
             }
         ];
         // Variables pour le lecteur vidéo
         const videoPlayer = document.getElementById('video-player');
         const moviePlayer = document.getElementById('movie-player');
         const closePlayer = document.getElementById('close-player');
+        // Ouvrir le lecteur vidéo avec le film
         function openVideoPlayer(videoUrl) {
             moviePlayer.src = videoUrl;
             videoPlayer.style.display = 'flex';
             document.body.style.overflow = 'hidden';
         }
         // Fermer le lecteur vidéo
         closePlayer.addEventListener('click', () => {
+            moviePlayer.src = '';
             videoPlayer.style.display = 'none';
             document.body.style.overflow = 'auto';
         });
         // Fermer le lecteur si on clique en dehors
         videoPlayer.addEventListener('click', (e) => {
             if (e.target === videoPlayer) {
+                moviePlayer.src = '';
                 videoPlayer.style.display = 'none';
                 document.body.style.overflow = 'auto';
             }
         });
+        // Générer les films dans une grille
+        function genererFilmsGrid(films, targetElement, limit = null) {
+            const filmsToShow = limit ? films.slice(0, limit) : films;
+            targetElement.innerHTML = '';
+            filmsToShow.forEach(film => {
                 const filmElement = document.createElement('div');
+                filmElement.className = 'film-card group relative rounded-xl overflow-hidden transition-all duration-300 hover:z-10';
                 filmElement.innerHTML = `
+                    <div class="relative aspect-[2/3] rounded-xl overflow-hidden cursor-pointer">
                         ${film.vf ? '<span class="vf-badge">VF</span>' : ''}
                         ${film.hd ? '<span class="hd-badge">HD</span>' : ''}
+                        ${film.nouveau ? '<span class="new-badge">NOUVEAU</span>' : ''}
+                        <img src="${film.image}" alt="${film.titre}" class="w-full h-full object-cover group-hover:opacity-70 transition-all duration-300" loading="lazy">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-300"></div>
+                        <div class="absolute bottom-0 left-0 right-0 p-4 translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300">
                             <h3 class="text-white font-bold text-lg mb-1">${film.titre}</h3>
                             <div class="flex items-center text-sm text-gray-300 mb-2">
                                 <span>${film.annee}</span>
                                 <span>${film.duree}</span>
                             </div>
                             <div class="flex flex-wrap gap-2 mb-3">
+                                ${film.genres.map(genre => `<span class="px-2 py-1 bg-gray-800 text-white text-xs rounded-full">${genre}</span>`).join('')}
                             </div>
                             <p class="text-gray-300 text-sm line-clamp-2">${film.description}</p>
                         </div>
+                        <div class="absolute top-3 left-3 px-2 py-1 bg-black bg-opacity-70 text-yellow-400 text-sm font-bold rounded-full flex items-center">
                             <i class="fas fa-star mr-1"></i>
                             ${film.note}
                         </div>
                         </div>
                     </div>
                     <div class="mt-2">
+                        <button class="watch-btn w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-full text-sm font-bold transition-all duration-300 flex items-center justify-center" data-video="${film.video}">
                             <i class="fas fa-play mr-2"></i> Regarder
                         </button>
                     </div>
                 });
             });
         }
+        // Filtrer les films par catégorie
+        function filterFilms(category) {
+            const filmsGrid = document.getElementById('films-grid');
+            if (category === 'all') {
+                genererFilmsGrid(filmsData, filmsGrid);
+            } else {
+                const filteredFilms = filmsData.filter(film => film.category === category);
+                genererFilmsGrid(filteredFilms, filmsGrid);
+            }
+            // Mettre à jour les boutons actifs
+            document.querySelectorAll('.category-btn').forEach(btn => {
+                if (btn.dataset.category === category) {
+                    btn.classList.add('active');
+                } else {
+                    btn.classList.remove('active');
+                }
+            });
+        }
         // Initialisation
         document.addEventListener('DOMContentLoaded', () => {
+            // Charger les nouveautés (5 premiers films)
+            const nouveautes = filmsData.filter(film => film.nouveau);
+            genererFilmsGrid(nouveautes, document.getElementById('nouveautes-grid'), 5);
+            // Charger tous les films
+            genererFilmsGrid(filmsData, document.getElementById('films-grid'));
+            // Gestion des catégories
+            document.querySelectorAll('.category-btn').forEach(btn => {
+                btn.addEventListener('click', function() {
+                    const category = this.dataset.category;
+                    filterFilms(category);
                 });
             });
+            // Simulation de chargement
+            setTimeout(() => {
+                document.querySelectorAll('.film-card').forEach(card => {
+                    card.style.opacity = '1';
+                });
+            }, 300);
+        });
+        // Gestion des touches du clavier
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape' && videoPlayer.style.display === 'flex') {
+                moviePlayer.src = '';
+                videoPlayer.style.display = 'none';
+                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-futur" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

prompts.txt CHANGED Viewed

@@ -3,4 +3,6 @@ AFFICHER LES VRAIS IMAGES DES SITE ET DES VRAIS FILMS JE VEUX PAS DE SITE D EXEM
 activer charger plus de film en systeme robotisé automaique
 afficher toutes les derniere film sortie ajouter des bouton a regarder et leurs serveur  je les feux les film en francais de haute qualitéé
 afficher les affiches des derniere film sorte de 2025 avec leur vrais image  ,,charger plus de film et ajouter les bouton regarder avec leur serveur integré en automatique
-afficher toutes les film en automatique avec toutes les images des film et leurs bouton a regarger en systeme autoplay directement quand on clicque sur regarder

 activer charger plus de film en systeme robotisé automaique
 afficher toutes les derniere film sortie ajouter des bouton a regarder et leurs serveur  je les feux les film en francais de haute qualitéé
 afficher les affiches des derniere film sorte de 2025 avec leur vrais image  ,,charger plus de film et ajouter les bouton regarder avec leur serveur integré en automatique
+afficher toutes les film en automatique avec toutes les images des film et leurs bouton a regarger en systeme autoplay directement quand on clicque sur regarder
+je veux pas des video de clip ou de video d'exemple je veux regarder des vrais film complet ,, afficher toutes les vrais image et en page d'accueil les derniere film sortie activer les modelecture en auto
+je veux des vrais film des vrais image de film