Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NaruStream - Regarder Naruto Shippuden</title> | |
| <!-- Importation de polices et d'icônes --> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-orange: #FF8C00; | |
| --primary-hover: #e07b00; | |
| --dark-bg: #0a0a0a; | |
| --card-bg: #161616; | |
| --text-main: #ffffff; | |
| --text-secondary: #a0a0a0; | |
| --overlay-color: rgba(0, 0, 0, 0.85); | |
| --transition: all 0.3s ease; | |
| --shadow: 0 4px 20px rgba(0,0,0,0.5); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: var(--dark-bg); | |
| color: var(--text-main); | |
| overflow-x: hidden; | |
| } | |
| /* --- Header --- */ | |
| header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem 5%; | |
| background: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent); | |
| position: fixed; | |
| width: 100%; | |
| top: 0; | |
| z-index: 1000; | |
| transition: var(--transition); | |
| } | |
| header.scrolled { | |
| background-color: var(--dark-bg); | |
| box-shadow: var(--shadow); | |
| } | |
| .logo { | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| color: var(--primary-orange); | |
| text-decoration: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .logo i { | |
| font-size: 1.5rem; | |
| } | |
| nav ul { | |
| display: flex; | |
| list-style: none; | |
| gap: 2rem; | |
| } | |
| nav a { | |
| color: var(--text-main); | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: var(--transition); | |
| position: relative; | |
| } | |
| nav a:hover { | |
| color: var(--primary-orange); | |
| } | |
| nav a::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -5px; | |
| left: 0; | |
| background-color: var(--primary-orange); | |
| transition: var(--transition); | |
| } | |
| nav a:hover::after { | |
| width: 100%; | |
| } | |
| .anycoder-link { | |
| font-size: 0.8rem; | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| border: 1px solid var(--text-secondary); | |
| padding: 5px 10px; | |
| border-radius: 20px; | |
| transition: var(--transition); | |
| } | |
| .anycoder-link:hover { | |
| color: var(--primary-orange); | |
| border-color: var(--primary-orange); | |
| } | |
| /* --- Hero Section --- */ | |
| .hero { | |
| height: 80vh; | |
| background: linear-gradient(to top, var(--dark-bg), transparent), | |
| url('https://picsum.photos/seed/narutohero/1920/1080') no-repeat center center/cover; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| padding: 0 5%; | |
| margin-top: 60px; | |
| position: relative; | |
| } | |
| .hero-content { | |
| max-width: 600px; | |
| z-index: 2; | |
| } | |
| .hero h1 { | |
| font-size: 3.5rem; | |
| line-height: 1.2; | |
| margin-bottom: 1rem; | |
| text-shadow: 2px 2px 10px rgba(0,0,0,0.8); | |
| } | |
| .hero h1 span { | |
| color: var(--primary-orange); | |
| } | |
| .hero p { | |
| color: var(--text-secondary); | |
| margin-bottom: 2rem; | |
| font-size: 1.1rem; | |
| text-shadow: 1px 1px 5px rgba(0,0,0,0.8); | |
| } | |
| .btn-primary { | |
| background-color: var(--primary-orange); | |
| color: white; | |
| padding: 12px 30px; | |
| border: none; | |
| border-radius: 5px; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| text-decoration: none; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .btn-primary:hover { | |
| background-color: var(--primary-hover); | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(255, 140, 0, 0.4); | |
| } | |
| /* --- Main Content --- */ | |
| main { | |
| padding: 4rem 5%; | |
| } | |
| .section-title { | |
| font-size: 1.8rem; | |
| margin-bottom: 2rem; | |
| border-left: 4px solid var(--primary-orange); | |
| padding-left: 15px; | |
| } | |
| /* --- Controls & Search --- */ | |
| .controls { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 2rem; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| .search-box { | |
| position: relative; | |
| width: 300px; | |
| } | |
| .search-box input { | |
| width: 100%; | |
| padding: 10px 40px 10px 15px; | |
| border-radius: 25px; | |
| border: 1px solid #333; | |
| background-color: #222; | |
| color: white; | |
| outline: none; | |
| transition: var(--transition); | |
| } | |
| .search-box input:focus { | |
| border-color: var(--primary-orange); | |
| } | |
| .search-box i { | |
| position: absolute; | |
| right: 15px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--text-secondary); | |
| } | |
| .filter-buttons { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .filter-btn { | |
| background: transparent; | |
| border: 1px solid #333; | |
| color: var(--text-secondary); | |
| padding: 8px 16px; | |
| border-radius: 20px; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .filter-btn.active, .filter-btn:hover { | |
| background-color: var(--primary-orange); | |
| color: white; | |
| border-color: var(--primary-orange); | |
| } | |
| /* --- Episode Grid --- */ | |
| .episode-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .episode-card { | |
| background-color: var(--card-bg); | |
| border-radius: 10px; | |
| overflow: hidden; | |
| transition: var(--transition); | |
| cursor: pointer; | |
| position: relative; | |
| box-shadow: 0 4px 10px rgba(0,0,0,0.2); | |
| } | |
| .episode-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 10px 20px rgba(255, 140, 0, 0.15); | |
| } | |
| .card-image { | |
| height: 130px; | |
| background-color: #333; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .card-image img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: var(--transition); | |
| } | |
| .episode-card:hover .card-image img { | |
| transform: scale(1.1); | |
| } | |
| .play-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0,0,0,0.5); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| opacity: 0; | |
| transition: var(--transition); | |
| } | |
| .episode-card:hover .play-overlay { | |
| opacity: 1; | |
| } | |
| .play-overlay i { | |
| font-size: 2rem; | |
| color: var(--primary-orange); | |
| } | |
| .card-content { | |
| padding: 1rem; | |
| } | |
| .episode-number { | |
| font-size: 0.8rem; | |
| color: var(--primary-orange); | |
| font-weight: 700; | |
| margin-bottom: 5px; | |
| display: block; | |
| } | |
| .episode-title { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| line-height: 1.4; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| } | |
| .episode-meta { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.8rem; | |
| color: var(--text-secondary); | |
| } | |
| /* --- Video Player Modal --- */ | |
| .modal { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: var(--overlay-color); | |
| z-index: 2000; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.3s ease; | |
| backdrop-filter: blur(5px); | |
| } | |
| .modal.active { | |
| opacity: 1; | |
| pointer-events: all; | |
| } | |
| .modal-content { | |
| width: 90%; | |
| max-width: 1000px; | |
| background-color: #1a1a1a; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| box-shadow: 0 0 30px rgba(0,0,0,0.8); | |
| transform: scale(0.9); | |
| transition: transform 0.3s ease; | |
| } | |
| .modal.active .modal-content { | |
| transform: scale(1); | |
| } | |
| .player-header { | |
| padding: 1rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-bottom: 1px solid #333; | |
| } | |
| .close-btn { | |
| background: none; | |
| border: none; | |
| color: white; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .close-btn:hover { | |
| color: var(--primary-orange); | |
| } | |
| .video-container { | |
| width: 100%; | |
| aspect-ratio: 16/9; | |
| background: black; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| position: relative; | |
| } | |
| .placeholder-content { | |
| text-align: center; | |
| color: var(--text-secondary); | |
| } | |
| .placeholder-content i { | |
| font-size: 4rem; | |
| margin-bottom: 1rem; | |
| color: var(--primary-orange); | |
| } | |
| .player-controls { | |
| padding: 1rem; | |
| background: #222; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .progress-bar { | |
| flex-grow: 1; | |
| height: 5px; | |
| background: #444; | |
| margin: 0 1rem; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| position: relative; | |
| } | |
| .progress-fill { | |
| width: 0%; | |
| height: 100%; | |
| background: var(--primary-orange); | |
| border-radius: 5px; | |
| } | |
| /* --- Footer --- */ | |
| footer { | |
| background-color: #050505; | |
| padding: 3rem 5%; | |
| text-align: center; | |
| margin-top: 4rem; | |
| border-top: 1px solid #222; | |
| } | |
| .footer-text { | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| } | |
| /* --- Responsive --- */ | |
| @media (max-width: 768px) { | |
| .hero h1 { | |
| font-size: 2.5rem; | |
| } | |
| nav { | |
| display: none; /* Simplification pour mobile */ | |
| } | |
| .controls { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| .search-box { | |
| width: 100%; | |
| } | |
| .filter-buttons { | |
| width: 100%; | |
| overflow-x: auto; | |
| padding-bottom: 10px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header id="navbar"> | |
| <a href="#" class="logo"> | |
| <i class="fas fa-fire"></i> NaruStream | |
| </a> | |
| <nav> | |
| <ul> | |
| <li><a href="#" class="active">Accueil</a></li> | |
| <li><a href="#episodes">Épisodes</a></li> | |
| <li><a href="#">Arcs</a></li> | |
| <li><a href="#">Personnages</a></li> | |
| </ul> | |
| </nav> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link"> | |
| Built with anycoder | |
| </a> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero"> | |
| <div class="hero-content"> | |
| <h1>Naruto <span>Shippuden</span></h1> | |
| <p>Deux ans et demi après son départ du village de Konoha, Naruto Uzumaki revient. Il est plus fort, plus rapide, et prêt à affronter l'Organisation Akatsuki.</p> | |
| <button class="btn-primary" onclick="scrollToEpisodes()"> | |
| <i class="fas fa-play"></i> Commencer le visionnage | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Main Content --> | |
| <main id="episodes"> | |
| <div class="controls"> | |
| <h2 class="section-title">Tous les épisodes</h2> | |
| <div class="search-box"> | |
| <input type="text" id="searchInput" placeholder="Rechercher un épisode..."> | |
| <i class="fas fa-search"></i> | |
| </div> | |
| <div class="filter-buttons"> | |
| <button class="filter-btn active" data-filter="all">Tous</button> | |
| <button class="filter-btn" data-filter="1">Saison 1</button> | |
| <button class="filter-btn" data-filter="2">Saison 2</button> | |
| <button class="filter-btn" data-filter="3">Saison 3</button> | |
| </div> | |
| </div> | |
| <div class="episode-grid" id="episodeGrid"> | |
| <!-- Les épisodes seront générés ici par JavaScript --> | |
| </div> | |
| </main> | |
| <!-- Video Player Modal --> | |
| <div class="modal" id="videoModal"> | |
| <div class="modal-content"> | |
| <div class="player-header"> | |
| <h3 id="modalTitle">Titre de l'épisode</h3> | |
| <button class="close-btn" onclick="closeModal()"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="video-container" id="videoContainer"> | |
| <div class="placeholder-content"> | |
| <i class="fas fa-play-circle"></i> | |
| <h3>Lecteur de simulation</h3> | |
| <p>Le chargement de la vidéo commence...</p> | |
| <p style="font-size: 0.8rem; margin-top: 10px; color: #666;">(Pour des raisons de droits d'auteur, il s'agit d'une démo technique)</p> | |
| </div> | |
| </div> | |
| <div class="player-controls"> | |
| <button class="btn-primary" style="padding: 5px 15px; background: #333;" onclick="togglePlay()"> | |
| <i class="fas fa-play" id="playIcon"></i> | |
| </button> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 0%"></div> | |
| </div> | |
| <span style="color: #aaa; font-size: 0.8rem;">23:40</span> | |
| <i class="fas fa-volume-up" style="color: #aaa; margin-left: 10px;"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer> | |
| <p class="footer-text">© 2023 NaruStream Demo. Projet de démonstration frontend.</p> | |
| <p class="footer-text" style="margin-top: 5px; font-size: 0.8rem;">Ce site ne stocke aucun fichier vidéo sur ses serveurs.</p> | |
| </footer> | |
| <script> | |
| // --- Données simulées des épisodes --- | |
| // Dans une application réelle, cela viendrait d'une API. | |
| const episodesData = [ | |
| { id: 1, title: "Retour à la maison", season: 1, img: "https://picsum.photos/seed/naruto1/300/200" }, | |
| { id: 2, title: "L'organisation Akatsuki", season: 1, img: "https://picsum.photos/seed/naruto2/300/200" }, | |
| { id: 3, title: "Résultat de l'entraînement", season: 1, img: "https://picsum.photos/seed/naruto3/300/200" }, | |
| { id: 4, title: "Le Jinchūriki de la Sable", season: 1, img: "https://picsum.photos/seed/naruto4/300/200" }, | |
| { id: 5, title: "Le pacte de Kazekage", season: 1, img: "https://picsum.photos/seed/naruto5/300/200" }, | |
| { id: 6, title: "Mission spéciale", season: 1, img: "https://picsum.photos/seed/naruto6/300/200" }, | |
| { id: 7, title: "Départ en mission", season: 1, img: "https://picsum.photos/seed/naruto7/300/200" }, | |
| { id: 8, title: "L'équipe de Kakashi", season: 1, img: "https://picsum.photos/seed/naruto8/300/200" }, | |
| { id: 9, title: "Le deuil", season: 2, img: "https://picsum.photos/seed/naruto9/300/200" }, | |
| { id: 10, title: "Code de conjuration", season: 2, img: "https://picsum.photos/seed/naruto10/300/200" }, | |
| { id: 11, title: "La bête médicale", season: 2, img: "https://picsum.photos/seed/naruto11/300/200" }, | |
| { id: 12, title: "La rencontre", season: 2, img: "https://picsum.photos/seed/naruto12/300/200" }, | |
| { id: 13, title: "Une honnête différence", season: 2, img: "https://picsum.photos/seed/naruto13/300/200" }, | |
| { id: 14, title: "L'histoire de Naruto", season: 3, img: "https://picsum.photos/seed/naruto14/300/200" }, | |
| { id: 15, title: "Le secret de jutsu", season: 3, img: "https://picsum.photos/seed/naruto15/300/200" }, | |
| { id: 16, title: "Les pouvoirs cachés", season: 3, img: "https://picsum.photos/seed/naruto16/300/200" }, | |
| { id: 17, title: "La mort d'un proche", season: 3, img: "https://picsum.photos/seed/naruto17/300/200" }, | |
| { id: 18, title: "Les cinq scellages", season: 3, img: "https://picsum.photos/seed/naruto18/300/200" }, | |
| { id: 19, title: "L'entraînement de Sasuke", season: 3, img: "https://picsum.photos/seed/naruto19/300/200" }, | |
| { id: 20, title: "Hiruko vs les deux ninja", season: 3, img: "https://picsum.photos/seed/naruto20/300/200" }, | |
| ]; | |
| const grid = document.getElementById('episodeGrid'); | |
| const searchInput = document.getElementById('searchInput'); | |
| const filterBtns = document.querySelectorAll('.filter-btn'); | |
| const modal = document.getElementById('videoModal'); | |
| const modalTitle = document.getElementById('modalTitle'); | |
| const navbar = document.getElementById('navbar'); | |
| // --- Fonctions d'affichage --- | |
| function renderEpisodes(filter = 'all', searchTerm = '') { | |
| grid.innerHTML = ''; | |
| const filtered = episodesData.filter(ep => { | |
| const matchesSeason = filter === 'all' || ep.season === parseInt(filter); | |
| const matchesSearch = ep.title.toLowerCase().includes(searchTerm.toLowerCase()); | |
| return matchesSeason && matchesSearch; | |
| }); | |
| if (filtered.length === 0) { | |
| grid.innerHTML = '<p style="color: #666; grid-column: 1/-1; text-align: center; padding: 2rem;">Aucun épisode trouvé.</p>'; | |
| return; | |
| } | |
| filtered.forEach(ep => { | |
| const card = document.createElement('div'); | |
| card.className = 'episode-card'; | |
| card.onclick = () => openPlayer(ep); | |
| card.innerHTML = ` | |
| <div class="card-image"> | |
| <img src="${ep.img}" alt="Episode ${ep.id}" loading="lazy"> | |
| <div class="play-overlay"> | |
| <i class="fas fa-play"></i> | |
| </div> | |
| </div> | |
| <div class="card-content"> | |
| <span class="episode-number">Épisode ${ep.id}</span> | |
| <h3 class="episode-title">${ep.title}</h3> | |
| <div class="episode-meta"> | |
| <span>Saison ${ep.season}</span> | |
| <span>24min</span> | |
| </div> | |
| </div> | |
| `; | |
| grid.appendChild(card); | |
| }); | |
| } | |
| // --- Gestion du Modal / Lecteur --- | |
| function openPlayer(episode) { | |
| modalTitle.textContent = `Épisode ${episode.id} : ${episode.title}`; | |
| modal.classList.add('active'); | |
| // Simulation de chargement | |
| const container = document.getElementById('videoContainer'); | |
| container.innerHTML = ` | |
| <div class="placeholder-content"> | |
| <i class="fas fa-circle-notch fa-spin"></i> | |
| <p>Chargement du flux...</p> | |
| </div> | |
| `; | |
| setTimeout(() => { | |
| container.innerHTML = ` | |
| <div class="placeholder-content"> | |
| <i class="fas fa-play-circle"></i> | |
| <h3>Simulation de lecture</h3> | |
| <p>Vous regardez : ${episode.title}</p> | |
| <button class="btn-primary" style="margin-top:15px" onclick="alert('Dans une vraie app, le lecteur démarrerait ici !')">Lancer le flux</button> | |
| </div> | |
| `; | |
| }, 1000); | |
| } | |
| function closeModal() { | |
| modal.classList.remove('active'); | |
| } | |
| function togglePlay() { | |
| const icon = document.getElementById('playIcon'); | |
| if (icon.classList.contains('fa-play')) { | |
| icon.classList.remove('fa-play'); | |
| icon.classList.add('fa-pause'); | |
| } else { | |
| icon.classList.remove('fa-pause'); | |
| icon.classList.add('fa-play'); | |
| } | |
| } | |
| // --- Événements --- | |
| // Filtres par saison | |
| filterBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| // Gestion de la classe active | |
| filterBtns.forEach(b => b.classList.remove('active')); | |
| btn.classList.add('active'); | |
| // Rendu | |
| renderEpisodes(btn.dataset.filter, searchInput.value); | |
| }); | |
| }); | |
| // Recherche | |
| searchInput.addEventListener('input', (e) => { | |
| const activeFilter = document.querySelector('.filter-btn.active').dataset.filter; | |
| renderEpisodes(activeFilter, e.target.value); | |
| }); | |
| // Scroll Navbar effect | |
| window.addEventListener('scroll', () => { | |
| if (window.scrollY > 50) { | |
| navbar.classList.add('scrolled'); | |
| } else { | |
| navbar.classList.remove('scrolled'); | |
| } | |
| }); | |
| function scrollToEpisodes() { | |
| document.getElementById('episodes').scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| // Fermer modal avec Esc | |
| document.addEventListener('keydown', (e) => { | |
| if (e.key === "Escape" && modal.classList.contains('active')) { | |
| closeModal(); | |
| } | |
| }); | |
| // Fermer modal en cliquant à l'extérieur | |
| modal.addEventListener('click', (e) => { | |
| if (e.target === modal) { | |
| closeModal(); | |
| } | |
| }); | |
| // Initialisation | |
| renderEpisodes(); | |
| </script> | |
| </body> | |
| </html> |