| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Crypto Trade Pro</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"> |
| <style> |
| |
| body::before { |
| content: ''; |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(45deg, |
| rgba(11, 15, 25, 0.9) 0%, |
| rgba(30, 41, 59, 0.9) 50%, |
| rgba(15, 23, 42, 0.9) 100%); |
| z-index: -2; |
| } |
| |
| body::after { |
| content: ''; |
| position: fixed; |
| top: -50%; |
| left: -50%; |
| width: 200%; |
| height: 200%; |
| background: |
| radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.1) 0%, transparent 20%), |
| radial-gradient(circle at 70% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 20%), |
| linear-gradient(45deg, |
| rgba(59, 130, 246, 0.05) 0%, |
| rgba(124, 58, 237, 0.05) 50%, |
| rgba(220, 38, 38, 0.05) 100%); |
| animation: gradientPulse 15s ease infinite; |
| z-index: -1; |
| } |
| |
| @keyframes gradientPulse { |
| 0% { transform: rotate(0deg); opacity: 0.7; } |
| 50% { transform: rotate(180deg); opacity: 1; } |
| 100% { transform: rotate(360deg); opacity: 0.7; } |
| } |
| |
| |
| @keyframes marquee { |
| 0% { transform: translateX(0); } |
| 100% { transform: translateX(-50%); } |
| } |
| .animate-marquee { |
| display: inline-block; |
| animation: marquee 20s linear infinite; |
| } |
| |
| |
| ::-webkit-scrollbar { |
| width: 6px; |
| } |
| ::-webkit-scrollbar-track { |
| background: #1e293b; |
| } |
| ::-webkit-scrollbar-thumb { |
| background: #334155; |
| border-radius: 3px; |
| } |
| ::-webkit-scrollbar-thumb:hover { |
| background: #475569; |
| } |
| |
| |
| @keyframes pulseGreen { |
| 0% { background-color: rgba(74, 222, 128, 0.1); } |
| 50% { background-color: rgba(74, 222, 128, 0.3); } |
| 100% { background-color: rgba(74, 222, 128, 0.1); } |
| } |
| @keyframes pulseRed { |
| 0% { background-color: rgba(248, 113, 113, 0.1); } |
| 50% { background-color: rgba(248, 113, 113, 0.3); } |
| 100% { background-color: rgba(248, 113, 113, 0.1); } |
| } |
| .price-up { |
| animation: pulseGreen 1.5s infinite; |
| box-shadow: 0 0 10px rgba(74, 222, 128, 0.7); |
| text-shadow: 0 0 5px rgba(74, 222, 128, 0.7); |
| } |
| .price-down { |
| animation: pulseRed 1.5s infinite; |
| box-shadow: 0 0 10px rgba(248, 113, 113, 0.7); |
| text-shadow: 0 0 5px rgba(248, 113, 113, 0.7); |
| } |
| .glow-effect { |
| position: relative; |
| } |
| .glow-effect::after { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| border-radius: inherit; |
| box-shadow: 0 0 15px currentColor; |
| opacity: 0; |
| transition: opacity 0.3s ease; |
| } |
| .glow-effect:hover::after { |
| opacity: 0.7; |
| } |
| |
| |
| @keyframes bounce { |
| 0%, 100% { transform: translateY(0); } |
| 50% { transform: translateY(-10px); } |
| } |
| .animate-bounce { |
| animation: bounce 2s infinite; |
| } |
| |
| |
| .switch { |
| position: relative; |
| display: inline-block; |
| width: 60px; |
| height: 30px; |
| } |
| .switch input { |
| opacity: 0; |
| width: 0; |
| height: 0; |
| } |
| .slider { |
| position: absolute; |
| cursor: pointer; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background-color: #334155; |
| transition: .4s; |
| border-radius: 34px; |
| } |
| .slider:before { |
| position: absolute; |
| content: ""; |
| height: 22px; |
| width: 22px; |
| left: 4px; |
| bottom: 4px; |
| background-color: white; |
| transition: .4s; |
| border-radius: 50%; |
| } |
| input:checked + .slider { |
| background-color: #3b82f6; |
| } |
| input:checked + .slider:before { |
| transform: translateX(30px); |
| } |
| </style> |
| </head> |
| <body class="bg-slate-900 text-gray-200 min-h-screen"> |
| <div class="container mx-auto px-4 py-6 max-w-6xl"> |
| |
| <header class="flex justify-between items-center mb-8"> |
| <div class="flex items-center space-x-2"> |
| <div class="bg-gradient-to-r from-blue-600 to-green-500 p-2 rounded-lg shadow-md"> |
| <i class="fas fa-chart-line text-white text-xl"></i> |
| </div> |
| <h1 class="text-xl font-bold bg-gradient-to-r from-blue-400 to-green-400 bg-clip-text text-transparent"> |
| Crypto<span class="font-extrabold">Trade</span>Pro |
| </h1> |
| </div> |
| |
| <div class="flex items-center space-x-4"> |
| |
| <div class="relative group"> |
| <button class="flex items-center space-x-1 px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 transition"> |
| <i class="fas fa-globe"></i> |
| <span id="current-language">EN</span> |
| <i class="fas fa-chevron-down text-xs"></i> |
| </button> |
| <div class="absolute right-0 mt-2 w-32 bg-slate-800 rounded-lg shadow-lg z-10 hidden group-hover:block"> |
| <button class="w-full text-left px-4 py-2 hover:bg-slate-700 rounded-t-lg" onclick="changeLanguage('en')"> |
| <span class="fi fi-us mr-2"></span> English |
| </button> |
| <button class="w-full text-left px-4 py-2 hover:bg-slate-700 rounded-b-lg" onclick="changeLanguage('vi')"> |
| <span class="fi fi-vn mr-2"></span> Vietnamese |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="relative group"> |
| <button class="flex items-center space-x-2 px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 transition"> |
| <div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center"> |
| <i class="fas fa-user text-white"></i> |
| </div> |
| <span class="hidden md:inline">User123</span> |
| </button> |
| <div class="absolute right-0 mt-2 w-48 bg-slate-800 rounded-lg shadow-lg z-10 hidden group-hover:block"> |
| <a href="#" class="block px-4 py-2 hover:bg-slate-700 rounded-t-lg"> |
| <i class="fas fa-user mr-2"></i> Profile |
| </a> |
| <a href="#" class="block px-4 py-2 hover:bg-slate-700"> |
| <i class="fas fa-cog mr-2"></i> Settings |
| </a> |
| <a href="#" class="block px-4 py-2 hover:bg-slate-700 rounded-b-lg"> |
| <i class="fas fa-sign-out-alt mr-2"></i> Logout |
| </a> |
| </div> |
| </div> |
| </div> |
| </header> |
| |
| |
| <div class="bg-slate-800 border-t border-b border-slate-700 py-2 mb-6 overflow-hidden"> |
| <div class="animate-marquee whitespace-nowrap"> |
| <span class="inline-block mx-4 text-yellow-400"><i class="fas fa-bolt mr-2"></i>BTC up 2.3% today</span> |
| <span class="inline-block mx-4 text-green-400"><i class="fas fa-arrow-up mr-2"></i>Market cap $1.42T</span> |
| <span class="inline-block mx-4 text-blue-400"><i class="fas fa-newspaper mr-2"></i>Fed rates unchanged</span> |
| <span class="inline-block mx-4 text-purple-400"><i class="fas fa-chart-simple mr-2"></i>Volume spike: ETH</span> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> |
| |
| <div class="lg:col-span-1 space-y-6"> |
| |
| <div class="bg-slate-800 rounded-xl p-6 shadow-lg border-l-4 border-blue-500"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-lg font-semibold">My Portfolio</h2> |
| <div class="flex space-x-2"> |
| <i class="fas fa-wallet text-blue-400"></i> |
| <i class="fas fa-chart-pie text-green-400"></i> |
| </div> |
| </div> |
| <div class="space-y-4"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <div class="w-8 h-8 rounded-full bg-yellow-500 flex items-center justify-center"> |
| <i class="fas fa-coins text-white"></i> |
| </div> |
| <span>BTC</span> |
| </div> |
| <span class="font-medium">0.0024</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center"> |
| <i class="fas fa-dollar-sign text-white"></i> |
| </div> |
| <span>USDT</span> |
| </div> |
| <span class="font-medium">1,245.50</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <div class="w-8 h-8 rounded-full bg-amber-700 flex items-center justify-center"> |
| <i class="fas fa-gem text-white"></i> |
| </div> |
| <span>Gold</span> |
| </div> |
| <span class="font-medium">0.54</span> |
| </div> |
| </div> |
| <div class="mt-6 pt-4 border-t border-slate-700"> |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg font-medium transition"> |
| Deposit |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-slate-800 rounded-xl p-6 shadow-lg"> |
| <h2 class="text-lg font-semibold mb-4">Quick Actions</h2> |
| <div class="grid grid-cols-2 gap-3"> |
| <button class="bg-slate-700 hover:bg-slate-600 p-3 rounded-lg flex flex-col items-center transition"> |
| <i class="fas fa-exchange-alt text-blue-500 mb-1"></i> |
| <span class="text-sm">Trade</span> |
| </button> |
| <button class="bg-slate-700 hover:bg-slate-600 p-3 rounded-lg flex flex-col items-center transition"> |
| <i class="fas fa-wallet text-green-500 mb-1"></i> |
| <span class="text-sm">Wallet</span> |
| </button> |
| <button class="bg-slate-700 hover:bg-slate-600 p-3 rounded-lg flex flex-col items-center transition"> |
| <i class="fas fa-chart-line text-purple-500 mb-1"></i> |
| <span class="text-sm">Market</span> |
| </button> |
| <button class="bg-slate-700 hover:bg-slate-600 p-3 rounded-lg flex flex-col items-center transition"> |
| <i class="fas fa-history text-yellow-500 mb-1"></i> |
| <span class="text-sm">History</span> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl p-6 shadow-lg relative overflow-hidden"> |
| <div class="relative z-10"> |
| <h2 class="text-lg font-semibold mb-2">Special Offer!</h2> |
| <p class="text-sm mb-4">Get up to 1,000 USDT bonus on your first deposit</p> |
| <button class="bg-white text-blue-600 hover:bg-gray-100 px-4 py-2 rounded-lg font-medium text-sm transition"> |
| Claim Now |
| </button> |
| </div> |
| <div class="absolute -right-4 -bottom-4 opacity-20"> |
| <i class="fas fa-gift text-6xl"></i> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="lg:col-span-3 space-y-6 border-l-2 border-blue-500 pl-6 relative"> |
| <div class="absolute -left-1 top-0 h-full w-1 bg-gradient-to-b from-blue-500 to-purple-500"></div> |
| |
| <div class="bg-slate-800 rounded-xl p-6 shadow-lg"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-lg font-semibold">Market Overview</h2> |
| <div class="flex space-x-2"> |
| <button class="px-3 py-1 text-sm bg-slate-700 rounded-lg">24h</button> |
| <button class="px-3 py-1 text-sm bg-blue-600 rounded-lg">1h</button> |
| <button class="px-3 py-1 text-sm bg-slate-700 rounded-lg">15m</button> |
| </div> |
| </div> |
| |
| <div class="overflow-x-auto"> |
| <table class="w-full"> |
| <thead> |
| <tr class="text-left text-gray-400 border-b border-slate-700"> |
| <th class="pb-3">Pair</th> |
| <th class="pb-3 text-right">Price</th> |
| <th class="pb-3 text-right">24h Change</th> |
| <th class="pb-3 text-right">24h Volume</th> |
| <th class="pb-3 text-right">Action</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr class="border-b border-slate-700 hover:bg-slate-700/50 transition group"> |
| <td class="py-4"> |
| <div class="flex items-center space-x-2"> |
| <div class="w-6 h-6 rounded-full bg-gradient-to-br from-yellow-500 to-amber-600 flex items-center justify-center shadow-sm"> |
| <i class="fas fa-bitcoin text-white text-xs"></i> |
| </div> |
| <div> |
| <div class="font-medium">BTC/USDT</div> |
| <div class="text-xs text-gray-400">Bitcoin</div> |
| </div> |
| </div> |
| </td> |
| <td class="py-4 text-right font-medium">36,245.50</td> |
| <td class="py-4 text-right"> |
| <span class="inline-block px-2 py-1 rounded bg-green-900/30 text-green-400 price-up">+2.34%</span> |
| </td> |
| <td class="py-4 text-right text-gray-400">1.24B</td> |
| <td class="py-4 text-right"> |
| <button class="px-3 py-1 bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-500 hover:to-blue-400 rounded-lg text-sm font-medium transition-all flex items-center"> |
| <i class="fas fa-arrow-right-arrow-left text-xs mr-1"></i> Trade |
| </button> |
| </td> |
| </tr> |
| <tr class="border-b border-slate-700 hover:bg-slate-700/50 transition"> |
| <td class="py-4"> |
| <div class="flex items-center space-x-2"> |
| <div class="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center"> |
| <i class="fas fa-dollar-sign text-white text-xs"></i> |
| </div> |
| <span>USDT</span> |
| </div> |
| </td> |
| <td class="py-4 text-right font-medium">1.00</td> |
| <td class="py-4 text-right"> |
| <span class="inline-block px-2 py-1 rounded bg-slate-700 text-gray-400">0.00%</span> |
| </td> |
| <td class="py-4 text-right text-gray-400">4.56B</td> |
| <td class="py-4 text-right"> |
| <button class="px-3 py-1 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm transition"> |
| Trade |
| </button> |
| </td> |
| </tr> |
| <tr class="hover:bg-slate-700/50 transition"> |
| <td class="py-4"> |
| <div class="flex items-center space-x-2"> |
| <div class="w-6 h-6 rounded-full bg-amber-700 flex items-center justify-center"> |
| <i class="fas fa-gem text-white text-xs"></i> |
| </div> |
| <span>Gold</span> |
| </div> |
| </td> |
| <td class="py-4 text-right font-medium">1,845.60</td> |
| <td class="py-4 text-right"> |
| <span class="inline-block px-2 py-1 rounded bg-red-900/30 text-red-400 price-down">-1.12%</span> |
| </td> |
| <td class="py-4 text-right text-gray-400">245.7M</td> |
| <td class="py-4 text-right"> |
| <button class="px-3 py-1 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm transition"> |
| Trade |
| </button> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| |
| |
| <div class="bg-slate-800 rounded-xl p-6 shadow-lg"> |
| <div class="flex justify-between items-center mb-6"> |
| <div> |
| <h3 class="text-lg font-semibold">BTC/USDT</h3> |
| <p class="text-gray-400 text-sm">Bitcoin / Tether</p> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="flex items-center space-x-2"> |
| <span class="text-xl font-bold">36,245.50</span> |
| <span class="px-2 py-1 rounded bg-green-900/30 text-green-400 text-sm">+2.34%</span> |
| </div> |
| <div class="flex space-x-2"> |
| <button class="px-3 py-1 text-sm bg-slate-700 rounded-lg">1D</button> |
| <button class="px-3 py-1 text-sm bg-blue-600 rounded-lg">1W</button> |
| <button class="px-3 py-1 text-sm bg-slate-700 rounded-lg">1M</button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-slate-700/20 rounded-lg h-96 flex flex-col items-center justify-center border-2 border-blue-500/30 relative overflow-hidden"> |
| <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iNjAwIiBvcGFjaXR5PSIwLjEiPgogIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICA8cGF0aCBkPSJNMzAwIDBjLTE2NS45NjUgMC0zMDAgMTM0LjAzNS0zMDAgMzAwczEzNC4wMzUgMzAwIDMwMCAzMDAgMzAwLTEzNC4wMzUgMzAwLTMwMFM0NjUuOTY1IDAgMzAwIDB6IiBzdHJva2U9IiMzODJkN2YiIHN0cm9rZS13aWR0aD0iMSIvPgogICAgPHBhdGggZD0iTTMwMCAxMDBjLTExMC40NjEgMC0yMDAgODkuNTM5LTIwMCAyMDBzODkuNTM5IDIwMCAyMDAgMjAwIDIwMC04OS41MzkgMjAwLTIwMFM0MTAuNDYxIDEwMCAzMDAgMTAweiIgc3Ryb2tlPSIjMzg4ZTk1IiBzdHJva2Utd2lkdGg9IjEiLz4KICAgIDxwYXRoIGQ9Ik0zMDAgMjAwYy01NS4yMjggMC0xMDAgNDQuNzcyLTEwMCAxMDBzNDQuNzcyIDEwMCAxMDAgMTAwIDEwMC00NC43NzIgMTAwLTEwMFMzNTUuMjI4IDIwMCAzMDAgMjAweiIgc3Ryb2tlPSIjOGI1Y2Y5IiBzdHJva2Utd2lkdGg9IjEiLz4KICA8L2c+Cjwvc3ZnPg==')] bg-center [mask-image:linear-gradient(to_bottom,white_10%,transparent_70%)]"></div> |
| <div class="absolute top-0 left-0 right-0 bg-gradient-to-r from-blue-900/30 to-purple-900/30 py-2 px-4 flex justify-between items-center"> |
| <span class="text-sm font-medium text-blue-300"><i class="fas fa-circle text-xs mr-2 animate-pulse text-green-400"></i> LIVE TRADING CHART</span> |
| <div class="flex space-x-2"> |
| <button class="px-2 py-1 text-xs bg-blue-600 rounded">1D</button> |
| <button class="px-2 py-1 text-xs bg-slate-700 rounded">1W</button> |
| <button class="px-2 py-1 text-xs bg-slate-700 rounded">1M</button> |
| <button class="px-2 py-1 text-xs bg-slate-700 rounded">1Y</button> |
| </div> |
| </div> |
| <div class="text-center mb-4"> |
| <i class="fas fa-chart-line text-4xl text-blue-500 mb-2 animate-pulse"></i> |
| <p class="text-lg font-medium">Biểu đồ giao dịch trực tiếp</p> |
| <p class="text-sm text-gray-400 mt-1">Chuyên nghiệp & Hiện đại - Luôn sẵn sàng hoạt động</p> |
| </div> |
| <div class="flex space-x-2"> |
| <span class="px-2 py-1 bg-blue-900/30 text-blue-400 rounded text-xs">BTC/USDT</span> |
| <span class="px-2 py-1 bg-slate-800 text-gray-400 rounded text-xs">1D</span> |
| <span class="px-2 py-1 bg-slate-800 text-gray-400 rounded text-xs">1W</span> |
| <span class="px-2 py-1 bg-slate-800 text-gray-400 rounded text-xs">1M</span> |
| </div> |
| </div> |
| |
| |
| <div class="flex space-x-2 mt-4 overflow-x-auto py-2"> |
| <button class="px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-full text-sm flex items-center whitespace-nowrap"> |
| <i class="fas fa-ruler mr-1"></i> Drawing Tools |
| </button> |
| <button class="px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-full text-sm flex items-center whitespace-nowrap"> |
| <i class="fas fa-indicator mr-1"></i> Indicators |
| </button> |
| <button class="px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-full text-sm flex items-center whitespace-nowrap"> |
| <i class="fas fa-chart-candlestick mr-1"></i> Candlestick |
| </button> |
| <button class="px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-full text-sm flex items-center whitespace-nowrap"> |
| <i class="fas fa-chart-line mr-1"></i> Line |
| </button> |
| <button class="px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-full text-sm flex items-center whitespace-nowrap"> |
| <i class="fas fa-cog mr-1"></i> Settings |
| </button> |
| </div> |
|
|
| |
| <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div class="bg-slate-700/50 rounded-lg p-4"> |
| <div class="flex justify-between items-center mb-3"> |
| <h4 class="font-medium">Buy BTC</h4> |
| <span class="text-sm text-gray-400">Balance: 1,245.50 USDT</span> |
| </div> |
| <div class="space-y-3"> |
| <div class="bg-slate-800 rounded-lg p-3"> |
| <div class="flex justify-between text-sm text-gray-400 mb-1"> |
| <span>Price</span> |
| <span>USDT</span> |
| </div> |
| <div class="flex items-center"> |
| <input type="number" class="w-full bg-transparent outline-none" placeholder="0.00" value="36245.50"> |
| </div> |
| </div> |
| <div class="bg-slate-800 rounded-lg p-3"> |
| <div class="flex justify-between text-sm text-gray-400 mb-1"> |
| <span>Amount</span> |
| <span>BTC</span> |
| </div> |
| <div class="flex items-center"> |
| <input type="number" class="w-full bg-transparent outline-none" placeholder="0.00"> |
| </div> |
| </div> |
| <div class="bg-slate-800 rounded-lg p-3"> |
| <div class="flex justify-between text-sm text-gray-400 mb-1"> |
| <span>Total</span> |
| <span>USDT</span> |
| </div> |
| <div class="flex items-center"> |
| <input type="number" class="w-full bg-transparent outline-none" placeholder="0.00"> |
| </div> |
| </div> |
| <button class="w-full bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg font-medium transition"> |
| Buy BTC |
| </button> |
| </div> |
| </div> |
| |
| <div class="bg-slate-700/50 rounded-lg p-4"> |
| <div class="flex justify-between items-center mb-3"> |
| <h4 class="font-medium">Sell BTC</h4> |
| <span class="text-sm text-gray-400">Balance: 0.0024 BTC</span> |
| </div> |
| <div class="space-y-3"> |
| <div class="bg-slate-800 rounded-lg p-3"> |
| <div class="flex justify-between text-sm text-gray-400 mb-1"> |
| <span>Price</span> |
| <span>USDT</span> |
| </div> |
| <div class="flex items-center"> |
| <input type="number" class="w-full bg-transparent outline-none" placeholder="0.00" value="36245.50"> |
| </div> |
| </div> |
| <div class="bg-slate-800 rounded-lg p-3"> |
| <div class="flex justify-between text-sm text-gray-400 mb-1"> |
| <span>Amount</span> |
| <span>BTC</span> |
| </div> |
| <div class="flex items-center"> |
| <input type="number" class="w-full bg-transparent outline-none" placeholder="0.00"> |
| </div> |
| </div> |
| <div class="bg-slate-800 rounded-lg p-3"> |
| <div class="flex justify-between text-sm text-gray-400 mb-1"> |
| <span>Total</span> |
| <span>USDT</span> |
| </div> |
| <div class="flex items-center"> |
| <input type="number" class="w-full bg-transparent outline-none" placeholder="0.00"> |
| </div> |
| </div> |
| <button class="w-full bg-red-600 hover:bg-red-700 text-white py-3 rounded-lg font-medium transition"> |
| Sell BTC |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="fixed bottom-0 left-0 right-0 bg-slate-800 shadow-lg lg:hidden"> |
| <div class="flex justify-around items-center p-3"> |
| <button class="flex flex-col items-center text-blue-500"> |
| <i class="fas fa-home text-xl"></i> |
| <span class="text-xs mt-1">Home</span> |
| </button> |
| <button class="flex flex-col items-center text-gray-400"> |
| <i class="fas fa-chart-line text-xl"></i> |
| <span class="text-xs mt-1">Markets</span> |
| </button> |
| <button class="flex flex-col items-center text-gray-400"> |
| <i class="fas fa-wallet text-xl"></i> |
| <span class="text-xs mt-1">Wallet</span> |
| </button> |
| <button class="flex flex-col items-center text-gray-400"> |
| <i class="fas fa-user text-xl"></i> |
| <span class="text-xs mt-1">Profile</span> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="fixed bottom-24 right-6 z-50 flex flex-col space-y-3"> |
| <div class="particles absolute inset-0 pointer-events-none" id="particles-1"></div> |
| <div class="particles absolute inset-0 pointer-events-none" id="particles-2"></div> |
| <button class="p-3 bg-gradient-to-r from-blue-600 to-blue-500 rounded-full shadow-xl hover:shadow-2xl transition-all duration-300 group"> |
| <i class="fas fa-bolt text-xl text-white"></i> |
| <div class="absolute right-16 bottom-0 bg-slate-800 px-4 py-2 rounded-lg shadow-lg hidden group-hover:block whitespace-nowrap"> |
| Quick Trade |
| </div> |
| </button> |
| <button class="p-3 bg-gradient-to-r from-purple-600 to-blue-600 rounded-full shadow-xl hover:shadow-2xl transition-all duration-300 group"> |
| <i class="fas fa-headset text-xl text-white"></i> |
| <div class="absolute right-16 bottom-0 bg-slate-800 px-4 py-2 rounded-lg shadow-lg hidden group-hover:block whitespace-nowrap"> |
| Support |
| </div> |
| </button> |
| </div> |
|
|
| |
| <div class="fixed bottom-6 right-6 z-50 animate-bounce"> |
| <button class="relative p-4 bg-gradient-to-r from-purple-600 to-blue-600 rounded-full shadow-xl hover:shadow-2xl transition-all duration-300 group"> |
| <i class="fas fa-headset text-2xl text-white"></i> |
| <span class="absolute -top-2 -right-2 flex items-center justify-center w-6 h-6 bg-red-500 rounded-full text-xs font-bold text-white animate-ping opacity-75 group-hover:animate-none">!</span> |
| </button> |
| <div class="absolute right-16 bottom-0 bg-slate-800 px-4 py-2 rounded-lg shadow-lg hidden group-hover:block"> |
| <p class="text-sm whitespace-nowrap">Need help? Contact us!</p> |
| </div> |
| </div> |
|
|
| <script> |
| |
| function changeLanguage(lang) { |
| const languageDisplay = document.getElementById('current-language'); |
| if (lang === 'en') { |
| languageDisplay.textContent = 'EN'; |
| |
| console.log('Switched to English'); |
| } else if (lang === 'vi') { |
| languageDisplay.textContent = 'VN'; |
| |
| console.log('Switched to Vietnamese'); |
| } |
| } |
| |
| |
| function simulatePriceUpdates() { |
| const priceElements = document.querySelectorAll('.price-up, .price-down'); |
| |
| priceElements.forEach(el => { |
| |
| if (Math.random() > 0.7) { |
| if (el.classList.contains('price-up')) { |
| el.classList.remove('price-up'); |
| el.classList.add('price-down'); |
| el.textContent = `-${(Math.random() * 3).toFixed(2)}%`; |
| } else { |
| el.classList.remove('price-down'); |
| el.classList.add('price-up'); |
| el.textContent = `+${(Math.random() * 3).toFixed(2)}%`; |
| } |
| } else { |
| |
| const currentValue = parseFloat(el.textContent.replace(/[+-]/g, '')); |
| const change = (Math.random() * 0.5).toFixed(2); |
| if (el.classList.contains('price-up')) { |
| el.textContent = `+${(parseFloat(currentValue) + parseFloat(change)).toFixed(2)}%`; |
| } else { |
| el.textContent = `-${(parseFloat(currentValue) + parseFloat(change)).toFixed(2)}%`; |
| } |
| } |
| }); |
| |
| |
| const btcPrice = document.querySelector('tr:first-child td:nth-child(2)'); |
| const currentBtcPrice = parseFloat(btcPrice.textContent.replace(/,/g, '')); |
| const btcChange = (Math.random() * 200 - 100).toFixed(2); |
| const newBtcPrice = (currentBtcPrice + parseFloat(btcChange)).toFixed(2); |
| btcPrice.textContent = newBtcPrice.replace(/\B(?=(\d{3})+(?!\d))/g, ","); |
| } |
| |
| |
| setInterval(simulatePriceUpdates, 5000); |
| |
| |
| document.querySelectorAll('input[type="number"]').forEach(input => { |
| input.addEventListener('input', function() { |
| const parentDiv = this.closest('div.bg-slate-800'); |
| if (parentDiv) { |
| const container = parentDiv.closest('.space-y-3'); |
| if (container) { |
| const priceInput = container.querySelector('div:nth-child(1) input'); |
| const amountInput = container.querySelector('div:nth-child(2) input'); |
| const totalInput = container.querySelector('div:nth-child(3) input'); |
| |
| if (priceInput && amountInput && totalInput) { |
| const price = parseFloat(priceInput.value) || 0; |
| const amount = parseFloat(amountInput.value) || 0; |
| totalInput.value = (price * amount).toFixed(2); |
| } |
| } |
| } |
| }); |
| }); |
| |
| |
| document.querySelector('.fa-headset').closest('button').addEventListener('click', function() { |
| alert('Our support team will contact you shortly!\nEmail: support@cryptotradepro.com\nPhone: +1 (800) 123-4567'); |
| }); |
| </script> |
| |
| <script> |
| |
| function createParticles(containerId, color) { |
| const container = document.getElementById(containerId); |
| const particleCount = 15; |
| |
| for (let i = 0; i < particleCount; i++) { |
| const particle = document.createElement('div'); |
| particle.className = 'particle absolute rounded-full'; |
| particle.style.width = `${Math.random() * 4 + 2}px`; |
| particle.style.height = particle.style.width; |
| particle.style.backgroundColor = color; |
| particle.style.opacity = Math.random() * 0.5 + 0.1; |
| |
| |
| const posX = Math.random() * 100; |
| const posY = Math.random() * 100; |
| particle.style.left = `${posX}%`; |
| particle.style.top = `${posY}%`; |
| |
| |
| const duration = Math.random() * 10 + 5; |
| const delay = Math.random() * 5; |
| particle.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`; |
| |
| container.appendChild(particle); |
| } |
| } |
| |
| |
| createParticles('particles-1', '#3b82f6'); |
| createParticles('particles-2', '#8b5cf6'); |
| </script> |
| |
| <style> |
| @keyframes float { |
| 0% { transform: translate(0, 0) rotate(0deg); opacity: 0.1; } |
| 50% { transform: translate(calc((Math.random() - 0.5) * 50px), calc((Math.random() - 0.5) * 50px)) rotate(180deg); opacity: 0.7; } |
| 100% { transform: translate(0, 0) rotate(360deg); opacity: 0.1; } |
| } |
| </style> |
| <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=TDN-M/cryptapp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
