Spaces:

docto41
/

cin-stream

Running

App Files Files Community

docto41 commited on May 16

Commit

3b1f07c

verified ·

1 Parent(s): b83f71f

Add 2 files

Browse files

Files changed (2) hide show

index.html +185 -269
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>StreamVista - Films et Séries 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>
@@ -18,366 +18,282 @@
             height: 400px;
             object-fit: cover;
         }
-        .loading-spinner {
-            animation: spin 1s linear infinite;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        .server-btn:hover {
-            background-color: #2d3748;
-        }
-        .server-btn.active {
-            background-color: #3182ce;
         }
     </style>
 </head>
 <body class="bg-gray-900 text-white">
     <!-- Header -->
     <header class="bg-black py-4 px-6 shadow-lg sticky top-0 z-50">
-        <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
-            <div class="flex items-center mb-4 md:mb-0">
                 <i class="fas fa-film text-red-600 text-3xl mr-3"></i>
-                <h1 class="text-2xl font-bold bg-gradient-to-r from-red-600 to-purple-600 bg-clip-text text-transparent">StreamVista</h1>
-            </div>
-            <div class="relative w-full md:w-1/3">
-                <input type="text" placeholder="Rechercher un film..."
-                    class="w-full bg-gray-800 rounded-full py-2 px-4 pl-10 text-white focus:border-blue-500">
-                <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
             </div>
-            <nav class="hidden md:flex space-x-6 mt-4 md:mt-0">
                 <a href="#" class="hover:text-red-500 transition">Accueil</a>
-                <a href="#" class="hover:text-red-500 transition">Nouveautés</a>
-                <a href="#" class="hover:text-red-500 transition">Genres</a>
                 <a href="#" class="hover:text-red-500 transition">Ma liste</a>
-                <button class="bg-red-600 hover:bg-red-700 text-white py-1 px-4 rounded-full text-sm font-semibold transition">
                     Connexion
                 </button>
-            </nav>
         </div>
     </header>
     <!-- Hero Section -->
-    <section class="relative h-96 bg-gradient-to-r from-gray-900 to-gray-800 overflow-hidden">
-        <div class="absolute inset-0 bg-black opacity-50"></div>
-        <div class="absolute inset-0 flex items-center justify-center">
-            <div class="text-center px-4 z-10">
-                <h2 class="text-4xl md:text-5xl font-bold mb-4">Streaming Ultra HD</h2>
-                <p class="text-xl mb-6">+962,000 films et séries en VF et VOSTFR</p>
-                <button class="bg-red-600 hover:bg-red-700 text-white py-3 px-8 rounded-full font-semibold transition">
-                    <i class="fas fa-play mr-2"></i> Commencer
                 </button>
             </div>
         </div>
     </section>
     <!-- Main Content -->
     <main class="container mx-auto px-4 py-8">
-        <!-- Server Selection -->
-        <div class="mb-6 bg-gray-800 p-4 rounded-lg">
-            <h3 class="text-lg font-semibold mb-3">Serveurs disponibles</h3>
-            <div class="flex flex-wrap gap-2">
-                <button class="server-btn active bg-blue-600 text-white px-4 py-2 rounded-full text-sm">
-                    <i class="fas fa-bolt mr-2"></i> Rapide
-                </button>
-                <button class="server-btn bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-full text-sm">
-                    <i class="fas fa-shield-alt mr-2"></i> Premium
-                </button>
-                <button class="server-btn bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-full text-sm">
-                    <i class="fas fa-globe mr-2"></i> International
-                </button>
             </div>
-        </div>
-        <!-- Movies Sections -->
         <section class="mb-12">
             <div class="flex justify-between items-center mb-6">
-                <h2 class="text-2xl font-bold">Nouveautés 2024</h2>
-                <a href="#" class="text-red-500 hover:underline">Voir plus</a>
             </div>
-            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4" id="new-movies">
-                <!-- Films chargés dynamiquement -->
             </div>
         </section>
         <section class="mb-12">
             <div class="flex justify-between items-center mb-6">
-                <h2 class="text-2xl font-bold">Top Films</h2>
-                <a href="#" class="text-red-500 hover:underline">Voir plus</a>
             </div>
-            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4" id="top-movies">
-                <!-- Films chargés dynamiquement -->
             </div>
         </section>
     </main>
     <!-- Footer -->
-    <footer class="bg-black py-8 px-6">
         <div class="container mx-auto grid grid-cols-1 md:grid-cols-4 gap-8">
             <div>
-                <h3 class="text-xl font-bold mb-4">StreamVista</h3>
-                <p class="text-gray-400">La plateforme de streaming la plus complète avec plus de 962,000 titres.</p>
             </div>
             <div>
-                <h4 class="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>
                 </ul>
             </div>
             <div>
-                <h4 class="font-semibold mb-4">Support</h4>
                 <ul class="space-y-2">
-                    <li><a href="#" class="text-gray-400 hover:text-white transition">Aide</a></li>
-                    <li><a href="#" class="text-gray-400 hover:text-white transition">Serveurs</a></li>
-                    <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
                 </ul>
             </div>
             <div>
-                <h4 class="font-semibold mb-4">Légal</h4>
                 <ul class="space-y-2">
-                    <li><a href="#" class="text-gray-400 hover:text-white transition">CGU</a></li>
-                    <li><a href="#" class="text-gray-400 hover:text-white transition">Confidentialité</a></li>
                 </ul>
             </div>
         </div>
-        <div class="border-t border-gray-800 mt-8 pt-6 text-center text-gray-500">
-            <p>© 2024 StreamVista. Service de démonstration.</p>
         </div>
     </footer>
-    <!-- Movie Modal -->
-    <div id="movie-modal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden overflow-y-auto">
-        <div class="container mx-auto py-12 px-4">
-            <div class="flex justify-end mb-4">
-                <button id="close-modal" class="text-white text-2xl hover:text-red-500 transition">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
-            <div class="bg-gray-800 rounded-lg overflow-hidden">
-                <div class="flex flex-col lg:flex-row">
-                    <div class="lg:w-1/3">
-                        <img id="modal-poster" src="" alt="Movie Poster" class="w-full h-auto">
-                    </div>
-                    <div class="lg:w-2/3 p-6">
-                        <h2 id="modal-title" class="text-3xl font-bold mb-2"></h2>
-                        <div class="flex flex-wrap items-center gap-2 mb-4">
-                            <span id="modal-year" class="bg-gray-700 px-2 py-1 rounded text-sm"></span>
-                            <span id="modal-rating" class="bg-red-600 px-2 py-1 rounded text-sm"></span>
-                        </div>
-                        <p id="modal-plot" class="text-gray-300 mb-6"></p>
-                        <div class="mb-6">
-                            <h4 class="font-semibold mb-2">Serveurs disponibles</h4>
-                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-2" id="modal-servers">
-                                <!-- Options de serveur -->
-                            </div>
-                        </div>
-                        <button id="play-movie" class="bg-red-600 hover:bg-red-700 text-white py-3 px-8 rounded-full font-semibold transition flex items-center">
-                            <i class="fas fa-play mr-2"></i> Regarder maintenant
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
     <script>
-        // Base de données simulée de films
-        const moviesDatabase = [
-            {
-                id: 1,
-                title: "Dune: Partie Deux",
-                year: 2024,
-                rating: "4.8/5",
-                plot: "Paul Atreides s'allie avec les Fremen pour mener la révolte contre ceux qui ont détruit sa famille.",
-                poster: "https://m.media-amazon.com/images/M/MV5BN2QyZGU4ZDctOWMzMy00NTc5LThlOGQtODhmNDI1NmY5YzAwXkEyXkFqcGdeQXVyMDM2NDM2MQ@@._V1_FMjpg_UX1000_.jpg",
-                servers: [
-                    { name: "Serveur Rapide", url: "#", quality: "4K" },
-                    { name: "Serveur Premium", url: "#", quality: "1080p" }
-                ]
-            },
-            {
-                id: 2,
-                title: "The Batman",
-                year: 2023,
-                rating: "4.5/5",
-                plot: "Batman enquête sur la corruption à Gotham City et affronte le Riddler, un tueur en série ciblant l'élite corrompue.",
-                poster: "https://m.media-amazon.com/images/M/MV5BMDdmMTBiNTYtMDIzNi00NGVlLWIzMDYtZTk3MTQ3NGQxZGEwXkEyXkFqcGdeQXVyMzMwOTU5MDk@._V1_.jpg",
-                servers: [
-                    { name: "Serveur Rapide", url: "#", quality: "1080p" },
-                    { name: "Serveur International", url: "#", quality: "720p" }
-                ]
-            },
-            {
-                id: 3,
-                title: "Avatar 3",
-                year: 2025,
-                rating: "4.7/5",
-                plot: "La suite des aventures des Na'vi sur Pandora.",
-                poster: "https://m.media-amazon.com/images/M/MV5BZDA0OGQxNTItMDZkMC00N2UyLTg3MzMtYTJmNjg3N2E0MTM0XkEyXkFqcGdeQXVyMjY1MjkzMjE@._V1_FMjpg_UX1000_.jpg",
-                servers: [
-                    { name: "Serveur Premium", url: "#", quality: "4K" }
-                ]
-            },
-            {
-                id: 4,
-                title: "Mission Impossible 8",
-                year: 2025,
-                rating: "4.6/5",
-                plot: "Nouvelle mission d'Ethan Hunt et son équipe.",
-                poster: "https://m.media-amazon.com/images/M/MV5BZjBiOGIyY2YtOTA3OC00YzY1LThkYjktMGRkYTNhNTExY2I2XkEyXkFqcGdeQXVyMTEyMjM2NDc2._V1_FMjpg_UX1000_.jpg",
-                servers: [
-                    { name: "Serveur Rapide", url: "#", quality: "1080p" },
-                    { name: "Serveur International", url: "#", quality: "720p" }
-                ]
-            },
-            {
-                id: 5,
-                title: "Deadpool 3",
-                year: 2024,
-                rating: "4.9/5",
-                plot: "Deadpool rejoint l'univers cinématographique Marvel.",
-                poster: "https://m.media-amazon.com/images/M/MV5BMDdmMTBiNTYtMDIzNi00NGVlLWIzMDYtZTk3MTQ3NGQxZGEwXkEyXkFqcGdeQXVyMzMwOTU5MDk@._V1_FMjpg_UX1000_.jpg",
-                servers: [
-                    { name: "Serveur Premium", url: "#", quality: "4K" },
-                    { name: "Serveur Rapide", url: "#", quality: "1080p" }
-                ]
-            },
-            {
-                id: 6,
-                title: "Jurassic World 4",
-                year: 2025,
-                rating: "4.4/5",
-                plot: "Nouveau chapitre de la franchise Jurassic World.",
-                poster: "https://m.media-amazon.com/images/M/MV5BOTBjMjA4NmYtN2RjMi00YWU5LTk0OTgtZDY4YTM5ODFkZGU4XkEyXkFqcGdeQXVyNTI4MzE4MDU@._V1_FMjpg_UX1000_.jpg",
-                servers: [
-                    { name: "Serveur Rapide", url: "#", quality: "1080p" }
-                ]
             }
-        ];
-        // Générer les cartes de film
-        function generateMovieCards(movies, containerId) {
             const container = document.getElementById(containerId);
             container.innerHTML = '';
             movies.forEach(movie => {
                 const card = document.createElement('div');
                 card.className = 'movie-card bg-gray-800 rounded-lg overflow-hidden cursor-pointer';
-                card.dataset.id = movie.id;
                 card.innerHTML = `
                     <div class="relative">
-                        <img src="${movie.poster}" alt="${movie.title}" class="w-full h-64 object-cover">
                         <div class="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-50 transition flex items-center justify-center">
                             <i class="fas fa-play text-4xl opacity-0 hover:opacity-100 transition text-red-500"></i>
                         </div>
                     </div>
                     <div class="p-3">
                         <h3 class="font-semibold truncate">${movie.title}</h3>
-                        <div class="flex justify-between text-sm text-gray-400 mt-1">
-                            <span>${movie.year}</span>
-                            <span>${movie.rating}</span>
                         </div>
                     </div>
                 `;
-                card.addEventListener('click', () => openMovieModal(movie));
                 container.appendChild(card);
             });
         }
-        // Ouvrir le modal du film
         function openMovieModal(movie) {
-            document.getElementById('modal-poster').src = movie.poster;
-            document.getElementById('modal-title').textContent = movie.title;
-            document.getElementById('modal-year').textContent = movie.year;
-            document.getElementById('modal-rating').textContent = movie.rating;
-            document.getElementById('modal-plot').textContent = movie.plot;
-            const serversContainer = document.getElementById('modal-servers');
-            serversContainer.innerHTML = '';
-            movie.servers.forEach(server => {
-                const serverBtn = document.createElement('button');
-                serverBtn.className = 'server-btn bg-gray-700 hover:bg-gray-600 text-left p-3 rounded flex items-center';
-                serverBtn.innerHTML = `
-                    <i class="fas fa-server mr-2 text-blue-400"></i>
-                    <div>
-                        <div class="font-medium">${server.name}</div>
-                        <div class="text-xs text-gray-400">${server.quality}</div>
-                    </div>
-                `;
-                serverBtn.addEventListener('click', () => {
-                    document.querySelectorAll('#modal-servers .server-btn').forEach(btn => {
-                        btn.classList.remove('active');
-                    });
-                    serverBtn.classList.add('active');
-                    document.getElementById('play-movie').dataset.url = server.url;
-                });
-                serversContainer.appendChild(serverBtn);
-            });
-            // Sélectionner le premier serveur par défaut
-            if (movie.servers.length > 0) {
-                serversContainer.firstChild.click();
-            }
-            document.getElementById('movie-modal').classList.remove('hidden');
-            document.body.style.overflow = 'hidden';
         }
-        // Fermer le modal
-        function closeModal() {
-            document.getElementById('movie-modal').classList.add('hidden');
-            document.body.style.overflow = 'auto';
-        }
-        // Initialisation
-        document.addEventListener('DOMContentLoaded', () => {
-            // Générer les sections de films
-            generateMovieCards(moviesDatabase, 'new-movies');
-            generateMovieCards([...moviesDatabase].reverse(), 'top-movies');
-            // Fermer le modal
-            document.getElementById('close-modal').addEventListener('click', closeModal);
-            // Jouer le film (ouvrir dans un nouvel onglet)
-            document.getElementById('play-movie').addEventListener('click', () => {
-                const url = document.getElementById('play-movie').dataset.url;
-                if (url && url !== '#') {
-                    window.open(url, '_blank', 'noopener,noreferrer');
-                } else {
-                    alert('Ceci est une démonstration. Les liens de streaming ne sont pas fonctionnels.');
-                }
-            });
-            // Gestion des serveurs
-            document.querySelectorAll('.server-btn').forEach(btn => {
-                btn.addEventListener('click', () => {
-                    document.querySelectorAll('.server-btn').forEach(b => {
-                        b.classList.remove('active', 'bg-blue-600');
-                        b.classList.add('bg-gray-700');
-                    });
-                    btn.classList.add('active', 'bg-blue-600');
-                    btn.classList.remove('bg-gray-700');
-                });
-            });
         });
     </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-stream" 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>CineStream - Films en Français</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>
             height: 400px;
             object-fit: cover;
         }
+        .modal {
+            transition: opacity 0.3s ease;
         }
     </style>
 </head>
 <body class="bg-gray-900 text-white">
     <!-- Header -->
     <header class="bg-black py-4 px-6 shadow-lg sticky top-0 z-50">
+        <div class="container mx-auto flex justify-between items-center">
+            <div class="flex items-center">
                 <i class="fas fa-film text-red-600 text-3xl mr-3"></i>
+                <h1 class="text-2xl font-bold bg-gradient-to-r from-red-600 to-purple-600 bg-clip-text text-transparent">CineStream</h1>
             </div>
+            <nav class="hidden md:flex space-x-6">
                 <a href="#" class="hover:text-red-500 transition">Accueil</a>
+                <a href="#" class="hover:text-red-500 transition">Films</a>
+                <a href="#" class="hover:text-red-500 transition">Séries</a>
                 <a href="#" class="hover:text-red-500 transition">Ma liste</a>
+            </nav>
+            <div class="flex items-center space-x-4">
+                <div class="relative">
+                    <input type="text" placeholder="Rechercher..."
+                        class="bg-gray-800 rounded-full py-2 px-4 pl-10 text-white focus:border-blue-500 w-40 md:w-64">
+                    <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
+                </div>
+                <button class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-full transition">
                     Connexion
                 </button>
+            </div>
         </div>
     </header>
     <!-- Hero Section -->
+    <section class="relative h-96 bg-gradient-to-r from-gray-900 to-gray-800 flex items-center">
+        <div class="container mx-auto px-6 z-10">
+            <h2 class="text-4xl md:text-5xl font-bold mb-4">Vos films préférés en français</h2>
+            <p class="text-xl mb-6 max-w-2xl">Découvrez une vaste collection de films français et internationaux</p>
+            <div class="flex space-x-4">
+                <button class="bg-red-600 hover:bg-red-700 px-6 py-3 rounded-full transition flex items-center">
+                    <i class="fas fa-play mr-2"></i> Regarder maintenant
+                </button>
+                <button class="bg-gray-800 hover:bg-gray-700 px-6 py-3 rounded-full transition flex items-center">
+                    <i class="fas fa-info-circle mr-2"></i> Plus d'infos
                 </button>
             </div>
         </div>
+        <div class="absolute inset-0 bg-black opacity-50"></div>
     </section>
     <!-- Main Content -->
     <main class="container mx-auto px-4 py-8">
+        <section class="mb-12">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-bold">Nouveaux Films Français</h2>
+                <a href="#" class="text-gray-400 hover:text-white transition">Voir tout</a>
             </div>
+            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4" id="french-movies">
+                <!-- Films chargés via API -->
+                <div class="text-center py-8">
+                    <i class="fas fa-spinner fa-spin text-4xl text-red-500 mb-2"></i>
+                    <p>Chargement des films...</p>
+                </div>
+            </div>
+        </section>
         <section class="mb-12">
             <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-bold">Films Populaires</h2>
+                <a href="#" class="text-gray-400 hover:text-white transition">Voir tout</a>
             </div>
+            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4" id="popular-movies">
+                <!-- Films chargés via API -->
+                <div class="text-center py-8">
+                    <i class="fas fa-spinner fa-spin text-4xl text-red-500 mb-2"></i>
+                    <p>Chargement des films...</p>
+                </div>
             </div>
         </section>
         <section class="mb-12">
             <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-bold">Recommandations</h2>
+                <a href="#" class="text-gray-400 hover:text-white transition">Voir tout</a>
             </div>
+            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4" id="recommended-movies">
+                <!-- Films chargés via API -->
+                <div class="text-center py-8">
+                    <i class="fas fa-spinner fa-spin text-4xl text-red-500 mb-2"></i>
+                    <p>Chargement des films...</p>
+                </div>
             </div>
         </section>
     </main>
+    <!-- Player Modal -->
+    <div id="player-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-90 modal opacity-0 pointer-events-none">
+        <div class="relative w-full max-w-6xl bg-gray-900 rounded-lg overflow-hidden">
+            <button id="close-modal" class="absolute top-4 right-4 bg-gray-800 hover:bg-gray-700 rounded-full w-10 h-10 flex items-center justify-center z-50">
+                <i class="fas fa-times"></i>
+            </button>
+            <div class="aspect-w-16 aspect-h-9">
+                <div id="player-container" class="w-full h-0 pb-[56.25%] relative">
+                    <div class="absolute inset-0 flex items-center justify-center bg-gray-800">
+                        <div class="text-center">
+                            <i class="fas fa-exclamation-triangle text-4xl text-red-500 mb-4"></i>
+                            <h3 class="text-xl font-bold">Contenu non disponible</h3>
+                            <p class="mt-2 text-gray-400">Ceci est une démonstration. Le film n'est pas réellement disponible.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="p-6">
+                <h2 id="movie-title" class="text-2xl font-bold mb-2">Titre du film</h2>
+                <div class="flex items-center text-gray-400 mb-4">
+                    <span id="movie-year" class="mr-4">2023</span>
+                    <span id="movie-rating" class="flex items-center">
+                        <i class="fas fa-star text-yellow-400 mr-1"></i> 4.5
+                    </span>
+                </div>
+                <p id="movie-overview" class="text-gray-300">Description du film...</p>
+                <div class="mt-6 flex space-x-4">
+                    <button class="bg-red-600 hover:bg-red-700 px-6 py-2 rounded-full transition flex items-center">
+                        <i class="fas fa-play mr-2"></i> Lire
+                    </button>
+                    <button class="bg-gray-800 hover:bg-gray-700 px-6 py-2 rounded-full transition flex items-center">
+                        <i class="fas fa-plus mr-2"></i> Ma liste
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
     <!-- Footer -->
+    <footer class="bg-black py-12 px-6">
         <div class="container mx-auto grid grid-cols-1 md:grid-cols-4 gap-8">
             <div>
+                <h3 class="text-xl font-bold mb-4">CineStream</h3>
+                <p class="text-gray-500">Le meilleur des films français et internationaux en un seul endroit.</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">Nouveautés</a></li>
                 </ul>
             </div>
             <div>
+                <h4 class="text-lg font-semibold mb-4">Légal</h4>
                 <ul class="space-y-2">
+                    <li><a href="#" class="text-gray-400 hover:text-white transition">Conditions d'utilisation</a></li>
+                    <li><a href="#" class="text-gray-400 hover:text-white transition">Politique de confidentialité</a></li>
+                    <li><a href="#" class="text-gray-400 hover:text-white transition">Cookies</a></li>
                 </ul>
             </div>
             <div>
+                <h4 class="text-lg font-semibold mb-4">Contact</h4>
                 <ul class="space-y-2">
+                    <li class="flex items-center text-gray-400">
+                        <i class="fas fa-envelope mr-2"></i> [email protected]
+                    </li>
+                    <li class="flex items-center text-gray-400">
+                        <i class="fas fa-phone mr-2"></i> +33 1 23 45 67 89
+                    </li>
                 </ul>
+                <div class="flex space-x-4 mt-4">
+                    <a href="#" class="text-gray-400 hover:text-white transition">
+                        <i class="fab fa-facebook-f"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-white transition">
+                        <i class="fab fa-twitter"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-white transition">
+                        <i class="fab fa-instagram"></i>
+                    </a>
+                </div>
             </div>
         </div>
+        <div class="container mx-auto text-center text-gray-500 mt-12">
+            <p>Ce site est une démonstration. Les films ne sont pas disponibles en streaming.</p>
+            <p class="mt-2">© 2024 CineStream. Tous droits réservés.</p>
         </div>
     </footer>
     <script>
+        // Fonction pour charger les films depuis l'API TMDB
+        async function loadMovies() {
+            try {
+                // Films français
+                const frenchResponse = await fetch(`https://api.themoviedb.org/3/discover/movie?api_key=3fd2be6f0c70a2a598f084ddfb75487c&language=fr-FR&region=FR&sort_by=release_date.desc&with_original_language=fr`);
+                const frenchData = await frenchResponse.json();
+                displayMovies(frenchData.results.slice(0, 12), 'french-movies');
+                // Films populaires
+                const popularResponse = await fetch(`https://api.themoviedb.org/3/movie/popular?api_key=3fd2be6f0c70a2a598f084ddfb75487c&language=fr-FR&region=FR`);
+                const popularData = await popularResponse.json();
+                displayMovies(popularData.results.slice(0, 12), 'popular-movies');
+                // Films recommandés
+                const recommendedResponse = await fetch(`https://api.themoviedb.org/3/movie/top_rated?api_key=3fd2be6f0c70a2a598f084ddfb75487c&language=fr-FR&region=FR`);
+                const recommendedData = await recommendedResponse.json();
+                displayMovies(recommendedData.results.slice(0, 12), 'recommended-movies');
+            } catch (error) {
+                console.error("Erreur lors du chargement des films:", error);
+                document.getElementById('french-movies').innerHTML = '<p class="text-red-500">Erreur de chargement des films</p>';
+                document.getElementById('popular-movies').innerHTML = '<p class="text-red-500">Erreur de chargement des films</p>';
+                document.getElementById('recommended-movies').innerHTML = '<p class="text-red-500">Erreur de chargement des films</p>';
             }
+        }
+        // Afficher les films
+        function displayMovies(movies, containerId) {
             const container = document.getElementById(containerId);
             container.innerHTML = '';
             movies.forEach(movie => {
+                const posterPath = movie.poster_path
+                    ? `https://image.tmdb.org/t/p/w500${movie.poster_path}`
+                    : 'https://via.placeholder.com/500x750?text=Affiche+non+disponible';
                 const card = document.createElement('div');
                 card.className = 'movie-card bg-gray-800 rounded-lg overflow-hidden cursor-pointer';
                 card.innerHTML = `
                     <div class="relative">
+                        <img src="${posterPath}" alt="${movie.title}" class="w-full h-64 object-cover">
                         <div class="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-50 transition flex items-center justify-center">
                             <i class="fas fa-play text-4xl opacity-0 hover:opacity-100 transition text-red-500"></i>
                         </div>
                     </div>
                     <div class="p-3">
                         <h3 class="font-semibold truncate">${movie.title}</h3>
+                        <div class="text-sm text-gray-400 mt-1">
+                            ${movie.release_date ? movie.release_date.split('-')[0] : 'N/A'}
+                            <span class="float-right">
+                                <i class="fas fa-star text-yellow-400"></i> ${movie.vote_average ? movie.vote_average.toFixed(1) : 'N/A'}
+                            </span>
                         </div>
                     </div>
                 `;
+                card.addEventListener('click', () => {
+                    openMovieModal(movie);
+                });
                 container.appendChild(card);
             });
         }
+        // Ouvrir la modal avec les détails du film
         function openMovieModal(movie) {
+            const modal = document.getElementById('player-modal');
+            const posterPath = movie.poster_path
+                ? `https://image.tmdb.org/t/p/w500${movie.poster_path}`
+                : 'https://via.placeholder.com/500x750?text=Affiche+non+disponible';
+            document.getElementById('movie-title').textContent = movie.title;
+            document.getElementById('movie-year').textContent = movie.release_date ? movie.release_date.split('-')[0] : 'N/A';
+            document.getElementById('movie-rating').innerHTML = `<i class="fas fa-star text-yellow-400 mr-1"></i> ${movie.vote_average ? movie.vote_average.toFixed(1) : 'N/A'}`;
+            document.getElementById('movie-overview').textContent = movie.overview || 'Aucune description disponible.';
+            modal.classList.remove('opacity-0', 'pointer-events-none');
+            modal.classList.add('opacity-100');
         }
+        // Fermer la modal
+        document.getElementById('close-modal').addEventListener('click', () => {
+            const modal = document.getElementById('player-modal');
+            modal.classList.remove('opacity-100');
+            modal.classList.add('opacity-0', 'pointer-events-none');
         });
+        // Charger les films au démarrage
+        document.addEventListener('DOMContentLoaded', loadMovies);
     </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-stream" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt CHANGED Viewed

@@ -1,4 +1,7 @@
 creer un générateur de site de films streaming a regarder de suite avec plus de 5025200 boutons cliquable automatiques des film qui s'ouvre dans une nouvel fenetre quand on cique sure chaque bouton je veux des vrais film reel en automatique pas de site d exemple  , avec sont propre database de plus de 9726000 film complet directement pret a l'emploi les film je les veux tous en francais , avec des tres belle affiche reel des film et leur affiche d'origine , avec des serveurs de base de donnée avec leur lien d'origine
 activer toutes les boutons a regarder maintenant en mode automatique
 je veux que le site posséde sont vrais serveur de lient de film a jours
-je veut un site de films de streaming complet a regarder en francais et pret a l'emploi de suite , avec une grosse base de donnéés en syteme robotisé en automatique avec plussieur seveur des film avec les liens des films origineaux en automatique avec une database de 962000 film tres recents de 2023 a 2025  , ouvert les lecture  des films dans une nouvel fenetre

 creer un générateur de site de films streaming a regarder de suite avec plus de 5025200 boutons cliquable automatiques des film qui s'ouvre dans une nouvel fenetre quand on cique sure chaque bouton je veux des vrais film reel en automatique pas de site d exemple  , avec sont propre database de plus de 9726000 film complet directement pret a l'emploi les film je les veux tous en francais , avec des tres belle affiche reel des film et leur affiche d'origine , avec des serveurs de base de donnée avec leur lien d'origine
 activer toutes les boutons a regarder maintenant en mode automatique
 je veux que le site posséde sont vrais serveur de lient de film a jours
+je veut un site de films de streaming complet a regarder en francais et pret a l'emploi de suite , avec une grosse base de donnéés en syteme robotisé en automatique avec plussieur seveur des film avec les liens des films origineaux en automatique avec une database de 962000 film tres recents de 2023 a 2025  , ouvert les lecture  des films dans une nouvel fenetre
+je veux pas de demonstration je veux regarder des vrai fiolm complet en francais avec une database de 598888 film nouveautéé
+je veux pas d'exemple de film je veux des vrai site a regarder en automatique télécharger 969696996 film en francais a regarder en automatique avec les vrais image des affiches des film reel
+activer les lecture des film en automatique dans une nouvel fenetre