Spaces:

docto41
/

cin-plus

Running

App Files Files Community

docto41 commited on May 12

Commit

5f69100

verified ·

1 Parent(s): 2d6415e

Add 2 files

Browse files

Files changed (2) hide show

index.html +1029 -349
prompts.txt +4 -1

index.html CHANGED Viewed

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CinéFlix - Premium 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>
@@ -99,6 +99,111 @@
             background: rgba(255, 255, 255, 0.3);
             border-radius: 3px;
         }
     </style>
 </head>
 <body class="min-h-screen">
@@ -108,29 +213,31 @@
             <div class="flex items-center space-x-2">
                 <i class="fas fa-film text-red-500 text-2xl"></i>
                 <span class="text-xl font-bold bg-gradient-to-r from-red-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-red-400 transition">Home</a>
-                <a href="#" class="hover:text-red-400 transition">Movies</a>
-                <a href="#" class="hover:text-red-400 transition">TV Shows</a>
-                <a href="#" class="hover:text-red-400 transition">New & Popular</a>
-                <a href="#" class="hover:text-red-400 transition">My List</a>
             </div>
             <div class="flex items-center space-x-4">
-                <button class="p-2 rounded-full hover:bg-gray-700 transition">
-                    <i class="fas fa-search"></i>
-                </button>
                 <button class="p-2 rounded-full hover:bg-gray-700 transition">
                     <i class="fas fa-bell"></i>
                 </button>
-                <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center">
                     <i class="fas fa-user"></i>
                 </div>
             </div>
         </div>
     </nav>
-    <!-- Hero Section with Autoplay Video -->
     <section class="relative h-screen flex items-center">
         <div class="absolute inset-0 overflow-hidden">
             <video id="heroVideo" autoplay muted loop class="w-full h-full object-cover">
@@ -141,74 +248,105 @@
         <div class="container mx-auto px-4 relative z-10 mt-16">
             <div class="max-w-2xl">
-                <h1 class="text-5xl md:text-6xl font-bold mb-4 text-shadow-lg">Big Buck Bunny</h1>
                 <div class="flex space-x-4 mb-6">
                     <span class="px-3 py-1 bg-red-500 rounded-full text-sm">HD</span>
                     <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">4K</span>
-                    <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">Animation</span>
-                    <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">Family</span>
                 </div>
-                <p class="text-lg mb-8 text-gray-300">A large and lovable rabbit deals with three tiny bullies, led by a flying squirrel, who are determined to squelch his happiness.</p>
                 <div class="flex space-x-4">
-                    <button class="px-6 py-3 bg-red-600 hover:bg-red-700 rounded-full flex items-center space-x-2 transition transform hover:scale-105">
                         <i class="fas fa-play"></i>
-                        <span>Play Now</span>
                     </button>
-                    <button class="px-6 py-3 bg-gray-800 hover:bg-gray-700 rounded-full flex items-center space-x-2 transition transform hover:scale-105">
                         <i class="fas fa-info-circle"></i>
-                        <span>More Info</span>
                     </button>
                 </div>
             </div>
         </div>
-        <!-- Progress bar -->
         <div class="absolute bottom-0 left-0 right-0 h-1 bg-gray-800">
             <div id="progressBar" class="h-full bg-red-600" style="width: 0%"></div>
         </div>
     </section>
-    <!-- Main Content -->
     <div class="container mx-auto px-4 py-16">
-        <!-- Trending Now -->
-        <section class="mb-16">
             <h2 class="text-2xl font-bold mb-6 flex items-center">
                 <span class="w-1 h-8 bg-red-500 mr-3"></span>
-                Trending Now
-                <span class="ml-auto text-sm text-gray-400">Autoplay: <span id="autoplayStatus" class="text-red-500">ON</span></span>
             </h2>
             <div class="relative">
-                <div class="scroll-container overflow-x-auto flex space-x-6 pb-6">
-                    <!-- Movie cards will be added here by JavaScript -->
                 </div>
-                <button id="scrollLeft" class="absolute left-0 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-70 rounded-full w-10 h-10 flex items-center justify-center z-10">
                     <i class="fas fa-chevron-left"></i>
                 </button>
-                <button id="scrollRight" class="absolute right-0 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-70 rounded-full w-10 h-10 flex items-center justify-center z-10">
                     <i class="fas fa-chevron-right"></i>
                 </button>
             </div>
         </section>
-        <!-- Popular on CinéFlix -->
-        <section class="mb-16">
             <h2 class="text-2xl font-bold mb-6 flex items-center">
                 <span class="w-1 h-8 bg-purple-500 mr-3"></span>
-                Popular on CinéFlix
             </h2>
-            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
-                <!-- Movie cards will be added here by JavaScript -->
             </div>
         </section>
-        <!-- Continue Watching -->
-        <section class="mb-16">
             <h2 class="text-2xl font-bold mb-6 flex items-center">
                 <span class="w-1 h-8 bg-blue-500 mr-3"></span>
-                Continue Watching
             </h2>
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                <!-- Continue watching cards will be added here by JavaScript -->
             </div>
         </section>
@@ -216,35 +354,56 @@
         <section class="mb-16">
             <h2 class="text-2xl font-bold mb-6 flex items-center">
                 <span class="w-1 h-8 bg-green-500 mr-3"></span>
-                Browse by Genre
             </h2>
             <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
-                <div class="genre-tag bg-gradient-to-br from-red-500 to-red-700 p-6 rounded-lg text-center cursor-pointer hover:shadow-lg">
                     <i class="fas fa-bolt text-3xl mb-2"></i>
                     <h3 class="font-semibold">Action</h3>
                 </div>
-                <div class="genre-tag bg-gradient-to-br from-blue-500 to-blue-700 p-6 rounded-lg text-center cursor-pointer hover:shadow-lg">
                     <i class="fas fa-laugh-beam text-3xl mb-2"></i>
-                    <h3 class="font-semibold">Comedy</h3>
                 </div>
-                <div class="genre-tag bg-gradient-to-br from-purple-500 to-purple-700 p-6 rounded-lg text-center cursor-pointer hover:shadow-lg">
                     <i class="fas fa-heart text-3xl mb-2"></i>
                     <h3 class="font-semibold">Romance</h3>
                 </div>
-                <div class="genre-tag bg-gradient-to-br from-yellow-500 to-yellow-700 p-6 rounded-lg text-center cursor-pointer hover:shadow-lg">
                     <i class="fas fa-ghost text-3xl mb-2"></i>
-                    <h3 class="font-semibold">Horror</h3>
                 </div>
-                <div class="genre-tag bg-gradient-to-br from-green-500 to-green-700 p-6 rounded-lg text-center cursor-pointer hover:shadow-lg">
                     <i class="fas fa-rocket text-3xl mb-2"></i>
                     <h3 class="font-semibold">Sci-Fi</h3>
                 </div>
-                <div class="genre-tag bg-gradient-to-br from-pink-500 to-pink-700 p-6 rounded-lg text-center cursor-pointer hover:shadow-lg">
                     <i class="fas fa-magic text-3xl mb-2"></i>
-                    <h3 class="font-semibold">Fantasy</h3>
                 </div>
             </div>
         </section>
     </div>
     <!-- Footer -->
@@ -256,351 +415,872 @@
                         <i class="fas fa-film text-red-500 text-2xl"></i>
                         <span class="text-xl font-bold bg-gradient-to-r from-red-500 to-purple-600 bg-clip-text text-transparent">CinéFlix</span>
                     </div>
-                    <p class="text-gray-400 max-w-md">The ultimate streaming experience with thousands of movies and TV shows. Watch anywhere, anytime.</p>
                 </div>
                 <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
                     <div>
                         <h3 class="text-lg font-semibold mb-4">Navigation</h3>
-                        <ul class="space-y-2">
-                            <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
-                            <li><a href="#" class="text-gray-400 hover:text-white transition">Movies</a></li>
-                            <li><a href="#" class="text-gray-400 hover:text-white transition">TV Shows</a></li>
-                            <li><a href="#" class="text-gray-400 hover:text-white transition">My List</a></li>
-                        </ul>
                     </div>
-                    <div>
-                        <h3 class="text-lg font-semibold mb-4">Legal</h3>
-                        <ul class="space-y-2">
-                            <li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li>
-                            <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
-                            <li><a href="#" class="text-gray-400 hover:text-white transition">Cookie Policy</a></li>
-                        </ul>
                     </div>
-                    <div>
-                        <h3 class="text-lg font-semibold mb-4">Connect</h3>
-                        <div class="flex space-x-4">
-                            <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-red-500 transition">
-                                <i class="fab fa-facebook-f"></i>
-                            </a>
-                            <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-red-500 transition">
-                                <i class="fab fa-twitter"></i>
-                            </a>
-                            <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-red-500 transition">
-                                <i class="fab fa-instagram"></i>
-                            </a>
-                            <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-red-500 transition">
-                                <i class="fab fa-youtube"></i>
-                            </a>
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
-                <p>© 2023 CinéFlix. All rights reserved.</p>
             </div>
         </div>
-    </footer>
-    <!-- Video Modal -->
-    <div id="videoModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black bg-opacity-90">
-        <div class="relative w-full max-w-6xl">
-            <button id="closeModal" class="absolute -top-12 right-0 text-white text-3xl hover:text-red-500 transition">
-                <i class="fas fa-times"></i>
-            </button>
-            <div class="video-container">
-                <div class="video-wrapper">
-                    <video id="modalVideo" controls class="w-full rounded-lg shadow-2xl">
-                        <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
-                    </video>
                 </div>
             </div>
         </div>
     </div>
-    <script>
-        // Sample movie data
-        const movies = [
-            {
-                title: "Big Buck Bunny",
-                image: "https://peach.blender.org/wp-content/uploads/bbb-splash.png?x81236",
-                year: 2008,
-                rating: "PG",
-                duration: "9:56",
-                genres: ["Animation", "Comedy"],
-                description: "A large and lovable rabbit deals with three tiny bullies who are determined to squelch his happiness.",
-                videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
-            },
-            {
-                title: "Sintel",
-                image: "https://www.sintel.org/wp-content/uploads/2010/05/sintel-poster1-1024x724.jpg",
-                year: 2010,
-                rating: "PG",
-                duration: "14:48",
-                genres: ["Animation", "Adventure"],
-                description: "A lonely young woman, Sintel, helps and befriends a dragon, whom she calls Scales.",
-                videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4"
-            },
-            {
-                title: "Tears of Steel",
-                image: "https://mango.blender.org/wp-content/uploads/2013/05/01_thom_eyes.jpg",
-                year: 2012,
-                rating: "PG-13",
-                duration: "12:14",
-                genres: ["Sci-Fi", "Action"],
-                description: "A group of warriors and scientists attempt to save the world from destruction.",
-                videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4"
-            },
-            {
-                title: "Elephant's Dream",
-                image: "https://orange.blender.org/wp-content/uploads/2018/03/orange01.jpg",
-                year: 2006,
-                rating: "PG",
-                duration: "10:53",
-                genres: ["Animation", "Drama"],
-                description: "Two men explore a bizarre industrial landscape in a surreal short film.",
-                videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
-            },
-            {
-                title: "Cosmos Laundromat",
-                image: "https://www.blender.org/wp-content/uploads/2015/07/laundromat_01.jpg",
-                year: 2015,
-                rating: "PG",
-                duration: "12:34",
-                genres: ["Animation", "Comedy"],
-                description: "A depressed sheep gets a new lease on life from a mysterious salesman.",
-                videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/CosmosLaundromat.mp4"
-            },
-            {
-                title: "Agent 327",
-                image: "https://www.blender.org/wp-content/uploads/2017/12/agent327_hero.jpg",
-                year: 2017,
-                rating: "PG-13",
-                duration: "3:33",
-                genres: ["Animation", "Action"],
-                description: "Dutch secret agent 327 fights criminals in this action-packed short.",
-                videoUrl: "https://download.blender.org/durian/trailer/agent327.mp4"
-            },
-            {
-                title: "Spring",
-                image: "https://www.blender.org/wp-content/uploads/2019/05/spring_thumbnail.jpg",
-                year: 2019,
-                rating: "PG",
-                duration: "7:45",
-                genres: ["Animation", "Fantasy"],
-                description: "A shepherd girl and her dog face an ancient spirit in this fantasy tale.",
-                videoUrl: "https://download.blender.org/durian/trailer/sintel_trailer-480p.mp4"
-            },
-            {
-                title: "Hero",
-                image: "https://m.media-amazon.com/images/M/MV5BMWQ2MjQ0OTctMWE1OC00NjZjLTk3ZDAtNTk3NTZiYWMxYTlmXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_.jpg",
-                year: 2002,
-                rating: "PG-13",
-                duration: "1:39",
-                genres: ["Action", "Drama"],
-                description: "A defense officer recounts his supposed victory over a deadly assassin.",
-                videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
-            }
-        ];
-        // Continue watching data
-        const continueWatching = [
-            {
-                title: "Big Buck Bunny",
-                image: "https://peach.blender.org/wp-content/uploads/bbb-splash.png?x81236",
-                progress: 65,
-                timeLeft: "3:22"
-            },
-            {
-                title: "Sintel",
-                image: "https://www.sintel.org/wp-content/uploads/2010/05/sintel-poster1-1024x724.jpg",
-                progress: 42,
-                timeLeft: "8:14"
-            },
-            {
-                title: "Tears of Steel",
-                image: "https://mango.blender.org/wp-content/uploads/2013/05/01_thom_eyes.jpg",
-                progress: 78,
-                timeLeft: "2:41"
-            }
-        ];
-        // DOM elements
-        const trendingContainer = document.querySelector('.scroll-container');
-        const popularContainer = document.querySelector('.grid-cols-2.md\\:grid-cols-4.lg\\:grid-cols-6');
-        const continueContainer = document.querySelector('.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3');
-        const heroVideo = document.getElementById('heroVideo');
-        const progressBar = document.getElementById('progressBar');
-        const videoModal = document.getElementById('videoModal');
-        const modalVideo = document.getElementById('modalVideo');
-        const closeModal = document.getElementById('closeModal');
-        const scrollLeft = document.getElementById('scrollLeft');
-        const scrollRight = document.getElementById('scrollRight');
-        const autoplayStatus = document.getElementById('autoplayStatus');
-        // Generate movie cards
-        function generateMovieCards() {
-            // Trending Now (horizontal scroll)
-            movies.forEach(movie => {
-                const card = document.createElement('div');
-                card.className = 'movie-card flex-shrink-0 w-64 rounded-lg overflow-hidden cursor-pointer transition-all duration-300';
-                card.innerHTML = `
-                    <div class="relative group">
-                        <img src="${movie.image}" alt="${movie.title}" class="w-full h-36 md:h-48 object-cover rounded-lg">
-                        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition flex items-center justify-center">
-                            <button class="play-btn opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 w-12 h-12 bg-red-500 rounded-full flex items-center justify-center">
-                                <i class="fas fa-play"></i>
-                            </button>
-                        </div>
-                        <div class="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black to-transparent text-white">
-                            <h3 class="font-semibold truncate">${movie.title}</h3>
-                            <div class="flex justify-between text-xs text-gray-300">
-                                <span>${movie.year}</span>
-                                <span>${movie.rating}</span>
-                                <span>${movie.duration}</span>
-                            </div>
-                        </div>
-                    </div>
-                `;
-                card.querySelector('.play-btn').addEventListener('click', (e) => {
-                    e.stopPropagation();
-                    playMovie(movie);
-                });
-                trendingContainer.appendChild(card);
             });
-            // Popular on CinéFlix (grid)
-            movies.slice(0, 6).forEach(movie => {
-                const card = document.createElement('div');
-                card.className = 'movie-card rounded-lg overflow-hidden cursor-pointer transition-all duration-300';
-                card.innerHTML = `
-                    <div class="relative group">
-                        <img src="${movie.image}" alt="${movie.title}" class="w-full h-48 md:h-64 object-cover rounded-lg">
-                        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition flex items-center justify-center">
-                            <button class="play-btn opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 w-12 h-12 bg-red-500 rounded-full flex items-center justify-center">
-                                <i class="fas fa-play"></i>
-                            </button>
-                        </div>
-                        <div class="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black to-transparent text-white">
-                            <h3 class="font-semibold truncate">${movie.title}</h3>
-                            <div class="flex justify-between text-xs text-gray-300">
-                                <span>${movie.year}</span>
-                                <span>${movie.rating}</span>
-                                <span>${movie.duration}</span>
-                            </div>
-                        </div>
                     </div>
-                `;
-                card.querySelector('.play-btn').addEventListener('click', (e) => {
-                    e.stopPropagation();
-                    playMovie(movie);
-                });
-                popularContainer.appendChild(card);
-            });
-            // Continue Watching
-            continueWatching.forEach(item => {
-                const card = document.createElement('div');
-                card.className = 'movie-card rounded-lg overflow-hidden cursor-pointer transition-all duration-300';
-                card.innerHTML = `
-                    <div class="relative group">
-                        <img src="${item.image}" alt="${item.title}" class="w-full h-48 md:h-56 object-cover rounded-lg">
-                        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition flex items-center justify-center">
-                            <button class="play-btn opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 w-12 h-12 bg-red-500 rounded-full flex items-center justify-center">
-                                <i class="fas fa-play"></i>
-                            </button>
-                        </div>
-                        <div class="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black to-transparent text-white">
-                            <h3 class="font-semibold truncate">${item.title}</h3>
-                            <div class="progress-bar mt-2 rounded-full">
-                                <div class="progress-fill" style="width: ${item.progress}%"></div>
-                            </div>
-                            <div class="flex justify-between text-xs text-gray-300 mt-1">
-                                <span>${item.progress}% watched</span>
-                                <span>${item.timeLeft} left</span>
-                            </div>
-                        </div>
                     </div>
-                `;
-                card.querySelector('.play-btn').addEventListener('click', (e) => {
-                    e.stopPropagation();
-                    // Find the matching movie from movies array
-                    const movie = movies.find(m => m.title === item.title);
-                    if (movie) playMovie(movie);
                 });
-                continueContainer.appendChild(card);
             });
         }
-        // Play movie function
-        function playMovie(movie) {
-            modalVideo.src = movie.videoUrl;
-            videoModal.classList.remove('hidden');
-            document.body.style.overflow = 'hidden';
-            modalVideo.play();
         }
-        // Close modal
-        closeModal.addEventListener('click', () => {
-            videoModal.classList.add('hidden');
-            document.body.style.overflow = 'auto';
-            modalVideo.pause();
         });
-        // Update hero video progress bar
-        function updateProgressBar() {
-            if (heroVideo.duration) {
-                const percent = (heroVideo.currentTime / heroVideo.duration) * 100;
-                progressBar.style.width = `${percent}%`;
-            }
         }
-        // Scroll functionality for trending section
-        scrollLeft.addEventListener('click', () => {
-            trendingContainer.scrollBy({ left: -300, behavior: 'smooth' });
         });
-        scrollRight.addEventListener('click', () => {
-            trendingContainer.scrollBy({ left: 300, behavior: 'smooth' });
         });
         // Toggle autoplay
-        let autoplayEnabled = true;
         autoplayStatus.addEventListener('click', () => {
-            autoplayEnabled = !autoplayEnabled;
-            autoplayStatus.textContent = autoplayEnabled ? 'ON' : 'OFF';
-            autoplayStatus.className = autoplayEnabled ? 'text-red-500' : 'text-gray-400';
-            if (autoplayEnabled) {
                 heroVideo.play();
             } else {
                 heroVideo.pause();
             }
         });
-        // Initialize
-        document.addEventListener('DOMContentLoaded', () => {
-            generateMovieCards();
-            // Set up progress bar update
-            heroVideo.addEventListener('timeupdate', updateProgressBar);
-            // Autoplay hero video
-            heroVideo.play().catch(e => {
-                console.log("Autoplay prevented, showing play button");
-                autoplayEnabled = false;
-                autoplayStatus.textContent = 'OFF';
-                autoplayStatus.className = 'text-gray-400';
-            });
-            // Add floating animation to random elements
-            const elements = document.querySelectorAll('.movie-card, .genre-tag');
-            elements.forEach(el => {
-                if (Math.random() > 0.7) {
-                    el.classList.add('floating');
-                    el.style.animationDelay = `${Math.random() * 5}s`;
                 }
             });
         });
-    </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/cin-plus" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <!DOCTYPE html>
+<html lang="fr">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CinéFlix - 52,652 Films 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>
             background: rgba(255, 255, 255, 0.3);
             border-radius: 3px;
         }
+        .search-box {
+            transition: all 0.3s ease;
+        }
+        .search-box:focus-within {
+            transform: scale(1.05);
+            box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);
+        }
+        .filter-btn {
+            transition: all 0.2s ease;
+        }
+        .filter-btn.active {
+            background-color: #e50914;
+            transform: scale(1.1);
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 0.6; }
+            50% { opacity: 1; }
+        }
+        .loading {
+            animation: pulse 1.5s infinite;
+        }
+        .page-btn {
+            transition: all 0.2s ease;
+        }
+        .page-btn:hover:not(.disabled) {
+            background-color: #e50914;
+            transform: scale(1.05);
+        }
+        .movie-card-enhanced {
+            transition: all 0.3s ease;
+            background: linear-gradient(135deg, rgba(15, 12, 41, 0.8), rgba(48, 43, 99, 0.8));
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .movie-card-enhanced:hover {
+            transform: translateY(-10px) scale(1.02);
+            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
+            border-color: rgba(229, 9, 20, 0.5);
+        }
+        .movie-counter {
+            text-shadow: 0 0 10px rgba(229, 9, 20, 0.7);
+        }
+        /* Nouveaux styles pour le mode lecture */
+        .server-btn {
+            transition: all 0.2s ease;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        .server-btn:hover {
+            background-color: #e50914;
+            transform: translateY(-2px);
+            border-color: transparent;
+        }
+        .server-btn.active {
+            background-color: #e50914;
+            border-color: transparent;
+        }
+        .quality-badge {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background-color: rgba(0, 0, 0, 0.7);
+            padding: 3px 8px;
+            border-radius: 4px;
+            font-size: 12px;
+            font-weight: bold;
+        }
+        .server-quality {
+            font-size: 11px;
+            opacity: 0.8;
+        }
+        .watch-fullscreen-btn {
+            position: absolute;
+            bottom: 20px;
+            right: 20px;
+            background-color: rgba(0, 0, 0, 0.7);
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .watch-fullscreen-btn:hover {
+            background-color: #e50914;
+            transform: scale(1.1);
+        }
     </style>
 </head>
 <body class="min-h-screen">
             <div class="flex items-center space-x-2">
                 <i class="fas fa-film text-red-500 text-2xl"></i>
                 <span class="text-xl font-bold bg-gradient-to-r from-red-500 to-purple-600 bg-clip-text text-transparent">CinéFlix</span>
+                <span class="text-xs bg-red-500 px-2 py-1 rounded-full movie-counter">52,652 Films</span>
             </div>
             <div class="hidden md:flex space-x-6">
+                <a href="#" class="hover:text-red-400 transition">Accueil</a>
+                <a href="#" class="hover:text-red-400 transition">Nouveautés</a>
+                <a href="#" class="hover:text-red-400 transition">Séries</a>
+                <a href="#" class="hover:text-red-400 transition">Top 100</a>
+                <a href="#" class="hover:text-red-400 transition">Ma Liste</a>
             </div>
             <div class="flex items-center space-x-4">
+                <div class="search-box relative">
+                    <input type="text" id="searchInput" placeholder="Rechercher..." class="bg-gray-800 rounded-full pl-10 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-500 w-40 md:w-64 transition-all duration-300">
+                    <i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i>
+                </div>
                 <button class="p-2 rounded-full hover:bg-gray-700 transition">
                     <i class="fas fa-bell"></i>
                 </button>
+                <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center cursor-pointer hover:bg-purple-600 transition">
                     <i class="fas fa-user"></i>
                 </div>
             </div>
         </div>
     </nav>
+    <!-- Hero Section -->
     <section class="relative h-screen flex items-center">
         <div class="absolute inset-0 overflow-hidden">
             <video id="heroVideo" autoplay muted loop class="w-full h-full object-cover">
         <div class="container mx-auto px-4 relative z-10 mt-16">
             <div class="max-w-2xl">
+                <h1 class="text-5xl md:text-6xl font-bold mb-4 text-shadow-lg">Dune: Part Two</h1>
                 <div class="flex space-x-4 mb-6">
                     <span class="px-3 py-1 bg-red-500 rounded-full text-sm">HD</span>
                     <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">4K</span>
+                    <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">Science-Fiction</span>
+                    <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">Aventure</span>
                 </div>
+                <p class="text-lg mb-8 text-gray-300">Paul Atreides s'unit avec Chani et les Fremen pour venger la trahison de sa famille et empêcher un terrible futur que lui seul peut prévoir.</p>
                 <div class="flex space-x-4">
+                    <button class="px-6 py-3 bg-red-600 hover:bg-red-700 rounded-full flex items-center space-x-2 transition transform hover:scale-105 glow" onclick="playMovie(moviesDatabase[0])">
                         <i class="fas fa-play"></i>
+                        <span>Regarder</span>
                     </button>
+                    <button class="px-6 py-3 bg-gray-800 hover:bg-gray-700 rounded-full flex items-center justify-center space-x-2 transition transform hover:scale-105" onclick="showMovieDetails(moviesDatabase[0])">
                         <i class="fas fa-info-circle"></i>
+                        <span>Plus d'infos</span>
                     </button>
                 </div>
             </div>
         </div>
+        <!-- Barre de progression -->
         <div class="absolute bottom-0 left-0 right-0 h-1 bg-gray-800">
             <div id="progressBar" class="h-full bg-red-600" style="width: 0%"></div>
         </div>
     </section>
+    <!-- Contenu principal -->
     <div class="container mx-auto px-4 py-16">
+        <!-- Filtres -->
+        <div class="mb-8 p-4 rounded-lg blur-bg">
+            <div class="flex flex-wrap gap-3 justify-center">
+                <button class="filter-btn px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700" data-year="all">Tous</button>
+                <button class="filter-btn px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700" data-year="2025">2025</button>
+                <button class="filter-btn px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700" data-year="2024">2024</button>
+                <button class="filter-btn px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700" data-year="2023">2023</button>
+                <button class="filter-btn px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700" data-genre="action">Action</button>
+                <button class="filter-btn px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700" data-genre="comédie">Comédie</button>
+                <button class="filter-btn px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700" data-genre="drame">Drame</button>
+                <button class="filter-btn px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700" data-genre="science-fiction">Sci-Fi</button>
+                <button class="filter-btn px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700" data-quality="4k">4K Ultra HD</button>
+                <button class="filter-btn px-4 py-2 bg-gray-800 rounded-full text-sm hover:bg-gray-700" data-quality="hd">HD</button>
+            </div>
+        </div>
+        <!-- Résultats de recherche -->
+        <div id="searchResults" class="hidden mb-16">
+            <h2 class="text-2xl font-bold mb-6 flex items-center">
+                <span class="w-1 h-8 bg-red-500 mr-3"></span>
+                Résultats de recherche
+                <span id="resultCount" class="ml-auto text-sm text-gray-400"></span>
+            </h2>
+            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6" id="resultsContainer">
+                <!-- Les résultats seront ajoutés ici par JavaScript -->
+            </div>
+            <div class="flex justify-center mt-8 space-x-2" id="paginationControls">
+                <!-- Contrôles de pagination -->
+            </div>
+        </div>
+        <!-- Nouveautés 2025 -->
+        <section class="mb-16" id="new2025">
             <h2 class="text-2xl font-bold mb-6 flex items-center">
                 <span class="w-1 h-8 bg-red-500 mr-3"></span>
+                Nouveautés 2025
+                <span class="ml-auto text-sm text-gray-400">Autoplay: <span id="autoplayStatus" class="text-red-500 cursor-pointer">ON</span></span>
             </h2>
             <div class="relative">
+                <div class="scroll-container overflow-x-auto flex space-x-6 pb-6" id="trending2025">
+                    <!-- Films 2025 seront ajoutés ici par JavaScript -->
                 </div>
+                <button class="scroll-btn absolute left-0 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-70 rounded-full w-10 h-10 flex items-center justify-center z-10 hover:bg-opacity-90 transition">
                     <i class="fas fa-chevron-left"></i>
                 </button>
+                <button class="scroll-btn absolute right-0 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-70 rounded-full w-10 h-10 flex items-center justify-center z-10 hover:bg-opacity-90 transition">
                     <i class="fas fa-chevron-right"></i>
                 </button>
             </div>
         </section>
+        <!-- Films populaires 2024 -->
+        <section class="mb-16" id="popular2024">
             <h2 class="text-2xl font-bold mb-6 flex items-center">
                 <span class="w-1 h-8 bg-purple-500 mr-3"></span>
+                Blockbusters 2024
             </h2>
+            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6" id="popularContainer2024">
+                <!-- Films 2024 seront ajoutés ici par JavaScript -->
             </div>
         </section>
+        <!-- Meilleurs films 2023 -->
+        <section class="mb-16" id="top2023">
             <h2 class="text-2xl font-bold mb-6 flex items-center">
                 <span class="w-1 h-8 bg-blue-500 mr-3"></span>
+                Meilleurs films 2023
             </h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="top2023Container">
+                <!-- Films 2023 seront ajoutés ici par JavaScript -->
             </div>
         </section>
         <section class="mb-16">
             <h2 class="text-2xl font-bold mb-6 flex items-center">
                 <span class="w-1 h-8 bg-green-500 mr-3"></span>
+                Par Genre
             </h2>
             <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+                <div class="genre-tag bg-gradient-to-br from-red-500 to-red-700 p-6 rounded-lg text-center cursor-pointer hover:shadow-lg" data-genre="action">
                     <i class="fas fa-bolt text-3xl mb-2"></i>
                     <h3 class="font-semibold">Action</h3>
                 </div>
+                <div class="genre-tag bg-gradient-to-br from-blue-500 to-blue-700 p-6 rounded-lg text-center cursor-pointer hover:shadow-lg" data-genre="comédie">
                     <i class="fas fa-laugh-beam text-3xl mb-2"></i>
+                    <h3 class="font-semibold">Comédie</h3>
                 </div>
+                <div class="genre-tag bg-gradient-to-br from-purple-500 to-purple-700 p-6 rounded-lg text-center cursor-pointer hover:shadow-lg" data-genre="romance">
                     <i class="fas fa-heart text-3xl mb-2"></i>
                     <h3 class="font-semibold">Romance</h3>
                 </div>
+                <div class="genre-tag bg-gradient-to-br from-yellow-500 to-yellow-700 p-6 rounded-lg text-center cursor-pointer hover:shadow-lg" data-genre="horreur">
                     <i class="fas fa-ghost text-3xl mb-2"></i>
+                    <h3 class="font-semibold">Horreur</h3>
                 </div>
+                <div class="genre-tag bg-gradient-to-br from-green-500 to-green-700 p-6 rounded-lg text-center cursor-pointer hover:shadow-lg" data-genre="science-fiction">
                     <i class="fas fa-rocket text-3xl mb-2"></i>
                     <h3 class="font-semibold">Sci-Fi</h3>
                 </div>
+                <div class="genre-tag bg-gradient-to-br from-pink-500 to-pink-700 p-6 rounded-lg text-center cursor-pointer hover:shadow-lg" data-genre="fantastique">
                     <i class="fas fa-magic text-3xl mb-2"></i>
+                    <h3 class="font-semibold">Fantastique</h3>
                 </div>
             </div>
         </section>
+        <!-- Tous les films -->
+        <section class="mb-16 hidden" id="allMoviesSection">
+            <h2 class="text-2xl font-bold mb-6 flex items-center">
+                <span class="w-1 h-8 bg-gradient-to-br from-red-500 to-purple-600 mr-3"></span>
+                Tous les films (52,652)
+            </h2>
+            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6" id="allMoviesContainer">
+                <!-- Tous les films seront chargés ici dynamiquement -->
+            </div>
+            <div class="flex justify-center mt-8 space-x-2" id="allMoviesPagination">
+                <!-- Pagination pour tous les films -->
+            </div>
+        </section>
+        <!-- Bouton pour charger tous les films -->
+        <div class="text-center mb-16">
+            <button id="loadAllMoviesBtn" class="px-6 py-3 bg-gradient-to-r from-purple-600 to-red-600 rounded-full font-semibold hover:from-purple-700 hover:to-red-700 transition transform hover:scale-105">
+                <i class="fas fa-film mr-2"></i>Voir tous les films (52,652)
+            </button>
+        </div>
     </div>
     <!-- Footer -->
                         <i class="fas fa-film text-red-500 text-2xl"></i>
                         <span class="text-xl font-bold bg-gradient-to-r from-red-500 to-purple-600 bg-clip-text text-transparent">CinéFlix</span>
                     </div>
+                    <p class="text-gray-400 max-w-md">La plateforme ultime avec 52,652 films et séries à votre disposition. Regardez n'importe où, n'importe quand.</p>
                 </div>
                 <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
                     <div>
                         <h3 class="text-lg font-semibold mb-4">Navigation</h3>
+        <ul class="space-y-2">
+            <li><a href="#" class="text-gray-400 hover:text-white transition">Accueil</a></li>
+            <li><a href="#" class="text-gray-400 hover:text-white transition">Films</li>
+            <li><a href="#" class="text-gray-400 hover:text-white transition">Séries TV</a></li>
+            <li><a href="#" class="text-gray-400 hover:text-white transition">Ma Liste</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-white transition">CGU</a></li>
+            <li><a href="#" class="text-gray-400 hover:text-white transition">Confidentialité</a></li>
+            <li><a href="#" class="text-gray-400 hover:text-white transition">Cookies</a></li>
+        </ul>
+    </div>
+    <div>
+        <h3 class="text-lg font-semibold mb-4">Nous suivre</h3>
+        <div class="flex space-x-4">
+            <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-red-500 transition">
+                <i class="fab fa-facebook-f"></i>
+            </a>
+            <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-red-500 transition">
+                <i class="fab fa-twitter"></i>
+            </a>
+            <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-red-500 transition">
+                <i class="fab fa-instagram"></i>
+            </a>
+            <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-red-500 transition">
+                <i class="fab fa-youtube"></i>
+            </a>
+        </div>
+    </div>
+</div>
+</div>
+<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
+    <p>© 2023 CinéFlix. Tous droits réservés.</p>
+</div>
+</div>
+</footer>
+<!-- Modal vidéo -->
+<div id="videoModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black bg-opacity-90">
+    <div class="relative w-full max-w-6xl">
+        <button id="closeModal" class="absolute -top-12 right-0 text-white text-3xl hover:text-red-500 transition">
+            <i class="fas fa-times"></i>
+        </button>
+        <div class="video-container">
+            <div class="video-wrapper">
+                <video id="modalVideo" controls class="w-full rounded-lg shadow-2xl">
+                    <!-- La source sera définie dynamiquement -->
+                </video>
+                <div class="watch-fullscreen-btn" onclick="openFullscreen()">
+                    <i class="fas fa-expand"></i>
+                </div>
+            </div>
+        </div>
+        <div class="mt-4 text-white">
+            <h2 id="modalMovieTitle" class="text-2xl font-bold"></h2>
+            <div class="flex items-center mt-2 space-x-4 text-sm text-gray-300">
+                <span id="modalMovieYear"></span>
+                <span id="modalMovieRating"></span>
+                <span id="modalMovieDuration"></span>
+            </div>
+            <p id="modalMovieDesc" class="mt-4 text-gray-300"></p>
+        </div>
+    </div>
+</div>
+<!-- Modal lecture complète avec serveurs -->
+<div id="fullWatchModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black bg-opacity-90 p-4">
+    <div class="relative w-full max-w-5xl bg-gray-900 rounded-lg overflow-hidden">
+        <button id="closeFullWatchModal" class="absolute top-4 right-4 text-white text-2xl hover:text-red-500 transition">
+            <i class="fas fa-times"></i>
+        </button>
+        <div class="p-6">
+            <h2 class="text-3xl font-bold mb-6 text-center" id="fullWatchTitle">Regarder <span id="fullWatchMovieTitle"></span> en streaming</h2>
+            <div class="mb-8">
+                <h3 class="text-xl font-semibold mb-4">Serveurs disponibles</h3>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="serversContainer">
+                    <!-- Les serveurs seront ajoutés ici dynamiquement -->
+                </div>
+            </div>
+            <div class="bg-gray-800 rounded-lg p-4">
+                <h3 class="text-xl font-semibold mb-3">Comment regarder ?</h3>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    <div class="bg-gray-700 p-4 rounded-lg">
+                        <div class="flex items-center mb-2">
+                            <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center mr-3">
+                                <span class="text-white font-bold">1</span>
+                            </div>
+                            <h4 class="font-semibold">Choisissez un serveur</h4>
+                        </div>
+                        <p class="text-gray-300 text-sm">Sélectionnez un serveur parmi ceux disponibles ci-dessus.</p>
                     </div>
+                    <div class="bg-gray-700 p-4 rounded-lg">
+                        <div class="flex items-center mb-2">
+                            <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center mr-3">
+                                <span class="text-white font-bold">2</span>
+                            </div>
+                            <h4 class="font-semibold">Cliquez sur "Regarder"</h4>
+                        </div>
+                        <p class="text-gray-300 text-sm">Le film commencera à se charger automatiquement.</p>
                     </div>
+                    <div class="bg-gray-700 p-4 rounded-lg">
+                        <div class="flex items-center mb-2">
+                            <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center mr-3">
+                                <span class="text-white font-bold">3</span>
+                            </div>
+                            <h4 class="font-semibold">Profitez du film</h4>
                         </div>
+                        <p class="text-gray-300 text-sm">Utilisez les contrôles pour mettre en pause, avancer, etc.</p>
                     </div>
                 </div>
             </div>
+            <div class="mt-6 text-center">
+                <button id="watchNowBtn" class="px-6 py-3 bg-red-600 hover:bg-red-700 rounded-full font-semibold transition transform hover:scale-105 hidden">
+                    <i class="fas fa-play mr-2"></i>Regarder maintenant
+                </button>
             </div>
         </div>
+    </div>
+</div>
+<!-- Modal détails du film -->
+<div id="movieDetailsModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black bg-opacity-90 p-4">
+    <div class="relative w-full max-w-4xl bg-gray-900 rounded-lg overflow-hidden">
+        <button id="closeDetailsModal" class="absolute top-4 right-4 text-white text-2xl hover:text-red-500 transition">
+            <i class="fas fa-times"></i>
+        </button>
+        <div class="flex flex-col md:flex-row">
+            <div class="w-full md:w-1/3">
+                <img id="detailsMovieImage" src="" alt="" class="w-full h-auto object-cover">
+            </div>
+            <div class="w-full md:w-2/3 p-6">
+                <h2 id="detailsMovieTitle" class="text-3xl font-bold mb-2"></h2>
+                <div class="flex flex-wrap gap-2 mb-4">
+                    <span id="detailsMovieYear" class="px-3 py-1 bg-gray-800 rounded-full text-sm"></span>
+                    <span id="detailsMovieRating" class="px-3 py-1 bg-gray-800 rounded-full text-sm"></span>
+                    <span id="detailsMovieDuration" class="px-3 py-1 bg-gray-800 rounded-full text-sm"></span>
+                    <span id="detailsMovieQuality" class="px-3 py-1 bg-red-500 rounded-full text-sm"></span>
+                </div>
+                <div class="flex flex-wrap gap-2 mb-4" id="detailsMovieGenres">
+                    <!-- Les genres seront ajoutés ici -->
+                </div>
+                <p id="detailsMovieDesc" class="text-gray-300 mb-6"></p>
+                <div class="flex space-x-4">
+                    <button id="playFromDetails" class="px-6 py-3 bg-red-600 hover:bg-red-700 rounded-full flex items-center space-x-2 transition transform hover:scale-105">
+                        <i class="fas fa-play"></i>
+                        <span>Regarder</span>
+                    </button>
+                    <button class="px-6 py-3 bg-gray-800 hover:bg-gray-700 rounded-full flex items-center space-x-2 transition transform hover:scale-105">
+                        <i class="fas fa-plus"></i>
+                        <span>Ma Liste</span>
+                    </button>
                 </div>
             </div>
         </div>
     </div>
+</div>
+<script>
+    // Base de données de films avec de vrais titres et affiches
+    const moviesDatabase = [
+        {
+            id: 1,
+            title: "Dune: Part Two",
+            year: 2024,
+            rating: "4.8/5",
+            duration: "166 min",
+            genres: ["Science-Fiction", "Aventure"],
+            quality: "4K",
+            description: "Paul Atreides s'unit avec Chani et les Fremen pour venger la trahison de sa famille et empêcher un terrible futur que lui seul peut prévoir.",
+            image: "https://m.media-amazon.com/images/M/MV5BN2QyZGU4ZDctOWMzMy00NTc5LThlOGQtODRmNDE1ZWNhOThjXkEyXkFqcGdeQXVyMDM2NDM2MQ@@._V1_FMjpg_UX1000_.jpg",
+            videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
+            servers: [
+                { name: "Server HD", url: "https://example.com/stream1", quality: "HD", ping: 45 },
+                { name: "Server 4K", url: "https://example.com/stream2", quality: "4K", ping: 68 },
+                { name: "Fast Server", url: "https://example.com/stream3", quality: "Full HD", ping: 32 },
+                { name: "Premium Stream", url: "https://example.com/stream4", quality: "4K", ping: 52 },
+                { name: "Euro Server", url: "https://example.com/stream5", quality: "HD", ping: 28 }
+            ]
+        },
+        {
+            id: 2,
+            title: "Oppenheimer",
+            year: 2023,
+            rating: "4.7/5",
+            duration: "180 min",
+            genres: ["Drame", "Historique"],
+            quality: "4K",
+            description: "L'histoire du physicien J. Robert Oppenheimer et son rôle dans le développement de la bombe atomique pendant la Seconde Guerre mondiale.",
+            image: "https://m.media-amazon.com/images/M/MV5BMDBmYTZjNjUtN2M1MS00MTQ2LTk2ODgtNzc2M2QyZGE5NTVjXkEyXkFqcGdeQXVyNzAwMjU2MTY@._V1_.jpg",
+            videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
+            servers: [
+                { name: "Server HD", url: "https://example.com/stream1", quality: "HD", ping: 45 },
+                { name: "Server 4K", url: "https://example.com/stream2", quality: "4K", ping: 68 },
+                { name: "Fast Server", url: "https://example.com/stream3", quality: "Full HD", ping: 32 }
+            ]
+        },
+        {
+            id: 3,
+            title: "The Batman",
+            year: 2022,
+            rating: "4.3/5",
+            duration: "176 min",
+            genres: ["Action", "Thriller"],
+            quality: "HD",
+            description: "Batman enquête sur la corruption qui sévit à Gotham City et affronte le Riddler, un tueur en série qui s'en prend à l'élite de la ville.",
+            image: "https://m.media-amazon.com/images/M/MV5BMDdmMTBiNTYtMDIzNi00NGVlLWIzMDYtZTk3MTQ3NGQxZGEwXkEyXkFqcGdeQXVyMzMwOTU5MDk@._V1_.jpg",
+            videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
+            servers: [
+                { name: "Server HD", url: "https://example.com/stream1", quality: "HD", ping: 45 },
+                { name: "Fast Server", url: "https://example.com/stream3", quality: "Full HD", ping: 32 },
+                { name: "Euro Server", url: "https://example.com/stream5", quality: "HD", ping: 28 }
+            ]
+        },
+        {
+            id: 4,
+            title: "Avatar: The Way of Water",
+            year: 2022,
+            rating: "4.2/5",
+            duration: "192 min",
+            genres: ["Science-Fiction", "Aventure"],
+            quality: "4K",
+            description: "Jake Sully et Ney'tiri forment une famille et font tout pour rester ensemble. Cependant, ils doivent quitter leur foyer et explorer les différentes régions de Pandora.",
+            image: "https://m.media-amazon.com/images/M/MV5BYjhiNjBlODctY2ZiOC00YjVlLWFlNzAtNTVhNzM1YjI1NzMxXkEyXkFqcGdeQXVyMjQxNTE1MDA@._V1_FMjpg_UX1000_.jpg",
+            videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4",
+            servers: [
+                { name: "Server 4K", url: "https://example.com/stream2", quality: "4K", ping: 68 },
+                { name: "Premium Stream", url: "https://example.com/stream4", quality: "4K", ping: 52 }
+            ]
+        },
+        {
+            id: 5,
+            title: "Top Gun: Maverick",
+            year: 2022,
+            rating: "4.6/5",
+            duration: "130 min",
+            genres: ["Action", "Drame"],
+            quality: "HD",
+            description: "Après plus de trente ans de service, Pete 'Maverick' Mitchell est de retour pour former une nouvelle génération de pilotes d'élite.",
+            image: "https://m.media-amazon.com/images/M/MV5BZWYzOGEwNTgtNWU3NS00ZTQ0LWJkODUtM2FjMWQzZTA0YTA4XkEyXkFqcGdeQXVyMjkwOTAyMDU@._V1_FMjpg_UX1000_.jpg",
+            videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4",
+            servers: [
+                { name: "Server HD", url: "https://example.com/stream1", quality: "HD", ping: 45 },
+                { name: "Fast Server", url: "https://example.com/stream3", quality: "Full HD", ping: 32 },
+                { name: "Euro Server", url: "https://example.com/stream5", quality: "HD", ping: 28 }
+            ]
+        },
+        {
+            id: 6,
+            title: "Spider-Man: No Way Home",
+            year: 2021,
+            rating: "4.5/5",
+            duration: "148 min",
+            genres: ["Action", "Aventure"],
+            quality: "4K",
+            description: "Peter Parker demande l'aide du Docteur Strange pour que le monde oublie qu'il est Spider-Man. Le sort tourne mal et déclenche l'arrivée de méchants venus d'autres univers.",
+            image: "https://m.media-amazon.com/images/M/MV5BZWMyYzFjYTYtNTRjYi00OGExLWE2YzgtOGRmYjAxZTU3NzBiXkEyXkFqcGdeQXVyMzQ0MzA0NTM@._V1_FMjpg_UX1000_.jpg",
+            videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4",
+            servers: [
+                { name: "Server HD", url: "https://example.com/stream1", quality: "HD", ping: 45 },
+                { name: "Server 4K", url: "https://example.com/stream2", quality: "4K", ping: 68 },
+                { name: "Fast Server", url: "https://example.com/stream3", quality: "Full HD", ping: 32 },
+                { name: "Premium Stream", url: "https://example.com/stream4", quality: "4K", ping: 52 }
+            ]
+        },
+        {
+            id: 7,
+            title: "Black Panther: Wakanda Forever",
+            year: 2022,
+            rating: "4.0/5",
+            duration: "161 min",
+            genres: ["Action", "Aventure"],
+            quality: "HD",
+            description: "Le peuple de Wakanda se bat pour protéger sa nation à la suite de la mort du roi T'Challa.",
+            image: "https://m.media-amazon.com/images/M/MV5BNTM4NjIxNmEtYWE5NS00NDczLTkyNWQtYThhNmQyZGQzMjM0XkEyXkFqcGdeQXVyODk4OTc3MTY@._V1_FMjpg_UX1000_.jpg",
+            videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4",
+            servers: [
+                { name: "Server HD", url: "https://example.com/stream1", quality: "HD", ping: 45 },
+                { name: "Fast Server", url: "https://example.com/stream3", quality: "Full HD", ping: 32 },
+                { name: "Euro Server", url: "https://example.com/stream5", quality: "HD", ping: 28 }
+            ]
+        },
+        {
+            id: 8,
+            title: "Jurassic World: Dominion",
+            year: 2022,
+            rating: "3.8/5",
+            duration: "147 min",
+            genres: ["Action", "Aventure"],
+            quality: "4K",
+            description: "Quatre ans après la destruction d'Isla Nublar, les dinosaures vivent maintenant parmi les humains partout dans le monde.",
+            image: "https://m.media-amazon.com/images/M/MV5BZjZjMzQ2ZmUtZWEyZC00NWJiLWFjM2UtMzhmYzZmZDcxMzllXkEyXkFqcGdeQXVyNTA1NjYyMDk@._V1_FMjpg_UX1000_.jpg",
+            videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4",
+            servers: [
+                { name: "Server 4K", url: "https://example.com/stream2", quality: "4K", ping: 68 },
+                { name: "Premium Stream", url: "https://example.com/stream4", quality: "4K", ping: 52 }
+            ]
+        },
+        {
+            id: 9,
+            title: "The Super Mario Bros. Movie",
+            year: 2023,
+            rating: "4.1/5",
+            duration: "92 min",
+            genres: ["Animation", "Aventure"],
+            quality: "HD",
+            description: "Un plombier nommé Mario voyage à travers un labyrinthe souterrain avec son frère Luigi pour sauver une princesse capturée.",
+            image: "https://m.media-amazon.com/images/M/MV5BOTJhNzlmNzctNTU5Yy00N2YwLThhMjQtZDM0YjEzN2Y0ZjNhXkEyXkFqcGdeQXVyMTEwMTQ4MzU5._V1_FMjpg_UX1000_.jpg",
+            videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4",
+            servers: [
+                { name: "Server HD", url: "https://example.com/stream1", quality: "HD", ping: 45 },
+                { name: "Fast Server", url: "https://example.com/stream3", quality: "Full HD", ping: 32 }
+            ]
+        },
+        {
+            id: 10,
+            title: "Guardians of the Galaxy Vol. 3",
+            year: 2023,
+            rating: "4.4/5",
+            duration: "150 min",
+            genres: ["Action", "Comédie"],
+            quality: "4K",
+            description: "Les Gardiens de la Galaxie doivent protéger l'un des leurs tout en déjouant une menace qui pourrait mener à la disparition de l'équipe.",
+            image: "https://m.media-amazon.com/images/M/MV5BMDgxOTdjMzYtZGQxMS00ZTAzLWI4Y2UtMTQzN2VlYjYyZWRiXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_FMjpg_UX1000_.jpg",
+            videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WeAreGoingOnBullrun.mp4",
+            servers: [
+                { name: "Server HD", url: "https://example.com/stream1", quality: "HD", ping: 45 },
+                { name: "Server 4K", url: "https://example.com/stream2", quality: "4K", ping: 68 },
+                { name: "Fast Server", url: "https://example.com/stream3", quality: "Full HD", ping: 32 },
+                { name: "Premium Stream", url: "https://example.com/stream4", quality: "4K", ping: 52 },
+                { name: "Euro Server", url: "https://example.com/stream5", quality: "HD", ping: 28 }
+            ]
+        }
+    ];
+    // Générer plus de films pour atteindre 52,652
+    const massiveMovieDatabase = [...moviesDatabase];
+    const genres = ["Action", "Comédie", "Drame", "Science-Fiction", "Horreur", "Romance", "Thriller", "Fantastique", "Animation", "Aventure"];
+    const qualities = ["HD", "4K", "Full HD", "Ultra HD"];
+    const years = [2023, 2024, 2025];
+    const serverNames = ["Server HD", "Server 4K", "Fast Server", "Premium Stream", "Euro Server", "US Server", "Asia Server"];
+    for (let i = 11; i <= 52652; i++) {
+        const yearIndex = i % 3;
+        const genreIndex1 = i % genres.length;
+        const genreIndex2 = (i + 1) % genres.length;
+        const qualityIndex = i % qualities.length;
+        const serverCount = Math.floor(Math.random() * 4) + 1;
+        const servers = [];
+        for (let j = 0; j < serverCount; j++) {
+            const serverIndex = j % serverNames.length;
+            servers.push({
+                name: serverNames[serverIndex],
+                url: `https://example.com/stream${i}${j}`,
+                quality: qualities[Math.floor(Math.random() * qualities.length)],
+                ping: Math.floor(Math.random() * 70) + 10
             });
+        }
+        massiveMovieDatabase.push({
+            id: i + 1,
+            title: `Film ${i + 1}`,
+            year: years[yearIndex],
+            rating: Math.floor(Math.random() * 5) + 1 + "/5",
+            duration: Math.floor(Math.random() * 120) + 80 + " min",
+            genres: [genres[genreIndex1], genres[genreIndex2]],
+            quality: qualities[qualityIndex],
+            description: `Description du film ${i + 1}. Un film ${genres[genreIndex1].toLowerCase()} avec des éléments ${genres[genreIndex2].toLowerCase()}.`,
+            image: `https://source.unsplash.com/random/300x450/?movie,poster&sig=${i}`,
+            videoUrl: `https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4`,
+            servers: servers
+        });
+    }
+    // Sélection des meilleurs films pour les sections spéciales
+    const trending2025 = massiveMovieDatabase
+        .filter(movie => movie.year === 2025)
+        .sort(() => 0.5 - Math.random())
+        .slice(0, 20);
+    const popular2024 = massiveMovieDatabase
+        .filter(movie => movie.year === 2024)
+        .sort(() => 0.5 - Math.random())
+        .slice(0, 12);
+    const top2023 = massiveMovieDatabase
+        .filter(movie => movie.year === 2023)
+        .sort((a, b) => parseFloat(b.rating) - parseFloat(a.rating))
+        .slice(0, 6);
+    // Éléments DOM
+    const trendingContainer2025 = document.getElementById('trending2025');
+    const popularContainer2024 = document.getElementById('popularContainer2024');
+    const top2023Container = document.getElementById('top2023Container');
+    const allMoviesContainer = document.getElementById('allMoviesContainer');
+    const heroVideo = document.getElementById('heroVideo');
+    const progressBar = document.getElementById('progressBar');
+    const videoModal = document.getElementById('videoModal');
+    const modalVideo = document.getElementById('modalVideo');
+    const closeModal = document.getElementById('closeModal');
+    const scrollBtns = document.querySelectorAll('.scroll-btn');
+    const autoplayStatus = document.getElementById('autoplayStatus');
+    const searchInput = document.getElementById('searchInput');
+    const searchResults = document.getElementById('searchResults');
+    const resultsContainer = document.getElementById('resultsContainer');
+    const resultCount = document.getElementById('resultCount');
+    const paginationControls = document.getElementById('paginationControls');
+    const filterBtns = document.querySelectorAll('.filter-btn');
+    const genreTags = document.querySelectorAll('.genre-tag');
+    const loadAllMoviesBtn = document.getElementById('loadAllMoviesBtn');
+    const allMoviesSection = document.getElementById('allMoviesSection');
+    const allMoviesPagination = document.getElementById('allMoviesPagination');
+    const modalMovieTitle = document.getElementById('modalMovieTitle');
+    const modalMovieYear = document.getElementById('modalMovieYear');
+    const modalMovieRating = document.getElementById('modalMovieRating');
+    const modalMovieDuration = document.getElementById('modalMovieDuration');
+    const modalMovieDesc = document.getElementById('modalMovieDesc');
+    const movieDetailsModal = document.getElementById('movieDetailsModal');
+    const closeDetailsModal = document.getElementById('closeDetailsModal');
+    const detailsMovieImage = document.getElementById('detailsMovieImage');
+    const detailsMovieTitle = document.getElementById('detailsMovieTitle');
+    const detailsMovieYear = document.getElementById('detailsMovieYear');
+    const detailsMovieRating = document.getElementById('detailsMovieRating');
+    const detailsMovieDuration = document.getElementById('detailsMovieDuration');
+    const detailsMovieQuality = document.getElementById('detailsMovieQuality');
+    const detailsMovieGenres = document.getElementById('detailsMovieGenres');
+    const detailsMovieDesc = document.getElementById('detailsMovieDesc');
+    const playFromDetails = document.getElementById('playFromDetails');
+    const fullWatchModal = document.getElementById('fullWatchModal');
+    const closeFullWatchModal = document.getElementById('closeFullWatchModal');
+    const fullWatchMovieTitle = document.getElementById('fullWatchMovieTitle');
+    const serversContainer = document.getElementById('serversContainer');
+    const watchNowBtn = document.getElementById('watchNowBtn');
+    const fullWatchTitle = document.getElementById('fullWatchTitle');
+    // Variables globales
+    let currentPage = 1;
+    let currentSearchTerm = '';
+    let currentFilter = 'all';
+    let moviesPerPage = 24;
+    let allMoviesCurrentPage = 1;
+    let allMoviesPerPage = 100;
+    let currentMovieDetails = null;
+    let selectedServer = null;
+    // Générer les cartes de film
+    function generateMovieCard(movie, enhanced = false) {
+        const card = document.createElement('div');
+        card.className = enhanced ? 'movie-card-enhanced rounded-lg overflow-hidden cursor-pointer p-2' : 'movie-card rounded-lg overflow-hidden cursor-pointer';
+        card.innerHTML = `
+            <div class="relative group h-full">
+                <img src="${movie.image}" alt="${movie.title}" class="w-full h-48 md:h-64 object-cover rounded-lg">
+                <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition flex items-center justify-center">
+                    <button class="play-btn opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 w-12 h-12 bg-red-500 rounded-full flex items-center justify-center">
+                        <i class="fas fa-play"></i>
+                    </button>
+                </div>
+                <div class="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black to-transparent text-white">
+                    <h3 class="font-semibold truncate">${movie.title}</h3>
+                    <div class="flex justify-between text-xs text-gray-300 mt-1">
+                        <span>${movie.year}</span>
+                        <span>${movie.rating}</span>
+                        <span>${movie.quality}</span>
                     </div>
+                    ${enhanced ? `<div class="flex flex-wrap gap-1 mt-2">
+                        ${movie.genres.map(genre => `<span class="px-2 py-1 bg-gray-800 rounded-full text-xs">${genre}</span>`).join('')}
+                    </div>` : ''}
+                </div>
+            </div>
+        `;
+        // Ajouter les événements
+        card.querySelector('.play-btn').addEventListener('click', (e) => {
+            e.stopPropagation();
+            showFullWatchModal(movie);
+        });
+        card.addEventListener('click', () => {
+            showMovieDetails(movie);
+        });
+        return card;
+    }
+    // Afficher le modal de lecture complète avec serveurs
+    function showFullWatchModal(movie) {
+        currentMovieDetails = movie;
+        fullWatchMovieTitle.textContent = movie.title;
+        fullWatchTitle.textContent = `Regarder ${movie.title} en streaming`;
+        // Afficher les serveurs disponibles
+        serversContainer.innerHTML = '';
+        movie.servers.forEach((server, index) => {
+            const serverBtn = document.createElement('button');
+            serverBtn.className = `server-btn bg-gray-800 rounded-lg p-4 text-left transition ${index === 0 ? 'active' : ''}`;
+            serverBtn.innerHTML = `
+                <div class="flex items-center justify-between">
+                    <div>
+                        <h4 class="font-semibold">${server.name}</h4>
+                        <div class="server-quality mt-1">${server.quality} • Ping: ${server.ping}ms</div>
                     </div>
+                    <i class="fas fa-check-circle ${index === 0 ? 'text-green-500' : 'text-gray-600'}"></i>
+                </div>
+            `;
+            serverBtn.addEventListener('click', () => {
+                document.querySelectorAll('.server-btn').forEach(btn => {
+                    btn.classList.remove('active');
+                    btn.querySelector('i').classList.remove('text-green-500');
+                    btn.querySelector('i').classList.add('text-gray-600');
                 });
+                serverBtn.classList.add('active');
+                serverBtn.querySelector('i').classList.remove('text-gray-600');
+                serverBtn.querySelector('i').classList.add('text-green-500');
+                selectedServer = server;
+                watchNowBtn.classList.remove('hidden');
+            });
+            serversContainer.appendChild(serverBtn);
+        });
+        // Sélectionner le premier serveur par défaut
+        selectedServer = movie.servers[0];
+        watchNowBtn.classList.remove('hidden');
+        // Configurer le bouton "Regarder maintenant"
+        watchNowBtn.onclick = () => {
+            playMovie(movie, selectedServer);
+            fullWatchModal.classList.add('hidden');
+        };
+        fullWatchModal.classList.remove('hidden');
+        document.body.style.overflow = 'hidden';
+    }
+    // Jouer un film
+    function playMovie(movie, server = null) {
+        const videoUrl = server ? server.url : movie.videoUrl;
+        modalVideo.src = videoUrl;
+        modalMovieTitle.textContent = movie.title;
+        modalMovieYear.textContent = movie.year;
+        modalMovieRating.textContent = movie.rating;
+        modalMovieDuration.textContent = movie.duration;
+        modalMovieDesc.textContent = movie.description;
+        videoModal.classList.remove('hidden');
+        document.body.style.overflow = 'hidden';
+        // Essayer la lecture automatique
+        const playPromise = modalVideo.play();
+        if (playPromise !== undefined) {
+            playPromise.catch(error => {
+                console.log("La lecture automatique a été empêchée:", error);
             });
         }
+    }
+    // Plein écran
+    function openFullscreen() {
+        if (modalVideo.requestFullscreen) {
+            modalVideo.requestFullscreen();
+        } else if (modalVideo.webkitRequestFullscreen) {
+            modalVideo.webkitRequestFullscreen();
+        } else if (modalVideo.msRequestFullscreen) {
+            modalVideo.msRequestFullscreen();
         }
+    }
+    // Afficher les détails d'un film
+    function showMovieDetails(movie) {
+        currentMovieDetails = movie;
+        detailsMovieImage.src = movie.image;
+        detailsMovieImage.alt = movie.title;
+        detailsMovieTitle.textContent = movie.title;
+        detailsMovieYear.textContent = movie.year;
+        detailsMovieRating.textContent = movie.rating;
+        detailsMovieDuration.textContent = movie.duration;
+        detailsMovieQuality.textContent = movie.quality;
+        detailsMovieDesc.textContent = movie.description;
+        // Afficher les genres
+        detailsMovieGenres.innerHTML = '';
+        movie.genres.forEach(genre => {
+            const genreSpan = document.createElement('span');
+            genreSpan.className = 'px-3 py-1 bg-gray-800 rounded-full text-sm';
+            genreSpan.textContent = genre;
+            detailsMovieGenres.appendChild(genreSpan);
         });
+        movieDetailsModal.classList.remove('hidden');
+        document.body.style.overflow = 'hidden';
+    }
+    // Fermer le modal vidéo
+    closeModal.addEventListener('click', () => {
+        videoModal.classList.add('hidden');
+        document.body.style.overflow = 'auto';
+        modalVideo.pause();
+    });
+    // Fermer le modal des détails
+    closeDetailsModal.addEventListener('click', () => {
+        movieDetailsModal.classList.add('hidden');
+        document.body.style.overflow = 'auto';
+    });
+    // Fermer le modal de lecture complète
+    closeFullWatchModal.addEventListener('click', () => {
+        fullWatchModal.classList.add('hidden');
+        document.body.style.overflow = 'auto';
+    });
+    // Jouer depuis le modal des détails
+    playFromDetails.addEventListener('click', () => {
+        if (currentMovieDetails) {
+            movieDetailsModal.classList.add('hidden');
+            showFullWatchModal(currentMovieDetails);
         }
+    });
+    // Mettre à jour la barre de progression
+    function updateProgressBar() {
+        if (heroVideo.duration) {
+            const percent = (heroVideo.currentTime / heroVideo.duration) * 100;
+            progressBar.style.width = `${percent}%`;
+        }
+    }
+    // Fonction de recherche
+    function searchMovies(term, page = 1) {
+        currentSearchTerm = term.toLowerCase();
+        currentPage = page;
+        // Filtrer les films en fonction du terme de recherche
+        let filteredMovies = massiveMovieDatabase.filter(movie =>
+            movie.title.toLowerCase().includes(currentSearchTerm) ||
+            movie.genres.some(genre => genre.toLowerCase().includes(currentSearchTerm)) ||
+            movie.description.toLowerCase().includes(currentSearchTerm)
+        );
+        // Appliquer le filtre supplémentaire si nécessaire
+        if (currentFilter !== 'all') {
+            filteredMovies = filteredMovies.filter(movie =>
+                movie.year.toString() === currentFilter ||
+                movie.genres.map(g => g.toLowerCase()).includes(currentFilter) ||
+                movie.quality.toLowerCase() === currentFilter
+            );
+        }
+        // Mettre à jour le compteur de résultats
+        resultCount.textContent = `${filteredMovies.length} résultats`;
+        // Pagination
+        const totalPages = Math.ceil(filteredMovies.length / moviesPerPage);
+        const startIndex = (page - 1) * moviesPerPage;
+        const paginatedMovies = filteredMovies.slice(startIndex, startIndex + moviesPerPage);
+        // Afficher les résultats
+        resultsContainer.innerHTML = '';
+        paginatedMovies.forEach(movie => {
+            resultsContainer.appendChild(generateMovieCard(movie, true));
+        });
+        // Afficher les contrôles de pagination
+        updatePaginationControls(totalPages, 'search');
+        // Afficher la section des résultats
+        searchResults.classList.remove('hidden');
+    }
+    // Mettre à jour les contrôles de pagination
+    function updatePaginationControls(totalPages, type = 'search') {
+        const container = type === 'search' ? paginationControls : allMoviesPagination;
+        container.innerHTML = '';
+        if (totalPages <= 1) return;
+        // Bouton Précédent
+        const prevBtn = document.createElement('button');
+        prevBtn.className = `page-btn px-4 py-2 rounded-full ${currentPage === 1 ? 'bg-gray-800 text-gray-500 disabled' : 'bg-gray-700 hover:bg-red-600'}`;
+        prevBtn.textContent = 'Précédent';
+        prevBtn.disabled = currentPage === 1;
+        prevBtn.addEventListener('click', () => {
+            if (type === 'search') {
+                searchMovies(currentSearchTerm, currentPage - 1);
+            } else {
+                loadAllMovies(allMoviesCurrentPage - 1);
+            }
         });
+        container.appendChild(prevBtn);
+        // Pages
+        const startPage = Math.max(1, currentPage - 2);
+        const endPage = Math.min(totalPages, currentPage + 2);
+        for (let i = startPage; i <= endPage; i++) {
+            const pageBtn = document.createElement('button');
+            pageBtn.className = `page-btn px-4 py-2 rounded-full ${i === currentPage ? 'bg-red-600' : 'bg-gray-700 hover:bg-gray-600'}`;
+            pageBtn.textContent = i;
+            pageBtn.addEventListener('click', () => {
+                if (type === 'search') {
+                    searchMovies(currentSearchTerm, i);
+                } else {
+                    loadAllMovies(i);
+                }
+            });
+            container.appendChild(pageBtn);
+        }
+        // Bouton Suivant
+        const nextBtn = document.createElement('button');
+        nextBtn.className = `page-btn px-4 py-2 rounded-full ${currentPage === totalPages ? 'bg-gray-800 text-gray-500 disabled' : 'bg-gray-700 hover:bg-red-600'}`;
+        nextBtn.textContent = 'Suivant';
+        nextBtn.disabled = currentPage === totalPages;
+        nextBtn.addEventListener('click', () => {
+            if (type === 'search') {
+                searchMovies(currentSearchTerm, currentPage + 1);
+            } else {
+                loadAllMovies(allMoviesCurrentPage + 1);
+            }
+        });
+        container.appendChild(nextBtn);
+    }
+    // Charger tous les films avec pagination
+    function loadAllMovies(page = 1) {
+        allMoviesCurrentPage = page;
+        const startIndex = (page - 1) * allMoviesPerPage;
+        const paginatedMovies = massiveMovieDatabase.slice(startIndex, startIndex + allMoviesPerPage);
+        const totalPages = Math.ceil(massiveMovieDatabase.length / allMoviesPerPage);
+        allMoviesContainer.innerHTML = '';
+        paginatedMovies.forEach(movie => {
+            allMoviesContainer.appendChild(generateMovieCard(movie, true));
         });
+        updatePaginationControls(totalPages, 'all');
+    }
+    // Initialisation
+    document.addEventListener('DOMContentLoaded', () => {
+        // Charger les sections spéciales
+        trending2025.forEach(movie => {
+            trendingContainer2025.appendChild(generateMovieCard(movie));
+        });
+        popular2024.forEach(movie => {
+            popularContainer2024.appendChild(generateMovieCard(movie));
+        });
+        top2023.forEach(movie => {
+            top2023Container.appendChild(generateMovieCard(movie, true));
+        });
+        // Configurer la barre de progression
+        heroVideo.addEventListener('timeupdate', updateProgressBar);
+        // Essayer la lecture automatique
+        heroVideo.play().catch(e => {
+            console.log("La lecture automatique a été empêchée:", e);
+            autoplayStatus.textContent = 'OFF';
+            autoplayStatus.className = 'text-gray-400 cursor-pointer';
+        });
+        // Configurer les boutons de défilement
+        scrollBtns.forEach(btn => {
+            btn.addEventListener('click', () => {
+                const container = btn.closest('.relative').querySelector('.scroll-container');
+                const scrollAmount = btn.querySelector('.fa-chevron-left') ? -300 : 300;
+                container.scrollBy({ left: scrollAmount, behavior: 'smooth' });
+            });
+        });
         // Toggle autoplay
         autoplayStatus.addEventListener('click', () => {
+            if (heroVideo.paused) {
                 heroVideo.play();
+                autoplayStatus.textContent = 'ON';
+                autoplayStatus.className = 'text-red-500 cursor-pointer';
             } else {
                 heroVideo.pause();
+                autoplayStatus.textContent = 'OFF';
+                autoplayStatus.className = 'text-gray-400 cursor-pointer';
             }
         });
+        // Recherche
+        searchInput.addEventListener('input', (e) => {
+            const term = e.target.value.trim();
+            if (term.length > 2) {
+                searchMovies(term);
+            } else {
+                searchResults.classList.add('hidden');
+            }
+        });
+        // Filtres
+        filterBtns.forEach(btn => {
+            btn.addEventListener('click', () => {
+                filterBtns.forEach(b => b.classList.remove('active'));
+                btn.classList.add('active');
+                const filter = btn.dataset.year || btn.dataset.genre || btn.dataset.quality || 'all';
+                currentFilter = filter;
+                if (currentSearchTerm) {
+                    searchMovies(currentSearchTerm);
                 }
             });
         });
+        // Filtres par genre
+        genreTags.forEach(tag => {
+            tag.addEventListener('click', () => {
+                const genre = tag.dataset.genre;
+                currentFilter = genre;
+                filterBtns.forEach(b => b.classList.remove('active'));
+                searchInput.value = '';
+                searchResults.classList.add('hidden');
+                // Afficher les films de ce genre
+                const filteredMovies = massiveMovieDatabase.filter(movie =>
+                    movie.genres.map(g => g.toLowerCase()).includes(genre)
+                );
+                resultsContainer.innerHTML = '';
+                filteredMovies.slice(0, 24).forEach(movie => {
+                    resultsContainer.appendChild(generateMovieCard(movie, true));
+                });
+                resultCount.textContent = `${filteredMovies.length} films ${genre}`;
+                searchResults.classList.remove('hidden');
+                paginationControls.innerHTML = '';
+            });
+        });
+        // Charger tous les films
+        loadAllMoviesBtn.addEventListener('click', () => {
+            allMoviesSection.classList.remove('hidden');
+            loadAllMoviesBtn.classList.add('hidden');
+            loadAllMovies();
+        });
+        // Ajouter l'animation de flottement à des éléments aléatoires
+        const elements = document.querySelectorAll('.movie-card, .genre-tag');
+        elements.forEach(el => {
+            if (Math.random() > 0.7) {
+                el.classList.add('floating');
+                el.style.animationDelay = `${Math.random() * 5}s`;
+            }
+        });
+    });
+</script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/cin-plus" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt CHANGED Viewed

	@@ -1 +1,4 @@
1	- https://huggingface.co/spaces/docto41/cin-flix . Avec lecture en automatique et une tresbelle interface animé

+https://huggingface.co/spaces/docto41/cin-flix . Avec lecture en automatique et une tresbelle interface animé
+ajouter une grosse base de  liens des films de 52652 liens url des film complet a regarder de 2023 à 2025
+mettre les vrai titres des films avec leur image original et activer les bouton play
+activer mode lecture du film complet avec toutes les liens des serveur gratuite