Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Avatar Marketplace</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: { | |
| primary: '#0f172a', | |
| secondary: '#f8fafc', | |
| accent: '#38bdf8', | |
| dark: '#1e293b', | |
| darker: '#0f172a', | |
| }, | |
| animation: { | |
| 'fade-in': 'fadeIn 0.3s ease-out', | |
| 'float': 'float 3s ease-in-out infinite', | |
| 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'shake': 'shake 0.5s cubic-bezier(.36,.07,.19,.97) both' | |
| }, | |
| keyframes: { | |
| fadeIn: { | |
| '0%': { opacity: '0', transform: 'translateY(20px)' }, | |
| '100%': { opacity: '1', transform: 'translateY(0)' } | |
| }, | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-10px)' } | |
| }, | |
| shake: { | |
| '10%, 90%': { transform: 'translate3d(-1px, 0, 0)' }, | |
| '20%, 80%': { transform: 'translate3d(2px, 0, 0)' }, | |
| '30%, 50%, 70%': { transform: 'translate3d(-4px, 0, 0)' }, | |
| '40%, 60%': { transform: 'translate3d(4px, 0, 0)' } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| -webkit-tap-highlight-color: transparent; | |
| background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); | |
| } | |
| .avatar-card { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| transform: translateY(0); | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| perspective: 1000px; | |
| } | |
| .avatar-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .avatar-image { | |
| transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); | |
| transform-style: preserve-3d; | |
| } | |
| .avatar-card:hover .avatar-image { | |
| transform: scale(1.05) rotateY(5deg); | |
| } | |
| .locked-avatar { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .locked-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(15, 23, 42, 0.85); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| backdrop-filter: blur(2px); | |
| } | |
| .progress-bar { | |
| height: 6px; | |
| border-radius: 3px; | |
| background-color: #334155; | |
| overflow: hidden; | |
| box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: 3px; | |
| background: linear-gradient(90deg, #38bdf8, #0ea5e9); | |
| transition: width 0.5s ease; | |
| box-shadow: 0 0 10px rgba(56, 189, 248, 0.5); | |
| } | |
| .modal { | |
| animation: fade-in 0.3s ease-out; | |
| } | |
| .tab-active { | |
| position: relative; | |
| background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2); | |
| } | |
| .tab-active::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -2px; | |
| left: 0; | |
| width: 100%; | |
| height: 3px; | |
| background: linear-gradient(90deg, #38bdf8, #0ea5e9); | |
| border-radius: 3px; | |
| } | |
| .glow { | |
| filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.7)); | |
| } | |
| .nav-item { | |
| transition: all 0.2s ease; | |
| } | |
| .nav-item:hover { | |
| transform: translateY(-3px); | |
| } | |
| .level-badge { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .level-badge::after { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: linear-gradient( | |
| to bottom right, | |
| rgba(255, 255, 255, 0.3) 0%, | |
| rgba(255, 255, 255, 0) 60% | |
| ); | |
| transform: rotate(30deg); | |
| animation: shine 3s infinite; | |
| } | |
| @keyframes shine { | |
| 0% { transform: rotate(30deg) translate(-30%, -30%); } | |
| 100% { transform: rotate(30deg) translate(30%, 30%); } | |
| } | |
| .premium-badge { | |
| background: linear-gradient(135deg, #f59e0b 0%, #ec4899 100%); | |
| color: white; | |
| text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); | |
| } | |
| .rarity-common { | |
| background: linear-gradient(135deg, #64748b 0%, #475569 100%); | |
| } | |
| .rarity-uncommon { | |
| background: linear-gradient(135deg, #10b981 0%, #059669 100%); | |
| } | |
| .rarity-rare { | |
| background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); | |
| } | |
| .rarity-epic { | |
| background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); | |
| } | |
| .rarity-legendary { | |
| background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); | |
| } | |
| .rarity-mythic { | |
| background: linear-gradient(135deg, #ec4899 0%, #db2777 100%); | |
| } | |
| .shine-effect { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .shine-effect::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient( | |
| to right, | |
| rgba(255, 255, 255, 0) 0%, | |
| rgba(255, 255, 255, 0.2) 50%, | |
| rgba(255, 255, 255, 0) 100% | |
| ); | |
| animation: shine 5s infinite; | |
| } | |
| @keyframes shine { | |
| 0% { left: -100%; } | |
| 20% { left: 100%; } | |
| 100% { left: 100%; } | |
| } | |
| .nav-glow { | |
| box-shadow: 0 0 15px rgba(56, 189, 248, 0.4); | |
| } | |
| </style> | |
| </head> | |
| <body class="text-secondary min-h-screen"> | |
| <div class="container mx-auto px-4 py-4"> | |
| <!-- App Header --> | |
| <header class="sticky top-0 z-10 bg-primary/90 backdrop-blur-sm py-3 mb-4 border-b border-slate-700"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="relative"> | |
| <div class="animate-pulse-slow"> | |
| <i class="fas fa-coins text-yellow-400 text-xl glow"></i> | |
| </div> | |
| <span id="coin-balance" class="text-lg font-bold ml-1">1,250</span> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <h1 class="text-xl font-bold bg-gradient-to-r from-blue-400 to-cyan-300 bg-clip-text text-transparent">Avatar Market</h1> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="relative"> | |
| <i class="fas fa-level-up-alt text-blue-400 text-xl"></i> | |
| <span id="player-level" class="text-lg font-bold ml-1">12</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Level progress --> | |
| <div class="mt-3"> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>Level Progress</span> | |
| <span id="level-progress-text">1,200/2,000 XP</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div id="level-progress-fill" class="progress-fill" style="width: 60%"></div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Level Tabs --> | |
| <div class="flex overflow-x-auto pb-2 mb-4 hide-scrollbar"> | |
| <div class="flex space-x-2"> | |
| <button data-level="all" class="level-tab px-4 py-2 rounded-full bg-dark text-sm font-medium whitespace-nowrap tab-active"> | |
| All | |
| </button> | |
| <button data-level="1" class="level-tab px-4 py-2 rounded-full bg-dark text-sm font-medium whitespace-nowrap"> | |
| Lvl 1+ | |
| </button> | |
| <button data-level="5" class="level-tab px-4 py-2 rounded-full bg-dark text-sm font-medium whitespace-nowrap"> | |
| Lvl 5+ | |
| </button> | |
| <button data-level="10" class="level-tab px-4 py-2 rounded-full bg-dark text-sm font-medium whitespace-nowrap"> | |
| Lvl 10+ | |
| </button> | |
| <button data-level="15" class="level-tab px-4 py-2 rounded-full bg-dark text-sm font-medium whitespace-nowrap"> | |
| Lvl 15+ | |
| </button> | |
| <button data-level="20" class="level-tab px-4 py-2 rounded-full bg-dark text-sm font-medium whitespace-nowrap"> | |
| Lvl 20+ | |
| </button> | |
| <button data-level="premium" class="level-tab px-4 py-2 rounded-full bg-gradient-to-r from-yellow-500 to-pink-500 text-sm font-medium whitespace-nowrap"> | |
| <i class="fas fa-crown mr-1"></i> Premium | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Avatar grid - 2 columns on mobile --> | |
| <div class="grid grid-cols-2 gap-3 mb-20" id="avatar-grid"> | |
| <!-- Avatar 1 --> | |
| <div class="avatar-card bg-dark rounded-xl overflow-hidden shadow-lg border border-slate-700" data-level="1" data-rarity="uncommon"> | |
| <div class="relative"> | |
| <img src="https://api.dicebear.com/7.x/adventurer/svg?seed=Bandit&backgroundColor=38bdf8" alt="Avatar" class="avatar-image w-full h-40 object-cover"> | |
| <div class="absolute top-2 right-2 rarity-uncommon text-white px-2 py-1 rounded-md text-xs font-bold level-badge"> | |
| Lvl 1 | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-bold text-sm mb-1 truncate">Shadow Bandit</h3> | |
| <p class="text-gray-400 text-xs mb-2 truncate">Stealthy rogue</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-1"> | |
| <i class="fas fa-coins text-yellow-400 text-xs"></i> | |
| <span class="font-bold text-sm">250</span> | |
| </div> | |
| <div class="flex space-x-1"> | |
| <button class="preview-btn p-1.5 bg-slate-700 rounded-md hover:bg-slate-600 transition"> | |
| <i class="fas fa-eye text-xs"></i> | |
| </button> | |
| <button class="buy-btn px-2 py-1 bg-blue-600 rounded-md hover:bg-blue-500 transition text-xs"> | |
| Buy | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Avatar 2 --> | |
| <div class="avatar-card bg-dark rounded-xl overflow-hidden shadow-lg border border-slate-700" data-level="5" data-rarity="rare"> | |
| <div class="relative"> | |
| <img src="https://api.dicebear.com/7.x/adventurer/svg?seed=Knight&backgroundColor=0ea5e9" alt="Avatar" class="avatar-image w-full h-40 object-cover"> | |
| <div class="absolute top-2 right-2 rarity-rare text-white px-2 py-1 rounded-md text-xs font-bold level-badge"> | |
| Lvl 5 | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-bold text-sm mb-1 truncate">Royal Knight</h3> | |
| <p class="text-gray-400 text-xs mb-2 truncate">Noble warrior</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-1"> | |
| <i class="fas fa-coins text-yellow-400 text-xs"></i> | |
| <span class="font-bold text-sm">500</span> | |
| </div> | |
| <div class="flex space-x-1"> | |
| <button class="preview-btn p-1.5 bg-slate-700 rounded-md hover:bg-slate-600 transition"> | |
| <i class="fas fa-eye text-xs"></i> | |
| </button> | |
| <button class="buy-btn px-2 py-1 bg-blue-600 rounded-md hover:bg-blue-500 transition text-xs"> | |
| Buy | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Avatar 3 (Locked) --> | |
| <div class="avatar-card bg-dark rounded-xl overflow-hidden shadow-lg border border-slate-700" data-level="15" data-rarity="epic"> | |
| <div class="relative"> | |
| <div class="locked-avatar"> | |
| <img src="https://api.dicebear.com/7.x/adventurer/svg?seed=Mage&backgroundColor=7c3aed" alt="Avatar" class="avatar-image w-full h-40 object-cover"> | |
| <div class="locked-overlay"> | |
| <div class="text-center animate-float"> | |
| <i class="fas fa-lock text-white text-2xl mb-1"></i> | |
| <p class="text-white text-xs font-bold">Level 15 Required</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute top-2 right-2 rarity-epic text-white px-2 py-1 rounded-md text-xs font-bold level-badge"> | |
| Lvl 15 | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-bold text-sm mb-1 truncate">Arcane Mage</h3> | |
| <p class="text-gray-400 text-xs mb-2 truncate">Master of magic</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-1"> | |
| <i class="fas fa-coins text-yellow-400 text-xs"></i> | |
| <span class="font-bold text-sm">750</span> | |
| </div> | |
| <div class="flex space-x-1"> | |
| <button class="preview-btn p-1.5 bg-slate-700 rounded-md hover:bg-slate-600 transition"> | |
| <i class="fas fa-eye text-xs"></i> | |
| </button> | |
| <button class="buy-btn px-2 py-1 bg-gray-600 rounded-md cursor-not-allowed text-xs" disabled> | |
| Locked | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Avatar 4 --> | |
| <div class="avatar-card bg-dark rounded-xl overflow-hidden shadow-lg border border-slate-700" data-level="1" data-rarity="common"> | |
| <div class="relative"> | |
| <img src="https://api.dicebear.com/7.x/adventurer/svg?seed=Ranger&backgroundColor=10b981" alt="Avatar" class="avatar-image w-full h-40 object-cover"> | |
| <div class="absolute top-2 right-2 rarity-common text-white px-2 py-1 rounded-md text-xs font-bold level-badge"> | |
| Lvl 1 | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-bold text-sm mb-1 truncate">Forest Ranger</h3> | |
| <p class="text-gray-400 text-xs mb-2 truncate">Nature guardian</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-1"> | |
| <i class="fas fa-coins text-yellow-400 text-xs"></i> | |
| <span class="font-bold text-sm">150</span> | |
| </div> | |
| <div class="flex space-x-1"> | |
| <button class="preview-btn p-1.5 bg-slate-700 rounded-md hover:bg-slate-600 transition"> | |
| <i class="fas fa-eye text-xs"></i> | |
| </button> | |
| <button class="buy-btn px-2 py-1 bg-blue-600 rounded-md hover:bg-blue-500 transition text-xs"> | |
| Buy | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Avatar 5 --> | |
| <div class="avatar-card bg-dark rounded-xl overflow-hidden shadow-lg border border-slate-700" data-level="8" data-rarity="rare"> | |
| <div class="relative"> | |
| <img src="https://api.dicebear.com/7.x/adventurer/svg?seed=Alchemist&backgroundColor=f59e0b" alt="Avatar" class="avatar-image w-full h-40 object-cover"> | |
| <div class="absolute top-2 right-2 rarity-rare text-white px-2 py-1 rounded-md text-xs font-bold level-badge"> | |
| Lvl 8 | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-bold text-sm mb-1 truncate">Potion Master</h3> | |
| <p class="text-gray-400 text-xs mb-2 truncate">Magical elixirs</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-1"> | |
| <i class="fas fa-coins text-yellow-400 text-xs"></i> | |
| <span class="font-bold text-sm">400</span> | |
| </div> | |
| <div class="flex space-x-1"> | |
| <button class="preview-btn p-1.5 bg-slate-700 rounded-md hover:bg-slate-600 transition"> | |
| <i class="fas fa-eye text-xs"></i> | |
| </button> | |
| <button class="buy-btn px-2 py-1 bg-blue-600 rounded-md hover:bg-blue-500 transition text-xs"> | |
| Buy | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Avatar 6 (Premium) --> | |
| <div class="avatar-card bg-dark rounded-xl overflow-hidden shadow-lg border border-slate-700" data-level="premium" data-rarity="mythic"> | |
| <div class="relative"> | |
| <div class="locked-avatar"> | |
| <img src="https://api.dicebear.com/7.x/adventurer/svg?seed=Dragon&backgroundColor=ec4899" alt="Avatar" class="avatar-image w-full h-40 object-cover"> | |
| <div class="locked-overlay"> | |
| <div class="text-center animate-float"> | |
| <i class="fas fa-crown text-yellow-400 text-2xl mb-1"></i> | |
| <p class="text-white text-xs font-bold">Premium Only</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute top-2 right-2 rarity-mythic text-white px-2 py-1 rounded-md text-xs font-bold level-badge"> | |
| <i class="fas fa-crown mr-1"></i> Lvl 20 | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-bold text-sm mb-1 truncate">Dragon Lord</h3> | |
| <p class="text-gray-400 text-xs mb-2 truncate">Fire ruler</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-1"> | |
| <i class="fas fa-gem text-pink-400 text-xs"></i> | |
| <span class="font-bold text-sm">1,200</span> | |
| </div> | |
| <div class="flex space-x-1"> | |
| <button class="preview-btn p-1.5 bg-slate-700 rounded-md hover:bg-slate-600 transition"> | |
| <i class="fas fa-eye text-xs"></i> | |
| </button> | |
| <button class="buy-btn px-2 py-1 bg-gray-600 rounded-md cursor-not-allowed text-xs" disabled> | |
| Premium | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Avatar 7 --> | |
| <div class="avatar-card bg-dark rounded-xl overflow-hidden shadow-lg border border-slate-700" data-level="10" data-rarity="epic"> | |
| <div class="relative"> | |
| <img src="https://api.dicebear.com/7.x/adventurer/svg?seed=Samurai&backgroundColor=8b5cf6" alt="Avatar" class="avatar-image w-full h-40 object-cover"> | |
| <div class="absolute top-2 right-2 rarity-epic text-white px-2 py-1 rounded-md text-xs font-bold level-badge"> | |
| Lvl 10 | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-bold text-sm mb-1 truncate">Shadow Samurai</h3> | |
| <p class="text-gray-400 text-xs mb-2 truncate">Silent blade</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-1"> | |
| <i class="fas fa-coins text-yellow-400 text-xs"></i> | |
| <span class="font-bold text-sm">600</span> | |
| </div> | |
| <div class="flex space-x-1"> | |
| <button class="preview-btn p-1.5 bg-slate-700 rounded-md hover:bg-slate-600 transition"> | |
| <i class="fas fa-eye text-xs"></i> | |
| </button> | |
| <button class="buy-btn px-2 py-1 bg-blue-600 rounded-md hover:bg-blue-500 transition text-xs"> | |
| Buy | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Avatar 8 --> | |
| <div class="avatar-card bg-dark rounded-xl overflow-hidden shadow-lg border border-slate-700" data-level="20" data-rarity="legendary"> | |
| <div class="relative"> | |
| <div class="locked-avatar"> | |
| <img src="https://api.dicebear.com/7.x/adventurer/svg?seed=Phoenix&backgroundColor=f59e0b" alt="Avatar" class="avatar-image w-full h-40 object-cover"> | |
| <div class="locked-overlay"> | |
| <div class="text-center animate-float"> | |
| <i class="fas fa-lock text-white text-2xl mb-1"></i> | |
| <p class="text-white text-xs font-bold">Level 20 Required</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute top-2 right-2 rarity-legendary text-white px-2 py-1 rounded-md text-xs font-bold level-badge"> | |
| Lvl 20 | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-bold text-sm mb-1 truncate">Phoenix Warrior</h3> | |
| <p class="text-gray-400 text-xs mb-2 truncate">Reborn from ashes</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-1"> | |
| <i class="fas fa-coins text-yellow-400 text-xs"></i> | |
| <span class="font-bold text-sm">1,000</span> | |
| </div> | |
| <div class="flex space-x-1"> | |
| <button class="preview-btn p-1.5 bg-slate-700 rounded-md hover:bg-slate-600 transition"> | |
| <i class="fas fa-eye text-xs"></i> | |
| </button> | |
| <button class="buy-btn px-2 py-1 bg-gray-600 rounded-md cursor-not-allowed text-xs" disabled> | |
| Locked | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bottom Navigation --> | |
| <nav class="fixed bottom-0 left-0 right-0 bg-darker/95 backdrop-blur-sm border-t border-slate-700 flex justify-around py-3 nav-glow"> | |
| <a href="#" class="nav-item flex flex-col items-center text-accent"> | |
| <i class="fas fa-home text-lg"></i> | |
| <span class="text-xs mt-1">Home</span> | |
| </a> | |
| <a href="#" class="nav-item flex flex-col items-center text-accent"> | |
| <div class="relative"> | |
| <i class="fas fa-store text-lg"></i> | |
| <div class="absolute -top-1 -right-1 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div> | |
| </div> | |
| <span class="text-xs mt-1">Market</span> | |
| </a> | |
| <a href="#" class="nav-item flex flex-col items-center text-gray-400"> | |
| <i class="fas fa-user text-lg"></i> | |
| <span class="text-xs mt-1">Profile</span> | |
| </a> | |
| <a href="#" class="nav-item flex flex-col items-center text-gray-400"> | |
| <i class="fas fa-cog text-lg"></i> | |
| <span class="text-xs mt-1">Settings</span> | |
| </a> | |
| </nav> | |
| <!-- Preview Modal --> | |
| <div id="preview-modal" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 hidden modal"> | |
| <div class="bg-dark rounded-xl p-5 w-full mx-4 max-w-sm relative border border-slate-600"> | |
| <button id="close-preview" class="absolute top-4 right-4 text-gray-400 hover:text-white transition"> | |
| <i class="fas fa-times text-xl"></i> | |
| </button> | |
| <div class="text-center mb-5"> | |
| <img id="preview-avatar-img" src="" alt="Preview Avatar" class="w-40 h-40 mx-auto rounded-full object-cover border-4 border-accent shadow-lg glow"> | |
| </div> | |
| <h2 id="preview-avatar-name" class="text-xl font-bold text-center mb-1">Avatar Name</h2> | |
| <div class="flex justify-center mb-2"> | |
| <div id="preview-avatar-level" class="px-3 py-1 bg-accent rounded-full text-xs font-bold"> | |
| Level 5 | |
| </div> | |
| </div> | |
| <p id="preview-avatar-desc" class="text-gray-400 text-center text-sm mb-4 px-4">Avatar description</p> | |
| <div class="bg-darker rounded-lg p-3 mb-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-coins text-yellow-400"></i> | |
| <div> | |
| <p class="text-xs text-gray-400">Price</p> | |
| <p id="preview-avatar-price" class="font-bold">250</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-medal text-blue-400"></i> | |
| <div> | |
| <p class="text-xs text-gray-400">Rarity</p> | |
| <p id="preview-avatar-rarity" class="font-bold text-blue-400">Rare</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="confirm-buy" class="w-full py-3 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl hover:opacity-90 transition font-bold flex items-center justify-center space-x-2 shine-effect"> | |
| <i class="fas fa-shopping-cart"></i> | |
| <span>Buy Now</span> | |
| </button> | |
| <div class="text-xs text-gray-400 mt-3 text-center"> | |
| <p>This avatar will be equipped immediately after purchase</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Purchase Confirmation Modal --> | |
| <div id="confirmation-modal" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 hidden modal"> | |
| <div class="bg-dark rounded-xl p-6 w-full mx-4 max-w-sm text-center border border-slate-600"> | |
| <div class="bg-green-500/20 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-check-circle text-green-400 text-4xl"></i> | |
| </div> | |
| <h2 class="text-xl font-bold mb-2">Purchase Complete!</h2> | |
| <p class="text-gray-400 text-sm mb-5">You've successfully purchased <span id="purchased-avatar-name" class="font-bold text-accent">Shadow Bandit</span>.</p> | |
| <div class="flex space-x-3"> | |
| <button id="equip-now" class="flex-1 py-2.5 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl hover:opacity-90 transition font-bold text-sm"> | |
| Equip Now | |
| </button> | |
| <button id="close-confirmation" class="flex-1 py-2.5 bg-darker rounded-xl hover:bg-slate-700 transition font-bold text-sm border border-slate-600"> | |
| Close | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Not enough coins modal --> | |
| <div id="coins-modal" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 hidden modal"> | |
| <div class="bg-dark rounded-xl p-6 w-full mx-4 max-w-sm text-center border border-slate-600"> | |
| <div class="bg-yellow-500/20 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-exclamation-triangle text-yellow-400 text-4xl"></i> | |
| </div> | |
| <h2 class="text-xl font-bold mb-2">Not Enough Coins!</h2> | |
| <p class="text-gray-400 text-sm mb-5">You need <span id="coins-needed" class="font-bold text-yellow-400">250</span> more coins to purchase this avatar.</p> | |
| <div class="flex space-x-3"> | |
| <button id="earn-coins" class="flex-1 py-2.5 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-xl hover:opacity-90 transition font-bold text-sm"> | |
| Earn Coins | |
| </button> | |
| <button id="close-coins" class="flex-1 py-2.5 bg-darker rounded-xl hover:bg-slate-700 transition font-bold text-sm border border-slate-600"> | |
| Cancel | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Game state | |
| const gameState = { | |
| coins: 1250, | |
| level: 12, | |
| xp: 1200, | |
| xpNeeded: 2000, | |
| ownedAvatars: ['Shadow Bandit', 'Forest Ranger'] | |
| }; | |
| // DOM elements | |
| const coinBalanceEl = document.getElementById('coin-balance'); | |
| const playerLevelEl = document.getElementById('player-level'); | |
| const levelProgressTextEl = document.getElementById('level-progress-text'); | |
| const levelProgressFillEl = document.getElementById('level-progress-fill'); | |
| const avatarGrid = document.getElementById('avatar-grid'); | |
| const previewModal = document.getElementById('preview-modal'); | |
| const closePreviewBtn = document.getElementById('close-preview'); | |
| const previewAvatarImg = document.getElementById('preview-avatar-img'); | |
| const previewAvatarName = document.getElementById('preview-avatar-name'); | |
| const previewAvatarDesc = document.getElementById('preview-avatar-desc'); | |
| const previewAvatarLevel = document.getElementById('preview-avatar-level'); | |
| const previewAvatarPrice = document.getElementById('preview-avatar-price'); | |
| const previewAvatarRarity = document.getElementById('preview-avatar-rarity'); | |
| const confirmBuyBtn = document.getElementById('confirm-buy'); | |
| const confirmationModal = document.getElementById('confirmation-modal'); | |
| const purchasedAvatarNameEl = document.getElementById('purchased-avatar-name'); | |
| const equipNowBtn = document.getElementById('equip-now'); | |
| const closeConfirmationBtn = document.getElementById('close-confirmation'); | |
| const coinsModal = document.getElementById('coins-modal'); | |
| const coinsNeededEl = document.getElementById('coins-needed'); | |
| const earnCoinsBtn = document.getElementById('earn-coins'); | |
| const closeCoinsBtn = document.getElementById('close-coins'); | |
| // Rarity colors and names | |
| const rarityData = { | |
| common: { name: 'Common', color: 'text-gray-400' }, | |
| uncommon: { name: 'Uncommon', color: 'text-green-400' }, | |
| rare: { name: 'Rare', color: 'text-blue-400' }, | |
| epic: { name: 'Epic', color: 'text-purple-400' }, | |
| legendary: { name: 'Legendary', color: 'text-yellow-400' }, | |
| mythic: { name: 'Mythic', color: 'text-pink-400' } | |
| }; | |
| // Level tab functionality | |
| document.querySelectorAll('.level-tab').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| document.querySelectorAll('.level-tab').forEach(b => { | |
| b.classList.remove('tab-active', 'text-accent'); | |
| b.classList.add('text-gray-300'); | |
| }); | |
| this.classList.add('tab-active', 'text-accent'); | |
| this.classList.remove('text-gray-300'); | |
| const level = this.getAttribute('data-level'); | |
| filterAvatarsByLevel(level); | |
| }); | |
| }); | |
| // Filter avatars by level | |
| function filterAvatarsByLevel(level) { | |
| const avatars = avatarGrid.querySelectorAll('.avatar-card'); | |
| avatars.forEach(avatar => { | |
| const avatarLevel = avatar.getAttribute('data-level'); | |
| const isPremium = avatar.getAttribute('data-level') === 'premium'; | |
| if (level === 'all') { | |
| avatar.classList.remove('hidden'); | |
| } else if (level === 'premium') { | |
| if (isPremium) { | |
| avatar.classList.remove('hidden'); | |
| } else { | |
| avatar.classList.add('hidden'); | |
| } | |
| } else { | |
| if (isPremium) { | |
| avatar.classList.add('hidden'); | |
| } else if (parseInt(avatarLevel) <= parseInt(level)) { | |
| avatar.classList.remove('hidden'); | |
| } else { | |
| avatar.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| } | |
| // Update UI with game state | |
| function updateUI() { | |
| coinBalanceEl.textContent = gameState.coins.toLocaleString(); | |
| playerLevelEl.textContent = gameState.level; | |
| levelProgressTextEl.textContent = `${gameState.xp.toLocaleString()}/${gameState.xpNeeded.toLocaleString()} XP`; | |
| levelProgressFillEl.style.width = `${(gameState.xp / gameState.xpNeeded) * 100}%`; | |
| // Update buy buttons based on ownership | |
| document.querySelectorAll('.avatar-card').forEach(card => { | |
| const avatarName = card.querySelector('h3').textContent; | |
| const buyBtn = card.querySelector('.buy-btn'); | |
| const levelReq = parseInt(card.getAttribute('data-level')); | |
| const isPremium = card.getAttribute('data-level') === 'premium'; | |
| if (gameState.ownedAvatars.includes(avatarName)) { | |
| buyBtn.textContent = 'Owned'; | |
| buyBtn.className = 'px-2 py-1 bg-green-600 rounded-md cursor-default text-xs'; | |
| buyBtn.disabled = true; | |
| } else if (isPremium) { | |
| buyBtn.textContent = 'Premium'; | |
| buyBtn.className = 'px-2 py-1 bg-gradient-to-r from-yellow-500 to-pink-500 rounded-md cursor-not-allowed text-xs'; | |
| buyBtn.disabled = true; | |
| } else if (levelReq > gameState.level) { | |
| buyBtn.textContent = 'Locked'; | |
| buyBtn.className = 'px-2 py-1 bg-gray-600 rounded-md cursor-not-allowed text-xs'; | |
| buyBtn.disabled = true; | |
| } else { | |
| buyBtn.textContent = 'Buy'; | |
| buyBtn.className = 'px-2 py-1 bg-blue-600 rounded-md hover:bg-blue-500 transition text-xs'; | |
| buyBtn.disabled = false; | |
| } | |
| }); | |
| } | |
| // Initialize preview buttons | |
| document.querySelectorAll('.preview-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const card = this.closest('.avatar-card'); | |
| const imgSrc = card.querySelector('img').src; | |
| const name = card.querySelector('h3').textContent; | |
| const desc = card.querySelector('p').textContent; | |
| const level = card.querySelector('.level-badge').textContent.trim(); | |
| const price = card.querySelector('.flex.items-center.space-x-1 span').textContent; | |
| const rarity = card.getAttribute('data-rarity'); | |
| const rarityInfo = rarityData[rarity]; | |
| previewAvatarImg.src = imgSrc; | |
| previewAvatarName.textContent = name; | |
| previewAvatarDesc.textContent = desc; | |
| previewAvatarLevel.textContent = level; | |
| previewAvatarPrice.textContent = price; | |
| previewAvatarRarity.textContent = rarityInfo.name; | |
| previewAvatarRarity.className = `font-bold ${rarityInfo.color}`; | |
| // Update confirm buy button based on ownership/level | |
| if (gameState.ownedAvatars.includes(name)) { | |
| confirmBuyBtn.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Already Owned'; | |
| confirmBuyBtn.className = 'w-full py-3 bg-green-600 rounded-xl cursor-default font-bold flex items-center justify-center'; | |
| confirmBuyBtn.disabled = true; | |
| } else { | |
| const levelReq = parseInt(level.replace('Lvl ', '').replace(/\D/g, '') || '0'); | |
| const priceNum = parseInt(price.replace(/,/g, '')); | |
| const isPremium = card.getAttribute('data-level') === 'premium'; | |
| if (isPremium) { | |
| confirmBuyBtn.innerHTML = '<i class="fas fa-crown mr-2"></i> Premium Required'; | |
| confirmBuyBtn.className = 'w-full py-3 bg-gradient-to-r from-yellow-500 to-pink-500 rounded-xl cursor-not-allowed font-bold flex items-center justify-center'; | |
| confirmBuyBtn.disabled = true; | |
| } else if (levelReq > gameState.level) { | |
| confirmBuyBtn.innerHTML = '<i class="fas fa-lock mr-2"></i> Level Required'; | |
| confirmBuyBtn.className = 'w-full py-3 bg-gray-600 rounded-xl cursor-not-allowed font-bold flex items-center justify-center'; | |
| confirmBuyBtn.disabled = true; | |
| } else if (priceNum > gameState.coins) { | |
| confirmBuyBtn.innerHTML = '<i class="fas fa-exclamation-triangle mr-2"></i> Not Enough Coins'; | |
| confirmBuyBtn.className = 'w-full py-3 bg-red-600 rounded-xl cursor-not-allowed font-bold flex items-center justify-center'; | |
| confirmBuyBtn.disabled = true; | |
| } else { | |
| confirmBuyBtn.innerHTML = '<i class="fas fa-shopping-cart mr-2"></i> Buy Now'; | |
| confirmBuyBtn.className = 'w-full py-3 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl hover:opacity-90 transition font-bold flex items-center justify-center shine-effect'; | |
| confirmBuyBtn.disabled = false; | |
| } | |
| } | |
| previewModal.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| }); | |
| }); | |
| // Close preview modal | |
| closePreviewBtn.addEventListener('click', function() { | |
| previewModal.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| }); | |
| // Confirm purchase | |
| confirmBuyBtn.addEventListener('click', function() { | |
| const avatarName = previewAvatarName.textContent; | |
| const price = parseInt(previewAvatarPrice.textContent.replace(/,/g, '')); | |
| if (!gameState.ownedAvatars.includes(avatarName) && gameState.coins >= price) { | |
| // Deduct coins | |
| gameState.coins -= price; | |
| // Add to owned avatars | |
| gameState.ownedAvatars.push(avatarName); | |
| // Add XP | |
| gameState.xp += Math.floor(price * 0.5); | |
| // Check for level up | |
| if (gameState.xp >= gameState.xpNeeded) { | |
| gameState.level++; | |
| gameState.xp = gameState.xp - gameState.xpNeeded; | |
| gameState.xpNeeded = Math.floor(gameState.xpNeeded * 1.2); | |
| // Show level up animation | |
| const levelEl = document.getElementById('player-level'); | |
| levelEl.classList.add('animate-shake'); | |
| setTimeout(() => { | |
| levelEl.classList.remove('animate-shake'); | |
| }, 500); | |
| } | |
| // Update UI | |
| updateUI(); | |
| // Show confirmation | |
| purchasedAvatarNameEl.textContent = avatarName; | |
| previewModal.classList.add('hidden'); | |
| confirmationModal.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| } else if (gameState.coins < price) { | |
| coinsNeededEl.textContent = (price - gameState.coins).toLocaleString(); | |
| previewModal.classList.add('hidden'); | |
| coinsModal.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| } | |
| }); | |
| // Equip now button | |
| equipNowBtn.addEventListener('click', function() { | |
| // Animation for equip | |
| this.innerHTML = '<i class="fas fa-check mr-2"></i> Equipped!'; | |
| this.classList.remove('bg-gradient-to-r', 'from-blue-500', 'to-cyan-500', 'hover:opacity-90'); | |
| this.classList.add('bg-green-500', 'hover:bg-green-400'); | |
| setTimeout(() => { | |
| confirmationModal.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| // Reset button | |
| this.innerHTML = 'Equip Now'; | |
| this.classList.remove('bg-green-500', 'hover:bg-green-400'); | |
| this.classList.add('bg-gradient-to-r', 'from-blue-500', 'to-cyan-500', 'hover:opacity-90'); | |
| }, 1000); | |
| }); | |
| // Close confirmation modal | |
| closeConfirmationBtn.addEventListener('click', function() { | |
| confirmationModal.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| }); | |
| // Earn coins button | |
| earnCoinsBtn.addEventListener('click', function() { | |
| // Add some coins | |
| gameState.coins += 500; | |
| updateUI(); | |
| // Animation | |
| this.innerHTML = '<i class="fas fa-coins mr-2"></i> +500 Coins!'; | |
| this.classList.remove('bg-gradient-to-r', 'from-yellow-500', 'to-orange-500', 'hover:opacity-90'); | |
| this.classList.add('bg-green-500', 'hover:bg-green-400'); | |
| setTimeout(() => { | |
| coinsModal.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| // Reset button | |
| this.innerHTML = 'Earn Coins'; | |
| this.classList.remove('bg-green-500', 'hover:bg-green-400'); | |
| this.classList.add('bg-gradient-to-r', 'from-yellow-500', 'to-orange-500', 'hover:opacity-90'); | |
| // Show preview again | |
| previewModal.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| }, 1500); | |
| }); | |
| // Close coins modal | |
| closeCoinsBtn.addEventListener('click', function() { | |
| coinsModal.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| }); | |
| // Initialize | |
| updateUI(); | |
| // Add touch effect to cards | |
| document.querySelectorAll('.avatar-card').forEach(card => { | |
| card.addEventListener('touchstart', function() { | |
| this.classList.add('active:scale-95'); | |
| }); | |
| card.addEventListener('touchend', function() { | |
| this.classList.remove('active:scale-95'); | |
| }); | |
| }); | |
| </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=eddyencode/edinsondev" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |