Spaces:

Mousco
/

anycoder-c6a7ce71

Running

App Files Files Community

Mousco commited on Jan 19

Commit

61f6c7a

verified ·

1 Parent(s): adfb281

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +744 -19

index.html CHANGED Viewed

@@ -1,19 +1,744 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>