Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GodsRods.online | Fantasy Rally Wagers</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@500;700&display=swap'); | |
| :root { | |
| --neon-red: #ff003c; | |
| --dirt-gold: #c5a059; | |
| --carbon-black: #0a0a0a; | |
| } | |
| body { | |
| background-color: var(--carbon-black); | |
| color: #e0e0e0; | |
| font-family: 'Rajdhani', sans-serif; | |
| background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('https://images.unsplash.com/photo-1552519507-da3b142c6e3d?auto=format&fit=crop&q=80&w=2070'); | |
| background-size: cover; | |
| background-attachment: fixed; | |
| } | |
| .font-header { font-family: 'Orbitron', sans-serif; } | |
| .glass-panel { | |
| background: rgba(20, 20, 20, 0.85); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-left: 4px solid var(--neon-red); | |
| } | |
| .pink-slip-card { | |
| background: linear-gradient(135deg, #2b0000 0%, #000000 100%); | |
| border: 1px solid var(--neon-red); | |
| } | |
| .btn-bet { | |
| background: var(--neon-red); | |
| transition: all 0.3s ease; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| } | |
| .btn-bet:hover { | |
| box-shadow: 0 0 20px rgba(255, 0, 60, 0.6); | |
| transform: translateY(-2px); | |
| } | |
| .chat-bubble { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 4px; | |
| padding: 8px 12px; | |
| margin-bottom: 8px; | |
| } | |
| .system-msg { color: var(--dirt-gold); font-weight: bold; } | |
| .user-msg { color: #fff; } | |
| .opponent-msg { color: #00d4ff; } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <nav class="border-b border-white/10 p-4 flex justify-between items-center bg-black/60 sticky top-0 z-50"> | |
| <div class="flex items-center gap-4"> | |
| <h1 class="text-3xl font-header font-bold text-white italic tracking-tighter">GODS<span class="text-red-600">RODS</span></h1> | |
| <div class="hidden md:flex gap-6 ml-10 text-sm uppercase tracking-widest"> | |
| <a href="#" class="hover:text-red-500">Garage</a> | |
| <a href="#" class="text-red-500">Pit Lane</a> | |
| <a href="#" class="hover:text-red-500">Market</a> | |
| <a href="#" class="hover:text-red-500">Blacklist</a> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-6"> | |
| <div class="text-right"> | |
| <p class="text-[10px] text-gray-400 uppercase">Available Credits</p> | |
| <p class="text-xl font-header text-yellow-500">₲ 452,900</p> | |
| </div> | |
| <div class="h-10 w-10 bg-red-600 rounded-full flex items-center justify-center border-2 border-white/20"> | |
| <i class="fa-solid fa-user text-white"></i> | |
| </div> | |
| </div> | |
| </nav> | |
| <main class="max-w-7xl mx-auto p-6 grid grid-cols-12 gap-6"> | |
| <div class="col-span-12 lg:col-span-3 space-y-4"> | |
| <h2 class="text-sm font-header text-gray-400 uppercase mb-2">Live Lobby</h2> | |
| <div class="glass-panel p-4 space-y-3"> | |
| <div class="p-3 bg-white/5 border border-white/10 rounded"> | |
| <p class="text-xs text-gray-500 italic">Drag | 400m | Dirt</p> | |
| <div class="flex justify-between items-center mt-1"> | |
| <span class="text-sm font-bold">@NitroBeast</span> | |
| <span class="text-red-500 font-bold">₲ 50,000</span> | |
| </div> | |
| </div> | |
| <div class="p-3 bg-white/5 border border-white/10 rounded"> | |
| <p class="text-xs text-gray-500 italic">Hill Climb | Mud</p> | |
| <div class="flex justify-between items-center mt-1"> | |
| <span class="text-sm font-bold">@GhostRally</span> | |
| <span class="text-yellow-500 font-bold uppercase text-[10px]">Pink Slips Only</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-span-12 lg:col-span-6 space-y-6"> | |
| <div class="relative h-[400px] w-full bg-black/40 rounded-lg overflow-hidden border border-white/10 group"> | |
| <img src="https://images.unsplash.com/photo-1594739433435-08169998de4b?auto=format&fit=crop&q=80&w=1000" class="w-full h-full object-cover opacity-80 group-hover:scale-105 transition-transform duration-700" alt="Rally Car"> | |
| <div class="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black to-transparent"> | |
| <h3 class="text-4xl font-header font-bold italic italic uppercase">Vanguard X-Terra</h3> | |
| <div class="flex gap-4 mt-2"> | |
| <span class="px-2 py-1 bg-white/10 text-[10px] uppercase">Class: S1</span> | |
| <span class="px-2 py-1 bg-white/10 text-[10px] uppercase">Tuning: Stage 3 Turbo</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pink-slip-card p-6 rounded-lg text-center"> | |
| <h3 class="text-xl font-header text-red-500 mb-4">MATCH ACCEPTED: CHALLENGE FROM @DK_DRIFT</h3> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <div class="p-4 bg-black/50 rounded border border-white/5"> | |
| <p class="text-xs text-gray-400">YOUR STAKE</p> | |
| <p class="text-lg font-bold">₲ 100,000</p> | |
| </div> | |
| <div class="p-4 bg-black/50 rounded border border-red-900"> | |
| <p class="text-xs text-red-500">THE RISK</p> | |
| <p class="text-lg font-bold uppercase">Pink Slip: Vanguard X-Terra</p> | |
| </div> | |
| </div> | |
| <button class="btn-bet w-full py-4 font-header font-bold text-xl skew-x-[-10deg]"> | |
| IGNITION & RACE | |
| </button> | |
| </div> | |
| </div> | |
| <div class="col-span-12 lg:col-span-3 flex flex-col h-[600px] glass-panel"> | |
| <div class="p-4 border-b border-white/10"> | |
| <h3 class="font-header text-sm tracking-widest text-red-500">PRE-RACE COMM (PIT LANE)</h3> | |
| </div> | |
| <div class="flex-grow p-4 overflow-y-auto space-y-2 text-sm"> | |
| <div class="chat-bubble"> | |
| <span class="system-msg">[SYSTEM]:</span> <span class="text-gray-400">Match room #882 created. Track: Hell's Peak.</span> | |
| </div> | |
| <div class="chat-bubble"> | |
| <span class="opponent-msg font-bold">@DK_Drift:</span> | |
| <span class="user-msg italic">"I've seen that Vanguard in the garage. Those tires aren't gonna grip on the gravel climb, rookie."</span> | |
| </div> | |
| <div class="chat-bubble"> | |
| <span class="text-red-500 font-bold">YOU:</span> | |
| <span class="user-msg italic">"Keep talking. I'm swapping the suspension right now. You still want to bet the slip?"</span> | |
| </div> | |
| <div class="chat-bubble"> | |
| <span class="opponent-msg font-bold">@DK_Drift:</span> | |
| <span class="user-msg italic">"Locked and loaded. My 'Scorpion Evo' is ready to take your keys. ₲ 100k kicker too."</span> | |
| </div> | |
| <div class="chat-bubble border-l-2 border-yellow-500"> | |
| <span class="system-msg">[WAGER ALERT]:</span> | |
| <span class="text-yellow-500">@DK_Drift has formalised the Pink Slip challenge. Acceptance will lock your vehicle until race completion.</span> | |
| </div> | |
| <div class="chat-bubble"> | |
| <span class="text-red-500 font-bold">YOU:</span> | |
| <span class="user-msg italic">"Bet accepted. See you at the starting line. Don't choke."</span> | |
| </div> | |
| <div class="chat-bubble"> | |
| <span class="opponent-msg font-bold">@DK_Drift:</span> | |
| <span class="user-msg italic">"🏎️💨 Good luck. You're gonna need it."</span> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-black/40"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Send trash talk..." class="w-full bg-white/5 border border-white/10 p-2 pl-4 rounded text-sm focus:outline-none focus:border-red-500"> | |
| <button class="absolute right-2 top-2 text-red-500 hover:text-white"> | |
| <i class="fa-solid fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="mt-20 border-t border-white/10 p-8 text-center text-gray-600 text-[10px] uppercase tracking-[4px]"> | |
| © 2026 GodsRods Online • High Stakes Fantasy Rallying • Drive Fast. Lose Everything. | |
| </footer> | |
| </body> | |
| </html> | |