Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Connect to Binance</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, #f0b90b 0%, #f8d12f 100%); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .api-key-input { | |
| letter-spacing: 1px; | |
| font-family: monospace; | |
| } | |
| .glow { | |
| animation: glow 2s infinite alternate; | |
| } | |
| @keyframes glow { | |
| from { | |
| box-shadow: 0 0 5px rgba(240, 185, 11, 0.5); | |
| } | |
| to { | |
| box-shadow: 0 0 20px rgba(240, 185, 11, 0.8); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <!-- Header --> | |
| <header class="flex justify-between items-center mb-12"> | |
| <div class="flex items-center"> | |
| <img src="https://bin.bnbstatic.com/static/images/common/logo_binance.svg" alt="Binance Logo" class="h-10 mr-3"> | |
| <h1 class="text-2xl font-bold">Binance API Connector</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="px-4 py-2 bg-gray-800 rounded-lg hover:bg-gray-700 transition"> | |
| <i class="fas fa-question-circle mr-2"></i> Help | |
| </button> | |
| <button class="px-4 py-2 bg-gray-800 rounded-lg hover:bg-gray-700 transition"> | |
| <i class="fas fa-cog mr-2"></i> Settings | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Connection Panel --> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg card-hover"> | |
| <div class="flex items-center mb-6"> | |
| <div class="gradient-bg rounded-full p-2 mr-4"> | |
| <i class="fas fa-plug text-white text-xl"></i> | |
| </div> | |
| <h2 class="text-xl font-bold">API Connection</h2> | |
| </div> | |
| <div class="mb-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center mr-3">1</div> | |
| <h3 class="font-medium">Generate API Keys</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4 ml-11">Log in to your Binance account and generate API keys with appropriate permissions.</p> | |
| <a href="https://www.binance.com/en/my/settings/api-management" target="_blank" class="ml-11 px-4 py-2 gradient-bg rounded-lg inline-flex items-center hover:opacity-90 transition"> | |
| <i class="fas fa-external-link-alt mr-2"></i> Go to Binance API Management | |
| </a> | |
| </div> | |
| <div class="mb-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center mr-3">2</div> | |
| <h3 class="font-medium">Enter API Details</h3> | |
| </div> | |
| <div class="ml-11 space-y-4"> | |
| <div> | |
| <label class="block text-gray-400 mb-1">API Key</label> | |
| <div class="relative"> | |
| <input type="text" id="apiKey" class="w-full bg-gray-700 rounded-lg px-4 py-3 api-key-input focus:outline-none focus:ring-2 focus:ring-yellow-500" placeholder="Paste your API key here"> | |
| <button onclick="toggleVisibility('apiKey')" class="absolute right-3 top-3 text-gray-400 hover:text-white"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-400 mb-1">Secret Key</label> | |
| <div class="relative"> | |
| <input type="password" id="secretKey" class="w-full bg-gray-700 rounded-lg px-4 py-3 api-key-input focus:outline-none focus:ring-2 focus:ring-yellow-500" placeholder="Paste your secret key here"> | |
| <button onclick="toggleVisibility('secretKey')" class="absolute right-3 top-3 text-gray-400 hover:text-white"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="readOnly" class="mr-2"> | |
| <label for="readOnly" class="text-gray-400">Read-only permissions</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center mr-3">3</div> | |
| <h3 class="font-medium">Connect to Binance</h3> | |
| </div> | |
| <div class="ml-11"> | |
| <button onclick="connectToBinance()" class="w-full gradient-bg rounded-lg px-6 py-3 font-bold hover:opacity-90 transition flex items-center justify-center glow"> | |
| <i class="fas fa-link mr-2"></i> Connect to Binance | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Information Panel --> | |
| <div> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg card-hover h-full"> | |
| <div class="flex items-center mb-6"> | |
| <div class="gradient-bg rounded-full p-2 mr-4"> | |
| <i class="fas fa-info-circle text-white text-xl"></i> | |
| </div> | |
| <h2 class="text-xl font-bold">Security Information</h2> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="bg-gray-700 rounded-lg p-4"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-shield-alt text-yellow-500 mt-1 mr-3"></i> | |
| <div> | |
| <h3 class="font-medium mb-1">API Key Safety</h3> | |
| <p class="text-gray-400 text-sm">Never share your Secret Key with anyone. This application doesn't store your keys.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg p-4"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-user-lock text-yellow-500 mt-1 mr-3"></i> | |
| <div> | |
| <h3 class="font-medium mb-1">Recommended Permissions</h3> | |
| <p class="text-gray-400 text-sm">For security, enable only the permissions you need (e.g., Read-Only for portfolio tracking).</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg p-4"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-ip-address text-yellow-500 mt-1 mr-3"></i> | |
| <div> | |
| <h3 class="font-medium mb-1">IP Restrictions</h3> | |
| <p class="text-gray-400 text-sm">Consider restricting API key usage to specific IP addresses in your Binance account settings.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border border-yellow-500 rounded-lg p-4 mt-6"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-exclamation-triangle text-yellow-500 mt-1 mr-3"></i> | |
| <div> | |
| <h3 class="font-medium mb-1">Important Notice</h3> | |
| <p class="text-gray-400 text-sm">This is a demo interface. For actual Binance API integration, you would need to implement proper authentication and security measures.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Connection Status --> | |
| <div id="connectionStatus" class="hidden mt-8 bg-gray-800 rounded-xl p-6 shadow-lg"> | |
| <div class="flex items-center"> | |
| <div id="statusIcon" class="w-12 h-12 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-spinner fa-spin text-gray-400 text-2xl"></i> | |
| </div> | |
| <div> | |
| <h2 id="statusTitle" class="text-xl font-bold">Connecting to Binance...</h2> | |
| <p id="statusMessage" class="text-gray-400">Please wait while we establish a secure connection.</p> | |
| </div> | |
| </div> | |
| <div id="statusDetails" class="mt-4 hidden"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-gray-700 rounded-lg p-4"> | |
| <h3 class="text-gray-400 mb-1">Account</h3> | |
| <p id="accountInfo" class="font-medium">Loading...</p> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg p-4"> | |
| <h3 class="text-gray-400 mb-1">Permissions</h3> | |
| <p id="permissionsInfo" class="font-medium">Loading...</p> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg p-4"> | |
| <h3 class="text-gray-400 mb-1">Server Time</h3> | |
| <p id="serverTime" class="font-medium">Loading...</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-end"> | |
| <button onclick="disconnect()" class="px-4 py-2 bg-red-600 rounded-lg hover:bg-red-700 transition"> | |
| <i class="fas fa-unlink mr-2"></i> Disconnect | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Toggle API key visibility | |
| function toggleVisibility(inputId) { | |
| const input = document.getElementById(inputId); | |
| const icon = input.nextElementSibling.querySelector('i'); | |
| if (input.type === 'password') { | |
| input.type = 'text'; | |
| icon.classList.remove('fa-eye'); | |
| icon.classList.add('fa-eye-slash'); | |
| } else { | |
| input.type = 'password'; | |
| icon.classList.remove('fa-eye-slash'); | |
| icon.classList.add('fa-eye'); | |
| } | |
| } | |
| // Simulate connection to Binance | |
| function connectToBinance() { | |
| const apiKey = document.getElementById('apiKey').value; | |
| const secretKey = document.getElementById('secretKey').value; | |
| if (!apiKey || !secretKey) { | |
| alert('Please enter both API Key and Secret Key'); | |
| return; | |
| } | |
| // Show connection status | |
| const statusPanel = document.getElementById('connectionStatus'); | |
| statusPanel.classList.remove('hidden'); | |
| // Simulate API call with timeout | |
| setTimeout(() => { | |
| // Update status to connected | |
| const statusIcon = document.getElementById('statusIcon'); | |
| statusIcon.innerHTML = '<i class="fas fa-check-circle text-green-500 text-2xl"></i>'; | |
| statusIcon.classList.add('bg-green-900'); | |
| document.getElementById('statusTitle').textContent = 'Connected to Binance'; | |
| document.getElementById('statusMessage').textContent = 'Secure connection established successfully'; | |
| // Show connection details | |
| document.getElementById('statusDetails').classList.remove('hidden'); | |
| document.getElementById('accountInfo').textContent = 'Demo Account (UID: 123456)'; | |
| document.getElementById('permissionsInfo').textContent = document.getElementById('readOnly').checked ? 'Read-Only' : 'Full Access'; | |
| // Update server time | |
| const now = new Date(); | |
| document.getElementById('serverTime').textContent = now.toLocaleString(); | |
| // Update every second | |
| setInterval(() => { | |
| const now = new Date(); | |
| document.getElementById('serverTime').textContent = now.toLocaleString(); | |
| }, 1000); | |
| }, 2000); | |
| } | |
| // Disconnect function | |
| function disconnect() { | |
| const statusPanel = document.getElementById('connectionStatus'); | |
| const statusIcon = document.getElementById('statusIcon'); | |
| statusIcon.innerHTML = '<i class="fas fa-times-circle text-red-500 text-2xl"></i>'; | |
| statusIcon.classList.remove('bg-green-900'); | |
| statusIcon.classList.add('bg-red-900'); | |
| document.getElementById('statusTitle').textContent = 'Disconnected'; | |
| document.getElementById('statusMessage').textContent = 'Connection to Binance has been terminated'; | |
| document.getElementById('statusDetails').classList.add('hidden'); | |
| setTimeout(() => { | |
| statusPanel.classList.add('hidden'); | |
| }, 3000); | |
| } | |
| </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=Akademics/binance-api" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |