|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>WifDogJoint - Social Trading Terminal</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 src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background-color: #0f172a; |
|
|
color: #e2e8f0; |
|
|
} |
|
|
|
|
|
.doge-bg { |
|
|
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); |
|
|
} |
|
|
|
|
|
.doge-accent { |
|
|
background: linear-gradient(90deg, #f59e0b 0%, #f97316 100%); |
|
|
} |
|
|
|
|
|
.doge-text { |
|
|
color: #f59e0b; |
|
|
} |
|
|
|
|
|
.terminal-bg { |
|
|
background-color: #1e293b; |
|
|
border: 1px solid #334155; |
|
|
} |
|
|
|
|
|
.chart-container { |
|
|
background-color: #1e293b; |
|
|
border-radius: 0.5rem; |
|
|
border: 1px solid #334155; |
|
|
} |
|
|
|
|
|
.tab-active { |
|
|
border-bottom: 2px solid #f59e0b; |
|
|
color: #f59e0b; |
|
|
} |
|
|
|
|
|
.orderbook-bid { |
|
|
background: linear-gradient(90deg, rgba(16, 185, 129, 0.1) 0%, transparent 100%); |
|
|
} |
|
|
|
|
|
.orderbook-ask { |
|
|
background: linear-gradient(90deg, rgba(239, 68, 68, 0.1) 0%, transparent 100%); |
|
|
} |
|
|
|
|
|
.message-self { |
|
|
background-color: #334155; |
|
|
border-radius: 1rem 1rem 0 1rem; |
|
|
} |
|
|
|
|
|
.message-other { |
|
|
background-color: #1e293b; |
|
|
border-radius: 1rem 1rem 1rem 0; |
|
|
} |
|
|
|
|
|
.indicator-active { |
|
|
color: #f59e0b; |
|
|
border-bottom: 2px solid #f59e0b; |
|
|
} |
|
|
|
|
|
.blink { |
|
|
animation: blink 1s infinite; |
|
|
} |
|
|
|
|
|
@keyframes blink { |
|
|
0% { opacity: 1; } |
|
|
50% { opacity: 0.5; } |
|
|
100% { opacity: 1; } |
|
|
} |
|
|
|
|
|
.coin-spin { |
|
|
animation: spin 4s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
0% { transform: rotateY(0deg); } |
|
|
100% { transform: rotateY(360deg); } |
|
|
} |
|
|
|
|
|
.floating-doge { |
|
|
position: fixed; |
|
|
bottom: 20px; |
|
|
right: 20px; |
|
|
animation: float 6s ease-in-out infinite; |
|
|
cursor: pointer; |
|
|
z-index: 100; |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-20px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
|
|
|
.video-chat { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
gap: 8px; |
|
|
height: 200px; |
|
|
} |
|
|
|
|
|
.video-box { |
|
|
background-color: #334155; |
|
|
border-radius: 8px; |
|
|
overflow: hidden; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.video-box::before { |
|
|
content: ""; |
|
|
display: block; |
|
|
padding-top: 100%; |
|
|
} |
|
|
|
|
|
.video-content { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
color: #94a3b8; |
|
|
} |
|
|
|
|
|
.video-user { |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
background: rgba(0,0,0,0.5); |
|
|
padding: 4px; |
|
|
font-size: 10px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.video-active { |
|
|
border: 2px solid #f59e0b; |
|
|
} |
|
|
|
|
|
.video-controls { |
|
|
position: absolute; |
|
|
bottom: 8px; |
|
|
left: 0; |
|
|
right: 0; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
gap: 8px; |
|
|
} |
|
|
|
|
|
.video-control-btn { |
|
|
background: rgba(0,0,0,0.7); |
|
|
border-radius: 50%; |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 10px; |
|
|
} |
|
|
|
|
|
.feed-switch { |
|
|
display: flex; |
|
|
border-radius: 0.5rem; |
|
|
overflow: hidden; |
|
|
background-color: #1e293b; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.feed-switch-btn { |
|
|
flex: 1; |
|
|
padding: 0.5rem; |
|
|
text-align: center; |
|
|
cursor: pointer; |
|
|
font-size: 0.875rem; |
|
|
} |
|
|
|
|
|
.feed-switch-btn.active { |
|
|
background-color: #334155; |
|
|
color: #f59e0b; |
|
|
} |
|
|
|
|
|
.hidden-feed { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.confetti { |
|
|
position: fixed; |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
border-radius: 50%; |
|
|
pointer-events: none; |
|
|
z-index: 9999; |
|
|
} |
|
|
|
|
|
.candle-up { |
|
|
background-color: #10b981; |
|
|
border-color: #10b981; |
|
|
} |
|
|
|
|
|
.candle-down { |
|
|
background-color: #ef4444; |
|
|
border-color: #ef4444; |
|
|
} |
|
|
|
|
|
.order-form { |
|
|
background-color: #1e293b; |
|
|
border-radius: 0.5rem; |
|
|
padding: 1rem; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="doge-bg"> |
|
|
|
|
|
<div class="floating-doge" onclick="createConfetti()"> |
|
|
<img src="https://i.imgur.com/9eeDlQY.png" alt="Doge" class="w-16 h-16 rounded-full border-2 border-yellow-500 shadow-lg"> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="min-h-screen flex flex-col"> |
|
|
|
|
|
<header class="border-b border-gray-800"> |
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<img src="https://i.imgur.com/9eeDlQY.png" alt="Doge" class="w-10 h-10 rounded-full border-2 border-yellow-500"> |
|
|
<h1 class="text-2xl font-bold doge-text">WifDogJoint</h1> |
|
|
</div> |
|
|
|
|
|
<div class="hidden md:flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<select class="bg-gray-800 text-white px-4 py-2 rounded-lg appearance-none pr-8"> |
|
|
<option>BTC/USDT</option> |
|
|
<option>ETH/USDT</option> |
|
|
<option>SOL/USDT</option> |
|
|
<option>WIF/USDT</option> |
|
|
<option>DOGE/USDT</option> |
|
|
</select> |
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"> |
|
|
<i class="fas fa-chevron-down text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-2 bg-gray-800 px-3 py-1 rounded-lg"> |
|
|
<span class="text-green-400 font-mono">$69,420.42</span> |
|
|
<span class="text-xs text-green-400">+4.20%</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-2"> |
|
|
<button class="bg-gray-800 text-gray-400 hover:text-yellow-500 p-2 rounded-lg"> |
|
|
<i class="fas fa-bell"></i> |
|
|
</button> |
|
|
<button class="bg-gray-800 text-gray-400 hover:text-yellow-500 p-2 rounded-lg"> |
|
|
<i class="fas fa-envelope"></i> |
|
|
</button> |
|
|
<button class="bg-gray-800 text-gray-400 hover:text-yellow-500 p-2 rounded-lg"> |
|
|
<i class="fas fa-cog"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<button class="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-lg font-medium"> |
|
|
<i class="fas fa-wallet mr-2"></i> Connect |
|
|
</button> |
|
|
<button class="md:hidden text-gray-400 ml-2"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="flex flex-1 overflow-hidden"> |
|
|
|
|
|
<div class="hidden lg:block w-64 border-r border-gray-800 overflow-y-auto"> |
|
|
|
|
|
<div class="p-4"> |
|
|
<div class="flex justify-between items-center mb-3"> |
|
|
<h2 class="font-medium">Portfolio</h2> |
|
|
<div class="text-xs text-gray-400">$42,690.42</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 rounded-lg p-4 mb-4"> |
|
|
<div class="flex justify-between mb-3"> |
|
|
<div class="text-sm">Total Balance</div> |
|
|
<div class="font-mono">$42,690.42</div> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs text-gray-400 mb-1"> |
|
|
<div>Available</div> |
|
|
<div>$12,345.67</div> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs text-gray-400"> |
|
|
<div>In Orders</div> |
|
|
<div>$30,344.75</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="order-form"> |
|
|
<div class="flex mb-4"> |
|
|
<button id="buy-btn" class="flex-1 py-2 bg-green-900 bg-opacity-30 text-green-400 font-medium rounded-l-lg"> |
|
|
Buy |
|
|
</button> |
|
|
<button id="sell-btn" class="flex-1 py-2 bg-red-900 bg-opacity-30 text-red-400 font-medium rounded-r-lg"> |
|
|
Sell |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-3"> |
|
|
<div> |
|
|
<label class="block text-xs text-gray-400 mb-1">Order Type</label> |
|
|
<select class="w-full bg-gray-800 text-white p-2 rounded-lg text-sm"> |
|
|
<option>Limit</option> |
|
|
<option>Market</option> |
|
|
<option>Stop Limit</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-xs text-gray-400 mb-1">Price (USDT)</label> |
|
|
<input type="text" class="w-full bg-gray-800 text-white p-2 rounded-lg text-sm" value="69,420.42"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-xs text-gray-400 mb-1">Amount (BTC)</label> |
|
|
<input type="text" class="w-full bg-gray-800 text-white p-2 rounded-lg text-sm" value="0.1"> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-4 gap-2"> |
|
|
<button class="bg-gray-800 text-xs p-1 rounded">25%</button> |
|
|
<button class="bg-gray-800 text-xs p-1 rounded">50%</button> |
|
|
<button class="bg-gray-800 text-xs p-1 rounded">75%</button> |
|
|
<button class="bg-gray-800 text-xs p-1 rounded">100%</button> |
|
|
</div> |
|
|
|
|
|
<div class="pt-2"> |
|
|
<button id="place-order-btn" class="w-full bg-green-600 text-white py-2 rounded-lg font-medium"> |
|
|
Buy BTC |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="flex justify-between items-center mb-3"> |
|
|
<h2 class="font-medium">Watchlist</h2> |
|
|
<button class="text-gray-400 hover:text-yellow-500"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-2"> |
|
|
<div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg cursor-pointer"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="BTC" class="w-6 h-6 mr-3"> |
|
|
<div> |
|
|
<div class="font-medium">BTC/USDT</div> |
|
|
<div class="text-xs text-gray-400">Bitcoin</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<div class="font-mono">$69,420</div> |
|
|
<div class="text-xs text-green-400">+4.2%</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg cursor-pointer"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" alt="ETH" class="w-6 h-6 mr-3"> |
|
|
<div> |
|
|
<div class="font-medium">ETH/USDT</div> |
|
|
<div class="text-xs text-gray-400">Ethereum</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<div class="font-mono">$3,690</div> |
|
|
<div class="text-xs text-green-400">+2.3%</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg cursor-pointer"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://cryptologos.cc/logos/solana-sol-logo.png" alt="SOL" class="w-6 h-6 mr-3"> |
|
|
<div> |
|
|
<div class="font-medium">SOL/USDT</div> |
|
|
<div class="text-xs text-gray-400">Solana</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<div class="font-mono">$142.42</div> |
|
|
<div class="text-xs text-red-400">-1.5%</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg cursor-pointer"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://cryptologos.cc/logos/wif-dogwifhat-logo.png" alt="WIF" class="w-6 h-6 mr-3"> |
|
|
<div> |
|
|
<div class="font-medium">WIF/USDT</div> |
|
|
<div class="text-xs text-gray-400">dogwifhat</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<div class="font-mono">$2.34</div> |
|
|
<div class="text-xs text-green-400">+8.9%</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg cursor-pointer"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://cryptologos.cc/logos/dogecoin-doge-logo.png" alt="DOGE" class="w-6 h-6 mr-3"> |
|
|
<div> |
|
|
<div class="font-medium">DOGE/USDT</div> |
|
|
<div class="text-xs text-gray-400">Dogecoin</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<div class="font-mono">$0.16</div> |
|
|
<div class="text-xs text-red-400">-1.2%</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden"> |
|
|
|
|
|
<div class="flex-1 p-4 overflow-hidden"> |
|
|
<div class="h-full flex flex-col"> |
|
|
|
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 bg-gray-800 rounded-lg text-sm hover:bg-gray-700"> |
|
|
1m |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-gray-800 rounded-lg text-sm hover:bg-gray-700"> |
|
|
5m |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-gray-800 rounded-lg text-sm hover:bg-gray-700"> |
|
|
15m |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-yellow-600 rounded-lg text-sm"> |
|
|
1h |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-gray-800 rounded-lg text-sm hover:bg-gray-700"> |
|
|
4h |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-gray-800 rounded-lg text-sm hover:bg-gray-700"> |
|
|
1d |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 bg-gray-800 rounded-lg text-sm hover:bg-gray-700"> |
|
|
<i class="fas fa-ruler-combined"></i> |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-gray-800 rounded-lg text-sm hover:bg-gray-700"> |
|
|
<i class="fas fa-sliders-h"></i> |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-gray-800 rounded-lg text-sm hover:bg-gray-700"> |
|
|
<i class="fas fa-cog"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex space-x-4 mb-4 overflow-x-auto pb-2"> |
|
|
<button id="sma-btn" class="px-3 py-1 text-sm whitespace-nowrap indicator-active" onclick="updateChart('sma')"> |
|
|
SMA |
|
|
</button> |
|
|
<button id="ema-btn" class="px-3 py-1 text-sm whitespace-nowrap hover:text-yellow-500" onclick="updateChart('ema')"> |
|
|
EMA |
|
|
</button> |
|
|
<button id="rsi-btn" class="px-3 py-1 text-sm whitespace-nowrap hover:text-yellow-500" onclick="updateChart('rsi')"> |
|
|
RSI |
|
|
</button> |
|
|
<button id="macd-btn" class="px-3 py-1 text-sm whitespace-nowrap hover:text-yellow-500" onclick="updateChart('macd')"> |
|
|
MACD |
|
|
</button> |
|
|
<button id="bollinger-btn" class="px-3 py-1 text-sm whitespace-nowrap hover:text-yellow-500" onclick="updateChart('bollinger')"> |
|
|
Bollinger |
|
|
</button> |
|
|
<button id="volume-btn" class="px-3 py-1 text-sm whitespace-nowrap hover:text-yellow-500" onclick="updateChart('volume')"> |
|
|
Volume |
|
|
</button> |
|
|
<button id="fibonacci-btn" class="px-3 py-1 text-sm whitespace-nowrap hover:text-yellow-500" onclick="updateChart('fibonacci')"> |
|
|
Fibonacci |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 chart-container"> |
|
|
<canvas id="priceChart"></canvas> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="h-32 mt-4 chart-container overflow-y-auto"> |
|
|
<div class="divide-y divide-gray-800"> |
|
|
|
|
|
<div class="grid grid-cols-3 text-xs text-gray-400 p-2 sticky top-0 bg-gray-800"> |
|
|
<div>Price (USDT)</div> |
|
|
<div class="text-right">Size (BTC)</div> |
|
|
<div class="text-right">Total</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="divide-y divide-gray-800"> |
|
|
<div class="grid grid-cols-3 text-xs p-1 orderbook-ask"> |
|
|
<div class="text-red-400">69,500.12</div> |
|
|
<div class="text-right">0.42</div> |
|
|
<div class="text-right">29,190.05</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-3 text-xs p-1 orderbook-ask"> |
|
|
<div class="text-red-400">69,480.34</div> |
|
|
<div class="text-right">0.84</div> |
|
|
<div class="text-right">58,363.49</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-3 text-xs p-1 orderbook-ask"> |
|
|
<div class="text-red-400">69,450.78</div> |
|
|
<div class="text-right">1.26</div> |
|
|
<div class="text-right">87,507.98</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-2 text-center sticky top-8 bg-gray-800"> |
|
|
<div class="text-lg font-mono text-yellow-500">69,420.42</div> |
|
|
<div class="text-xs text-green-400">+4.20%</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="divide-y divide-gray-800"> |
|
|
<div class="grid grid-cols-3 text-xs p-1 orderbook-bid"> |
|
|
<div class="text-green-400">69,420.42</div> |
|
|
<div class="text-right">0.69</div> |
|
|
<div class="text-right">47,900.09</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-3 text-xs p-1 orderbook-bid"> |
|
|
<div class="text-green-400">69,400.15</div> |
|
|
<div class="text-right">1.23</div> |
|
|
<div class="text-right">85,362.18</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-3 text-xs p-1 orderbook-bid"> |
|
|
<div class="text-green-400">69,380.76</div> |
|
|
<div class="text-right">2.10</div> |
|
|
<div class="text-right">145,699.60</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border-t border-gray-800"> |
|
|
<div class="flex"> |
|
|
<button class="px-4 py-2 text-sm font-medium tab-active"> |
|
|
Trades |
|
|
</button> |
|
|
<button class="px-4 py-2 text-sm font-medium text-gray-400 hover:text-yellow-500"> |
|
|
Positions |
|
|
</button> |
|
|
<button class="px-4 py-2 text-sm font-medium text-gray-400 hover:text-yellow-500"> |
|
|
Orders |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="h-48 overflow-y-auto"> |
|
|
<div class="divide-y divide-gray-800"> |
|
|
|
|
|
<div class="grid grid-cols-4 text-xs p-2 hover:bg-gray-800"> |
|
|
<div class="text-green-400">Buy</div> |
|
|
<div>69,420.42</div> |
|
|
<div>0.1 BTC</div> |
|
|
<div class="text-right">2 min ago</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-4 text-xs p-2 hover:bg-gray-800"> |
|
|
<div class="text-red-400">Sell</div> |
|
|
<div>69,425.15</div> |
|
|
<div>0.05 BTC</div> |
|
|
<div class="text-right">5 min ago</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-4 text-xs p-2 hover:bg-gray-800"> |
|
|
<div class="text-green-400">Buy</div> |
|
|
<div>69,415.78</div> |
|
|
<div>0.2 BTC</div> |
|
|
<div class="text-right">12 min ago</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-4 text-xs p-2 hover:bg-gray-800"> |
|
|
<div class="text-red-400">Sell</div> |
|
|
<div>69,430.10</div> |
|
|
<div>0.15 BTC</div> |
|
|
<div class="text-right">25 min ago</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-4 text-xs p-2 hover:bg-gray-800"> |
|
|
<div class="text-green-400">Buy</div> |
|
|
<div>69,410.50</div> |
|
|
<div>0.3 BTC</div> |
|
|
<div class="text-right">42 min ago</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hidden lg:block w-1/3 border-l border-gray-800 overflow-y-auto"> |
|
|
<div class="p-4"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-lg font-semibold">Social Feed</h2> |
|
|
<button class="text-yellow-500 hover:text-yellow-400"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feed-switch"> |
|
|
<button class="feed-switch-btn active" onclick="switchFeed('posts')">Posts</button> |
|
|
<button class="feed-switch-btn" onclick="switchFeed('chat')">Chat</button> |
|
|
<button class="feed-switch-btn" onclick="switchFeed('video')">Video</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="posts-feed"> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="flex items-start space-x-3"> |
|
|
<img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-10 h-10 rounded-full"> |
|
|
<div class="flex-1"> |
|
|
<textarea class="w-full bg-gray-800 text-white p-3 rounded-lg border border-gray-700 focus:outline-none focus:border-yellow-500" rows="2" placeholder="Share your trade idea..."></textarea> |
|
|
<div class="flex justify-between items-center mt-2"> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-gray-400 hover:text-yellow-500 p-1"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</button> |
|
|
<button class="text-gray-400 hover:text-yellow-500 p-1"> |
|
|
<i class="fas fa-image"></i> |
|
|
</button> |
|
|
<button class="text-gray-400 hover:text-yellow-500 p-1"> |
|
|
<i class="fas fa-gift"></i> |
|
|
</button> |
|
|
</div> |
|
|
<button class="bg-yellow-600 hover:bg-yellow-700 text-white px-3 py-1 rounded-lg text-sm"> |
|
|
Post |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-4"> |
|
|
|
|
|
<div class="terminal-bg p-4 rounded-lg"> |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-8 h-8 rounded-full"> |
|
|
<div> |
|
|
<span class="font-medium">DiamondPaws</span> |
|
|
<span class="text-xs text-gray-400 ml-1">@DiamondPaws · 2h</span> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-gray-400 hover:text-yellow-500"> |
|
|
<i class="fas fa-ellipsis-h"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<p class="mb-3">Just entered a long position on $WIF at $2.30. Chart looks bullish with strong support at $2.00. Target $3.50 🚀</p> |
|
|
|
|
|
<div class="bg-gray-800 rounded-lg p-3 mb-3"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://cryptologos.cc/logos/wif-dogwifhat-logo.png" alt="WIF" class="w-6 h-6 mr-2"> |
|
|
<span class="font-medium">WIF/USDT</span> |
|
|
</div> |
|
|
<div class="text-green-400 font-mono text-sm">$2.34 (+8.9%)</div> |
|
|
</div> |
|
|
<div class="h-24 bg-gray-900 rounded mb-2"></div> |
|
|
<div class="flex justify-between text-xs text-gray-400"> |
|
|
<span>Entry: $2.30</span> |
|
|
<span>Target: $3.50</span> |
|
|
<span>Stop: $2.00</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between text-sm text-gray-400"> |
|
|
<button class="flex items-center hover:text-yellow-500"> |
|
|
<i class="far fa-comment mr-1"></i> 12 |
|
|
</button> |
|
|
<button class="flex items-center hover:text-green-500"> |
|
|
<i class="fas fa-retweet mr-1"></i> 24 |
|
|
</button> |
|
|
<button class="flex items-center hover:text-red-500"> |
|
|
<i class="far fa-heart mr-1"></i> 89 |
|
|
</button> |
|
|
<button class="flex items-center hover:text-blue-400"> |
|
|
<i class="fas fa-share-alt mr-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="terminal-bg p-4 rounded-lg"> |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-8 h-8 rounded-full"> |
|
|
<div> |
|
|
<span class="font-medium">WhaleHunter</span> |
|
|
<span class="text-xs text-gray-400 ml-1">@WhaleHunter · 4h</span> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-gray-400 hover:text-yellow-500"> |
|
|
<i class="fas fa-ellipsis-h"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<p class="mb-3">Shorting $BTC at $69,500. RSI showing divergence on 4H chart. Target $65,000 with stop at $71,000.</p> |
|
|
|
|
|
<div class="bg-gray-800 rounded-lg p-3 mb-3"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="BTC" class="w-6 h-6 mr-2"> |
|
|
<span class="font-medium">BTC/USDT</span> |
|
|
</div> |
|
|
<div class="text-red-400 font-mono text-sm">$69,420 (-1.2%)</div> |
|
|
</div> |
|
|
<div class="h-24 bg-gray-900 rounded mb-2"></div> |
|
|
<div class="flex justify-between text-xs text-gray-400"> |
|
|
<span>Entry: $69,500</span> |
|
|
<span>Target: $65,000</span> |
|
|
<span>Stop: $71,000</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between text-sm text-gray-400"> |
|
|
<button class="flex items-center hover:text-yellow-500"> |
|
|
<i class="far fa-comment mr-1"></i> 8 |
|
|
</button> |
|
|
<button class="flex items-center hover:text-green-500"> |
|
|
<i class="fas fa-retweet mr-1"></i> 15 |
|
|
</button> |
|
|
<button class="flex items-center hover:text-red-500"> |
|
|
<i class="far fa-heart mr-1"></i> 42 |
|
|
</button> |
|
|
<button class="flex items-center hover:text-blue-400"> |
|
|
<i class="fas fa-share-alt mr-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="chat-feed" class="hidden-feed"> |
|
|
<div class="flex flex-col h-full"> |
|
|
<div class="flex-1 overflow-y-auto p-3 space-y-3"> |
|
|
|
|
|
<div class="flex items-start space-x-2"> |
|
|
<img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-8 h-8 rounded-full"> |
|
|
<div class="message-other p-2 max-w-xs"> |
|
|
<div class="text-xs font-medium">DogeTrader</div> |
|
|
<p class="text-sm">Just went long at $69,200. Bullish divergence on RSI</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-start space-x-2 justify-end"> |
|
|
<div class="message-self p-2 max-w-xs"> |
|
|
<div class="text-xs font-medium text-right">You</div> |
|
|
<p class="text-sm">I'm waiting for a retest of $69,000 support</p> |
|
|
</div> |
|
|
<img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-8 h-8 rounded-full"> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-start space-x-2"> |
|
|
<img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-8 h-8 rounded-full"> |
|
|
<div class="message-other p-2 max-w-xs"> |
|
|
<div class="text-xs font-medium">CryptoWolf</div> |
|
|
<p class="text-sm">Volume picking up, breakout incoming</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-start space-x-2"> |
|
|
<img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-8 h-8 rounded-full"> |
|
|
<div class="message-other p-2 max-w-xs"> |
|
|
<div class="text-xs font-medium">MoonLambo</div> |
|
|
<p class="text-sm">Just added to my position at $69,300 🚀</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-3 border-t border-gray-800"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<input type="text" class="flex-1 bg-gray-800 text-white p-2 rounded-lg text-sm" placeholder="Type a message..."> |
|
|
<button class="text-yellow-500 hover:text-yellow-400 p-2"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="video-feed" class="hidden-feed"> |
|
|
<div class="mb-6"> |
|
|
<div class="video-chat mb-3"> |
|
|
<div class="video-box video-active"> |
|
|
<div class="video-content"> |
|
|
<i class="fas fa-user fa-2x"></i> |
|
|
<div class="video-user">You</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="video-box"> |
|
|
<div class="video-content"> |
|
|
<i class="fas fa-user fa-2x"></i> |
|
|
<div class="video-user">DogeTrader</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="video-box"> |
|
|
<div class="video-content"> |
|
|
<i class="fas fa-user fa-2x"></i> |
|
|
<div class="video-user">CryptoWolf</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="video-box"> |
|
|
<div class="video-content"> |
|
|
<i class="fas fa-user fa-2x"></i> |
|
|
<div class="video-user">MoonLambo</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-center space-x-4"> |
|
|
<button class="bg-gray-800 text-white p-2 rounded-full hover:bg-gray-700"> |
|
|
<i class="fas fa-microphone"></i> |
|
|
</button> |
|
|
<button class="bg-red-500 text-white p-2 rounded-full hover:bg-red-600"> |
|
|
<i class="fas fa-phone"></i> |
|
|
</button> |
|
|
<button class="bg-gray-800 text-white p-2 rounded-full hover:bg-gray-700"> |
|
|
<i class="fas fa-video"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="terminal-bg rounded-lg"> |
|
|
<div class="flex-1 overflow-y-auto p-3 space-y-3 max-h-64"> |
|
|
|
|
|
<div class="flex items-start space-x-2"> |
|
|
<img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-6 h-6 rounded-full"> |
|
|
<div class="message-other p-2 max-w-xs"> |
|
|
<div class="text-xs font-medium">DogeTrader</div> |
|
|
<p class="text-sm">Just went long at $69,200. Bullish divergence on RSI</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-start space-x-2 justify-end"> |
|
|
<div class="message-self p-2 max-w-xs"> |
|
|
<div class="text-xs font-medium text-right">You</div> |
|
|
<p class="text-sm">I'm waiting for a retest of $69,000 support</p> |
|
|
</div> |
|
|
<img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-6 h-6 rounded-full"> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-start space-x-2"> |
|
|
<img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-6 h-6 rounded-full"> |
|
|
<div class="message-other p-2 max-w-xs"> |
|
|
<div class="text-xs font-medium">CryptoWolf</div> |
|
|
<p class="text-sm">Volume picking up, breakout incoming</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-3 border-t border-gray-800"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<input type="text" class="flex-1 bg-gray-800 text-white p-2 rounded-lg text-sm" placeholder="Type a message..."> |
|
|
<button class="text-yellow-500 hover:text-yellow-400 p-2"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
let priceChart; |
|
|
let candleChart; |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const priceCtx = document.getElementById('priceChart').getContext('2d'); |
|
|
priceChart = new Chart(priceCtx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: Array.from({length: 24}, (_, i) => i + ':00'), |
|
|
datasets: [{ |
|
|
label: 'BTC/USDT', |
|
|
data: [69000, 69120, 69250, 69300, 69200, 69150, 69250, 69350, |
|
|
69420, 69350, 69300, 69250, 69200, 69150, 69100, 69050, |
|
|
69000, 69050, 69100, 69150, 69200, 69250, 69300, 69420], |
|
|
borderColor: '#f59e0b', |
|
|
borderWidth: 2, |
|
|
fill: false, |
|
|
tension: 0.1 |
|
|
}, |
|
|
{ |
|
|
label: 'SMA 20', |
|
|
data: [68900, 68950, 69000, 69050, 69100, 69120, 69150, 69180, |
|
|
69200, 69220, 69230, 69240, 69250, 69260, 69270, 69280, |
|
|
69290, 69300, 69310, 69320, 69330, 69340, 69350, 69400], |
|
|
borderColor: '#3b82f6', |
|
|
borderWidth: 1, |
|
|
fill: false, |
|
|
tension: 0.1 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
x: { |
|
|
grid: { |
|
|
color: 'rgba(255, 255, 255, 0.05)' |
|
|
}, |
|
|
ticks: { |
|
|
color: '#94a3b8' |
|
|
} |
|
|
}, |
|
|
y: { |
|
|
grid: { |
|
|
color: 'rgba(255, 255, 255, 0.05)' |
|
|
}, |
|
|
ticks: { |
|
|
color: '#94a3b8' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const buyBtn = document.getElementById('buy-btn'); |
|
|
const sellBtn = document.getElementById('sell-btn'); |
|
|
const placeOrderBtn = document.getElementById('place-order-btn'); |
|
|
|
|
|
buyBtn.addEventListener('click', function() { |
|
|
buyBtn.classList.add('bg-green-600', 'text-white'); |
|
|
buyBtn.classList.remove('bg-green-900', 'bg-opacity-30', 'text-green-400'); |
|
|
sellBtn.classList.add('bg-red-900', 'bg-opacity-30', 'text-red-400'); |
|
|
sellBtn.classList.remove('bg-red-600', 'text-white'); |
|
|
placeOrderBtn.classList.add('bg-green-600'); |
|
|
placeOrderBtn.classList.remove('bg-red-600'); |
|
|
placeOrderBtn.textContent = 'Buy BTC'; |
|
|
}); |
|
|
|
|
|
sellBtn.addEventListener('click', function() { |
|
|
sellBtn.classList.add('bg-red-600', 'text-white'); |
|
|
sellBtn.classList.remove('bg-red-900', 'bg-opacity-30', 'text-red-400'); |
|
|
buyBtn.classList.add('bg-green-900', 'bg-opacity-30', 'text-green-400'); |
|
|
buyBtn.classList.remove('bg-green-600', 'text-white'); |
|
|
placeOrderBtn.classList.add('bg-red-600'); |
|
|
placeOrderBtn.classList.remove('bg-green-600'); |
|
|
placeOrderBtn.textContent = 'Sell BTC'; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function createConfetti() { |
|
|
const colors = ['#FFD700', '#FFA500', '#FF6347', '#FF69B4', '#9370DB', '#00FF7F', '#1E90FF']; |
|
|
|
|
|
for (let i = 0; i < 100; i++) { |
|
|
const confetti = document.createElement('div'); |
|
|
confetti.className = 'confetti'; |
|
|
confetti.style.left = Math.random() * window.innerWidth + 'px'; |
|
|
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; |
|
|
confetti.style.transform = 'rotate(' + Math.random() * 360 + 'deg)'; |
|
|
|
|
|
document.body.appendChild(confetti); |
|
|
|
|
|
const animationDuration = Math.random() * 3 + 2; |
|
|
|
|
|
confetti.style.animation = `fall ${animationDuration}s linear forwards`; |
|
|
|
|
|
|
|
|
const style = document.createElement('style'); |
|
|
style.innerHTML = ` |
|
|
@keyframes fall { |
|
|
0% { |
|
|
transform: translateY(-100vh) rotate(0deg); |
|
|
opacity: 1; |
|
|
} |
|
|
100% { |
|
|
transform: translateY(100vh) rotate(360deg); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
`; |
|
|
document.head.appendChild(style); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
confetti.remove(); |
|
|
style.remove(); |
|
|
}, animationDuration * 1000); |
|
|
} |
|
|
|
|
|
|
|
|
const audio = new Audio('https://www.myinstants.com/media/sounds/doge-sound.mp3'); |
|
|
audio.play().catch(e => console.log("Audio play failed:", e)); |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
const dogeLogo = document.querySelector('header img'); |
|
|
if (dogeLogo) { |
|
|
dogeLogo.addEventListener('mouseenter', () => { |
|
|
dogeLogo.classList.add('coin-spin'); |
|
|
}); |
|
|
dogeLogo.addEventListener('mouseleave', () => { |
|
|
dogeLogo.classList.remove('coin-spin'); |
|
|
}); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function switchFeed(feedType) { |
|
|
|
|
|
document.getElementById('posts-feed').classList.add('hidden-feed'); |
|
|
document.getElementById('chat-feed').classList.add('hidden-feed'); |
|
|
document.getElementById('video-feed').classList.add('hidden-feed'); |
|
|
|
|
|
|
|
|
document.getElementById(feedType + '-feed').classList.remove('hidden-feed'); |
|
|
|
|
|
|
|
|
const buttons = document.querySelectorAll('.feed-switch-btn'); |
|
|
buttons.forEach(btn => { |
|
|
btn.classList.remove('active'); |
|
|
if (btn.textContent.toLowerCase() === feedType) { |
|
|
btn.classList.add('active'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function updateChart(indicator) { |
|
|
const priceCtx = document.getElementById('priceChart').getContext('2d'); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.indicator-active').forEach(btn => { |
|
|
btn.classList.remove('indicator-active'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById(indicator + '-btn').classList.add('indicator-active'); |
|
|
|
|
|
|
|
|
if (priceChart) { |
|
|
priceChart.destroy(); |
|
|
} |
|
|
|
|
|
|
|
|
if (indicator === 'bollinger') { |
|
|
|
|
|
priceChart = new Chart(priceCtx, { |
|
|
type: 'candlestick', |
|
|
data: { |
|
|
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20'], |
|
|
datasets: [ |
|
|
{ |
|
|
label: 'BTC/USDT', |
|
|
data: [ |
|
|
{o: 69000, h: 69200, l: 68950, c: 69150}, |
|
|
{o: 69150, h: 69300, l: 69050, c: 69250}, |
|
|
{o: 69250, h: 69350, l: 69100, c: 69300}, |
|
|
{o: 69300, h: 69400, l: 69150, c: 69200}, |
|
|
{o: 69200, h: 69300, l: 69100, c: 69250}, |
|
|
{o: 69250, h: 69420, l: 69150, c: 69350}, |
|
|
{o: 69350, h: 69450, l: 69200, c: 69300}, |
|
|
{o: 69300, h: 69400, l: 69150, c: 69250}, |
|
|
{o: 69250, h: 69350, l: 69100, c: 69200}, |
|
|
{o: 69200, h: 69300, l: 69050, c: 69150}, |
|
|
{o: 69150, h: 69250, l: 69000, c: 69100}, |
|
|
{o: 69100, h: 69200, l: 68950, c: 69050}, |
|
|
{o: 69050, h: 69150, l: 68900, c: 69000}, |
|
|
{o: 69000, h: 69100, l: 68850, c: 68950}, |
|
|
{o: 68950, h: 69050, l: 68800, c: 68900}, |
|
|
{o: 68900, h: 69000, l: 68750, c: 68850}, |
|
|
{o: 68850, h: 68950, l: 68700, c: 68800}, |
|
|
{o: 68800, h: 68900, l: 68650, c: 68750}, |
|
|
{o: 68750, h: 68850, l: 68600, c: 68700}, |
|
|
{o: 68700, h: 68800 |
|
|
</html> |
