Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BubuRank - Monster Rankings</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| dark: '#0a0a0a', | |
| darker: '#050505', | |
| accent: '#00ff9d', | |
| secondary: '#1a1a1a', | |
| text: '#e5e5e5', | |
| 'text-dim': '#a3a3a3', | |
| }, | |
| fontFamily: { | |
| mono: ['"IBM Plex Mono"', 'monospace'], | |
| sans: ['"Inter"', 'sans-serif'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap'); | |
| body { | |
| background-color: #0a0a0a; | |
| color: #e5e5e5; | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .ticker { | |
| animation: ticker 30s linear infinite; | |
| } | |
| @keyframes ticker { | |
| 0% { transform: translateX(0); } | |
| 100% { transform: translateX(-50%); } | |
| } | |
| .glow { | |
| text-shadow: 0 0 8px rgba(0, 255, 157, 0.6); | |
| } | |
| .gradient-border { | |
| position: relative; | |
| } | |
| .gradient-border::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, #00ff9d, transparent); | |
| } | |
| .price-up { | |
| color: #00ff9d; | |
| } | |
| .price-down { | |
| color: #ff4d4d; | |
| } | |
| .blink { | |
| animation: blink 1s step-end infinite; | |
| } | |
| @keyframes blink { | |
| 50% { opacity: 0; } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-dark text-text"> | |
| <!-- Header --> | |
| <header class="border-b border-secondary"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <h1 class="text-2xl font-bold font-mono glow">BUBU RANK</h1> | |
| <div class="text-xs bg-secondary px-2 py-1 rounded font-mono"> | |
| <span class="text-accent">LIVE</span> <span class="blink">▮</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-6"> | |
| <nav class="flex space-x-6 text-sm"> | |
| <a href="#" class="hover:text-accent transition">Rankings</a> | |
| <a href="#" class="hover:text-accent transition">Sets</a> | |
| <a href="#" class="hover:text-accent transition">Market</a> | |
| <a href="#" class="hover:text-accent transition">My Collection</a> | |
| </nav> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search monsters..." class="bg-darker text-sm px-3 py-1.5 rounded focus:outline-none focus:ring-1 focus:ring-accent w-64" /> | |
| <i class="fas fa-search absolute right-3 top-2 text-text-dim text-xs"></i> | |
| </div> | |
| </div> | |
| <button class="md:hidden"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Ticker --> | |
| <div class="bg-darker overflow-hidden"> | |
| <div class="ticker flex whitespace-nowrap py-2 text-xs font-mono"> | |
| <div class="flex items-center px-4"> | |
| <span class="text-text-dim mr-2">LATEST:</span> | |
| <span class="text-accent mr-4">Labubu #420 sold for 2.5 ETH</span> | |
| </div> | |
| <div class="flex items-center px-4"> | |
| <span class="text-text-dim mr-2">TRENDING:</span> | |
| <span class="text-accent mr-4">Labubu Astronaut +12.4% today</span> | |
| </div> | |
| <div class="flex items-center px-4"> | |
| <span class="text-text-dim mr-2">NEWS:</span> | |
| <span class="text-accent mr-4">Kasing Lung announces new Labubu series</span> | |
| </div> | |
| <div class="flex items-center px-4"> | |
| <span class="text-text-dim mr-2">MARKET:</span> | |
| <span class="text-accent mr-4">Lychee Berry floor up 3.2% in 24h</span> | |
| </div> | |
| <div class="flex items-center px-4"> | |
| <span class="text-text-dim mr-2">LATEST:</span> | |
| <span class="text-accent mr-4">Big Into Energy restock scheduled for 4/20</span> | |
| </div> | |
| <div class="flex items-center px-4"> | |
| <span class="text-text-dim mr-2">TRENDING:</span> | |
| <span class="text-accent mr-4">Labubu Astronaut +12.4% today</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-6"> | |
| <!-- Stats Bar --> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6"> | |
| <div class="bg-darker p-4 rounded border border-secondary"> | |
| <div class="text-xs text-text-dim mb-1">LOWESET ASKING PRICE</div> | |
| <div class="text-xl font-mono">42,690 ETH</div> | |
| <div class="text-xs text-accent mt-1">+5.2% <i class="fas fa-arrow-up"></i></div> | |
| </div> | |
| <div class="bg-darker p-4 rounded border border-secondary"> | |
| <div class="text-xs text-text-dim mb-1">FLOOR PRICE</div> | |
| <div class="text-xl font-mono">1.24 ETH</div> | |
| <div class="text-xs text-accent mt-1">+3.1% <i class="fas fa-arrow-up"></i></div> | |
| </div> | |
| <div class="bg-darker p-4 rounded border border-secondary"> | |
| <div class="text-xs text-text-dim mb-1">TOTAL ITEMS</div> | |
| <div class="text-xl font-mono">9,999</div> | |
| <div class="text-xs text-text-dim mt-1">100% minted</div> | |
| </div> | |
| <div class="bg-darker p-4 rounded border border-secondary"> | |
| <div class="text-xs text-text-dim mb-1">OWNERS</div> | |
| <div class="text-xl font-mono">4,201</div> | |
| <div class="text-xs text-accent mt-1">+12.7% <i class="fas fa-arrow-up"></i></div> | |
| </div> | |
| </div> | |
| <!-- Table Header --> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold">Labubu Monster Rankings</h2> | |
| <div class="flex space-x-2"> | |
| <button class="bg-darker hover:bg-secondary px-3 py-1.5 text-xs rounded transition">24h</button> | |
| <button class="bg-darker hover:bg-secondary px-3 py-1.5 text-xs rounded transition">7d</button> | |
| <button class="bg-accent text-dark px-3 py-1.5 text-xs rounded font-medium">30d</button> | |
| <button class="bg-darker hover:bg-secondary px-3 py-1.5 text-xs rounded transition">All</button> | |
| </div> | |
| </div> | |
| <!-- Rankings Table --> | |
| <div class="bg-darker rounded-lg overflow-hidden border border-secondary"> | |
| <table class="w-full"> | |
| <thead class="border-b border-secondary"> | |
| <tr class="text-xs text-text-dim text-left"> | |
| <th class="px-4 py-3 font-medium">#</th> | |
| <th class="px-4 py-3 font-medium">MONSTER</th> | |
| <th class="px-4 py-3 font-medium text-right">Lowest Asking</th> | |
| <th class="px-4 py-3 font-medium text-right">Total Sales (30d)</th> | |
| <th class="px-4 py-3 font-medium text-right">Price Trend</th> | |
| <th class="px-4 py-3 font-medium text-right">% For Sale</th> | |
| <th class="px-4 py-3 font-medium text-right">Collectors</th> | |
| <th class="px-4 py-3 font-medium text-right">Past Week</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-secondary"> | |
| <!-- Row 1 --> | |
| <tr class="hover:bg-secondary/50 transition cursor-pointer"> | |
| <td class="px-4 py-3 font-mono text-sm">1</td> | |
| <td class="px-4 py-3"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded bg-accent/10 mr-3 flex items-center justify-center"> | |
| <i class="fas fa-ghost text-accent"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Labubu Astronaut</div> | |
| <div class="text-xs text-text-dim">Series 1</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-4 py-3 font-mono text-sm text-right">4.20 ETH</td> | |
| <td class="px-4 py-3 font-mono text-sm text-right">420.69 ETH</td> | |
| <td class="px-4 py-3 font-mono text-sm text-right price-up">+12.4%</td> | |
| <td class="px-4 py-3 font-mono text-sm text-right">12%</td> | |
| <td class="px-4 py-3 font-mono text-sm text-right">1,234</td> | |
| <td class="px-4 py-3"> | |
| <div class="h-8 w-24 ml-auto"> | |
| <svg viewBox="0 0 100 30" class="w-full h-full"> | |
| <polyline points="10,20 30,10 50,15 70,5 90,25" stroke="#00ff9d" stroke-width="2" fill="none" /> | |
| </svg> | |
| </div> | |
| </td> | |
| </tr> | |
| <!-- Row 2 --> | |
| <tr class="hover:bg-secondary/50 transition cursor-pointer"> | |
| <td class="px-4 py-3 font-mono text-sm">2</td> | |
| <td class="px-4 py-3"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded bg-accent/10 mr-3 flex items-center justify-center"> | |
| <i class="fas fa-moon text-accent"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Labubu Moon</div> | |
| <div class="text-xs text-text-dim">Series 2</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-4 py-3 font-mono text-sm text-right">3.75 ETH</td> | |
| <td class="px-4 py-3 font-mono text-sm text-right">389.42 ETH</td> | |
| <td class="px-4 py-3 font-mono text-sm text-right price-up">+8.2%</td> | |
| <td class="px-4 py-3 font-mono text-sm text-right">15%</td> | |
| <td class="px-4 py-3 font-mono text-sm text-right">1,189</td> | |
| <td class="px-4 py-3"> | |
| <div class="h-8 w-24 ml-auto"> | |
| <svg viewBox="0 0 100 30" class="w-full h-full"> | |
| <polyline points="10,25 30,15 50,20 70,10 90,20" stroke="#00ff9d" stroke-width="2" fill="none" /> | |
| </svg> | |
| </div> | |
| </td> | |
| </tr> | |
| <!-- Row 3 --> | |
| <tr class="hover:bg-secondary/50 transition cursor-pointer"> | |
| <td class="px-4 py-3 font-mono text-sm">3</td> | |
| <td class="px-4 py-3"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded bg-accent/10 mr-3 flex items-center justify-center"> | |
| <i class="fas fa-fire text-accent"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Labubu Flame</div> | |
| <div class="text-xs text-text-dim">Series 1</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-4 py-3 font-mono text-sm text-right">3.20 ETH</td> | |
| <td class="px-4 py-3 font-mono text-sm text-right">312.87 ETH</td> | |
| <td class="px-4 py-3 font-mono text-sm text-right price-up">+5.6%</td> | |
| <td class="px-4 py-3 font-mono text-sm text-right">18%</td> | |
| <td class="px-4 py-3 font-mono text-sm text-right">987</td> | |
| <td class="px-4 py-3"> | |
| <div class="h-8 w-24 ml-auto"> | |
| <svg viewBox="0 0 100 30" class="w-full h-full"> | |
| <polyline points="10,20 30,15 50,25 70,15 90,18" stroke="#00ff9d" stroke-width="2" fill="none" /> | |
| </svg> | |
| </div> | |
| </td> | |
| </tr> | |
| <!-- Row 4 --> | |
| <tr class="hover:bg-secondary/50 transition cursor-pointer"> | |
| <td class="px-4 py-3 font-mono text-sm">4</td> | |
| <td class="px-4 py-3"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded bg-accent/10 mr-3 flex items-center justify-center"> | |
| <i class="fas fa-umbrella-beach text-accent"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Labubu Beach</div> | |
| <div class="text-xs text-text-dim">Series 3</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-4 py-3 font-mono text-sm text-right">2.95 ETH</td> | |
| <td class="px-4 py-3 font-mono text-sm text-right">287.34 ETH</td> | |
| <td class="px-4 py-3 font-mono text-sm text-right price-down">-2.1%</td> | |
| <td class="px-4 py-3 font-mono text-sm text-right">22%</td> | |
| <td class="px-4 py-3 font-mono text-sm text-right">876</td> | |
| <td class="px-4 py-3"> | |
| <div class="h-8 w-24 ml-auto"> | |
| <svg viewBox="0 0 100 30" class="w-full h-full"> | |
| <polyline points="10,15 30,20 50,10 70,15 90,10" stroke="#ff4d4d" stroke-width="2" fill="none" /> | |
| </svg> | |
| </div> | |
| </td> | |
| </tr> | |
| <!-- Row 5 --> | |
| <tr class="hover:bg-secondary/50 transition cursor-pointer"> | |
| <td class="px-4 py-3 font-mono text-sm">5</td> | |
| <td class="px-4 py-3"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded bg-accent/10 mr-3 flex items-center justify-center"> | |
| <i class="fas fa-mountain text-accent"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Labubu Mountain</div> | |
| <div class="text-xs text-text-dim">Series 2</div> | |
| </div | |
| </html> |