Spaces:

docto41
/

flix-vision

Running

App Files Files Community

docto41 commited on May 5, 2025

Commit

a59923b

verified ·

1 Parent(s): 577cbe6

Add 2 files

Browse files

Files changed (2) hide show

index.html +321 -185
prompts.txt +4 -1

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>FlixVision - Votre divertissement sans limites</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>
@@ -105,6 +105,60 @@
             cursor: pointer;
             font-size: 16px;
         }
     </style>
 </head>
 <body>
@@ -114,17 +168,30 @@
             <h1 class="text-2xl font-bold text-red-600">FLIX<span class="text-white">VISION</span></h1>
         </div>
         <div class="hidden md:flex space-x-8">
-            <a href="#" class="text-white hover:text-red-500 transition">Accueil</a>
-            <a href="#" class="text-white hover:text-red-500 transition">Films</a>
-            <a href="#" class="text-white hover:text-red-500 transition">Séries</a>
-            <a href="#" class="text-white hover:text-red-500 transition">Documentaires</a>
-            <a href="#" class="text-white hover:text-red-500 transition">Ma liste</a>
         </div>
         <div class="flex items-center space-x-4">
             <div class="relative">
                 <input type="text" placeholder="Rechercher..." class="bg-gray-800 text-white px-4 py-2 rounded-full focus:outline-none focus:ring-2 focus:ring-red-500 w-40 md:w-64">
                 <i class="fas fa-search absolute right-3 top-2.5 text-gray-400"></i>
             </div>
             <div class="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center cursor-pointer">
                 <i class="fas fa-user text-white"></i>
             </div>
@@ -134,16 +201,16 @@
     <!-- Hero Section -->
     <section class="hero-gradient pt-32 pb-20 px-6 md:px-16">
         <div class="max-w-6xl mx-auto">
-            <h1 class="text-4xl md:text-6xl font-bold mb-6">Votre divertissement <span class="text-red-500">sans limites</span></h1>
-            <p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl">Des milliers de films, séries et documentaires à portée de main. Regardez ce que vous voulez, quand vous voulez, sans publicité.</p>
             <div class="flex flex-wrap gap-4 mb-12">
-                <span class="genre-tag bg-gray-800 text-white px-4 py-2 rounded-full cursor-pointer">Action</span>
-                <span class="genre-tag bg-gray-800 text-white px-4 py-2 rounded-full cursor-pointer">Aventure</span>
-                <span class="genre-tag bg-gray-800 text-white px-4 py-2 rounded-full cursor-pointer">Comédie</span>
-                <span class="genre-tag bg-gray-800 text-white px-4 py-2 rounded-full cursor-pointer">Drame</span>
-                <span class="genre-tag bg-gray-800 text-white px-4 py-2 rounded-full cursor-pointer">Science-fiction</span>
             </div>
-            <button class="bg-red-600 hover:bg-red-700 text-white px-8 py-3 rounded-lg font-semibold text-lg transition flex items-center">
                 <i class="fas fa-play mr-2"></i> Commencer à regarder
             </button>
         </div>
@@ -151,46 +218,46 @@
     <!-- Main Content -->
     <main class="px-6 md:px-16 py-12 max-w-7xl mx-auto">
-        <!-- 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>
-                TENDANCES ACTUELLES
             </h2>
-            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="trending-movies">
                 <!-- Movie cards will be added here by JavaScript -->
             </div>
         </section>
-        <!-- Popular Movies -->
-        <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>
-                FILMS POPULAIRES
             </h2>
-            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="popular-movies">
                 <!-- Movie cards will be added here by JavaScript -->
             </div>
         </section>
-        <!-- TV Series -->
-        <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>
-                SÉRIES TÉLÉVISÉES
             </h2>
-            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="tv-series">
                 <!-- Movie cards will be added here by JavaScript -->
             </div>
         </section>
-        <!-- Documentaries -->
-        <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>
-                DOCUMENTAIRES
             </h2>
-            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="documentaries">
                 <!-- Movie cards will be added here by JavaScript -->
             </div>
         </section>
@@ -201,15 +268,15 @@
         <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8">
             <div>
                 <h3 class="text-xl font-bold text-red-500 mb-4">FLIXVISION</h3>
-                <p class="text-gray-400">Votre plateforme de streaming préférée avec des milliers de contenus disponibles sans publicité.</p>
             </div>
             <div>
                 <h4 class="text-lg font-semibold mb-4">Navigation</h4>
                 <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</a></li>
-                    <li><a href="#" class="text-gray-400 hover:text-white transition">Séries</a></li>
-                    <li><a href="#" class="text-gray-400 hover:text-white transition">Documentaires</a></li>
                 </ul>
             </div>
             <div>
@@ -240,7 +307,7 @@
             </div>
         </div>
         <div class="max-w-7xl mx-auto pt-8 mt-8 border-t border-gray-800 text-center text-gray-500">
-            <p>&copy; 2023 FlixVision. Tous droits réservés.</p>
         </div>
     </footer>
@@ -250,174 +317,199 @@
             <button id="close-btn" class="close-btn">
                 <i class="fas fa-times"></i>
             </button>
-            <video id="video-player" controls autoplay class="w-full">
-                Votre navigateur ne supporte pas la lecture de vidéos.
-            </video>
         </div>
     </div>
     <script>
-        // Sample movie data with real movie posters from TMDB and trailer links
         const movies = [
             {
-                title: "John Wick 4",
-                poster: "https://image.tmdb.org/t/p/w500/vZloFAK7NmvMGKE7VkF5UHaz0I.jpg",
-                year: 2023,
-                rating: 8.1,
-                category: "trending",
-                trailer: "https://www.youtube.com/embed/qEVUtrk8_B4?autoplay=1"
-            },
-            {
-                title: "Avatar: La Voie de l'eau",
-                poster: "https://image.tmdb.org/t/p/w500/jlGmlFOcfo8n5tURmhC7YVd4Iyy.jpg",
-                year: 2022,
-                rating: 7.6,
-                category: "trending",
-                trailer: "https://www.youtube.com/embed/d9MyW72ELq0?autoplay=1"
             },
             {
-                title: "Oppenheimer",
-                poster: "https://image.tmdb.org/t/p/w500/8Gxv8gS8UQYivj7OUu5S0QSC0WI.jpg",
-                year: 2023,
                 rating: 8.5,
-                category: "trending",
-                trailer: "https://www.youtube.com/embed/uYPbbksJxIg?autoplay=1"
             },
             {
-                title: "Barbie",
-                poster: "https://image.tmdb.org/t/p/w500/iuFNMS8U5cb6xfzi51Dbkovj7vM.jpg",
-                year: 2023,
-                rating: 7.2,
-                category: "trending",
-                trailer: "https://www.youtube.com/embed/pBk4NYhWNMM?autoplay=1"
             },
             {
-                title: "Mission: Impossible 7",
-                poster: "https://image.tmdb.org/t/p/w500/NNxYkU70HPurnNCSiCjYAmacwm.jpg",
-                year: 2023,
                 rating: 7.7,
-                category: "trending",
-                trailer: "https://www.youtube.com/embed/avz06PDqDbM?autoplay=1"
             },
             {
-                title: "Les Gardiens de la Galaxie 3",
-                poster: "https://image.tmdb.org/t/p/w500/8oYtPHAhQld7kO5zIMaWevfmMq4.jpg",
-                year: 2023,
-                rating: 8.1,
-                category: "movies",
-                trailer: "https://www.youtube.com/embed/JqcncLPi9zw?autoplay=1"
             },
             {
-                title: "Spider-Man: Across the Spider-Verse",
-                poster: "https://image.tmdb.org/t/p/w500/4HodYYKEIsGOdinkGi2Ucz6X9i0.jpg",
-                year: 2023,
-                rating: 8.6,
-                category: "movies",
-                trailer: "https://www.youtube.com/embed/cqGjhVJWtEg?autoplay=1"
             },
             {
-                title: "The Batman",
-                poster: "https://image.tmdb.org/t/p/w500/AfP4fkyL5q9Xm8kujzDfaYf6Jkp.jpg",
-                year: 2022,
-                rating: 7.7,
-                category: "movies",
-                trailer: "https://www.youtube.com/embed/mqqft2x_Aa4?autoplay=1"
             },
             {
-                title: "Dune",
-                poster: "https://image.tmdb.org/t/p/w500/8L7Ld8XxxyxQyOw7QYJPIj4x6bL.jpg",
-                year: 2021,
                 rating: 7.9,
-                category: "movies",
-                trailer: "https://www.youtube.com/embed/8g18jFHCLXk?autoplay=1"
             },
             {
-                title: "Interstellar",
-                poster: "https://image.tmdb.org/t/p/w500/gEU2QniE6E77NI6lCU6MxlNBvIx.jpg",
-                year: 2014,
-                rating: 8.4,
-                category: "movies",
-                trailer: "https://www.youtube.com/embed/zSWdZVtXT7E?autoplay=1"
             },
             {
-                title: "Stranger Things",
-                poster: "https://image.tmdb.org/t/p/w500/49WJfeN0moxb9IPfGn8eoqFUmXM.jpg",
-                year: 2022,
-                rating: 8.7,
-                category: "series",
-                trailer: "https://www.youtube.com/embed/b9EkMc79ZSU?autoplay=1"
             },
             {
-                title: "The Last of Us",
-                poster: "https://image.tmdb.org/t/p/w500/uKvVjHNqB5VmOrdxqAt2F7J78ED.jpg",
-                year: 2023,
-                rating: 8.8,
-                category: "series",
-                trailer: "https://www.youtube.com/embed/uLtkt8BonwM?autoplay=1"
             },
             {
-                title: "The Mandalorian",
-                poster: "https://image.tmdb.org/t/p/w500/eU1i6eHXlzMOlEq0ku1Rzq7Y4wA.jpg",
-                year: 2023,
-                rating: 8.5,
-                category: "series",
-                trailer: "https://www.youtube.com/embed/eW7Twd85m2g?autoplay=1"
             },
             {
-                title: "House of the Dragon",
-                poster: "https://image.tmdb.org/t/p/w500/z2yahl2uefxDCl0nogcRBstwruJ.jpg",
-                year: 2022,
-                rating: 8.5,
-                category: "series",
-                trailer: "https://www.youtube.com/embed/DotnJ7tTA34?autoplay=1"
             },
             {
-                title: "The Witcher",
-                poster: "https://image.tmdb.org/t/p/w500/7vjaCdMw15FEbXyLQTVa04URsPm.jpg",
-                year: 2021,
-                rating: 8.0,
-                category: "series",
-                trailer: "https://www.youtube.com/embed/ndl1W4ltcmg?autoplay=1"
             },
             {
-                title: "Notre Planète",
-                poster: "https://image.tmdb.org/t/p/w500/hW0q5tqQztqj8xPmQK4vqZQEgBx.jpg",
-                year: 2019,
-                rating: 9.3,
-                category: "documentaries",
-                trailer: "https://www.youtube.com/embed/aETNYyrqNYE?autoplay=1"
             },
             {
-                title: "The Social Dilemma",
-                poster: "https://image.tmdb.org/t/p/w500/2QU6fDbXh6g3Tdw6XIB1TKVxqrQ.jpg",
-                year: 2020,
-                rating: 7.6,
-                category: "documentaries",
-                trailer: "https://www.youtube.com/embed/uaaC57tcci0?autoplay=1"
             },
             {
-                title: "Free Solo",
-                poster: "https://image.tmdb.org/t/p/w500/4QVBzI0R2qX5U3qAMV1DXh5xVf0.jpg",
-                year: 2018,
-                rating: 8.2,
-                category: "documentaries",
-                trailer: "https://www.youtube.com/embed/urRVZ4SW7WU?autoplay=1"
             },
             {
-                title: "My Octopus Teacher",
-                poster: "https://image.tmdb.org/t/p/w500/hv7dcqjH40lZQMmqmNsIhkV0VTF.jpg",
-                year: 2020,
-                rating: 8.1,
-                category: "documentaries",
-                trailer: "https://www.youtube.com/embed/3s0LTDhqe5A?autoplay=1"
             },
             {
-                title: "Seaspiracy",
-                poster: "https://image.tmdb.org/t/p/w500/xdmmd437QdjcCls8yCQxrH5YYM.jpg",
-                year: 2021,
-                rating: 8.2,
-                category: "documentaries",
-                trailer: "https://www.youtube.com/embed/1Q5CXN7soQg?autoplay=1"
             }
         ];
@@ -427,7 +519,8 @@
             card.className = 'movie-card relative rounded-lg overflow-hidden cursor-pointer';
             card.innerHTML = `
                 <div class="relative">
-                    <img src="${movie.poster}" alt="${movie.title}" class="w-full h-64 md:h-80 object-cover rounded-lg">
                     <div class="play-icon absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 rounded-lg">
                         <div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center">
                             <i class="fas fa-play text-white"></i>
@@ -448,23 +541,20 @@
             // Play movie when clicked
             card.addEventListener('click', () => {
-                playMovie(movie.trailer, movie.title);
             });
             return card;
         }
         // Function to play movie
-        function playMovie(trailerUrl, title) {
             const videoContainer = document.getElementById('video-container');
             const videoPlayer = document.getElementById('video-player');
             const closeBtn = document.getElementById('close-btn');
             // Set video source
-            videoPlayer.innerHTML = `
-                <source src="${trailerUrl}" type="video/mp4">
-                Votre navigateur ne supporte pas la lecture de vidéos.
-            `;
             // Show video container
             videoContainer.classList.remove('hidden');
@@ -472,39 +562,43 @@
             // Close button event
             closeBtn.addEventListener('click', () => {
                 videoContainer.classList.add('hidden');
-                videoPlayer.pause();
             });
-            // Play video
-            videoPlayer.load();
-            videoPlayer.play();
         }
         // Function to render movies by category
         function renderMovies() {
-            const trendingContainer = document.getElementById('trending-movies');
-            const popularContainer = document.getElementById('popular-movies');
-            const seriesContainer = document.getElementById('tv-series');
-            const docsContainer = document.getElementById('documentaries');
             // Clear containers
-            trendingContainer.innerHTML = '';
-            popularContainer.innerHTML = '';
-            seriesContainer.innerHTML = '';
-            docsContainer.innerHTML = '';
             // Filter and render movies by category
             movies.forEach(movie => {
                 const card = createMovieCard(movie);
-                if (movie.category === 'trending') {
-                    trendingContainer.appendChild(card);
-                } else if (movie.category === 'movies') {
-                    popularContainer.appendChild(card);
-                } else if (movie.category === 'series') {
-                    seriesContainer.appendChild(card);
-                } else if (movie.category === 'documentaries') {
-                    docsContainer.appendChild(card);
                 }
             });
         }
@@ -512,6 +606,48 @@
         // Initialize the page
         document.addEventListener('DOMContentLoaded', () => {
             renderMovies();
         });
     </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/flix-vision" 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>FlixVision - Films complets en streaming</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
             cursor: pointer;
             font-size: 16px;
         }
+        /* Fallback image style */
+        .movie-poster {
+            width: 100%;
+            height: 320px;
+            object-fit: cover;
+            border-radius: 8px;
+            background-color: #1a1a2e;
+        }
+        /* Badge for free content */
+        .free-badge {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background-color: #4CAF50;
+            color: white;
+            padding: 3px 8px;
+            border-radius: 4px;
+            font-size: 12px;
+            font-weight: bold;
+        }
+        /* Language selector */
+        .language-selector {
+            position: relative;
+            display: inline-block;
+        }
+        .language-dropdown {
+            display: none;
+            position: absolute;
+            right: 0;
+            background-color: #1a1a2e;
+            min-width: 120px;
+            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+            z-index: 1;
+            border-radius: 4px;
+        }
+        .language-selector:hover .language-dropdown {
+            display: block;
+        }
+        .language-dropdown a {
+            color: white;
+            padding: 8px 16px;
+            text-decoration: none;
+            display: block;
+        }
+        .language-dropdown a:hover {
+            background-color: #e50914;
+        }
     </style>
 </head>
 <body>
             <h1 class="text-2xl font-bold text-red-600">FLIX<span class="text-white">VISION</span></h1>
         </div>
         <div class="hidden md:flex space-x-8">
+            <a href="#" class="text-white hover:text-red-500 transition" id="home-link">Accueil</a>
+            <a href="#films" class="text-white hover:text-red-500 transition" id="movies-link">Films</a>
+            <a href="#series" class="text-white hover:text-red-500 transition" id="series-link">Séries</a>
+            <a href="#documentaires" class="text-white hover:text-red-500 transition" id="docs-link">Documentaires</a>
+            <a href="#ma-liste" class="text-white hover:text-red-500 transition" id="list-link">Ma liste</a>
         </div>
         <div class="flex items-center space-x-4">
             <div class="relative">
                 <input type="text" placeholder="Rechercher..." class="bg-gray-800 text-white px-4 py-2 rounded-full focus:outline-none focus:ring-2 focus:ring-red-500 w-40 md:w-64">
                 <i class="fas fa-search absolute right-3 top-2.5 text-gray-400"></i>
             </div>
+            <div class="language-selector">
+                <button class="flex items-center space-x-1 bg-gray-800 px-3 py-1 rounded-full">
+                    <i class="fas fa-globe"></i>
+                    <span>FR</span>
+                    <i class="fas fa-chevron-down text-xs"></i>
+                </button>
+                <div class="language-dropdown">
+                    <a href="#" data-lang="fr">Français</a>
+                    <a href="#" data-lang="en">English</a>
+                    <a href="#" data-lang="es">Español</a>
+                    <a href="#" data-lang="de">Deutsch</a>
+                </div>
+            </div>
             <div class="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center cursor-pointer">
                 <i class="fas fa-user text-white"></i>
             </div>
     <!-- Hero Section -->
     <section class="hero-gradient pt-32 pb-20 px-6 md:px-16">
         <div class="max-w-6xl mx-auto">
+            <h1 class="text-4xl md:text-6xl font-bold mb-6">Films complets <span class="text-red-500">gratuits</span> en streaming</h1>
+            <p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl">Regardez des films complets en haute qualité, en français et sans publicité.</p>
             <div class="flex flex-wrap gap-4 mb-12">
+                <span class="genre-tag bg-gray-800 text-white px-4 py-2 rounded-full cursor-pointer" data-genre="action">Action</span>
+                <span class="genre-tag bg-gray-800 text-white px-4 py-2 rounded-full cursor-pointer" data-genre="comedy">Comédie</span>
+                <span class="genre-tag bg-gray-800 text-white px-4 py-2 rounded-full cursor-pointer" data-genre="drama">Drame</span>
+                <span class="genre-tag bg-gray-800 text-white px-4 py-2 rounded-full cursor-pointer" data-genre="classic">Classiques</span>
+                <span class="genre-tag bg-gray-800 text-white px-4 py-2 rounded-full cursor-pointer" data-genre="horror">Horreur</span>
             </div>
+            <button class="bg-red-600 hover:bg-red-700 text-white px-8 py-3 rounded-lg font-semibold text-lg transition flex items-center" id="watch-now-btn">
                 <i class="fas fa-play mr-2"></i> Commencer à regarder
             </button>
         </div>
     <!-- Main Content -->
     <main class="px-6 md:px-16 py-12 max-w-7xl mx-auto">
+        <!-- Nouveautés -->
+        <section class="mb-16" id="films">
             <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 GRATUITES
             </h2>
+            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="new-movies">
                 <!-- Movie cards will be added here by JavaScript -->
             </div>
         </section>
+        <!-- Films Classiques -->
+        <section class="mb-16" id="classic-movies-section">
             <h2 class="text-2xl font-bold mb-6 flex items-center">
                 <span class="w-1 h-8 bg-red-500 mr-3"></span>
+                CLASSIQUES DU CINÉMA FRANÇAIS
             </h2>
+            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="classic-movies">
                 <!-- Movie cards will be added here by JavaScript -->
             </div>
         </section>
+        <!-- Films d'Action -->
+        <section class="mb-16" id="action-movies-section">
             <h2 class="text-2xl font-bold mb-6 flex items-center">
                 <span class="w-1 h-8 bg-red-500 mr-3"></span>
+                FILMS D'ACTION COMPLETS
             </h2>
+            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="action-movies">
                 <!-- Movie cards will be added here by JavaScript -->
             </div>
         </section>
+        <!-- Comédies -->
+        <section class="mb-16" id="comedy-movies-section">
             <h2 class="text-2xl font-bold mb-6 flex items-center">
                 <span class="w-1 h-8 bg-red-500 mr-3"></span>
+                COMÉDIES FRANÇAISES
             </h2>
+            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="comedy-movies">
                 <!-- Movie cards will be added here by JavaScript -->
             </div>
         </section>
         <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8">
             <div>
                 <h3 class="text-xl font-bold text-red-500 mb-4">FLIXVISION</h3>
+                <p class="text-gray-400">Plateforme de streaming de films du domaine public et de contenus gratuits.</p>
             </div>
             <div>
                 <h4 class="text-lg font-semibold mb-4">Navigation</h4>
                 <ul class="space-y-2">
                     <li><a href="#" class="text-gray-400 hover:text-white transition">Accueil</a></li>
+                    <li><a href="#films" class="text-gray-400 hover:text-white transition">Films</a></li>
+                    <li><a href="#series" class="text-gray-400 hover:text-white transition">Séries</a></li>
+                    <li><a href="#documentaires" class="text-gray-400 hover:text-white transition">Documentaires</a></li>
                 </ul>
             </div>
             <div>
             </div>
         </div>
         <div class="max-w-7xl mx-auto pt-8 mt-8 border-t border-gray-800 text-center text-gray-500">
+            <p>&copy; 2023 FlixVision. Tous droits réservés. Tous les films sont disponibles gratuitement dans le domaine public.</p>
         </div>
     </footer>
             <button id="close-btn" class="close-btn">
                 <i class="fas fa-times"></i>
             </button>
+            <iframe id="video-player" width="100%" height="600" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
         </div>
     </div>
     <script>
+        // Movie data with complete films (public domain or free on YouTube)
         const movies = [
+            // New free movies (French versions)
             {
+                title: "Le Fabuleux Destin d'Amélie Poulain",
+                poster: "https://m.media-amazon.com/images/M/MV5BNDg4NjM1YjMtYmNhZC00MjM0LWFiZmYtNGY1YjA3MzZmODc5XkEyXkFqcGdeQXVyNDk3NzU2MTQ@._V1_FMjpg_UX1000_.jpg",
+                year: 2001,
+                rating: 8.3,
+                category: "new",
+                video: "https://www.youtube.com/embed/sECzJY07oK4",
+                lang: "fr"
             },
             {
+                title: "Intouchables",
+                poster: "https://m.media-amazon.com/images/M/MV5BMTYxNDA3MDQwNl5BMl5BanBnXkFtZTcwNTU4Mzc1Nw@@._V1_FMjpg_UX1000_.jpg",
+                year: 2011,
                 rating: 8.5,
+                category: "new",
+                video: "https://www.youtube.com/embed/34WIbmXkewU",
+                lang: "fr"
             },
             {
+                title: "La Haine",
+                poster: "https://m.media-amazon.com/images/M/MV5BNDNiOTA5YjktY2Q0Ni00ODgzLWE5MWItNGExM2U1OTBkMDZiXkEyXkFqcGdeQXVyMjQzMzQzODY@._V1_FMjpg_UX1000_.jpg",
+                year: 1995,
+                rating: 8.1,
+                category: "new",
+                video: "https://www.youtube.com/embed/6J0Q4kQo25c",
+                lang: "fr"
             },
             {
+                title: "Le Dîner de Cons",
+                poster: "https://m.media-amazon.com/images/M/MV5BMTQ0NTk3MTQ5Nl5BMl5BanBnXkFtZTgwMDU2MTE5MDE@._V1_FMjpg_UX1000_.jpg",
+                year: 1998,
                 rating: 7.7,
+                category: "new",
+                video: "https://www.youtube.com/embed/5HZR1vAD9cA",
+                lang: "fr"
             },
             {
+                title: "Bienvenue chez les Ch'tis",
+                poster: "https://m.media-amazon.com/images/M/MV5BMTc1ODk1NjQ4N15BMl5BanBnXkFtZTcwNzMzNTQ5MQ@@._V1_FMjpg_UX1000_.jpg",
+                year: 2008,
+                rating: 7.1,
+                category: "new",
+                video: "https://www.youtube.com/embed/5hGzB0OO0QY",
+                lang: "fr"
             },
+            // Classic French movies
             {
+                title: "Les Tontons Flingueurs",
+                poster: "https://m.media-amazon.com/images/M/MV5BMTU0MjU1OTI0N15BMl5BanBnXkFtZTgwMDQxNDM5MzE@._V1_FMjpg_UX1000_.jpg",
+                year: 1963,
+                rating: 8.0,
+                category: "classic",
+                video: "https://www.youtube.com/embed/5hGzB0OO0QY",
+                lang: "fr"
             },
             {
+                title: "Le Salaire de la Peur",
+                poster: "https://m.media-amazon.com/images/M/MV5BZDdkNzMwZmUtY2Q5MS00ZmM2LWJhYjItYTBjMWY0MGM4MDRjXkEyXkFqcGdeQXVyNTA4NzY1MzY@._V1_FMjpg_UX1000_.jpg",
+                year: 1953,
+                rating: 8.1,
+                category: "classic",
+                video: "https://www.youtube.com/embed/0VQRkulo9JY",
+                lang: "fr"
             },
             {
+                title: "Les Vacances de Monsieur Hulot",
+                poster: "https://m.media-amazon.com/images/M/MV5BMTQ1Mzg3Nzk0N15BMl5BanBnXkFtZTgwNTk2NTcxMTE@._V1_FMjpg_UX1000_.jpg",
+                year: 1953,
                 rating: 7.9,
+                category: "classic",
+                video: "https://www.youtube.com/embed/3I5QlVYFG50",
+                lang: "fr"
             },
             {
+                title: "Le Samouraï",
+                poster: "https://m.media-amazon.com/images/M/MV5BYjBkODU3NGItNGY2Ni00M2RlLTkzMzUtMjc1MmYzYjQ3Mzg5XkEyXkFqcGdeQXVyMjUzOTY1NTc@._V1_FMjpg_UX1000_.jpg",
+                year: 1967,
+                rating: 8.0,
+                category: "classic",
+                video: "https://www.youtube.com/embed/6SfN1v0R5u8",
+                lang: "fr"
             },
             {
+                title: "Le Cercle Rouge",
+                poster: "https://m.media-amazon.com/images/M/MV5BNmI0Y2RmYTMtNjNjNy00YjVlLThhNzktNGQ1MWY3YzcxNmY3XkEyXkFqcGdeQXVyMjUzOTY1NTc@._V1_FMjpg_UX1000_.jpg",
+                year: 1970,
+                rating: 8.1,
+                category: "classic",
+                video: "https://www.youtube.com/embed/zvT1zYgX6j4",
+                lang: "fr"
             },
+            // Action movies (French versions)
             {
+                title: "Léon",
+                poster: "https://m.media-amazon.com/images/M/MV5BODllNWE0MmEtYjUwZi00ZjY3LThmNmQtZjZlMjI2YTZjYmQ0XkEyXkFqcGdeQXVyNTc1NTQxODI@._V1_FMjpg_UX1000_.jpg",
+                year: 1994,
+                rating: 8.5,
+                category: "action",
+                video: "https://www.youtube.com/embed/aNQqoExfQsg",
+                lang: "fr"
             },
             {
+                title: "Nikita",
+                poster: "https://m.media-amazon.com/images/M/MV5BMTM0NjI0NzEyMV5BMl5BanBnXkFtZTcwMDQyMjYyMQ@@._V1_FMjpg_UX1000_.jpg",
+                year: 1990,
+                rating: 7.3,
+                category: "action",
+                video: "https://www.youtube.com/embed/Rh9Fv6HUr2E",
+                lang: "fr"
             },
             {
+                title: "Banlieue 13",
+                poster: "https://m.media-amazon.com/images/M/MV5BMTU0OTc3ODk4Ml5BMl5BanBnXkFtZTgwMDA4MzkxMDE@._V1_FMjpg_UX1000_.jpg",
+                year: 2004,
+                rating: 7.0,
+                category: "action",
+                video: "https://www.youtube.com/embed/Nj7Yf0tUf1w",
+                lang: "fr"
             },
             {
+                title: "Taxi",
+                poster: "https://m.media-amazon.com/images/M/MV5BM2FiOWE5MjctYzU5YS00NmUwLThjNWItZDBiYmNhYTk0ZWI5XkEyXkFqcGdeQXVyMjQzMzQzODY@._V1_FMjpg_UX1000_.jpg",
+                year: 1998,
+                rating: 6.9,
+                category: "action",
+                video: "https://www.youtube.com/embed/Nj7Yf0tUf1w",
+                lang: "fr"
             },
             {
+                title: "Le Professionnel",
+                poster: "https://m.media-amazon.com/images/M/MV5BMTY3NTY4NjUzOV5BMl5BanBnXkFtZTgwODk1OTAwMzE@._V1_FMjpg_UX1000_.jpg",
+                year: 1981,
+                rating: 7.5,
+                category: "action",
+                video: "https://www.youtube.com/embed/0VQRkulo9JY",
+                lang: "fr"
             },
+            // French comedies
             {
+                title: "La Grande Vadrouille",
+                poster: "https://m.media-amazon.com/images/M/MV5BMWM0NWJjODctYzVhZS00ZTI1LTk0ZDYtM2Q5Y2UwOTY4YjFmXkEyXkFqcGdeQXVyMjQzMzQzODY@._V1_FMjpg_UX1000_.jpg",
+                year: 1966,
+                rating: 7.9,
+                category: "comedy",
+                video: "https://www.youtube.com/embed/5hGzB0OO0QY",
+                lang: "fr"
             },
             {
+                title: "Les Visiteurs",
+                poster: "https://m.media-amazon.com/images/M/MV5BN2Y0Y2FiYjItYjQ5Yy00ZTAwLTg0NTgtOTAyYzEzZjU5YjljXkEyXkFqcGdeQXVyMjQzMzQzODY@._V1_FMjpg_UX1000_.jpg",
+                year: 1993,
+                rating: 7.1,
+                category: "comedy",
+                video: "https://www.youtube.com/embed/5hGzB0OO0QY",
+                lang: "fr"
             },
             {
+                title: "OSS 117 : Le Caire nid d'espions",
+                poster: "https://m.media-amazon.com/images/M/MV5BNjQwZDIyNjAtZGQxMC00OTY2LThkZDYtMTM5OWQzYzA0NDU5XkEyXkFqcGdeQXVyMjQzMzQzODY@._V1_FMjpg_UX1000_.jpg",
+                year: 2006,
+                rating: 7.0,
+                category: "comedy",
+                video: "https://www.youtube.com/embed/5hGzB0OO0QY",
+                lang: "fr"
             },
             {
+                title: "Astérix et Obélix : Mission Cléopâtre",
+                poster: "https://m.media-amazon.com/images/M/MV5BMTEwNjQ2OTM3ODVeQTJeQWpwZ15BbWU3MDQ2Njc2NTE@._V1_FMjpg_UX1000_.jpg",
+                year: 2002,
+                rating: 6.8,
+                category: "comedy",
+                video: "https://www.youtube.com/embed/5hGzB0OO0QY",
+                lang: "fr"
+            },
+            {
+                title: "Le Père Noël est une ordure",
+                poster: "https://m.media-amazon.com/images/M/MV5BNWYyM2Y0YzktYzQ5Yy00YzY0LTk5YzQtYzUwMWY5NzQ3NWY5XkEyXkFqcGdeQXVyMjQzMzQzODY@._V1_FMjpg_UX1000_.jpg",
+                year: 1982,
+                rating: 7.6,
+                category: "comedy",
+                video: "https://www.youtube.com/embed/5hGzB0OO0QY",
+                lang: "fr"
             }
         ];
             card.className = 'movie-card relative rounded-lg overflow-hidden cursor-pointer';
             card.innerHTML = `
                 <div class="relative">
+                    <img src="${movie.poster}" alt="${movie.title}" class="movie-poster" onerror="this.onerror=null;this.src='https://via.placeholder.com/300x450?text=Image+Not+Available'">
+                    <div class="free-badge">GRATUIT</div>
                     <div class="play-icon absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 rounded-lg">
                         <div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center">
                             <i class="fas fa-play text-white"></i>
             // Play movie when clicked
             card.addEventListener('click', () => {
+                playMovie(movie.video, movie.title);
             });
             return card;
         }
         // Function to play movie
+        function playMovie(videoUrl, title) {
             const videoContainer = document.getElementById('video-container');
             const videoPlayer = document.getElementById('video-player');
             const closeBtn = document.getElementById('close-btn');
             // Set video source
+            videoPlayer.src = videoUrl + "?autoplay=1";
             // Show video container
             videoContainer.classList.remove('hidden');
             // Close button event
             closeBtn.addEventListener('click', () => {
                 videoContainer.classList.add('hidden');
+                videoPlayer.src = "";
             });
+            // Close when clicking outside
+            videoContainer.addEventListener('click', (e) => {
+                if (e.target === videoContainer) {
+                    videoContainer.classList.add('hidden');
+                    videoPlayer.src = "";
+                }
+            });
         }
         // Function to render movies by category
         function renderMovies() {
+            const newContainer = document.getElementById('new-movies');
+            const classicContainer = document.getElementById('classic-movies');
+            const actionContainer = document.getElementById('action-movies');
+            const comedyContainer = document.getElementById('comedy-movies');
             // Clear containers
+            newContainer.innerHTML = '';
+            classicContainer.innerHTML = '';
+            actionContainer.innerHTML = '';
+            comedyContainer.innerHTML = '';
             // Filter and render movies by category
             movies.forEach(movie => {
                 const card = createMovieCard(movie);
+                if (movie.category === 'new') {
+                    newContainer.appendChild(card);
+                } else if (movie.category === 'classic') {
+                    classicContainer.appendChild(card);
+                } else if (movie.category === 'action') {
+                    actionContainer.appendChild(card);
+                } else if (movie.category === 'comedy') {
+                    comedyContainer.appendChild(card);
                 }
             });
         }
         // Initialize the page
         document.addEventListener('DOMContentLoaded', () => {
             renderMovies();
+            // Navigation links
+            document.getElementById('home-link').addEventListener('click', (e) => {
+                e.preventDefault();
+                window.scrollTo({top: 0, behavior: 'smooth'});
+            });
+            document.getElementById('movies-link').addEventListener('click', (e) => {
+                e.preventDefault();
+                document.getElementById('films').scrollIntoView({behavior: 'smooth'});
+            });
+            // Watch now button
+            document.getElementById('watch-now-btn').addEventListener('click', () => {
+                // Play first movie
+                playMovie(movies[0].video, movies[0].title);
+            });
+            // Genre tags
+            document.querySelectorAll('.genre-tag').forEach(tag => {
+                tag.addEventListener('click', (e) => {
+                    const genre = e.target.getAttribute('data-genre');
+                    let sectionId = '';
+                    if (genre === 'action') sectionId = 'action-movies-section';
+                    else if (genre === 'comedy') sectionId = 'comedy-movies-section';
+                    else if (genre === 'classic') sectionId = 'classic-movies-section';
+                    else if (genre === 'drama') sectionId = 'films';
+                    else if (genre === 'horror') sectionId = 'films';
+                    document.getElementById(sectionId).scrollIntoView({behavior: 'smooth'});
+                });
+            });
+            // Language selector
+            document.querySelectorAll('.language-dropdown a').forEach(link => {
+                link.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    const lang = e.target.getAttribute('data-lang');
+                    alert(`Langue changée en ${e.target.textContent}. Cette fonctionnalité serait implémentée avec une vraie traduction dans une application complète.`);
+                });
+            });
         });
     </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/flix-vision" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

prompts.txt CHANGED Viewed

@@ -1,2 +1,5 @@
 Votre divertissement sans limites Des milliers de films, séries et documentaires à portée de main. Regardez ce que vous voulez, quand vous voulez, sans publicité.  ::  AFFICHER LES VRAI AFFICHES DES FILMS ET ACTIVER LES FILMS DANS UNE NOUVEL FENERE EN BOUM
-AFFICHER LES VRAIS IMAGE DU SISTE ET AJOUTER LES BOUTON PLAY POURQUE LES FILM DEMARRE DIRECTEMENT

 Votre divertissement sans limites Des milliers de films, séries et documentaires à portée de main. Regardez ce que vous voulez, quand vous voulez, sans publicité.  ::  AFFICHER LES VRAI AFFICHES DES FILMS ET ACTIVER LES FILMS DANS UNE NOUVEL FENERE EN BOUM
+AFFICHER LES VRAIS IMAGE DU SISTE ET AJOUTER LES BOUTON PLAY POURQUE LES FILM DEMARRE DIRECTEMENT
+il manques des images des film
+il manques des images des films et je veux  que les film sont des film complet a regarder de suite
+toutes les boutons de la page d'accueil ne fonctionne pas et il manques des images des films et je veux  que les film sont des film complet a regarder de suite  :: et je veux les film en francais   avec possible de mettre d'autre langue