Hugging Face's logo

Spaces:
Chasme
/
chknoirshadow
Running

App Files Community
chknoirshadow / index.html
Chasme's picture
Chasme
Add 2 files
5350ef7 verified
Raw
History Blame Contribute Delete
20.9 kB
<!DOCTYPE html>
<html lang="fr">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>chknoirshadow - Rappeur Entrepreneur</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Poppins:wght@300;600;900&display=swap');
:root {
 --primary: #000000;
 --secondary: #FF00FF;
 --accent: #00FFFF;
 }
body {
 font-family: 'Montserrat', sans-serif;
 background-color: #111;
 color: white;
 overflow-x: hidden;
 }
.neon-text {
 text-shadow: 0 0 5px var(--secondary),
0 0 10px var(--secondary),
0 0 20px var(--secondary);
 }
.glow-on-hover:hover {
 text-shadow: 0 0 10px var(--secondary),
0 0 20px var(--secondary),
0 0 30px var(--secondary);
 transition: all 0.3s ease;
 }
.gradient-bg {
 background: linear-gradient(135deg, var(--primary) 0%, #1a1a1a 50%, var(--primary) 100%);
 }
.border-glow {
 box-shadow: 0 0 10px var(--secondary),
inset 0 0 10px var(--secondary);
 }
.pulse {
 animation: pulse 2s infinite;
 }
@keyframes pulse {
 0% { transform: scale(1); }
 50% { transform: scale(1.05); }
 100% { transform: scale(1); }
 }
.typewriter {
 overflow: hidden;
 border-right: .15em solid var(--secondary);
 white-space: nowrap;
 animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
 }
@keyframes typing {
 from { width: 0 }
 to { width: 100% }
 }
@keyframes blink-caret {
 from, to { border-color: transparent }
 50% { border-color: var(--secondary) }
 }
/* Animation for music shop items */
 @keyframes float {
 0% { transform: translateY(0px); }
 50% { transform: translateY(-10px); }
 100% { transform: translateY(0px); }
 }
.music-shop-item:hover {
 animation: float 3s ease-in-out infinite;
 }
.copy-btn {
 transition: all 0.3s ease;
 }
.copy-btn.copied {
 background-color: #10B981 !important;
 }
 </style>
</head>
<body class="min-h-screen gradient-bg">
 <!-- Navigation -->
 <nav class="bg-black bg-opacity-80 backdrop-blur-md fixed w-full z-50">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="flex items-center justify-between h-16">
 <div class="flex items-center">
 <div class="flex-shrink-0">
 <span class="text-2xl font-bold neon-text text-white">chknoirshadow</span>
 </div>
 </div>
 <div class="hidden md:block">
 <div class="ml-10 flex items-baseline space-x-4">
 <a href="#" class="text-white hover:text-purple-300 px-3 py-2 rounded-md text-sm font-medium">Accueil</a>
 <a href="#music-shop" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Boutique Musicale</a>
 <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Entreprises</a>
 <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Blog</a>
 <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
 </div>
 </div>
 <div class="md:hidden">
 <button class="text-white hover:text-purple-300 focus:outline-none">
 <i class="fas fa-bars text-xl"></i>
 </button>
 </div>
 </div>
 </div>
 </nav>
<!-- Hero Section -->
 <section class="pt-32 pb-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
 <div class="text-center">
 <h1 class="text-5xl md:text-7xl font-extrabold mb-6 neon-text">
 <span class="block">CHKNOIR</span>
 <span class="block text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">SHADOW</span>
 </h1>
 <div class="typewriter max-w-2xl mx-auto">
 <p class="text-xl md:text-2xl font-medium text-gray-300">Rappeur & Entrepreneur Visionnaire</p>
 </div>
<div class="mt-12 flex flex-col sm:flex-row justify-center gap-4">
 <a href="#music-shop" class="px-8 py-4 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full text-white font-bold uppercase tracking-wide hover:opacity-90 transition duration-300 transform hover:scale-105 shadow-lg shadow-purple-500/30">
 Acheter mes titres
 </a>
 <a href="#" class="px-8 py-4 bg-black border-2 border-purple-500 rounded-full text-white font-bold uppercase tracking-wide hover:bg-purple-900 transition duration-300 transform hover:scale-105 shadow-lg shadow-purple-500/20">
 Mes projets
 </a>
 </div>
 </div>
 </section>
<!-- Music Shop Section -->
 <section id="music-shop" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
 <div class="text-center mb-16">
 <h2 class="text-3xl md:text-5xl font-bold text-white mb-4">Boutique Musicale</h2>
 <p class="text-xl text-purple-300 mb-2">Chaque titre à seulement 0,25€</p>
 <div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-pink-500 mx-auto"></div>
 </div>
<div class="bg-black bg-opacity-50 rounded-3xl p-8 mb-12 border-glow">
 <h3 class="text-2xl font-bold text-white mb-6 text-center">Comment acheter ?</h3>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
 <div class="bg-gray-900 rounded-xl p-6 text-center">
 <div class="bg-purple-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
 <i class="fas fa-music text-2xl text-white"></i>
 </div>
 <h4 class="text-xl font-bold text-white mb-2">1. Choisissez vos titres</h4>
 <p class="text-gray-400">Sélectionnez les titres que vous souhaitez acheter dans la liste ci-dessous</p>
 </div>
 <div class="bg-gray-900 rounded-xl p-6 text-center">
 <div class="bg-purple-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
 <i class="fas fa-euro-sign text-2xl text-white"></i>
 </div>
 <h4 class="text-xl font-bold text-white mb-2">2. Effectuez le paiement</h4>
 <p class="text-gray-400">Envoyez 0,25€ par titre via Revolut à l'IBAN fourni</p>
 </div>
 <div class="bg-gray-900 rounded-xl p-6 text-center">
 <div class="bg-purple-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
 <i class="fas fa-download text-2xl text-white"></i>
 </div>
 <h4 class="text-xl font-bold text-white mb-2">3. Recevez vos titres</h4>
 <p class="text-gray-400">Vous recevrez les fichiers audio par email sous 24h</p>
 </div>
 </div>
<div class="mt-10 bg-gray-800 rounded-xl p-6">
 <h4 class="text-xl font-bold text-white mb-4 text-center">Coordonnées Bancaires</h4>
 <div class="flex flex-col md:flex-row items-center justify-between bg-gray-900 p-4 rounded-lg">
 <div>
 <p class="text-gray-400 mb-1">Banque:</p>
 <p class="text-white font-mono">Revolut</p>
 </div>
 <div>
 <p class="text-gray-400 mb-1">Titulaire:</p>
 <p class="text-white">chknoirshadow</p>
 </div>
 <div class="relative">
 <p class="text-gray-400 mb-1">IBAN:</p>
 <div class="flex items-center">
 <p id="iban" class="text-white font-mono mr-2">FR7628233000014709523859923</p>
 <button id="copyIbanBtn" class="copy-btn bg-purple-600 hover:bg-purple-700 text-white px-3 py-1 rounded text-sm">
 <i class="fas fa-copy mr-1"></i> Copier
 </button>
 </div>
 </div>
 </div>
 <p class="text-gray-400 text-sm mt-4 text-center">
 <i class="fas fa-info-circle mr-1"></i> Pensez à indiquer le(s) titre(s) acheté(s) dans la référence du virement
 </p>
 </div>
 </div>
<!-- Music Tracks for Sale -->
 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
 <!-- Track 1 -->
 <div class="music-shop-item bg-gradient-to-b from-gray-900 to-black rounded-2xl overflow-hidden shadow-xl transform hover:scale-105 transition duration-500 group">
 <div class="relative h-48 bg-gradient-to-r from-purple-900 to-pink-800 flex items-center justify-center">
 <i class="fas fa-play text-4xl text-white opacity-20 group-hover:opacity-100 transition duration-300 absolute"></i>
 <div class="absolute bottom-0 left-0 bg-black bg-opacity-70 w-full py-2 px-4">
 <p class="text-white font-bold">0,25€</p>
 </div>
 </div>
 <div class="p-6">
 <h3 class="text-xl font-bold text-white mb-1">L'Éveil</h3>
 <p class="text-gray-400 text-sm mb-3">Prod. by ShadowBeats • 3:24</p>
 <p class="text-gray-300 mb-4 text-sm">Intro percutante qui plante le décor de l'univers chknoirshadow.</p>
 <button class="w-full bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded transition duration-300 flex items-center justify-center">
 <i class="fas fa-cart-plus mr-2"></i> Acheter ce titre
 </button>
 </div>
 </div>
<!-- Track 2 -->
 <div class="music-shop-item bg-gradient-to-b from-gray-900 to-black rounded-2xl overflow-hidden shadow-xl transform hover:scale-105 transition duration-500 group">
 <div class="relative h-48 bg-gradient-to-r from-blue-900 to-cyan-800 flex items-center justify-center">
 <i class="fas fa-play text-4xl text-white opacity-20 group-hover:opacity-100 transition duration-300 absolute"></i>
 <div class="absolute bottom-0 left-0 bg-black bg-opacity-70 w-full py-2 px-4">
 <p class="text-white font-bold">0,25€</p>
 </div>
 </div>
 <div class="p-6">
 <h3 class="text-xl font-bold text-white mb-1">Rêves de Diamants</h3>
 <p class="text-gray-400 text-sm mb-3">Feat. MC Vision • 4:12</p>
 <p class="text-gray-300 mb-4 text-sm">Collaboration explosive sur un beat hypnotique qui parle de réussite.</p>
 <button class="w-full bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded transition duration-300 flex items-center justify-center">
 <i class="fas fa-cart-plus mr-2"></i> Acheter ce titre
 </button>
 </div>
 </div>
<!-- Track 3 -->
 <div class="music-shop-item bg-gradient-to-b from-gray-900 to-black rounded-2xl overflow-hidden shadow-xl transform hover:scale-105 transition duration-500 group">
 <div class="relative h-48 bg-gradient-to-r from-pink-900 to-red-800 flex items-center justify-center">
 <i class="fas fa-play text-4xl text-white opacity-20 group-hover:opacity-100 transition duration-300 absolute"></i>
 <div class="absolute bottom-0 left-0 bg-black bg-opacity-70 w-full py-2 px-4">
 <p class="text-white font-bold">0,25€</p>
 </div>
 </div>
 <div class="p-6">
 <h3 class="text-xl font-bold text-white mb-1">Ombre Lumineuse</h3>
 <p class="text-gray-400 text-sm mb-3">Prod. by NightSound • 3:48</p>
 <p class="text-gray-300 mb-4 text-sm">Titre phare de l'album, mélange de mélancolie et d'espoir.</p>
 <button class="w-full bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded transition duration-300 flex items-center justify-center">
 <i class="fas fa-cart-plus mr-2"></i> Acheter ce titre
 </button>
 </div>
 </div>
<!-- Track 4 -->
 <div class="music-shop-item bg-gradient-to-b from-gray-900 to-black rounded-2xl overflow-hidden shadow-xl transform hover:scale-105 transition duration-500 group">
 <div class="relative h-48 bg-gradient-to-r from-yellow-900 to-orange-800 flex items-center justify-center">
 <i class="fas fa-play text-4xl text-white opacity-20 group-hover:opacity-100 transition duration-300 absolute"></i>
 <div class="absolute bottom-0 left-0 bg-black bg-opacity-70 w-full py-2 px-4">
 <p class="text-white font-bold">0,25€</p>
 </div>
 </div>
 <div class="p-6">
 <h3 class="text-xl font-bold text-white mb-1">Entre Deux Mondes</h3>
 <p class="text-gray-400 text-sm mb-3">Prod. by DualBeats • 4:35</p>
 <p class="text-gray-300 mb-4 text-sm">Reflexion sur la dualité entre vie d'artiste et entrepreneur.</p>
 <button class="w-full bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded transition duration-300 flex items-center justify-center">
 <i class="fas fa-cart-plus mr-2"></i> Acheter ce titre
 </button>
 </div>
 </div>
<!-- Track 5 -->
 <div class="music-shop-item bg-gradient-to-b from-gray-900 to-black rounded-2xl overflow-hidden shadow-xl transform hover:scale-105 transition duration-500 group">
 <div class="relative h-48 bg-gradient-to-r from-green-900 to-teal-800 flex items-center justify-center">
 <i class="fas fa-play text-4xl text-white opacity-20 group-hover:opacity-100 transition duration-300 absolute"></i>
 <div class="absolute bottom-0 left-0 bg-black bg-opacity-70 w-full py-2 px-4">
 <p class="text-white font-bold">0,25€</p>
 </div>
 </div>
 <div class="p-6">
 <h3 class="text-xl font-bold text-white mb-1">Noir sur Blanc</h3>
 <p class="text-gray-400 text-sm mb-3">Prod. by InkBeats • 3:15</p>
 <p class="text-gray-300 mb-4 text-sm">Titre engagé avec des paroles percutantes et un flow technique.</p>
 <button class="w-full bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded transition duration-300 flex items-center justify-center">
 <i class="fas fa-cart-plus mr-2"></i> Acheter ce titre
 </button>
 </div>
 </div>
<!-- Track 6 -->
 <div class="music-shop-item bg-gradient-to-b from-gray-900 to-black rounded-2xl overflow-hidden shadow-xl transform hover:scale-105 transition duration-500 group">
 <div class="relative h-48 bg-gradient-to-r from-indigo-900 to-purple-800 flex items-center justify-center">
 <i class="fas fa-play text-4xl text-white opacity-20 group-hover:opacity-100 transition duration-300 absolute"></i>
 <div class="absolute bottom-0 left-0 bg-black bg-opacity-70 w-full py-2 px-4">
 <p class="text-white font-bold">0,25€</p>
 </div>
 </div>
 <div class="p-6">
 <h3 class="text-xl font-bold text-white mb-1">Shadow Business</h3>
 <p class="text-gray-400 text-sm mb-3">Prod. by CEO Beats • 3:52</p>
 <p class="text-gray-300 mb-4 text-sm">Hymne à l'esprit entrepreneurial avec des punchlines mémorables.</p>
 <button class="w-full bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded transition duration-300 flex items-center justify-center">
 <i class="fas fa-cart-plus mr-2"></i> Acheter ce titre
 </button>
 </div>
 </div>
 </div>
<!-- Bulk Purchase Option -->
 <div class="mt-16 bg-gradient-to-r from-purple-900 to-blue-900 rounded-2xl p-8 text-center">
 <h3 class="text-2xl font-bold text-white mb-4">Pack Spécial - Tous les titres</h3>
 <p class="text-xl text-white mb-6">6 titres pour seulement <span class="line-through">1,50€</span> <span class="font-bold">1,25€</span> (économie de 0,25€)</p>
 <button class="px-8 py-3 bg-white text-purple-900 font-bold rounded-full hover:bg-gray-200 transition duration-300 transform hover:scale-105">
 <i class="fas fa-gem mr-2"></i> Acheter le pack complet
 </button>
 </div>
 </section>
<!-- ... (le reste de votre code existant) ... -->
<script>
 // Script pour copier l'IBAN
 document.getElementById('copyIbanBtn').addEventListener('click', function() {
 const iban = document.getElementById('iban').textContent;
 navigator.clipboard.writeText(iban).then(() => {
 const btn = document.getElementById('copyIbanBtn');
 btn.innerHTML = '<i class="fas fa-check mr-1"></i> Copié !';
 btn.classList.add('copied');
 setTimeout(() => {
 btn.innerHTML = '<i class="fas fa-copy mr-1"></i> Copier';
 btn.classList.remove('copied');
 }, 2000);
 });
 });
 // Script pour les boutons d'achat
 document.querySelectorAll('.music-shop-item button').forEach(button => {
 button.addEventListener('click', function() {
 const trackTitle = this.closest('.music-shop-item').querySelector('h3').textContent;
 alert(`Merci pour votre achat de "${trackTitle}" !\n\nVeuillez envoyer 0,25€ à l'IBAN Revolut:\nFR7628233000014709523859923\n\nN'oubliez pas de mentionner le titre dans la référence.`);
 });
 });
 // Script pour le pack complet
 document.querySelector('.bg-gradient-to-r.from-purple-900.to-blue-900 button').addEventListener('click', function() {
 alert('Merci pour votre achat du pack complet !\n\nVeuillez envoyer 1,25€ à l'IBAN Revolut:\nFR7628233000014709523859923\n\nVous recevrez les 6 titres par email sous 24h.');
 });
 </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=Chasme/chknoirshadow" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>