Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Crypto Trading Platform | Ultimate Bot</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> | |
| @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: #f8fafc; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%); | |
| } | |
| .sidebar-item:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .trading-card: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); | |
| } | |
| .blink { | |
| animation: blink-animation 1s steps(5, start) infinite; | |
| } | |
| @keyframes blink-animation { | |
| to { opacity: 0.5; } | |
| } | |
| #priceChart { | |
| height: 300px; | |
| } | |
| .hide-scrollbar::-webkit-scrollbar { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="text-gray-800"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-64 gradient-bg text-white"> | |
| <div class="flex items-center justify-center h-16 px-4 border-b border-blue-800"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-robot text-2xl text-blue-300 mr-2"></i> | |
| <span class="text-xl font-semibold">TradeBot Pro</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col flex-grow overflow-y-auto"> | |
| <!-- User Profile --> | |
| <div class="px-4 py-6 flex items-center space-x-4 border-b border-blue-800"> | |
| <div class="relative"> | |
| <img class="h-12 w-12 rounded-full border-2 border-blue-300" src="https://ui-avatars.com/api/?name=John+Doe&background=1e40af&color=fff" alt="User avatar"> | |
| <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white bg-green-400"></span> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">John Doe</p> | |
| <p class="text-xs text-blue-200">Pro Member</p> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="flex-1 px-2 py-4 space-y-1"> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-white bg-blue-900"> | |
| <i class="fas fa-chart-line mr-3"></i> | |
| Dashboard | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-blue-100 hover:text-white"> | |
| <i class="fas fa-wallet mr-3"></i> | |
| Wallet | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-blue-100 hover:text-white"> | |
| <i class="fas fa-robot mr-3"></i> | |
| Trading Bot | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-blue-100 hover:text-white"> | |
| <i class="fas fa-exchange-alt mr-3"></i> | |
| Transactions | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-blue-100 hover:text-white"> | |
| <i class="fas fa-cog mr-3"></i> | |
| Settings | |
| </a> | |
| <div class="px-4 pt-6"> | |
| <p class="text-xs font-semibold text-blue-300 uppercase tracking-wider">Trading</p> | |
| </div> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-blue-100 hover:text-white"> | |
| <i class="fas fa-chart-bar mr-3"></i> | |
| Analytics | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-blue-100 hover:text-white"> | |
| <i class="fas fa-history mr-3"></i> | |
| History | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-blue-100 hover:text-white"> | |
| <i class="fas fa-flask mr-3"></i> | |
| Simulation | |
| </a> | |
| </nav> | |
| </div> | |
| <div class="p-4 border-t border-blue-800"> | |
| <a href="#" class="flex items-center space-x-2 text-blue-200 hover:text-white text-sm"> | |
| <i class="fas fa-sign-out-alt"></i> | |
| <span>Sign out</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex flex-col flex-1 overflow-hidden"> | |
| <!-- Mobile header --> | |
| <div class="md:hidden flex items-center justify-between px-4 py-3 bg-white border-b border-gray-200"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-robot text-xl text-blue-600 mr-2"></i> | |
| <span class="text-lg font-semibold">TradeBot</span> | |
| </div> | |
| <button id="mobileMenuButton" class="text-gray-500"> | |
| <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> | |
| </svg> | |
| </button> | |
| </div> | |
| <!-- Mobile sidebar (hidden by default) --> | |
| <div id="mobileSidebar" class="hidden md:hidden gradient-bg text-white"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-blue-900">Dashboard</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-200 hover:text-white hover:bg-blue-800">Wallet</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-200 hover:text-white hover:bg-blue-800">Trading Bot</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-200 hover:text-white hover:bg-blue-800">Transactions</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-200 hover:text-white hover:bg-blue-800">Settings</a> | |
| </div> | |
| <div class="pt-4 pb-3 border-t border-blue-800"> | |
| <div class="flex items-center px-5"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=John+Doe&background=1e40af&color=fff" alt="User avatar"> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="text-base font-medium text-white">John Doe</div> | |
| <div class="text-sm font-medium text-blue-200">Pro Member</div> | |
| </div> | |
| </div> | |
| <div class="mt-3 px-2 space-y-1"> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-200 hover:text-white hover:bg-blue-800">Sign out</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main content --> | |
| <div class="flex-1 overflow-auto"> | |
| <!-- Top Bar --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8 flex justify-between items-center"> | |
| <h1 class="text-lg font-semibold text-gray-900">Dashboard</h1> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none"> | |
| <span class="sr-only">Notifications</span> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> | |
| </div> | |
| <div class="relative"> | |
| <button id="userMenuButton" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none"> | |
| <span class="sr-only">Open user menu</span> | |
| <img class="h-8 w-8 rounded-full" src="https://ui-avatars.com/api/?name=John+Doe&background=1e40af&color=fff" alt="User avatar"> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <!-- Stats --> | |
| <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-8"> | |
| <!-- Balance Card --> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="p-5"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-blue-500 rounded-lg p-3"> | |
| <i class="fas fa-wallet text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dl> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Account Balance</dt> | |
| <dd class="flex items-baseline"> | |
| <div class="text-2xl font-semibold text-gray-900">$12,489.42</div> | |
| </dd> | |
| </dl> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-5 py-3"> | |
| <div class="text-sm"> | |
| <a href="#" class="font-medium text-blue-700 hover:text-blue-900">View wallet</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bot Status Card --> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="p-5"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-green-500 rounded-lg p-3"> | |
| <i class="fas fa-robot text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dl> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Bot Status</dt> | |
| <dd class="flex items-baseline"> | |
| <div class="text-2xl font-semibold text-gray-900">Running</div> | |
| <span class="ml-2 flex items-center text-sm font-medium text-green-600"> | |
| <span class="flex h-2 w-2 rounded-full bg-green-400 mr-1"></span> | |
| Live Trading | |
| </span> | |
| </dd> | |
| </dl> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-5 py-3"> | |
| <div class="text-sm flex justify-between"> | |
| <a href="#" class="font-medium text-blue-700 hover:text-blue-900">View logs</a> | |
| <button class="font-medium text-red-600 hover:text-red-900">Stop Bot</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Accuracy Card --> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="p-5"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-purple-500 rounded-lg p-3"> | |
| <i class="fas fa-bullseye text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dl> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Accuracy</dt> | |
| <dd class="flex items-baseline"> | |
| <div id="accuracyValue" class="text-2xl font-semibold text-gray-900">95.0%</div> | |
| <span class="ml-2 text-sm font-medium text-green-600">+3%</span> | |
| </dd> | |
| </dl> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-5 py-3"> | |
| <div class="text-sm"> | |
| <a href="#" class="font-medium text-blue-700 hover:text-blue-900">View analytics</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Trades Today Card --> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="p-5"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-yellow-500 rounded-lg p-3"> | |
| <i class="fas fa-exchange-alt text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dl> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Today's Trades</dt> | |
| <dd class="flex items-baseline"> | |
| <div class="text-2xl font-semibold text-gray-900">24</div> | |
| <span class="ml-2 text-sm font-medium text-green-600">+6</span> | |
| </dd> | |
| </dl> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-5 py-3"> | |
| <div class="text-sm"> | |
| <a href="#" class="font-medium text-blue-700 hover:text-blue-900">View history</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Charts and Trading Data --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8"> | |
| <!-- Price Chart --> | |
| <div class="bg-white p-6 rounded-lg shadow col-span-2"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-900">BTC/USD Price Chart</h2> | |
| <div> | |
| <select class="border-gray-300 rounded-md shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 text-sm"> | |
| <option>24h</option> | |
| <option>7d</option> | |
| <option selected>30d</option> | |
| <option>90d</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div id="priceChart" class="border rounded-lg p-4"> | |
| <!-- This would be a chart in a real implementation --> | |
| <div class="h-full w-full flex items-center justify-center text-gray-400"> | |
| <div class="text-center"> | |
| <i class="fas fa-chart-line text-4xl mb-2"></i> | |
| <p>Live Price Chart</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Trades --> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <h2 class="text-lg font-semibold text-gray-900 mb-4">Recent Trades</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-arrow-up text-green-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Buy BTC</div> | |
| <div class="text-sm text-gray-500">0.0025 BTC @ $42,318.45</div> | |
| </div> | |
| <div class="ml-auto text-right"> | |
| <div class="text-sm font-medium text-green-600">+$3.42</div> | |
| <div class="text-sm text-gray-500">12:45 PM</div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-100 flex items-center justify-center"> | |
| <i class="fas fa-arrow-down text-red-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Sell ETH</div> | |
| <div class="text-sm text-gray-500">0.15 ETH @ $3,215.78</div> | |
| </div> | |
| <div class="ml-auto text-right"> | |
| <div class="text-sm font-medium text-red-600">-$5.21</div> | |
| <div class="text-sm text-gray-500">11:32 AM</div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-arrow-up text-green-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Buy SOL</div> | |
| <div class="text-sm text-gray-500">5.2 SOL @ $142.15</div> | |
| </div> | |
| <div class="ml-auto text-right"> | |
| <div class="text-sm font-medium text-green-600">+$12.45</div> | |
| <div class="text-sm text-gray-500">10:18 AM</div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-100 flex items-center justify-center"> | |
| <i class="fas fa-arrow-down text-red-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Sell ADA</div> | |
| <div class="text-sm text-gray-500">125 ADA @ $1.25</div> | |
| </div> | |
| <div class="ml-auto text-right"> | |
| <div class="text-sm font-medium text-red-600">-$3.80</div> | |
| <div class="text-sm text-gray-500">09:45 AM</div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-arrow-up text-green-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Buy BTC</div> | |
| <div class="text-sm text-gray-500">0.0018 BTC @ $42,056.32</div> | |
| </div> | |
| <div class="ml-auto text-right"> | |
| <div class="text-sm font-medium text-green-600">+$8.13</div> | |
| <div class="text-sm text-gray-500">08:32 AM</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-center"> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-900">View all trades</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bot Control and Simulation --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8"> | |
| <!-- Bot Control Panel --> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <h2 class="text-lg font-semibold text-gray-900 mb-4">Bot Control Panel</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Trading Mode</label> | |
| <div class="flex space-x-4"> | |
| <button class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"> | |
| Live Trading | |
| </button> | |
| <button class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| Simulation | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Strategy</label> | |
| <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> | |
| <option>Moving Average</option> | |
| <option selected>RSI</option> | |
| <option>MACD</option> | |
| <option>Bollinger Bands</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Risk Level</label> | |
| <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> | |
| <option>Low</option> | |
| <option selected>Medium</option> | |
| <option>High</option> | |
| <option>Aggressive</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Coin Pairs</label> | |
| <div class="mt-1 flex flex-wrap gap-2"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"> | |
| BTC/USD | |
| <button type="button" class="ml-1.5 inline-flex text-blue-500 focus:outline-none"> | |
| <span class="sr-only">Remove</span> | |
| <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8"> | |
| <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" /> | |
| </svg> | |
| </button> | |
| </span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"> | |
| ETH/USD | |
| <button type="button" class="ml-1.5 inline-flex text-blue-500 focus:outline-none"> | |
| <span class="sr-only">Remove</span> | |
| <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8"> | |
| <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" /> | |
| </svg> | |
| </button> | |
| </span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"> | |
| SOL/USD | |
| <button type="button" class="ml-1.5 inline-flex text-blue-500 focus:outline-none"> | |
| <span class="sr-only">Remove</span> | |
| <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8"> | |
| <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" /> | |
| </svg> | |
| </button> | |
| </span> | |
| <button type="button" class="inline-flex items-center px-2 py-0.5 border border-transparent text-xs font-medium rounded text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <svg class="-ml-0.5 mr-1 h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path> | |
| </svg> | |
| Add | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Max Trade Amount ($)</label> | |
| <input type="number" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" value="500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Daily Budget ($)</label> | |
| <input type="number" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" value="2000"> | |
| </div> | |
| </div> | |
| <div class="flex justify-between pt-4"> | |
| <button class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| Save Settings | |
| </button> | |
| <div class="space-x-2"> | |
| <button id="stopBotBtn" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| Stop Bot | |
| </button> | |
| <button id="startBotBtn" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"> | |
| Start Bot | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Simulation Panel --> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <h2 class="text-lg font-semibold text-gray-900 mb-4">Simulation Panel</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex items-center justify-between"> | |
| <label class="block text-sm font-medium text-gray-700">Training Mode</label> | |
| <span class="text-xs font-medium text-green-800 bg-green-100 px-2 py-1 rounded-full">95.2% Accuracy</span> | |
| </div> | |
| <p class="mt-1 text-sm text-gray-500">Run simulations to find the best trading strategy</p> | |
| </div> | |
| <div class="space-y-3"> | |
| <label class="block text-sm font-medium text-gray-700">Simulation Parameters</label> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-xs font-medium text-gray-500 mb-1">Time Period</label> | |
| <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> | |
| <option>1 week</option> | |
| <option selected>1 month</option> | |
| <option>3 months</option> | |
| <option>6 months</option> | |
| <option>1 year</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-xs font-medium text-gray-500 mb-1">Data Granularity</label> | |
| <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> | |
| <option>1 minute</option> | |
| <option>5 minutes</option> | |
| <option>15 minutes</option> | |
| <option selected>1 hour</option> | |
| <option>1 day</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-xs font-medium text-gray-500 mb-1">Market Conditions</label> | |
| <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> | |
| <option>Bull Market</option> | |
| <option selected>Mixed Market</option> | |
| <option>Bear Market</option> | |
| <option>High Volatility</option> | |
| <option>Low Volatility</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="pt-2"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Simulate Until Accuracy</label> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 85%"></div> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700">85%</span> | |
| <input type="number" class="w-20 border border-gray-300 rounded-md shadow-sm py-1 px-2 text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" value="95"> | |
| </div> | |
| </div> | |
| <div class="pt-2"> | |
| <button class="w-full px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"> | |
| <i class="fas fa-play mr-2"></i> Run Simulation | |
| </button> | |
| <div class="mt-2 flex justify-between text-sm text-gray-500"> | |
| <span>Last run: 2 hours ago</span> | |
| <span>120 simulations</span> | |
| </div> | |
| </div> | |
| <div class="pt-4"> | |
| <h3 class="text-sm font-medium text-gray-700 mb-2">Latest Simulation Results</h3> | |
| <div class="bg-gray-50 rounded-lg p-4"> | |
| <div class="grid grid-cols-3 gap-4 text-center"> | |
| <div> | |
| <p class="text-xs text-gray-500">Win Rate</p> | |
| <p class="font-semibold text-green-600">82.6%</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500">Avg Profit</p> | |
| <p class="font-semibold text-green-600">+$3.42</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500">Daily ROI</p> | |
| <p class="font-semibold text-green-600">1.8%</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Wallet and Transactions --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Wallet Quick Actions --> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <h2 class="text-lg font-semibold text-gray-900 mb-4">Wallet</h2> | |
| <div class="space-y-4"> | |
| <div class="border-b pb-4"> | |
| <div class="flex justify-between"> | |
| <span class="text-sm font-medium text-gray-500">Available Balance</span> | |
| <span class="text-sm font-semibold">$12,489.42</span> | |
| </div> | |
| <div class="mt-2 flex justify-between"> | |
| <span class="text-sm font-medium text-gray-500">Invested</span> | |
| <span class="text-sm font-semibold">$2,150.00</span> | |
| </div> | |
| </div> | |
| <div> | |
| <button class="w-full px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 mb-3"> | |
| <i class="fas fa-plus mr-2"></i> Deposit Funds | |
| </button> | |
| <button class="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <i class="fas fa-minus mr-2"></i> Withdraw Funds | |
| </button> | |
| </div> | |
| <div class="pt-2"> | |
| <h3 class="text-sm font-medium text-gray-700 mb-2">Crypto Holdings</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <img class="h-6 w-6 mr-2" src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="Bitcoin"> | |
| <span class="text-sm font-medium">Bitcoin</span> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm font-semibold">0.0245 BTC</p> | |
| <p class="text-xs text-gray-500">$1,032.45</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <img class="h-6 w-6 mr-2" src="https://cryptologos.cc/logos/ethereum-eth-logo.png" alt="Ethereum"> | |
| <span class="text-sm font-medium">Ethereum</span> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm font-semibold">1.42 ETH</p> | |
| <p class="text-xs text-gray-500">$4,562.30</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <img class="h-6 w-6 mr-2" src="https://cryptologos.cc/logos/solana-sol-logo.png" alt="Solana"> | |
| <span class="text-sm font-medium">Solana</span> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm font-semibold">15.8 SOL</p> | |
| <p class="text-xs text-gray-500">$2,245.70</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Transactions --> | |
| <div class="bg-white p-6 rounded-lg shadow col-span-2"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-900">Recent Transactions</h2> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-900">View all</a> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Coin</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10:42 AM</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Buy</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <div class="flex items-center"> | |
| <img class="h-5 w-5 mr-2" src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="Bitcoin"> | |
| BTC | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">+0.0025 BTC</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">9:15 AM</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Sell</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <div class="flex items-center"> | |
| <img class="h-5 w-5 mr-2" src="https://cryptologos.cc/logos/ethereum-eth-logo.png" alt="Ethereum"> | |
| ETH | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-0.15 ETH</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8:32 AM</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Withdrawal</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">USD</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-$500.00</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Deposit</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">USD</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">+$2,000.00</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Buy</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <div class="flex items-center"> | |
| <img class="h-5 w-5 mr-2" src="https://cryptologos.cc/logos/solana-sol-logo.png" alt="Solana"> | |
| SOL | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">+5.2 SOL</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Modal for Admin Panel --> | |
| <div id="adminModal" class="fixed z-10 inset-0 overflow-y-auto hidden"> | |
| <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> | |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> | |
| </div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full"> | |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | |
| <div class="sm:flex sm:items-start"> | |
| <div class="mt-3 text-center sm:mt-0 sm:text-left w-full"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title"> | |
| Admin Dashboard | |
| </h3> | |
| <div class="mt-4 border-t pt-4"> | |
| <!-- Admin Tabs --> | |
| <div class="border-b border-gray-200"> | |
| <nav class="-mb-px flex space-x-8"> | |
| <a href="#" class="border-blue-500 text-blue-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Users</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Transactions</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Coins</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Analytics</a> | |
| </nav> | |
| </div> | |
| <!-- Admin Content --> | |
| <div class="mt-4"> | |
| <h4 class="font-medium text-gray-900">User Management</h4> | |
| <div class="mt-4 overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <img class="h-8 w-8 rounded-full mr-2" src="https://ui-avatars.com/api/?name=John+Doe&background=1e40af&color=fff" alt="User avatar"> | |
| <div> | |
| <div class="text-sm font-medium text-gray-900">John Doe</div> | |
| <div class="text-sm text-gray-500">Pro Member</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">john.doe@example.com</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">User</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2">Edit</button> | |
| <button class="text-red-600 hover:text-red-900">Suspend</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <img class="h-8 w-8 rounded-full mr-2" src="https://ui-avatars.com/api/?name=Jane+Smith&background=1e40af&color=fff" alt="User avatar"> | |
| <div> | |
| <div class="text-sm font-medium text-gray-900">Jane Smith</div> | |
| <div class="text-sm text-gray-500">Basic Member</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">jane.smith@example.com</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">User</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2">Edit</button> | |
| <button class="text-green-600 hover:text-green-900">Approve</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> | |
| <button type="button" id="closeAdminModal" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Close | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Authentication state | |
| const authState = { | |
| isAuthenticated: true, | |
| isAdmin: true, | |
| user: { | |
| name: 'John Doe', | |
| email: 'admin@tradebot.com', | |
| role: 'admin', | |
| balance: 12489.42, | |
| invested: 2150.00 | |
| } | |
| }; | |
| // Initialize app | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Mobile menu toggle | |
| document.getElementById('mobileMenuButton').addEventListener('click', function() { | |
| const mobileSidebar = document.getElementById('mobileSidebar'); | |
| mobileSidebar.classList.toggle('hidden'); | |
| }); | |
| // Admin modal toggle | |
| const userMenuButton = document.getElementById('userMenuButton'); | |
| const adminModal = document.getElementById('adminModal'); | |
| const closeAdminModal = document.getElementById('closeAdminModal'); | |
| if (userMenuButton && adminModal && closeAdminModal) { | |
| userMenuButton.addEventListener('click', function() { | |
| if (authState.isAdmin) { | |
| adminModal.classList.remove('hidden'); | |
| } | |
| }); | |
| closeAdminModal.addEventListener('click', function() { | |
| adminModal.classList.add('hidden'); | |
| }); | |
| } | |
| // Initialize trading bot controls | |
| initBotControls(); | |
| // Initialize wallet | |
| updateWalletBalance(); | |
| // Initialize price updates | |
| initPriceUpdates(); | |
| }); | |
| // Trading bot functions | |
| function initBotControls() { | |
| const startBotBtn = document.getElementById('startBotBtn'); | |
| const stopBotBtn = document.getElementById('stopBotBtn'); | |
| let isBotRunning = false; | |
| if (startBotBtn) { | |
| startBotBtn.addEventListener('click', function() { | |
| isBotRunning = true; | |
| document.getElementById('botStatus').textContent = 'Running'; | |
| document.getElementById('botStatusLight').classList.add('bg-green-400'); | |
| document.getElementById('botStatusLight').classList.remove('bg-gray-400'); | |
| startTradingSimulation(); | |
| }); | |
| } | |
| if (stopBotBtn) { | |
| stopBotBtn.addEventListener('click', function() { | |
| isBotRunning = false; | |
| document.getElementById('botStatus').textContent = 'Stopped'; | |
| document.getElementById('botStatusLight').classList.remove('bg-green-400'); | |
| document.getElementById('botStatusLight').classList.add('bg-gray-400'); | |
| }); | |
| } | |
| } | |
| // Wallet functions | |
| function updateWalletBalance() { | |
| document.getElementById('walletBalance').textContent = `${authState.user.balance.toFixed(2)}`; | |
| document.getElementById('investedAmount').textContent = `${authState.user.invested.toFixed(2)}`; | |
| } | |
| // Price updates | |
| function initPriceUpdates() { | |
| function updatePrices() { | |
| const coins = { | |
| BTC: (Math.random() * 2000 + 40000).toFixed(2), | |
| ETH: (Math.random() * 500 + 3000).toFixed(2), | |
| SOL: (Math.random() * 50 + 100).toFixed(2) | |
| }; | |
| document.querySelectorAll('.price-update').forEach(el => { | |
| const coin = el.dataset.coin; | |
| if (coins[coin]) { | |
| el.textContent = `${coins[coin]}`; | |
| } | |
| }); | |
| // Update accuracy metrics dynamically | |
| const accuracy = 95 + (Math.random() * 0.8 - 0.4); | |
| document.getElementById('accuracyValue').textContent = accuracy.toFixed(1) + '%'; | |
| } | |
| setInterval(updatePrices, 5000); | |
| updatePrices(); | |
| } | |
| // Trading simulation | |
| function startTradingSimulation() { | |
| let progress = 0; | |
| const progressBar = document.getElementById('simProgress'); | |
| const progressText = document.getElementById('simProgressText'); | |
| const simInterval = setInterval(() => { | |
| progress += 0.5; | |
| if (progress > 100) progress = 0; | |
| progressBar.style.width = `${progress}%`; | |
| progressText.textContent = `${Math.floor(progress)}%`; | |
| // Simulate profit updates | |
| if (progress % 5 === 0) { | |
| const profitChange = (Math.random() * 10 - 1).toFixed(2); | |
| const currentBalance = authState.user.balance + parseFloat(profitChange); | |
| authState.user.balance = currentBalance > 0 ? currentBalance : 0; | |
| updateWalletBalance(); | |
| } | |
| }, 100); | |
| } | |
| </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=FAROU71/tradebot-pro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |