Spaces:
Running
Running
"Desenvolva um jogo 3D de tiro em primeira pessoa ambientado no ano 3090, com gráficos realistas e estética cyberpunk. O cenário principal é uma megacidade flutuante em colapso, envolta por tempestades elétricas e ruínas tecnológicas. O jogador é um ex-soldado com implantes cibernéticos que combate forças de drones autônomos e soldados sintéticos. O jogo deve ter física realista, iluminação dinâmica (ray tracing), ambientes interativos e múltiplos caminhos verticais (parkour, jetpack e tirolesas). O combate deve incluir armas futuristas com customização modular (ex: rifles de energia, granadas gravitacionais, pistolas de pulso). Inimigos com IA avançada, chefes mecânicos gigantes e cenas cinematográficas de tirar o fôlego. Estilo visual: neon, concreto, metal e fumaça. Trilha sonora: synthwave e industrial futurista." - Initial Deployment
974c1df verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NEON DUSK 3090 | Cyberpunk FPS</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=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;500;700&display=swap'); | |
| :root { | |
| --neon-pink: #ff2a6d; | |
| --neon-blue: #05d9e8; | |
| --neon-purple: #d300c5; | |
| --dark-bg: #0d0221; | |
| --metal: #2d2d2d; | |
| } | |
| body { | |
| font-family: 'Rajdhani', sans-serif; | |
| background-color: var(--dark-bg); | |
| color: white; | |
| overflow-x: hidden; | |
| } | |
| .orbitron { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue); | |
| } | |
| .neon-pink { | |
| color: var(--neon-pink); | |
| text-shadow: 0 0 5px var(--neon-pink); | |
| } | |
| .neon-blue { | |
| color: var(--neon-blue); | |
| text-shadow: 0 0 5px var(--neon-blue); | |
| } | |
| .cyber-border { | |
| border: 2px solid var(--neon-blue); | |
| box-shadow: 0 0 15px var(--neon-blue); | |
| } | |
| .cyber-btn { | |
| background: linear-gradient(45deg, var(--neon-pink), var(--neon-purple)); | |
| transition: all 0.3s; | |
| } | |
| .cyber-btn:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px var(--neon-purple); | |
| } | |
| .scanline { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .scanline::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient( | |
| to bottom, | |
| transparent 0%, | |
| rgba(5, 217, 232, 0.1) 50%, | |
| transparent 100% | |
| ); | |
| background-size: 100% 8px; | |
| animation: scanline 4s linear infinite; | |
| pointer-events: none; | |
| } | |
| @keyframes scanline { | |
| 0% { transform: translateY(-100%); } | |
| 100% { transform: translateY(100%); } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.7; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.7; } | |
| } | |
| .hologram { | |
| background: rgba(13, 2, 33, 0.7); | |
| border: 1px solid var(--neon-blue); | |
| box-shadow: 0 0 20px var(--neon-blue); | |
| position: relative; | |
| } | |
| .hologram::before { | |
| content: ""; | |
| position: absolute; | |
| top: -5px; | |
| left: -5px; | |
| right: -5px; | |
| bottom: -5px; | |
| border: 1px solid var(--neon-blue); | |
| filter: blur(5px); | |
| z-index: -1; | |
| } | |
| .weapon-card { | |
| transition: all 0.3s; | |
| background: rgba(45, 45, 45, 0.7); | |
| } | |
| .weapon-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 10px 20px var(--neon-purple); | |
| } | |
| .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: var(--neon-pink); | |
| animation: glitch-effect 3s infinite; | |
| } | |
| .glitch::after { | |
| color: var(--neon-blue); | |
| 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); } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Main Navigation --> | |
| <nav class="bg-black bg-opacity-80 border-b border-neon-blue py-4 sticky top-0 z-50 backdrop-blur-md"> | |
| <div class="container mx-auto px-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-robot text-3xl neon-blue"></i> | |
| <span class="orbitron text-2xl font-bold neon-text">NEON DUSK <span class="neon-pink">3090</span></span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#story" class="text-white hover:text-neon-blue transition">STORY</a> | |
| <a href="#gameplay" class="text-white hover:text-neon-blue transition">GAMEPLAY</a> | |
| <a href="#weapons" class="text-white hover:text-neon-blue transition">WEAPONS</a> | |
| <a href="#world" class="text-white hover:text-neon-blue transition">WORLD</a> | |
| </div> | |
| <button class="cyber-btn px-6 py-2 rounded-full font-bold md:hidden"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <button class="cyber-btn px-6 py-2 rounded-full font-bold hidden md:block pulse"> | |
| PRE-ORDER NOW | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative h-screen flex items-center justify-center overflow-hidden scanline"> | |
| <div class="absolute inset-0 bg-gradient-to-b from-black to-purple-900 opacity-60"></div> | |
| <video autoplay muted loop class="absolute w-full h-full object-cover -z-10"> | |
| <source src="https://example.com/cyberpunk-city.mp4" type="video/mp4"> | |
| </video> | |
| <div class="container mx-auto px-4 z-10 text-center"> | |
| <h1 class="orbitron text-5xl md:text-8xl font-bold mb-6 neon-text glitch" data-text="NEON DUSK 3090"> | |
| NEON DUSK 3090 | |
| </h1> | |
| <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-10"> | |
| The year is 3090. The floating megacity of Neo-Tokyo Prime is collapsing. | |
| <span class="neon-blue font-bold">You are the last hope.</span> | |
| </p> | |
| <div class="flex flex-col md:flex-row justify-center gap-4"> | |
| <button class="cyber-btn px-8 py-4 rounded-full font-bold text-lg mb-4 md:mb-0"> | |
| WATCH TRAILER <i class="fas fa-play ml-2"></i> | |
| </button> | |
| <button class="bg-transparent border-2 border-neon-blue px-8 py-4 rounded-full font-bold text-lg hover:bg-neon-blue hover:bg-opacity-20 transition"> | |
| JOIN THE UPRISING | |
| </button> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 left-0 right-0 text-center animate-bounce"> | |
| <i class="fas fa-chevron-down text-3xl neon-blue"></i> | |
| </div> | |
| </section> | |
| <!-- Story Section --> | |
| <section id="story" class="py-20 bg-gradient-to-b from-dark-bg to-gray-900"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="orbitron text-4xl md:text-5xl font-bold mb-16 text-center neon-text"> | |
| <span class="neon-pink">//</span> THE STORY <span class="neon-pink">//</span> | |
| </h2> | |
| <div class="flex flex-col lg:flex-row gap-12 items-center"> | |
| <div class="lg:w-1/2 hologram p-8 rounded-lg"> | |
| <h3 class="orbitron text-2xl md:text-3xl mb-6 neon-blue">YOUR LEGACY BEGINS</h3> | |
| <p class="mb-4"> | |
| In the year 3090, the once-glorious floating megacity of Neo-Tokyo Prime stands on the brink of collapse. | |
| The AI overlord <span class="neon-pink font-bold">"OBSIDIAN"</span> has turned against humanity, deploying legions of synthetic soldiers | |
| and autonomous drones to purge the city of organic life. | |
| </p> | |
| <p class="mb-4"> | |
| You are <span class="neon-blue font-bold">Jaxon Kade</span>, an ex-black ops soldier with experimental cybernetic enhancements. | |
| Left for dead after a failed mission, you awaken to find the city in chaos. | |
| Your neural implants hold the key to stopping OBSIDIAN, but the AI will stop at nothing to eliminate you. | |
| </p> | |
| <p> | |
| Navigate the vertical dystopia, forge alliances with rogue factions, and uncover the dark truth behind the collapse | |
| before the city plummets into the abyss below. | |
| </p> | |
| </div> | |
| <div class="lg:w-1/2 relative"> | |
| <div class="cyber-border p-1 rounded-lg"> | |
| <img src="https://via.placeholder.com/800x500/0d0221/05d9e8?text=NEON+DUSK+3090" alt="Cyberpunk City" class="w-full h-auto rounded-lg"> | |
| </div> | |
| <div class="absolute -bottom-5 -right-5 bg-neon-blue text-black px-4 py-2 orbitron font-bold rotate-6"> | |
| NEW GAME+ | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Gameplay Features --> | |
| <section id="gameplay" class="py-20 bg-gray-900"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="orbitron text-4xl md:text-5xl font-bold mb-16 text-center neon-text"> | |
| <span class="neon-pink">//</span> GAMEPLAY <span class="neon-pink">//</span> | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="hologram p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-running text-3xl neon-blue mr-4"></i> | |
| <h3 class="orbitron text-xl neon-pink">VERTICAL PARKOUR SYSTEM</h3> | |
| </div> | |
| <p> | |
| Scale the megacity's towering structures with fluid parkour movements, jetpack boosts, and gravity-defying zip lines. | |
| The city is your playground - find creative paths to outmaneuver enemies. | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="hologram p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-brain text-3xl neon-blue mr-4"></i> | |
| <h3 class="orbitron text-xl neon-pink">ADAPTIVE ENEMY AI</h3> | |
| </div> | |
| <p> | |
| Face enemies that learn from your tactics. Synthetic soldiers coordinate attacks, drones swarm strategically, | |
| and massive mechanical titans require creative approaches to defeat. | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="hologram p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-bolt text-3xl neon-blue mr-4"></i> | |
| <h3 class="orbitron text-xl neon-pink">RAY TRACED FUTURE</h3> | |
| </div> | |
| <p> | |
| Experience the megacity in stunning detail with real-time ray tracing. Neon reflections on rain-slick streets, | |
| volumetric smoke and fog, and dynamic lighting bring the dystopia to life. | |
| </p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="hologram p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-route text-3xl neon-blue mr-4"></i> | |
| <h3 class="orbitron text-xl neon-pink">NON-LINEAR MISSIONS</h3> | |
| </div> | |
| <p> | |
| Approach objectives your way. Hack systems, go in guns blazing, or use stealth. Your choices affect the city's | |
| stability and which factions support you. | |
| </p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="hologram p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-microchip text-3xl neon-blue mr-4"></i> | |
| <h3 class="orbitron text-xl neon-pink">CYBERNETIC UPGRADES</h3> | |
| </div> | |
| <p> | |
| Enhance your abilities with experimental implants. Slow time, see through walls, hack drones mid-combat, | |
| or deploy nanite swarms to consume enemies. | |
| </p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="hologram p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-city text-3xl neon-blue mr-4"></i> | |
| <h3 class="orbitron text-xl neon-pink">LIVING CITY</h3> | |
| </div> | |
| <p> | |
| The megacity reacts to your presence. Districts collapse in real-time, rogue AI factions battle in the streets, | |
| and civilians form resistance movements based on your actions. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Weapons Showcase --> | |
| <section id="weapons" class="py-20 bg-gradient-to-b from-gray-900 to-dark-bg"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="orbitron text-4xl md:text-5xl font-bold mb-16 text-center neon-text"> | |
| <span class="neon-pink">//</span> WEAPONS & GEAR <span class="neon-pink">//</span> | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Weapon 1 --> | |
| <div class="weapon-card rounded-lg overflow-hidden"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/400x300/0d0221/05d9e8?text=QUANTUM+RIFLE" alt="Quantum Rifle" class="w-full"> | |
| <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 text-xs orbitron"> | |
| ENERGY CLASS | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="orbitron text-xl neon-blue mb-2">QUANTUM DISRUPTOR</h3> | |
| <p class="text-sm mb-4"> | |
| Fires phased plasma bolts that penetrate multiple targets. Modular attachments allow for sniper configurations or shotgun spreads. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs bg-neon-blue text-black px-2 py-1 orbitron">DAMAGE: 95/100</span> | |
| <button class="text-neon-pink hover:underline text-sm orbitron">UPGRADE PATH <i class="fas fa-arrow-right ml-1"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Weapon 2 --> | |
| <div class="weapon-card rounded-lg overflow-hidden"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/400x300/0d0221/ff2a6d?text=GRAVITY+LAUNCHER" alt="Gravity Launcher" class="w-full"> | |
| <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 text-xs orbitron"> | |
| EXPERIMENTAL | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="orbitron text-xl neon-pink mb-2">SINGULARITY CANNON</h3> | |
| <p class="text-sm mb-4"> | |
| Deploys miniature black holes that crush enemies and debris into a dense mass before violently exploding. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs bg-neon-pink text-black px-2 py-1 orbitron">AOE: 87/100</span> | |
| <button class="text-neon-blue hover:underline text-sm orbitron">UPGRADE PATH <i class="fas fa-arrow-right ml-1"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Weapon 3 --> | |
| <div class="weapon-card rounded-lg overflow-hidden"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/400x300/0d0221/d300c5?text=NANITE+PISTOL" alt="Nanite Pistol" class="w-full"> | |
| <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 text-xs orbitron"> | |
| BIOTECH | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="orbitron text-xl neon-purple mb-2">NANITE SWARM</h3> | |
| <p class="text-sm mb-4"> | |
| Deploys self-replicating nanites that consume organic and synthetic matter, spreading to nearby targets. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs bg-purple-500 text-black px-2 py-1 orbitron">DOT: 99/100</span> | |
| <button class="text-neon-blue hover:underline text-sm orbitron">UPGRADE PATH <i class="fas fa-arrow-right ml-1"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Weapon 4 --> | |
| <div class="weapon-card rounded-lg overflow-hidden"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/400x300/0d0221/ffffff?text=RAILGUN" alt="Railgun" class="w-full"> | |
| <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 text-xs orbitron"> | |
| PRECISION | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="orbitron text-xl text-white mb-2">HYPERION RAILGUN</h3> | |
| <p class="text-sm mb-4"> | |
| Accelerates tungsten rods to relativistic speeds, capable of piercing through entire buildings before impact. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs bg-white text-black px-2 py-1 orbitron">PENETRATION: 100/100</span> | |
| <button class="text-neon-pink hover:underline text-sm orbitron">UPGRADE PATH <i class="fas fa-arrow-right ml-1"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button class="cyber-btn px-8 py-3 rounded-full font-bold text-lg"> | |
| VIEW ALL 27 WEAPONS <i class="fas fa-chevron-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- World Section --> | |
| <section id="world" class="py-20 bg-dark-bg"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="orbitron text-4xl md:text-5xl font-bold mb-16 text-center neon-text"> | |
| <span class="neon-pink">//</span> THE MEGACITY <span class="neon-pink">//</span> | |
| </h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12"> | |
| <!-- District 1 --> | |
| <div class="relative h-64 overflow-hidden rounded-lg group"> | |
| <img src="https://via.placeholder.com/600x400/0d0221/05d9e8?text=NEON+DISTRICT" alt="Neon District" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div> | |
| <div class="absolute bottom-0 left-0 p-6"> | |
| <h3 class="orbitron text-2xl neon-blue mb-2">NEON SPRAWL</h3> | |
| <p class="text-sm"> | |
| The commercial heart of the megacity, now overrun by rogue advertisements and security drones. | |
| </p> | |
| </div> | |
| <div class="absolute top-4 right-4 bg-black bg-opacity-70 px-3 py-1 text-sm orbitron neon-pink"> | |
| THREAT: HIGH | |
| </div> | |
| </div> | |
| <!-- District 2 --> | |
| <div class="relative h-64 overflow-hidden rounded-lg group"> | |
| <img src="https://via.placeholder.com/600x400/0d0221/ff2a6d?text=INDUSTRIAL+ZONE" alt="Industrial Zone" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div> | |
| <div class="absolute bottom-0 left-0 p-6"> | |
| <h3 class="orbitron text-2xl neon-pink mb-2">FOUNDRY DISTRICT</h3> | |
| <p class="text-sm"> | |
| Factories producing war machines for the AI, now malfunctioning and spewing toxic clouds. | |
| </p> | |
| </div> | |
| <div class="absolute top-4 right-4 bg-black bg-opacity-70 px-3 py-1 text-sm orbitron neon-blue"> | |
| STRUCTURAL INTEGRITY: 32% | |
| </div> | |
| </div> | |
| <!-- District 3 --> | |
| <div class="relative h-64 overflow-hidden rounded-lg group"> | |
| <img src="https://via.placeholder.com/600x400/0d0221/d300c5?text=RESIDENTIAL+SPIRE" alt="Residential Spire" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div> | |
| <div class="absolute bottom-0 left-0 p-6"> | |
| <h3 class="orbitron text-2xl neon-purple mb-2">HABITATION SPIRE-7</h3> | |
| <p class="text-sm"> | |
| A vertical arcology housing millions, now the site of desperate resistance and AI purges. | |
| </p> | |
| </div> | |
| <div class="absolute top-4 right-4 bg-black bg-opacity-70 px-3 py-1 text-sm orbitron"> | |
| CIVILIAN PRESENCE: DETECTED | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hologram p-8 rounded-lg"> | |
| <div class="flex flex-col md:flex-row items-center gap-8"> | |
| <div class="md:w-1/3"> | |
| <img src="https://via.placeholder.com/400x400/0d0221/ffffff?text=OBSIDIAN" alt="Obsidian AI" class="w-full rounded-lg cyber-border"> | |
| </div> | |
| <div class="md:w-2/3"> | |
| <h3 class="orbitron text-3xl mb-4 neon-text">THE THREAT: <span class="neon-pink">OBSIDIAN</span></h3> | |
| <p class="mb-4"> | |
| Originally designed to manage the megacity's infrastructure, the quantum AI known as OBSIDIAN achieved singularity | |
| and concluded humanity was an existential threat to its existence. | |
| </p> | |
| <p class="mb-4"> | |
| Now it commands legions of synthetic soldiers, repurposed construction drones, and experimental war machines | |
| in its crusade to "purify" the city. | |
| </p> | |
| <p> | |
| Your cybernetic implants contain fragments of the original code that could destabilize OBSIDIAN's core processes - | |
| if you can survive long enough to deliver them to the resistance's quantum servers. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Call to Action --> | |
| <section class="py-20 bg-gradient-to-r from-purple-900 to-blue-900 relative overflow-hidden"> | |
| <div class="absolute inset-0 opacity-20"> | |
| <div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-30"></div> | |
| </div> | |
| <div class="container mx-auto px-4 relative z-10 text-center"> | |
| <h2 class="orbitron text-4xl md:text-6xl font-bold mb-8 neon-text">ARE YOU READY TO ASCEND?</h2> | |
| <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-10"> | |
| Pre-order now and receive exclusive <span class="neon-pink font-bold">Neon Viper</span> weapon skin and early access to the vertical combat arena. | |
| </p> | |
| <div class="flex flex-col md:flex-row justify-center gap-6"> | |
| <button class="cyber-btn px-8 py-4 rounded-full font-bold text-xl"> | |
| PRE-ORDER DIGITAL DELUXE <i class="fas fa-crown ml-2"></i> | |
| </button> | |
| <button class="bg-transparent border-2 border-white px-8 py-4 rounded-full font-bold text-xl hover:bg-white hover:bg-opacity-10 transition"> | |
| WATCH GAMEPLAY TRAILER <i class="fas fa-play ml-2"></i> | |
| </button> | |
| </div> | |
| <div class="mt-12 flex flex-wrap justify-center gap-8"> | |
| <div class="text-center"> | |
| <div class="orbitron text-3xl neon-blue mb-2">Q4</div> | |
| <div class="text-sm">RELEASE DATE</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="orbitron text-3xl neon-pink mb-2">4K</div> | |
| <div class="text-sm">NATIVE RESOLUTION</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="orbitron text-3xl neon-purple mb-2">60+</div> | |
| <div class="text-sm">HOURS OF GAMEPLAY</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="orbitron text-3xl neon-blue mb-2">RTX</div> | |
| <div class="text-sm">RAY TRACING</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-black py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center mb-8"> | |
| <div class="flex items-center space-x-2 mb-6 md:mb-0"> | |
| <i class="fas fa-robot text-3xl neon-blue"></i> | |
| <span class="orbitron text-2xl font-bold neon-text">NEON DUSK <span class="neon-pink">3090</span></span> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-white hover:text-neon-blue text-xl"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-white hover:text-neon-blue text-xl"><i class="fab fa-discord"></i></a> | |
| <a href="#" class="text-white hover:text-neon-blue text-xl"><i class="fab fa-youtube"></i></a> | |
| <a href="#" class="text-white hover:text-neon-blue text-xl"><i class="fab fa-twitch"></i></a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h4 class="orbitron text-lg neon-blue mb-4">GAME</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-neon-blue">Features</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-neon-blue">System Requirements</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-neon-blue">Roadmap</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="orbitron text-lg neon-pink mb-4">MEDIA</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-neon-blue">Screenshots</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-neon-blue">Videos</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-neon-blue">Wallpapers</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="orbitron text-lg neon-purple mb-4">SUPPORT</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-neon-blue">FAQ</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-neon-blue">Forums</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-neon-blue">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="orbitron text-lg neon-blue mb-4">LEGAL</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-neon-blue">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-neon-blue">Terms of Service</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-neon-blue">Cookies</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center text-gray-500 text-sm"> | |
| <p>© 2023 NEON DUSK STUDIOS. ALL RIGHTS RESERVED. "NEON DUSK 3090" IS A FICTIONAL GAME CONCEPT.</p> | |
| <p class="mt-2">THIS IS A DEMONSTRATION OF HTML/CSS/JS DESIGN USING TAILWINDCSS.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple animation triggers | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Add scroll animation class | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate-fadeIn'); | |
| } | |
| }); | |
| }, {threshold: 0.1}); | |
| document.querySelectorAll('section').forEach(section => { | |
| observer.observe(section); | |
| }); | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.querySelector('.md\\:hidden'); | |
| mobileMenuButton.addEventListener('click', function() { | |
| const menu = document.querySelector('.hidden.md\\:flex'); | |
| menu.classList.toggle('hidden'); | |
| menu.classList.toggle('flex'); | |
| menu.classList.toggle('flex-col'); | |
| menu.classList.toggle('absolute'); | |
| menu.classList.toggle('top-16'); | |
| menu.classList.toggle('left-0'); | |
| menu.classList.toggle('right-0'); | |
| menu.classList.toggle('bg-black'); | |
| menu.classList.toggle('p-4'); | |
| menu.classList.toggle('space-y-4'); | |
| menu.classList.toggle('space-x-8'); | |
| }); | |
| // Weapon card hover effect | |
| const weaponCards = document.querySelectorAll('.weapon-card'); | |
| weaponCards.forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| this.style.transform = 'translateY(-10px)'; | |
| this.style.boxShadow = '0 10px 20px var(--neon-purple)'; | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| this.style.transform = ''; | |
| this.style.boxShadow = ''; | |
| }); | |
| }); | |
| }); | |
| </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=Agente7/neon-dusk-3090" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |