Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nitro Drift Rumble</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Racing+Sans+One&family=Rubik+Mono+One&display=swap'); | |
| body { | |
| font-family: 'Racing Sans One', sans-serif; | |
| overflow-x: hidden; | |
| } | |
| .vanta-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| .glow-text { | |
| text-shadow: 0 0 10px #ff00ff, 0 0 20px #00ffff; | |
| } | |
| .neon-border { | |
| border: 2px solid; | |
| border-image: linear-gradient(45deg, #ff00ff, #00ffff) 1; | |
| animation: border-pulse 2s infinite alternate; | |
| } | |
| @keyframes border-pulse { | |
| 0% { box-shadow: 0 0 10px #ff00ff; } | |
| 100% { box-shadow: 0 0 20px #00ffff, 0 0 30px #ff00ff; } | |
| } | |
| .car-animation { | |
| animation: car-bounce 1.5s infinite alternate; | |
| } | |
| @keyframes car-bounce { | |
| 0% { transform: translateY(0) rotate(-5deg); } | |
| 100% { transform: translateY(-10px) rotate(5deg); } | |
| } | |
| .powerup-icon { | |
| transition: all 0.3s; | |
| } | |
| .powerup-icon:hover { | |
| transform: scale(1.2) rotate(15deg); | |
| filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="vanta-bg" class="vanta-bg"></div> | |
| <div class="min-h-screen flex flex-col items-center justify-center px-4 py-12"> | |
| <!-- Header --> | |
| <div class="text-center mb-12"> | |
| <h1 class="text-6xl md:text-8xl font-bold text-white glow-text mb-4"> | |
| NITRO <span class="text-cyan-400">DRIFT</span> RUMBLE | |
| </h1> | |
| <p class="text-xl text-cyan-200 mb-8"> | |
| The ultimate arcade racing experience at your fingertips! | |
| </p> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 w-full max-w-6xl"> | |
| <!-- Left Column - Game Preview --> | |
| <div class="bg-black bg-opacity-50 rounded-xl p-6 neon-border backdrop-blur-sm"> | |
| <h2 class="text-3xl text-white mb-6 flex items-center"> | |
| <i data-feather="play" class="mr-3 text-purple-400"></i> RACE PREVIEW | |
| </h2> | |
| <div class="relative overflow-hidden rounded-lg h-64 md:h-96"> | |
| <img src="http://static.photos/technology/640x360/7" alt="Game Screenshot" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent flex items-end justify-center"> | |
| <div class="mb-6 text-center"> | |
| <button onclick="startGame()" class="bg-gradient-to-r from-purple-600 to-cyan-500 text-white px-8 py-3 rounded-full font-bold text-lg hover:opacity-90 transition-all transform hover:scale-105 shadow-lg shadow-purple-500/30"> | |
| PLAY NOW | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 grid grid-cols-3 gap-4"> | |
| <div class="bg-gray-900 bg-opacity-70 p-4 rounded-lg text-center"> | |
| <i data-feather="clock" class="text-cyan-400 w-8 h-8 mx-auto mb-2"></i> | |
| <p class="text-white font-bold">TIME ATTACK</p> | |
| </div> | |
| <div class="bg-gray-900 bg-opacity-70 p-4 rounded-lg text-center"> | |
| <i data-feather="users" class="text-purple-400 w-8 h-8 mx-auto mb-2"></i> | |
| <p class="text-white font-bold">MULTIPLAYER</p> | |
| </div> | |
| <div class="bg-gray-900 bg-opacity-70 p-4 rounded-lg text-center"> | |
| <i data-feather="award" class="text-yellow-400 w-8 h-8 mx-auto mb-2"></i> | |
| <p class="text-white font-bold">LEADERBOARDS</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column - Features --> | |
| <div class="bg-black bg-opacity-50 rounded-xl p-6 neon-border backdrop-blur-sm"> | |
| <h2 class="text-3xl text-white mb-6 flex items-center"> | |
| <i data-feather="zap" class="mr-3 text-yellow-400"></i> POWER FEATURES | |
| </h2> | |
| <!-- Feature 1 --> | |
| <div class="flex mb-6"> | |
| <div class="mr-4"> | |
| <div class="bg-purple-600 rounded-lg p-3"> | |
| <i data-feather="car" class="text-white w-8 h-8 car-animation"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl text-white font-bold mb-2">Custom Rides</h3> | |
| <p class="text-gray-300">Unlock and upgrade 12+ unique cars with different stats and styles.</p> | |
| </div> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="flex mb-6"> | |
| <div class="mr-4"> | |
| <div class="bg-cyan-600 rounded-lg p-3"> | |
| <i data-feather="map" class="text-white w-8 h-8"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl text-white font-bold mb-2">Dynamic Tracks</h3> | |
| <p class="text-gray-300">Race across 5+ stunning environments with day/night cycles.</p> | |
| </div> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="flex mb-6"> | |
| <div class="mr-4"> | |
| <div class="bg-pink-600 rounded-lg p-3"> | |
| <div class="flex space-x-1"> | |
| <div class="powerup-icon"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap text-white"> | |
| <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon> | |
| </svg> | |
| </div> | |
| <div class="powerup-icon"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle text-white"> | |
| <circle cx="12" cy="12" r="10"></circle> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl text-white font-bold mb-2">Crazy Power-Ups</h3> | |
| <p class="text-gray-300">Use 8+ game-changing boosts to gain the upper hand.</p> | |
| </div> | |
| </div> | |
| <!-- Download Buttons --> | |
| <div class="mt-8 grid grid-cols-2 gap-4"> | |
| <button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-3 rounded-lg flex items-center justify-center transition-all"> | |
| <i data-feather="download" class="mr-2"></i> iOS | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-3 rounded-lg flex items-center justify-center transition-all"> | |
| <i data-feather="download" class="mr-2"></i> Android | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <div class="mt-16 text-center text-gray-400"> | |
| <a href="starfighter.html" class="inline-block bg-gradient-to-r from-blue-600 to-cyan-500 text-white px-6 py-2 rounded-full font-bold text-lg hover:opacity-90 transition-all transform hover:scale-105 shadow-lg shadow-cyan-500/30 mb-6"> | |
| STARFIGHTER MODE | |
| </a> | |
| <div class="flex justify-center space-x-6 mb-4"> | |
| <a href="#" class="hover:text-cyan-400 transition-colors"><i data-feather="twitter"></i></a> | |
| <a href="#" class="hover:text-purple-400 transition-colors"><i data-feather="instagram"></i></a> | |
| <a href="#" class="hover:text-red-400 transition-colors"><i data-feather="youtube"></i></a> | |
| <a href="#" class="hover:text-blue-400 transition-colors"><i data-feather="facebook"></i></a> | |
| </div> | |
| <p>© 2023 Nitro Drift Rumble. All rights reserved.</p> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x00ffff, | |
| backgroundColor: 0x0, | |
| size: 0.8 | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Simple animation for buttons | |
| document.querySelectorAll('button').forEach(button => { | |
| button.addEventListener('mouseenter', () => { | |
| button.classList.add('transform', 'scale-105'); | |
| }); | |
| button.addEventListener('mouseleave', () => { | |
| button.classList.remove('transform', 'scale-105'); | |
| }); | |
| }); | |
| // Game functionality | |
| function startGame() { | |
| window.location.href = "game.html"; | |
| } | |
| </script> | |
| </body> | |
| </html> | |