Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FreqTrade Pro - Advanced Trading GUI</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .tradingview-chart { | |
| height: 400px; | |
| background: #1e293b; | |
| border-radius: 0.5rem; | |
| } | |
| .order-book { | |
| height: 300px; | |
| overflow-y: auto; | |
| } | |
| .trade-history { | |
| height: 200px; | |
| overflow-y: auto; | |
| } | |
| .dark-gradient { | |
| background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); | |
| } | |
| .glow-effect { | |
| box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); | |
| } | |
| .price-up { | |
| color: #10b981; | |
| } | |
| .price-down { | |
| color: #ef4444; | |
| } | |
| .blink { | |
| animation: blink-animation 1s steps(5, start) infinite; | |
| } | |
| @keyframes blink-animation { | |
| to { | |
| opacity: 0.5; | |
| } | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #1e293b; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #334155; | |
| border-radius: 3px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-slate-900 text-slate-100 font-sans"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <!-- Header --> | |
| <header class="flex justify-between items-center mb-6"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="bg-blue-500 p-2 rounded-lg"> | |
| <i class="fas fa-chart-line text-white text-xl"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent"> | |
| FreqTrade Pro | |
| </h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <select class="bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 pr-8 appearance-none focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>BTC/USDT</option> | |
| <option>ETH/USDT</option> | |
| <option>SOL/USDT</option> | |
| <option>ADA/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-slate-400"></i> | |
| </div> | |
| </div> | |
| <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg font-medium transition-colors" onclick="startBot()"> | |
| <i class="fas fa-robot mr-2"></i> Start Bot | |
| </button> | |
| <div class="h-8 w-8 rounded-full bg-slate-700 flex items-center justify-center cursor-pointer"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> | |
| <!-- Left Column --> | |
| <div class="lg:col-span-3 space-y-6"> | |
| <!-- Price and Stats --> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="dark-gradient p-4 rounded-lg"> | |
| <div class="text-slate-400 text-sm">Price</div> | |
| <div class="text-2xl font-bold price-up">$42,850.34 <span class="text-sm">+2.34%</span></div> | |
| </div> | |
| <div class="dark-gradient p-4 rounded-lg"> | |
| <div class="text-slate-400 text-sm">24h High</div> | |
| <div class="text-xl font-medium">$43,120.56</div> | |
| </div> | |
| <div class="dark-gradient p-4 rounded-lg"> | |
| <div class="text-slate-400 text-sm">24h Low</div> | |
| <div class="text-xl font-medium">$41,890.23</div> | |
| </div> | |
| <div class="dark-gradient p-4 rounded-lg"> | |
| <div class="text-slate-400 text-sm">24h Volume</div> | |
| <div class="text-xl font-medium">$1.24B</div> | |
| </div> | |
| </div> | |
| <!-- Chart --> | |
| <div class="tradingview-chart rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="flex space-x-2"> | |
| <button class="bg-slate-700 hover:bg-slate-600 px-3 py-1 rounded text-sm">1h</button> | |
| <button class="bg-slate-700 hover:bg-slate-600 px-3 py-1 rounded text-sm">4h</button> | |
| <button class="bg-blue-600 px-3 py-1 rounded text-sm">1d</button> | |
| <button class="bg-slate-700 hover:bg-slate-600 px-3 py-1 rounded text-sm">1w</button> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="bg-slate-700 hover:bg-slate-600 p-1 rounded"> | |
| <i class="fas fa-indent"></i> | |
| </button> | |
| <button class="bg-slate-700 hover:bg-slate-600 p-1 rounded"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-center h-full"> | |
| <div class="text-center"> | |
| <i class="fas fa-chart-line text-5xl text-slate-600 mb-2"></i> | |
| <p class="text-slate-500">TradingView Chart Integration</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Order Form --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Buy Form --> | |
| <div class="dark-gradient p-4 rounded-lg"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-bold text-green-400">Buy</h3> | |
| <div class="text-sm text-slate-400">Available: $12,450.23</div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm text-slate-400 mb-1">Amount (BTC)</label> | |
| <div class="relative"> | |
| <input type="text" value="0.05" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-green-500"> | |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-400 text-sm"> | |
| BTC | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-slate-400 mb-1">Price (USDT)</label> | |
| <div class="relative"> | |
| <input type="text" value="42850.34" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-green-500"> | |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-400 text-sm"> | |
| USDT | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-slate-400 mb-1">Total (USDT)</label> | |
| <div class="relative"> | |
| <input type="text" value="2142.52" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-green-500"> | |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-400 text-sm"> | |
| USDT | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-4 gap-2"> | |
| <button class="bg-slate-700 hover:bg-slate-600 py-1 rounded text-sm">25%</button> | |
| <button class="bg-slate-700 hover:bg-slate-600 py-1 rounded text-sm">50%</button> | |
| <button class="bg-slate-700 hover:bg-slate-600 py-1 rounded text-sm">75%</button> | |
| <button class="bg-slate-700 hover:bg-slate-600 py-1 rounded text-sm">100%</button> | |
| </div> | |
| <button class="w-full bg-green-600 hover:bg-green-700 py-3 rounded-lg font-bold text-white glow-effect"> | |
| Buy BTC | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Sell Form --> | |
| <div class="dark-gradient p-4 rounded-lg"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-bold text-red-400">Sell</h3> | |
| <div class="text-sm text-slate-400">Available: 0.42 BTC</div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm text-slate-400 mb-1">Amount (BTC)</label> | |
| <div class="relative"> | |
| <input type="text" value="0.10" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-red-500"> | |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-400 text-sm"> | |
| BTC | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-slate-400 mb-1">Price (USDT)</label> | |
| <div class="relative"> | |
| <input type="text" value="42850.34" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-red-500"> | |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-400 text-sm"> | |
| USDT | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-slate-400 mb-1">Total (USDT)</label> | |
| <div class="relative"> | |
| <input type="text" value="4285.03" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-red-500"> | |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-400 text-sm"> | |
| USDT | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-4 gap-2"> | |
| <button class="bg-slate-700 hover:bg-slate-600 py-1 rounded text-sm">25%</button> | |
| <button class="bg-slate-700 hover:bg-slate-600 py-1 rounded text-sm">50%</button> | |
| <button class="bg-slate-700 hover:bg-slate-600 py-1 rounded text-sm">75%</button> | |
| <button class="bg-slate-700 hover:bg-slate-600 py-1 rounded text-sm">100%</button> | |
| </div> | |
| <button class="w-full bg-red-600 hover:bg-red-700 py-3 rounded-lg font-bold text-white glow-effect"> | |
| Sell BTC | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column --> | |
| <div class="space-y-6"> | |
| <!-- Order Book --> | |
| <div class="dark-gradient p-4 rounded-lg"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-bold">Order Book</h3> | |
| <div class="text-sm text-slate-400">Depth: 0.5%</div> | |
| </div> | |
| <div class="order-book"> | |
| <div class="text-right mb-2"> | |
| <div class="text-xs text-slate-400 mb-1">Bids</div> | |
| <div class="space-y-1"> | |
| <div class="flex justify-between text-sm hover:bg-slate-800 px-2 py-1 rounded cursor-pointer"> | |
| <span class="text-green-400">42850.34</span> | |
| <span>2.45</span> | |
| <span class="text-slate-400">104,923.33</span> | |
| </div> | |
| <div class="flex justify-between text-sm hover:bg-slate-800 px-2 py-1 rounded cursor-pointer"> | |
| <span class="text-green-400">42848.21</span> | |
| <span>1.87</span> | |
| <span class="text-slate-400">80,126.15</span> | |
| </div> | |
| <div class="flex justify-between text-sm hover:bg-slate-800 px-2 py-1 rounded cursor-pointer"> | |
| <span class="text-green-400">42845.90</span> | |
| <span>3.12</span> | |
| <span class="text-slate-400">133,679.28</span> | |
| </div> | |
| <div class="flex justify-between text-sm hover:bg-slate-800 px-2 py-1 rounded cursor-pointer"> | |
| <span class="text-green-400">42843.75</span> | |
| <span>0.95</span> | |
| <span class="text-slate-400">40,701.56</span> | |
| </div> | |
| <div class="flex justify-between text-sm hover:bg-slate-800 px-2 py-1 rounded cursor-pointer"> | |
| <span class="text-green-400">42840.00</span> | |
| <span>4.20</span> | |
| <span class="text-slate-400">179,928.00</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center my-2"> | |
| <div class="text-xl font-bold">42850.34</div> | |
| <div class="text-xs text-slate-400">$42850.34</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-xs text-slate-400 mb-1">Asks</div> | |
| <div class="space-y-1"> | |
| <div class="flex justify-between text-sm hover:bg-slate-800 px-2 py-1 rounded cursor-pointer"> | |
| <span class="text-red-400">42852.10</span> | |
| <span>1.25</span> | |
| <span class="text-slate-400">53,565.13</span> | |
| </div> | |
| <div class="flex justify-between text-sm hover:bg-slate-800 px-2 py-1 rounded cursor-pointer"> | |
| <span class="text-red-400">42854.45</span> | |
| <span>2.10</span> | |
| <span class="text-slate-400">89,994.35</span> | |
| </div> | |
| <div class="flex justify-between text-sm hover:bg-slate-800 px-2 py-1 rounded cursor-pointer"> | |
| <span class="text-red-400">42856.80</span> | |
| <span>0.75</span> | |
| <span class="text-slate-400">32,142.60</span> | |
| </div> | |
| <div class="flex justify-between text-sm hover:bg-slate-800 px-2 py-1 rounded cursor-pointer"> | |
| <span class="text-red-400">42859.20</span> | |
| <span>3.45</span> | |
| <span class="text-slate-400">147,864.24</span> | |
| </div> | |
| <div class="flex justify-between text-sm hover:bg-slate-800 px-2 py-1 rounded cursor-pointer"> | |
| <span class="text-red-400">42861.50</span> | |
| <span>1.80</span> | |
| <span class="text-slate-400">77,150.70</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Trade History --> | |
| <div class="dark-gradient p-4 rounded-lg"> | |
| <h3 class="font-bold mb-4">Trade History</h3> | |
| <div class="trade-history"> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-green-400">42850.34</span> | |
| <span>0.042</span> | |
| <span class="text-slate-400">2 min ago</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-red-400">42852.10</span> | |
| <span>0.125</span> | |
| <span class="text-slate-400">3 min ago</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-green-400">42848.90</span> | |
| <span>0.210</span> | |
| <span class="text-slate-400">5 min ago</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-green-400">42847.35</span> | |
| <span>0.087</span> | |
| <span class="text-slate-400">7 min ago</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-red-400">42849.60</span> | |
| <span>0.154</span> | |
| <span class="text-slate-400">10 min ago</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-green-400">42846.20</span> | |
| <span>0.320</span> | |
| <span class="text-slate-400">12 min ago</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-red-400">42848.75</span> | |
| <span>0.095</span> | |
| <span class="text-slate-400">15 min ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bot Status --> | |
| <div class="dark-gradient p-4 rounded-lg"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-bold">Bot Status</h3> | |
| <div class="flex items-center"> | |
| <div class="h-2 w-2 rounded-full bg-green-500 mr-2"></div> | |
| <span class="text-xs text-green-500">Running</span> | |
| </div> | |
| </div> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-slate-400">Current Profit</span> | |
| <span class="text-green-400">+3.42%</span> | |
| </div> | |
| <div class="w-full bg-slate-700 rounded-full h-1.5"> | |
| <div class="bg-green-500 h-1.5 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-slate-400">Trades Today</span> | |
| <span>12</span> | |
| </div> | |
| <div class="w-full bg-slate-700 rounded-full h-1.5"> | |
| <div class="bg-blue-500 h-1.5 rounded-full" style="width: 40%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-slate-400">Win Rate</span> | |
| <span class="text-green-400">78%</span> | |
| </div> | |
| <div class="w-full bg-slate-700 rounded-full h-1.5"> | |
| <div class="bg-purple-500 h-1.5 rounded-full" style="width: 78%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 bg-slate-700 hover:bg-slate-600 py-2 rounded-lg text-sm font-medium"> | |
| <i class="fas fa-cog mr-2"></i> Configure Bot | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Open Orders --> | |
| <div class="mt-8 dark-gradient p-4 rounded-lg"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-bold">Open Orders</h3> | |
| <div class="text-sm text-slate-400">3 active orders</div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="text-slate-400 text-sm border-b border-slate-700"> | |
| <th class="text-left pb-2">Pair</th> | |
| <th class="text-right pb-2">Side</th> | |
| <th class="text-right pb-2">Price</th> | |
| <th class="text-right pb-2">Amount</th> | |
| <th class="text-right pb-2">Total</th> | |
| <th class="text-right pb-2">Created</th> | |
| <th class="text-right pb-2">Action</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-slate-700"> | |
| <tr class="text-sm hover:bg-slate-800"> | |
| <td class="py-3">BTC/USDT</td> | |
| <td class="text-right text-green-400">Buy</td> | |
| <td class="text-right">42800.00</td> | |
| <td class="text-right">0.05</td> | |
| <td class="text-right">2140.00</td> | |
| <td class="text-right text-slate-400">2 min ago</td> | |
| <td class="text-right"> | |
| <button class="text-red-400 hover:text-red-300"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="text-sm hover:bg-slate-800"> | |
| <td class="py-3">BTC/USDT</td> | |
| <td class="text-right text-red-400">Sell</td> | |
| <td class="text-right">43200.00</td> | |
| <td class="text-right">0.10</td> | |
| <td class="text-right">4320.00</td> | |
| <td class="text-right text-slate-400">15 min ago</td> | |
| <td class="text-right"> | |
| <button class="text-red-400 hover:text-red-300"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="text-sm hover:bg-slate-800"> | |
| <td class="py-3">BTC/USDT</td> | |
| <td class="text-right text-green-400">Buy</td> | |
| <td class="text-right">42650.00</td> | |
| <td class="text-right">0.08</td> | |
| <td class="text-right">3412.00</td> | |
| <td class="text-right text-slate-400">1 hour ago</td> | |
| <td class="text-right"> | |
| <button class="text-red-400 hover:text-red-300"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Freqtrade API configuration | |
| const API_BASE_URL = 'http://localhost:8080/api/v1'; // Change to your Freqtrade API URL | |
| const API_KEY = 'your_api_key_here'; // Set your API key | |
| // Common headers for API requests | |
| const headers = { | |
| 'Accept': 'application/json', | |
| 'Content-Type': 'application/json', | |
| 'Authorization': `Bearer ${API_KEY}` | |
| }; | |
| // Fetch current pair data | |
| async function fetchPairData() { | |
| try { | |
| const response = await fetch(`${API_BASE_URL}/pair_candles?pair=BTC/USDT&timeframe=1d`, { headers }); | |
| const data = await response.json(); | |
| return data; | |
| } catch (error) { | |
| console.error('Error fetching pair data:', error); | |
| return null; | |
| } | |
| } | |
| // Fetch open orders | |
| async function fetchOpenOrders() { | |
| try { | |
| const response = await fetch(`${API_BASE_URL}/trades`, { headers }); | |
| const data = await response.json(); | |
| return data; | |
| } catch (error) { | |
| console.error('Error fetching open orders:', error); | |
| return []; | |
| } | |
| } | |
| // Update price and UI with real data | |
| async function updatePrice() { | |
| const data = await fetchPairData(); | |
| if (!data) return; | |
| const priceElement = document.querySelector('.price-up'); | |
| const currentPrice = data.close; | |
| const percentChange = ((data.close - data.open) / data.open * 100).toFixed(2); | |
| const priceElement = document.querySelector('.price-up'); | |
| const currentPrice = parseFloat(priceElement.textContent.replace('$', '').replace(',', '')); | |
| const change = (Math.random() - 0.5) * 100; | |
| const newPrice = currentPrice + change; | |
| const percentChange = ((change / currentPrice) * 100).toFixed(2); | |
| priceElement.textContent = `$${newPrice.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",")} `; | |
| const changeElement = document.createElement('span'); | |
| changeElement.className = 'text-sm'; | |
| changeElement.textContent = `${percentChange >= 0 ? '+' : ''}${percentChange}%`; | |
| if (percentChange >= 0) { | |
| priceElement.classList.remove('price-down'); | |
| priceElement.classList.add('price-up'); | |
| changeElement.classList.add('text-green-500'); | |
| } else { | |
| priceElement.classList.remove('price-up'); | |
| priceElement.classList.add('price-down'); | |
| changeElement.classList.add('text-red-500'); | |
| } | |
| // Remove existing change span if it exists | |
| const existingChange = priceElement.querySelector('span'); | |
| if (existingChange) { | |
| priceElement.removeChild(existingChange); | |
| } | |
| priceElement.appendChild(changeElement); | |
| // Add blink effect | |
| priceElement.classList.add('blink'); | |
| setTimeout(() => { | |
| priceElement.classList.remove('blink'); | |
| }, 500); | |
| } | |
| // Initialize and load data | |
| async function init() { | |
| await updatePrice(); | |
| await updateOpenOrders(); | |
| setInterval(updatePrice, 30000); // Update every 30 seconds | |
| } | |
| // Update open orders table | |
| async function updateOpenOrders() { | |
| const orders = await fetchOpenOrders(); | |
| const tbody = document.querySelector('tbody'); | |
| tbody.innerHTML = ''; | |
| orders.forEach(order => { | |
| const row = document.createElement('tr'); | |
| row.className = 'text-sm hover:bg-slate-800'; | |
| row.innerHTML = ` | |
| <td class="py-3">${order.pair}</td> | |
| <td class="text-right ${order.side === 'buy' ? 'text-green-400' : 'text-red-400'}">${order.side}</td> | |
| <td class="text-right">${order.price}</td> | |
| <td class="text-right">${order.amount}</td> | |
| <td class="text-right">${(order.price * order.amount).toFixed(2)}</td> | |
| <td class="text-right text-slate-400">${new Date(order.open_date).toLocaleTimeString()}</td> | |
| <td class="text-right"> | |
| <button class="text-red-400 hover:text-red-300" onclick="cancelOrder('${order.id}')"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </td> | |
| `; | |
| tbody.appendChild(row); | |
| }); | |
| } | |
| // Cancel order function | |
| async function cancelOrder(orderId) { | |
| try { | |
| await fetch(`${API_BASE_URL}/trade/${orderId}`, { | |
| method: 'DELETE', | |
| headers | |
| }); | |
| await updateOpenOrders(); | |
| } catch (error) { | |
| console.error('Error canceling order:', error); | |
| } | |
| } | |
| // Start bot function | |
| async function startBot() { | |
| try { | |
| await fetch(`${API_BASE_URL}/start`, { | |
| method: 'POST', | |
| headers | |
| }); | |
| alert('Bot started successfully'); | |
| } catch (error) { | |
| console.error('Error starting bot:', error); | |
| } | |
| } | |
| // Initialize when page loads | |
| document.addEventListener('DOMContentLoaded', init); | |
| // Order book hover effect | |
| document.querySelectorAll('.order-book div div div').forEach(row => { | |
| row.addEventListener('mouseenter', function() { | |
| this.classList.add('bg-slate-800'); | |
| }); | |
| row.addEventListener('mouseleave', function() { | |
| this.classList.remove('bg-slate-800'); | |
| }); | |
| }); | |
| // Trade history hover effect | |
| document.querySelectorAll('.trade-history div div').forEach(row => { | |
| row.addEventListener('mouseenter', function() { | |
| this.classList.add('bg-slate-800'); | |
| }); | |
| row.addEventListener('mouseleave', function() { | |
| this.classList.remove('bg-slate-800'); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=bmaxin/freaqtrade-pro-manager" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |