Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nakhoda4X Pro - Portfolio Dashboard</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> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#2563eb', | |
| secondary: '#8b5cf6', | |
| darkBg: '#111827', | |
| darkCard: '#1f2937', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .trading-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .coin-animation { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 dark:bg-darkBg transition-colors duration-300"> | |
| <!-- Header --> | |
| <header class="bg-white dark:bg-darkCard shadow-sm"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="bg-primary w-10 h-10 rounded-xl flex items-center justify-center mr-3 coin-animation"> | |
| <i class="fas fa-chart-line text-white text-xl"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Nakhoda4X <span class="text-primary">Pro</span></h1> | |
| </div> | |
| <div class="flex items-center space-x-6"> | |
| <button id="theme-toggle" class="text-gray-600 dark:text-gray-300"> | |
| <i class="fas fa-moon dark:hidden"></i> | |
| <i class="fas fa-sun hidden dark:block"></i> | |
| </button> | |
| <div class="relative"> | |
| <i class="fas fa-bell text-gray-600 dark:text-gray-300 text-xl"></i> | |
| <span class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="mr-3 text-right"> | |
| <p class="font-semibold text-gray-800 dark:text-white">SahabatPipHijau</p> | |
| <p class="text-sm text-gray-500">Premium Account</p> | |
| </div> | |
| <div class="h-10 w-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center text-white font-bold"> | |
| J | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Dashboard Header --> | |
| <div class="flex justify-between items-center mb-8"> | |
| <div> | |
| <h2 class="text-3xl font-bold text-gray-800 dark:text-white">Trading Dashboard</h2> | |
| <p class="text-gray-500 mt-1 dark:text-gray-400">Connected to BingX via API</p> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button class="px-4 py-2 bg-white dark:bg-darkCard rounded-lg border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 flex items-center"> | |
| <i class="fas fa-sync mr-2"></i> Refresh | |
| </button> | |
| <button class="px-4 py-2 bg-primary text-white rounded-lg flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> New Trade | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="trading-card bg-white dark:bg-darkCard rounded-2xl shadow-md p-6 transition-all duration-300"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <p class="text-gray-500 dark:text-gray-400">Total Balance</p> | |
| <h3 class="text-2xl font-bold mt-2 dark:text-white">$25,842.75</h3> | |
| </div> | |
| <div class="w-12 h-12 rounded-xl bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center"> | |
| <i class="fas fa-wallet text-blue-500 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center text-green-500"> | |
| <i class="fas fa-caret-up mr-1"></i> | |
| <span class="font-medium">3.2%</span> | |
| <span class="text-gray-500 ml-2 dark:text-gray-400">last 24h</span> | |
| </div> | |
| </div> | |
| <div class="trading-card bg-white dark:bg-darkCard rounded-2xl shadow-md p-6 transition-all duration-300"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <p class="text-gray-500 dark:text-gray-400">Open Trades</p> | |
| <h3 class="text-2xl font-bold mt-2 dark:text-white">14</h3> | |
| </div> | |
| <div class="w-12 h-12 rounded-xl bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center"> | |
| <i class="fas fa-exchange-alt text-purple-500 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center text-blue-500"> | |
| <span class="font-medium">6 Long</span> | |
| <span class="text-gray-500 mx-2 dark:text-gray-400">•</span> | |
| <span class="font-medium">8 Short</span> | |
| </div> | |
| </div> | |
| <div class="trading-card bg-white dark:bg-darkCard rounded-2xl shadow-md p-6 transition-all duration-300"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <p class="text-gray-500 dark:text-gray-400">Today's Profit</p> | |
| <h3 class="text-2xl font-bold mt-2 dark:text-white">$1,254.30</h3> | |
| </div> | |
| <div class="w-12 h-12 rounded-xl bg-green-100 dark:bg-green-900/30 flex items-center justify-center"> | |
| <i class="fas fa-chart-bar text-green-500 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center text-green-500"> | |
| <i class="fas fa-caret-up mr-1"></i> | |
| <span class="font-medium">5.7%</span> | |
| <span class="text-gray-500 ml-2 dark:text-gray-400">vs yesterday</span> | |
| </div> | |
| </div> | |
| <div class="trading-card bg-white dark:bg-darkCard rounded-2xl shadow-md p-6 transition-all duration-300"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <p class="text-gray-500 dark:text-gray-400">Risk Exposure</p> | |
| <h3 class="text-2xl font-bold mt-2 dark:text-white">Medium</h3> | |
| </div> | |
| <div class="w-12 h-12 rounded-xl bg-yellow-100 dark:bg-yellow-900/30 flex items-center justify-center"> | |
| <i class="fas fa-exclamation-triangle text-yellow-500 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center text-gray-500 dark:text-gray-400"> | |
| <span class="font-medium">42%</span> | |
| <span class="ml-2">of balance</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Charts and Statistics Section --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> | |
| <!-- Monthly Performance --> | |
| <div class="lg:col-span-2 bg-white dark:bg-darkCard rounded-2xl shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-lg font-bold text-gray-800 dark:text-white">Monthly Performance</h3> | |
| <div class="flex space-x-3"> | |
| <button class="px-3 py-1 rounded-lg text-sm bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white">1M</button> | |
| <button class="px-3 py-1 rounded-lg text-sm bg-primary text-white">3M</button> | |
| <button class="px-3 py-1 rounded-lg text-sm bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white">6M</button> | |
| <button class="px-3 py-1 rounded-lg text-sm bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white">1Y</button> | |
| </div> | |
| </div> | |
| <canvas id="performanceChart"></canvas> | |
| </div> | |
| <!-- Advanced Stats --> | |
| <div class="bg-white dark:bg-darkCard rounded-2xl shadow-md p-6"> | |
| <h3 class="text-lg font-bold text-gray-800 dark:text-white mb-6">Advanced Statistics</h3> | |
| <div class="space-y-5"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-500 dark:text-gray-400">Profit Factor</span> | |
| <span class="font-bold text-green-500">2.75</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700"> | |
| <div class="bg-green-600 h-2 rounded-full" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-500 dark:text-gray-400">Sharpe Ratio</span> | |
| <span class="font-bold text-blue-500">1.92</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 64%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-500 dark:text-gray-400">Win Rate</span> | |
| <span class="font-bold text-purple-500">63.4%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700"> | |
| <div class="bg-purple-600 h-2 rounded-full" style="width: 63%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-500 dark:text-gray-400">Max Drawdown</span> | |
| <span class="font-bold text-yellow-500">-12.3%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700"> | |
| <div class="bg-yellow-600 h-2 rounded-full" style="width: 34%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-500 dark:text-gray-400">Risk/Reward Ratio</span> | |
| <span class="font-bold text-primary">1:2.8</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700"> | |
| <div class="bg-primary h-2 rounded-full" style="width: 82%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Trading Activity --> | |
| <div class="bg-white dark:bg-darkCard rounded-2xl shadow-md p-6 mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-lg font-bold text-gray-800 dark:text-white">Trading Activity</h3> | |
| <div class="flex space-x-3"> | |
| <button class="px-3 py-1 rounded-lg text-sm bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white">All</button> | |
| <button class="px-3 py-1 rounded-lg text-sm bg-primary text-white">Open</button> | |
| <button class="px-3 py-1 rounded-lg text-sm bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white">Closed</button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="text-left text-gray-500 dark:text-gray-400 text-sm"> | |
| <th class="pb-4">Symbol</th> | |
| <th class="pb-4">Type</th> | |
| <th class="pb-4">Size</th> | |
| <th class="pb-4">Entry Price</th> | |
| <th class="pb-4">Current Price</th> | |
| <th class="pb-4">Profit/Loss</th> | |
| <th class="pb-4">Status</th> | |
| <th class="pb-4"></th> | |
| </tr> | |
| </thead> | |
| <tbody class="text-sm"> | |
| <tr class="border-b border-gray-200 dark:border-gray-700"> | |
| <td class="py-4"> | |
| <div class="flex items-center"> | |
| <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png?v=029" class="h-6 w-6 mr-2" alt="Bitcoin"> | |
| BTC/USDT | |
| </div> | |
| </td> | |
| <td class="py-4"> | |
| <span class="px-2 py-1 rounded bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300">Long</span> | |
| </td> | |
| <td class="py-4">0.85</td> | |
| <td class="py-4">$42,156.30</td> | |
| <td class="py-4 font-medium">$43,287.15</td> | |
| <td class="py-4 font-bold text-green-500">+$961.22</td> | |
| <td class="py-4"> | |
| <span class="px-2 py-1 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300">Open</span> | |
| </td> | |
| <td class="py-4 text-right"> | |
| <button class="text-gray-400 hover:text-primary"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="border-b border-gray-200 dark:border-gray-700"> | |
| <td class="py-4"> | |
| <div class="flex items-center"> | |
| <img src="https://cryptologos.cc/logos/ethereum-eth-logo.png?v=029" class="h-6 w-6 mr-2" alt="Ethereum"> | |
| ETH/USDT | |
| </div> | |
| </td> | |
| <td class="py-4"> | |
| <span class="px-2 py-1 rounded bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300">Short</span> | |
| </td> | |
| <td class="py-4">2.75</td> | |
| <td class="py-4">$2,312.40</td> | |
| <td class="py-4 font-medium">$2,281.75</td> | |
| <td class="py-4 font-bold text-green-500">+$842.63</td> | |
| <td class="py-4"> | |
| <span class="px-2 py-1 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300">Open</span> | |
| </td> | |
| <td class="py-4 text-right"> | |
| <button class="text-gray-400 hover:text-primary"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="border-b border-gray-200 dark:border-gray-700"> | |
| <td class="py-4"> | |
| <div class="flex items-center"> | |
| <img src="https://cryptologos.cc/logos/binance-coin-bnb-logo.png?v=029" class="h-6 w-6 mr-2" alt="BNB"> | |
| BNB/USDT | |
| </div> | |
| </td> | |
| <td class="py-4"> | |
| <span class="px-2 py-1 rounded bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300">Short</span> | |
| </td> | |
| <td class="py-4">3.20</td> | |
| <td class="py-4">$305.75</td> | |
| <td class="py-4 font-medium">$312.85</td> | |
| <td class="py-4 font-bold text-red-500">-$227.20</td> | |
| <td class="py-4"> | |
| <span class="px-2 py-1 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300">Open</span> | |
| </td> | |
| <td class="py-4 text-right"> | |
| <button class="text-gray-400 hover:text-primary"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="py-4"> | |
| <div class="flex items-center"> | |
| <img src="https://cryptologos.cc/logos/solana-sol-logo.png?v=029" class="h-6 w-6 mr-2" alt="Solana"> | |
| SOL/USDT | |
| </div> | |
| </td> | |
| <td class="py-4"> | |
| <span class="px-2 py-1 rounded bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300">Long</span> | |
| </td> | |
| <td class="py-4">15.50</td> | |
| <td class="py-4">$96.35</td> | |
| <td class="py-4 font-medium">$101.20</td> | |
| <td class="py-4 font-bold text-green-500">+$751.75</td> | |
| <td class="py-4"> | |
| <span class="px-2 py-1 rounded bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-300">Closed</span> | |
| </td> | |
| <td class="py-4 text-right"> | |
| <button class="text-gray-400 hover:text-primary"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- API Connection Section --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <div class="bg-gradient-to-r from-primary to-secondary rounded-2xl p-6"> | |
| <div class="flex items-center"> | |
| <div class="mr-4"> | |
| <div class="h-12 w-12 rounded-xl bg-white/30 flex items-center justify-center"> | |
| <i class="fas fa-plug text-white text-xl"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-white">BingX API Connected</h3> | |
| <p class="text-blue-100">Last synced 5 minutes ago</p> | |
| </div> | |
| </div> | |
| <button class="mt-6 w-full py-3 bg-white rounded-xl text-primary font-bold flex items-center justify-center"> | |
| <i class="fas fa-sync mr-2"></i> Sync Now | |
| </button> | |
| </div> | |
| <div class="lg:col-span-2 bg-white dark:bg-darkCard rounded-2xl shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-lg font-bold text-gray-800 dark:text-white">Portfolio Allocation</h3> | |
| <div> | |
| <span class="text-gray-500 dark:text-gray-400 text-sm">Last updated: 5 min ago</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-40 h-40 mr-8"> | |
| <canvas id="allocationChart"></canvas> | |
| </div> | |
| <div class="flex-grow"> | |
| <div class="mb-3"> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-500 dark:text-gray-400 flex items-center"> | |
| <span class="h-3 w-3 bg-primary rounded-full mr-2"></span> | |
| Cryptocurrencies | |
| </span> | |
| <span class="font-medium dark:text-white">68%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700"> | |
| <div class="bg-primary h-2 rounded-full" style="width: 68%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-500 dark:text-gray-400 flex items-center"> | |
| <span class="h-3 w-3 bg-green-500 rounded-full mr-2"></span> | |
| Stocks | |
| </span> | |
| <span class="font-medium dark:text-white">14%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 14%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-500 dark:text-gray-400 flex items-center"> | |
| <span class="h-3 w-3 bg-purple-500 rounded-full mr-2"></span> | |
| Forex | |
| </span> | |
| <span class="font-medium dark:text-white">12%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700"> | |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 12%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-500 dark:text-gray-400 flex items-center"> | |
| <span class="h-3 w-3 bg-yellow-500 rounded-full mr-2"></span> | |
| Commodities | |
| </span> | |
| <span class="font-medium dark:text-white">6%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 6%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| // Dark Mode Toggle | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| themeToggle.addEventListener('click', () => { | |
| document.documentElement.classList.toggle('dark'); | |
| }); | |
| // Charts | |
| const performanceCtx = document.getElementById('performanceChart').getContext('2d'); | |
| const performanceChart = new Chart(performanceCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], | |
| datasets: [{ | |
| label: 'Profit/Loss', | |
| data: [1200, 1900, 1500, 2800, 2200, 3000], | |
| borderColor: '#3b82f6', | |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', | |
| tension: 0.4, | |
| fill: true | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| grid: { | |
| color: 'rgba(0, 0, 0, 0.05)', | |
| borderDash: [5] | |
| }, | |
| ticks: { | |
| callback: function(value) { | |
| return '$' + value; | |
| } | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| display: false | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Portfolio Allocation Chart | |
| const allocationCtx = document.getElementById('allocationChart').getContext('2d'); | |
| const allocationChart = new Chart(allocationCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['Cryptocurrencies', 'Stocks', 'Forex', 'Commodities'], | |
| datasets: [{ | |
| data: [68, 14, 12, 6], | |
| backgroundColor: [ | |
| '#3b82f6', | |
| '#10b981', | |
| '#8b5cf6', | |
| '#f59e0b' | |
| ], | |
| borderWidth: 0, | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| cutout: '65%', | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| return `${context.label}: ${context.parsed}%`; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Simulate live data updates | |
| function simulateLiveData() { | |
| // Update balance with small random fluctuation | |
| const balanceElement = document.querySelector('.trading-card:first-child h3'); | |
| const balanceValue = parseFloat(balanceElement.textContent.replace('$', '').replace(',', '')); | |
| const newBalance = balanceValue * (1 + (Math.random() * 0.02 - 0.01)); | |
| balanceElement.textContent = '$' + newBalance.toFixed(2); | |
| // Update open position prices | |
| const positionPrices = document.querySelectorAll('tbody tr td:nth-child(5)'); | |
| positionPrices.forEach(price => { | |
| const currentValue = parseFloat(price.textContent.replace('$', '').replace(',', '')); | |
| const changePercent = (Math.random() * 4 - 2) / 100; | |
| const newValue = currentValue * (1 + changePercent); | |
| price.textContent = '$' + newValue.toFixed(2); | |
| price.classList.remove('text-green-500', 'text-red-500'); | |
| if (changePercent > 0) { | |
| price.classList.add('text-green-500'); | |
| } else if (changePercent < 0) { | |
| price.classList.add('text-red-500'); | |
| } | |
| }); | |
| } | |
| setInterval(simulateLiveData, 8000); | |
| </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=EricSam/bingx-monitoring" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |