Hugging Face's logo

Spaces:
docto41
/
mega-market
Running

App Files Community
mega-market / index.html
docto41's picture
docto41
Add 2 files
7ac622f verified
raw
history blame contribute delete
63.4 kB
<!DOCTYPE html>
<html lang="fr">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>MegaStream - Plateforme 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>
 .dark-gradient {
 background: linear-gradient(135deg, #1a1a2e, #16213e);
 }
 .login-card {
 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
 }
 .input-field:focus {
 box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);
 }
 @keyframes shake {
 0%, 100% { transform: translateX(0); }
 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
 20%, 40%, 60%, 80% { transform: translateX(5px); }
 }
 .animate-shake {
 animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
 }
 .cursor-disabled {
 cursor: not-allowed;
 }
 .hero-gradient {
 background: linear-gradient(to right, #4f46e5, #7c3aed);
 }
 .movie-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
 }
 .admin-sidebar {
 transition: all 0.3s ease;
 }
 .movie-poster {
 height: 380px;
 object-fit: cover;
 width: 100%;
 }
 .movie-modal {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.9);
 z-index: 100;
 overflow-y: auto;
 }
 .movie-modal-content {
 background: linear-gradient(135deg, #1a1a2e, #16213e);
 margin: 50px auto;
 padding: 30px;
 max-width: 900px;
 border-radius: 10px;
 box-shadow: 0 0 20px rgba(0,0,0,0.5);
 }
 .close-modal {
 position: absolute;
 top: 20px;
 right: 30px;
 color: white;
 font-size: 30px;
 cursor: pointer;
 }
 </style>
</head>
<body class="bg-gray-900 min-h-screen">
 <!-- Page d'accueil publique -->
 <div id="publicPage" class="block">
 <!-- Navigation -->
 <nav class="bg-gray-800/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">
 <i class="fas fa-play-circle text-3xl text-indigo-500"></i>
 <span class="ml-2 text-white font-bold text-xl">MegaStream</span>
 </div>
 <div class="hidden md:block">
 <div class="ml-10 flex items-baseline space-x-4">
 <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium">Accueil</a>
 <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Films</a>
 <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Séries</a>
 <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Abonnements</a>
 </div>
 </div>
 </div>
 <div class="hidden md:block">
 <div class="ml-4 flex items-center md:ml-6">
 <button id="adminLoginBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
 <i class="fas fa-user-shield mr-2"></i> Espace Admin
 </button>
 </div>
 </div>
 </div>
 </div>
 </nav>
<!-- Hero Section -->
 <div class="hero-gradient pt-24 pb-32">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="md:flex md:items-center md:justify-between">
 <div class="flex-1 min-w-0">
 <h1 class="text-4xl font-bold text-white sm:text-5xl sm:tracking-tight lg:text-6xl">
 Votre divertissement sans limites
 </h1>
 <p class="mt-3 max-w-3xl text-xl text-indigo-100">
 Des milliers de films, séries et documentaires à portée de main. Abonnez-vous dès maintenant.
 </p>
 <div class="mt-8 flex">
 <div class="inline-flex rounded-md shadow">
 <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50">
 S'inscrire <i class="fas fa-arrow-right ml-2"></i>
 </a>
 </div>
 <div class="ml-3 inline-flex">
 <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-500 bg-opacity-60 hover:bg-opacity-70">
 <i class="fas fa-play mr-2"></i> Voir la démo
 </a>
 </div>
 </div>
 </div>
 <div class="mt-12 md:mt-0 md:ml-8">
 <img class="w-full max-w-lg rounded-lg shadow-2xl" src="https://image.tmdb.org/t/p/original/9dKCd55IuTT5QRs989m9Qlb7d8B.jpg" alt="Hero image - Avengers: Endgame">
 </div>
 </div>
 </div>
 </div>
<!-- Contenu principal -->
 <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
 <div class="text-center mb-12">
 <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
 Nos dernières sorties
 </h2>
 <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-300 sm:mt-4">
 Découvrez les nouveautés exclusives disponibles maintenant
 </p>
 </div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
 <!-- Film 1 - Avengers: Endgame -->
 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300">
 <img class="movie-poster" src="https://image.tmdb.org/t/p/w500/or06FN3Dka5tukK1e9sl16pB3iy.jpg" alt="Avengers: Endgame">
 <div class="p-4">
 <div class="flex justify-between items-start">
 <h3 class="text-lg font-bold text-white">Avengers: Endgame</h3>
 <span class="bg-indigo-600 text-white text-xs px-2 py-1 rounded">Nouveau</span>
 </div>
 <p class="text-gray-400 text-sm mt-1">Action, Aventure, Science-Fiction</p>
 <div class="mt-3 flex justify-between items-center">
 <span class="text-yellow-400"><i class="fas fa-star"></i> 8.4</span>
 <button class="view-movie-btn text-indigo-400 hover:text-indigo-300 text-sm font-medium" data-movie-id="1">
 Voir plus <i class="fas fa-chevron-right ml-1"></i>
 </button>
 </div>
 </div>
 </div>
<!-- Film 2 - Dune -->
 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300">
 <img class="movie-poster" src="https://image.tmdb.org/t/p/w500/8gLhu8UFPZfH2Hv11JhTZkb9CVl.jpg" alt="Dune">
 <div class="p-4">
 <div class="flex justify-between items-start">
 <h3 class="text-lg font-bold text-white">Dune</h3>
 <span class="bg-indigo-600 text-white text-xs px-2 py-1 rounded">Nouveau</span>
 </div>
 <p class="text-gray-400 text-sm mt-1">Science-Fiction, Aventure</p>
 <div class="mt-3 flex justify-between items-center">
 <span class="text-yellow-400"><i class="fas fa-star"></i> 8.0</span>
 <button class="view-movie-btn text-indigo-400 hover:text-indigo-300 text-sm font-medium" data-movie-id="2">
 Voir plus <i class="fas fa-chevron-right ml-1"></i>
 </button>
 </div>
 </div>
 </div>
<!-- Film 3 - Spider-Man: No Way Home -->
 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300">
 <img class="movie-poster" src="https://image.tmdb.org/t/p/w500/1g0dhYtq4irTY1GPXvft6k4YLjm.jpg" alt="Spider-Man: No Way Home">
 <div class="p-4">
 <div class="flex justify-between items-start">
 <h3 class="text-lg font-bold text-white">Spider-Man: No Way Home</h3>
 <span class="bg-indigo-600 text-white text-xs px-2 py-1 rounded">Nouveau</span>
 </div>
 <p class="text-gray-400 text-sm mt-1">Action, Aventure, Science-Fiction</p>
 <div class="mt-3 flex justify-between items-center">
 <span class="text-yellow-400"><i class="fas fa-star"></i> 8.1</span>
 <button class="view-movie-btn text-indigo-400 hover:text-indigo-300 text-sm font-medium" data-movie-id="3">
 Voir plus <i class="fas fa-chevron-right ml-1"></i>
 </button>
 </div>
 </div>
 </div>
<!-- Film 4 - The Batman -->
 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300">
 <img class="movie-poster" src="https://image.tmdb.org/t/p/w500/seyWFgGInaLqW7nOZvu0ZC95rtx.jpg" alt="The Batman">
 <div class="p-4">
 <div class="flex justify-between items-start">
 <h3 class="text-lg font-bold text-white">The Batman</h3>
 <span class="bg-indigo-600 text-white text-xs px-2 py-1 rounded">Nouveau</span>
 </div>
 <p class="text-gray-400 text-sm mt-1">Action, Crime, Drame</p>
 <div class="mt-3 flex justify-between items-center">
 <span class="text-yellow-400"><i class="fas fa-star"></i> 7.9</span>
 <button class="view-movie-btn text-indigo-400 hover:text-indigo-300 text-sm font-medium" data-movie-id="4">
 Voir plus <i class="fas fa-chevron-right ml-1"></i>
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Section Films populaires -->
 <div class="mt-20 text-center">
 <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
 Films populaires
 </h2>
 <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-300 sm:mt-4">
 Les films les plus regardés cette semaine
 </p>
 </div>
<div class="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
 <!-- Film 5 - Top Gun: Maverick -->
 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300">
 <img class="movie-poster" src="https://image.tmdb.org/t/p/w500/62HCnUTziyWcpDaBO2i1DX17ljH.jpg" alt="Top Gun: Maverick">
 <div class="p-4">
 <div class="flex justify-between items-start">
 <h3 class="text-lg font-bold text-white">Top Gun: Maverick</h3>
 <span class="bg-indigo-600 text-white text-xs px-2 py-1 rounded">Populaire</span>
 </div>
 <p class="text-gray-400 text-sm mt-1">Action, Drame</p>
 <div class="mt-3 flex justify-between items-center">
 <span class="text-yellow-400"><i class="fas fa-star"></i> 8.3</span>
 <button class="view-movie-btn text-indigo-400 hover:text-indigo-300 text-sm font-medium" data-movie-id="5">
 Voir plus <i class="fas fa-chevron-right ml-1"></i>
 </button>
 </div>
 </div>
 </div>
<!-- Film 6 - Everything Everywhere All at Once -->
 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300">
 <img class="movie-poster" src="https://image.tmdb.org/t/p/w500/w3LxiVYdWWRvEVlg5V0E8Bryzg2.jpg" alt="Everything Everywhere All at Once">
 <div class="p-4">
 <div class="flex justify-between items-start">
 <h3 class="text-lg font-bold text-white">Everything Everywhere All at Once</h3>
 <span class="bg-indigo-600 text-white text-xs px-2 py-1 rounded">Populaire</span>
 </div>
 <p class="text-gray-400 text-sm mt-1">Science-Fiction, Action, Comédie</p>
 <div class="mt-3 flex justify-between items-center">
 <span class="text-yellow-400"><i class="fas fa-star"></i> 8.3</span>
 <button class="view-movie-btn text-indigo-400 hover:text-indigo-300 text-sm font-medium" data-movie-id="6">
 Voir plus <i class="fas fa-chevron-right ml-1"></i>
 </button>
 </div>
 </div>
 </div>
<!-- Film 7 - The Northman -->
 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300">
 <img class="movie-poster" src="https://image.tmdb.org/t/p/w500/zhLKlUaF1SEpO58ppHIAyENkwgw.jpg" alt="The Northman">
 <div class="p-4">
 <div class="flex justify-between items-start">
 <h3 class="text-lg font-bold text-white">The Northman</h3>
 <span class="bg-indigo-600 text-white text-xs px-2 py-1 rounded">Populaire</span>
 </div>
 <p class="text-gray-400 text-sm mt-1">Action, Aventure, Drame</p>
 <div class="mt-3 flex justify-between items-center">
 <span class="text-yellow-400"><i class="fas fa-star"></i> 7.4</span>
 <button class="view-movie-btn text-indigo-400 hover:text-indigo-300 text-sm font-medium" data-movie-id="7">
 Voir plus <i class="fas fa-chevron-right ml-1"></i>
 </button>
 </div>
 </div>
 </div>
<!-- Film 8 - Doctor Strange in the Multiverse of Madness -->
 <div class="movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300">
 <img class="movie-poster" src="https://image.tmdb.org/t/p/w500/9Gtg2DzBhmYamXBS1hKAhiwbBKS.jpg" alt="Doctor Strange in the Multiverse of Madness">
 <div class="p-4">
 <div class="flex justify-between items-start">
 <h3 class="text-lg font-bold text-white">Doctor Strange 2</h3>
 <span class="bg-indigo-600 text-white text-xs px-2 py-1 rounded">Populaire</span>
 </div>
 <p class="text-gray-400 text-sm mt-1">Action, Aventure, Fantastique</p>
 <div class="mt-3 flex justify-between items-center">
 <span class="text-yellow-400"><i class="fas fa-star"></i> 7.4</span>
 <button class="view-movie-btn text-indigo-400 hover:text-indigo-300 text-sm font-medium" data-movie-id="8">
 Voir plus <i class="fas fa-chevron-right ml-1"></i>
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Call to Action -->
 <div class="mt-20 bg-indigo-700 rounded-xl overflow-hidden">
 <div class="px-6 py-12 sm:px-12 sm:py-16 lg:px-16 lg:py-20">
 <div class="text-center">
 <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
 <span class="block">Prêt à commencer?</span>
 <span class="block">Créez votre compte dès maintenant.</span>
 </h2>
 <p class="mt-3 max-w-2xl mx-auto text-xl text-indigo-100">
 Accédez à notre catalogue complet sans publicité.
 </p>
 <div class="mt-8">
 <a href="#" class="inline-flex items-center justify-center px-6 py-4 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-white hover:bg-indigo-50">
 Essai gratuit de 7 jours <i class="fas fa-gem ml-2"></i>
 </a>
 </div>
 </div>
 </div>
 </div>
 </main>
<!-- Pied de page -->
 <footer class="bg-gray-800">
 <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
 <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
 <div>
 <h3 class="text-white text-sm font-semibold tracking-wider uppercase">Navigation</h3>
 <ul class="mt-4 space-y-4">
 <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">Nouveautés</a></li>
 </ul>
 </div>
 <div>
 <h3 class="text-white text-sm font-semibold tracking-wider uppercase">Legal</h3>
 <ul class="mt-4 space-y-4">
 <li><a href="#" class="text-gray-400 hover:text-white">CGU</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">Cookies</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white">Mentions légales</a></li>
 </ul>
 </div>
 <div>
 <h3 class="text-white text-sm font-semibold tracking-wider uppercase">Support</h3>
 <ul class="mt-4 space-y-4">
 <li><a href="#" class="text-gray-400 hover:text-white">Centre d'aide</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white">Nous contacter</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">Statut</a></li>
 </ul>
 </div>
 <div>
 <h3 class="text-white text-sm font-semibold tracking-wider uppercase">Suivez-nous</h3>
 <div class="mt-4 flex space-x-6">
 <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>
 </div>
 <div class="mt-6">
 <button id="adminLoginBtn2" class="text-gray-400 hover:text-white text-sm font-medium flex items-center">
 <i class="fas fa-user-shield mr-2"></i> Accès administrateur
 </button>
 </div>
 </div>
 </div>
 <div class="mt-12 border-t border-gray-700 pt-8">
 <p class="text-gray-400 text-sm text-center">
 © 2023 MegaStream, Inc. Tous droits réservés.
 </p>
 </div>
 </div>
 </footer>
 </div>
<!-- Modal de connexion admin -->
 <div id="adminLoginModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
 <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
 <div class="fixed inset-0 transition-opacity" aria-hidden="true">
 <div class="absolute inset-0 bg-gray-900 opacity-90"></div>
 </div>
 <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
 <div class="dark-gradient login-card inline-block align-bottom rounded-2xl overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
 <div class="p-10">
 <div class="text-center mb-8">
 <div class="flex justify-center mb-4">
 <i class="fas fa-play-circle text-5xl text-indigo-500"></i>
 </div>
 <h1 class="text-2xl font-bold text-white">Connexion Administrateur</h1>
 <p class="text-gray-400 mt-2">Accès réservé au personnel autorisé</p>
 </div>
<form id="adminLoginForm" class="space-y-6">
 <div>
 <label for="email" class="block text-sm font-medium text-gray-300 mb-1">Email Administrateur</label>
 <div class="relative">
 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
 <i class="fas fa-envelope text-gray-500"></i>
 </div>
 <input type="email" id="email" name="email" required
 class="input-field bg-gray-800 text-white w-full pl-10 pr-3 py-3 rounded-lg border border-gray-700 focus:border-indigo-500 focus:outline-none transition"
 placeholder="admin@example.com" autocomplete="username">
 </div>
 </div>
<div>
 <label for="password" class="block text-sm font-medium text-gray-300 mb-1">Mot de passe</label>
 <div class="relative">
 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
 <i class="fas fa-lock text-gray-500"></i>
 </div>
 <input type="password" id="password" name="password" required
 class="input-field bg-gray-800 text-white w-full pl-10 pr-3 py-3 rounded-lg border border-gray-700 focus:border-indigo-500 focus:outline-none transition"
 placeholder="••••••••" autocomplete="current-password">
 <button type="button" id="togglePassword" class="absolute inset-y-0 right-0 pr-3 flex items-center focus:outline-none">
 <i class="fas fa-eye text-gray-500 hover:text-gray-300 cursor-pointer transition"></i>
 </button>
 </div>
 </div>
<div class="flex items-center justify-between">
 <div class="flex items-center">
 <input id="remember-me" name="remember-me" type="checkbox"
 class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-700 rounded bg-gray-800">
 <label for="remember-me" class="ml-2 block text-sm text-gray-300 cursor-pointer">Se souvenir de moi</label>
 </div>
 </div>
<div>
 <button type="submit" id="submitBtn"
 class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-4 rounded-lg transition flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-900">
 <i class="fas fa-sign-in-alt mr-2"></i> Se connecter
 </button>
 </div>
 </form>
<div id="errorMessage" class="mt-4 hidden">
 <div class="bg-red-900/50 border border-red-700 text-red-200 px-4 py-3 rounded-lg">
 <div class="flex items-center">
 <i class="fas fa-exclamation-circle mr-2"></i>
 <span id="errorText">Email ou mot de passe incorrect</span>
 </div>
 </div>
 </div>
 </div>
<div class="bg-gray-800/50 px-6 py-4 text-center">
 <p class="text-xs text-gray-400">
 © 2023 MegaStream Admin Panel. Accès strictement réservé aux administrateurs autorisés.
 </p>
 </div>
 </div>
 </div>
 </div>
<!-- Tableau de bord admin (caché par défaut) -->
 <div id="adminDashboard" class="hidden min-h-screen">
 <div class="flex h-screen bg-gray-100">
 <!-- Sidebar -->
 <div class="admin-sidebar bg-gray-900 text-white w-64 flex-shrink-0">
 <div class="flex items-center justify-center h-16 px-4 bg-gray-800">
 <div class="flex items-center">
 <i class="fas fa-play-circle text-2xl text-indigo-500"></i>
 <span class="ml-2 text-xl font-bold">MegaStream Admin</span>
 </div>
 <button id="closeSidebar" class="md:hidden ml-auto text-gray-400 hover:text-white">
 <i class="fas fa-times"></i>
 </button>
 </div>
 <div class="px-4 py-6">
 <nav>
 <div>
 <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Gestion</h3>
 <div class="mt-4 space-y-1">
 <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md bg-gray-800 text-white">
 <i class="fas fa-tachometer-alt mr-3 text-gray-300"></i>
 Tableau de bord
 </a>
 <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-800 hover:text-white">
 <i class="fas fa-film mr-3"></i>
 Contenu
 </a>
 <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-800 hover:text-white">
 <i class="fas fa-users mr-3"></i>
 Utilisateurs
 </a>
 <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-800 hover:text-white">
 <i class="fas fa-chart-line mr-3"></i>
 Statistiques
 </a>
 </div>
 </div>
 <div class="mt-8">
 <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Paramètres</h3>
 <div class="mt-4 space-y-1">
 <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-800 hover:text-white">
 <i class="fas fa-cog mr-3"></i>
 Configuration
 </a>
 <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-800 hover:text-white">
 <i class="fas fa-user-shield mr-3"></i>
 Administrateurs
 </a>
 <button id="logoutBtn" class="w-full flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-800 hover:text-white">
 <i class="fas fa-sign-out-alt mr-3"></i>
 Déconnexion
 </button>
 </div>
 </div>
 </nav>
 </div>
 </div>
<!-- Main content -->
 <div class="flex-1 flex flex-col overflow-hidden">
 <!-- Topbar -->
 <header class="bg-white shadow-sm">
 <div class="flex justify-between items-center px-6 py-4">
 <div class="flex items-center">
 <button id="sidebarToggle" class="text-gray-500 focus:outline-none lg:hidden">
 <i class="fas fa-bars"></i>
 </button>
 <h1 class="ml-4 text-xl font-semibold text-gray-900">Tableau de bord</h1>
 </div>
 <div class="flex items-center">
 <div class="relative">
 <button class="flex items-center text-gray-500 hover:text-gray-700 focus:outline-none">
 <i class="fas fa-bell"></i>
 <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
 </button>
 </div>
 <div class="ml-4 relative">
 <div class="flex items-center">
 <div class="h-8 w-8 rounded-full bg-indigo-500 flex items-center justify-center text-white font-semibold">
 A
 </div>
 <span class="ml-2 text-sm font-medium text-gray-700">Admin</span>
 </div>
 </div>
 </div>
 </div>
 </header>
<!-- Content -->
 <main class="flex-1 overflow-y-auto bg-gray-50">
 <div class="px-6 py-8">
 <div class="max-w-7xl mx-auto">
 <!-- Stats -->
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
 <div class="bg-white rounded-lg shadow p-6">
 <div class="flex items-center">
 <div class="p-3 rounded-full bg-indigo-100 text-indigo-600">
 <i class="fas fa-users text-xl"></i>
 </div>
 <div class="ml-4">
 <p class="text-sm font-medium text-gray-500">Utilisateurs</p>
 <p class="text-2xl font-semibold text-gray-900">1,248</p>
 </div>
 </div>
 </div>
 <div class="bg-white rounded-lg shadow p-6">
 <div class="flex items-center">
 <div class="p-3 rounded-full bg-green-100 text-green-600">
 <i class="fas fa-film text-xl"></i>
 </div>
 <div class="ml-4">
 <p class="text-sm font-medium text-gray-500">Films</p>
 <p class="text-2xl font-semibold text-gray-900">856</p>
 </div>
 </div>
 </div>
 <div class="bg-white rounded-lg shadow p-6">
 <div class="flex items-center">
 <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
 <i class="fas fa-tv text-xl"></i>
 </div>
 <div class="ml-4">
 <p class="text-sm font-medium text-gray-500">Séries</p>
 <p class="text-2xl font-semibold text-gray-900">312</p>
 </div>
 </div>
 </div>
 <div class="bg-white rounded-lg shadow p-6">
 <div class="flex items-center">
 <div class="p-3 rounded-full bg-red-100 text-red-600">
 <i class="fas fa-dollar-sign text-xl"></i>
 </div>
 <div class="ml-4">
 <p class="text-sm font-medium text-gray-500">Revenus</p>
 <p class="text-2xl font-semibold text-gray-900">$24,780</p>
 </div>
 </div>
 </div>
 </div>
<!-- Recent activity -->
 <div class="mt-8 bg-white rounded-lg shadow overflow-hidden">
 <div class="px-6 py-4 border-b border-gray-200">
 <h2 class="text-lg font-semibold text-gray-900">Activité récente</h2>
 </div>
 <div class="divide-y divide-gray-200">
 <div class="px-6 py-4">
 <div class="flex items-center">
 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center">
 <i class="fas fa-user-plus text-indigo-600"></i>
 </div>
 <div class="ml-4">
 <p class="text-sm font-medium text-gray-900">Nouvel utilisateur inscrit</p>
 <p class="text-sm text-gray-500">John Doe s'est inscrit il y a 2 minutes</p>
 </div>
 <div class="ml-auto text-sm text-gray-500">
 2 min
 </div>
 </div>
 </div>
 <div class="px-6 py-4">
 <div class="flex items-center">
 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
 <i class="fas fa-film text-green-600"></i>
 </div>
 <div class="ml-4">
 <p class="text-sm font-medium text-gray-900">Nouveau film ajouté</p>
 <p class="text-sm text-gray-500">"Dune" a été ajouté à la bibliothèque</p>
 </div>
 <div class="ml-auto text-sm text-gray-500">
 15 min
 </div>
 </div>
 </div>
 <div class="px-6 py-4">
 <div class="flex items-center">
 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-100 flex items-center justify-center">
 <i class="fas fa-exclamation-triangle text-yellow-600"></i>
 </div>
 <div class="ml-4">
 <p class="text-sm font-medium text-gray-900">Problème de paiement</p>
 <p class="text-sm text-gray-500">Le paiement de Jane Smith a échoué</p>
 </div>
 <div class="ml-auto text-sm text-gray-500">
 1 h
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Quick actions -->
 <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
 <div class="bg-white rounded-lg shadow overflow-hidden">
 <div class="px-6 py-4 border-b border-gray-200">
 <h2 class="text-lg font-semibold text-gray-900">Ajouter du contenu</h2>
 </div>
 <div class="p-6">
 <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-md flex items-center justify-center">
 <i class="fas fa-plus mr-2"></i> Nouveau film
 </button>
 <button class="mt-3 w-full bg-indigo-100 hover:bg-indigo-200 text-indigo-700 py-2 px-4 rounded-md flex items-center justify-center">
 <i class="fas fa-plus mr-2"></i> Nouvelle série
 </button>
 </div>
 </div>
 <div class="bg-white rounded-lg shadow overflow-hidden">
 <div class="px-6 py-4 border-b border-gray-200">
 <h2 class="text-lg font-semibold text-gray-900">Gestion des utilisateurs</h2>
 </div>
 <div class="p-6">
 <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-md flex items-center justify-center">
 <i class="fas fa-user-plus mr-2"></i> Ajouter un utilisateur
 </button>
 <button class="mt-3 w-full bg-indigo-100 hover:bg-indigo-200 text-indigo-700 py-2 px-4 rounded-md flex items-center justify-center">
 <i class="fas fa-search mr-2"></i> Rechercher un utilisateur
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
 </main>
 </div>
 </div>
 </div>
<!-- Modal pour afficher les détails du film -->
 <div id="movieModal" class="movie-modal">
 <div class="movie-modal-content">
 <span class="close-modal">&times;</span>
 <div id="movieModalContent" class="grid grid-cols-1 md:grid-cols-2 gap-8">
 <!-- Le contenu sera chargé dynamiquement ici -->
 </div>
 </div>
 </div>
<script>
 document.addEventListener('DOMContentLoaded', function() {
 // Éléments du DOM
 const publicPage = document.getElementById('publicPage');
 const adminLoginModal = document.getElementById('adminLoginModal');
 const adminDashboard = document.getElementById('adminDashboard');
 const adminLoginBtn = document.getElementById('adminLoginBtn');
 const adminLoginBtn2 = document.getElementById('adminLoginBtn2');
 const togglePassword = document.getElementById('togglePassword');
 const passwordInput = document.getElementById('password');
 const adminLoginForm = document.getElementById('adminLoginForm');
 const errorMessage = document.getElementById('errorMessage');
 const errorText = document.getElementById('errorText');
 const submitBtn = document.getElementById('submitBtn');
 const logoutBtn = document.getElementById('logoutBtn');
 const sidebarToggle = document.getElementById('sidebarToggle');
 const closeSidebar = document.getElementById('closeSidebar');
 const sidebar = document.querySelector('.admin-sidebar');
 const movieModal = document.getElementById('movieModal');
 const closeModalBtn = document.querySelector('.close-modal');
 const movieModalContent = document.getElementById('movieModalContent');
 const viewMovieBtns = document.querySelectorAll('.view-movie-btn');
 // Données des films
 const movies = {
 1: {
 title: "Avengers: Endgame",
 poster: "https://image.tmdb.org/t/p/w500/or06FN3Dka5tukK1e9sl16pB3iy.jpg",
 backdrop: "https://image.tmdb.org/t/p/original/7RyHsO4yDXtBv1zUU3mTpHeQ0d5.jpg",
 rating: 8.4,
 year: 2019,
 duration: "3h 1m",
 genres: ["Action", "Aventure", "Science-Fiction"],
 synopsis: "Après les événements dévastateurs d'Avengers: Infinity War, l'univers est en ruines. Avec l'aide des alliés restants, les Avengers se réunissent pour inverser l'action de Thanos et rétablir l'ordre dans l'univers.",
 director: "Anthony Russo, Joe Russo",
 cast: ["Robert Downey Jr.", "Chris Evans", "Mark Ruffalo", "Chris Hemsworth"],
 trailer: "https://www.youtube.com/embed/TcMBFSGVi1c"
 },
 2: {
 title: "Dune",
 poster: "https://image.tmdb.org/t/p/w500/8gLhu8UFPZfH2Hv11JhTZkb9CVl.jpg",
 backdrop: "https://image.tmdb.org/t/p/original/jYEW5xZkZk2WTrdbMGAPFuBqbDc.jpg",
 rating: 8.0,
 year: 2021,
 duration: "2h 35m",
 genres: ["Science-Fiction", "Aventure"],
 synopsis: "Paul Atreides, un jeune homme brillant et doué, doit se rendre sur la planète la plus dangereuse de l'univers pour assurer l'avenir de sa famille et de son peuple. Alors que des forces maléfiques se déchaînent pour s'emparer d'une ressource unique capable de libérer le potentiel humain le plus grand, seul celui qui peut conquérir sa peur survivra.",
 director: "Denis Villeneuve",
 cast: ["Timothée Chalamet", "Rebecca Ferguson", "Oscar Isaac", "Zendaya"],
 trailer: "https://www.youtube.com/embed/n9xhJrPXop4"
 },
 3: {
 title: "Spider-Man: No Way Home",
 poster: "https://image.tmdb.org/t/p/w500/1g0dhYtq4irTY1GPXvft6k4YLjm.jpg",
 backdrop: "https://image.tmdb.org/t/p/original/14QbnygCuTO0vl7CAFmPf1ELZQc.jpg",
 rating: 8.1,
 year: 2021,
 duration: "2h 28m",
 genres: ["Action", "Aventure", "Science-Fiction"],
 synopsis: "Pour la première fois dans l'histoire cinématographique de Spider-Man, notre héros est démasqué et ne peut plus séparer sa vie normale de ses responsabilités de super-héros. Quand il demande de l'aide au Docteur Strange, les enjeux deviennent encore plus dangereux, le forçant à découvrir ce que signifie vraiment être Spider-Man.",
 director: "Jon Watts",
 cast: ["Tom Holland", "Zendaya", "Benedict Cumberbatch", "Jacob Batalon"],
 trailer: "https://www.youtube.com/embed/JfVOs4VSpmA"
 },
 4: {
 title: "The Batman",
 poster: "https://image.tmdb.org/t/p/w500/seyWFgGInaLqW7nOZvu0ZC95rtx.jpg",
 backdrop: "https://image.tmdb.org/t/p/original/AokFVAl1JVooW1uz2V2vxNUxfit.jpg",
 rating: 7.9,
 year: 2022,
 duration: "2h 56m",
 genres: ["Action", "Crime", "Drame"],
 synopsis: "Deux ans de traque dans les rues ont fait de Batman une figure de terreur à Gotham City. Lorsqu'un tueur vise l'élite de Gotham avec une série de machinations sadiques, une piste d'indices énigmatiques lance le plus grand détective du monde dans une enquête dans le milieu criminel, où il rencontre des personnages comme Catwoman, le Pingouin, Carmine Falcone et le Riddler.",
 director: "Matt Reeves",
 cast: ["Robert Pattinson", "Zoë Kravitz", "Paul Dano", "Colin Farrell"],
 trailer: "https://www.youtube.com/embed/mqqft2x_Aa4"
 },
 5: {
 title: "Top Gun: Maverick",
 poster: "https://image.tmdb.org/t/p/w500/62HCnUTziyWcpDaBO2i1DX17ljH.jpg",
 backdrop: "https://image.tmdb.org/t/p/original/AaV1YIDwk9bX3KhpAi9wZWUbuS3.jpg",
 rating: 8.3,
 year: 2022,
 duration: "2h 11m",
 genres: ["Action", "Drame"],
 synopsis: "Après plus de trente ans de service comme l'un des meilleurs aviateurs de la Marine, Pete 'Maverick' Mitchell est là où il appartient, repoussant les limites en tant que pilote d'essai courageux et esquivant l'avancement de grade qui le clouerait au sol. Lorsqu'il est chargé de former un détachement de diplômés de Top Gun pour une mission spécialisée que personne n'a jamais vue, Maverick rencontre le lieutenant Bradley Bradshaw, le fils de son ami défunt, Goose.",
 director: "Joseph Kosinski",
 cast: ["Tom Cruise", "Miles Teller", "Jennifer Connelly", "Jon Hamm"],
 trailer: "https://www.youtube.com/embed/qSqVVswa420"
 },
 6: {
 title: "Everything Everywhere All at Once",
 poster: "https://image.tmdb.org/t/p/w500/w3LxiVYdWWRvEVlg5V0E8Bryzg2.jpg",
 backdrop: "https://image.tmdb.org/t/p/original/7J7H7B1oKakIhQEQb7Ytwa3hQxQ.jpg",
 rating: 8.3,
 year: 2022,
 duration: "2h 19m",
 genres: ["Science-Fiction", "Action", "Comédie"],
 synopsis: "Une femme chinoise vieillissante est emportée dans une aventure folle où seule elle peut sauver le monde en explorant d'autres univers qui se connectent aux vies qu'elle aurait pu mener.",
 director: "Daniel Kwan, Daniel Scheinert",
 cast: ["Michelle Yeoh", "Stephanie Hsu", "Ke Huy Quan", "Jamie Lee Curtis"],
 trailer: "https://www.youtube.com/embed/wxN1T1uxQ2g"
 },
 7: {
 title: "The Northman",
 poster: "https://image.tmdb.org/t/p/w500/zhLKlUaF1SEpO58ppHIAyENkwgw.jpg",
 backdrop: "https://image.tmdb.org/t/p/original/cdOQk6dAGD5xQrY3ZbCUFQ1K8hN.jpg",
 rating: 7.4,
 year: 2022,
 duration: "2h 17m",
 genres: ["Action", "Aventure", "Drame"],
 synopsis: "Prince Amleth est sur le point de devenir un homme quand son père est brutalement assassiné par son oncle, qui kidnappe ensuite la mère du garçon. Deux décennies plus tard, Amleth est maintenant un Viking qui a des compétences pour ravager. Un jour, il rencontre une voyante qui lui rappelle sa promesse : sauver sa mère, tuer son oncle et venger son père.",
 director: "Robert Eggers",
 cast: ["Alexander Skarsgård", "Nicole Kidman", "Anya Taylor-Joy", "Ethan Hawke"],
 trailer: "https://www.youtube.com/embed/oMSdFM12hOw"
 },
 8: {
 title: "Doctor Strange in the Multiverse of Madness",
 poster: "https://image.tmdb.org/t/p/w500/9Gtg2DzBhmYamXBS1hKAhiwbBKS.jpg",
 backdrop: "https://image.tmdb.org/t/p/original/gUNRlH66yNDH3KQY1e7iTba6zYc.jpg",
 rating: 7.4,
 year: 2022,
 duration: "2h 6m",
 genres: ["Action", "Aventure", "Fantastique"],
 synopsis: "Le Docteur Strange, avec l'aide de alliés mystiques aussi bien que nouveaux et familiers, traverse les mondes mentaux hallucinants et dangereux de la Multivers pour affronter un nouvel adversaire mystérieux.",
 director: "Sam Raimi",
 cast: ["Benedict Cumberbatch", "Elizabeth Olsen", "Chiwetel Ejiofor", "Benedict Wong"],
 trailer: "https://www.youtube.com/embed/aWzlQ2N6qqg"
 }
 };
 // Ouvrir le modal de connexion admin
 if (adminLoginBtn) {
 adminLoginBtn.addEventListener('click', function() {
 adminLoginModal.classList.remove('hidden');
 });
 }
 if (adminLoginBtn2) {
 adminLoginBtn2.addEventListener('click', function() {
 adminLoginModal.classList.remove('hidden');
 });
 }
 // Fermer le modal de connexion admin
 if (closeModalBtn) {
 closeModalBtn.addEventListener('click', function() {
 movieModal.style.display = "none";
 });
 }
 // Fermer le modal en cliquant à l'extérieur
 window.addEventListener('click', function(e) {
 if (e.target === adminLoginModal) {
 adminLoginModal.classList.add('hidden');
 }
 if (e.target === movieModal) {
 movieModal.style.display = "none";
 }
 });
 // Basculer la visibilité du mot de passe
 if (togglePassword && passwordInput) {
 togglePassword.addEventListener('click', function() {
 const icon = this.querySelector('i');
if (passwordInput.type === 'password') {
 passwordInput.type = 'text';
 icon.classList.replace('fa-eye', 'fa-eye-slash');
 } else {
 passwordInput.type = 'password';
 icon.classList.replace('fa-eye-slash', 'fa-eye');
 }
// Remettre le focus sur le champ de mot de passe
 passwordInput.focus();
 });
 }
 // Gérer la soumission du formulaire
 if (adminLoginForm) {
 adminLoginForm.addEventListener('submit', function(e) {
 e.preventDefault();
const email = document.getElementById('email').value.trim();
 const password = passwordInput.value;
// Désactiver le bouton pendant le traitement
 submitBtn.disabled = true;
 submitBtn.classList.add('cursor-disabled');
// Vérifier les identifiants
 if ((email === "vgp.bavol@gmail.com" && password === "Admin270574@") ||
(email === "doctorblog.fr@gmail.com" && password === "Admin270574@")) {
 // Cacher le message d'erreur s'il est visible
 errorMessage.classList.add('hidden');
// Changer l'apparence du bouton pour indiquer le succès
 submitBtn.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Connexion réussie';
 submitBtn.classList.remove('bg-indigo-600', 'hover:bg-indigo-700');
 submitBtn.classList.add('bg-green-600', 'hover:bg-green-700');
// Simuler une redirection après 1.5 secondes
 setTimeout(() => {
 adminLoginModal.classList.add('hidden');
 publicPage.classList.add('hidden');
 adminDashboard.classList.remove('hidden');
 }, 1000);
} else {
 // Afficher un message d'erreur
 errorText.textContent = 'Accès refusé. Email ou mot de passe incorrect.';
 errorMessage.classList.remove('hidden');
// Secouer l'animation pour l'effet d'erreur
 adminLoginForm.classList.add('animate-shake');
 setTimeout(() => {
 adminLoginForm.classList.remove('animate-shake');
 }, 500);
// Réactiver le bouton
 submitBtn.disabled = false;
 submitBtn.classList.remove('cursor-disabled');
 }
 });
 }
 // Réactiver le formulaire si l'utilisateur modifie un champ après erreur
 const emailInput = document.getElementById('email');
 if (emailInput && passwordInput) {
 [emailInput, passwordInput].forEach(input => {
 input.addEventListener('input', function() {
 if (submitBtn.disabled) {
 submitBtn.disabled = false;
 submitBtn.classList.remove('cursor-disabled');
 submitBtn.innerHTML = '<i class="fas fa-sign-in-alt mr-2"></i> Se connecter';
 submitBtn.classList.remove('bg-green-600', 'hover:bg-green-700');
 submitBtn.classList.add('bg-indigo-600', 'hover:bg-indigo-700');
 }
 });
 });
 }
 // Déconnexion
 if (logoutBtn) {
 logoutBtn.addEventListener('click', function() {
 adminDashboard.classList.add('hidden');
 publicPage.classList.remove('hidden');
 });
 }
 // Toggle sidebar on mobile
 if (sidebarToggle && sidebar) {
 sidebarToggle.addEventListener('click', function() {
 sidebar.classList.toggle('-translate-x-full');
 });
 }
 if (closeSidebar && sidebar) {
 closeSidebar.addEventListener('click', function() {
 sidebar.classList.add('-translate-x-full');
 });
 }
 // Gestion des clics sur les boutons "Voir plus" des films
 viewMovieBtns.forEach(btn => {
 btn.addEventListener('click', function() {
 const movieId = this.getAttribute('data-movie-id');
 showMovieDetails(movieId);
 });
 });
 // Fonction pour afficher les détails d'un film
 function showMovieDetails(movieId) {
 const movie = movies[movieId];
if (!movie) return;
movieModalContent.innerHTML = `
 <div>
 <img src="${movie.poster}" alt="${movie.title}" class="rounded-lg shadow-lg w-full">
 <div class="mt-6 flex justify-center">
 <button class="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg font-bold flex items-center">
 <i class="fas fa-play mr-2"></i> Regarder le film
 </button>
 </div>
 </div>
 <div>
 <h2 class="text-3xl font-bold text-white">${movie.title} <span class="text-gray-400">(${movie.year})</span></h2>
 <div class="flex items-center mt-2">
 <span class="text-yellow-400 mr-2"><i class="fas fa-star"></i> ${movie.rating}/10</span>
 <span class="text-gray-400 mx-2">•</span>
 <span class="text-gray-400">${movie.duration}</span>
 <span class="text-gray-400 mx-2">•</span>
 <span class="text-gray-400">${movie.genres.join(", ")}</span>
 </div>
<h3 class="text-xl font-semibold text-white mt-6">Synopsis</h3>
 <p class="text-gray-300 mt-2">${movie.synopsis}</p>
<div class="grid grid-cols-2 gap-4 mt-6">
 <div>
 <h4 class="text-lg font-semibold text-white">Réalisateur</h4>
 <p class="text-gray-300">${movie.director}</p>
 </div>
 <div>
 <h4 class="text-lg font-semibold text-white">Distribution</h4>
 <p class="text-gray-300">${movie.cast.slice(0, 3).join(", ")}</p>
 </div>
 </div>
<h3 class="text-xl font-semibold text-white mt-6">Bande-annonce</h3>
 <div class="mt-4 aspect-w-16 aspect-h-9">
 <iframe width="100%" height="315" src="${movie.trailer}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="rounded-lg"></iframe>
 </div>
 </div>
 `;
movieModal.style.display = "block";
 }
 // Vérifier si l'utilisateur est déjà connecté (simulation)
 const isLoggedIn = localStorage.getItem('adminLoggedIn');
 if (isLoggedIn === 'true') {
 publicPage.classList.add('hidden');
 adminDashboard.classList.remove('hidden');
 }
 });
 </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/mega-market" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>