| <!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> |
