Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Telegram Trading 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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%); | |
| } | |
| .telegram-bg { | |
| background-color: #0088cc; | |
| } | |
| .telegram-hover:hover { | |
| background-color: #0077b3; | |
| } | |
| .trading-card { | |
| transition: all 0.3s ease; | |
| } | |
| .trading-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .blink { | |
| animation: blink-animation 1s steps(5, start) infinite; | |
| } | |
| @keyframes blink-animation { | |
| to { | |
| opacity: 0.5; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="flex justify-between items-center mb-8"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full telegram-bg flex items-center justify-center mr-4"> | |
| <i class="fas fa-robot text-white text-xl"></i> | |
| </div> | |
| <div> | |
| <h1 class="text-2xl font-bold text-gray-800">Telegram Trading Bot</h1> | |
| <p class="text-gray-600">Automated cryptocurrency trading</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg font-medium"> | |
| <i class="fas fa-play mr-2"></i> Start Bot | |
| </button> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg font-medium"> | |
| <i class="fas fa-cog mr-2"></i> Settings | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Stats Dashboard --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8"> | |
| <div class="bg-white rounded-xl shadow-md p-6 trading-card"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Total Profit</p> | |
| <h3 class="text-2xl font-bold text-green-500">$2,458.32</h3> | |
| </div> | |
| <div class="bg-green-100 text-green-800 p-2 rounded-lg"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| </div> | |
| <p class="text-green-500 text-sm mt-2"><i class="fas fa-arrow-up mr-1"></i> 12.5% this week</p> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 trading-card"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Active Trades</p> | |
| <h3 class="text-2xl font-bold text-blue-500">8</h3> | |
| </div> | |
| <div class="bg-blue-100 text-blue-800 p-2 rounded-lg"> | |
| <i class="fas fa-exchange-alt"></i> | |
| </div> | |
| </div> | |
| <p class="text-blue-500 text-sm mt-2"><i class="fas fa-info-circle mr-1"></i> 4 buy / 4 sell</p> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 trading-card"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500 text-sm">24h Volume</p> | |
| <h3 class="text-2xl font-bold text-purple-500">$42,158</h3> | |
| </div> | |
| <div class="bg-purple-100 text-purple-800 p-2 rounded-lg"> | |
| <i class="fas fa-coins"></i> | |
| </div> | |
| </div> | |
| <p class="text-purple-500 text-sm mt-2"><i class="fas fa-arrow-up mr-1"></i> 8.3% from yesterday</p> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 trading-card"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Success Rate</p> | |
| <h3 class="text-2xl font-bold text-orange-500">78.6%</h3> | |
| </div> | |
| <div class="bg-orange-100 text-orange-800 p-2 rounded-lg"> | |
| <i class="fas fa-trophy"></i> | |
| </div> | |
| </div> | |
| <p class="text-orange-500 text-sm mt-2"><i class="fas fa-check-circle mr-1"></i> 112/143 trades</p> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Trading Controls --> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="gradient-bg px-6 py-4"> | |
| <h2 class="text-xl font-bold text-white">Trading Controls</h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="pair"> | |
| Trading Pair | |
| </label> | |
| <div class="relative"> | |
| <select id="pair" class="block appearance-none w-full bg-gray-100 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded-lg leading-tight focus:outline-none focus:bg-white focus:border-blue-500"> | |
| <option>BTC/USDT</option> | |
| <option>ETH/USDT</option> | |
| <option>SOL/USDT</option> | |
| <option>ADA/USDT</option> | |
| <option>DOT/USDT</option> | |
| </select> | |
| <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="amount"> | |
| Amount (USDT) | |
| </label> | |
| <input id="amount" type="number" class="w-full bg-gray-100 border border-gray-200 text-gray-700 py-3 px-4 rounded-lg leading-tight focus:outline-none focus:bg-white focus:border-blue-500" placeholder="100.00"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="leverage"> | |
| Leverage | |
| </label> | |
| <input id="leverage" type="number" min="1" max="20" class="w-full bg-gray-100 border border-gray-200 text-gray-700 py-3 px-4 rounded-lg leading-tight focus:outline-none focus:bg-white focus:border-blue-500" placeholder="5" value="5"> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2"> | |
| Strategy | |
| </label> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <button class="bg-blue-100 text-blue-800 py-2 px-4 rounded-lg font-medium hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-bolt mr-2"></i> Scalping | |
| </button> | |
| <button class="bg-green-100 text-green-800 py-2 px-4 rounded-lg font-medium hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-green-500"> | |
| <i class="fas fa-wave-square mr-2"></i> Swing | |
| </button> | |
| <button class="bg-purple-100 text-purple-800 py-2 px-4 rounded-lg font-medium hover:bg-purple-200 focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <i class="fas fa-robot mr-2"></i> AI | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <button id="buy-btn" class="bg-green-500 hover:bg-green-600 text-white py-3 px-6 rounded-lg font-bold text-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50"> | |
| <i class="fas fa-arrow-up mr-2"></i> BUY | |
| </button> | |
| <button id="sell-btn" class="bg-red-500 hover:bg-red-600 text-white py-3 px-6 rounded-lg font-bold text-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50"> | |
| <i class="fas fa-arrow-down mr-2"></i> SELL | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Trades --> | |
| <div class="bg-white rounded-xl shadow-md mt-8"> | |
| <div class="gradient-bg px-6 py-4"> | |
| <h2 class="text-xl font-bold text-white">Recent Trades</h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead> | |
| <tr> | |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pair</th> | |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th> | |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th> | |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th> | |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Profit</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap font-medium">BTC/USDT</td> | |
| <td class="px-4 py-3 whitespace-nowrap"><span class="bg-green-100 text-green-800 py-1 px-2 rounded-full text-xs font-medium">BUY</span></td> | |
| <td class="px-4 py-3 whitespace-nowrap">0.05 BTC</td> | |
| <td class="px-4 py-3 whitespace-nowrap">$42,158.32</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-green-500 font-medium">+$124.50</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap font-medium">ETH/USDT</td> | |
| <td class="px-4 py-3 whitespace-nowrap"><span class="bg-red-100 text-red-800 py-1 px-2 rounded-full text-xs font-medium">SELL</span></td> | |
| <td class="px-4 py-3 whitespace-nowrap">1.2 ETH</td> | |
| <td class="px-4 py-3 whitespace-nowrap">$2,458.75</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-green-500 font-medium">+$58.20</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap font-medium">SOL/USDT</td> | |
| <td class="px-4 py-3 whitespace-nowrap"><span class="bg-green-100 text-green-800 py-1 px-2 rounded-full text-xs font-medium">BUY</span></td> | |
| <td class="px-4 py-3 whitespace-nowrap">25 SOL</td> | |
| <td class="px-4 py-3 whitespace-nowrap">$98.42</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-red-500 font-medium">-$12.30</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-3 whitespace-nowrap font-medium">ADA/USDT</td> | |
| <td class="px-4 py-3 whitespace-nowrap"><span class="bg-red-100 text-red-800 py-1 px-2 rounded-full text-xs font-medium">SELL</span></td> | |
| <td class="px-4 py-3 whitespace-nowrap">500 ADA</td> | |
| <td class="px-4 py-3 whitespace-nowrap">$0.42</td> | |
| <td class="px-4 py-3 whitespace-nowrap text-green-500 font-medium">+$8.75</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Telegram Bot Info --> | |
| <div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="telegram-bg px-6 py-4"> | |
| <h2 class="text-xl font-bold text-white">Telegram Bot Setup</h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="mb-6"> | |
| <h3 class="font-bold text-lg mb-2">Bot Connection</h3> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full telegram-bg flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-white"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">@CryptoTraderBot</p> | |
| <p class="text-sm text-gray-500">Last active: 2 min ago</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 p-4 rounded-lg mb-4"> | |
| <p class="text-sm text-gray-700 mb-2">To connect your bot:</p> | |
| <ol class="list-decimal list-inside text-sm space-y-1"> | |
| <li>Search for @CryptoTraderBot in Telegram</li> | |
| <li>Start a conversation with the bot</li> | |
| <li>Send your API key to authenticate</li> | |
| <li>Use /start to begin trading</li> | |
| </ol> | |
| </div> | |
| <button class="w-full telegram-bg telegram-hover text-white py-3 px-4 rounded-lg font-medium"> | |
| <i class="fab fa-telegram mr-2"></i> Open Telegram | |
| </button> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-bold text-lg mb-2">API Configuration</h3> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="api-key"> | |
| Exchange API Key | |
| </label> | |
| <div class="relative"> | |
| <input id="api-key" type="password" class="w-full bg-gray-100 border border-gray-200 text-gray-700 py-3 px-4 rounded-lg leading-tight focus:outline-none focus:bg-white focus:border-blue-500" placeholder="Enter your API key"> | |
| <button class="absolute right-3 top-3 text-gray-500 hover:text-gray-700" onclick="toggleApiKeyVisibility()"> | |
| <i class="fas fa-eye" id="api-key-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="api-secret"> | |
| Exchange API Secret | |
| </label> | |
| <div class="relative"> | |
| <input id="api-secret" type="password" class="w-full bg-gray-100 border border-gray-200 text-gray-700 py-3 px-4 rounded-lg leading-tight focus:outline-none focus:bg-white focus:border-blue-500" placeholder="Enter your API secret"> | |
| <button class="absolute right-3 top-3 text-gray-500 hover:text-gray-700" onclick="toggleApiSecretVisibility()"> | |
| <i class="fas fa-eye" id="api-secret-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-3 px-4 rounded-lg font-medium"> | |
| <i class="fas fa-save mr-2"></i> Save API Settings | |
| </button> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg mb-2">Bot Status</h3> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-700">Trading Enabled</span> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-500"></div> | |
| </label> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-700">Notifications</span> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500"></div> | |
| </label> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-700">Auto Restart</span> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer"> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500"></div> | |
| </label> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-700">Risk Management</span> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-500"></div> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="bg-white rounded-xl shadow-md mt-8"> | |
| <div class="gradient-bg px-6 py-4"> | |
| <h2 class="text-xl font-bold text-white">Quick Actions</h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <button class="bg-yellow-100 text-yellow-800 py-3 px-4 rounded-lg font-medium hover:bg-yellow-200"> | |
| <i class="fas fa-stopwatch mr-2"></i> Pause | |
| </button> | |
| <button class="bg-red-100 text-red-800 py-3 px-4 rounded-lg font-medium hover:bg-red-200"> | |
| <i class="fas fa-stop-circle mr-2"></i> Stop | |
| </button> | |
| <button class="bg-blue-100 text-blue-800 py-3 px-4 rounded-lg font-medium hover:bg-blue-200"> | |
| <i class="fas fa-sync-alt mr-2"></i> Refresh | |
| </button> | |
| <button class="bg-purple-100 text-purple-800 py-3 px-4 rounded-lg font-medium hover:bg-purple-200"> | |
| <i class="fas fa-history mr-2"></i> Logs | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Toggle API key visibility | |
| function toggleApiKeyVisibility() { | |
| const apiKeyInput = document.getElementById('api-key'); | |
| const eyeIcon = document.getElementById('api-key-eye'); | |
| if (apiKeyInput.type === 'password') { | |
| apiKeyInput.type = 'text'; | |
| eyeIcon.classList.remove('fa-eye'); | |
| eyeIcon.classList.add('fa-eye-slash'); | |
| } else { | |
| apiKeyInput.type = 'password'; | |
| eyeIcon.classList.remove('fa-eye-slash'); | |
| eyeIcon.classList.add('fa-eye'); | |
| } | |
| } | |
| // Toggle API secret visibility | |
| function toggleApiSecretVisibility() { | |
| const apiSecretInput = document.getElementById('api-secret'); | |
| const eyeIcon = document.getElementById('api-secret-eye'); | |
| if (apiSecretInput.type === 'password') { | |
| apiSecretInput.type = 'text'; | |
| eyeIcon.classList.remove('fa-eye'); | |
| eyeIcon.classList.add('fa-eye-slash'); | |
| } else { | |
| apiSecretInput.type = 'password'; | |
| eyeIcon.classList.remove('fa-eye-slash'); | |
| eyeIcon.classList.add('fa-eye'); | |
| } | |
| } | |
| // Simulate buy/sell actions | |
| document.getElementById('buy-btn').addEventListener('click', function() { | |
| simulateTrade('BUY'); | |
| }); | |
| document.getElementById('sell-btn').addEventListener('click', function() { | |
| simulateTrade('SELL'); | |
| }); | |
| function simulateTrade(type) { | |
| const pair = document.getElementById('pair').value; | |
| const amount = document.getElementById('amount').value || '100.00'; | |
| const leverage = document.getElementById('leverage').value || '5'; | |
| // Create notification | |
| const notification = document.createElement('div'); | |
| notification.className = `fixed bottom-4 right-4 bg-white shadow-lg rounded-lg p-4 max-w-sm border-l-4 ${type === 'BUY' ? 'border-green-500' : 'border-red-500'}`; | |
| notification.innerHTML = ` | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 ${type === 'BUY' ? 'text-green-500' : 'text-red-500'} text-xl mr-3"> | |
| <i class="fas ${type === 'BUY' ? 'fa-arrow-up' : 'fa-arrow-down'}"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">${type} Order Placed</h4> | |
| <p class="text-sm text-gray-600 mt-1">${pair} | ${amount} USDT | ${leverage}x</p> | |
| <p class="text-xs text-gray-500 mt-2">Order ID: ${Math.random().toString(36).substr(2, 8).toUpperCase()}</p> | |
| </div> | |
| </div> | |
| `; | |
| document.body.appendChild(notification); | |
| // Remove notification after 5 seconds | |
| setTimeout(() => { | |
| notification.classList.add('opacity-0', 'transition-opacity', 'duration-300'); | |
| setTimeout(() => { | |
| notification.remove(); | |
| }, 300); | |
| }, 5000); | |
| } | |
| </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=Abrasax22/3d-model-threads" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |