Spaces:

docto41
/

stream-vista

Running

App Files Files Community

docto41 commited on May 5

Commit

6e1c6c1

verified ·

1 Parent(s): e7ed72f

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +565 -19
prompts.txt +3 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Stream Vista
-emoji: ⚡
 colorFrom: pink
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: stream-vista
+emoji: 🐳
 colorFrom: pink
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,565 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>StreamVista | 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>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Poppins', sans-serif;
+            background-color: #0f172a;
+        }
+        .hero-gradient {
+            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+        }
+        .card-hover {
+            transition: all 0.3s ease;
+        }
+        .card-hover:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+        }
+        .glow-text {
+            text-shadow: 0 0 10px rgba(59, 130, 246, 0.7);
+        }
+        .video-container {
+            position: relative;
+            padding-bottom: 56.25%;
+            height: 0;
+            overflow: hidden;
+        }
+        .video-container iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+        .skeleton {
+            animation: skeleton-loading 1s linear infinite alternate;
+        }
+        .movie-card {
+            position: relative;
+            overflow: hidden;
+            border-radius: 0.5rem;
+        }
+        .movie-card img {
+            transition: transform 0.3s ease;
+        }
+        .movie-card:hover img {
+            transform: scale(1.05);
+        }
+        .play-button {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            opacity: 0;
+            transition: all 0.3s ease;
+            background-color: rgba(59, 130, 246, 0.9);
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            z-index: 10;
+        }
+        .movie-card:hover .play-button {
+            opacity: 1;
+        }
+        @keyframes skeleton-loading {
+            0% {
+                background-color: hsl(200, 20%, 20%);
+            }
+            100% {
+                background-color: hsl(200, 20%, 35%);
+            }
+        }
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 100;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.9);
+        }
+        .modal-content {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 80%;
+            max-width: 1200px;
+        }
+        .close {
+            position: absolute;
+            top: 20px;
+            right: 30px;
+            color: white;
+            font-size: 30px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body class="text-white">
+    <!-- Navigation -->
+    <nav class="bg-gray-900 bg-opacity-90 backdrop-blur-md fixed w-full z-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex items-center justify-between h-16">
+                <div class="flex items-center">
+                    <div class="flex-shrink-0">
+                        <span class="text-2xl font-bold text-blue-400">Stream<span class="text-white">Vista</span></span>
+                    </div>
+                    <div class="hidden md:block">
+                        <div class="ml-10 flex items-baseline space-x-4">
+                            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium bg-blue-600 text-white">Accueil</a>
+                            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Films</a>
+                            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Séries</a>
+                            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Documentaires</a>
+                            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Ma liste</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="hidden md:block">
+                    <div class="ml-4 flex items-center md:ml-6">
+                        <div class="relative mx-4">
+                            <input type="text" placeholder="Rechercher..." class="bg-gray-700 text-white px-4 py-1 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 w-64">
+                            <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
+                                <i class="fas fa-search"></i>
+                            </button>
+                        </div>
+                        <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
+                            <i class="fas fa-bell text-xl"></i>
+                        </button>
+                        <div class="ml-3 relative">
+                            <div class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center cursor-pointer">
+                                <span class="text-sm font-medium">JP</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="-mr-2 flex md:hidden">
+                    <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false">
+                        <span class="sr-only">Open main menu</span>
+                        <i class="fas fa-bars text-xl"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section class="hero-gradient pt-24 pb-16 md:pt-32 md:pb-24">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="md:flex items-center">
+                <div class="md:w-1/2 mb-10 md:mb-0">
+                    <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
+                        Votre <span class="text-blue-400 glow-text">divertissement</span> sans limites
+                    </h1>
+                    <p class="text-xl text-gray-300 mb-8 max-w-lg">
+                        Des milliers de films, séries et documentaires à portée de main.
+                        Découvrez un monde de divertissement sans frontières.
+                    </p>
+                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+                        <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg flex items-center justify-center transition duration-300 transform hover:scale-105">
+                            <span>Commencer l'essai gratuit</span>
+                            <i class="fas fa-play ml-2"></i>
+                        </button>
+                        <button class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-8 rounded-lg flex items-center justify-center transition duration-300">
+                            <i class="fas fa-info-circle mr-2"></i>
+                            <span>En savoir plus</span>
+                        </button>
+                    </div>
+                    <div class="mt-8 flex items-center">
+                        <div class="flex -space-x-2">
+                            <img class="inline-block h-10 w-10 rounded-full ring-2 ring-gray-800" src="https://randomuser.me/api/portraits/women/1.jpg" alt="">
+                            <img class="inline-block h-10 w-10 rounded-full ring-2 ring-gray-800" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
+                            <img class="inline-block h-10 w-10 rounded-full ring-2 ring-gray-800" src="https://randomuser.me/api/portraits/women/2.jpg" alt="">
+                        </div>
+                        <p class="ml-4 text-gray-300 text-sm">
+                            Rejoignez <span class="text-white font-medium">5M+</span> abonnés satisfaits
+                        </p>
+                    </div>
+                </div>
+                <div class="md:w-1/2 relative">
+                    <div class="video-container rounded-xl overflow-hidden shadow-2xl">
+                        <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=0&mute=1&loop=1&controls=0" frameborder="0" allowfullscreen></iframe>
+                    </div>
+                    <div class="absolute -bottom-6 -left-6 bg-blue-600 rounded-lg p-4 shadow-lg hidden md:block">
+                        <div class="flex items-center">
+                            <i class="fas fa-trophy text-yellow-300 text-2xl mr-2"></i>
+                            <div>
+                                <p class="text-xs text-gray-200">Meilleure plateforme</p>
+                                <p class="font-bold">2023</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Content Section -->
+    <section class="py-16 bg-gray-900">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <h2 class="text-3xl font-bold mb-12 text-center">Découvrez notre catalogue</h2>
+            <!-- Featured Movies -->
+            <div class="mb-16">
+                <div class="flex justify-between items-center mb-6">
+                    <h3 class="text-xl font-semibold">Films tendances</h3>
+                    <a href="#" class="text-blue-400 hover:text-blue-300 text-sm flex items-center">
+                        Voir tout <i class="fas fa-chevron-right ml-1"></i>
+                    </a>
+                </div>
+                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4" id="trending-movies">
+                    <!-- Movies will be loaded here by JavaScript -->
+                </div>
+            </div>
+            <!-- Popular Series -->
+            <div class="mb-16">
+                <div class="flex justify-between items-center mb-6">
+                    <h3 class="text-xl font-semibold">Séries populaires</h3>
+                    <a href="#" class="text-blue-400 hover:text-blue-300 text-sm flex items-center">
+                        Voir tout <i class="fas fa-chevron-right ml-1"></i>
+                    </a>
+                </div>
+                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4" id="popular-series">
+                    <!-- Series will be loaded here by JavaScript -->
+                </div>
+            </div>
+            <!-- Documentaries -->
+            <div>
+                <div class="flex justify-between items-center mb-6">
+                    <h3 class="text-xl font-semibold">Documentaires primés</h3>
+                    <a href="#" class="text-blue-400 hover:text-blue-300 text-sm flex items-center">
+                        Voir tout <i class="fas fa-chevron-right ml-1"></i>
+                    </a>
+                </div>
+                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4" id="documentaries">
+                    <!-- Documentaries will be loaded here by JavaScript -->
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Features Section -->
+    <section class="py-16 bg-gray-800">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <h2 class="text-3xl font-bold mb-12 text-center">Pourquoi choisir StreamVista?</h2>
+            <div class="grid md:grid-cols-3 gap-8">
+                <!-- Feature 1 -->
+                <div class="bg-gray-700 p-6 rounded-xl card-hover">
+                    <div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center mb-4">
+                        <i class="fas fa-film text-xl"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3">Contenu exclusif</h3>
+                    <p class="text-gray-300">
+                        Accès à des films, séries et documentaires que vous ne trouverez nulle part ailleurs.
+                        Des productions originales primées disponibles uniquement sur StreamVista.
+                    </p>
+                </div>
+                <!-- Feature 2 -->
+                <div class="bg-gray-700 p-6 rounded-xl card-hover">
+                    <div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center mb-4">
+                        <i class="fas fa-tv text-xl"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3">Multi-appareils</h3>
+                    <p class="text-gray-300">
+                        Regardez vos contenus préférés sur tous vos appareils : smartphone, tablette, ordinateur ou télévision.
+                        Synchronisation automatique de votre progression.
+                    </p>
+                </div>
+                <!-- Feature 3 -->
+                <div class="bg-gray-700 p-6 rounded-xl card-hover">
+                    <div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center mb-4">
+                        <i class="fas fa-download text-xl"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3">Téléchargement</h3>
+                    <p class="text-gray-300">
+                        Téléchargez vos films et séries pour les regarder hors connexion.
+                        Parfait pour les voyages ou lorsque vous n'avez pas accès à internet.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-gray-900 py-12">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Navigation</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">Accueil</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Films</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Séries</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Documentaires</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Ma liste</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Informations</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">À propos</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Carrières</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Presse</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Investisseurs</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Légal</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">Conditions d'utilisation</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Confidentialité</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Préférences de cookies</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Mentions légales</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Contact</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">Service client</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Centre d'aide</a></li>
+                        <li class="flex space-x-4 mt-4">
+                            <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
+                            <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
+                            <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
+                            <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+                <p class="text-gray-400 mb-4 md:mb-0">© 2023 StreamVista. Tous droits réservés.</p>
+                <div class="flex space-x-6">
+                    <a href="#" class="text-gray-400 hover:text-white">Paramètres</a>
+                    <a href="#" class="text-gray-400 hover:text-white">Confidentialité</a>
+                    <a href="#" class="text-gray-400 hover:text-white">Cookies</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <!-- Video Modal -->
+    <div id="videoModal" class="modal">
+        <span class="close">&times;</span>
+        <div class="modal-content">
+            <div class="video-container">
+                <iframe id="modalVideo" frameborder="0" allowfullscreen></iframe>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Movie data with real images and trailers
+        const trendingMovies = [
+            {
+                title: "Dune",
+                image: "https://image.tmdb.org/t/p/w500/d5NXSklXo0qyIYkgV94XAgMIckC.jpg",
+                year: "2021",
+                rating: "8.0",
+                trailer: "https://www.youtube.com/embed/n9xhJrPXop4"
+            },
+            {
+                title: "The Batman",
+                image: "https://image.tmdb.org/t/p/w500/seyWFgGItaxDVjbrUEhy1NNqtbm.jpg",
+                year: "2022",
+                rating: "7.9",
+                trailer: "https://www.youtube.com/embed/mqqft2x_Aa4"
+            },
+            {
+                title: "Top Gun: Maverick",
+                image: "https://image.tmdb.org/t/p/w500/62HCnUTziyWcpDaBO2i1DX17ljH.jpg",
+                year: "2022",
+                rating: "8.3",
+                trailer: "https://www.youtube.com/embed/giXco2jaZ_4"
+            },
+            {
+                title: "Avatar: The Way of Water",
+                image: "https://image.tmdb.org/t/p/w500/t6HIqrRAclMCA60NsSmeqe9RmNV.jpg",
+                year: "2022",
+                rating: "7.6",
+                trailer: "https://www.youtube.com/embed/d9MyW72ELq0"
+            },
+            {
+                title: "Oppenheimer",
+                image: "https://image.tmdb.org/t/p/w500/8Gxv8gSFCU0XGDykEGv7zR1n2ua.jpg",
+                year: "2023",
+                rating: "8.5",
+                trailer: "https://www.youtube.com/embed/uYPbbksJxIg"
+            }
+        ];
+        const popularSeries = [
+            {
+                title: "Stranger Things",
+                image: "https://image.tmdb.org/t/p/w500/49WJfeN0moxb9IPfGn8AIqMGskD.jpg",
+                year: "2016",
+                rating: "8.7",
+                trailer: "https://www.youtube.com/embed/b9EkMc79ZSU"
+            },
+            {
+                title: "The Last of Us",
+                image: "https://image.tmdb.org/t/p/w500/uKvVjHNqB5VmOrdxqAt2F7J78ED.jpg",
+                year: "2023",
+                rating: "8.8",
+                trailer: "https://www.youtube.com/embed/uLtkt8BonwM"
+            },
+            {
+                title: "The Mandalorian",
+                image: "https://image.tmdb.org/t/p/w500/eU1i6eHXlzMOlEq0ku1Rzq7Y4wA.jpg",
+                year: "2019",
+                rating: "8.5",
+                trailer: "https://www.youtube.com/embed/eW7Twd85m2g"
+            },
+            {
+                title: "House of the Dragon",
+                image: "https://image.tmdb.org/t/p/w500/z2yahl2uefxDCl0nogcRBstwruJ.jpg",
+                year: "2022",
+                rating: "8.5",
+                trailer: "https://www.youtube.com/embed/DotnJ7tTA34"
+            },
+            {
+                title: "The Witcher",
+                image: "https://image.tmdb.org/t/p/w500/7vjaCdMw15FEbXyLQTVa04URsPm.jpg",
+                year: "2019",
+                rating: "8.0",
+                trailer: "https://www.youtube.com/embed/ndl1W4ltcmg"
+            }
+        ];
+        const documentaries = [
+            {
+                title: "Our Planet",
+                image: "https://image.tmdb.org/t/p/w500/oJ7UYIYbzLmWQJ9eh91d8hnJAdl.jpg",
+                year: "2019",
+                rating: "9.3",
+                trailer: "https://www.youtube.com/embed/aETNYyrqNYE"
+            },
+            {
+                title: "The Social Dilemma",
+                image: "https://image.tmdb.org/t/p/w500/zaf7D0R3vZ4P1KXZ0VbanF6U4tZ.jpg",
+                year: "2020",
+                rating: "7.6",
+                trailer: "https://www.youtube.com/embed/uaaC57tcci0"
+            },
+            {
+                title: "Free Solo",
+                image: "https://image.tmdb.org/t/p/w500/4U7l7zNiMxSIK6z5jJ5nWCpAhZ3.jpg",
+                year: "2018",
+                rating: "8.1",
+                trailer: "https://www.youtube.com/embed/urRVZ4SW7WU"
+            },
+            {
+                title: "Seaspiracy",
+                image: "https://image.tmdb.org/t/p/w500/xdmmd437QdjcCls8yCQxrH5YYM.jpg",
+                year: "2021",
+                rating: "8.3",
+                trailer: "https://www.youtube.com/embed/1Q5CXN7soQg"
+            },
+            {
+                title: "The Last Dance",
+                image: "https://image.tmdb.org/t/p/w500/5rLS3nK9hQ9W1q7oV1VZgZfVjJs.jpg",
+                year: "2020",
+                rating: "9.1",
+                trailer: "https://www.youtube.com/embed/7Z3vx7YkDnI"
+            }
+        ];
+        // Get modal elements
+        const modal = document.getElementById("videoModal");
+        const modalVideo = document.getElementById("modalVideo");
+        const closeBtn = document.getElementsByClassName("close")[0];
+        // Function to create movie cards
+        function createMovieCards(data, containerId) {
+            const container = document.getElementById(containerId);
+            container.innerHTML = '';
+            data.forEach(item => {
+                const card = document.createElement('div');
+                card.className = 'movie-card card-hover';
+                card.innerHTML = `
+                    <div class="relative h-64 rounded-lg overflow-hidden">
+                        <img src="${item.image}" alt="${item.title}" class="w-full h-full object-cover">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-80"></div>
+                        <div class="play-button" onclick="openModal('${item.trailer}')">
+                            <i class="fas fa-play text-white text-xl"></i>
+                        </div>
+                        <div class="absolute bottom-0 left-0 p-3 w-full">
+                            <h4 class="font-semibold">${item.title}</h4>
+                            <div class="flex justify-between items-center text-sm text-gray-300">
+                                <span>${item.year}</span>
+                                <span class="flex items-center">
+                                    <i class="fas fa-star text-yellow-400 mr-1"></i>
+                                    ${item.rating}
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                container.appendChild(card);
+            });
+        }
+        // Function to open modal with video
+        function openModal(videoUrl) {
+            modal.style.display = "block";
+            modalVideo.src = videoUrl + "?autoplay=1&mute=0";
+        }
+        // Close modal when clicking X
+        closeBtn.onclick = function() {
+            modal.style.display = "none";
+            modalVideo.src = "";
+        }
+        // Close modal when clicking outside
+        window.onclick = function(event) {
+            if (event.target == modal) {
+                modal.style.display = "none";
+                modalVideo.src = "";
+            }
+        }
+        // Initialize the page with movie data
+        document.addEventListener('DOMContentLoaded', function() {
+            createMovieCards(trendingMovies, 'trending-movies');
+            createMovieCards(popularSeries, 'popular-series');
+            createMovieCards(documentaries, 'documentaries');
+        });
+    </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/stream-vista" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,3 @@

+Votre divertissement sans limites Des milliers de films, séries et documentaires à portée de main. Abonnez-vous dès maintenant.
+afficher les vrai images des films avec les films qui joue reelement
+AFFICHER LES VRAIS IMAGE DU SISTE ET AJOUTER LES BOUTON PLAY POURQUE LES FILM DEMARRE DIRECTEMENT