Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Neon Nexus - Cyberpunk Game Library</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&family=Roboto+Mono:wght@300;400;700&display=swap'); | |
| :root { | |
| --neon-pink: #ff2a6d; | |
| --neon-blue: #05d9e8; | |
| --neon-purple: #d300c5; | |
| --neon-green: #00ff9d; | |
| --dark-bg: #0d0221; | |
| --darker-bg: #05010e; | |
| } | |
| body { | |
| font-family: 'Roboto Mono', monospace; | |
| background-color: var(--dark-bg); | |
| color: white; | |
| overflow-x: hidden; | |
| } | |
| h1, h2, h3, .neon-title { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .neon-text-pink { | |
| text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink); | |
| color: var(--neon-pink); | |
| } | |
| .neon-text-blue { | |
| text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue); | |
| color: var(--neon-blue); | |
| } | |
| .neon-text-purple { | |
| text-shadow: 0 0 5px var(--neon-purple), 0 0 10px var(--neon-purple); | |
| color: var(--neon-purple); | |
| } | |
| .neon-text-green { | |
| text-shadow: 0 0 5px var(--neon-green), 0 0 10px var(--neon-green); | |
| color: var(--neon-green); | |
| } | |
| .neon-border-pink { | |
| border: 2px solid var(--neon-pink); | |
| box-shadow: 0 0 10px var(--neon-pink), inset 0 0 5px var(--neon-pink); | |
| } | |
| .neon-border-blue { | |
| border: 2px solid var(--neon-blue); | |
| box-shadow: 0 0 10px var(--neon-blue), inset 0 0 5px var(--neon-blue); | |
| } | |
| .neon-border-purple { | |
| border: 2px solid var(--neon-purple); | |
| box-shadow: 0 0 10px var(--neon-purple), inset 0 0 5px var(--neon-purple); | |
| } | |
| .neon-border-green { | |
| border: 2px solid var(--neon-green); | |
| box-shadow: 0 0 10px var(--neon-green), inset 0 0 5px var(--neon-green); | |
| } | |
| .game-card { | |
| transition: all 0.3s ease; | |
| background-color: rgba(13, 2, 33, 0.7); | |
| backdrop-filter: blur(5px); | |
| transform-style: preserve-3d; | |
| transform: perspective(1000px); | |
| } | |
| .game-card:hover { | |
| transform: perspective(1000px) translateY(-10px) rotateX(5deg); | |
| z-index: 10; | |
| } | |
| .game-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: -2px; | |
| left: -2px; | |
| right: -2px; | |
| bottom: -2px; | |
| z-index: -1; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .game-card:hover::before { | |
| opacity: 1; | |
| } | |
| .game-card.pink:hover::before { | |
| background: linear-gradient(45deg, var(--neon-pink), var(--neon-purple)); | |
| } | |
| .game-card.blue:hover::before { | |
| background: linear-gradient(45deg, var(--neon-blue), var(--neon-green)); | |
| } | |
| .game-card.purple:hover::before { | |
| background: linear-gradient(45deg, var(--neon-purple), var(--neon-pink)); | |
| } | |
| .game-card.green:hover::before { | |
| background: linear-gradient(45deg, var(--neon-green), var(--neon-blue)); | |
| } | |
| .glitch-effect { | |
| position: relative; | |
| } | |
| .glitch-effect::before, .glitch-effect::after { | |
| content: attr(data-text); | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| opacity: 0.8; | |
| } | |
| .glitch-effect::before { | |
| color: var(--neon-blue); | |
| animation: glitch 3s infinite linear; | |
| clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); | |
| } | |
| .glitch-effect::after { | |
| color: var(--neon-pink); | |
| animation: glitch 2s infinite linear reverse; | |
| clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%); | |
| } | |
| @keyframes glitch { | |
| 0%, 100% { transform: translate(0); } | |
| 20% { transform: translate(-3px, 3px); } | |
| 40% { transform: translate(-3px, -3px); } | |
| 60% { transform: translate(3px, 3px); } | |
| 80% { transform: translate(3px, -3px); } | |
| } | |
| .scanline { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient( | |
| to bottom, | |
| rgba(255, 255, 255, 0) 0%, | |
| rgba(255, 255, 255, 0.03) 50%, | |
| rgba(255, 255, 255, 0) 100% | |
| ); | |
| background-size: 100% 4px; | |
| animation: scanline 8s linear infinite; | |
| pointer-events: none; | |
| z-index: 9999; | |
| } | |
| @keyframes scanline { | |
| 0% { background-position: 0 0; } | |
| 100% { background-position: 0 100%; } | |
| } | |
| .terminal-text { | |
| border-right: 0.15em solid var(--neon-green); | |
| animation: blink-caret 0.75s step-end infinite; | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent; } | |
| 50% { border-color: var(--neon-green); } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.6; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.6; } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Scanline effect --> | |
| <div class="scanline"></div> | |
| <!-- Header --> | |
| <header class="py-6 px-4 md:px-12 border-b border-gray-800"> | |
| <div class="container mx-auto flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i class="fas fa-gamepad text-3xl neon-text-pink mr-3"></i> | |
| <h1 class="text-3xl md:text-4xl font-bold neon-text-blue glitch-effect" data-text="NEON NEXUS">NEON NEXUS</h1> | |
| </div> | |
| <div class="relative w-full md:w-64"> | |
| <input type="text" placeholder="Search games..." | |
| class="w-full bg-black bg-opacity-50 text-white px-4 py-2 rounded-md border border-gray-700 focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500"> | |
| <i class="fas fa-search absolute right-3 top-2.5 text-gray-400"></i> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Featured Game --> | |
| <section class="mb-12"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl md:text-3xl font-bold neon-text-pink">FEATURED TITLE</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-gray-800 rounded-md hover:bg-gray-700 transition">View All</button> | |
| </div> | |
| </div> | |
| <div class="relative overflow-hidden rounded-lg neon-border-blue h-96"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-black to-transparent z-10"></div> | |
| <img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Featured Game" class="w-full h-full object-cover"> | |
| <div class="absolute bottom-0 left-0 z-20 p-6 md:p-8 w-full md:w-2/3"> | |
| <div class="flex items-center mb-2"> | |
| <span class="px-2 py-1 text-xs bg-purple-900 text-purple-300 rounded mr-2">NEW RELEASE</span> | |
| <span class="px-2 py-1 text-xs bg-blue-900 text-blue-300 rounded">RPG</span> | |
| </div> | |
| <h3 class="text-3xl md:text-4xl font-bold mb-2 neon-text-green">Neon Dawn</h3> | |
| <p class="text-gray-300 mb-4">A cyberpunk RPG set in the dystopian megacity of Neo-Tokyo. Hack, fight and charm your way through corporate intrigue and street gang warfare.</p> | |
| <div class="flex space-x-3"> | |
| <button class="px-4 py-2 bg-green-600 hover:bg-green-700 rounded-md neon-text-green font-bold transition">PLAY NOW</button> | |
| <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-md transition">WATCH TRAILER</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Genres Navigation --> | |
| <section class="mb-8"> | |
| <div class="flex overflow-x-auto pb-2 space-x-2 scrollbar-hide"> | |
| <button class="px-4 py-2 rounded-full neon-border-pink neon-text-pink whitespace-nowrap hover:bg-pink-900 hover:bg-opacity-30 transition">All Games</button> | |
| <button class="px-4 py-2 rounded-full border border-gray-700 text-gray-300 whitespace-nowrap hover:bg-gray-800 hover:text-white transition">RPG</button> | |
| <button class="px-4 py-2 rounded-full border border-gray-700 text-gray-300 whitespace-nowrap hover:bg-gray-800 hover:text-white transition">FPS</button> | |
| <button class="px-4 py-2 rounded-full border border-gray-700 text-gray-300 whitespace-nowrap hover:bg-gray-800 hover:text-white transition">Adventure</button> | |
| <button class="px-4 py-2 rounded-full border border-gray-700 text-gray-300 whitespace-nowrap hover:bg-gray-800 hover:text-white transition">Strategy</button> | |
| <button class="px-4 py-2 rounded-full border border-gray-700 text-gray-300 whitespace-nowrap hover:bg-gray-800 hover:text-white transition">Simulation</button> | |
| <button class="px-4 py-2 rounded-full border border-gray-700 text-gray-300 whitespace-nowrap hover:bg-gray-800 hover:text-white transition">Horror</button> | |
| <button class="px-4 py-2 rounded-full border border-gray-700 text-gray-300 whitespace-nowrap hover:bg-gray-800 hover:text-white transition">Sports</button> | |
| </div> | |
| </section> | |
| <!-- Recently Added --> | |
| <section class="mb-12"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold neon-text-purple">RECENTLY ADDED</h2> | |
| <button class="px-3 py-1 bg-gray-800 rounded-md hover:bg-gray-700 transition">View All</button> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <!-- Game Card 1 --> | |
| <div class="game-card pink rounded-lg overflow-hidden neon-border-pink relative"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1560253023-3ec5d502959f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Cyber Runner" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> | |
| <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-pink"> | |
| <i class="fas fa-heart mr-1"></i> 4.8 | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-lg font-bold neon-text-pink">Cyber Runner</h3> | |
| <span class="px-2 py-1 text-xs bg-pink-900 text-pink-300 rounded">FPS</span> | |
| </div> | |
| <p class="text-gray-400 text-sm mb-3">A high-speed parkour shooter set in a neon-drenched future city.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-gray-500">Free</span> | |
| <button class="text-xs px-3 py-1 bg-pink-900 hover:bg-pink-800 rounded transition">PLAY</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Card 2 --> | |
| <div class="game-card blue rounded-lg overflow-hidden neon-border-blue relative"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1542281286-9e0a16bb7366?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Neon Protocol" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> | |
| <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-blue"> | |
| <i class="fas fa-heart mr-1"></i> 4.6 | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-lg font-bold neon-text-blue">Neon Protocol</h3> | |
| <span class="px-2 py-1 text-xs bg-blue-900 text-blue-300 rounded">RPG</span> | |
| </div> | |
| <p class="text-gray-400 text-sm mb-3">A tactical cyberpunk RPG with deep hacking mechanics and turn-based combat.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-gray-500">$29.99</span> | |
| <button class="text-xs px-3 py-1 bg-blue-900 hover:bg-blue-800 rounded transition">BUY</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Card 3 --> | |
| <div class="game-card purple rounded-lg overflow-hidden neon-border-purple relative"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1511512578047-dba367674e13?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" | |
| alt="Circuit Break" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> | |
| <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-purple"> | |
| <i class="fas fa-heart mr-1"></i> 4.9 | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-lg font-bold neon-text-purple">Circuit Break</h3> | |
| <span class="px-2 py-1 text-xs bg-purple-900 text-purple-300 rounded">Racing</span> | |
| </div> | |
| <p class="text-gray-400 text-sm mb-3">Futuristic anti-gravity racing through neon cityscapes at breakneck speeds.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-gray-500">$19.99</span> | |
| <button class="text-xs px-3 py-1 bg-purple-900 hover:bg-purple-800 rounded transition">BUY</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Card 4 --> | |
| <div class="game-card green rounded-lg overflow-hidden neon-border-green relative"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1551103782-8ab07afd45c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Synthwave Survivor" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> | |
| <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-green"> | |
| <i class="fas fa-heart mr-1"></i> 4.7 | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-lg font-bold neon-text-green">Synthwave Survivor</h3> | |
| <span class="px-2 py-1 text-xs bg-green-900 text-green-300 rounded">Roguelike</span> | |
| </div> | |
| <p class="text-gray-400 text-sm mb-3">A neon-drenched roguelike where you battle through waves of enemies with synthwave beats.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-gray-500">$14.99</span> | |
| <button class="text-xs px-3 py-1 bg-green-900 hover:bg-green-800 rounded transition">BUY</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Popular Games --> | |
| <section class="mb-12"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold neon-text-blue">POPULAR GAMES</h2> | |
| <button class="px-3 py-1 bg-gray-800 rounded-md hover:bg-gray-700 transition">View All</button> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <!-- Game Card 5 --> | |
| <div class="game-card pink rounded-lg overflow-hidden neon-border-pink relative"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Neon Dawn" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> | |
| <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-pink"> | |
| <i class="fas fa-heart mr-1"></i> 4.9 | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-lg font-bold neon-text-pink">Neon Dawn</h3> | |
| <span class="px-2 py-1 text-xs bg-pink-900 text-pink-300 rounded">RPG</span> | |
| </div> | |
| <p class="text-gray-400 text-sm mb-3">Explore the sprawling megacity of Neo-Tokyo in this open-world cyberpunk adventure.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-gray-500">$39.99</span> | |
| <button class="text-xs px-3 py-1 bg-pink-900 hover:bg-pink-800 rounded transition">BUY</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Card 6 --> | |
| <div class="game-card blue rounded-lg overflow-hidden neon-border-blue relative"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" | |
| alt="Hacknet Legends" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> | |
| <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-blue"> | |
| <i class="fas fa-heart mr-1"></i> 4.5 | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-lg font-bold neon-text-blue">Hacknet Legends</h3> | |
| <span class="px-2 py-1 text-xs bg-blue-900 text-blue-300 rounded">Simulation</span> | |
| </div> | |
| <p class="text-gray-400 text-sm mb-3">A realistic hacking simulator with a deep storyline and cyberpunk aesthetics.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-gray-500">$24.99</span> | |
| <button class="text-xs px-3 py-1 bg-blue-900 hover:bg-blue-800 rounded transition">BUY</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Card 7 --> | |
| <div class="game-card purple rounded-lg overflow-hidden neon-border-purple relative"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1544200175-ca6e80a59346?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Ghostwire" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> | |
| <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-purple"> | |
| <i class="fas fa-heart mr-1"></i> 4.3 | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-lg font-bold neon-text-purple">Ghostwire</h3> | |
| <span class="px-2 py-1 text-xs bg-purple-900 text-purple-300 rounded">Horror</span> | |
| </div> | |
| <p class="text-gray-400 text-sm mb-3">A supernatural horror game set in a cyberpunk world where ghosts invade the digital realm.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-gray-500">$29.99</span> | |
| <button class="text-xs px-3 py-1 bg-purple-900 hover:bg-purple-800 rounded transition">BUY</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Card 8 --> | |
| <div class="game-card green rounded-lg overflow-hidden neon-border-green relative"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1516035069371-29a1b244cc32?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80" | |
| alt="Cyber Arena" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> | |
| <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-green"> | |
| <i class="fas fa-heart mr-1"></i> 4.8 | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-lg font-bold neon-text-green">Cyber Arena</h3> | |
| <span class="px-2 py-1 text-xs bg-green-900 text-green-300 rounded">Fighting</span> | |
| </div> | |
| <p class="text-gray-400 text-sm mb-3">A competitive fighting game with cybernetically enhanced warriors in neon-lit arenas.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-gray-500">$19.99</span> | |
| <button class="text-xs px-3 py-1 bg-green-900 hover:bg-green-800 rounded transition">BUY</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Coming Soon --> | |
| <section> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold neon-text-green">COMING SOON</h2> | |
| <button class="px-3 py-1 bg-gray-800 rounded-md hover:bg-gray-700 transition">View All</button> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <!-- Game Card 9 --> | |
| <div class="game-card pink rounded-lg overflow-hidden neon-border-pink relative"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1633613286848-e6f43bbafb8d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Neon Noir" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> | |
| <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-pink"> | |
| <i class="fas fa-clock mr-1"></i> Q1 2024 | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-lg font-bold neon-text-pink">Neon Noir</h3> | |
| <span class="px-2 py-1 text-xs bg-pink-900 text-pink-300 rounded">Adventure</span> | |
| </div> | |
| <p class="text-gray-400 text-sm mb-3">A cyberpunk detective story with branching narratives and moral choices.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-gray-500">Coming Soon</span> | |
| <button class="text-xs px-3 py-1 bg-gray-800 rounded cursor-not-allowed" disabled>WISHLIST</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Card 10 --> | |
| <div class="game-card blue rounded-lg overflow-hidden neon-border-blue relative"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1638549909131-aad8a0598ff9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Megacity Zero" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> | |
| <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-blue"> | |
| <i class="fas fa-clock mr-1"></i> Q2 2024 | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-lg font-bold neon-text-blue">Megacity Zero</h3> | |
| <span class="px-2 py-1 text-xs bg-blue-900 text-blue-300 rounded">Strategy</span> | |
| </div> | |
| <p class="text-gray-400 text-sm mb-3">Build and manage a dystopian megacity while dealing with corporate espionage.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-gray-500">Coming Soon</span> | |
| <button class="text-xs px-3 py-1 bg-gray-800 rounded cursor-not-allowed" disabled>WISHLIST</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Card 11 --> | |
| <div class="game-card purple rounded-lg overflow-hidden neon-border-purple relative"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1633613286991-611fe299c4be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Synth Riders" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> | |
| <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-purple"> | |
| <i class="fas fa-clock mr-1"></i> Q3 2024 | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-lg font-bold neon-text-purple">Synth Riders</h3> | |
| <span class="px-2 py-1 text-xs bg-purple-900 text-purple-300 rounded">Rhythm</span> | |
| </div> | |
| <p class="text-gray-400 text-sm mb-3">A VR rhythm game set in a neon cyberpunk world with synthwave soundtrack.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-gray-500">Coming Soon</span> | |
| <button class="text-xs px-3 py-1 bg-gray-800 rounded cursor-not-allowed" disabled>WISHLIST</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Card 12 --> | |
| <div class="game-card green rounded-lg overflow-hidden neon-border-green relative"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1639762681057-1e7aa943168e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Cyber Samurai" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> | |
| <div class="absolute top-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-green"> | |
| <i class="fas fa-clock mr-1"></i> Q4 2024 | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-lg font-bold neon-text-green">Cyber Samurai</h3> | |
| <span class="px-2 py-1 text-xs bg-green-900 text-green-300 rounded">Action</span> | |
| </div> | |
| <p class="text-gray-400 text-sm mb-3">A fast-paced action game blending cyberpunk with feudal Japan aesthetics.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-gray-500">Coming Soon</span> | |
| <button class="text-xs px-3 py-1 bg-gray-800 rounded cursor-not-allowed" disabled>WISHLIST</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-black bg-opacity-50 py-8 px-4 border-t border-gray-800 mt-12"> | |
| <div class="container mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-bold neon-text-pink mb-4">NEON NEXUS</h3> | |
| <p class="text-gray-400 text-sm">Your gateway to the best cyberpunk gaming experiences in the neon-lit future.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-md font-bold neon-text-blue mb-4">QUICK LINKS</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Home</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Games</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Genres</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Coming Soon</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-md font-bold neon-text-purple mb-4">SUPPORT</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">FAQ</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Contact Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Terms of Service</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-md font-bold neon-text-green mb-4">CONNECT</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-pink-500 transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition"><i class="fab fa-discord"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-purple-500 transition"><i class="fab fa-twitch"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-red-500 transition"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-500 text-xs terminal-text">SYSTEM STATUS: ONLINE</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-6 text-center"> | |
| <p class="text-gray-500 text-sm pulse">© 2023 NEON NEXUS. ALL RIGHTS RESERVED.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple script to add hover effects to game cards | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const gameCards = document.querySelectorAll('.game-card'); | |
| gameCards.forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| const colorClass = Array.from(this.classList).find(cls => | |
| cls === 'pink' || cls === 'blue' || cls === 'purple' || cls === 'green' | |
| ); | |
| if (colorClass) { | |
| this.style.boxShadow = `0 0 20px var(--neon-${colorClass}), inset 0 0 10px var(--neon-${colorClass})`; | |
| } | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| this.style.boxShadow = ''; | |
| }); | |
| }); | |
| // Terminal text effect | |
| const terminalText = document.querySelector('.terminal-text'); | |
| if (terminalText) { | |
| const text = terminalText.textContent; | |
| terminalText.textContent = ''; | |
| let i = 0; | |
| const typing = setInterval(() => { | |
| if (i < text.length) { | |
| terminalText.textContent += text.charAt(i); | |
| i++; | |
| } else { | |
| clearInterval(typing); | |
| } | |
| }, 100); | |
| } | |
| }); | |
| </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=LDrago-R/mygamelibrary" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |