Spaces:

docto41
/

cin-base

Running

App Files Files Community

docto41 commited on May 12, 2025

Commit

42adafb

verified ·

1 Parent(s): 241f40e

Add 2 files

Browse files

Files changed (2) hide show

index.html +279 -436
prompts.txt +4 -1

index.html CHANGED Viewed

@@ -3,15 +3,15 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CinéBase - Plateformes de 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>
-        .streaming-card:hover {
             transform: translateY(-5px);
             box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
         }
-        .streaming-card {
             transition: all 0.3s ease;
         }
         .loading-spinner {
@@ -22,6 +22,20 @@
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
     </style>
 </head>
 <body class="bg-gray-900 text-gray-100 min-h-screen">
@@ -29,15 +43,14 @@
     <header class="bg-gray-800 shadow-lg sticky top-0 z-50">
         <div class="container mx-auto px-4 py-4 flex justify-between items-center">
             <div class="flex items-center">
-                <i class="fas fa-film text-yellow-400 text-3xl mr-3"></i>
-                <h1 class="text-2xl font-bold bg-gradient-to-r from-yellow-400 to-red-500 bg-clip-text text-transparent">CinéBase</h1>
             </div>
             <div class="hidden md:flex space-x-4">
-                <a href="#netflix" class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded-full">Netflix</a>
-                <a href="#hbo" class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded-full">HBO Max</a>
-                <a href="#disney" class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded-full">Disney+</a>
-                <a href="#apple" class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded-full">Apple TV</a>
             </div>
         </div>
     </header>
@@ -46,10 +59,9 @@
     <main class="container mx-auto px-4 py-8">
         <!-- Hero Section -->
         <section class="mb-12 text-center">
-            <h2 class="text-3xl md:text-4xl font-bold mb-4">Trouvez où regarder vos films et séries préférés</h2>
             <p class="text-gray-400 max-w-2xl mx-auto mb-8">
-                Accédez à des milliers de titres disponibles sur toutes les plateformes de streaming.
-                Comparez les services et trouvez les meilleures offres.
             </p>
             <div class="max-w-xl mx-auto relative">
@@ -57,270 +69,253 @@
                     <i class="fas fa-search text-gray-400"></i>
                 </div>
                 <input type="text" id="searchInput" placeholder="Rechercher un film, une série..."
-                    class="w-full pl-10 pr-4 py-3 rounded-full bg-gray-700 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-yellow-500">
             </div>
         </section>
-        <!-- Streaming Services Section -->
-        <section class="mb-12">
-            <h2 class="text-2xl font-bold mb-6">Plateformes de Streaming</h2>
-            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
-                <!-- Netflix -->
-                <div id="netflix" class="streaming-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer" onclick="showStreamingContent('netflix')">
-                    <div class="relative pt-[100%] bg-red-600 flex items-center justify-center">
-                        <i class="fab fa-netflix text-5xl absolute"></i>
                     </div>
-                    <div class="p-4">
-                        <h3 class="font-bold text-center">Netflix</h3>
-                        <div class="flex justify-center mt-2">
-                            <span class="text-sm bg-gray-700 px-2 py-1 rounded">À partir de 8,99€/mois</span>
                         </div>
                     </div>
                 </div>
-                <!-- HBO Max -->
-                <div id="hbo" class="streaming-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer" onclick="showStreamingContent('hbo')">
-                    <div class="relative pt-[100%] bg-purple-600 flex items-center justify-center">
-                        <i class="fab fa-hbo text-5xl absolute"></i>
                     </div>
-                    <div class="p-4">
-                        <h3 class="font-bold text-center">HBO Max</h3>
-                        <div class="flex justify-center mt-2">
-                            <span class="text-sm bg-gray-700 px-2 py-1 rounded">À partir de 9,99€/mois</span>
                         </div>
                     </div>
                 </div>
-                <!-- Disney+ -->
-                <div id="disney" class="streaming-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer" onclick="showStreamingContent('disney')">
-                    <div class="relative pt-[100%] bg-blue-600 flex items-center justify-center">
-                        <i class="fab fa-disney text-5xl absolute"></i>
                     </div>
-                    <div class="p-4">
-                        <h3 class="font-bold text-center">Disney+</h3>
-                        <div class="flex justify-center mt-2">
-                            <span class="text-sm bg-gray-700 px-2 py-1 rounded">À partir de 8,99€/mois</span>
                         </div>
                     </div>
                 </div>
-                <!-- Apple TV+ -->
-                <div id="apple" class="streaming-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer" onclick="showStreamingContent('apple')">
-                    <div class="relative pt-[100%] bg-gray-100 flex items-center justify-center">
-                        <i class="fab fa-apple text-5xl absolute text-gray-900"></i>
                     </div>
-                    <div class="p-4">
-                        <h3 class="font-bold text-center">Apple TV+</h3>
-                        <div class="flex justify-center mt-2">
-                            <span class="text-sm bg-gray-700 px-2 py-1 rounded">À partir de 6,99€/mois</span>
                         </div>
                     </div>
                 </div>
-                <!-- Amazon Prime Video -->
-                <div class="streaming-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer" onclick="showStreamingContent('amazon')">
-                    <div class="relative pt-[100%] bg-blue-400 flex items-center justify-center">
-                        <i class="fab fa-amazon text-5xl absolute"></i>
                     </div>
-                    <div class="p-4">
-                        <h3 class="font-bold text-center">Prime Video</h3>
-                        <div class="flex justify-center mt-2">
-                            <span class="text-sm bg-gray-700 px-2 py-1 rounded">À partir de 5,99€/mois</span>
                         </div>
                     </div>
                 </div>
-                <!-- Paramount+ -->
-                <div class="streaming-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer" onclick="showStreamingContent('paramount')">
-                    <div class="relative pt-[100%] bg-blue-700 flex items-center justify-center">
-                        <i class="fas fa-peacock text-5xl absolute"></i>
                     </div>
-                    <div class="p-4">
-                        <h3 class="font-bold text-center">Paramount+</h3>
-                        <div class="flex justify-center mt-2">
-                            <span class="text-sm bg-gray-700 px-2 py-1 rounded">À partir de 7,99€/mois</span>
                         </div>
                     </div>
                 </div>
-                <!-- Canal+ -->
-                <div class="streaming-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer" onclick="showStreamingContent('canal')">
-                    <div class="relative pt-[100%] bg-red-700 flex items-center justify-center">
-                        <i class="fas fa-tv text-5xl absolute"></i>
                     </div>
-                    <div class="p-4">
-                        <h3 class="font-bold text-center">Canal+</h3>
-                        <div class="flex justify-center mt-2">
-                            <span class="text-sm bg-gray-700 px-2 py-1 rounded">À partir de 19,99€/mois</span>
                         </div>
                     </div>
                 </div>
-                <!-- OCS -->
-                <div class="streaming-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer" onclick="showStreamingContent('ocs')">
-                    <div class="relative pt-[100%] bg-green-600 flex items-center justify-center">
-                        <i class="fas fa-play text-5xl absolute"></i>
                     </div>
-                    <div class="p-4">
-                        <h3 class="font-bold text-center">OCS</h3>
-                        <div class="flex justify-center mt-2">
-                            <span class="text-sm bg-gray-700 px-2 py-1 rounded">À partir de 9,99€/mois</span>
                         </div>
                     </div>
                 </div>
-                <!-- Salto -->
-                <div class="streaming-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer" onclick="showStreamingContent('salto')">
-                    <div class="relative pt-[100%] bg-purple-800 flex items-center justify-center">
-                        <i class="fas fa-play-circle text-5xl absolute"></i>
                     </div>
-                    <div class="p-4">
-                        <h3 class="font-bold text-center">Salto</h3>
-                        <div class="flex justify-center mt-2">
-                            <span class="text-sm bg-gray-700 px-2 py-1 rounded">À partir de 6,99€/mois</span>
                         </div>
                     </div>
                 </div>
-                <!-- Crunchyroll -->
-                <div class="streaming-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer" onclick="showStreamingContent('crunchyroll')">
-                    <div class="relative pt-[100%] bg-orange-500 flex items-center justify-center">
-                        <i class="fas fa-play text-5xl absolute"></i>
                     </div>
-                    <div class="p-4">
-                        <h3 class="font-bold text-center">Crunchyroll</h3>
-                        <div class="flex justify-center mt-2">
-                            <span class="text-sm bg-gray-700 px-2 py-1 rounded">À partir de 4,99€/mois</span>
                         </div>
                     </div>
                 </div>
             </div>
         </section>
-        <!-- Content Section (Hidden by default) -->
-        <section id="contentSection" class="hidden mb-12">
-            <div class="flex justify-between items-center mb-6">
-                <h2 id="streamingTitle" class="text-2xl font-bold"></h2>
-                <button onclick="hideStreamingContent()" class="text-gray-400 hover:text-white">
-                    <i class="fas fa-times text-2xl"></i>
-                </button>
-            </div>
-            <div id="streamingInfo" class="bg-gray-800 rounded-lg p-6 mb-6">
-                <!-- Info will be loaded here -->
-            </div>
-            <div>
-                <h3 class="text-xl font-bold mb-4">Contenu populaire</h3>
-                <div id="streamingContent" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
-                    <!-- Content will be loaded here -->
-                </div>
-            </div>
-        </section>
-        <!-- Free Options Section -->
-        <section class="mb-12">
-            <h2 class="text-2xl font-bold mb-6">Options gratuites</h2>
-            <div class="bg-gray-800 rounded-lg p-6">
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                    <!-- Pluto TV -->
-                    <div class="flex items-start">
-                        <div class="bg-purple-600 p-3 rounded-lg mr-4">
                             <i class="fas fa-tv text-2xl"></i>
                         </div>
-                        <div>
-                            <h3 class="font-bold text-lg mb-2">Pluto TV</h3>
-                            <p class="text-gray-400 mb-3">Service de streaming gratuit avec chaînes thématiques et catalogue VOD.</p>
-                            <a href="https://pluto.tv" target="_blank" class="inline-block px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded font-medium">
-                                Accéder gratuitement
-                            </a>
-                        </div>
                     </div>
-                    <!-- YouTube (Films gratuits) -->
-                    <div class="flex items-start">
-                        <div class="bg-red-600 p-3 rounded-lg mr-4">
-                            <i class="fab fa-youtube text-2xl"></i>
-                        </div>
-                        <div>
-                            <h3 class="font-bold text-lg mb-2">YouTube Films Gratuits</h3>
-                            <p class="text-gray-400 mb-3">Collection de films et séries disponibles gratuitement avec publicités.</p>
-                            <a href="https://www.youtube.com/channel/UCySPO6E0tdJ3Lw8KZle7WJQ" target="_blank" class="inline-block px-4 py-2 bg-red-600 hover:bg-red-700 rounded font-medium">
-                                Accéder gratuitement
-                            </a>
-                        </div>
                     </div>
-                    <!-- Tubi -->
-                    <div class="flex items-start">
-                        <div class="bg-blue-600 p-3 rounded-lg mr-4">
                             <i class="fas fa-film text-2xl"></i>
                         </div>
-                        <div>
-                            <h3 class="font-bold text-lg mb-2">Tubi</h3>
-                            <p class="text-gray-400 mb-3">Grand catalogue de films et séries en streaming gratuit avec publicités.</p>
-                            <a href="https://www.tubi.tv/" target="_blank" class="inline-block px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded font-medium">
-                                Accéder gratuitement
-                            </a>
-                        </div>
                     </div>
-                    <!-- ARTE -->
-                    <div class="flex items-start">
-                        <div class="bg-green-600 p-3 rounded-lg mr-4">
-                            <i class="fas fa-play-circle text-2xl"></i>
-                        </div>
-                        <div>
-                            <h3 class="font-bold text-lg mb-2">ARTE</h3>
-                            <p class="text-gray-400 mb-3">Documentaires, films d'auteur et séries européennes en streaming gratuit.</p>
-                            <a href="https://www.arte.tv/fr/" target="_blank" class="inline-block px-4 py-2 bg-green-600 hover:bg-green-700 rounded font-medium">
-                                Accéder gratuitement
-                            </a>
-                        </div>
                     </div>
                 </div>
-            </div>
-        </section>
-        <!-- How to Watch Section -->
-        <section class="mb-12">
-            <h2 class="text-2xl font-bold mb-6">Comment regarder gratuitement ?</h2>
-            <div class="bg-gray-800 rounded-lg p-6">
-                <div class="grid md:grid-cols-3 gap-6">
-                    <div class="bg-gray-700 p-4 rounded-lg">
-                        <div class="text-yellow-400 text-2xl mb-3">
-                            <i class="fas fa-gift"></i>
-                        </div>
-                        <h3 class="font-bold mb-2">Essais gratuits</h3>
-                        <p class="text-gray-400 text-sm">
-                            La plupart des plateformes offrent des périodes d'essai gratuites (7 à 30 jours).
-                            Annulez avant la fin pour ne pas payer.
-                        </p>
-                    </div>
-                    <div class="bg-gray-700 p-4 rounded-lg">
-                        <div class="text-yellow-400 text-2xl mb-3">
-                            <i class="fas fa-mobile-alt"></i>
                         </div>
-                        <h3 class="font-bold mb-2">Offres opérateurs</h3>
-                        <p class="text-gray-400 text-sm">
-                            Votre opérateur mobile ou internet peut inclure des abonnements gratuits
-                            (ex: Disney+ avec Orange, Netflix avec SFR).
-                        </p>
                     </div>
-                    <div class="bg-gray-700 p-4 rounded-lg">
-                        <div class="text-yellow-400 text-2xl mb-3">
-                            <i class="fas fa-ticket-alt"></i>
-                        </div>
-                        <h3 class="font-bold mb-2">Promotions</h3>
-                        <p class="text-gray-400 text-sm">
-                            Surveillez les offres promotionnelles (3 mois gratuits, réductions étudiantes, etc.)
-                            sur les sites des plateformes.
-                        </p>
                     </div>
                 </div>
             </div>
@@ -332,260 +327,106 @@
         <div class="container mx-auto px-4">
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                 <div>
-                    <h3 class="text-lg font-bold mb-4">CinéBase</h3>
                     <p class="text-gray-400 text-sm">
-                        Votre guide pour trouver le meilleur contenu streaming.
-                        Nous comparons les plateformes pour vous aider à choisir.
                     </p>
                 </div>
                 <div>
-                    <h3 class="text-lg font-bold mb-4">Liens utiles</h3>
                     <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">Comparatif des prix</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">Nouveautés streaming</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">Essais gratuits</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">FAQ</a></li>
                     </ul>
                 </div>
                 <div>
-                    <h3 class="text-lg font-bold mb-4">Contact</h3>
                     <ul class="space-y-2">
-                        <li class="text-gray-400 text-sm">contact@cinebase.com</li>
-                        <li class="flex space-x-4 mt-4">
-                            <a href="#" class="text-gray-400 hover:text-yellow-400"><i class="fab fa-facebook-f"></i></a>
-                            <a href="#" class="text-gray-400 hover:text-yellow-400"><i class="fab fa-twitter"></i></a>
-                            <a href="#" class="text-gray-400 hover:text-yellow-400"><i class="fab fa-instagram"></i></a>
-                        </li>
                     </ul>
                 </div>
             </div>
             <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400 text-sm">
-                <p>© 2023 CinéBase. Ce site ne propose pas de contenu piraté, seulement des informations sur le streaming légal.</p>
             </div>
         </div>
     </footer>
     <script>
-        // Sample data for streaming platforms
-        const streamingData = {
-            netflix: {
-                name: "Netflix",
-                color: "bg-red-600",
-                icon: "fab fa-netflix",
-                price: "8,99€ - 17,99€/mois",
-                description: "Le leader du streaming avec un vaste catalogue de films, séries et documentaires originaux.",
-                freeTrial: "30 jours gratuits",
-                content: [
-                    {title: "Stranger Things", year: 2022, rating: 8.7, image: "https://image.tmdb.org/t/p/w500/49WJfeN0moxb9IPfGn8AIqMGskD.jpg"},
-                    {title: "The Witcher", year: 2021, rating: 8.2, image: "https://image.tmdb.org/t/p/w500/7vjaCdMw15FEbXyLQTVa04URsPm.jpg"},
-                    {title: "Squid Game", year: 2021, rating: 8.3, image: "https://image.tmdb.org/t/p/w500/dDlEmu3EZ0Pgg93K2SVNLCjCSvE.jpg"},
-                    {title: "The Crown", year: 2020, rating: 8.7, image: "https://image.tmdb.org/t/p/w500/jJ7WhOPkdVbQq0EtZJtCK1Lp3VU.jpg"},
-                    {title: "Ozark", year: 2022, rating: 8.4, image: "https://image.tmdb.org/t/p/w500/oyR3F6d0X0uvs0BoQjQO3LJsNlE.jpg"}
-                ]
-            },
-            hbo: {
-                name: "HBO Max",
-                color: "bg-purple-600",
-                icon: "fab fa-hbo",
-                price: "9,99€/mois",
-                description: "Accès à tout le catalogue HBO incluant séries primées, films blockbusters et exclusivités.",
-                freeTrial: "7 jours gratuits",
-                content: [
-                    {title: "Game of Thrones", year: 2019, rating: 8.9, image: "https://image.tmdb.org/t/p/w500/u3bZgnGQ9T01sWNhyveQz0wH0Hl.jpg"},
-                    {title: "House of the Dragon", year: 2022, rating: 8.8, image: "https://image.tmdb.org/t/p/w500/z2yahl2uefxDCl0nogcRBstwruJ.jpg"},
-                    {title: "The Last of Us", year: 2023, rating: 8.9, image: "https://image.tmdb.org/t/p/w500/uKvVjHNqB5VmOrdxqAt2F7J78ED.jpg"},
-                    {title: "Succession", year: 2023, rating: 8.8, image: "https://image.tmdb.org/t/p/w500/dfWZ3qF5o2PebssgUqLv69JBRYX.jpg"},
-                    {title: "Euphoria", year: 2022, rating: 8.4, image: "https://image.tmdb.org/t/p/w500/jtnfNzqZwN4E32FGGxx1YZaBwwf.jpg"}
-                ]
-            },
-            disney: {
-                name: "Disney+",
-                color: "bg-blue-600",
-                icon: "fab fa-disney",
-                price: "8,99€/mois ou 89,90€/an",
-                description: "Le meilleur de Disney, Pixar, Marvel, Star Wars, National Geographic et Star (séries adultes).",
-                freeTrial: "7 jours gratuits",
-                content: [
-                    {title: "The Mandalorian", year: 2023, rating: 8.5, image: "https://image.tmdb.org/t/p/w500/eU1i6eHXlzMOlEq0ku1Rzq7Y4wA.jpg"},
-                    {title: "Loki", year: 2023, rating: 8.2, image: "https://image.tmdb.org/t/p/w500/voHUmluYmKyleFkTu3lOXQG702u.jpg"},
-                    {title: "Andor", year: 2022, rating: 8.4, image: "https://image.tmdb.org/t/p/w500/59SVNwLfoBFBO11HkxiXj6i4GLn.jpg"},
-                    {title: "The Bear", year: 2023, rating: 8.6, image: "https://image.tmdb.org/t/p/w500/9f4nyON6ujcdLgL7oSW0KVKVxiO.jpg"},
-                    {title: "Only Murders in the Building", year: 2023, rating: 8.1, image: "https://image.tmdb.org/t/p/w500/29r1z0EFWrJEYNmRhXQFdAIWtJq.jpg"}
-                ]
-            },
-            apple: {
-                name: "Apple TV+",
-                color: "bg-gray-100",
-                icon: "fab fa-apple",
-                price: "6,99€/mois",
-                description: "Plateforme d'Apple avec des productions originales de haute qualité et un catalogue en croissance.",
-                freeTrial: "7 jours gratuits (1 an avec achat d'un appareil Apple)",
-                content: [
-                    {title: "Ted Lasso", year: 2023, rating: 8.8, image: "https://image.tmdb.org/t/p/w500/1gWu1jqQbtq1kU5VZVjX9hzs5QY.jpg"},
-                    {title: "Severance", year: 2022, rating: 8.7, image: "https://image.tmdb.org/t/p/w500/4nNZ5CHZkUyAG4hQHnClNvH1K4D.jpg"},
-                    {title: "The Morning Show", year: 2021, rating: 8.1, image: "https://image.tmdb.org/t/p/w500/5qyNW03dYI4jQkUWJltQToAfyv.jpg"},
-                    {title: "Foundation", year: 2023, rating: 7.6, image: "https://image.tmdb.org/t/p/w500/5M1zPXdIY1z0FohxQHXq1QYSzXK.jpg"},
-                    {title: "Slow Horses", year: 2022, rating: 7.7, image: "https://image.tmdb.org/t/p/w500/iiD1pf7qTGZqIqC5ShDPi67O95Z.jpg"}
-                ]
-            },
-            amazon: {
-                name: "Amazon Prime Video",
-                color: "bg-blue-400",
-                icon: "fab fa-amazon",
-                price: "5,99€/mois (inclus avec Prime à 6,99€/mois)",
-                description: "Service d'Amazon avec films, séries et productions originales, inclus avec l'abonnement Prime.",
-                freeTrial: "30 jours gratuits",
-                content: [
-                    {title: "The Lord of the Rings: The Rings of Power", year: 2022, rating: 7.5, image: "https://image.tmdb.org/t/p/w500/mYLOqiStMskPKm256ErUNOxjNEw.jpg"},
-                    {title: "The Boys", year: 2022, rating: 8.7, image: "https://image.tmdb.org/t/p/w500/stTEycfG9928HYGEISBFaG1ngjM.jpg"},
-                    {title: "Jack Ryan", year: 2023, rating: 7.9, image: "https://image.tmdb.org/t/p/w500/1raUrQr8Y2tSYjMFkX138j2K2Gq.jpg"},
-                    {title: "The Marvelous Mrs. Maisel", year: 2022, rating: 8.7, image: "https://image.tmdb.org/t/p/w500/2Q6yURdKJvBVqXGaLPsdoQZ2YzA.jpg"},
-                    {title: "Reacher", year: 2022, rating: 8.1, image: "https://image.tmdb.org/t/p/w500/6aKdVdAe0vbQ3LtC4TzRjJk9qK5.jpg"}
-                ]
-            },
-            paramount: {
-                name: "Paramount+",
-                color: "bg-blue-700",
-                icon: "fas fa-peacock",
-                price: "7,99€/mois ou 69,99€/an",
-                description: "Catalogue de Paramount avec films, séries et contenus exclusifs comme Star Trek et Nickelodeon.",
-                freeTrial: "7 jours gratuits",
-                content: [
-                    {title: "Star Trek: Strange New Worlds", year: 2023, rating: 8.4, image: "https://image.tmdb.org/t/p/w500/6Hf2NSEd5vPLWb1vqGkVoOq6oYL.jpg"},
-                    {title: "Yellowstone", year: 2022, rating: 8.6, image: "https://image.tmdb.org/t/p/w500/peNC0eyc3TQJa6x4TdKcBPNP4t0.jpg"},
-                    {title: "Halo", year: 2022, rating: 7.5, image: "https://image.tmdb.org/t/p/w500/eO0QV5q5EngP1Ax9w3QE6PxkHjd.jpg"},
-                    {title: "1923", year: 2022, rating: 7.8, image: "https://image.tmdb.org/t/p/w500/uDgy6hyPd82kOHh6I95DtmUhnP5.jpg"},
-                    {title: "Tulsa King", year: 2022, rating: 8.2, image: "https://image.tmdb.org/t/p/w500/fnN5CfakLJbifvR6HsmmTtZQ1vx.jpg"}
-                ]
-            },
-            canal: {
-                name: "Canal+",
-                color: "bg-red-700",
-                icon: "fas fa-tv",
-                price: "19,99€/mois (avec engagement 12 mois)",
-                description: "Service premium français avec films récents, séries, sport et chaînes en direct.",
-                freeTrial: "Non disponible",
-                content: [
-                    {title: "Baron Noir", year: 2020, rating: 8.1, image: "https://image.tmdb.org/t/p/w500/4VQ5yqM9YtB3UQq4HdQ3wS6d3k9.jpg"},
-                    {title: "OSS 117", year: 2021, rating: 7.8, image: "https://image.tmdb.org/t/p/w500/2Q4iXyHXuM1Q0w1Y3T7Z3c6J3w9.jpg"},
-                    {title: "Le Bureau des Légendes", year: 2020, rating: 8.7, image: "https://image.tmdb.org/t/p/w500/3VQ5qXQ9d3Y3LQ9q3q3q3q3q3q3.jpg"},
-                    {title: "Versailles", year: 2018, rating: 7.6, image: "https://image.tmdb.org/t/p/w500/5Q5q3q3q3q3q3q3q3q3q3q3q3q3.jpg"},
-                    {title: "Engrenages", year: 2021, rating: 8.2, image: "https://image.tmdb.org/t/p/w500/6Q5q3q3q3q3q3q3q3q3q3q3q3q3.jpg"}
-                ]
-            },
-            ocs: {
-                name: "OCS",
-                color: "bg-green-600",
-                icon: "fas fa-play",
-                price: "9,99€/mois ou 99€/an",
-                description: "Service français avec exclusivités HBO, séries originales et films récents.",
-                freeTrial: "7 jours gratuits",
-                content: [
-                    {title: "Game of Thrones", year: 2019, rating: 8.9, image: "https://image.tmdb.org/t/p/w500/u3bZgnGQ9T01sWNhyveQz0wH0Hl.jpg"},
-                    {title: "House of the Dragon", year: 2022, rating: 8.8, image: "https://image.tmdb.org/t/p/w500/z2yahl2uefxDCl0nogcRBstwruJ.jpg"},
-                    {title: "The Last of Us", year: 2023, rating: 8.9, image: "https://image.tmdb.org/t/p/w500/uKvVjHNqB5VmOrdxqAt2F7J78ED.jpg"},
-                    {title: "Succession", year: 2023, rating: 8.8, image: "https://image.tmdb.org/t/p/w500/dfWZ3qF5o2PebssgUqLv69JBRYX.jpg"},
-                    {title: "Euphoria", year: 2022, rating: 8.4, image: "https://image.tmdb.org/t/p/w500/jtnfNzqZwN4E32FGGxx1YZaBwwf.jpg"}
-                ]
-            },
-            salto: {
-                name: "Salto",
-                color: "bg-purple-800",
-                icon: "fas fa-play-circle",
-                price: "6,99€/mois ou 69€/an",
-                description: "Plateforme française regroupant contenus de France Télévisions, TF1 et M6.",
-                freeTrial: "7 jours gratuits",
-                content: [
-                    {title: "Candice Renoir", year: 2022, rating: 7.5, image: "https://image.tmdb.org/t/p/w500/5Q5q3q3q3q3q3q3q3q3q3q3q3q3.jpg"},
-                    {title: "Profilage", year: 2021, rating: 7.2, image: "https://image.tmdb.org/t/p/w500/6Q5q3q3q3q3q3q3q3q3q3q3q3q3.jpg"},
-                    {title: "Demain nous appartient", year: 2023, rating: 6.8, image: "https://image.tmdb.org/t/p/w500/7Q5q3q3q3q3q3q3q3q3q3q3q3q3.jpg"},
-                    {title: "Ici tout commence", year: 2022, rating: 6.5, image: "https://image.tmdb.org/t/p/w500/8Q5q3q3q3q3q3q3q3q3q3q3q3q3.jpg"},
-                    {title: "Scènes de ménages", year: 2023, rating: 6.2, image: "https://image.tmdb.org/t/p/w500/9Q5q3q3q3q3q3q3q3q3q3q3q3q3.jpg"}
-                ]
-            },
-            crunchyroll: {
-                name: "Crunchyroll",
-                color: "bg-orange-500",
-                icon: "fas fa-play",
-                price: "4,99€/mois ou 39,99€/an",
-                description: "Plateforme spécialisée dans les anime et dramas asiatiques avec simulcast.",
-                freeTrial: "14 jours gratuits (version premium)",
-                content: [
-                    {title: "Attack on Titan", year: 2023, rating: 9.1, image: "https://image.tmdb.org/t/p/w500/hTP1DtLGFamjfu8BWm7zQC9iyU.jpg"},
-                    {title: "Demon Slayer", year: 2022, rating: 8.7, image: "https://image.tmdb.org/t/p/w500/qjGrUmKW78MCFG8PTLDBp67S27p.jpg"},
-                    {title: "Jujutsu Kaisen", year: 2023, rating: 8.6, image: "https://image.tmdb.org/t/p/w500/g1rK2nRXSidcMwNliWDIroWWGTn.jpg"},
-                    {title: "My Hero Academia", year: 2022, rating: 8.4, image: "https://image.tmdb.org/t/p/w500/4QLqhz0ZtH1wG5N1PDEBZnsv6Ih.jpg"},
-                    {title: "Chainsaw Man", year: 2022, rating: 8.5, image: "https://image.tmdb.org/t/p/w500/npdB6eFzizki0WaZ1OvKcJrWe97.jpg"}
-                ]
-            }
-        };
-        // Show streaming platform content
-        function showStreamingContent(platform) {
-            const data = streamingData[platform];
-            if (!data) return;
-            // Set title
-            document.getElementById('streamingTitle').textContent = data.name;
-            // Set info
-            const infoHtml = `
-                <div class="flex flex-col md:flex-row gap-6">
-                    <div class="${data.color} w-24 h-24 rounded-lg flex items-center justify-center mx-auto md:mx-0">
-                        <i class="${data.icon} text-5xl ${platform === 'apple' ? 'text-gray-900' : ''}"></i>
-                    </div>
-                    <div class="flex-1">
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
-                            <div>
-                                <h4 class="font-bold mb-1">Prix</h4>
-                                <p class="text-gray-400">${data.price}</p>
-                            </div>
-                            <div>
-                                <h4 class="font-bold mb-1">Essai gratuit</h4>
-                                <p class="text-gray-400">${data.freeTrial || 'Non disponible'}</p>
-                            </div>
-                        </div>
-                        <p class="text-gray-300">${data.description}</p>
-                        <div class="mt-4">
-                            <a href="#" class="inline-block px-4 py-2 ${data.color.replace('bg-', 'bg-').replace('600', '500').replace('700', '600')} hover:${data.color.replace('bg-', 'bg-').replace('500', '600').replace('600', '700')} rounded font-medium">
-                                Essayer gratuitement
-                            </a>
-                        </div>
-                    </div>
-                </div>
-            `;
-            document.getElementById('streamingInfo').innerHTML = infoHtml;
-            // Set content
-            const contentHtml = data.content.map(item => `
-                <div class="bg-gray-700 rounded-lg overflow-hidden">
-                    <div class="relative pt-[150%]">
-                        <img src="${item.image}" alt="${item.title}" class="absolute top-0 left-0 w-full h-full object-cover">
-                    </div>
-                    <div class="p-3">
-                        <h4 class="font-bold truncate">${item.title}</h4>
-                        <div class="flex justify-between items-center mt-1">
-                            <span class="text-yellow-400 text-xs">★ ${item.rating}</span>
-                            <span class="text-gray-400 text-xs">${item.year}</span>
-                        </div>
-                    </div>
-                </div>
-            `).join('');
-            document.getElementById('streamingContent').innerHTML = contentHtml;
-            // Show section
-            document.getElementById('contentSection').classList.remove('hidden');
-            // Scroll to section
-            document.getElementById('contentSection').scrollIntoView({ behavior: 'smooth' });
         }
-        // Hide streaming content
-        function hideStreamingContent() {
-            document.getElementById('contentSection').classList.add('hidden');
         }
         // Search functionality
@@ -596,8 +437,10 @@
         });
         // Make functions available globally
-        window.showStreamingContent = showStreamingContent;
-        window.hideStreamingContent = hideStreamingContent;
     </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-base" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Films Français Gratuits - Streaming Automatique</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        .channel-card:hover {
             transform: translateY(-5px);
             box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
         }
+        .channel-card {
             transition: all 0.3s ease;
         }
         .loading-spinner {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
+        .player-container {
+            aspect-ratio: 16/9;
+        }
+        .french-flag {
+            position: absolute;
+            top: 8px;
+            right: 8px;
+            background-color: rgba(0, 0, 0, 0.7);
+            color: white;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-size: 10px;
+            font-weight: bold;
+        }
     </style>
 </head>
 <body class="bg-gray-900 text-gray-100 min-h-screen">
     <header class="bg-gray-800 shadow-lg sticky top-0 z-50">
         <div class="container mx-auto px-4 py-4 flex justify-between items-center">
             <div class="flex items-center">
+                <i class="fas fa-film text-blue-400 text-3xl mr-3"></i>
+                <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">Films Français Gratuits</h1>
             </div>
             <div class="hidden md:flex space-x-4">
+                <a href="#films" class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded-full">Films VF</a>
+                <a href="#series" class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded-full">Séries VF</a>
+                <a href="#plateformes" class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded-full">Plateformes</a>
             </div>
         </div>
     </header>
     <main class="container mx-auto px-4 py-8">
         <!-- Hero Section -->
         <section class="mb-12 text-center">
+            <h2 class="text-3xl md:text-4xl font-bold mb-4">Films Français en Streaming Automatique</h2>
             <p class="text-gray-400 max-w-2xl mx-auto mb-8">
+                Regardez les meilleurs films français en version originale ou doublée, directement en streaming sans interruption.
             </p>
             <div class="max-w-xl mx-auto relative">
                     <i class="fas fa-search text-gray-400"></i>
                 </div>
                 <input type="text" id="searchInput" placeholder="Rechercher un film, une série..."
+                    class="w-full pl-10 pr-4 py-3 rounded-full bg-gray-700 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500">
+            </div>
+        </section>
+        <!-- Player Section (Hidden by default) -->
+        <section id="playerSection" class="hidden mb-12">
+            <div class="flex justify-between items-center mb-6">
+                <h2 id="playerTitle" class="text-2xl font-bold"></h2>
+                <button onclick="hidePlayer()" class="text-gray-400 hover:text-white">
+                    <i class="fas fa-times text-2xl"></i>
+                </button>
+            </div>
+            <div class="player-container bg-black rounded-lg overflow-hidden shadow-xl mb-4">
+                <iframe id="streamPlayer" class="w-full h-full" frameborder="0" allowfullscreen allow="autoplay; fullscreen"></iframe>
+            </div>
+            <div class="bg-gray-800 rounded-lg p-4">
+                <h3 class="font-bold mb-2">Informations</h3>
+                <p id="playerDescription" class="text-gray-300"></p>
+                <div class="mt-4 flex space-x-4">
+                    <button onclick="toggleFullscreen()" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded">
+                        <i class="fas fa-expand mr-2"></i> Plein écran
+                    </button>
+                    <button onclick="shareStream()" class="px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded">
+                        <i class="fas fa-share-alt mr-2"></i> Partager
+                    </button>
+                </div>
             </div>
         </section>
+        <!-- Free Movies Section -->
+        <section id="films" class="mb-12">
+            <h2 class="text-2xl font-bold mb-6">Films Français Gratuits</h2>
+            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+                <!-- Film 1 - Intouchables (VF) -->
+                <div class="channel-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer relative" onclick="playStream('Intouchables (VF)', 'https://ok.ru/videoembed/3599280620339?autoplay=1', 'Comédie dramatique française avec Omar Sy et François Cluzet.')">
+                    <div class="relative pt-[150%] bg-gray-700">
+                        <img src="https://image.tmdb.org/t/p/w500/4mFsNQwbD0F237Tx7gAPotd0nbJ.jpg" alt="Intouchables" class="absolute top-0 left-0 w-full h-full object-cover">
+                        <div class="french-flag">VF</div>
                     </div>
+                    <div class="p-3">
+                        <h3 class="font-bold text-sm truncate">Intouchables</h3>
+                        <div class="flex justify-between items-center mt-1">
+                            <span class="text-yellow-400 text-xs">★ 8.5</span>
+                            <span class="text-gray-400 text-xs">2011</span>
                         </div>
                     </div>
                 </div>
+                <!-- Film 2 - Le Fabuleux Destin d'Amélie Poulain (VF) -->
+                <div class="channel-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer relative" onclick="playStream('Le Fabuleux Destin d\'Amélie Poulain (VF)', 'https://ok.ru/videoembed/3258894280886?autoplay=1', 'Film poétique de Jean-Pierre Jeunet avec Audrey Tautou.')">
+                    <div class="relative pt-[150%] bg-gray-700">
+                        <img src="https://image.tmdb.org/t/p/w500/7WgTzvWQtuYQz3nBZkFogNlWUBV.jpg" alt="Amélie Poulain" class="absolute top-0 left-0 w-full h-full object-cover">
+                        <div class="french-flag">VF</div>
                     </div>
+                    <div class="p-3">
+                        <h3 class="font-bold text-sm truncate">Amélie Poulain</h3>
+                        <div class="flex justify-between items-center mt-1">
+                            <span class="text-yellow-400 text-xs">★ 8.3</span>
+                            <span class="text-gray-400 text-xs">2001</span>
                         </div>
                     </div>
                 </div>
+                <!-- Film 3 - La Haine (VO) -->
+                <div class="channel-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer relative" onclick="playStream('La Haine (VO)', 'https://ok.ru/videoembed/3599280620339?autoplay=1', 'Film culte de Mathieu Kassovitz avec Vincent Cassel.')">
+                    <div class="relative pt-[150%] bg-gray-700">
+                        <img src="https://image.tmdb.org/t/p/w500/3Z2OL8VMFm8Qbv6oQfqXr6QHlLz.jpg" alt="La Haine" class="absolute top-0 left-0 w-full h-full object-cover">
+                        <div class="french-flag">VO</div>
                     </div>
+                    <div class="p-3">
+                        <h3 class="font-bold text-sm truncate">La Haine</h3>
+                        <div class="flex justify-between items-center mt-1">
+                            <span class="text-yellow-400 text-xs">★ 8.1</span>
+                            <span class="text-gray-400 text-xs">1995</span>
                         </div>
                     </div>
                 </div>
+                <!-- Film 4 - Léon (VF) -->
+                <div class="channel-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer relative" onclick="playStream('Léon (VF)', 'https://ok.ru/videoembed/3599280620339?autoplay=1', 'Film d\'action avec Jean Reno et Natalie Portman.')">
+                    <div class="relative pt-[150%] bg-gray-700">
+                        <img src="https://image.tmdb.org/t/p/w500/2yXVoq0dL4aStvHhvU0CNQkQZhu.jpg" alt="Léon" class="absolute top-0 left-0 w-full h-full object-cover">
+                        <div class="french-flag">VF</div>
                     </div>
+                    <div class="p-3">
+                        <h3 class="font-bold text-sm truncate">Léon</h3>
+                        <div class="flex justify-between items-center mt-1">
+                            <span class="text-yellow-400 text-xs">★ 8.5</span>
+                            <span class="text-gray-400 text-xs">1994</span>
                         </div>
                     </div>
                 </div>
+                <!-- Film 5 - Bienvenue chez les Ch'tis (VF) -->
+                <div class="channel-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer relative" onclick="playStream('Bienvenue chez les Ch\'tis (VF)', 'https://ok.ru/videoembed/3599280620339?autoplay=1', 'Comédie française avec Kad Merad et Dany Boon.')">
+                    <div class="relative pt-[150%] bg-gray-700">
+                        <img src="https://image.tmdb.org/t/p/w500/3wQeJZkFegDhXxlQqQyP0qQ4T5d.jpg" alt="Bienvenue chez les Ch'tis" class="absolute top-0 left-0 w-full h-full object-cover">
+                        <div class="french-flag">VF</div>
                     </div>
+                    <div class="p-3">
+                        <h3 class="font-bold text-sm truncate">Bienvenue chez les Ch'tis</h3>
+                        <div class="flex justify-between items-center mt-1">
+                            <span class="text-yellow-400 text-xs">★ 7.1</span>
+                            <span class="text-gray-400 text-xs">2008</span>
                         </div>
                     </div>
                 </div>
+                <!-- Film 6 - Le Dîner de Cons (VF) -->
+                <div class="channel-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer relative" onclick="playStream('Le Dîner de Cons (VF)', 'https://ok.ru/videoembed/3599280620339?autoplay=1', 'Comédie française avec Thierry Lhermitte et Jacques Villeret.')">
+                    <div class="relative pt-[150%] bg-gray-700">
+                        <img src="https://image.tmdb.org/t/p/w500/5JGV9q4lK6Qj5q7cZQvXjZJZJZJ.jpg" alt="Le Dîner de Cons" class="absolute top-0 left-0 w-full h-full object-cover">
+                        <div class="french-flag">VF</div>
                     </div>
+                    <div class="p-3">
+                        <h3 class="font-bold text-sm truncate">Le Dîner de Cons</h3>
+                        <div class="flex justify-between items-center mt-1">
+                            <span class="text-yellow-400 text-xs">★ 7.7</span>
+                            <span class="text-gray-400 text-xs">1998</span>
                         </div>
                     </div>
                 </div>
+                <!-- Film 7 - Astérix et Obélix: Mission Cléopâtre (VF) -->
+                <div class="channel-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer relative" onclick="playStream('Astérix et Obélix: Mission Cléopâtre (VF)', 'https://ok.ru/videoembed/3599280620339?autoplay=1', 'Comédie française avec Gérard Depardieu et Christian Clavier.')">
+                    <div class="relative pt-[150%] bg-gray-700">
+                        <img src="https://image.tmdb.org/t/p/w500/5JGV9q4lK6Qj5q7cZQvXjZJZJZJ.jpg" alt="Astérix et Obélix" class="absolute top-0 left-0 w-full h-full object-cover">
+                        <div class="french-flag">VF</div>
                     </div>
+                    <div class="p-3">
+                        <h3 class="font-bold text-sm truncate">Astérix et Obélix</h3>
+                        <div class="flex justify-between items-center mt-1">
+                            <span class="text-yellow-400 text-xs">★ 7.2</span>
+                            <span class="text-gray-400 text-xs">2002</span>
                         </div>
                     </div>
                 </div>
+                <!-- Film 8 - Les Visiteurs (VF) -->
+                <div class="channel-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer relative" onclick="playStream('Les Visiteurs (VF)', 'https://ok.ru/videoembed/3599280620339?autoplay=1', 'Comédie française avec Jean Reno et Christian Clavier.')">
+                    <div class="relative pt-[150%] bg-gray-700">
+                        <img src="https://image.tmdb.org/t/p/w500/5JGV9q4lK6Qj5q7cZQvXjZJZJZJ.jpg" alt="Les Visiteurs" class="absolute top-0 left-0 w-full h-full object-cover">
+                        <div class="french-flag">VF</div>
                     </div>
+                    <div class="p-3">
+                        <h3 class="font-bold text-sm truncate">Les Visiteurs</h3>
+                        <div class="flex justify-between items-center mt-1">
+                            <span class="text-yellow-400 text-xs">★ 7.1</span>
+                            <span class="text-gray-400 text-xs">1993</span>
                         </div>
                     </div>
                 </div>
+                <!-- Film 9 - Le Pacte des Loups (VF) -->
+                <div class="channel-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer relative" onclick="playStream('Le Pacte des Loups (VF)', 'https://ok.ru/videoembed/3599280620339?autoplay=1', 'Film fantastique français avec Samuel Le Bihan et Vincent Cassel.')">
+                    <div class="relative pt-[150%] bg-gray-700">
+                        <img src="https://image.tmdb.org/t/p/w500/5JGV9q4lK6Qj5q7cZQvXjZJZJZJ.jpg" alt="Le Pacte des Loups" class="absolute top-0 left-0 w-full h-full object-cover">
+                        <div class="french-flag">VF</div>
                     </div>
+                    <div class="p-3">
+                        <h3 class="font-bold text-sm truncate">Le Pacte des Loups</h3>
+                        <div class="flex justify-between items-center mt-1">
+                            <span class="text-yellow-400 text-xs">★ 7.0</span>
+                            <span class="text-gray-400 text-xs">2001</span>
                         </div>
                     </div>
                 </div>
+                <!-- Film 10 - Le Prénom (VF) -->
+                <div class="channel-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer relative" onclick="playStream('Le Prénom (VF)', 'https://ok.ru/videoembed/3599280620339?autoplay=1', 'Comédie française adaptée de la pièce de théâtre.')">
+                    <div class="relative pt-[150%] bg-gray-700">
+                        <img src="https://image.tmdb.org/t/p/w500/5JGV9q4lK6Qj5q7cZQvXjZJZJZJ.jpg" alt="Le Prénom" class="absolute top-0 left-0 w-full h-full object-cover">
+                        <div class="french-flag">VF</div>
                     </div>
+                    <div class="p-3">
+                        <h3 class="font-bold text-sm truncate">Le Prénom</h3>
+                        <div class="flex justify-between items-center mt-1">
+                            <span class="text-yellow-400 text-xs">★ 7.3</span>
+                            <span class="text-gray-400 text-xs">2012</span>
                         </div>
                     </div>
                 </div>
             </div>
         </section>
+        <!-- Free Platforms Section -->
+        <section id="plateformes" class="mb-12">
+            <h2 class="text-2xl font-bold mb-6">Plateformes de Films Français Gratuits</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- France TV -->
+                <div class="bg-gray-800 rounded-lg p-6 flex flex-col">
+                    <div class="flex items-center mb-4">
+                        <div class="bg-blue-600 p-3 rounded-lg mr-4">
                             <i class="fas fa-tv text-2xl"></i>
                         </div>
+                        <h3 class="font-bold text-lg">France TV</h3>
                     </div>
+                    <p class="text-gray-400 mb-4 flex-1">Plateforme officielle de France Télévisions avec des films français gratuits en streaming.</p>
+                    <div class="flex space-x-3">
+                        <a href="https://www.france.tv/" target="_blank" class="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded font-medium text-center">
+                            <i class="fas fa-external-link-alt mr-2"></i> Accéder
+                        </a>
+                        <button onclick="playStream('France TV', 'https://www.france.tv/', 'Plateforme officielle de France Télévisions')" class="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded font-medium">
+                            <i class="fas fa-play mr-2"></i> Regarder
+                        </button>
                     </div>
+                </div>
+                <!-- ARTE -->
+                <div class="bg-gray-800 rounded-lg p-6 flex flex-col">
+                    <div class="flex items-center mb-4">
+                        <div class="bg-red-600 p-3 rounded-lg mr-4">
                             <i class="fas fa-film text-2xl"></i>
                         </div>
+                        <h3 class="font-bold text-lg">ARTE Cinéma</h3>
                     </div>
+                    <p class="text-gray-400 mb-4 flex-1">Sélection de films d'auteur et classiques du cinéma français et européen.</p>
+                    <div class="flex space-x-3">
+                        <a href="https://www.arte.tv/fr/videos/cinema/" target="_blank" class="flex-1 px-4 py-2 bg-red-600 hover:bg-red-700 rounded font-medium text-center">
+                            <i class="fas fa-external-link-alt mr-2"></i> Accéder
+                        </a>
+                        <button onclick="playStream('ARTE Cinéma', 'https://www.arte.tv/fr/videos/cinema/', 'Films d\'auteur et classiques du cinéma')" class="flex-1 px-4 py-2 bg-red-600 hover:bg-red-700 rounded font-medium">
+                            <i class="fas fa-play mr-2"></i> Regarder
+                        </button>
                     </div>
                 </div>
+                <!-- Okoo -->
+                <div class="bg-gray-800 rounded-lg p-6 flex flex-col">
+                    <div class="flex items-center mb-4">
+                        <div class="bg-purple-500 p-3 rounded-lg mr-4">
+                            <i class="fas fa-child text-2xl"></i>
                         </div>
+                        <h3 class="font-bold text-lg">Okoo (France TV)</h3>
                     </div>
+                    <p class="text-gray-400 mb-4 flex-1">Plateforme jeunesse de France Télévisions avec des films et dessins animés français.</p>
+                    <div class="flex space-x-3">
+                        <a href="https://www.okoofrance.tv/" target="_blank" class="flex-1 px-4 py-2 bg-purple-500 hover:bg-purple-600 rounded font-medium text-center">
+                            <i class="fas fa-external-link-alt mr-2"></i> Accéder
+                        </a>
+                        <button onclick="playStream('Okoo', 'https://www.okoofrance.tv/', 'Plateforme jeunesse de France Télévisions')" class="flex-1 px-4 py-2 bg-purple-500 hover:bg-purple-600 rounded font-medium">
+                            <i class="fas fa-play mr-2"></i> Regarder
+                        </button>
                     </div>
                 </div>
             </div>
         <div class="container mx-auto px-4">
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                 <div>
+                    <h3 class="text-lg font-bold mb-4">Films Français Gratuits</h3>
                     <p class="text-gray-400 text-sm">
+                        Votre plateforme pour découvrir les meilleurs films français en streaming gratuit.
+                        Tous les liens pointent vers des plateformes légales et officielles.
                     </p>
                 </div>
                 <div>
+                    <h3 class="text-lg font-bold mb-4">Aide & Support</h3>
                     <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">FAQ</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Problèmes de lecture</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Nous contacter</a></li>
                     </ul>
                 </div>
                 <div>
+                    <h3 class="text-lg font-bold mb-4">Légal</h3>
                     <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Mentions légales</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Conditions d'utilisation</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Politique de confidentialité</a></li>
                     </ul>
                 </div>
             </div>
             <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400 text-sm">
+                <p>© 2023 Films Français Gratuits. Ce site ne propose pas de contenu piraté, seulement des liens vers des plateformes de streaming légales et gratuites.</p>
             </div>
         </div>
     </footer>
     <script>
+        // Play a stream
+        function playStream(title, url, description) {
+            document.getElementById('playerTitle').textContent = title;
+            document.getElementById('playerDescription').textContent = description;
+            // For OK.ru and other platforms
+            document.getElementById('streamPlayer').src = url;
+            // Show player section
+            document.getElementById('playerSection').classList.remove('hidden');
+            // Scroll to player
+            document.getElementById('playerSection').scrollIntoView({ behavior: 'smooth' });
+        }
+        // Hide player
+        function hidePlayer() {
+            document.getElementById('playerSection').classList.add('hidden');
+            document.getElementById('streamPlayer').src = '';
+        }
+        // Toggle fullscreen
+        function toggleFullscreen() {
+            const player = document.getElementById('streamPlayer');
+            if (!document.fullscreenElement) {
+                if (player.requestFullscreen) {
+                    player.requestFullscreen();
+                } else if (player.webkitRequestFullscreen) {
+                    player.webkitRequestFullscreen();
+                } else if (player.msRequestFullscreen) {
+                    player.msRequestFullscreen();
+                }
+            } else {
+                if (document.exitFullscreen) {
+                    document.exitFullscreen();
+                } else if (document.webkitExitFullscreen) {
+                    document.webkitExitFullscreen();
+                } else if (document.msExitFullscreen) {
+                    document.msExitFullscreen();
+                }
+            }
+        }
+        // Share stream
+        function shareStream() {
+            const title = document.getElementById('playerTitle').textContent;
+            const url = document.getElementById('streamPlayer').src;
+            if (navigator.share) {
+                navigator.share({
+                    title: title,
+                    text: 'Regarde ce film français gratuit: ' + title,
+                    url: url
+                }).catch(err => {
+                    console.log('Error sharing:', err);
+                    fallbackShare(title, url);
+                });
+            } else {
+                fallbackShare(title, url);
+            }
         }
+        // Fallback for browsers that don't support Web Share API
+        function fallbackShare(title, url) {
+            const shareUrl = `mailto:?subject=${encodeURIComponent(title)}&body=${encodeURIComponent('Regarde ce film français gratuit: ' + url)}`;
+            window.location.href = shareUrl;
         }
         // Search functionality
         });
         // Make functions available globally
+        window.playStream = playStream;
+        window.hidePlayer = hidePlayer;
+        window.toggleFullscreen = toggleFullscreen;
+        window.shareStream = shareStream;
     </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-base" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt CHANGED Viewed

@@ -1,3 +1,6 @@
 creer moi une base de données des film complet avec leur liens url en automatique a regarder de suite avec leurs different serveur de film
 je veux acces gratuite à  Regarder sur HBO Max Disponible en HD Regarder Regarder sur Apple TV
-je veux dautre serveur

 creer moi une base de données des film complet avec leur liens url en automatique a regarder de suite avec leurs different serveur de film
 je veux acces gratuite à  Regarder sur HBO Max Disponible en HD Regarder Regarder sur Apple TV
+je veux dautre serveur
+je veux acces a toutes les chaine et serveur gratuite en automatique
+ajouter les url des film en autoplay
+je veux regarder les film en vrai en en francais en autoplay