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 Interactive Brokers</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 50%, #1d4ed8 100%); | |
| } | |
| .connection-status { | |
| transition: all 0.3s ease; | |
| } | |
| .input-highlight { | |
| box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| 100% { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6 flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <i class="fas fa-chart-line text-2xl"></i> | |
| <h1 class="text-2xl font-bold">TradeConnect</h1> | |
| </div> | |
| <nav> | |
| <ul class="flex space-x-6"> | |
| <li><a href="#" class="hover:text-blue-200 transition">Home</a></li> | |
| <li><a href="#" class="hover:text-blue-200 transition">Features</a></li> | |
| <li><a href="#" class="hover:text-blue-200 transition">Documentation</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow container mx-auto px-4 py-8"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <!-- Connection Header --> | |
| <div class="gradient-bg text-white px-6 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h2 class="text-xl font-semibold">Interactive Brokers Connection</h2> | |
| <p class="text-blue-100">Connect your trading account to access real-time market data</p> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div id="statusIndicator" class="w-3 h-3 rounded-full bg-gray-400"></div> | |
| <span id="statusText" class="text-sm">Disconnected</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Connection Form --> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Left Column --> | |
| <div> | |
| <div class="mb-6"> | |
| <label for="accountId" class="block text-sm font-medium text-gray-700 mb-1">Account ID</label> | |
| <div class="relative"> | |
| <input type="text" id="accountId" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition" placeholder="U1234567"> | |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3"> | |
| <i class="fas fa-user text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="host" class="block text-sm font-medium text-gray-700 mb-1">Host</label> | |
| <div class="relative"> | |
| <input type="text" id="host" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition" placeholder="127.0.0.1"> | |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3"> | |
| <i class="fas fa-server text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="port" class="block text-sm font-medium text-gray-700 mb-1">Port</label> | |
| <div class="relative"> | |
| <input type="number" id="port" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition" placeholder="7497" value="7497"> | |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3"> | |
| <i class="fas fa-plug text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column --> | |
| <div> | |
| <div class="mb-6"> | |
| <label for="clientId" class="block text-sm font-medium text-gray-700 mb-1">Client ID</label> | |
| <div class="relative"> | |
| <input type="number" id="clientId" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition" placeholder="0" value="0"> | |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3"> | |
| <i class="fas fa-id-card text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="paperTrading" class="flex items-center space-x-2 cursor-pointer"> | |
| <input type="checkbox" id="paperTrading" class="form-checkbox h-5 w-5 text-blue-600"> | |
| <span class="text-sm font-medium text-gray-700">Paper Trading Account</span> | |
| </label> | |
| <p class="text-xs text-gray-500 mt-1">Check this if you're connecting to a paper trading account</p> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="connectionMode" class="block text-sm font-medium text-gray-700 mb-1">Connection Mode</label> | |
| <select id="connectionMode" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"> | |
| <option value="live">Live Trading</option> | |
| <option value="delayed">Delayed Data</option> | |
| <option value="historical">Historical Data</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Connection Buttons --> | |
| <div class="flex flex-col sm:flex-row justify-between space-y-4 sm:space-y-0 sm:space-x-4 mt-6"> | |
| <button id="connectBtn" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition flex items-center justify-center space-x-2"> | |
| <i class="fas fa-plug"></i> | |
| <span>Connect</span> | |
| </button> | |
| <button id="disconnectBtn" class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-3 px-6 rounded-lg transition flex items-center justify-center space-x-2" disabled> | |
| <i class="fas fa-power-off"></i> | |
| <span>Disconnect</span> | |
| </button> | |
| <button id="testBtn" class="flex-1 bg-green-600 hover:bg-green-700 text-white font-medium py-3 px-6 rounded-lg transition flex items-center justify-center space-x-2"> | |
| <i class="fas fa-vial"></i> | |
| <span>Test Connection</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Connection Log --> | |
| <div class="border-t border-gray-200 px-6 py-4"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="font-medium text-gray-700">Connection Log</h3> | |
| <button id="clearLogBtn" class="text-sm text-blue-600 hover:text-blue-800 transition">Clear Log</button> | |
| </div> | |
| <div id="connectionLog" class="bg-gray-50 p-4 rounded-lg h-40 overflow-y-auto text-sm font-mono text-gray-700"> | |
| <div class="text-gray-500">Waiting for connection activity...</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Additional Information --> | |
| <div class="mt-8 bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="gradient-bg text-white px-6 py-4"> | |
| <h2 class="text-xl font-semibold">Connection Guide</h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-info-circle text-blue-600"></i> | |
| </div> | |
| <h3 class="font-medium">Host & Port</h3> | |
| </div> | |
| <p class="text-sm text-gray-600">For live trading, use port 7496 (TWS) or 7497 (IB Gateway). For paper trading, use port 7497.</p> | |
| </div> | |
| <div class="bg-green-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-green-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-shield-alt text-green-600"></i> | |
| </div> | |
| <h3 class="font-medium">Security</h3> | |
| </div> | |
| <p class="text-sm text-gray-600">Ensure API access is enabled in TWS/IB Gateway settings under Configure > API.</p> | |
| </div> | |
| <div class="bg-purple-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-purple-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-tools text-purple-600"></i> | |
| </div> | |
| <h3 class="font-medium">Troubleshooting</h3> | |
| </div> | |
| <p class="text-sm text-gray-600">If connection fails, verify that TWS/IB Gateway is running and firewall isn't blocking the port.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <p>© 2023 TradeConnect. All rights reserved.</p> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="hover:text-blue-300 transition"><i class="fab fa-github"></i></a> | |
| <a href="#" class="hover:text-blue-300 transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="hover:text-blue-300 transition"><i class="fab fa-discord"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // DOM Elements | |
| const connectBtn = document.getElementById('connectBtn'); | |
| const disconnectBtn = document.getElementById('disconnectBtn'); | |
| const testBtn = document.getElementById('testBtn'); | |
| const clearLogBtn = document.getElementById('clearLogBtn'); | |
| const connectionLog = document.getElementById('connectionLog'); | |
| const statusIndicator = document.getElementById('statusIndicator'); | |
| const statusText = document.getElementById('statusText'); | |
| const paperTradingCheckbox = document.getElementById('paperTrading'); | |
| const portInput = document.getElementById('port'); | |
| // Connection state | |
| let isConnected = false; | |
| // Event Listeners | |
| connectBtn.addEventListener('click', connectToIB); | |
| disconnectBtn.addEventListener('click', disconnectFromIB); | |
| testBtn.addEventListener('click', testConnection); | |
| clearLogBtn.addEventListener('click', clearLog); | |
| paperTradingCheckbox.addEventListener('change', togglePaperTrading); | |
| // Functions | |
| function connectToIB() { | |
| if (isConnected) return; | |
| logMessage("Connecting to Interactive Brokers..."); | |
| updateStatus('connecting'); | |
| // Simulate connection (in a real app, this would be an API call) | |
| setTimeout(() => { | |
| const success = Math.random() > 0.2; // 80% success rate for demo | |
| if (success) { | |
| logMessage("Successfully connected to Interactive Brokers"); | |
| updateStatus('connected'); | |
| isConnected = true; | |
| toggleButtons(true); | |
| } else { | |
| logMessage("Connection failed. Please check your settings and try again.", 'error'); | |
| updateStatus('disconnected'); | |
| } | |
| }, 2000); | |
| } | |
| function disconnectFromIB() { | |
| if (!isConnected) return; | |
| logMessage("Disconnecting from Interactive Brokers..."); | |
| // Simulate disconnection | |
| setTimeout(() => { | |
| logMessage("Successfully disconnected"); | |
| updateStatus('disconnected'); | |
| isConnected = false; | |
| toggleButtons(false); | |
| }, 1000); | |
| } | |
| function testConnection() { | |
| logMessage("Testing connection parameters..."); | |
| // Simulate test | |
| setTimeout(() => { | |
| logMessage("Connection test successful. Parameters are valid."); | |
| }, 1500); | |
| } | |
| function togglePaperTrading() { | |
| const isPaper = paperTradingCheckbox.checked; | |
| portInput.value = isPaper ? '7497' : '7496'; | |
| logMessage(`Switched to ${isPaper ? 'Paper Trading' : 'Live Trading'} mode`); | |
| } | |
| function updateStatus(status) { | |
| statusIndicator.classList.remove('bg-gray-400', 'bg-yellow-400', 'bg-green-400', 'bg-red-400', 'animate-pulse'); | |
| switch(status) { | |
| case 'connecting': | |
| statusIndicator.classList.add('bg-yellow-400', 'animate-pulse'); | |
| statusText.textContent = 'Connecting...'; | |
| break; | |
| case 'connected': | |
| statusIndicator.classList.add('bg-green-400'); | |
| statusText.textContent = 'Connected'; | |
| break; | |
| case 'disconnected': | |
| statusIndicator.classList.add('bg-gray-400'); | |
| statusText.textContent = 'Disconnected'; | |
| break; | |
| case 'error': | |
| statusIndicator.classList.add('bg-red-400'); | |
| statusText.textContent = 'Error'; | |
| break; | |
| } | |
| } | |
| function logMessage(message, type = 'info') { | |
| const logEntry = document.createElement('div'); | |
| const timestamp = new Date().toLocaleTimeString(); | |
| logEntry.innerHTML = `<span class="text-gray-500">[${timestamp}]</span> `; | |
| if (type === 'error') { | |
| logEntry.innerHTML += `<span class="text-red-500">${message}</span>`; | |
| } else { | |
| logEntry.innerHTML += message; | |
| } | |
| // If it's the first message and it's the placeholder, clear it | |
| if (connectionLog.firstChild && connectionLog.firstChild.textContent.includes("Waiting for")) { | |
| connectionLog.innerHTML = ''; | |
| } | |
| connectionLog.appendChild(logEntry); | |
| connectionLog.scrollTop = connectionLog.scrollHeight; | |
| } | |
| function clearLog() { | |
| connectionLog.innerHTML = '<div class="text-gray-500">Waiting for connection activity...</div>'; | |
| } | |
| function toggleButtons(connected) { | |
| connectBtn.disabled = connected; | |
| disconnectBtn.disabled = !connected; | |
| if (connected) { | |
| connectBtn.classList.remove('bg-blue-600', 'hover:bg-blue-700'); | |
| connectBtn.classList.add('bg-gray-300', 'cursor-not-allowed'); | |
| } else { | |
| connectBtn.classList.add('bg-blue-600', 'hover:bg-blue-700'); | |
| connectBtn.classList.remove('bg-gray-300', 'cursor-not-allowed'); | |
| } | |
| } | |
| // Initialize | |
| updateStatus('disconnected'); | |
| // Add input focus effects | |
| const inputs = document.querySelectorAll('input, select'); | |
| inputs.forEach(input => { | |
| input.addEventListener('focus', function() { | |
| this.classList.add('input-highlight'); | |
| }); | |
| input.addEventListener('blur', function() { | |
| this.classList.remove('input-highlight'); | |
| }); | |
| }); | |
| }); | |
| </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/tradeconnect" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |