|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>WifJoint.dog - 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"> |
|
|
<link rel="stylesheet" href="styles.css"> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-financial@0.1.0/dist/chartjs-chart-financial.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/date-fns@2.29.3/index.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@2.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script> |
|
|
<script src="main.js"></script> |
|
|
<link rel="icon" href="favicon.ico" type="image/x-icon"> |
|
|
</head> |
|
|
<body class="doge-bg"> |
|
|
|
|
|
|
|
|
<div class="min-h-screen flex flex-col"> |
|
|
|
|
|
<header id="top-header" class="bg-gray-900 border-b border-pink-500"> |
|
|
<div class="px-4 py-3 flex justify-between items-center"> |
|
|
|
|
|
<div class="flex items-center space-x-3"> |
|
|
<img src="lawl.webp" alt="Doge" class="w-10 h-10 rounded-full border-2 border-yellow-500 rounded-image logo-hover-effect"> |
|
|
<div> |
|
|
<h1 class="text-2xl font-bold doge-text">WifJoint.dog</h1> |
|
|
<div class="text-xs text-white">Social Trading Terminal</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-center space-x-6 bg-gray-800 rounded-lg p-2"> |
|
|
|
|
|
<div class="relative"> |
|
|
<select class="bg-gray-800 text-white px-4 py-2 rounded-lg appearance-none pr-8 text-base"> |
|
|
<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-muted"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-baseline space-x-2"> |
|
|
<span id="latest-price-header" class="text-green-mono font-mono text-lg">$69,420.42</span> |
|
|
<span id="latest-price-change-header" class="text-xs text-green-mono">+4.20%</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-3 border-l border-gray-700 pl-3 ml-3"> |
|
|
<div class="text-sm text-muted"> |
|
|
<div>Available</div> |
|
|
<div>In Orders</div> |
|
|
</div> |
|
|
<div class="text-sm text-right font-mono"> |
|
|
<div>$12,345.67</div> |
|
|
<div>$30,344.75</div> |
|
|
</div> |
|
|
<div class="text-sm text-muted pl-3">Total Balance</div> |
|
|
<div class="font-mono text-base">$42,690.42</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-center space-x-2"> |
|
|
|
|
|
<div class="flex space-x-2"> |
|
|
<button class="btn-solana-secondary p-2"> |
|
|
<i class="fas fa-bell"></i> |
|
|
</button> |
|
|
<button class="btn-solana-secondary p-2"> |
|
|
<i class="fas fa-envelope"></i> |
|
|
</button> |
|
|
<button class="btn-solana-secondary p-2"> |
|
|
<i class="fas fa-cog"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<button class="btn-solana px-4 py-2 font-medium"> |
|
|
<i class="fas fa-wallet mr-2"></i> Connect |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div id="main-content-container" class="flex flex-1 overflow-hidden"> |
|
|
|
|
|
<div id="left-sidebar" class="hidden lg:block w-64 border-r border-pink-500 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="order-form"> |
|
|
<div id="order-form-toggle" 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> |
|
|
</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 class="mt-6"> |
|
|
<div id="watchlist-header" 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 id="watchlist-btc-price" 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 id="main-terminal" class="flex-1 flex flex-col overflow-hidden min-w-0 border-r border-pink-500"> |
|
|
|
|
|
<div id="chart-area" class="pt-4 px-4 overflow-hidden"> |
|
|
<div class="h-full flex flex-col"> |
|
|
|
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
|
|
|
<div class="flex items-center space-x-2"> |
|
|
|
|
|
<button class="px-3 py-1 btn-solana-secondary text-sm">1m</button> |
|
|
<button class="px-3 py-1 btn-solana-secondary text-sm">5m</button> |
|
|
<button class="px-3 py-1 btn-solana-secondary text-sm">15m</button> |
|
|
<button class="px-3 py-1 text-sm btn-solana-secondary" style="background-color: #DC1FFF; color: white;">1h</button> |
|
|
<button class="px-3 py-1 btn-solana-secondary text-sm">4h</button> |
|
|
<button class="px-3 py-1 btn-solana-secondary text-sm">1d</button> |
|
|
|
|
|
|
|
|
<div class="relative inline-block text-left" id="indicators-dropdown"> |
|
|
<button type="button" class="inline-flex justify-center w-full shadow-sm px-3 py-1 text-sm font-medium focus:outline-none btn-solana-secondary" id="indicators-menu-button" aria-expanded="false" aria-haspopup="true" onclick="toggleDropdown('indicators-menu')"> |
|
|
Indicators |
|
|
<svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> |
|
|
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /> |
|
|
</svg> |
|
|
</button> |
|
|
|
|
|
<div id="indicators-menu" class="origin-top-left absolute left-0 mt-2 w-40 rounded-md shadow-lg bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none hidden z-10" role="menu" aria-orientation="vertical" aria-labelledby="indicators-menu-button" tabindex="-1"> |
|
|
<div class="py-1" role="none"> |
|
|
<button id="sma-btn" class="block w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-white indicator-active" role="menuitem" tabindex="-1" onclick="updateChart('sma'); closeDropdown('indicators-menu');">SMA</button> |
|
|
<button id="ema-btn" class="block w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-white" role="menuitem" tabindex="-1" onclick="updateChart('ema'); closeDropdown('indicators-menu');">EMA</button> |
|
|
<button id="rsi-btn" class="block w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-white" role="menuitem" tabindex="-1" onclick="updateChart('rsi'); closeDropdown('indicators-menu');">RSI</button> |
|
|
<button id="macd-btn" class="block w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-white" role="menuitem" tabindex="-1" onclick="updateChart('macd'); closeDropdown('indicators-menu');">MACD</button> |
|
|
<button id="bollinger-btn" class="block w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-white" role="menuitem" tabindex="-1" onclick="updateChart('bollinger'); closeDropdown('indicators-menu');">Bollinger</button> |
|
|
<button id="volume-btn" class="block w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-white" role="menuitem" tabindex="-1" onclick="updateChart('volume'); closeDropdown('indicators-menu');">Volume</button> |
|
|
<button id="fibonacci-btn" class="block w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-white" role="menuitem" tabindex="-1" onclick="updateChart('fibonacci'); closeDropdown('indicators-menu');">Fibonacci</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 btn-solana-secondary text-sm"> |
|
|
<i class="fas fa-ruler-combined"></i> |
|
|
</button> |
|
|
<button class="px-3 py-1 btn-solana-secondary text-sm"> |
|
|
<i class="fas fa-sliders-h"></i> |
|
|
</button> |
|
|
<button class="px-3 py-1 btn-solana-secondary text-sm"> |
|
|
<i class="fas fa-cog"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="main-chart-container chart-container"> |
|
|
<canvas id="candleChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="bottom-panel" class="border-t border-pink-500 bottom-panel-container"> |
|
|
<div id="bottom-panel-tabs" class="h-full flex items-center px-4 space-x-4"> |
|
|
<button class="text-sm font-medium py-2 tab-active"> |
|
|
Trades |
|
|
</button> |
|
|
<button class="text-sm font-medium py-2"> |
|
|
Positions |
|
|
</button> |
|
|
<button class="text-sm font-medium py-2"> |
|
|
Orders |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div id="tab-content" class="p-4 overflow-y-auto"> |
|
|
|
|
|
|
|
|
<div class="space-y-1 text-sm"> |
|
|
<div class="grid grid-cols-4 gap-4 font-mono"> |
|
|
<span class="text-green-400">Buy</span> |
|
|
<span>69,420.42</span> |
|
|
<span>0.1 BTC</span> |
|
|
<span class="text-gray-400 text-right">2 min ago</span> |
|
|
</div> |
|
|
<div class="grid grid-cols-4 gap-4 font-mono"> |
|
|
<span class="text-red-400">Sell</span> |
|
|
<span>69,425.15</span> |
|
|
<span>0.05 BTC</span> |
|
|
<span class="text-gray-400 text-right">5 min ago</span> |
|
|
</div> |
|
|
<div class="grid grid-cols-4 gap-4 font-mono"> |
|
|
<span class="text-green-400">Buy</span> |
|
|
<span>69,415.78</span> |
|
|
<span>0.2 BTC</span> |
|
|
<span class="text-gray-400 text-right">12 min ago</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="right-sidebar" class="hidden lg:block w-1/3 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> |
|
|
</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 class="feed-container flex-1 relative"> |
|
|
|
|
|
<div id="posts-feed" class="absolute inset-0 overflow-y-auto"> |
|
|
|
|
|
<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 btn-solana-secondary"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</button> |
|
|
<button class="text-gray-400 hover:text-yellow-500 p-1 btn-solana-secondary"> |
|
|
<i class="fas fa-image"></i> |
|
|
</button> |
|
|
<button class="text-gray-400 hover:text-yellow-500 p-1 btn-solana-secondary"> |
|
|
<i class="fas fa-gift"></i> |
|
|
</button> |
|
|
</div> |
|
|
<button class="btn-solana px-3 py-1 text-sm"> |
|
|
Post |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-4"> |
|
|
|
|
|
<div class="terminal-bg p-4 rounded-lg social-feed-post"> |
|
|
<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 btn-solana-secondary"> |
|
|
<i class="far fa-comment mr-1"></i> 12 |
|
|
</button> |
|
|
<button class="flex items-center btn-solana-secondary"> |
|
|
<i class="fas fa-retweet mr-1"></i> 24 |
|
|
</button> |
|
|
<button class="flex items-center btn-solana-secondary"> |
|
|
<i class="far fa-heart mr-1"></i> 89 |
|
|
</button> |
|
|
<button class="flex items-center btn-solana-secondary"> |
|
|
<i class="fas fa-share-alt mr-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="terminal-bg p-4 rounded-lg social-feed-post"> |
|
|
<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 btn-solana-secondary"> |
|
|
<i class="far fa-comment mr-1"></i> 8 |
|
|
</button> |
|
|
<button class="flex items-center btn-solana-secondary"> |
|
|
<i class="fas fa-retweet mr-1"></i> 15 |
|
|
</button> |
|
|
<button class="flex items-center btn-solana-secondary"> |
|
|
<i class="far fa-heart mr-1"></i> 42 |
|
|
</button> |
|
|
<button class="flex items-center btn-solana-secondary"> |
|
|
<i class="fas fa-share-alt mr-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="chat-feed" class="absolute inset-0 overflow-y-auto" style="visibility: hidden; z-index: 0;"> |
|
|
<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="btn-solana p-2"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="video-feed" class="absolute inset-0 overflow-y-auto" style="visibility: hidden; z-index: 0;"> |
|
|
<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 mb-4"> |
|
|
<button class="btn-solana-secondary p-2 rounded-full"> |
|
|
<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="btn-solana-secondary p-2 rounded-full"> |
|
|
<i class="fas fa-video"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="terminal-bg rounded-lg p-3"> |
|
|
<div class="flex-1 space-y-3 max-h-48 overflow-y-auto mb-3"> |
|
|
|
|
|
<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="flex items-center space-x-2 border-t border-gray-800 pt-3"> |
|
|
<input type="text" class="flex-1 bg-gray-800 text-white p-2 rounded-lg text-sm" placeholder="Type a message..."> |
|
|
<button class="btn-solana p-2"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</html> |
