Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Neon Mirage | 2110 Cyberjazz Collective</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Space+Grotesk:wght@300;500;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| background-color: #0a0a12; | |
| color: #e0e0ff; | |
| overflow-x: hidden; | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 8px #ff00ff, 0 0 16px #00ffff; | |
| } | |
| .neon-border { | |
| box-shadow: 0 0 8px #ff00ff, 0 0 16px #00ffff, inset 0 0 8px #ff00ff, inset 0 0 16px #00ffff; | |
| } | |
| .scanlines { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px); | |
| background-size: 100% 3px; | |
| pointer-events: none; | |
| z-index: 9999; | |
| opacity: 0.3; | |
| } | |
| .glitch { | |
| animation: glitch-effect 5s infinite linear alternate-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); } | |
| } | |
| .flicker { | |
| animation: flicker 3s infinite alternate; | |
| } | |
| @keyframes flicker { | |
| 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } | |
| 20%, 24%, 55% { opacity: 0.3; } | |
| } | |
| </style> | |
| </head> | |
| <body class="relative"> | |
| <div class="scanlines"></div> | |
| <div class="absolute inset-0 bg-gradient-to-b from-transparent via-purple-900/20 to-transparent opacity-30"></div> | |
| <!-- Main Navigation --> | |
| <nav class="fixed w-full z-50 backdrop-blur-md bg-black/70 border-b border-cyan-500/20"> | |
| <div class="container mx-auto px-6 py-4 flex justify-between items-center"> | |
| <div class="text-2xl font-bold neon-text font-major" data-aos="fade-right"> | |
| NEON MIRAGE | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-cyan-300 hover:text-pink-400 transition-all duration-300 flex items-center"> | |
| <i data-feather="home" class="mr-2"></i> Lounge | |
| </a> | |
| <a href="#" class="text-cyan-300 hover:text-pink-400 transition-all duration-300 flex items-center"> | |
| <i data-feather="music" class="mr-2"></i> Sessions | |
| </a> | |
| <a href="#" class="text-cyan-300 hover:text-pink-400 transition-all duration-300 flex items-center"> | |
| <i data-feather="users" class="mr-2"></i> Collective | |
| </a> | |
| <a href="#" class="text-cyan-300 hover:text-pink-400 transition-all duration-300 flex items-center"> | |
| <i data-feather="calendar" class="mr-2"></i> 2110 | |
| </a> | |
| </div> | |
| <button class="md:hidden text-cyan-300"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="min-h-screen flex items-center justify-center relative overflow-hidden pt-20"> | |
| <div class="absolute inset-0 z-0"> | |
| <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1514525253161-7a46d19cd819?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center opacity-20"></div> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-black"></div> | |
| <div class="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-black to-transparent"></div> | |
| </div> | |
| <div class="container mx-auto px-6 relative z-10 text-center" data-aos="fade-up"> | |
| <h1 class="text-6xl md:text-8xl font-bold mb-6 neon-text font-major glitch"> | |
| 2110 | |
| </h1> | |
| <p class="text-xl md:text-2xl max-w-2xl mx-auto mb-12 text-cyan-100"> | |
| Where jazz algorithms meet analog souls in the neon underbelly of Neo-Tokyo | |
| </p> | |
| <div class="flex justify-center space-x-6"> | |
| <button class="px-8 py-3 bg-transparent border-2 border-cyan-400 text-cyan-300 hover:bg-cyan-400/20 transition-all duration-500 rounded-full flex items-center neon-border flicker"> | |
| <i data-feather="play" class="mr-2"></i> Live Stream | |
| </button> | |
| <button class="px-8 py-3 bg-gradient-to-r from-purple-600 to-cyan-500 text-white hover:opacity-80 transition-all duration-500 rounded-full flex items-center"> | |
| <i data-feather="compass" class="mr-2"></i> Explore | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section class="py-20 relative"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-16 items-center"> | |
| <div class="relative" data-aos="fade-right"> | |
| <div class="absolute -inset-4 bg-gradient-to-br from-purple-500/30 to-cyan-500/30 rounded-xl blur-lg opacity-70"></div> | |
| <div class="relative bg-black/50 rounded-xl p-1 neon-border"> | |
| <img src="https://images.unsplash.com/photo-1508700115892-45ecd05ae2ad?q=80&w=2069&auto=format&fit=crop" alt="Cyberjazz" class="rounded-lg w-full h-auto"> | |
| </div> | |
| </div> | |
| <div data-aos="fade-left"> | |
| <h2 class="text-4xl font-bold mb-6 neon-text">The Underground Pulse</h2> | |
| <p class="text-lg text-cyan-100 mb-6"> | |
| Beneath the megacorp towers, where the city's heartbeat syncs with analog synthesizers and brass instruments from another century, we craft the soundtrack to your neural uplink. | |
| </p> | |
| <p class="text-lg text-cyan-100 mb-8"> | |
| Our collective of rogue musicians, AI composers, and visual alchemists blend live jazz improvisation with glitchy trip-hop production, creating immersive experiences that defy temporal categorization. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-pink-400">47</div> | |
| <div class="text-sm text-cyan-300">Artists</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-cyan-400">2110</div> | |
| <div class="text-sm text-cyan-300">Sessions</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-purple-400">∞</div> | |
| <div class="text-sm text-cyan-300">Possibilities</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Live Sessions --> | |
| <section class="py-20 bg-gradient-to-b from-black via-purple-900/10 to-black"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h2 class="text-4xl font-bold mb-4 neon-text">Tonight's Sessions</h2> | |
| <p class="text-xl text-cyan-200 max-w-2xl mx-auto"> | |
| Neural interfaces patched into vintage amplifiers. The future never sounded so analog. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Session 1 --> | |
| <div class="bg-black/40 rounded-xl overflow-hidden border border-cyan-500/20 hover:border-cyan-400/50 transition-all duration-500" data-aos="zoom-in"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1496293455970-f8581aae0e3b?q=80&w=2013&auto=format&fit=crop" alt="Session" class="w-full h-64 object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div> | |
| <div class="absolute bottom-4 left-4"> | |
| <span class="bg-pink-600/80 text-white text-xs px-2 py-1 rounded">LIVE NOW</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-cyan-300">Neon Bebop</h3> | |
| <p class="text-sm text-cyan-100 mb-4">Jazz quintet x AI drum machine</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i data-feather="user" class="text-cyan-400 mr-2 w-4"></i> | |
| <span class="text-xs text-cyan-300">Dr. Synth</span> | |
| </div> | |
| <div class="text-xs text-purple-300">21:10 - 23:30</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Session 2 --> | |
| <div class="bg-black/40 rounded-xl overflow-hidden border border-cyan-500/20 hover:border-cyan-400/50 transition-all duration-500" data-aos="zoom-in" data-aos-delay="200"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?q=80&w=2070&auto=format&fit=crop" alt="Session" class="w-full h-64 object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div> | |
| <div class="absolute bottom-4 left-4"> | |
| <span class="bg-cyan-600/80 text-white text-xs px-2 py-1 rounded">NEXT</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-cyan-300">Glitch Noir</h3> | |
| <p class="text-sm text-cyan-100 mb-4">Saxophone x modular synth</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i data-feather="user" class="text-purple-400 mr-2 w-4"></i> | |
| <span class="text-xs text-cyan-300">Lena Circuit</span> | |
| </div> | |
| <div class="text-xs text-purple-300">23:45 - 02:10</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Session 3 --> | |
| <div class="bg-black/40 rounded-xl overflow-hidden border border-cyan-500/20 hover:border-cyan-400/50 transition-all duration-500" data-aos="zoom-in" data-aos-delay="400"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?q=80&w=2070&auto=format&fit=crop" alt="Session" class="w-full h-64 object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div> | |
| <div class="absolute bottom-4 left-4"> | |
| <span class="bg-purple-600/80 text-white text-xs px-2 py-1 rounded">LATER</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-cyan-300">Analog Dreams</h3> | |
| <p class="text-sm text-cyan-100 mb-4">Piano trio x holographic visuals</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i data-feather="user" class="text-pink-400 mr-2 w-4"></i> | |
| <span class="text-xs text-cyan-300">The Ghost Keys</span> | |
| </div> | |
| <div class="text-xs text-purple-300">02:30 - ∞</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Membership --> | |
| <section class="py-20 relative"> | |
| <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1519681393784-d120267933ba?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center opacity-10"></div> | |
| <div class="container mx-auto px-6 relative"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h2 class="text-4xl font-bold mb-4 neon-text">Neural Access</h2> | |
| <p class="text-xl text-cyan-200 max-w-2xl mx-auto"> | |
| Upgrade your sensory inputs. Membership includes direct neural patches to our underground sessions. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <!-- Tier 1 --> | |
| <div class="bg-gradient-to-b from-black to-purple-900/20 rounded-xl p-8 border border-cyan-500/30 hover:border-cyan-400/70 transition-all duration-500" data-aos="fade-up"> | |
| <h3 class="text-2xl font-bold mb-4 text-cyan-300">Lurker</h3> | |
| <div class="text-5xl font-bold mb-6 neon-text">₵29</div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-green-400 mr-2 w-5"></i> | |
| <span>Basic neural feed</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-green-400 mr-2 w-5"></i> | |
| <span>3 sessions/month</span> | |
| </li> | |
| <li class="flex items-center text-cyan-500"> | |
| <i data-feather="x" class="mr-2 w-5"></i> | |
| <span>No backstage access</span> | |
| </li> | |
| </ul> | |
| <button class="w-full py-3 bg-transparent border border-cyan-400 text-cyan-300 hover:bg-cyan-400/20 transition-all duration-500 rounded-full"> | |
| Ghost Mode | |
| </button> | |
| </div> | |
| <!-- Tier 2 --> | |
| <div class="bg-gradient-to-b from-black to-cyan-900/20 rounded-xl p-8 border border-cyan-500/50 hover:border-cyan-400 transition-all duration-500 transform hover:scale-105 relative" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="absolute top-0 right-0 bg-cyan-500 text-black text-xs font-bold px-3 py-1 rounded-bl-lg">POPULAR</div> | |
| <h3 class="text-2xl font-bold mb-4 text-cyan-300">Synth Seeker</h3> | |
| <div class="text-5xl font-bold mb-6 neon-text">₵79</div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-green-400 mr-2 w-5"></i> | |
| <span>Enhanced neural feed</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-green-400 mr-2 w-5"></i> | |
| <span>Unlimited sessions</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-green-400 mr-2 w-5"></i> | |
| <span>Backstage neural patches</span> | |
| </li> | |
| </ul> | |
| <button class="w-full py-3 bg-gradient-to-r from-cyan-500 to-purple-500 text-white hover:opacity-90 transition-all duration-500 rounded-full"> | |
| Upgrade Senses | |
| </button> | |
| </div> | |
| <!-- Tier 3 --> | |
| <div class="bg-gradient-to-b from-black to-pink-900/20 rounded-xl p-8 border border-cyan-500/30 hover:border-cyan-400/70 transition-all duration-500" data-aos="fade-up" data-aos-delay="400"> | |
| <h3 class="text-2xl font-bold mb-4 text-cyan-300">Cyber Shaman</h3> | |
| <div class="text-5xl font-bold mb-6 neon-text">₵211</div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-green-400 mr-2 w-5"></i> | |
| <span>Full sensory immersion</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-green-400 mr-2 w-5"></i> | |
| <span>Artist neural sync</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-green-400 mr-2 w-5"></i> | |
| <span>Create with the collective</span> | |
| </li> | |
| </ul> | |
| <button class="w-full py-3 bg-transparent border border-pink-400 text-pink-300 hover:bg-pink-400/20 transition-all duration-500 rounded-full"> | |
| Become One | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-black/80 border-t border-cyan-500/20 py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-12"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 neon-text">NEON MIRAGE</h3> | |
| <p class="text-sm text-cyan-200 mb-4"> | |
| Underground jazz-trip-hop collective operating since 2089 in the neural networks of Neo-Tokyo. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-cyan-300 hover:text-pink-400 transition-all"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| <a href="#" class="text-cyan-300 hover:text-pink-400 transition-all"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-cyan-300 hover:text-pink-400 transition-all"> | |
| <i data-feather="youtube"></i> | |
| </a> | |
| <a href="#" class="text-cyan-300 hover:text-pink-400 transition-all"> | |
| <i data-feather="github"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4 text-cyan-300">Sessions</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-sm text-cyan-200 hover:text-pink-400 transition-all">Live Streams</a></li> | |
| <li><a href="#" class="text-sm text-cyan-200 hover:text-pink-400 transition-all">Archives</a></li> | |
| <li><a href="#" class="text-sm text-cyan-200 hover:text-pink-400 transition-all">Neural Patches</a></li> | |
| <li><a href="#" class="text-sm text-cyan-200 hover:text-pink-400 transition-all">VR Experiences</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4 text-cyan-300">Collective</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-sm text-cyan-200 hover:text-pink-400 transition-all">Artists</a></li> | |
| <li><a href="#" class="text-sm text-cyan-200 hover:text-pink-400 transition-all">Collaborate</a></li> | |
| <li><a href="#" class="text-sm text-cyan-200 hover:text-pink-400 transition-all">Manifesto</a></li> | |
| <li><a href="#" class="text-sm text-cyan-200 hover:text-pink-400 transition-all">Neural API</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4 text-cyan-300">Reality Hacks</h4> | |
| <p class="text-sm text-cyan-200 mb-4"> | |
| Subscribe to our neural newsletter for underground session alerts and reality distortion patches. | |
| </p> | |
| <div class="flex"> | |
| <input type="email" placeholder="Your neural address" class="bg-black/50 text-cyan-200 border border-cyan-500/50 px-4 py-2 rounded-l-lg focus:outline-none focus:ring-1 focus:ring-cyan-400 w-full"> | |
| <button class="bg-cyan-500 text-black px-4 py-2 rounded-r-lg hover:bg-cyan-400 transition-all"> | |
| <i data-feather="send"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-cyan-500/20 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-xs text-cyan-500 mb-4 md:mb-0"> | |
| © 2110 NEON MIRAGE | All realities reserved | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-xs text-cyan-500 hover:text-cyan-300 transition-all">Neural Terms</a> | |
| <a href="#" class="text-xs text-cyan-500 hover:text-cyan-300 transition-all">Reality Policy</a> | |
| <a href="#" class="text-xs text-cyan-500 hover:text-cyan-300 transition-all">Glitch Support</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Audio Visualizer --> | |
| <div class="fixed bottom-0 left-0 right-0 h-2 bg-gradient-to-r from-purple-500 via-cyan-500 to-pink-500 opacity-20 animate-pulse"></div> | |
| <script> | |
| // Initialize animations and icons | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out-quad', | |
| once: true | |
| }); | |
| feather.replace(); | |
| // Audio visualizer animation | |
| anime({ | |
| targets: '.animate-pulse', | |
| opacity: [0.2, 0.8], | |
| duration: 2000, | |
| direction: 'alternate', | |
| loop: true, | |
| easing: 'easeInOutSine' | |
| }); | |
| // Glitch effect on hover | |
| document.querySelectorAll('.glitch').forEach(el => { | |
| el.addEventListener('mouseenter', () => { | |
| anime({ | |
| targets: el, | |
| translateX: () => anime.random(-5, 5), | |
| translateY: () => anime.random(-5, 5), | |
| duration: 50, | |
| loop: 5, | |
| easing: 'easeInOutSine' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |