Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <title>OdiStay | Neural Grid</title> | |
| <style> | |
| body { background: radial-gradient(circle at top, #0c2135, #010a13); min-height: 100vh; } | |
| .glass { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); } | |
| .glow-green { box-shadow: 0 0 15px rgba(34, 197, 94, 0.4); } | |
| </style> | |
| </head> | |
| <body class="text-slate-100 p-4"> | |
| <header class="max-w-6xl mx-auto flex justify-between items-center py-6"> | |
| <h1 class="text-2xl font-bold tracking-tighter text-cyan-400">ODISTAY</h1> | |
| <div class="glass px-4 py-1 rounded-full text-xs font-mono text-green-400 animate-pulse">● GRID_SYNCHRONIZED</div> | |
| </header> | |
| <main class="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <div class="lg:col-span-2 glass rounded-3xl h-[500px] flex flex-col items-center justify-center relative overflow-hidden"> | |
| <div class="absolute top-4 left-4 z-10 text-[10px] font-mono text-cyan-500 bg-black/40 p-2 rounded">LOGISTICS_FEED: FOLLOWME.MV</div> | |
| <div class="text-center"> | |
| <p class="text-cyan-400 text-sm font-mono mb-2">SCANNING KAAVU ATOLL...</p> | |
| <div class="w-64 h-1 bg-cyan-900 rounded-full overflow-hidden"> | |
| <div class="bg-cyan-400 h-full w-1/3 animate-[bounce_2s_infinite]"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <h3 class="text-sm font-semibold text-slate-400 uppercase tracking-widest px-2">Active Stays</h3> | |
| {% for node in nodes %} | |
| <div class="glass p-5 rounded-2xl hover:bg-white/5 transition group cursor-pointer"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-bold text-lg">{{ node.name }}</h4> | |
| <p class="text-xs text-slate-400">{{ node.island }}</p> | |
| </div> | |
| <span class="bg-green-500/20 text-green-400 text-[10px] px-2 py-1 rounded-md font-bold glow-green"> | |
| {{ node.rooms }} ROOMS | |
| </span> | |
| </div> | |
| <div class="mt-4 flex gap-2"> | |
| <a href="https://wa.me/{{ node.whatsapp }}" class="flex-1 bg-cyan-600 hover:bg-cyan-500 py-2 rounded-xl text-center text-xs font-bold transition">WhatsApp Host</a> | |
| <a href="https://m.followme.mv/public/" target="_blank" class="glass px-4 py-2 rounded-xl text-xs">Track Boat</a> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| </main> | |
| </body> | |
| </html> |