| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>StreamVision - Plateforme de Streaming 24/7</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: #0f0f0f; |
| color: white; |
| min-height: 100vh; |
| } |
| |
| .hero-gradient { |
| background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%); |
| backdrop-filter: blur(10px); |
| border-radius: 16px; |
| box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| |
| .movie-card { |
| transition: all 0.3s ease; |
| background: rgba(255, 255, 255, 0.05); |
| border-radius: 8px; |
| overflow: hidden; |
| position: relative; |
| } |
| |
| .movie-card:hover { |
| transform: scale(1.05); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3); |
| background: rgba(255, 255, 255, 0.1); |
| z-index: 10; |
| } |
| |
| .movie-poster { |
| transition: all 0.3s ease; |
| height: 100%; |
| object-fit: cover; |
| width: 100%; |
| } |
| |
| .movie-card:hover .movie-poster { |
| transform: scale(1.03); |
| } |
| |
| .play-button { |
| opacity: 0; |
| transform: translateY(10px); |
| transition: all 0.3s ease; |
| } |
| |
| .movie-card:hover .play-button { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| |
| .rating-badge { |
| transition: all 0.3s ease; |
| } |
| |
| .movie-card:hover .rating-badge { |
| transform: scale(1.1); |
| } |
| |
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| height: 8px; |
| } |
| ::-webkit-scrollbar-track { |
| background: rgba(15, 23, 42, 0.5); |
| } |
| ::-webkit-scrollbar-thumb { |
| background: rgba(255, 255, 255, 0.5); |
| border-radius: 4px; |
| } |
| |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(20px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .featured-movie { |
| animation: fadeIn 1s ease-out forwards; |
| } |
| |
| |
| .modal { |
| display: none; |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background-color: rgba(0, 0, 0, 0.9); |
| z-index: 100; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .modal-content { |
| background: rgba(15, 23, 42, 0.95); |
| backdrop-filter: blur(10px); |
| border-radius: 16px; |
| width: 90%; |
| max-width: 800px; |
| max-height: 90vh; |
| overflow-y: auto; |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| box-shadow: 0 |
| </html> |
