| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Badges - CryptoQuest</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); |
| * { |
| font-family: 'Space Grotesk', sans-serif; |
| } |
| .dark-bg { |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); |
| } |
| .badge-card { |
| background: rgba(255, 255, 255, 0.05); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| transition: all 0.3s ease; |
| } |
| .badge-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); |
| } |
| .badge-earned { |
| box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); |
| } |
| .badge-locked { |
| filter: grayscale(100%); |
| opacity: 0.6; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen dark-bg text-white"> |
| |
| <nav class="border-b border-gray-700"> |
| <div class="container mx-auto px-6 py-4"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i data-feather="trending-up" class="text-yellow-400"></i> |
| <span class="text-xl font-bold">CryptoQuest</span> |
| </div> |
| <div class="hidden md:flex space-x-8"> |
| <a href="index.html" class="hover:text-yellow-400 transition-colors">Home</a> |
| <a href="trading.html" class="hover:text-yellow-400 transition-colors">Trading</a> |
| <a href="badges.html" class="text-yellow-400 font-semibold">Badges</a> |
| <a href="leaderboard.html" class="hover:text-yellow-400 transition-colors">Leaderboard</a> |
| <a href="profile.html" class="hover:text-yellow-400 transition-colors">Profile</a> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="flex items-center space-x-2 bg-green-500/20 px-4 py-2 rounded-full"> |
| <i data-feather="dollar-sign" class="w-4 h-4"></i> |
| <span class="font-semibold">$10,247.83</span> |
| </div> |
| <button class="md:hidden"> |
| <i data-feather="menu"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
| |
| <main class="container mx-auto px-6 py-8"> |
| <div class="text-center mb-12"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Trading Badges</h1> |
| <p class="text-xl text-gray-300 max-w-2xl mx-auto"> |
| Earn prestigious badges by achieving trading milestones and mastering different market conditions. Show off your expertise! |
| </p> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| <div class="badge-card rounded-2xl p-6 badge-earned"> |
| <div class="w-20 h-20 bg-gradient-to-r from-green-400 to-blue-500 rounded-full flex items-center justify-center mb-4 mx-auto"> |
| <i data-feather="star" class="w-10 h-10"></i> |
| </div> |
| <h3 class="text-xl font-bold text-center mb-2">First Trade</h3> |
| <p class="text-gray-300 text-center text-sm mb-4"> |
| Execute your very first trade in the CryptoQuest platform |
| </p> |
| <div class="text-center"> |
| <span class="inline-block bg-green-500/20 text-green-400 px-3 py-1 rounded-full text-sm"> |
| EARNED |
| </span> |
| </div> |
| </div> |
|
|
| |
| <div class="badge-card rounded-2xl p-6 badge-earned"> |
| <div class="w-20 h-20 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center mb-4 mx-auto"> |
| <i data-feather="shield" class="w-10 h-10"></i> |
| </div> |
| <h3 class="text-xl font-bold text-center mb-2">Risk Manager</h3> |
| <p class="text-gray-300 text-center text-sm mb-4"> |
| Successfully use stop-loss on 10 different trades |
| </p> |
| <div class="text-center"> |
| <span class="inline-block bg-green-500/20 text-green-400 px-3 py-1 rounded-full text-sm"> |
| EARNED |
| </span> |
| </div> |
| </div> |
|
|
| |
| <div class="badge-card rounded-2xl p-6 badge-locked"> |
| <div class="w-20 h-20 bg-gradient-to-r from-gray-500 to-gray-700 rounded-full flex items-center justify-center mb-4 mx-auto"> |
| <i data-feather="zap" class="w-10 h-10"></i> |
| </div> |
| <h3 class="text-xl font-bold text-center mb-2">Leverage Master</h3> |
| <p class="text-gray-300 text-center text-sm mb-4"> |
| Make profitable trades using 20x leverage or higher |
| </p> |
| <div class="text-center"> |
| <span class="inline-block bg-red-500/20 text-red-400 px-3 py-1 rounded-full text-sm"> |
| LOCKED |
| </span> |
| </div> |
| </div> |
|
|
| |
| <div class="badge-card rounded-2xl p-6 badge-earned"> |
| <div class="w-20 h-20 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full flex items-center justify-center mb-4 mx-auto"> |
| <i data-feather="trending-up" class="w-10 h-10"></i> |
| </div> |
| <h3 class="text-xl font-bold text-center mb-2">Market Maker</h3> |
| <p class="text-gray-300 text-center text-sm mb-4"> |
| Execute 50 limit orders across different trading pairs |
| </p> |
| <div class="text-center"> |
| <span class="inline-block bg-green-500/20 text-green-400 px-3 py-1 rounded-full text-sm"> |
| EARNED |
| </span> |
| </div> |
| </div> |
|
|
| |
| <div class="badge-card rounded-2xl p-6 badge-locked"> |
| <div class="w-20 h-20 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full flex items-center justify-center mb-4 mx-auto"> |
| <i data-feather="anchor" class="w-10 h-10"></i> |
| </div> |
| <h3 class="text-xl font-bold text-center mb-2">Crypto Whale</h3> |
| <p class="text-gray-300 text-center text-sm mb-4"> |
| Reach a total trading volume of $1,000,000 |
| </p> |
| <div class="text-center"> |
| <span class="inline-block bg-red-500/20 text-red-400 px-3 py-1 rounded-full text-sm"> |
| LOCKED |
| </span> |
| </div> |
| </div> |
|
|
| |
| <div class="badge-card rounded-2xl p-6 badge-locked"> |
| <div class="w-20 h-20 bg-gradient-to-r from-red-500 to-pink-500 rounded-full flex items-center justify-center mb-4 mx-auto"> |
| <i data-feather="clock" class="w-10 h-10"></i> |
| </div> |
| <h3 class="text-xl font-bold text-center mb-2">Perfect Timing</h3> |
| <p class="text-gray-300 text-center text-sm mb-4"> |
| Achieve 10 consecutive profitable trades |
| </p> |
| <div class="text-center"> |
| <span class="inline-block bg-red-500/20 text-red-400 px-3 py-1 rounded-full text-sm"> |
| LOCKED |
| </span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mt-12 trading-panel rounded-2xl p-8"> |
| <h3 class="text-2xl font-bold mb-6 text-center">Your Progress</h3> |
| <div class="grid md:grid-cols-3 gap-6"> |
| <div class="text-center"> |
| <div class="text-3xl font-bold text-yellow-400 mb-2">8/15</div> |
| <div class="text-gray-300">Badges Earned</div> |
| </div> |
| <div class="text-center"> |
| <div class="text-3xl font-bold text-yellow-400 mb-2">64%</div> |
| <div class="text-gray-300">Completion</div> |
| </div> |
| <div class="text-center"> |
| <div class="text-3xl font-bold text-yellow-400 mb-2">3</div> |
| <div class="text-gray-300">Rare Badges</div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| <script> |
| |
| feather.replace(); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const earnedBadges = document.querySelectorAll('.badge-earned'); |
| earnedBadges.forEach((badge, index) => { |
| badge.style.animationDelay = `${index * 0.1}s`; |
| badge.classList.add('animate-pulse'); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
