Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BUJUROCKS | CYBERPUNK SOUNDSCAPE</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| neon: { | |
| pink: '#ff00ff', | |
| blue: '#00f0ff', | |
| purple: '#cc00ff', | |
| green: '#00ff88', | |
| yellow: '#ffee00' | |
| }, | |
| cyber: { | |
| dark: '#0a0a1a', | |
| gray: '#1a1a2e' | |
| } | |
| }, | |
| fontFamily: { | |
| 'orbitron': ['Orbitron', 'sans-serif'], | |
| 'rajdhani': ['Rajdhani', 'sans-serif'] | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Rajdhani', sans-serif; | |
| background-color: #0a0a1a; | |
| color: #ffffff; | |
| overflow-x: hidden; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 10px currentColor, 0 0 20px currentColor; | |
| } | |
| .neon-border { | |
| border: 1px solid; | |
| box-shadow: 0 0 10px currentColor, 0 0 20px currentColor, inset 0 0 10px currentColor; | |
| } | |
| .cyber-card { | |
| background: rgba(26, 26, 46, 0.5); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .cyber-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: linear-gradient( | |
| to bottom right, | |
| rgba(255, 0, 255, 0.1), | |
| rgba(0, 240, 255, 0.1), | |
| rgba(204, 0, 255, 0.1) | |
| ); | |
| transform: rotate(30deg); | |
| z-index: -1; | |
| } | |
| .glitch { | |
| position: relative; | |
| } | |
| .glitch::before, .glitch::after { | |
| content: attr(data-text); | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| opacity: 0.8; | |
| } | |
| .glitch::before { | |
| color: #0ff; | |
| z-index: -1; | |
| animation: glitch-effect 3s infinite; | |
| } | |
| .glitch::after { | |
| color: #f0f; | |
| z-index: -2; | |
| animation: glitch-effect 2s infinite reverse; | |
| } | |
| @keyframes glitch-effect { | |
| 0% { transform: translate(0); } | |
| 20% { transform: translate(-3px, 3px); } | |
| 40% { transform: translate(-3px, -3px); } | |
| 60% { transform: translate(3px, 3px); } | |
| 80% { transform: translate(3px, -3px); } | |
| 100% { transform: translate(0); } | |
| } | |
| .scanlines { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .scanlines::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient( | |
| to bottom, | |
| rgba(255, 255, 255, 0) 0%, | |
| rgba(255, 255, 255, 0.06) 50%, | |
| rgba(255, 255, 255, 0) 100% | |
| ); | |
| background-size: 100% 4px; | |
| pointer-events: none; | |
| animation: scanline 8s linear infinite; | |
| } | |
| @keyframes scanline { | |
| 0% { transform: translateY(0); } | |
| 100% { transform: translateY(100vh); } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(255, 0, 255, 0.7); } | |
| 70% { box-shadow: 0 0 0 15px rgba(255, 0, 255, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(255, 0, 255, 0); } | |
| } | |
| .grid-pattern { | |
| background-image: | |
| linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| } | |
| .binary-rain { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| z-index: -1; | |
| opacity: 0.3; | |
| } | |
| .binary-digit { | |
| position: absolute; | |
| color: #00ff88; | |
| font-family: 'Orbitron', sans-serif; | |
| animation: fall linear infinite; | |
| } | |
| @keyframes fall { | |
| to { transform: translateY(100vh); } | |
| } | |
| .video-container { | |
| position: relative; | |
| padding-bottom: 56.25%; /* 16:9 aspect ratio */ | |
| height: 0; | |
| overflow: hidden; | |
| } | |
| .video-container iframe { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| } | |
| .video-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(255, 0, 255, 0.3); | |
| } | |
| </style> | |
| </head> | |
| <body class="scanlines"> | |
| <!-- Binary rain animation --> | |
| <div class="binary-rain" id="binaryRain"></div> | |
| <!-- Grid pattern overlay --> | |
| <div class="fixed inset-0 grid-pattern pointer-events-none opacity-20"></div> | |
| <div class="container mx-auto px-4 py-12 max-w-6xl relative"> | |
| <!-- Header --> | |
| <header class="text-center mb-16"> | |
| <h1 class="text-5xl md:text-7xl font-black mb-6 neon-text text-neon-purple glitch" data-text="BUJUROCKS"> | |
| BUJUROCKS | |
| </h1> | |
| <p class="text-xl md:text-2xl font-medium text-neon-blue max-w-3xl mx-auto"> | |
| <span class="neon-text">CYBERPUNK SOUNDSCAPE</span> | <span class="neon-text text-neon-pink">DIGITAL REVOLUTION</span> | |
| </p> | |
| </header> | |
| <!-- Main Content --> | |
| <main> | |
| <!-- Hero Section --> | |
| <section class="mb-20"> | |
| <div class="cyber-card rounded-xl overflow-hidden relative"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 p-8 md:p-12 flex items-center"> | |
| <div> | |
| <h2 class="text-3xl md:text-4xl font-bold text-neon-green mb-6 neon-text"> | |
| THE <span class="text-neon-yellow">DIGITAL</span> PHENOMENON | |
| </h2> | |
| <p class="text-gray-300 mb-8 text-lg leading-relaxed"> | |
| BujuRocks is the sonic architect of the cyberpunk era, crafting <span class="text-neon-pink font-semibold">neon-drenched soundscapes</span> that fuse analog soul with digital precision. | |
| A <span class="text-neon-blue font-semibold">glitch in the matrix</span> of conventional music, creating <span class="text-neon-yellow font-semibold">hacker anthems</span> for the digital age. | |
| </p> | |
| <div class="flex flex-wrap gap-4"> | |
| <a href="https://open.spotify.com/artist/1Hj4CXeTPnA8x3a5L1ONyd?si=WMk0wPrcRX2udluiLtmwQw" target="_blank" class="bg-neon-pink hover:bg-neon-purple text-cyber-dark px-8 py-4 rounded-full font-bold transition-all uppercase tracking-wider pulse neon-border border-neon-pink"> | |
| <i class="fas fa-play mr-2"></i> HACK THE SYSTEM | |
| </a> | |
| <button class="border-2 border-neon-blue hover:bg-neon-blue hover:text-cyber-dark text-neon-blue px-8 py-4 rounded-full font-bold transition-all uppercase tracking-wider neon-border border-neon-blue"> | |
| <i class="fas fa-terminal mr-2"></i> SUBSCRIBE | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 relative"> | |
| <div class="h-full bg-gradient-to-br from-neon-purple to-neon-blue flex items-center justify-center p-8"> | |
| <div class="relative"> | |
| <div class="absolute inset-0 rounded-full bg-neon-pink opacity-40 blur-xl animate-spin" style="animation-duration: 20s;"></div> | |
| <div class="absolute inset-0 rounded-full bg-neon-blue opacity-40 blur-xl animate-spin" style="animation-duration: 15s; animation-direction: reverse;"></div> | |
| <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" | |
| alt="BujuRocks performing" | |
| class="w-64 h-64 md:w-80 md:h-80 rounded-full object-cover border-4 border-neon-yellow shadow-lg relative neon-border border-neon-yellow"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Music Videos Section --> | |
| <section class="mb-20"> | |
| <h2 class="text-4xl font-bold text-center text-neon-yellow mb-12 neon-text uppercase tracking-wider"> | |
| <span class="text-neon-pink">[</span> VIDEO TRANSMISSIONS <span class="text-neon-pink">]</span> | |
| </h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <!-- Video 1 --> | |
| <div class="cyber-card p-6 rounded-xl video-card transition-all duration-300 hover:border-neon-blue"> | |
| <h3 class="text-xl font-bold text-neon-green mb-4 uppercase tracking-wider"> | |
| <i class="fas fa-video mr-2"></i> "SYSTEM OVERRIDE" OFFICIAL VIDEO | |
| </h3> | |
| <div class="video-container rounded-lg overflow-hidden neon-border border-neon-blue"> | |
| <iframe src="https://www.youtube.com/embed/0DwJG7Aoz4A?si=0AeB45mzSBCy4blN" | |
| title="YouTube video player" | |
| allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" | |
| allowfullscreen></iframe> | |
| </div> | |
| <p class="text-gray-300 mt-4 font-mono"> | |
| <span class="text-neon-blue">>></span> A <span class="text-neon-pink">cyberpunk visual</span> journey through <span class="text-neon-green">neon-lit</span> cityscapes and <span class="text-neon-yellow">digital warfare</span>. | |
| </p> | |
| </div> | |
| <!-- Video 2 --> | |
| <div class="cyber-card p-6 rounded-xl video-card transition-all duration-300 hover:border-neon-pink"> | |
| <h3 class="text-xl font-bold text-neon-purple mb-4 uppercase tracking-wider"> | |
| <i class="fas fa-video mr-2"></i> "DIGITAL GHOSTS" LIVE PERFORMANCE | |
| </h3> | |
| <div class="video-container rounded-lg overflow-hidden neon-border border-neon-pink"> | |
| <iframe src="https://www.youtube.com/embed/ZtvvvBnjOZI?si=_zQKH8iJMs3Nq61w" | |
| title="YouTube video player" | |
| allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" | |
| allowfullscreen></iframe> | |
| </div> | |
| <p class="text-gray-300 mt-4 font-mono"> | |
| <span class="text-neon-green">>></span> Raw <span class="text-neon-blue">energy</span> from the <span class="text-neon-yellow">Neo-Tokyo</span> tour, featuring <span class="text-neon-pink">holographic visuals</span>. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Info Cards --> | |
| <section class="mb-20"> | |
| <h2 class="text-4xl font-bold text-center text-neon-green mb-12 neon-text uppercase tracking-wider"> | |
| <span class="text-neon-blue">[</span> SYSTEM SPECS <span class="text-neon-blue">]</span> | |
| </h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Card 1 --> | |
| <div class="cyber-card p-8 rounded-xl hover:border-neon-pink transition-all duration-300"> | |
| <div class="w-16 h-16 bg-cyber-gray rounded-full flex items-center justify-center mb-6 neon-border border-neon-blue"> | |
| <i class="fas fa-microphone-alt text-neon-blue text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-neon-pink mb-3 uppercase tracking-wider">VOCAL HACKING</h3> | |
| <p class="text-gray-300"> | |
| <span class="text-neon-blue">>></span> BujuRocks' voice is a <span class="text-neon-pink">biomechanical instrument</span>, capable of <span class="text-neon-green">frequency manipulation</span> that bypasses conventional auditory processing. | |
| </p> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="cyber-card p-8 rounded-xl hover:border-neon-green transition-all duration-300"> | |
| <div class="w-16 h-16 bg-cyber-gray rounded-full flex items-center justify-center mb-6 neon-border border-neon-green"> | |
| <i class="fas fa-sliders-h text-neon-green text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-neon-green mb-3 uppercase tracking-wider">SOUND ENGINEERING</h3> | |
| <p class="text-gray-300"> | |
| <span class="text-neon-blue">>></span> Using <span class="text-neon-yellow">quantum algorithms</span> and <span class="text-neon-purple">neural networks</span> to create soundscapes that exist in <span class="text-neon-pink">11 dimensions</span>. | |
| </p> | |
| </div> | |
| <!-- Card 3 --> | |
| <div class="cyber-card p-8 rounded-xl hover:border-neon-yellow transition-all duration-300"> | |
| <div class="w-16 h-16 bg-cyber-gray rounded-full flex items-center justify-center mb-6 neon-border border-neon-yellow"> | |
| <i class="fas fa-bolt text-neon-yellow text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-neon-yellow mb-3 uppercase tracking-wider">ENERGY OUTPUT</h3> | |
| <p class="text-gray-300"> | |
| <span class="text-neon-blue">>></span> Live performances generate <span class="text-neon-pink">3.7 gigawatts</span> of pure energy, enough to power a <span class="text-neon-blue">small city</span> or <span class="text-neon-green">time-travel device</span>. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Discography --> | |
| <section class="mb-20"> | |
| <h2 class="text-4xl font-bold text-center text-neon-purple mb-12 neon-text uppercase tracking-wider"> | |
| <span class="text-neon-blue">[</span> DATA FILES <span class="text-neon-blue">]</span> | |
| </h2> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Album 1 --> | |
| <div class="cyber-card rounded-xl overflow-hidden transition-all duration-300 hover:border-neon-pink"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" | |
| alt="Album cover" class="w-full h-64 object-cover grayscale hover:grayscale-0 transition-all duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> | |
| <div class="absolute bottom-4 left-4"> | |
| <span class="bg-neon-pink text-cyber-dark text-xs px-2 py-1 rounded-full font-bold">NEW UPDATE</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-xl text-neon-blue mb-1">"SYSTEM OVERRIDE"</h3> | |
| <p class="text-gray-400 text-sm mb-4 uppercase tracking-wider">2023 • 12 TRACKS • 47:32</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-cyber-gray text-neon-pink text-xs px-2 py-1 rounded font-mono">#CYBERPUNK</span> | |
| <span class="bg-cyber-gray text-neon-green text-xs px-2 py-1 rounded font-mono">#NEONOIR</span> | |
| </div> | |
| <button class="text-neon-blue hover:text-neon-pink transition-colors"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Album 2 --> | |
| <div class="cyber-card rounded-xl overflow-hidden transition-all duration-300 hover:border-neon-green"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1496293455970-f8581aae0e3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" | |
| alt="Album cover" class="w-full h-64 object-cover grayscale hover:grayscale-0 transition-all duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-xl text-neon-green mb-1">"DIGITAL GHOSTS"</h3> | |
| <p class="text-gray-400 text-sm mb-4 uppercase tracking-wider">2021 • 8 TRACKS • 39:18</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-cyber-gray text-neon-yellow text-xs px-2 py-1 rounded font-mono">#SYNTHWAVE</span> | |
| <span class="bg-cyber-gray text-neon-blue text-xs px-2 py-1 rounded font-mono">#RETROFUTURE</span> | |
| </div> | |
| <button class="text-neon-green hover:text-neon-yellow transition-colors"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Album 3 --> | |
| <div class="cyber-card rounded-xl overflow-hidden transition-all duration-300 hover:border-neon-yellow"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1514525253161-7a46d19cd819?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" | |
| alt="Album cover" class="w-full h-64 object-cover grayscale hover:grayscale-0 transition-all duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-xl text-neon-yellow mb-1">"NEURAL OVERLOAD"</h3> | |
| <p class="text-gray-400 text-sm mb-4 uppercase tracking-wider">2019 • 10 TRACKS • 52:07</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-cyber-gray text-neon-purple text-xs px-2 py-1 rounded font-mono">#DARKWAVE</span> | |
| <span class="bg-cyber-gray text-neon-pink text-xs px-2 py-1 rounded font-mono">#INDUSTRIAL</span> | |
| </div> | |
| <button class="text-neon-yellow hover:text-neon-pink transition-colors"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="mb-20"> | |
| <h2 class="text-4xl font-bold text-center text-neon-blue mb-12 neon-text uppercase tracking-wider"> | |
| <span class="text-neon-pink">[</span> USER REVIEWS <span class="text-neon-pink">]</span> | |
| </h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="cyber-card p-8 rounded-xl hover:border-neon-blue transition-all duration-300"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full overflow-hidden mr-4 neon-border border-neon-pink"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Reviewer" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-neon-pink">USER_CRYPTO</h4> | |
| <p class="text-neon-green text-sm font-mono">#MUSIC_CRITIC</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-4 font-mono"> | |
| <span class="text-neon-blue">>></span> "BujuRocks' music is like <span class="text-neon-yellow">hacking into the mainframe</span> of your soul. Each track is a <span class="text-neon-pink">zero-day exploit</span> against musical conventions." | |
| </p> | |
| <div class="flex text-neon-yellow"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="cyber-card p-8 rounded-xl hover:border-neon-purple transition-all duration-300"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full overflow-hidden mr-4 neon-border border-neon-purple"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Reviewer" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-neon-purple">USER_NULLBYTE</h4> | |
| <p class="text-neon-blue text-sm font-mono">#CONCERT_HACKER</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-4 font-mono"> | |
| <span class="text-neon-green">>></span> "Their live show <span class="text-neon-pink">crashed my neural interface</span>. Had to reboot my <span class="text-neon-yellow">augmented reality</span> systems three times. <span class="text-neon-blue">10/10 would crash again</span>." | |
| </p> | |
| <div class="flex text-neon-yellow"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="mb-20 cyber-card p-8 rounded-xl border-neon-green hover:border-neon-pink transition-all duration-300"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-bold text-neon-green mb-4 neon-text uppercase tracking-wider"> | |
| <span class="text-neon-blue">[</span> SUBSCRIBE TO DATABASE <span class="text-neon-blue">]</span> | |
| </h2> | |
| <p class="text-gray-300 mb-8 max-w-2xl mx-auto"> | |
| Receive <span class="text-neon-pink">encrypted transmissions</span> with exclusive content, <span class="text-neon-blue">underground shows</span>, and <span class="text-neon-yellow">classified updates</span>. | |
| </p> | |
| <div class="flex flex-col md:flex-row gap-4 max-w-xl mx-auto"> | |
| <input type="email" placeholder="ENTER YOUR EMAIL" class="flex-grow bg-cyber-gray border-2 border-neon-blue text-white px-6 py-3 rounded-full font-mono placeholder-gray-500 focus:outline-none focus:border-neon-pink"> | |
| <button class="bg-neon-blue hover:bg-neon-purple text-cyber-dark px-8 py-3 rounded-full font-bold uppercase tracking-wider transition-all neon-border border-neon-blue"> | |
| <i class="fas fa-paper-plane mr-2"></i> UPLOAD | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="cyber-card rounded-2xl p-8 border-neon-purple"> | |
| <div class="md:flex md:justify-between md:items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <h2 class="text-2xl font-bold mb-2 text-neon-pink neon-text uppercase">BUJUROCKS</h2> | |
| <p class="text-neon-blue font-mono"> | |
| <span class="text-neon-green">>></span> <span class="text-neon-yellow">SYSTEM_ACTIVE</span> | <span class="text-neon-pink">VERSION_2.3.7</span> | |
| </p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="https://open.spotify.com/artist/1Hj4CXeTPnA8x3a5L1ONyd?si=WMk0wPrcRX2udluiLtmwQw" target="_blank" class="text-neon-blue hover:text-neon-pink text-xl transition-colors neon-text"> | |
| <i class="fab fa-spotify"></i> | |
| </a> | |
| <a href="#" class="text-neon-green hover:text-neon-yellow text-xl transition-colors neon-text"> | |
| <i class="fab fa-apple"></i> | |
| </a> | |
| <a href="#" class="text-neon-pink hover:text-neon-blue text-xl transition-colors neon-text"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| <a href="#" class="text-neon-yellow hover:text-neon-green text-xl transition-colors neon-text"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-neon-purple hover:text-neon-pink text-xl transition-colors neon-text"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-cyber-gray mt-8 pt-8 text-center md:text-left text-gray-400 text-sm font-mono"> | |
| <p> | |
| <span class="text-neon-blue">©</span> 2023 <span class="text-neon-pink">BUJUROCKS SYSTEMS</span> | <span class="text-neon-green">ALL RIGHTS ENCRYPTED</span> | <span class="text-neon-yellow">DESIGNED IN THE DARK FUTURE</span> | |
| </p> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Binary rain animation | |
| function createBinaryRain() { | |
| const container = document.getElementById('binaryRain'); | |
| const digits = '01'; | |
| const fontSize = 16; | |
| const columns = Math.floor(window.innerWidth / fontSize); | |
| for (let i = 0; i < columns; i++) { | |
| const digit = document.createElement('div'); | |
| digit.className = 'binary-digit'; | |
| digit.style.left = `${i * fontSize}px`; | |
| digit.style.fontSize = `${fontSize}px`; | |
| digit.textContent = digits.charAt(Math.floor(Math.random() * digits.length)); | |
| digit.style.animationDuration = `${5 + Math.random() * 10}s`; | |
| digit.style.animationDelay = `${Math.random() * 5}s`; | |
| container.appendChild(digit); | |
| } | |
| } | |
| // Glitch effect on hover | |
| const glitchElements = document.querySelectorAll('.glitch'); | |
| glitchElements.forEach(el => { | |
| el.addEventListener('mouseenter', () => { | |
| el.style.animation = 'glitch-effect 0.5s infinite'; | |
| }); | |
| el.addEventListener('mouseleave', () => { | |
| el.style.animation = ''; | |
| }); | |
| }); | |
| // Initialize | |
| window.addEventListener('load', () => { | |
| createBinaryRain(); | |
| // Add random glitch effect to headers occasionally | |
| setInterval(() => { | |
| const headers = document.querySelectorAll('h1, h2, h3'); | |
| const randomHeader = headers[Math.floor(Math.random() * headers.length)]; | |
| randomHeader.classList.add('glitch-active'); | |
| setTimeout(() => { | |
| randomHeader.classList.remove('glitch-active'); | |
| }, 300); | |
| }, 5000); | |
| }); | |
| </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=Bujurocks/apple-music" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |