Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Paper Trading Simulator | CryptoVision</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#8b5cf6', | |
| secondary: '#6366f1' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| overflow-x: hidden; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #8b5cf6 0%, #6366f1 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .animate-float { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .blob { | |
| position: absolute; | |
| width: 500px; | |
| height: 500px; | |
| background: linear-gradient(180deg, rgba(139, 92, 246, 0.2) 0%, rgba(99, 102, 241, 0.1) 100%); | |
| border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; | |
| filter: blur(50px); | |
| z-index: -1; | |
| } | |
| .order-book { | |
| max-height: 400px; | |
| overflow-y: auto; | |
| } | |
| .order-book::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .order-book::-webkit-scrollbar-track { | |
| background: rgba(255,255,255,0.05); | |
| } | |
| .order-book::-webkit-scrollbar-thumb { | |
| background: rgba(139, 92, 246, 0.5); | |
| border-radius: 3px; | |
| } | |
| .tradingview-widget-container { | |
| border-radius: 12px; | |
| overflow: hidden; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 min-h-screen"> | |
| <div class="blob -left-64 -top-64"></div> | |
| <div class="blob -right-64 bottom-0"></div> | |
| <!-- Navigation --> | |
| <nav class="bg-gray-800 bg-opacity-70 backdrop-blur-lg border-b border-gray-700 fixed w-full z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <span class="text-2xl font-bold gradient-text">CryptoVision</span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="index.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Dashboard</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Markets</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Portfolio</a> | |
| <a href="simulator.html" class="px-3 py-2 rounded-md text-sm font-medium text-white bg-violet-500">Simulator</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">News</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-4 flex items-center md:ml-6"> | |
| <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none"> | |
| <i data-feather="search"></i> | |
| </button> | |
| <button class="ml-3 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none"> | |
| <i data-feather="bell"></i> | |
| </button> | |
| <div class="ml-3 relative"> | |
| <div> | |
| <button class="max-w-xs flex items-center text-sm rounded-full focus:outline-none"> | |
| <img class="h-8 w-8 rounded-full" src="http://static.photos/gradient/200x200/42" alt="User profile"> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <div class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 mx-auto" style="max-width: 95vw;"> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Left Column - Full Width --> | |
| <div class="w-full"> | |
| <!-- Sidebar Toggle Button --> | |
| <button onclick="toggleSidebar()" class="fixed right-4 top-24 z-40 bg-gray-800 p-2 rounded-full border border-gray-700 lg:hidden"> | |
| <i data-feather="chevron-left" id="sidebarToggleIcon"></i> | |
| </button> | |
| <!-- Trading Pair Selector --> | |
| <div class="bg-gray-800 rounded-xl p-4 mb-6 border border-gray-700 sticky top-24"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-xl font-bold">Trading Pair</h2> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-sm text-gray-400">Balance: $10,000.00</span> | |
| <button class="bg-violet-500 hover:bg-violet-600 text-white text-xs py-1 px-2 rounded"> | |
| Reset | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="relative flex-1 mr-2"> | |
| <select class="bg-gray-700 border border-gray-600 text-white rounded-lg px-4 py-2 w-full focus:ring-2 focus:ring-violet-500 focus:border-transparent"> | |
| <option>BTC/USDT</option> | |
| <option>ETH/USDT</option> | |
| <option>SOL/USDT</option> | |
| <option>ADA/USDT</option> | |
| <option>DOT/USDT</option> | |
| </select> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded-lg"> | |
| <i data-feather="star" class="w-4 h-4"></i> | |
| </button> | |
| <button class="bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded-lg"> | |
| <i data-feather="settings" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Trading View Chart - Larger --> | |
| <div class="bg-gray-800 rounded-xl p-4 mb-6 border border-gray-700" style="height: 65vh;"> | |
| <div class="tradingview-widget-container"> | |
| <div class="tradingview-widget-container__widget"></div> | |
| <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js" async> | |
| { | |
| "autosize": true, | |
| "symbol": "BINANCE:BTCUSDT", | |
| "interval": "15", | |
| "timezone": "Etc/UTC", | |
| "theme": "dark", | |
| "style": "1", | |
| "locale": "en", | |
| "enable_publishing": false, | |
| "hide_top_toolbar": false, | |
| "hide_side_toolbar": false, | |
| "allow_symbol_change": true, | |
| "details": true, | |
| "hotlist": true, | |
| "calendar": false, | |
| "support_host": "https://www.tradingview.com" | |
| } | |
| </script> | |
| </div> | |
| </div> | |
| <!-- Order Form --> | |
| <div class="bg-gray-800 rounded-xl p-4 border border-gray-700"> | |
| <div class="flex border-b border-gray-700 mb-4"> | |
| <button class="pb-2 px-4 font-medium border-b-2 border-violet-500 text-white">Buy</button> | |
| <button class="pb-2 px-4 font-medium text-gray-400 hover:text-white">Sell</button> | |
| </div> | |
| <!-- Buy Section --> | |
| <div id="buySection"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-1">Buy Price (USDT)</label> | |
| <input type="number" class="bg-gray-700 border border-gray-600 text-white rounded-lg px-4 py-2 w-full focus:ring-2 focus:ring-violet-500 focus:border-transparent" placeholder="0.00" id="buyPrice" oninput="calculateRisk()"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-1">Amount (BTC)</label> | |
| <input type="number" class="bg-gray-700 border border-gray-600 text-white rounded-lg px-4 py-2 w-full focus:ring-2 focus:ring-violet-500 focus:border-transparent" placeholder="0.00" id="buyAmount" oninput="calculateRisk()"> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-4 gap-2 mb-4"> | |
| <div class="relative"> | |
| <button class="bg-gray-700 hover:bg-gray-600 text-white py-2 rounded-lg text-sm w-full" onclick="setLeverage(1)">1x</button> | |
| <div class="absolute -bottom-6 left-0 right-0 text-xs text-center text-gray-400">Low Risk</div> | |
| </div> | |
| <div class="relative"> | |
| <button class="bg-gray-700 hover:bg-gray-600 text-white py-2 rounded-lg text-sm w-full" onclick="setLeverage(5)">5x</button> | |
| <div class="absolute -bottom-6 left-0 right-0 text-xs text-center text-gray-400">Medium Risk</div> | |
| </div> | |
| <div class="relative"> | |
| <button class="bg-gray-700 hover:bg-gray-600 text-white py-2 rounded-lg text-sm w-full" onclick="setLeverage(10)">10x</button> | |
| <div class="absolute -bottom-6 left-0 right-0 text-xs text-center text-gray-400">High Risk</div> | |
| </div> | |
| <div class="relative"> | |
| <button class="bg-gray-700 hover:bg-gray-600 text-white py-2 rounded-lg text-sm w-full" onclick="setLeverage(25)">25x</button> | |
| <div class="absolute -bottom-6 left-0 right-0 text-xs text-center text-gray-400">Extreme Risk</div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span id="positionSize" class="text-sm text-gray-400">Position: $0</span> | |
| <span id="riskLevel" class="text-sm text-gray-400">Risk: Low</span> | |
| </div> | |
| <button class="w-full bg-green-500 hover:bg-green-600 text-white py-2 rounded-lg font-medium" onclick="executeOrder('buy')">Buy BTC</button> | |
| </div> | |
| <!-- Sell Section (hidden by default) --> | |
| <div id="sellSection" class="hidden"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-1">Sell Price (USDT)</label> | |
| <input type="number" class="bg-gray-700 border border-gray-600 text-white rounded-lg px-4 py-2 w-full focus:ring-2 focus:ring-violet-500 focus:border-transparent" placeholder="0.00" id="sellPrice"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-1">Amount (BTC)</label> | |
| <input type="number" class="bg-gray-700 border border-gray-600 text-white rounded-lg px-4 py-2 w-full focus:ring-2 focus:ring-violet-500 focus:border-transparent" placeholder="0.00" id="sellAmount"> | |
| </div> | |
| </div> | |
| <button class="w-full bg-red-500 hover:bg-red-600 text-white py-2 rounded-lg font-medium" onclick="executeOrder('sell')">Sell BTC</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column - Hidden by default, shown with toggle --> | |
| <div class="hidden lg:block lg:w-1/4" id="sidebar"> | |
| <!-- Order Book --> | |
| <div class="bg-gray-800 rounded-xl p-4 mb-6 border border-gray-700"> | |
| <h2 class="text-xl font-bold mb-4">Order Book</h2> | |
| <div class="order-book"> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-xs text-gray-400 mb-1"> | |
| <span>Price (USDT)</span> | |
| <span>Amount (BTC)</span> | |
| <span>Total</span> | |
| </div> | |
| <!-- Sell Orders --> | |
| <div class="space-y-1 mb-4"> | |
| <div class="flex justify-between text-red-400 text-sm"> | |
| <span>59,120.45</span> | |
| <span>0.1254</span> | |
| <span>7,413.70</span> | |
| </div> | |
| <div class="flex justify-between text-red-400 text-sm"> | |
| <span>59,115.32</span> | |
| <span>0.0876</span> | |
| <span>5,178.50</span> | |
| </div> | |
| <div class="flex justify-between text-red-400 text-sm"> | |
| <span>59,110.78</span> | |
| <span>0.2043</span> | |
| <span>12,076.18</span> | |
| </div> | |
| <div class="flex justify-between text-red-400 text-sm"> | |
| <span>59,105.21</span> | |
| <span>0.1567</span> | |
| <span>9,261.19</span> | |
| </div> | |
| <div class="flex justify-between text-red-400 text-sm"> | |
| <span>59,100.00</span> | |
| <span>0.3421</span> | |
| <span>20,217.81</span> | |
| </div> | |
| </div> | |
| <!-- Market Price --> | |
| <div class="text-center my-3 py-2 bg-gray-700 rounded-lg"> | |
| <span class="text-lg font-bold">$59,087.32</span> | |
| <span class="text-xs text-gray-400 block">Last Price</span> | |
| </div> | |
| <!-- Buy Orders --> | |
| <div class="space-y-1 mt-4"> | |
| <div class="flex justify-between text-green-400 text-sm"> | |
| <span>59,080.12</span> | |
| <span>0.0876</span> | |
| <span>5,175.46</span> | |
| </div> | |
| <div class="flex justify-between text-green-400 text-sm"> | |
| <span>59,075.43</span> | |
| <span>0.2043</span> | |
| <span>12,068.61</span> | |
| </div> | |
| <div class="flex justify-between text-green-400 text-sm"> | |
| <span>59,070.89</span> | |
| <span>0.1567</span> | |
| <span>9,252.41</span> | |
| </div> | |
| <div class="flex justify-between text-green-400 text-sm"> | |
| <span>59,065.21</span> | |
| <span>0.3421</span> | |
| <span>20,197.71</span> | |
| </div> | |
| <div class="flex justify-between text-green-400 text-sm"> | |
| <span>59,060.00</span> | |
| <span>0.1254</span> | |
| <span>7,402.11</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Trades --> | |
| <div class="bg-gray-800 rounded-xl p-4 mb-6 border border-gray-700"> | |
| <h2 class="text-xl font-bold mb-4">Recent Trades</h2> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-green-400">$59,087.32</span> | |
| <span>0.0245 BTC</span> | |
| <span class="text-gray-400">12:45:23</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-red-400">$59,087.45</span> | |
| <span>0.0123 BTC</span> | |
| <span class="text-gray-400">12:44:56</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-green-400">$59,086.78</span> | |
| <span>0.0456 BTC</span> | |
| <span class="text-gray-400">12:44:12</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-green-400">$59,085.21</span> | |
| <span>0.0321 BTC</span> | |
| <span class="text-gray-400">12:43:45</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-red-400">$59,085.00</span> | |
| <span>0.0678 BTC</span> | |
| <span class="text-gray-400">12:43:23</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-red-400">$59,084.56</span> | |
| <span>0.0234 BTC</span> | |
| <span class="text-gray-400">12:42:56</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-green-400">$59,083.21</span> | |
| <span>0.0156 BTC</span> | |
| <span class="text-gray-400">12:42:34</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Portfolio Summary --> | |
| <div class="bg-gray-800 rounded-xl p-4 border border-gray-700"> | |
| <h2 class="text-xl font-bold mb-4">Your Portfolio</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between text-sm text-gray-400 mb-1"> | |
| <span>Total Balance</span> | |
| <span>$10,245.78</span> | |
| </div> | |
| <div class="h-2 bg-gray-700 rounded-full overflow-hidden"> | |
| <div class="h-full bg-gradient-to-r from-violet-500 to-indigo-600 rounded-full" style="width: 82%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span class="text-gray-300">BTC</span> | |
| <span class="font-medium">0.0425 BTC</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-400"> | |
| <span>≈ $2,512.35</span> | |
| <span class="text-green-400">+3.45%</span> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span class="text-gray-300">ETH</span> | |
| <span class="font-medium">1.2456 ETH</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-400"> | |
| <span>≈ $4,012.89</span> | |
| <span class="text-green-400">+1.23%</span> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span class="text-gray-300">USDT</span> | |
| <span class="font-medium">3,720.54 USDT</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-400"> | |
| <span>≈ $3,720.54</span> | |
| <span class="text-gray-400">0.00%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> | |
| <script> | |
| function toggleSidebar() { | |
| const sidebar = document.getElementById('sidebar'); | |
| const icon = document.getElementById('sidebarToggleIcon'); | |
| sidebar.classList.toggle('hidden'); | |
| icon.setAttribute('data-feather', sidebar.classList.contains('hidden') ? 'chevron-right' : 'chevron-left'); | |
| feather.replace(); | |
| } | |
| async function fetchCryptoData(symbol = 'bitcoin') { | |
| try { | |
| const response = await axios.get(`https://api.coingecko.com/api/v3/coins/${symbol}`); | |
| return response.data; | |
| } catch (error) { | |
| console.error('Error fetching crypto data:', error); | |
| return null; | |
| } | |
| } | |
| async function updateMarketData() { | |
| const selectedPair = document.querySelector('select').value; | |
| const symbol = selectedPair.split('/')[0].toLowerCase(); | |
| const cryptoData = await fetchCryptoData(symbol); | |
| if (cryptoData) { | |
| // Update price | |
| const priceEl = document.querySelector('.text-lg.font-bold'); | |
| if (priceEl) priceEl.textContent = `${cryptoData.market_data.current_price.usd.toLocaleString()}`; | |
| // Update order book (simplified) | |
| const bids = document.querySelectorAll('.order-book .text-green-400'); | |
| const asks = document.querySelectorAll('.order-book .text-red-400'); | |
| // Generate random order book data based on current price | |
| const currentPrice = cryptoData.market_data.current_price.usd; | |
| bids.forEach((bid, index) => { | |
| const price = (currentPrice - (index + 1) * (Math.random() * 10 + 5)).toFixed(2); | |
| const amount = (Math.random() * 0.2).toFixed(4); | |
| bid.textContent = price; | |
| bid.nextElementSibling.textContent = amount; | |
| bid.nextElementSibling.nextElementSibling.textContent = (price * amount).toFixed(2); | |
| }); | |
| asks.forEach((ask, index) => { | |
| const price = (currentPrice + (index + 1) * (Math.random() * 10 + 5)).toFixed(2); | |
| const amount = (Math.random() * 0.2).toFixed(4); | |
| ask.textContent = price; | |
| ask.nextElementSibling.textContent = amount; | |
| ask.nextElementSibling.nextElementSibling.textContent = (price * amount).toFixed(2); | |
| }); | |
| // Update recent trades | |
| const trades = document.querySelectorAll('.space-y-2 .flex.justify-between'); | |
| trades.forEach(trade => { | |
| const isBuy = Math.random() > 0.5; | |
| const price = isBuy | |
| ? (currentPrice * (1 - Math.random() * 0.01)).toFixed(2) | |
| : (currentPrice * (1 + Math.random() * 0.01)).toFixed(2); | |
| const amount = (Math.random() * 0.1).toFixed(4); | |
| trade.querySelector('span:first-child').textContent = `${price}`; | |
| trade.querySelector('span:first-child').className = isBuy ? 'text-green-400' : 'text-red-400'; | |
| trade.querySelector('span:nth-child(2)').textContent = `${amount} ${symbol.toUpperCase()}`; | |
| // Update time | |
| const now = new Date(); | |
| trade.querySelector('span:last-child').textContent = now.toLocaleTimeString(); | |
| }); | |
| } | |
| } | |
| // Toggle between buy/sell sections | |
| document.querySelectorAll('.flex.border-b button').forEach(button => { | |
| button.addEventListener('click', function() { | |
| const isBuy = this.textContent === 'Buy'; | |
| document.getElementById('buySection').classList.toggle('hidden', !isBuy); | |
| document.getElementById('sellSection').classList.toggle('hidden', isBuy); | |
| // Update active tab styling | |
| document.querySelectorAll('.flex.border-b button').forEach(btn => { | |
| btn.classList.toggle('border-b-2', btn === this); | |
| btn.classList.toggle('border-violet-500', btn === this); | |
| btn.classList.toggle('text-white', btn === this); | |
| btn.classList.toggle('text-gray-400', btn !== this); | |
| }); | |
| }); | |
| }); | |
| // Calculate position size and risk | |
| function calculateRisk() { | |
| const price = parseFloat(document.getElementById('buyPrice').value) || 0; | |
| const amount = parseFloat(document.getElementById('buyAmount').value) || 0; | |
| const positionSize = price * amount * currentLeverage; | |
| document.getElementById('positionSize').textContent = `Position: ${positionSize.toFixed(2)}`; | |
| let riskLevel = 'Low'; | |
| if (currentLeverage >= 25) riskLevel = 'Extreme'; | |
| else if (currentLeverage >= 10) riskLevel = 'High'; | |
| else if (currentLeverage >= 5) riskLevel = 'Medium'; | |
| document.getElementById('riskLevel').textContent = `Risk: ${riskLevel}`; | |
| } | |
| // Set leverage multiplier | |
| let currentLeverage = 1; | |
| function setLeverage(multiplier) { | |
| currentLeverage = multiplier; | |
| document.querySelectorAll('#buySection button').forEach(btn => { | |
| btn.classList.toggle('bg-violet-500', btn.textContent.includes(`${multiplier}x`)); | |
| btn.classList.toggle('bg-gray-700', !btn.textContent.includes(`${multiplier}x`)); | |
| }); | |
| calculateRisk(); | |
| } | |
| // Execute buy/sell order | |
| function executeOrder(type) { | |
| if (type === 'buy') { | |
| const price = parseFloat(document.getElementById('buyPrice').value); | |
| const amount = parseFloat(document.getElementById('buyAmount').value); | |
| if (price && amount) { | |
| const btcAmount = (amount * currentLeverage) / price; | |
| alert(`Buy order executed: ${btcAmount.toFixed(8)} BTC at ${price} (${currentLeverage}x)`); | |
| } | |
| } else { | |
| const price = parseFloat(document.getElementById('sellPrice').value); | |
| const amount = parseFloat(document.getElementById('sellAmount').value); | |
| if (price && amount) { | |
| alert(`Sell order executed: ${amount} BTC at ${price}`); | |
| } | |
| } | |
| } | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Initialize with Bitcoin data | |
| updateMarketData(); | |
| // Update when trading pair changes | |
| document.querySelector('select').addEventListener('change', updateMarketData); | |
| feather.replace(); | |
| // Animation for elements | |
| anime({ | |
| targets: '.card-hover', | |
| translateY: [20, 0], | |
| opacity: [0, 1], | |
| delay: anime.stagger(100), | |
| duration: 800, | |
| easing: 'easeOutExpo' | |
| }); | |
| // Auto-update every 30 seconds | |
| setInterval(updateMarketData, 30000); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |