Spaces:
Running
Running
un site appeler Dscan pour lire les mangas en ligne, les vidéos - Initial Deployment
bd6e3f5 verified | <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dscan - Lire des mangas et regarder des vidéos en ligne</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> | |
| /* Custom CSS pour les animations et effets spéciaux */ | |
| .manga-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.2); | |
| } | |
| .video-thumbnail::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 40%); | |
| z-index: 1; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| .progress-bar { | |
| transition: width 0.3s ease; | |
| } | |
| /* Styles pour le lecteur personnalisé */ | |
| #player-container { | |
| transition: all 0.3s ease; | |
| } | |
| .fullscreen #player-container { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 1000; | |
| background-color: #000; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 font-sans"> | |
| <!-- Header --> | |
| <header class="bg-gray-800 shadow-lg sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-book-open text-purple-500 text-2xl"></i> | |
| <h1 class="text-2xl font-bold bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent">Dscan</h1> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-4"> | |
| <a href="#" class="hover:text-purple-400 transition">Accueil</a> | |
| <a href="#" class="hover:text-purple-400 transition">Mangas</a> | |
| <a href="#" class="hover:text-purple-400 transition">Vidéos</a> | |
| <a href="#" class="hover:text-purple-400 transition">Nouveautés</a> | |
| <a href="#" class="hover:text-purple-400 transition">Tendances</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="search-toggle" class="text-gray-300 hover:text-white"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| <button id="user-menu" class="flex items-center space-x-1"> | |
| <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| </button> | |
| <button id="mobile-menu-toggle" class="md:hidden text-gray-300 hover:text-white"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Search Bar (hidden by default) --> | |
| <div id="search-bar" class="hidden bg-gray-700 px-4 py-3 shadow-inner"> | |
| <div class="container mx-auto flex"> | |
| <input type="text" placeholder="Rechercher des mangas ou vidéos..." class="w-full bg-gray-600 text-white px-4 py-2 rounded-l focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-r"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Mobile Menu (hidden by default) --> | |
| <div id="mobile-menu" class="hidden bg-gray-800 shadow-lg md:hidden"> | |
| <div class="container mx-auto px-4 py-3 flex flex-col space-y-3"> | |
| <a href="#" class="hover:text-purple-400 transition py-2 border-b border-gray-700">Accueil</a> | |
| <a href="#" class="hover:text-purple-400 transition py-2 border-b border-gray-700">Mangas</a> | |
| <a href="#" class="hover:text-purple-400 transition py-2 border-b border-gray-700">Vidéos</a> | |
| <a href="#" class="hover:text-purple-400 transition py-2 border-b border-gray-700">Nouveautés</a> | |
| <a href="#" class="hover:text-purple-400 transition py-2 border-b border-gray-700">Tendances</a> | |
| </div> | |
| </div> | |
| <!-- Hero Section --> | |
| <section class="relative bg-gradient-to-r from-gray-900 to-gray-800 overflow-hidden"> | |
| <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1569317002804-ab77bcf1bce4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')] bg-cover bg-center opacity-30"></div> | |
| <div class="container mx-auto px-4 py-16 md:py-24 relative z-10"> | |
| <div class="max-w-2xl"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4 leading-tight">Lisez vos mangas préférés et regardez des vidéos en ligne</h1> | |
| <p class="text-lg text-gray-300 mb-8">Découvrez une vaste collection de mangas et de vidéos avec une expérience utilisateur fluide et sans publicités intrusives.</p> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium flex items-center justify-center gap-2"> | |
| <i class="fas fa-book-reader"></i> | |
| Explorer les mangas | |
| </button> | |
| <button class="bg-pink-600 hover:bg-pink-700 text-white px-6 py-3 rounded-lg font-medium flex items-center justify-center gap-2"> | |
| <i class="fas fa-video"></i> | |
| Découvrir les vidéos | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Manga Section --> | |
| <section class="py-12 bg-gray-900"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl font-bold flex items-center gap-2"> | |
| <i class="fas fa-fire text-red-500"></i> | |
| <span>Mangas Populaires</span> | |
| </h2> | |
| <a href="#" class="text-purple-400 hover:text-purple-300 flex items-center gap-1"> | |
| Voir plus <i class="fas fa-chevron-right text-xs"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-5"> | |
| <!-- Manga Card 1 --> | |
| <div class="manga-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-all duration-300 cursor-pointer"> | |
| <div class="relative pb-[140%] overflow-hidden"> | |
| <img src="https://m.media-amazon.com/images/M/MV5BZjE0YjVkNjktMzRlYy00MzQyLWJiZDAtMzVlOTcyYzlkYjVjXkEyXkFqcGdeQXVyMzgxODM4NjM@._V1_FMjpg_UX1000_.jpg" alt="One Piece" class="absolute w-full h-full object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-3"> | |
| <span class="bg-red-500 text-white text-xs px-2 py-1 rounded">Nouveau chapitre</span> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-semibold truncate">One Piece</h3> | |
| <div class="flex justify-between items-center text-sm text-gray-400 mt-1"> | |
| <span>Ch. 1087</span> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span>9.8</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Manga Card 2 --> | |
| <div class="manga-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-all duration-300 cursor-pointer"> | |
| <div class="relative pb-[140%] overflow-hidden"> | |
| <img src="https://m.media-amazon.com/images/M/MV5BZjZlNDk4ZjYtZTk5NS00YjdiLWI0NDgtMjc1YzY1OWIyYzU3XkEyXkFqcGdeQXVyMzgxODM4NjM@._V1_FMjpg_UX1000_.jpg" alt="Jujutsu Kaisen" class="absolute w-full h-full object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-3"> | |
| <span class="bg-purple-500 text-white text-xs px-2 py-1 rounded">Mise à jour</span> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-semibold truncate">Jujutsu Kaisen</h3> | |
| <div class="flex justify-between items-center text-sm text-gray-400 mt-1"> | |
| <span>Ch. 234</span> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span>9.5</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Manga Card 3 --> | |
| <div class="manga-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-all duration-300 cursor-pointer"> | |
| <div class="relative pb-[140%] overflow-hidden"> | |
| <img src="https://m.media-amazon.com/images/M/MV5BMTY4ODA3NzQ2NF5BMl5BanBnXkFtZTgwOTg1NTk1NzE@._V1_FMjpg_UX1000_.jpg" alt="Attack on Titan" class="absolute w-full h-full object-cover"> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-semibold truncate">Attack on Titan</h3> | |
| <div class="flex justify-between items-center text-sm text-gray-400 mt-1"> | |
| <span>Ch. 139</span> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span>9.7</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Manga Card 4 --> | |
| <div class="manga-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-all duration-300 cursor-pointer"> | |
| <div class="relative pb-[140%] overflow-hidden"> | |
| <img src="https://m.media-amazon.com/images/M/MV5BNTM4YjIxYzAtZGFmMy00NTE5LTkzNmItM2ZhYzRhZDQwMGM5XkEyXkFqcGdeQXVyMTA1NjQyNjQ1._V1_FMjpg_UX1000_.jpg" alt="Demon Slayer" class="absolute w-full h-full object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-3"> | |
| <span class="bg-blue-500 text-white text-xs px-2 py-1 rounded">Nouveau</span> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-semibold truncate">Demon Slayer</h3> | |
| <div class="flex justify-between items-center text-sm text-gray-400 mt-1"> | |
| <span>Ch. 205</span> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span>9.6</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Manga Card 5 --> | |
| <div class="manga-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-all duration-300 cursor-pointer"> | |
| <div class="relative pb-[140%] overflow-hidden"> | |
| <img src="https://m.media-amazon.com/images/M/MV5BNzU2YTY2OTgtZGZjZi00MTAyLThlYjUtMWM5ZmYzOGEyOWJhXkEyXkFqcGdeQXVyNTgyNTA4MjM@._V1_FMjpg_UX1000_.jpg" alt="Chainsaw Man" class="absolute w-full h-full object-cover"> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-semibold truncate">Chainsaw Man</h3> | |
| <div class="flex justify-between items-center text-sm text-gray-400 mt-1"> | |
| <span>Ch. 127</span> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span>9.4</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Video Section --> | |
| <section class="py-12 bg-gray-800"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl font-bold flex items-center gap-2"> | |
| <i class="fas fa-bolt text-yellow-500"></i> | |
| <span>Vidéos Tendances</span> | |
| </h2> | |
| <a href="#" class="text-purple-400 hover:text-purple-300 flex items-center gap-1"> | |
| Voir plus <i class="fas fa-chevron-right text-xs"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Video Card 1 --> | |
| <div class="bg-gray-700 rounded-lg overflow-hidden shadow-lg transition hover:shadow-xl"> | |
| <div class="relative h-48 overflow-hidden cursor-pointer" onclick="openPlayer('https://www.youtube.com/embed/dQw4w9WgXcQ', 'One Piece Episode 1071')"> | |
| <img src="https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg" alt="One Piece Episode 1071" class="w-full h-full object-cover"> | |
| <div class="video-thumbnail"></div> | |
| <div class="absolute bottom-0 left-0 right-0 p-3 z-10"> | |
| <span class="bg-red-500 text-white text-xs px-2 py-1 rounded">Nouveau</span> | |
| </div> | |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10"> | |
| <div class="w-16 h-16 bg-purple-600 bg-opacity-80 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-play text-white text-2xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold line-clamp-2">One Piece - Épisode 1071: La rêve de Luffy enfin réalisé ! L'éveil du fruit du démon !</h3> | |
| <div class="flex items-center text-sm text-gray-400 mt-2"> | |
| <span>11M vues</span> | |
| <span class="mx-2">•</span> | |
| <span>4 jours</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video Card 2 --> | |
| <div class="bg-gray-700 rounded-lg overflow-hidden shadow-lg transition hover:shadow-xl"> | |
| <div class="relative h-48 overflow-hidden cursor-pointer" onclick="openPlayer('https://www.youtube.com/embed/a9tq0aS5Zu8', 'Jujutsu Kaisen S2 Ep5')"> | |
| <img src="https://i.ytimg.com/vi/a9tq0aS5Zu8/maxresdefault.jpg" alt="Jujutsu Kaisen S2 Ep5" class="w-full h-full object-cover"> | |
| <div class="video-thumbnail"></div> | |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10"> | |
| <div class="w-16 h-16 bg-purple-600 bg-opacity-80 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-play text-white text-2xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold line-clamp-2">Jujutsu Kaisen Saison 2 - Épisode 5: L'orage avant la tempête</h3> | |
| <div class="flex items-center text-sm text-gray-400 mt-2"> | |
| <span>6.7M vues</span> | |
| <span class="mx-2">•</span> | |
| <span>3 jours</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video Card 3 --> | |
| <div class="bg-gray-700 rounded-lg overflow-hidden shadow-lg transition hover:shadow-xl"> | |
| <div class="relative h-48 overflow-hidden cursor-pointer" onclick="openPlayer('https://www.youtube.com/embed/pManDMC7H2I', 'Chainsaw Man Opening')"> | |
| <img src="https://i.ytimg.com/vi/pManDMC7H2I/maxresdefault.jpg" alt="Chainsaw Man Opening" class="w-full h-full object-cover"> | |
| <div class="video-thumbnail"></div> | |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10"> | |
| <div class="w-16 h-16 bg-purple-600 bg-opacity-80 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-play text-white text-2xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold line-clamp-2">Chainsaw Man - Opening 1 "KICK BACK" par Kenshi Yonezu (Clip Officiel)</h3> | |
| <div class="flex items-center text-sm text-gray-400 mt-2"> | |
| <span>28M vues</span> | |
| <span class="mx-2">•</span> | |
| <span>7 mois</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Player Modal (hidden by default) --> | |
| <div id="player-modal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden items-center justify-center p-4 fade-in"> | |
| <div class="w-full max-w-4xl"> | |
| <div class="flex justify-end mb-2"> | |
| <button id="close-player" class="text-gray-300 hover:text-white p-2"> | |
| <i class="fas fa-times text-2xl"></i> | |
| </button> | |
| </div> | |
| <div id="player-container" class="aspect-w-16 aspect-h-9 bg-black rounded-lg overflow-hidden"> | |
| <iframe id="video-player" class="w-full h-full" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| <div class="mt-4 bg-gray-800 p-4 rounded-lg"> | |
| <h2 id="video-title" class="text-xl font-bold"></h2> | |
| <div class="flex items-center justify-between mt-2"> | |
| <div class="flex items-center space-x-4"> | |
| <span class="text-gray-400">2.5M vues</span> | |
| <span class="text-gray-400">Publié il y a 1 semaine</span> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="text-gray-300 hover:text-white flex items-center space-x-1"> | |
| <i class="far fa-thumbs-up"></i> | |
| <span>124K</span> | |
| </button> | |
| <button class="text-gray-300 hover:text-white flex items-center space-x-1"> | |
| <i class="far fa-thumbs-down"></i> | |
| <span>432</span> | |
| </button> | |
| <button class="text-gray-300 hover:text-white"> | |
| <i class="fas fa-share"></i> | |
| </button> | |
| <button id="fullscreen-btn" class="text-gray-300 hover:text-white"> | |
| <i class="fas fa-expand"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <section class="py-16 bg-gray-900"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Pourquoi choisir Dscan ?</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="bg-gray-800 p-6 rounded-lg text-center hover:bg-gray-700 transition"> | |
| <div class="w-16 h-16 bg-purple-500 bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-bolt text-purple-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Lecture Ultra Rapide</h3> | |
| <p class="text-gray-400">Profitez d'une expérience de lecture fluide sans temps de chargement grâce à nos serveurs optimisés.</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="bg-gray-800 p-6 rounded-lg text-center hover:bg-gray-700 transition"> | |
| <div class="w-16 h-16 bg-blue-500 bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-adjust text-blue-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Mode Sombre/Nuit</h3> | |
| <p class="text-gray-400">Protégez vos yeux avec notre mode sombre optimisé pour la lecture nocturne sans fatigue oculaire.</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="bg-gray-800 p-6 rounded-lg text-center hover:bg-gray-700 transition"> | |
| <div class="w-16 h-16 bg-pink-500 bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-bell text-pink-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Notifications de sortie</h3> | |
| <p class="text-gray-400">Soyez alerté dès qu'un nouveau chapitre ou épisode de vos séries préférées est disponible.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- News Section --> | |
| <section class="py-16 bg-gray-800"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Dernières Actualités</h2> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- News 1 --> | |
| <div class="bg-gray-700 rounded-lg overflow-hidden shadow-lg"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="https://www.crunchyroll.com/imgsrv/display/thumbnail/1200x675/catalog/crunchyroll/2c87afa3a7d7dad5a6f5c54de2e1d77b.jpe" alt="One Piece Film Red" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <span class="text-purple-400 text-sm font-medium">Actualité</span> | |
| <h3 class="text-xl font-bold mt-2 mb-3">One Piece Film Red disponible en streaming dès demain</h3> | |
| <p class="text-gray-400 line-clamp-3">Le film événement One Piece Film Red sera disponible en streaming exclusif sur Dscan dès demain à 18h. Ne manquez pas cette aventure épique...</p> | |
| <button class="text-purple-400 mt-4 flex items-center gap-1 hover:text-purple-300"> | |
| Lire la suite <i class="fas fa-arrow-right text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- News 2 --> | |
| <div class="bg-gray-700 rounded-lg overflow-hidden shadow-lg"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="https://www.crunchyroll.com/imgsrv/display/thumbnail/1200x675/catalog/crunchyroll/74b4d0a2cb03e8d36af3a3e63af37d14.jpe" alt="Jujutsu Kaisen Saison 2" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <span class="text-purple-400 text-sm font-medium">Annonce</span> | |
| <h3 class="text-xl font-bold mt-2 mb-3">Jujutsu Kaisen saison 2 confirmée pour cet été</h3> | |
| <p class="text-gray-400 line-clamp-3">La suite tant attendue de Jujutsu Kaisen débarquera cet été avec un arc sur les origines de Gojo et Geto. Précommandez dès maintenant...</p> | |
| <button class="text-purple-400 mt-4 flex items-center gap-1 hover:text-purple-300"> | |
| Lire la suite <i class="fas fa-arrow-right text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- News 3 --> | |
| <div class="bg-gray-700 rounded-lg overflow-hidden shadow-lg"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="https://www.crunchyroll.com/imgsrv/display/thumbnail/1200x675/catalog/crunchyroll/fa8c2b2863f5d12b1c35a3e6c3db4e76.jpe" alt="Nouvelle fonctionnalité" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <span class="text-purple-400 text-sm font-medium">Mise à jour</span> | |
| <h3 class="text-xl font-bold mt-2 mb-3">Nouvelle fonctionnalité : Liste de lecture personnalisée</h3> | |
| <p class="text-gray-400 line-clamp-3">Dscan introduit une nouvelle fonctionnalité permettant de créer des listes de lecture personnalisées pour organiser vos contenus favoris...</p> | |
| <button class="text-purple-400 mt-4 flex items-center gap-1 hover:text-purple-300"> | |
| Lire la suite <i class="fas fa-arrow-right text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-10"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium"> | |
| Voir toutes les actualités | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-16 bg-gradient-to-r from-purple-900 to-pink-900"> | |
| <div class="container mx-auto px-4 max-w-3xl text-center"> | |
| <h2 class="text-3xl font-bold mb-4">Restez informé</h2> | |
| <p class="text-gray-300 mb-6">Abonnez-vous à notre newsletter pour recevoir les dernières nouveautés, sorties de chapitres et vidéos directement dans votre boîte mail.</p> | |
| <div class="flex flex-col sm:flex-row gap-3"> | |
| <input type="email" placeholder="Votre adresse email" class="flex-grow px-4 py-3 rounded-lg bg-gray-800 bg-opacity-50 text-white focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium whitespace-nowrap"> | |
| S'abonner | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 pt-12 pb-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i class="fas fa-book-open text-purple-500 text-2xl"></i> | |
| <h3 class="text-2xl font-bold bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent">Dscan</h3> | |
| </div> | |
| <p class="text-gray-400">La meilleure plateforme pour lire des mangas et regarder des vidéos en ligne. Simple, rapide et sans publicités intrusives.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Navigation</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Accueil</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Mangas</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Vidéos</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Nouveautés</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Tendances</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Aide</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">FAQ</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Nous contacter</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Conditions d'utilisation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Politique de confidentialité</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Réseaux sociaux</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-purple-600 transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-pink-600 transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-400 transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-red-500 transition"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-6 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 Dscan. Tous droits réservés.</p> | |
| <div class="flex items-center space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-purple-400 text-sm transition">Mentions légales</a> | |
| <a href="#" class="text-gray-500 hover:text-purple-400 text-sm transition">CGU</a> | |
| <a href="#" class="text-gray-500 hover:text-purple-400 text-sm transition">Cookies</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Toggle Mobile Menu | |
| document.getElementById('mobile-menu-toggle').addEventListener('click', function() { | |
| document.getElementById('mobile-menu').classList.toggle('hidden'); | |
| }); | |
| // Toggle Search Bar | |
| document.getElementById('search-toggle').addEventListener('click', function() { | |
| document.getElementById('search-bar').classList.toggle('hidden'); | |
| }); | |
| // Video Player Functions | |
| function openPlayer(src, title) { | |
| document.getElementById('player-modal').classList.remove('hidden'); | |
| document.getElementById('video-player').src = src; | |
| document.getElementById('video-title').textContent = title; | |
| document.body.style.overflow = 'hidden'; | |
| } | |
| function closePlayer() { | |
| document.getElementById('player-modal').classList.add('hidden'); | |
| document.getElementById('video-player').src = ''; | |
| document.body.style.overflow = ''; | |
| } | |
| document.getElementById('close-player').addEventListener('click', closePlayer); | |
| // Fullscreen functionality | |
| document.getElementById('fullscreen-btn').addEventListener('click', function() { | |
| document.getElementById('player-container').classList.toggle('fullscreen'); | |
| }); | |
| // Close player when clicking outside | |
| document.getElementById('player-modal').addEventListener('click', function(e) { | |
| if (e.target === this) { | |
| closePlayer(); | |
| } | |
| }); | |
| // Simulate reading progress for demo purposes | |
| const mangaCards = document.querySelectorAll('.manga-card'); | |
| mangaCards.forEach(card => { | |
| card.addEventListener('click', function() { | |
| // In a real app, this would redirect to the manga reader | |
| alert('Redirection vers le lecteur de manga'); | |
| }); | |
| }); | |
| // Smooth scroll for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </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=david15tonon/testisdis" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |