|
|
<!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: [email protected]\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> |
