Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>StreamFlow - Films, Séries & Animes Gratuits</title> | |
| <!-- Importation de FontAwesome pour les icônes --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <!-- Police Google Fonts (Inter) --> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap" rel="stylesheet"> | |
| <style> | |
| /* --- VARIABLES CSS & RESET --- */ | |
| :root { | |
| --primary-color: #e50914; /* Rouge style Netflix */ | |
| --primary-hover: #b20710; | |
| --bg-dark: #141414; | |
| --bg-black: #000000; | |
| --bg-card: #1f1f1f; | |
| --text-white: #ffffff; | |
| --text-gray: #b3b3b3; | |
| --shadow: 0 4px 10px rgba(0,0,0,0.5); | |
| --transition: all 0.3s ease; | |
| --header-height: 70px; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--bg-dark); | |
| color: var(--text-white); | |
| overflow-x: hidden; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| a { text-decoration: none; color: inherit; } | |
| ul { list-style: none; } | |
| button { border: none; outline: none; cursor: pointer; font-family: inherit; } | |
| /* --- HEADER --- */ | |
| header { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| height: var(--header-height); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 4%; | |
| background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%); | |
| z-index: 1000; | |
| transition: background-color 0.4s; | |
| } | |
| header.scrolled { | |
| background-color: var(--bg-black); | |
| } | |
| .logo { | |
| font-size: 1.8rem; | |
| font-weight: 800; | |
| color: var(--primary-color); | |
| letter-spacing: -1px; | |
| margin-right: 40px; | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 20px; | |
| } | |
| .nav-links a { | |
| font-size: 0.9rem; | |
| color: var(--text-white); | |
| transition: color 0.2s; | |
| } | |
| .nav-links a:hover, .nav-links a.active { | |
| color: var(--text-gray); | |
| font-weight: 600; | |
| } | |
| .header-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| } | |
| .search-box { | |
| background: rgba(0,0,0,0.75); | |
| border: 1px solid var(--text-white); | |
| border-radius: 20px; | |
| padding: 5px 15px; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .search-box input { | |
| background: transparent; | |
| border: none; | |
| color: white; | |
| padding: 5px; | |
| width: 0; /* Hidden by default or expandable */ | |
| transition: width 0.3s; | |
| } | |
| .search-box:hover input, .search-box input:focus { | |
| width: 150px; | |
| outline: none; | |
| } | |
| .user-avatar { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 4px; | |
| background-color: #333; | |
| overflow: hidden; | |
| } | |
| .user-avatar img { width: 100%; height: 100%; object-fit: cover; } | |
| .anycoder-link { | |
| font-size: 0.75rem; | |
| color: var(--text-gray); | |
| margin-left: 10px; | |
| border: 1px solid #333; | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| transition: var(--transition); | |
| } | |
| .anycoder-link:hover { | |
| border-color: var(--primary-color); | |
| color: var(--primary-color); | |
| } | |
| /* --- HERO SECTION --- */ | |
| #hero { | |
| position: relative; | |
| height: 85vh; | |
| width: 100%; | |
| background: url('https://picsum.photos/seed/hero1/1920/1080') center/cover no-repeat; | |
| display: flex; | |
| align-items: center; | |
| padding: 0 4%; | |
| } | |
| #hero::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; width: 100%; height: 100%; | |
| background: linear-gradient(to top, var(--bg-dark) 0%, transparent 60%, rgba(0,0,0,0.4) 100%); | |
| } | |
| .hero-content { | |
| position: relative; | |
| z-index: 2; | |
| max-width: 600px; | |
| margin-top: 50px; | |
| } | |
| .hero-badge { | |
| background-color: rgba(255,255,255,0.2); | |
| padding: 5px 10px; | |
| border-radius: 4px; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| margin-bottom: 15px; | |
| display: inline-block; | |
| backdrop-filter: blur(5px); | |
| } | |
| .hero-title { | |
| font-size: 4rem; | |
| font-weight: 800; | |
| line-height: 1.1; | |
| margin-bottom: 20px; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.8); | |
| } | |
| .hero-desc { | |
| font-size: 1.1rem; | |
| color: #ddd; | |
| margin-bottom: 30px; | |
| text-shadow: 1px 1px 2px rgba(0,0,0,0.8); | |
| line-height: 1.5; | |
| } | |
| .hero-buttons { | |
| display: flex; | |
| gap: 15px; | |
| } | |
| .btn { | |
| padding: 12px 30px; | |
| border-radius: 5px; | |
| font-weight: 600; | |
| font-size: 1rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| transition: var(--transition); | |
| } | |
| .btn-primary { | |
| background-color: var(--primary-color); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| background-color: var(--primary-hover); | |
| } | |
| .btn-secondary { | |
| background-color: rgba(109, 109, 110, 0.7); | |
| color: white; | |
| backdrop-filter: blur(5px); | |
| } | |
| .btn-secondary:hover { | |
| background-color: rgba(109, 109, 110, 0.4); | |
| } | |
| /* --- CONTENT ROWS --- */ | |
| .section-title { | |
| font-size: 1.4rem; | |
| font-weight: 600; | |
| margin: 30px 0 15px 4%; | |
| color: #e5e5e5; | |
| } | |
| .row-container { | |
| position: relative; | |
| margin-bottom: 20px; | |
| padding-left: 4%; | |
| } | |
| .row-scroll { | |
| display: flex; | |
| gap: 10px; | |
| overflow-x: auto; | |
| padding: 20px 0; | |
| padding-right: 4%; | |
| scroll-behavior: smooth; | |
| scrollbar-width: none; /* Firefox */ | |
| } | |
| .row-scroll::-webkit-scrollbar { | |
| display: none; /* Chrome/Safari */ | |
| } | |
| .movie-card { | |
| flex: 0 0 auto; | |
| width: 200px; | |
| height: 300px; | |
| border-radius: 6px; | |
| overflow: hidden; | |
| position: relative; | |
| cursor: pointer; | |
| transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1); | |
| background-color: var(--bg-card); | |
| } | |
| .movie-card img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .movie-card:hover { | |
| transform: scale(1.1); | |
| z-index: 10; | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.7); | |
| } | |
| .card-overlay { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| padding: 15px; | |
| background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .movie-card:hover .card-overlay { | |
| opacity: 1; | |
| } | |
| .card-title { | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| margin-bottom: 5px; | |
| } | |
| .card-info { | |
| font-size: 0.75rem; | |
| color: #46d369; /* Green for match/score */ | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .card-meta { | |
| color: white; | |
| border: 1px solid rgba(255,255,255,0.4); | |
| padding: 0 4px; | |
| font-size: 0.6rem; | |
| } | |
| .card-genre { | |
| color: #fff; | |
| font-size: 0.7rem; | |
| } | |
| /* Scroll Buttons */ | |
| .scroll-btn { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| width: 4%; | |
| background: rgba(0,0,0,0.5); | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 2rem; | |
| z-index: 5; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .row-container:hover .scroll-btn { opacity: 1; } | |
| .scroll-btn.left { left: 0; } | |
| .scroll-btn.right { right: 0; } | |
| .scroll-btn:hover { background: rgba(0,0,0,0.7); transform: scale(1.1); } | |
| /* --- MODAL PLAYER --- */ | |
| #modal-overlay { | |
| position: fixed; | |
| top: 0; left: 0; width: 100%; height: 100%; | |
| background: rgba(0,0,0,0.9); | |
| z-index: 2000; | |
| display: none; | |
| justify-content: center; | |
| align-items: center; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| #modal-overlay.active { | |
| display: flex; | |
| opacity: 1; | |
| } | |
| .modal-content { | |
| width: 90%; | |
| max-width: 1000px; | |
| background: #181818; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| box-shadow: 0 20px 50px rgba(0,0,0,0.8); | |
| position: relative; | |
| } | |
| .close-modal { | |
| position: absolute; | |
| top: 15px; | |
| right: 15px; | |
| background: rgba(0,0,0,0.7); | |
| color: white; | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.2rem; | |
| z-index: 10; | |
| cursor: pointer; | |
| } | |
| .video-container { | |
| width: 100%; | |
| aspect-ratio: 16/9; | |
| background: black; | |
| position: relative; | |
| } | |
| video { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .modal-details { | |
| padding: 30px; | |
| } | |
| .modal-title { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| margin-bottom: 10px; | |
| } | |
| .modal-meta { | |
| display: flex; | |
| gap: 15px; | |
| color: var(--text-gray); | |
| font-size: 0.9rem; | |
| margin-bottom: 20px; | |
| } | |
| .match-score { color: #46d369; font-weight: 700; } | |
| .modal-desc { | |
| font-size: 1rem; | |
| line-height: 1.6; | |
| color: #fff; | |
| max-width: 80%; | |
| } | |
| /* --- FOOTER --- */ | |
| footer { | |
| margin-top: 50px; | |
| padding: 50px 4%; | |
| background-color: var(--bg-black); | |
| color: #757575; | |
| font-size: 0.9rem; | |
| } | |
| .footer-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .footer-link { | |
| margin-bottom: 10px; | |
| display: block; | |
| } | |
| .footer-link:hover { text-decoration: underline; } | |
| .footer-bottom { | |
| margin-top: 20px; | |
| font-size: 0.8rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| /* --- RESPONSIVE --- */ | |
| @media (max-width: 768px) { | |
| .hero-title { font-size: 2.5rem; } | |
| .nav-links { display: none; } /* Simplified for mobile */ | |
| .movie-card { width: 140px; height: 210px; } | |
| .header-actions .search-box { display: none; } | |
| .hero-buttons { flex-direction: column; width: 100%; } | |
| .btn { width: 100%; justify-content: center; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header id="navbar"> | |
| <div style="display: flex; align-items: center;"> | |
| <div class="logo">STREAMFLOW</div> | |
| <nav class="nav-links"> | |
| <a href="#" class="active">Accueil</a> | |
| <a href="#">Films</a> | |
| <a href="#">Séries</a> | |
| <a href="#">Animés</a> | |
| <a href="#">Ma Liste</a> | |
| </nav> | |
| </div> | |
| <div class="header-actions"> | |
| <div class="search-box"> | |
| <i class="fas fa-search" style="color: white;"></i> | |
| <input type="text" placeholder="Titres, genres, personnes..."> | |
| </div> | |
| <div class="user-avatar"> | |
| <img src="https://picsum.photos/seed/user/50/50" alt="User"> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main> | |
| <!-- Hero Section --> | |
| <section id="hero"> | |
| <div class="hero-content"> | |
| <div class="hero-badge">Original</div> | |
| <h1 class="hero-title">L'Ère Cyberpunk</h1> | |
| <p class="hero-desc"> | |
| Dans une dystopie obsédée par la technologie et la modification corporelle, un mercenaire marginal essaie de survivre en devenant une légende des rues de Night City. | |
| </p> | |
| <div class="hero-buttons"> | |
| <button class="btn btn-primary" onclick="playVideo('L\'Ère Cyberpunk', 'https://media.w3.org/2010/05/sintel/trailer.mp4')"> | |
| <i class="fas fa-play"></i> Lecture | |
| </button> | |
| <button class="btn btn-secondary"> | |
| <i class="fas fa-info-circle"></i> Plus d'infos | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Dynamic Content Container --> | |
| <div id="content-feed"> | |
| <!-- Rows will be injected here via JS --> | |
| </div> | |
| </main> | |
| <!-- Video Player Modal --> | |
| <div id="modal-overlay"> | |
| <div class="modal-content"> | |
| <div class="close-modal" onclick="closeVideo()"> | |
| <i class="fas fa-times"></i> | |
| </div> | |
| <div class="video-container"> | |
| <video id="main-player" controls poster="https://picsum.photos/seed/poster/800/450"> | |
| <source src="" type="video/mp4"> | |
| Votre navigateur ne supporte pas la vidéo HTML5. | |
| </video> | |
| </div> | |
| <div class="modal-details"> | |
| <h2 class="modal-title" id="modal-title">Titre du Film</h2> | |
| <div class="modal-meta"> | |
| <span class="match-score">98% Match</span> | |
| <span>2023</span> | |
| <span class="card-meta">HD</span> | |
| <span>2h 15min</span> | |
| </div> | |
| <p class="modal-desc"> | |
| Description détaillée du contenu sélectionné. C'est ici que l'utilisateur trouverait le synopsis officiel du film ou de l'anime qu'il s'apprête à regarder. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="footer-grid"> | |
| <div> | |
| <a href="#" class="footer-link">FAQ</a> | |
| <a href="#" class="footer-link">Relations Investisseurs</a> | |
| <a href="#" class="footer-link">Modes de lecture</a> | |
| </div> | |
| <div> | |
| <a href="#" class="footer-link">Centre d'aide</a> | |
| <a href="#" class="footer-link">Emplois</a> | |
| <a href="#" class="footer-link">Conditions d'utilisation</a> | |
| </div> | |
| <div> | |
| <a href="#" class="footer-link">Compte</a> | |
| <a href="#" class="footer-link">Se connecter</a> | |
| <a href="#" class="footer-link">Confidentialité</a> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <span>StreamFlow France</span> | |
| <span>© 2023-2024 StreamFlow Inc.</span> | |
| </div> | |
| </footer> | |
| <!-- JavaScript Application Logic --> | |
| <script> | |
| // --- DATA MOCKUP --- | |
| // Simulating a database of movies, series and animes | |
| const categories = [ | |
| { id: 'trending', title: 'Tendances actuelles' }, | |
| { id: 'anime', title: 'Animés à ne pas manquer' }, | |
| { id: 'action', title: 'Films d\'Action & Aventure' }, | |
| { id: 'series', title: 'Séries TV Populaires' }, | |
| { id: 'scifi', title: 'Science-Fiction' } | |
| ]; | |
| // Helper to generate random images | |
| const getImg = (seed, w, h) => `https://picsum.photos/seed/${seed}/${w}/${h}`; | |
| const database = { | |
| 'trending': [ | |
| { title: "Stranger Things", seed: "st1", rating: "99%", year: "2022", duration: "50min", type: "Série" }, | |
| { title: "Wednesday", seed: "wed1", rating: "95%", year: "2022", duration: "45min", type: "Série" }, | |
| { title: "Glass Onion", seed: "glass", rating: "92%", year: "2022", duration: "2h 10", type: "Film" }, | |
| { title: "One Piece", seed: "op1", rating: "98%", year: "2023", duration: "24min", type: "Animé" }, | |
| { title: "The Witcher", seed: "wit1", rating: "91%", year: "2023", duration: "1h", type: "Série" }, | |
| { title: "Top Gun 2", seed: "topgun", rating: "97%", year: "2022", duration: "2h 30", type: "Film" }, | |
| { title: "Arcane", seed: "arcane", rating: "99%", year: "2021", duration: "40min", type: "Animé" }, | |
| ], | |
| 'anime': [ | |
| { title: "Attack on Titan", seed: "aot", rating: "99%", year: "2023", duration: "25min", type: "Animé" }, | |
| { title: "Demon Slayer", seed: "dslayer", rating: "98%", year: "2023", duration: "24min", type: "Animé" }, | |
| { title: "Jujutsu Kaisen", seed: "jjk", rating: "97%", year: "2022", duration: "23min", type: "Animé" }, | |
| { title: "Spy x Family", seed: "spy", rating: "96%", year: "2022", duration: "25min", type: "Animé" }, | |
| { title: "Chainsaw Man", seed: "csm", rating: "95%", year: "2022", duration: "24min", type: "Animé" }, | |
| { title: "Bleach TYBW", seed: "bleach", rating: "98%", year: "2022", duration: "24min", type: "Animé" }, | |
| { title: "Blue Lock", seed: "blue", rating: "94%", year: "2023", duration: "24min", type: "Animé" }, | |
| ], | |
| 'action': [ | |
| { title: "Fast X", seed: "fast", rating: "85%", year: "2023", duration: "2h 20", type: "Film" }, | |
| { title: "John Wick 4", seed: "wick", rating: "96%", year: "2023", duration: "2h 49", type: "Film" }, | |
| { title: "Extraction 2", seed: "extract", rating: "89%", year: "2023", duration: "2h", type: "Film" }, | |
| { title: "Mission Impossible", seed: "mi", rating: "94%", year: "2023", duration: "2h 30", type: "Film" }, | |
| { title: "The Equalizer 3", seed: "eq3", rating: "88%", year: "2023", duration: "2h", type: "Film" }, | |
| { title: "Gran Turismo", seed: "gt", rating: "90%", year: "2023", duration: "2h 15", type: "Film" }, | |
| ], | |
| 'series': [ | |
| { title: "Breaking Bad", seed: "bb", rating: "99%", year: "2013", duration: "49min", type: "Série" }, | |
| { title: "The Last of Us", seed: "tlou", rating: "98%", year: "2023", duration: "55min", type: "Série" }, | |
| { title: "House of Dragon", seed: "hotd", rating: "94%", year: "2022", duration: "1h", type: "Série" }, | |
| { title: "Peaky Blinders", seed: "pb", rating: "97%", year: "2022", duration: "1h", type: "Série" }, | |
| { title: "The Mandalorian", seed: "mando", rating: "96%", year: "2023", duration: "40min", type: "Série" }, | |
| ], | |
| 'scifi': [ | |
| { title: "Dune", seed: "dune", rating: "95%", year: "2021", duration: "2h 35", type: "Film" }, | |
| { title: "Interstellar", seed: "inter", rating: "98%", year: "2014", duration: "2h 49", type: "Film" }, | |
| { title: "Blade Runner 2049", seed: "br", rating: "96%", year: "2017", duration: "2h 44", type: "Film" }, | |
| { title: "Matrix Resurrections", seed: "matrix", rating: "85%", year: "2021", duration: "2h 28", type: "Film" }, | |
| { title: "Avatar 2", seed: "avatar", rating: "92%", year: "2022", duration: "3h 12", type: "Film" }, | |
| ] | |
| }; | |
| // --- RENDER FUNCTIONS --- | |
| function renderApp() { | |
| const container = document.getElementById('content-feed'); | |
| categories.forEach(cat => { | |
| const section = document.createElement('section'); | |
| section.innerHTML = ` | |
| <h2 class="section-title">${cat.title}</h2> | |
| <div class="row-container"> | |
| <button class="scroll-btn left" onclick="scrollRow(this, -300)"><i class="fas fa-chevron-left"></i></button> | |
| <div class="row-scroll" id="row-${cat.id}"> | |
| <!-- Cards injected here --> | |
| </div> | |
| <button class="scroll-btn right" onclick="scrollRow(this, 300)"><i class="fas fa-chevron-right"></i></button> | |
| </div> | |
| `; | |
| container.appendChild(section); | |
| const row = section.querySelector('.row-scroll'); | |
| const items = database[cat.id] || []; | |
| items.forEach(item => { | |
| const card = document.createElement('div'); | |
| card.className = 'movie-card'; | |
| card.onclick = () => playVideo(item.title, 'https://media.w3.org/2010/05/sintel/trailer.mp4', item); | |
| card.innerHTML = ` | |
| <img src="${getImg(item.seed, 300, 450)}" alt="${item.title}" loading="lazy"> | |
| <div class="card-overlay"> | |
| <div class="card-title">${item.title}</div> | |
| <div class="card-info"> | |
| <span>${item.rating} Match</span> | |
| <span class="card-meta">${item.type}</span> | |
| <span class="card-genre">${item.duration}</span> | |
| </div> | |
| <div style="margin-top: 10px; display: flex; gap: 10px;"> | |
| <i class="fas fa-play-circle" style="font-size: 1.5rem; color: white;"></i> | |
| <i class="fas fa-plus-circle" style="font-size: 1.5rem; color: #777;"></i> | |
| </div> | |
| </div> | |
| `; | |
| row.appendChild(card); | |
| }); | |
| }); | |
| } | |
| // --- INTERACTION LOGIC --- | |
| // Scroll Row | |
| window.scrollRow = function(btn, amount) { | |
| const container = btn.parentElement.querySelector('.row-scroll'); | |
| container.scrollBy({ left: amount, behavior: 'smooth' }); | |
| } | |
| // Navbar Scroll Effect | |
| window.addEventListener('scroll', () => { | |
| const nav = document.getElementById('navbar'); | |
| if (window.scrollY > 50) { | |
| nav.classList.add('scrolled'); | |
| } else { | |
| nav.classList.remove('scrolled'); | |
| } | |
| }); | |
| // Video Player Logic | |
| const modal = document.getElementById('modal-overlay'); | |
| const player = document.getElementById('main-player'); | |
| const modalTitle = document.getElementById('modal-title'); | |
| window.playVideo = function(title, src, info = {}) { | |
| modalTitle.innerText = title; | |
| player.src = src; | |
| modal.classList.add('active'); | |
| player.play().catch(e => console.log("Auto-play prevented by browser")); | |
| // Adjust description based on clicked item if available | |
| if(info.type) { | |
| const desc = document.querySelector('.modal-desc'); | |
| desc.innerText = `Vous regardez ${title}, un ${info.type} sorti en ${info.year}. Noté ${info.rating} par les critiques. Profitez de ce contenu en haute définition gratuitement sur StreamFlow.`; | |
| } | |
| } | |
| window.closeVideo = function() { | |
| modal.classList.remove('active'); | |
| player.pause(); | |
| player.src = ""; // Reset source to stop buffering | |
| } | |
| // Close modal when clicking outside content | |
| modal.addEventListener('click', (e) => { | |
| if (e.target === modal) { | |
| closeVideo(); | |
| } | |
| }); | |
| // Initialize App | |
| document.addEventListener('DOMContentLoaded', renderApp); | |
| </script> | |
| </body> | |
| </html> |