Hugging Face's logo

Spaces:
jsonet
/
metatrader-command-center
Running

App Files Community
metatrader-command-center / account-connection.html
jsonet's picture
jsonet
Crea una nueva pagina, que integre todas las caracteristicas para conectar la app con la cuenta de Metatrader 5 para que se vinculen los datos en tiempo real
43435d6 verified
raw
history blame contribute delete
27.1 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Account Connection - MetaTrader Command Center</title>
 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 <script src="https://unpkg.com/feather-icons"></script>
 <script>
 tailwind.config = {
 darkMode: 'class',
 theme: {
 extend: {
 colors: {
 primary: {
 50: '#f0f9ff',
 100: '#e0f2fe',
 200: '#bae6fd',
 300: '#7dd3fc',
 400: '#38bdf8',
 500: '#0ea5e9',
 600: '#0284c7',
 700: '#0369a1',
 800: '#075985',
 900: '#0c4a6e',
 },
 secondary: {
 50: '#fdf2f8',
 100: '#fce7f3',
 200: '#fbcfe8',
 300: '#f9a8d4',
 400: '#f472b6',
 500: '#ec4899',
 600: '#db2777',
 700: '#be185d',
 800: '#9d174d',
 900: '#831843',
 }
 }
 }
 }
 }
 </script>
 <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: #0f172a;
 color: #e2e8f0;
 }
 .glass-effect {
 background: rgba(30, 41, 59, 0.7);
 backdrop-filter: blur(10px);
 border: 1px solid rgba(148, 163, 184, 0.2);
 }
 .connection-card {
 transition: all 0.3s ease;
 }
 .connection-card:hover {
 transform: translateY(-3px);
 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
 }
 .status-indicator {
 display: inline-block;
 width: 10px;
 height: 10px;
 border-radius: 50%;
 margin-right: 8px;
 }
 .connected {
 background-color: #4ade80;
 }
 .disconnected {
 background-color: #ef4444;
 }
 .connecting {
 background-color: #f59e0b;
 }
 .pulse {
 animation: pulse 2s infinite;
 }
 @keyframes pulse {
 0% { opacity: 1; }
 50% { opacity: 0.5; }
 100% { opacity: 1; }
 }
 /* Mobile menu styles */
 .mobile-menu {
 display: none;
 }
 @media (max-width: 768px) {
 .desktop-menu {
 display: none;
 }
 .mobile-menu {
 display: block;
 }
 .mobile-menu-content {
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.3s ease-out;
 }
 .mobile-menu-content.open {
 max-height: 500px;
 transition: max-height 0.5s ease-in;
 }
 }
 </style>
</head>
<body class="bg-slate-900 text-slate-100 min-h-screen">
 <!-- Main Container -->
 <div class="flex flex-col md:flex-row min-h-screen">
 <!-- Sidebar -->
 <div class="w-full md:w-64 glass-effect p-4 flex flex-col">
 <div class="mb-8">
 <h1 class="text-2xl font-bold text-primary-400 flex items-center">
 <i data-feather="activity" class="mr-2"></i>
 MT5 Command
 </h1>
 <p class="text-xs text-slate-400 mt-1">Trading Control Panel</p>
 </div>
<!-- Mobile Menu Toggle -->
 <div class="mobile-menu mb-4">
 <button id="mobile-menu-toggle" class="w-full flex justify-between items-center p-3 rounded-lg bg-slate-800 hover:bg-slate-700">
 <span>Menu</span>
 <i data-feather="menu" class="w-5 h-5"></i>
 </button>
 <div id="mobile-menu-content" class="mobile-menu-content bg-slate-800 rounded-lg mt-2">
 <ul class="py-2">
 <li>
 <a href="index.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
 <i data-feather="home" class="mr-3 w-5 h-5"></i>
 <span>Dashboard</span>
 </a>
 </li>
 <li>
 <a href="trading-view.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
 <i data-feather="bar-chart-2" class="mr-3 w-5 h-5"></i>
 <span>Trading View</span>
 </a>
 </li>
 <li>
 <a href="experts.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
 <i data-feather="settings" class="mr-3 w-5 h-5"></i>
 <span>Expert Advisors</span>
 </a>
 </li>
 <li>
 <a href="calculator.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
 <i data-feather="calculator" class="mr-3 w-5 h-5"></i>
 <span>Position Calculator</span>
 </a>
 </li>
 <li>
 <a href="strategies.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
 <i data-feather="layers" class="mr-3 w-5 h-5"></i>
 <span>Strategies</span>
 </a>
 </li>
 <li>
 <a href="risk-management.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
 <i data-feather="shield" class="mr-3 w-5 h-5"></i>
 <span>Risk Management</span>
 </a>
 </li>
 <li>
 <a href="reports.html" class="flex items-center p-3 rounded-lg hover:bg-slate-700">
 <i data-feather="file-text" class="mr-3 w-5 h-5"></i>
 <span>Reports</span>
 </a>
 </li>
 <li>
 <a href="account-connection.html" class="flex items-center p-3 rounded-lg bg-primary-600 text-white">
 <i data-feather="link" class="mr-3 w-5 h-5"></i>
 <span>Account Connection</span>
 </a>
 </li>
 </ul>
 </div>
 </div>
<!-- Desktop Menu -->
 <nav class="flex-1 desktop-menu">
 <ul class="space-y-2">
 <li>
 <a href="index.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
 <i data-feather="home" class="mr-3"></i>
 Dashboard
 </a>
 </li>
 <li>
 <a href="trading-view.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
 <i data-feather="bar-chart-2" class="mr-3"></i>
 Trading View
 </a>
 </li>
 <li>
 <a href="experts.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
 <i data-feather="settings" class="mr-3"></i>
 Expert Advisors
 </a>
 </li>
 <li>
 <a href="calculator.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
 <i data-feather="calculator" class="mr-3"></i>
 Position Calculator
 </a>
 </li>
 <li>
 <a href="strategies.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
 <i data-feather="layers" class="mr-3"></i>
 Strategies
 </a>
 </li>
 <li>
 <a href="risk-management.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
 <i data-feather="shield" class="mr-3"></i>
 Risk Management
 </a>
 </li>
 <li>
 <a href="reports.html" class="flex items-center p-3 rounded-lg hover:bg-slate-800">
 <i data-feather="file-text" class="mr-3"></i>
 Reports
 </a>
 </li>
 <li>
 <a href="account-connection.html" class="flex items-center p-3 rounded-lg bg-primary-600 text-white">
 <i data-feather="link" class="mr-3"></i>
 Account Connection
 </a>
 </li>
 </ul>
 </nav>
<div class="mt-auto pt-4 border-t border-slate-700">
 <div class="flex items-center">
 <div class="bg-slate-700 rounded-full p-2 mr-3">
 <i data-feather="user" class="w-5 h-5"></i>
 </div>
 <div>
 <p class="font-medium">Trader Pro</p>
 <p class="text-xs text-slate-400">Active Session</p>
 </div>
 </div>
 </div>
 </div>
<!-- Main Content -->
 <div class="flex-1 overflow-auto">
 <!-- Header -->
 <header class="glass-effect p-4 flex justify-between items-center">
 <div>
 <h2 class="text-xl font-bold">Account Connection</h2>
 <p class="text-sm text-slate-400">Connect your MetaTrader 5 account for real-time data</p>
 </div>
 <div class="flex items-center space-x-4">
 <button class="bg-slate-800 hover:bg-slate-700 px-4 py-2 rounded-lg flex items-center">
 <i data-feather="refresh-cw" class="mr-2"></i>
 Refresh
 </button>
 </div>
 </header>
<!-- Connection Status -->
 <div class="p-4">
 <div class="glass-effect rounded-xl p-6">
 <div class="flex flex-col md:flex-row items-center justify-between">
 <div class="flex items-center mb-4 md:mb-0">
 <div class="status-indicator disconnected pulse mr-4" id="connection-status"></div>
 <div>
 <h3 class="font-bold text-lg">Account Connection Status</h3>
 <p class="text-slate-400" id="status-text">Disconnected</p>
 </div>
 </div>
 <div class="flex space-x-3">
 <button id="connect-btn" class="bg-primary-600 hover:bg-primary-700 px-6 py-2 rounded-lg flex items-center">
 <i data-feather="link" class="mr-2"></i>
 Connect
 </button>
 <button id="disconnect-btn" class="bg-slate-800 hover:bg-slate-700 px-6 py-2 rounded-lg flex items-center hidden">
 <i data-feather="unlink" class="mr-2"></i>
 Disconnect
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Connection Methods -->
 <div class="p-4">
 <div class="glass-effect rounded-xl p-6">
 <h3 class="font-bold text-lg mb-6">Connection Methods</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 <!-- MT5 Terminal Connection -->
 <div class="connection-card glass-effect rounded-xl p-5">
 <div class="flex items-center mb-4">
 <div class="bg-blue-500/20 p-3 rounded-lg mr-4">
 <i data-feather="monitor" class="text-blue-500 w-6 h-6"></i>
 </div>
 <h4 class="font-bold text-lg">MT5 Terminal</h4>
 </div>
 <p class="text-slate-400 mb-4">Connect directly to your MetaTrader 5 terminal for real-time data synchronization.</p>
 <ul class="space-y-2 mb-6">
 <li class="flex items-center">
 <i data-feather="check-circle" class="text-green-500 mr-2 w-5 h-5"></i>
 <span>Real-time price feeds</span>
 </li>
 <li class="flex items-center">
 <i data-feather="check-circle" class="text-green-500 mr-2 w-5 h-5"></i>
 <span>Live position tracking</span>
 </li>
 <li class="flex items-center">
 <i data-feather="check-circle" class="text-green-500 mr-2 w-5 h-5"></i>
 <span>Order execution</span>
 </li>
 </ul>
 <button class="w-full bg-slate-800 hover:bg-slate-700 py-2 rounded-lg">
 Setup Instructions
 </button>
 </div>
<!-- MT5 WebAPI Connection -->
 <div class="connection-card glass-effect rounded-xl p-5">
 <div class="flex items-center mb-4">
 <div class="bg-purple-500/20 p-3 rounded-lg mr-4">
 <i data-feather="globe" class="text-purple-500 w-6 h-6"></i>
 </div>
 <h4 class="font-bold text-lg">WebAPI Connection</h4>
 </div>
 <p class="text-slate-400 mb-4">Connect using MetaTrader 5 WebAPI for remote access to your trading account.</p>
 <ul class="space-y-2 mb-6">
 <li class="flex items-center">
 <i data-feather="check-circle" class="text-green-500 mr-2 w-5 h-5"></i>
 <span>Remote access</span>
 </li>
 <li class="flex items-center">
 <i data-feather="check-circle" class="text-green-500 mr-2 w-5 h-5"></i>
 <span>Encrypted connection</span>
 </li>
 <li class="flex items-center">
 <i data-feather="check-circle" class="text-green-500 mr-2 w-5 h-5"></i>
 <span>24/7 availability</span>
 </li>
 </ul>
 <button class="w-full bg-slate-800 hover:bg-slate-700 py-2 rounded-lg">
 Configure WebAPI
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Account Information -->
 <div class="p-4">
 <div class="glass-effect rounded-xl p-6">
 <h3 class="font-bold text-lg mb-6">Connected Account Information</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
 <div class="bg-slate-800 rounded-lg p-4">
 <p class="text-slate-400 text-sm">Account Number</p>
 <p class="text-xl font-bold mt-1" id="account-number">-</p>
 </div>
<div class="bg-slate-800 rounded-lg p-4">
 <p class="text-slate-400 text-sm">Balance</p>
 <p class="text-xl font-bold mt-1" id="account-balance">-</p>
 </div>
<div class="bg-slate-800 rounded-lg p-4">
 <p class="text-slate-400 text-sm">Equity</p>
 <p class="text-xl font-bold mt-1" id="account-equity">-</p>
 </div>
<div class="bg-slate-800 rounded-lg p-4">
 <p class="text-slate-400 text-sm">Server</p>
 <p class="text-xl font-bold mt-1" id="server-name">-</p>
 </div>
 </div>
 </div>
 </div>
<!-- Connection Logs -->
 <div class="p-4">
 <div class="glass-effect rounded-xl p-6">
 <div class="flex justify-between items-center mb-6">
 <h3 class="font-bold text-lg">Connection Logs</h3>
 <button class="text-sm text-primary-400">Clear Logs</button>
 </div>
<div class="bg-slate-800 rounded-lg p-4 h-64 overflow-y-auto">
 <div class="space-y-3" id="connection-logs">
 <div class="text-sm">
 <p class="text-slate-400">System initialized</p>
 <p class="text-xs text-slate-500">Today, 10:00:00 AM</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Connection Modal -->
 <div id="connection-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center hidden z-50">
 <div class="glass-effect rounded-xl p-6 w-full max-w-md">
 <h3 class="font-bold text-lg mb-4">Connect to MT5 Account</h3>
<div class="space-y-4">
 <div>
 <label class="block text-sm font-medium text-slate-300 mb-2">Broker Server</label>
 <select class="w-full bg-slate-800 border border-slate-700 rounded-lg py-3 px-4 focus:outline-none focus:ring-2 focus:ring-primary-500">
 <option>Select your broker</option>
 <option>MetaQuotes-Demo</option>
 <option>ICMarkets-Demo</option>
 <option>Pepperstone-Demo</option>
 <option>FTMO-Demo</option>
 </select>
 </div>
<div>
 <label class="block text-sm font-medium text-slate-300 mb-2">Login</label>
 <input type="text" placeholder="Account number" class="w-full bg-slate-800 border border-slate-700 rounded-lg py-3 px-4 focus:outline-none focus:ring-2 focus:ring-primary-500">
 </div>
<div>
 <label class="block text-sm font-medium text-slate-300 mb-2">Password</label>
 <input type="password" placeholder="Account password" class="w-full bg-slate-800 border border-slate-700 rounded-lg py-3 px-4 focus:outline-none focus:ring-2 focus:ring-primary-500">
 </div>
<div class="flex items-center">
 <input type="checkbox" id="save-credentials" class="mr-2">
 <label for="save-credentials" class="text-sm">Save credentials securely</label>
 </div>
 </div>
<div class="flex space-x-3 mt-6">
 <button id="cancel-connection" class="flex-1 bg-slate-800 hover:bg-slate-700 py-3 rounded-lg">
 Cancel
 </button>
 <button id="confirm-connection" class="flex-1 bg-primary-600 hover:bg-primary-700 py-3 rounded-lg">
 Connect
 </button>
 </div>
 </div>
 </div>
<script>
 // Initialize Feather Icons
 feather.replace();
// DOM Elements
 const connectionStatus = document.getElementById('connection-status');
 const statusText = document.getElementById('status-text');
 const connectBtn = document.getElementById('connect-btn');
 const disconnectBtn = document.getElementById('disconnect-btn');
 const connectionModal = document.getElementById('connection-modal');
 const cancelConnection = document.getElementById('cancel-connection');
 const confirmConnection = document.getElementById('confirm-connection');
 const connectionLogs = document.getElementById('connection-logs');
// Mobile menu toggle
 document.addEventListener('DOMContentLoaded', function() {
 const menuToggle = document.getElementById('mobile-menu-toggle');
 const menuContent = document.getElementById('mobile-menu-content');
if (menuToggle && menuContent) {
 menuToggle.addEventListener('click', function() {
 const icon = this.querySelector('[data-feather]');
 if (menuContent.classList.contains('open')) {
 menuContent.classList.remove('open');
 icon.setAttribute('data-feather', 'menu');
 } else {
 menuContent.classList.add('open');
 icon.setAttribute('data-feather', 'x');
 }
 feather.replace();
 });
 }
// Event listeners
 connectBtn.addEventListener('click', openConnectionModal);
 cancelConnection.addEventListener('click', closeConnectionModal);
 confirmConnection.addEventListener('click', connectToAccount);
 disconnectBtn.addEventListener('click', disconnectAccount);
 });
// Open connection modal
 function openConnectionModal() {
 connectionModal.classList.remove('hidden');
 }
// Close connection modal
 function closeConnectionModal() {
 connectionModal.classList.add('hidden');
 }
// Connect to account
 function connectToAccount() {
 // Update UI to connecting state
 connectionStatus.className = 'status-indicator connecting pulse mr-4';
 statusText.textContent = 'Connecting...';
 connectBtn.disabled = true;
// Close modal
 closeConnectionModal();
// Add log entry
 addLogEntry('Attempting to connect to MT5 account...');
// Simulate connection process
 setTimeout(() => {
 // Update UI to connected state
 connectionStatus.className = 'status-indicator connected mr-4';
 statusText.textContent = 'Connected';
 connectBtn.classList.add('hidden');
 disconnectBtn.classList.remove('hidden');
 connectBtn.disabled = false;
// Update account information
 document.getElementById('account-number').textContent = '50123456';
 document.getElementById('account-balance').textContent = '$25,430.75';
 document.getElementById('account-equity').textContent = '$25,687.42';
 document.getElementById('server-name').textContent = 'MetaQuotes-Demo';
// Add log entry
 addLogEntry('Successfully connected to MT5 account #50123456');
 addLogEntry('Subscribing to market data feeds...');
 addLogEntry('Market data feeds subscribed successfully');
 }, 2000);
 }
// Disconnect account
 function disconnectAccount() {
 // Update UI to disconnected state
 connectionStatus.className = 'status-indicator disconnected mr-4';
 statusText.textContent = 'Disconnected';
 disconnectBtn.classList.add('hidden');
 connectBtn.classList.remove('hidden');
// Clear account information
 document.getElementById('account-number').textContent = '-';
 document.getElementById('account-balance').textContent = '-';
 document.getElementById('account-equity').textContent = '-';
 document.getElementById('server-name').textContent = '-';
// Add log entry
 addLogEntry('Disconnected from MT5 account');
 }
// Add log entry
 function addLogEntry(message) {
 const logEntry = document.createElement('div');
 logEntry.className = 'text-sm';
 logEntry.innerHTML = `
 <p class="text-slate-300">${message}</p>
 <p class="text-xs text-slate-500">${getCurrentTime()}</p>
 `;
 connectionLogs.prepend(logEntry);
 }
// Get current time for logs
 function getCurrentTime() {
 const now = new Date();
 return now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit', second:'2-digit'});
 }
 </script>
</body>
</html>