Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PlateformeCinéma - 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> | |
| @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: #0f0f1a; | |
| color: #ffffff; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); | |
| } | |
| .movie-card { | |
| transition: all 0.3s ease; | |
| transform: scale(1); | |
| } | |
| .movie-card:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); | |
| } | |
| .genre-tag { | |
| transition: all 0.2s ease; | |
| } | |
| .genre-tag:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | |
| } | |
| .search-input:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn 0.5s ease-out forwards; | |
| } | |
| .delay-100 { animation-delay: 0.1s; } | |
| .delay-200 { animation-delay: 0.2s; } | |
| .delay-300 { animation-delay: 0.3s; } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Barre de navigation --> | |
| <nav class="bg-gray-900 bg-opacity-90 backdrop-blur-md fixed w-full z-50 shadow-lg"> | |
| <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"> | |
| <a href="#" class="flex items-center"> | |
| <i class="fas fa-film text-purple-500 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-white">Plateforme<span class="text-purple-500">Cinéma</span></span> | |
| </a> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#" class="text-white hover:text-purple-400 px-3 py-2 rounded-md text-sm font-medium transition-colors"> | |
| <i class="fas fa-home mr-1"></i> Accueil | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"> | |
| <i class="fas fa-fire mr-1"></i> Tendances | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"> | |
| <i class="fas fa-tv mr-1"></i> Séries | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"> | |
| <i class="fas fa-film mr-1"></i> Films | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"> | |
| <i class="fas fa-bookmark mr-1"></i> 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"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-search text-gray-400"></i> | |
| </div> | |
| <input type="text" class="search-input bg-gray-700 text-white rounded-full py-1 pl-10 pr-4 focus:ring-2 focus:ring-purple-500 focus:bg-gray-600 transition-all w-64" placeholder="Rechercher..."> | |
| </div> | |
| <div class="ml-3 relative"> | |
| <div> | |
| <button class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu"> | |
| <span class="sr-only">Ouvrir le menu utilisateur</span> | |
| <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profil utilisateur"> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false"> | |
| <span class="sr-only">Ouvrir le menu principal</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Menu mobile --> | |
| <div class="md:hidden hidden" id="mobile-menu"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#" class="text-white block px-3 py-2 rounded-md text-base font-medium"> | |
| <i class="fas fa-home mr-2"></i> Accueil | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium"> | |
| <i class="fas fa-fire mr-2"></i> Tendances | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium"> | |
| <i class="fas fa-tv mr-2"></i> Séries | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium"> | |
| <i class="fas fa-film mr-2"></i> Films | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium"> | |
| <i class="fas fa-bookmark mr-2"></i> Ma liste | |
| </a> | |
| </div> | |
| <div class="pt-4 pb-3 border-t border-gray-700"> | |
| <div class="flex items-center px-5"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profil utilisateur"> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="text-base font-medium text-white">Jean Dupont</div> | |
| <div class="text-sm font-medium text-gray-400">jean@example.com</div> | |
| </div> | |
| </div> | |
| <div class="mt-3 px-2 space-y-1"> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Votre profil</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Paramètres</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Déconnexion</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <header 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 md:items-center md:justify-between"> | |
| <div class="md:w-1/2 animate-fade-in"> | |
| <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-4"> | |
| Films, séries et bien plus en <span class="text-purple-400">streaming</span> | |
| </h1> | |
| <p class="text-lg text-gray-300 mb-8"> | |
| Regardez ce que vous voulez, quand vous voulez. Sans publicité. Des milliers de films et séries à découvrir. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg transition-colors flex items-center justify-center"> | |
| <i class="fas fa-play mr-2"></i> Commencer à regarder | |
| </button> | |
| <button class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg transition-colors flex items-center justify-center"> | |
| <i class="fas fa-info-circle mr-2"></i> Plus d'informations | |
| </button> | |
| </div> | |
| </div> | |
| <div class="hidden md:block md:w-1/2 animate-fade-in delay-100"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/600x400/1a1a2e/ffffff?text=Featured+Movie" alt="Film vedette" class="rounded-lg shadow-2xl border-4 border-gray-700 transform rotate-2"> | |
| <div class="absolute -bottom-4 -right-4 bg-purple-600 text-white px-4 py-2 rounded-lg shadow-lg"> | |
| <span class="font-bold">Nouveauté</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Contenu principal --> | |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <!-- Section des films tendance --> | |
| <section class="mb-12 animate-fade-in delay-200"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-2xl font-bold flex items-center"> | |
| <i class="fas fa-fire text-red-500 mr-3"></i> | |
| <span>Films tendance cette semaine</span> | |
| </h2> | |
| <a href="#" class="text-purple-400 hover:text-purple-300 flex items-center text-sm font-medium"> | |
| 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"> | |
| <!-- Film 1 --> | |
| <div class="movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x450/1a1a2e/ffffff?text=Movie+1" alt="Film 1" class="w-full h-auto"> | |
| <div class="absolute top-2 right-2 bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded flex items-center"> | |
| <i class="fas fa-star mr-1"></i> 8.5 | |
| </div> | |
| <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white rounded-full w-12 h-12 flex items-center justify-center"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-semibold text-white truncate">Le Dernier Souffle</h3> | |
| <div class="flex justify-between items-center mt-1 text-sm text-gray-400"> | |
| <span>2023</span> | |
| <span class="bg-gray-700 px-2 py-1 rounded text-xs">HD</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Film 2 --> | |
| <div class="movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x450/1a1a2e/ffffff?text=Movie+2" alt="Film 2" class="w-full h-auto"> | |
| <div class="absolute top-2 right-2 bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded flex items-center"> | |
| <i class="fas fa-star mr-1"></i> 7.9 | |
| </div> | |
| <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white rounded-full w-12 h-12 flex items-center justify-center"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-semibold text-white truncate">L'Évasion Finale</h3> | |
| <div class="flex justify-between items-center mt-1 text-sm text-gray-400"> | |
| <span>2022</span> | |
| <span class="bg-gray-700 px-2 py-1 rounded text-xs">4K</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Film 3 --> | |
| <div class="movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x450/1a1a2e/ffffff?text=Movie+3" alt="Film 3" class="w-full h-auto"> | |
| <div class="absolute top-2 right-2 bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded flex items-center"> | |
| <i class="fas fa-star mr-1"></i> 9.1 | |
| </div> | |
| <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white rounded-full w-12 h-12 flex items-center justify-center"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-semibold text-white truncate">Les Oubliés</h3> | |
| <div class="flex justify-between items-center mt-1 text-sm text-gray-400"> | |
| <span>2023</span> | |
| <span class="bg-gray-700 px-2 py-1 rounded text-xs">HD</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Film 4 --> | |
| <div class="movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x450/1a1a2e/ffffff?text=Movie+4" alt="Film 4" class="w-full h-auto"> | |
| <div class="absolute top-2 right-2 bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded flex items-center"> | |
| <i class="fas fa-star mr-1"></i> 8.2 | |
| </div> | |
| <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white rounded-full w-12 h-12 flex items-center justify-center"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-semibold text-white truncate">La Dernière Chance</h3> | |
| <div class="flex justify-between items-center mt-1 text-sm text-gray-400"> | |
| <span>2021</span> | |
| <span class="bg-gray-700 px-2 py-1 rounded text-xs">HD</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Film 5 --> | |
| <div class="movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x450/1a1a2e/ffffff?text=Movie+5" alt="Film 5" class="w-full h-auto"> | |
| <div class="absolute top-2 right-2 bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded flex items-center"> | |
| <i class="fas fa-star mr-1"></i> 7.5 | |
| </div> | |
| <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white rounded-full w-12 h-12 flex items-center justify-center"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-semibold text-white truncate">Le Secret du Temps</h3> | |
| <div class="flex justify-between items-center mt-1 text-sm text-gray-400"> | |
| <span>2023</span> | |
| <span class="bg-gray-700 px-2 py-1 rounded text-xs">4K</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Section des séries populaires --> | |
| <section class="mb-12 animate-fade-in delay-300"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-2xl font-bold flex items-center"> | |
| <i class="fas fa-tv text-blue-400 mr-3"></i> | |
| <span>Séries populaires</span> | |
| </h2> | |
| <a href="#" class="text-purple-400 hover:text-purple-300 flex items-center text-sm font-medium"> | |
| 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"> | |
| <!-- Série 1 --> | |
| <div class="movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x450/1a1a2e/ffffff?text=Serie+1" alt="Série 1" class="w-full h-auto"> | |
| <div class="absolute top-2 right-2 bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded flex items-center"> | |
| <i class="fas fa-star mr-1"></i> 9.3 | |
| </div> | |
| <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white rounded-full w-12 h-12 flex items-center justify-center"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-semibold text-white truncate">Les Mystères de Paris</h3> | |
| <div class="flex justify-between items-center mt-1 text-sm text-gray-400"> | |
| <span>Saison 3</span> | |
| <span class="bg-gray-700 px-2 py-1 rounded text-xs">HD</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Série 2 --> | |
| <div class="movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x450/1a1a2e/ffffff?text=Serie+2" alt="Série 2" class="w-full h-auto"> | |
| <div class="absolute top-2 right-2 bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded flex items-center"> | |
| <i class="fas fa-star mr-1"></i> 8.7 | |
| </div> | |
| <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white rounded-full w-12 h-12 flex items-center justify-center"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-semibold text-white truncate">L'École du Crime</h3> | |
| <div class="flex justify-between items-center mt-1 text-sm text-gray-400"> | |
| <span>Saison 1</span> | |
| <span class="bg-gray-700 px-2 py-1 rounded text-xs">4K</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Série 3 --> | |
| <div class="movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x450/1a1a2e/ffffff?text=Serie+3" alt="Série 3" class="w-full h-auto"> | |
| <div class="absolute top-2 right-2 bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded flex items-center"> | |
| <i class="fas fa-star mr-1"></i> 8.9 | |
| </div> | |
| <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white rounded-full w-12 h-12 flex items-center justify-center"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-semibold text-white truncate">Les Aventuriers</h3> | |
| <div class="flex justify-between items-center mt-1 text-sm text-gray-400"> | |
| <span>Saison 4</span> | |
| <span class="bg-gray-700 px-2 py-1 rounded text-xs">HD</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Série 4 --> | |
| <div class="movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x450/1a1a2e/ffffff?text=Serie+4" alt="Série 4" class="w-full h-auto"> | |
| <div class="absolute top-2 right-2 bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded flex items-center"> | |
| <i class="fas fa-star mr-1"></i> 8.0 | |
| </div> | |
| <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white rounded-full w-12 h-12 flex items-center justify-center"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-semibold text-white truncate">La Vie en Rose</h3> | |
| <div class="flex justify-between items-center mt-1 text-sm text-gray-400"> | |
| <span>Saison 2</span> | |
| <span class="bg-gray-700 px-2 py-1 rounded text-xs">HD</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Série 5 --> | |
| <div class="movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x450/1a1a2e/ffffff?text=Serie+5" alt="Série 5" class="w-full h-auto"> | |
| <div class="absolute top-2 right-2 bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded flex items-center"> | |
| <i class="fas fa-star mr-1"></i> 8.4 | |
| </div> | |
| <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white rounded-full w-12 h-12 flex items-center justify-center"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-semibold text-white truncate">Le Château des Ombres</h3> | |
| <div class="flex justify-between items-center mt-1 text-sm text-gray-400"> | |
| <span>Saison 1</span> | |
| <span class="bg-gray-700 px-2 py-1 rounded text-xs">4K</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Section des genres --> | |
| <section class="mb-12"> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i class="fas fa-tags text-green-400 mr-3"></i> | |
| <span>Parcourir par genre</span> | |
| </h2> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4"> | |
| <a href="#" class="genre-tag bg-red-600 hover:bg-red-700 text-white font-medium py-3 px-4 rounded-lg flex items-center justify-center transition-colors"> | |
| <i class="fas fa-ghost mr-2"></i> Horreur | |
| </a> | |
| <a href="#" class="genre-tag bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg flex items-center justify-center transition-colors"> | |
| <i class="fas fa-space-shuttle mr-2"></i> Science-Fiction | |
| </a> | |
| <a href="#" class="genre-tag bg-purple-600 hover:bg-purple-700 text-white font-medium py-3 px-4 rounded-lg flex items-center justify-center transition-colors"> | |
| <i class="fas fa-magic mr-2"></i> Fantastique | |
| </a> | |
| <a href="#" class="genre-tag bg-yellow-600 hover:bg-yellow-700 text-white font-medium py-3 px-4 rounded-lg flex items-center justify-center transition-colors"> | |
| <i class="fas fa-laugh-beam mr-2"></i> Comédie | |
| </a> | |
| <a href="#" class="genre-tag bg-green-600 hover:bg-green-700 text-white font-medium py-3 px-4 rounded-lg flex items-center justify-center transition-colors"> | |
| <i class="fas fa-heart mr-2"></i> Romance | |
| </a> | |
| <a href="#" class="genre-tag bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-4 rounded-lg flex items-center justify-center transition-colors"> | |
| <i class="fas fa-user-secret mr-2"></i> Thriller | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Section des nouveautés --> | |
| <section class="mb-12"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-2xl font-bold flex items-center"> | |
| <i class="fas fa-calendar-star text-orange-400 mr-3"></i> | |
| <span>Nouveautés</span> | |
| </h2> | |
| <a href="#" class="text-purple-400 hover:text-purple-300 flex items-center text-sm font-medium"> | |
| 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"> | |
| <!-- Nouveauté 1 --> | |
| <div class="movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x450/1a1a2e/ffffff?text=New+1" alt="Nouveauté 1" class="w-full h-auto"> | |
| <div class="absolute top-2 right-2 bg-purple-600 text-white text-xs font-bold px-2 py-1 rounded"> | |
| Nouveau | |
| </div> | |
| <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white rounded-full w-12 h-12 flex items-center justify-center"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-semibold text-white truncate">Le Labyrinthe</h3> | |
| <div class="flex justify-between items-center mt-1 text-sm text-gray-400"> | |
| <span>2023</span> | |
| <span class="bg-gray-700 px-2 py-1 rounded text-xs">4K</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Nouveauté 2 --> | |
| <div class="movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x450/1a1a2e/ffffff?text=New+2" alt="Nouveauté 2" class="w-full h-auto"> | |
| <div class="absolute top-2 right-2 bg-purple-600 text-white text-xs font-bold px-2 py-1 rounded"> | |
| Nouveau | |
| </div> | |
| <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white rounded-full w-12 h-12 flex items-center justify-center"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-semibold text-white truncate">L'Énigme</h3> | |
| <div class="flex justify-between items-center mt-1 text-sm text-gray-400"> | |
| <span>2023</span> | |
| <span class="bg-gray-700 px-2 py-1 rounded text-xs">HD</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Nouveauté 3 --> | |
| <div class="movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x450/1a1a2e/ffffff?text=New+3" alt="Nouveauté 3" class="w-full h-auto"> | |
| <div class="absolute top-2 right-2 bg-purple-600 text-white text-xs font-bold px-2 py-1 rounded"> | |
| Nouveau | |
| </div> | |
| <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white rounded-full w-12 h-12 flex items-center justify-center"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-semibold text-white truncate">Les Héritiers</h3> | |
| <div class="flex justify-between items-center mt-1 text-sm text-gray-400"> | |
| <span>2023</span> | |
| <span class="bg-gray-700 px-2 py-1 rounded text-xs">HD</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Nouveauté 4 --> | |
| <div class="movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x450/1a1a2e/ffffff?text=New+4" alt="Nouveauté 4" class="w-full h-auto"> | |
| <div class="absolute top-2 right-2 bg-purple-600 text-white text-xs font-bold px-2 py-1 rounded"> | |
| Nouveau | |
| </div> | |
| <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white rounded-full w-12 h-12 flex items-center justify-center"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-semibold text-white truncate">La Promesse</h3> | |
| <div class="flex justify-between items-center mt-1 text-sm text-gray-400"> | |
| <span>2023</span> | |
| <span class="bg-gray-700 px-2 py-1 rounded text-xs">4K</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Nouveauté 5 --> | |
| <div class="movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x450/1a1a2e/ffffff?text=New+5" alt="Nouveauté 5" class="w-full h-auto"> | |
| <div class="absolute top-2 right-2 bg-purple-600 text-white text-xs font-bold px-2 py-1 rounded"> | |
| Nouveau | |
| </div> | |
| <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white rounded-full w-12 h-12 flex items-center justify-center"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-semibold text-white truncate">Le Dernier Voyage</h3> | |
| <div class="flex justify-between items-center mt-1 text-sm text-gray-400"> | |
| <span>2023</span> | |
| <span class="bg-gray-700 px-2 py-1 rounded text-xs">HD</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Pied de page --> | |
| <footer class="bg-gray-900 text-gray-400 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-white text-lg font-semibold mb-4">PlateformeCinéma</h3> | |
| <p class="mb-4"> | |
| La meilleure plateforme de streaming de films et séries en français. Regardez ce que vous voulez, quand vous voulez. | |
| </p> | |
| <div class="flex space-x-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> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-lg font-semibold mb-4">Navigation</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white transition-colors">Accueil</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Films</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Séries</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Tendances</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Ma liste</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-lg font-semibold mb-4">Informations</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white transition-colors">À propos</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Contact</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Politique de confidentialité</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Conditions d'utilisation</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">FAQ</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-lg font-semibold mb-4">Newsletter</h3> | |
| <p class="mb-4"> | |
| Abonnez-vous à notre newsletter pour recevoir les dernières nouveautés et offres spéciales. | |
| </p> | |
| <div class="flex"> | |
| <input type="email" placeholder="Votre email" class="bg-gray-800 text-white px-4 py-2 rounded-l focus:outline-none focus:ring-1 focus:ring-purple-500 w-full"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-r transition-colors"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-sm text-center"> | |
| <p>© 2023 PlateformeCinéma. Tous droits réservés.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Menu mobile toggle | |
| document.querySelector('[aria-controls="mobile-menu"]').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Animation au chargement | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const elements = document.querySelectorAll('.animate-fade-in'); | |
| elements.forEach(el => { | |
| el.style.opacity = '0'; | |
| }); | |
| setTimeout(() => { | |
| elements.forEach(el => { | |
| el.style.opacity = '1'; | |
| }); | |
| }, 100); | |
| }); | |
| // Effet de défilement fluide pour les ancres | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Simulation de recherche | |
| const searchInput = document.querySelector('.search-input'); | |
| searchInput.addEventListener('keyup', function(e) { | |
| if (e.key === 'Enter') { | |
| alert('Recherche effectuée pour : ' + this.value); | |
| this.value = ''; | |
| } | |
| }); | |
| // Simulation de lecture pour les cartes de film | |
| document.querySelectorAll('.movie-card').forEach(card => { | |
| card.addEventListener('click', function(e) { | |
| if (!e.target.closest('button')) return; | |
| const title = this.querySelector('h3').textContent; | |
| alert('Lecture de : ' + title); | |
| }); | |
| }); | |
| </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/plateformecin" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |