Hugging Face's logo

Spaces:
jsonet
/
tradeflow-pro-nexus
Running

App Files Community
jsonet commited on
Commit
2d08b43
·
verified ·
1 Parent(s): a3d28ca

Ejecuta la implementación de la siguiente aplicación tanto de escritorio, como app móvil hiper responsive, que ambas aplicaciones se integren de manera nativa en una sola aplicación, que se adapta perfectamente según el tipo de dispositivo en el que la usa el usuario, quiero que implementes las funciones descritas a continuación implementando una pagina distinta para cada función concreta de la aplicación descrita a continuación, añade el máximo de funcionalidad real en cada herramienta y cada elemento de la aplicación, añade el máximo realismo posible para que se parezca el máximo posible a como se debería ver la aplicación final para cumplir con todos los requisitos de desarrollo detallados a continuación:

Browse files

### **TradeFlow Pro: Especificación de Arquitectura y Funcionalidades Ampliadas**

**Visión General:** TradeFlow Pro no es solo una app, es el centro de mando para el trader moderno. Su objetivo es eliminar la fricción entre el análisis, la planificación, la ejecución y el monitoreo, proporcionando una experiencia fluida y potente tanto en el escritorio como en la palma de tu mano. La conexión directa con MT5 es el pilar que garantiza la precisión y el tiempo real en cada acción.

---

### **Módulo 1: Conexión, Monitoreo y Control Central (El "Cerebro" de la Operación)**

Este módulo es el corazón de la nueva arquitectura, centralizando toda la información y el control.

#### **1.1. Conexión Robusta y Segura con MT5**
* **API de MT5:** La app se conectará a través de la API Web de MetaTrader 5. Esto permite una comunicación segura y bidireccional sin necesidad de tener el terminal de escritorio MT5 abierto.
* **Autenticación Multi-Factor:** Implementación de login con credenciales de MT5 más una capa de seguridad opcional (ej. PIN, biometría en el móvil).
* **Sincronización en Tiempo Real:** Uso de WebSockets para recibir streams de datos en tiempo real: precios (Bid/Ask), estado de la cuenta, operaciones abiertas, historial y, crucialmente, el estado de los EAs.

#### **1.2. Panel de Control de Expert Advisors (EAs) - ¡NUEVO Y CLAVE!**
Esta es la capacidad central que solicitaste. La interfaz mostrará un dashboard dedicado a monitorear y gestionar *todos* los EAs que se ejecutan en la cuenta de MT5.

* **Vista General de EAs:**
* **Lista de EAs Activos:** Muestra cada EA por nombre, identificador único y el par/símbolo en el que opera.
* **Estado en Tiempo Real:** Un indicador visual (verde, rojo, amarillo) muestra si el EA está **Activo**, **Detenido**, o con **Error**.
* **Métricas de Rendimiento de Cada EA:**
* **Operaciones Abiertas:** Número de trades activos gestionados por el EA.
* **Volumen Total Operado:** Suma de lotes abiertos por el EA.
* **P&L Actual:** Ganancia o pérdida acumulada de las operaciones del EA en tiempo real.
* **Rendimiento Histórico:** Gráfico simple de la curva de equity del EA desde su inicio.
* **Estadísticas Clave:** Profit Factor, Drawdown Máximo, Sharpe Ratio (calculado a partir de los datos históricos del EA).

* **Control Detallado de cada EA:**
* **Start/Stop/Restart:** Botones para iniciar, detener o reiniciar un EA específico directamente desde la app.
* **Visualización de Parámetros:** Acceso a una pantalla que muestra los parámetros con los que está configurado el EA (ej. Lotaje, Stop Loss, Take Profit, etc.).
* **Modificación Remota de Parámetros (Avanzado):** Capacidad para cambiar ciertos parámetros predefinidos (ej. tamaño de lote, activar/desactivar trailing stop) sin necesidad de acceder al terminal de escritorio.
* **Cierre de Emergencia:** Un botón de "Pánico" que cierra todas las operaciones gestionadas por un EA específico.

---

### **Módulo 2: Gestión y Planificación de Operaciones (El "Campo de Batalla")**

Aquí es donde el trader planifica y ejecuta sus ideas.

#### **2.1. Calculadora de Tamaño de Posición Integrada**
* **Interfaz Intuitiva:** Al planificar una operación, un panel deslizante muestra la calculadora.
* **Entradas Dinámicas:**
* Balance de la Cuenta (se auto-llena).
* Porcentaje de Riesgo a asumir (1%, 2%, etc.).
* Distancia de Stop Loss en pips (se calcula automáticamente al arrastrar la línea de SL en el gráfico).
* **Salida Precisa:** Muestra el **Tamaño de Lote** a operar, el **Riesgo Monetario** exacto y los **Contratos/Unidades**.

#### **2.2. Planificación Visual en el Gráfico (Móvil y Escritorio)**
* **Interacción Táctil y con Ratón:** Permite dibujar directamente sobre el gráfico de precios.
* **Líneas Interactivas:**
* **Línea de Entrada:** Se arrastra al precio deseado.
* **Línea de Stop Loss (SL):** Se arrastra para definir el riesgo. La calculadora de tamaño se actualiza al instante.
* **Línea de Take Profit (TP):** Se arrastra para definir el beneficio. Muestra automáticamente el **Ratio Riesgo/Beneficio (R:R)**.
* **Visualización en Tiempo Real:** Junto a las líneas de SL y TP, se muestra el valor en:
* **Puntos/Pips.**
* **Moneda de la Cuenta (ej. $15.50 de riesgo, $46.50 de beneficio).**

---

### **Módulo 3: Herramientas de Protección y Automatización (El "Escudo Inteligente")**

Estas funciones protegen el capital y maximizan las ganancias.

#### **3.1. Opciones de Breakeven (BE)**
* **BE Básico:** Se activa cuando el precio alcanza X pips de ganancia. Mueve el SL al precio de entrada.
* **BE Multi-Nivel (Hasta 4):**
* **Ejemplo:** Al llegar a +20 pips, mueve SL a BE. Al llegar a +40 pips, mueve SL a +20 pips. Asegura ganancias de forma progresiva.

#### **3.2. Opciones de Trailing Stop (TS)**
* **TS Básico:** Se mueve un pip por cada pip que se mueve el precio a favor.
* **TS Multi-Nivel:** Permite diferentes distancias de trailing según el nivel de ganancia.
* **TS por Picos y Valles (Swing High/Low):** Se basa en los máximos/mínimos de las últimas 'N' velas. Ideal para estrategias de seguimiento de tendencias.
* **TS basado en Media Móvil (MA):** El SL sigue una línea de MA (ej. EMA de 20 periodos). Se ajusta automáticamente a la tendencia.
* **TS basado en ATR (Average True Range):** La distancia del trailing se adapta a la volatilidad del mercado (ej. 2x el ATR). Muy robusto.
* **TS con Cierre Parcial:** Integra el cierre parcial con el trailing. Ej: Cierra el 50% de la posición en TP1, y activa el trailing en el resto.

#### **3.3. Herramientas de Discreción y Eficiencia**
* **Modo Oculto (Stealth Mode):** Los SL, TP y órdenes pendientes no se envían al bróker. Se gestionan localmente en la app y se ejecutan como órdenes de mercado cuando se alcanza el precio. Evita la caza de stops.
* **Automatización de SL/TP para Órdenes Externas:** Si abres una operación desde la app nativa del bróker, TradeFlow Pro detecta la operación abierta sin SL/TP y te permite aplicarles una protección automática.
* **Trailing de Órdenes Pendientes:** Una orden de compra limitada, por ejemplo, puede seguir al precio hacia abajo si el mercado baja, manteniendo siempre la misma distancia, pero sin subir si el mercado sube.

---

### **Módulo 4: Ejecución y Control de Órdenes (La "Acción")**

Funciones para una ejecución rápida y precisa.

#### **4.1. Ejecución Precisa**
* **Órdenes Limitadas de Retroceso (LPO - Limit Pullback Order):** Permite colocar una orden límite no en un precio fijo, sino a una distancia X por debajo del precio actual (para compras) o por encima (para ventas). Ideal para esperar retrocesos sin tener que estar pendiente.
* **División de Operaciones Grandes:** Si necesitas operar 10 lotes, la app puede dividir la orden en 10 de 1 lote cada una (o como se configure) para reducir el impacto en el mercado y mejorar el deslizamiento.

#### **4.2. Control Rápido (Botones de Acceso Rápido)**
* **Panel de Cierre Rápido:** Botones para:
* Cerrar Todas las Operaciones.
* Cerrar Solo las Ganadoras.
* Cerrar Solo las Perdedoras.
* Cerrar Solo las de Compra (Buy).
* Cerrar Solo las de Venta (Sell).
* **Borrado Rápido de Órdenes Pendientes:** Función análoga para eliminar todas las órdenes pendientes con un solo clic.

---

### **Módulo 5: Eficiencia y Personalización (El "Flujo de Trabajo")**

Herramientas que agilizan las tareas repetitivas.

* **Guardado y Carga de Plantillas:** Puedes guardar una configuración completa de una operación (ej. una estrategia con BE multi-nivel, TS basado en ATR y 3 niveles de TP parcial) y aplicarla instantáneamente a nuevas operaciones.
* **OCO (One Cancels the Other):** Al colocar una orden de compra y una de venta en un rango, la activación de una de ellas cancela automáticamente la otra. Perfecto para operar rupturas de rangos.
* **Gestión de Ratio Riesgo/Beneficio:** Al arrastrar las líneas de SL y TP en el gráfico, la app muestra el R:R en tiempo real y puede bloquear la ejecución si el R:R es inferior a un mínimo predefinido por el usuario.

---

### **Nuevas Funciones Complementarias para Hacerla "Mas Efectiva y Potente"**

Para ir más allá y crear una herramienta verdaderamente insuperable:

1. **Centro de Analytics y Reporting:**
* **Dashboard de Rendimiento Personal:** Gráficos de equity, drawdown, distribución de ganancias/pérdidas por par de divisas, por hora del día, etc.
* **Análisis de Estadísticas de Trading:** Calcula y muestra métricas clave como el Factor de Beneficio, la Tasa de Aciertos, el Promedio de Ganancia/Pérdida, y la Expectativa Matemática de tu trading.

2. **Diario de Trading Integrado:**
* Cada operación que se cierra se puede archivar automáticamente en un diario.
* Permite añadir notas, capturas de pantalla del gráfico en el momento de la entrada/salida, y etiquetas (ej. "Error", "Buena ejecución", "Violé mis reglas").
* Ideal para el análisis post-mortem y la mejora continua.

3. **Calendario Económico Integrado:**
* Muestra eventos de alto impacto directamente en el gráfico o en un panel lateral.
* Permite filtrar por país y nivel de importancia.

Files changed (6) hide show
  1. README.md +6 -3
  2. analytics.html +384 -0
  3. ea-control.html +323 -0
  4. index.html +323 -18
  5. protection.html +393 -0
  6. trading.html +341 -0
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Tradeflow Pro Nexus
3
- emoji: 🌖
4
  colorFrom: yellow
5
  colorTo: yellow
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: TradeFlow Pro Nexus 🚀
 
3
  colorFrom: yellow
4
  colorTo: yellow
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
analytics.html ADDED
@@ -0,0 +1,384 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>TradeFlow Pro Nexus - Analytics</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ darkMode: 'class',
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#6366f1',
17
+ secondary: '#10b981'
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ <style>
24
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
25
+ body { font-family: 'Inter', sans-serif; }
26
+ .glass-effect { backdrop-filter: blur(16px) saturate(180%); background: rgba(17, 25, 40, 0.75); }
27
+ .gradient-bg { background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%); }
28
+ .mobile-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; }
29
+ @media (min-width: 1024px) {
30
+ .mobile-bottom-nav { display: none; }
31
+ }
32
+ .analytics-chart { height: 300px; }
33
+ </style>
34
+ </head>
35
+ <body class="gradient-bg min-h-screen text-white">
36
+ <!-- Desktop Navigation -->
37
+ <nav class="hidden lg:flex glass-effect border-b border-gray-700 p-4">
38
+ <div class="container mx-auto flex justify-between items-center">
39
+ <div class="flex items-center space-x-2">
40
+ <i data-feather="trending-up" class="text-primary"></i>
41
+ <span class="text-xl font-bold">TradeFlow Pro</span>
42
+ </div>
43
+ <div class="flex space-x-6">
44
+ <a href="index.html" class="flex items-center space-x-1 hover:text-gray-300">
45
+ <i data-feather="bar-chart-2"></i>
46
+ <span>Dashboard</span>
47
+ </a>
48
+ <a href="ea-control.html" class="flex items-center space-x-1 hover:text-gray-300">
49
+ <i data-feather="cpu"></i>
50
+ <span>EA Control</span>
51
+ </a>
52
+ <a href="trading.html" class="flex items-center space-x-1 hover:text-gray-300">
53
+ <i data-feather="activity"></i>
54
+ <span>Trading</span>
55
+ </a>
56
+ <a href="protection.html" class="flex items-center space-x-1 hover:text-gray-300">
57
+ <i data-feather="shield"></i>
58
+ <span>Protection</span>
59
+ </a>
60
+ <a href="analytics.html" class="flex items-center space-x-1 text-primary border-b-2 border-primary pb-1">
61
+ <i data-feather="pie-chart"></i>
62
+ <span>Analytics</span>
63
+ </a>
64
+ </div>
65
+ <div class="flex items-center space-x-4">
66
+ <div class="relative">
67
+ <i data-feather="bell" class="cursor-pointer"></i>
68
+ <span class="absolute -top-1 -right-1 bg-blue-500 text-xs rounded-full w-4 h-4 flex items-center justify-center">5</span>
69
+ </div>
70
+ <div class="flex items-center space-x-2">
71
+ <div class="w-8 h-8 bg-primary rounded-full flex items-center justify-center">
72
+ <i data-feather="user" class="w-4 h-4"></i>
73
+ </div>
74
+ <span>Trader</span>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </nav>
79
+
80
+ <!-- Mobile Bottom Navigation -->
81
+ <nav class="mobile-bottom-nav glass-effect border-t border-gray-700 lg:hidden">
82
+ <div class="flex justify-around items-center py-3">
83
+ <a href="index.html" class="flex flex-col items-center text-gray-400">
84
+ <i data-feather="bar-chart-2" class="w-5 h-5"></i>
85
+ <span class="text-xs mt-1">Dashboard</span>
86
+ </a>
87
+ <a href="ea-control.html" class="flex flex-col items-center text-gray-400">
88
+ <i data-feather="cpu" class="w-5 h-5"></i>
89
+ <span class="text-xs mt-1">EAs</span>
90
+ </a>
91
+ <a href="trading.html" class="flex flex-col items-center text-gray-400">
92
+ <i data-feather="activity" class="w-5 h-5"></i>
93
+ <span class="text-xs mt-1">Trade</span>
94
+ </a>
95
+ <a href="protection.html" class="flex flex-col items-center text-gray-400">
96
+ <i data-feather="shield" class="w-5 h-5"></i>
97
+ <span class="text-xs mt-1">Shield</span>
98
+ </a>
99
+ <a href="analytics.html" class="flex flex-col items-center text-primary">
100
+ <i data-feather="pie-chart" class="w-5 h-5"></i>
101
+ <span class="text-xs mt-1">Stats</span>
102
+ </a>
103
+ </div>
104
+ </nav>
105
+
106
+ <!-- Main Content -->
107
+ <main class="container mx-auto px-4 py-6 lg:py-8 pb-20 lg:pb-8">
108
+ <!-- Analytics Header -->
109
+ <div class="glass-effect rounded-xl p-6 mb-6">
110
+ <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
111
+ <div>
112
+ <h1 class="text-2xl font-bold mb-2">Advanced Analytics & Reporting</h1>
113
+ <p class="text-gray-400">Comprehensive performance analysis and trading insights</p>
114
+ </div>
115
+ <div class="flex space-x-3 mt-4 lg:mt-0">
116
+ <button class="bg-primary hover:bg-primary/80 px-4 py-2 rounded-lg flex items-center space-x-2">
117
+ <i data-feather="download" class="w-4 h-4"></i>
118
+ <span>Export Report</span>
119
+ </button>
120
+ <button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg flex items-center space-x-2">
121
+ <i data-feather="filter" class="w-4 h-4"></i>
122
+ <span>Date Range</span>
123
+ </button>
124
+ </div>
125
+ </div>
126
+ </div>
127
+
128
+ <!-- Key Metrics -->
129
+ <div class="grid grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
130
+ <div class="glass-effect rounded-xl p-4 text-center">
131
+ <div class="text-2xl font-bold text-green-500 mb-1">$8,245</div>
132
+ <div class="text-xs text-gray-400">Total Profit</div>
133
+ </div>
134
+ <div class="glass-effect rounded-xl p-4 text-center">
135
+ <div class="text-2xl font-bold text-red-500 mb-1">$2,156</div>
136
+ <div class="text-xs text-gray-400">Total Loss</div>
137
+ </div>
138
+ <div class="glass-effect rounded-xl p-4 text-center">
139
+ <div class="text-2xl font-bold text-primary mb-1">3.82</div>
140
+ <div class="text-xs text-gray-400">Profit Factor</div>
141
+ </div>
142
+ <div class="glass-effect rounded-xl p-4 text-center">
143
+ <div class="text-2xl font-bold text-yellow-500 mb-1">64.3%</div>
144
+ <div class="text-xs text-gray-400">Win Rate</div>
145
+ </div>
146
+ <div class="glass-effect rounded-xl p-4 text-center">
147
+ <div class="text-2xl font-bold text-blue-500 mb-1">2.47</div>
148
+ <div class="text-xs text-gray-400">Risk/Reward</div>
149
+ </div>
150
+ </div>
151
+
152
+ <!-- Equity Curve -->
153
+ <div class="glass-effect rounded-xl p-6 mb-6">
154
+ <h2 class="text-lg font-semibold mb-4">Equity Curve</h2>
155
+ <div class="analytics-chart bg-gray-900 rounded-lg flex items-center justify-center">
156
+ <div class="text-center text-gray-400">
157
+ <i data-feather="trending-up" class="w-12 h-12 mx-auto mb-2"></i>
158
+ <p>Equity Growth Visualization</p>
159
+ <p class="text-sm text-gray-500">$25,847.32 Current Balance</p>
160
+ </div>
161
+ </div>
162
+ </div>
163
+
164
+ <!-- Performance Grid -->
165
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
166
+ <!-- Win/Loss Distribution -->
167
+ <div class="glass-effect rounded-xl p-6">
168
+ <h3 class="font-semibold mb-4">Trade Distribution</h3>
169
+ <div class="analytics-chart bg-gray-900 rounded-lg flex items-center justify-center">
170
+ <div class="text-center text-gray-400">
171
+ <i data-feather="pie-chart" class="w-12 h-12 mx-auto mb-2"></i>
172
+ <p>Win/Loss Analysis</p>
173
+ </div>
174
+ </div>
175
+ <div class="grid grid-cols-2 gap-4 mt-4">
176
+ <div class="text-center">
177
+ <div class="text-green-500 font-semibold">87</div>
178
+ <div class="text-xs text-gray-400">Winning Trades</div>
179
+ </div>
180
+ <div class="text-center">
181
+ <div class="text-red-500 font-semibold">48</div>
182
+ <div class="text-xs text-gray-400">Losing Trades</div>
183
+ </div>
184
+ </div>
185
+ </div>
186
+
187
+ <!-- Daily Performance -->
188
+ <div class="glass-effect rounded-xl p-6">
189
+ <h3 class="font-semibold mb-4">Daily Performance</h3>
190
+ <div class="analytics-chart bg-gray-900 rounded-lg flex items-center justify-center">
191
+ <div class="text-center text-gray-400">
192
+ <i data-feather="bar-chart-2" class="w-12 h-12 mx-auto mb-2"></i>
193
+ <p>Daily P&L Trends</p>
194
+ </div>
195
+ </div>
196
+ <div class="flex justify-between mt-4 text-sm">
197
+ <div class="text-center">
198
+ <div class="text-green-500">+$324</div>
199
+ <div class="text-gray-400">Today</div>
200
+ </div>
201
+ <div class="text-center">
202
+ <div class="text-green-500">+$1,245</div>
203
+ <div class="text-gray-400">This Week</div>
204
+ </div>
205
+ <div class="text-center">
206
+ <div class="text-green-500">+$3,892</div>
207
+ <div class="text-gray-400">This Month</div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ </div>
212
+
213
+ <!-- Detailed Statistics -->
214
+ <div class="glass-effect rounded-xl p-6">
215
+ <h2 class="text-lg font-semibold mb-4">Trading Statistics</h2>
216
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
217
+ <div class="space-y-4">
218
+ <h4 class="font-medium text-gray-400">Basic Metrics</h4>
219
+ <div class="space-y-3">
220
+ <div class="flex justify-between">
221
+ <span>Total Trades:</span>
222
+ <span class="font-mono">135</span>
223
+ </div>
224
+ <div class="flex justify-between">
225
+ <span>Win Rate:</span>
226
+ <span class="font-mono text-green-500">64.3%</span>
227
+ </div>
228
+ <div class="flex justify-between">
229
+ <span>Avg Win:</span>
230
+ <span class="font-mono">$94.75</span>
231
+ </div>
232
+ <div class="flex justify-between">
233
+ <span>Avg Loss:</span>
234
+ <span class="font-mono">-$44.92</span>
235
+ </div>
236
+ </div>
237
+ </div>
238
+
239
+ <div class="space-y-4">
240
+ <h4 class="font-medium text-gray-400">Risk Analysis</h4>
241
+ <div class="space-y-3">
242
+ <div class="flex justify-between">
243
+ <span>Max Drawdown:</span>
244
+ <span class="font-mono">-$1,245</span>
245
+ </div>
246
+ <div class="flex justify-between">
247
+ <span>Sharpe Ratio:</span>
248
+ <span class="font-mono">1.84</span>
249
+ </div>
250
+ <div class="flex justify-between">
251
+ <span>Expectancy:</span>
252
+ <span class="font-mono">$45.12</span>
253
+ </div>
254
+ <div class="flex justify-between">
255
+ <span>Profit Factor:</span>
256
+ <span class="font-mono text-primary">3.82</span>
257
+ </div>
258
+ </div>
259
+ </div>
260
+
261
+ <div class="space-y-4">
262
+ <h4 class="font-medium text-gray-400">Time Analysis</h4>
263
+ <div class="space-y-3">
264
+ <div class="flex justify-between">
265
+ <span>Avg Trade Duration:</span>
266
+ <span class="font-mono">4.2h</span>
267
+ </div>
268
+ <div class="flex justify-between">
269
+ <span>Best Day:</span>
270
+ <span class="font-mono text-green-500">+$892</span>
271
+ </div>
272
+ <div class="flex justify-between">
273
+ <span>Worst Day:</span>
274
+ <span class="font-mono text-red-500">-$356</span>
275
+ </div>
276
+ <div class="flex justify-between">
277
+ <span>Consistency:</span>
278
+ <span class="font-mono">78%</span>
279
+ </div>
280
+ </div>
281
+ </div>
282
+
283
+ <div class="space-y-4">
284
+ <h4 class="font-medium text-gray-400">Symbol Performance</h4>
285
+ <div class="space-y-3">
286
+ <div class="flex justify-between">
287
+ <span>EUR/USD:</span>
288
+ <span class="font-mono text-green-500">+$2,145</span>
289
+ </div>
290
+ <div class="flex justify-between">
291
+ <span>GBP/USD:</span>
292
+ <span class="font-mono text-green-500">+$892</span>
293
+ </div>
294
+ <div class="flex justify-between">
295
+ <span>XAU/USD:</span>
296
+ <span class="font-mono text-red-500">-$234</span>
297
+ </div>
298
+ <div class="flex justify-between">
299
+ <span>USD/JPY:</span>
300
+ <span class="font-mono text-green-500">+$567</span>
301
+ </div>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+
307
+ <!-- AI Insights -->
308
+ <div class="glass-effect rounded-xl p-6 mt-6">
309
+ <h2 class="text-lg font-semibold mb-4 flex items-center space-x-2">
310
+ <i data-feather="brain" class="text-secondary"></i>
311
+ <span>AI Trading Insights</span>
312
+ </h2>
313
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
314
+ <div class="bg-gray-800/50 rounded-lg p-4">
315
+ <h4 class="font-medium text-green-400 mb-2">Strengths</h4>
316
+ <ul class="text-sm space-y-2">
317
+ <li class="flex items-center space-x-2">
318
+ <i data-feather="check-circle" class="w-4 h-4 text-green-500"></i>
319
+ <span>Excellent risk management on EUR/USD trades</span>
320
+ </li>
321
+ <li class="flex items-center space-x-2">
322
+ <i data-feather="check-circle" class="w-4 h-4 text-green-500"></i>
323
+ <span>Strong consistency during London session</span>
324
+ </li>
325
+ <li class="flex items-center space-x-2">
326
+ <i data-feather="check-circle" class="w-4 h-4 text-green-500"></i>
327
+ <span>Effective use of trailing stops on winners</span>
328
+ </li>
329
+ </ul>
330
+ </div>
331
+ <div class="bg-gray-800/50 rounded-lg p-4">
332
+ <h4 class="font-medium text-yellow-400 mb-2">Opportunities</h4>
333
+ <ul class="text-sm space-y-2">
334
+ <li class="flex items-center space-x-2">
335
+ <i data-feather="alert-circle" class="w-4 h-4 text-yellow-500"></i>
336
+ <span>Reduce position size during high volatility</span>
337
+ </li>
338
+ <li class="flex items-center space-x-2">
339
+ <i data-feather="alert-circle" class="w-4 h-4 text-yellow-500"></i>
340
+ <span>Consider earlier profit-taking on GBP pairs</span>
341
+ </li>
342
+ <li class="flex items-center space-x-2">
343
+ <i data-feather="alert-circle" class="w-4 h-4 text-yellow-500"></i>
344
+ <span>Monitor correlation risk with current portfolio</span>
345
+ </li>
346
+ </ul>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ </main>
351
+
352
+ <script>
353
+ feather.replace();
354
+
355
+ // Simulate metric updates
356
+ setInterval(() => {
357
+ const metrics = [
358
+ { selector: '.text-green-500.text-2xl', min: 8000, max: 8500 },
359
+ { selector: '.text-red-500.text-2xl', min: 2100, max: 2200 },
360
+ { selector: '.text-primary.text-2xl', min: 3.7, max: 4.0 },
361
+ { selector: '.text-yellow-500.text-2xl', min: 63, max: 66 },
362
+ { selector: '.text-blue-500.text-2xl', min: 2.4, max: 2.6 }
363
+ ];
364
+
365
+ metrics.forEach(metric => {
366
+ const element = document.querySelector(metric.selector);
367
+ if (element) {
368
+ const currentValue = parseFloat(element.textContent.replace('$', '').replace('%', ''));
369
+ const change = (Math.random() - 0.5) * (metric.max - metric.min) * 0.1;
370
+ const newValue = Math.max(metric.min, Math.min(metric.max, currentValue + change));
371
+
372
+ if (metric.selector.includes('$')) {
373
+ element.textContent = '$' + Math.round(newValue);
374
+ } else if (metric.selector.includes('%')) {
375
+ element.textContent = newValue.toFixed(1) + '%';
376
+ } else {
377
+ element.textContent = newValue.toFixed(2);
378
+ }
379
+ }
380
+ });
381
+ }, 5000);
382
+ </script>
383
+ </body>
384
+ </html>
ea-control.html ADDED
@@ -0,0 +1,323 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>TradeFlow Pro Nexus - EA Control</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ darkMode: 'class',
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#6366f1',
17
+ secondary: '#10b981'
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ <style>
24
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
25
+ body { font-family: 'Inter', sans-serif; }
26
+ .glass-effect { backdrop-filter: blur(16px) saturate(180%); background: rgba(17, 25, 40, 0.75); }
27
+ .gradient-bg { background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%); }
28
+ .mobile-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; }
29
+ @media (min-width: 1024px) {
30
+ .mobile-bottom-nav { display: none; }
31
+ }
32
+ .status-active { background: linear-gradient(90deg, #10b98120, #10b98110); border-left: 4px solid #10b981; }
33
+ .status-paused { background: linear-gradient(90deg, #f59e0b20, #f59e0b10); border-left: 4px solid #f59e0b; }
34
+ .status-error { background: linear-gradient(90deg, #ef444420, #ef444410); border-left: 4px solid #ef4444; }
35
+ </style>
36
+ </head>
37
+ <body class="gradient-bg min-h-screen text-white">
38
+ <!-- Desktop Navigation -->
39
+ <nav class="hidden lg:flex glass-effect border-b border-gray-700 p-4">
40
+ <div class="container mx-auto flex justify-between items-center">
41
+ <div class="flex items-center space-x-2">
42
+ <i data-feather="trending-up" class="text-primary"></i>
43
+ <span class="text-xl font-bold">TradeFlow Pro</span>
44
+ </div>
45
+ <div class="flex space-x-6">
46
+ <a href="index.html" class="flex items-center space-x-1 hover:text-gray-300">
47
+ <i data-feather="bar-chart-2"></i>
48
+ <span>Dashboard</span>
49
+ </a>
50
+ <a href="ea-control.html" class="flex items-center space-x-1 text-primary border-b-2 border-primary pb-1">
51
+ <i data-feather="cpu"></i>
52
+ <span>EA Control</span>
53
+ </a>
54
+ <a href="trading.html" class="flex items-center space-x-1 hover:text-gray-300">
55
+ <i data-feather="activity"></i>
56
+ <span>Trading</span>
57
+ </a>
58
+ <a href="protection.html" class="flex items-center space-x-1 hover:text-gray-300">
59
+ <i data-feather="shield"></i>
60
+ <span>Protection</span>
61
+ </a>
62
+ <a href="analytics.html" class="flex items-center space-x-1 hover:text-gray-300">
63
+ <i data-feather="pie-chart"></i>
64
+ <span>Analytics</span>
65
+ </a>
66
+ </div>
67
+ <div class="flex items-center space-x-4">
68
+ <div class="relative">
69
+ <i data-feather="bell" class="cursor-pointer"></i>
70
+ <span class="absolute -top-1 -right-1 bg-red-500 text-xs rounded-full w-4 h-4 flex items-center justify-center">2</span>
71
+ </div>
72
+ <div class="flex items-center space-x-2">
73
+ <div class="w-8 h-8 bg-primary rounded-full flex items-center justify-center">
74
+ <i data-feather="user" class="w-4 h-4"></i>
75
+ </div>
76
+ <span>Trader</span>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ </nav>
81
+
82
+ <!-- Mobile Bottom Navigation -->
83
+ <nav class="mobile-bottom-nav glass-effect border-t border-gray-700 lg:hidden">
84
+ <div class="flex justify-around items-center py-3">
85
+ <a href="index.html" class="flex flex-col items-center text-gray-400">
86
+ <i data-feather="bar-chart-2" class="w-5 h-5"></i>
87
+ <span class="text-xs mt-1">Dashboard</span>
88
+ </a>
89
+ <a href="ea-control.html" class="flex flex-col items-center text-primary">
90
+ <i data-feather="cpu" class="w-5 h-5"></i>
91
+ <span class="text-xs mt-1">EAs</span>
92
+ </a>
93
+ <a href="trading.html" class="flex flex-col items-center text-gray-400">
94
+ <i data-feather="activity" class="w-5 h-5"></i>
95
+ <span class="text-xs mt-1">Trade</span>
96
+ </a>
97
+ <a href="protection.html" class="flex flex-col items-center text-gray-400">
98
+ <i data-feather="shield" class="w-5 h-5"></i>
99
+ <span class="text-xs mt-1">Shield</span>
100
+ </a>
101
+ <a href="analytics.html" class="flex flex-col items-center text-gray-400">
102
+ <i data-feather="pie-chart" class="w-5 h-5"></i>
103
+ <span class="text-xs mt-1">Stats</span>
104
+ </a>
105
+ </div>
106
+ </nav>
107
+
108
+ <!-- Main Content -->
109
+ <main class="container mx-auto px-4 py-6 lg:py-8 pb-20 lg:pb-8">
110
+ <!-- Header -->
111
+ <div class="glass-effect rounded-xl p-6 mb-6">
112
+ <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
113
+ <div>
114
+ <h1 class="text-2xl font-bold mb-2">Expert Advisor Control Center</h1>
115
+ <p class="text-gray-400">Monitor and manage all your automated trading strategies in real-time</p>
116
+ </div>
117
+ <div class="flex space-x-3 mt-4 lg:mt-0">
118
+ <button class="bg-primary hover:bg-primary/80 px-4 py-2 rounded-lg flex items-center space-x-2">
119
+ <i data-feather="plus" class="w-4 h-4"></i>
120
+ <span>Add EA</span>
121
+ </button>
122
+ <button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg flex items-center space-x-2">
123
+ <i data-feather="settings" class="w-4 h-4"></i>
124
+ <span>Settings</span>
125
+ </button>
126
+ </div>
127
+ </div>
128
+ </div>
129
+
130
+ <!-- EA Dashboard -->
131
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-6">
132
+ <div class="glass-effect rounded-xl p-6 text-center">
133
+ <div class="text-3xl font-bold text-primary mb-2">8</div>
134
+ <div class="text-gray-400">Total EAs</div>
135
+ </div>
136
+ <div class="glass-effect rounded-xl p-6 text-center">
137
+ <div class="text-3xl font-bold text-green-500 mb-2">5</div>
138
+ <div class="text-gray-400">Active</div>
139
+ </div>
140
+ <div class="glass-effect rounded-xl p-6 text-center">
141
+ <div class="text-3xl font-bold text-yellow-500 mb-2">2</div>
142
+ <div class="text-gray-400">Paused</div>
143
+ </div>
144
+ <div class="glass-effect rounded-xl p-6 text-center">
145
+ <div class="text-3xl font-bold text-red-500 mb-2">1</div>
146
+ <div class="text-gray-400">Errors</div>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- EA List -->
151
+ <div class="glass-effect rounded-xl p-6">
152
+ <div class="flex justify-between items-center mb-6">
153
+ <h2 class="text-lg font-semibold">Managed Expert Advisors</h2>
154
+ <div class="flex space-x-2">
155
+ <div class="relative">
156
+ <input type="text" placeholder="Search EAs..." class="bg-gray-800 border border-gray-600 rounded-lg pl-10 pr-4 py-2 text-sm w-64">
157
+ <i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400"></i>
158
+ </div>
159
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded-lg">
160
+ <i data-feather="filter" class="w-4 h-4"></i>
161
+ </button>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- EA Items -->
166
+ <div class="space-y-4">
167
+ <!-- EA 1 -->
168
+ <div class="status-active rounded-lg p-4">
169
+ <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
170
+ <div class="flex items-center space-x-4 mb-3 lg:mb-0">
171
+ <div class="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center">
172
+ <i data-feather="trending-up" class="w-6 h-6 text-green-500"></i>
173
+ </div>
174
+ <div>
175
+ <div class="font-semibold">TrendMaster Pro</div>
176
+ <div class="text-sm text-gray-400">EUR/USD - M15 | Risk: Medium</div>
177
+ </div>
178
+ </div>
179
+ <div class="flex items-center space-x-6">
180
+ <div class="text-center">
181
+ <div class="text-green-500 font-mono text-lg">+$324.50</div>
182
+ <div class="text-xs text-gray-400">Current P&L</div>
183
+ </div>
184
+ <div class="text-center">
185
+ <div class="font-mono text-lg">12</div>
186
+ <div class="text-xs text-gray-400">Active Trades</div>
187
+ </div>
188
+ <div class="flex space-x-2">
189
+ <button class="bg-red-500/20 hover:bg-red-500/30 text-red-500 px-3 py-2 rounded-lg flex items-center space-x-1">
190
+ <i data-feather="pause" class="w-4 h-4"></i>
191
+ <span class="hidden lg:block">Stop</span>
192
+ </button>
193
+ <button class="bg-blue-500/20 hover:bg-blue-500/30 text-blue-500 px-3 py-2 rounded-lg flex items-center space-x-1">
194
+ <i data-feather="settings" class="w-4 h-4"></i>
195
+ <span class="hidden lg:block">Config</span>
196
+ </button>
197
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded-lg flex items-center space-x-1">
198
+ <i data-feather="bar-chart-2" class="w-4 h-4"></i>
199
+ </button>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- EA 2 -->
206
+ <div class="status-paused rounded-lg p-4">
207
+ <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
208
+ <div class="flex items-center space-x-4 mb-3 lg:mb-0">
209
+ <div class="w-12 h-12 bg-yellow-500/20 rounded-lg flex items-center justify-center">
210
+ <i data-feather="zap" class="w-6 h-6 text-yellow-500"></i>
211
+ </div>
212
+ <div>
213
+ <div class="font-semibold">ScalperX Ultra</div>
214
+ <div class="text-sm text-gray-400">GBP/USD - M5 | Risk: High</div>
215
+ </div>
216
+ </div>
217
+ <div class="flex items-center space-x-6">
218
+ <div class="text-center">
219
+ <div class="text-red-500 font-mono text-lg">-$87.30</div>
220
+ <div class="text-xs text-gray-400">Current P&L</div>
221
+ </div>
222
+ <div class="text-center">
223
+ <div class="font-mono text-lg">3</div>
224
+ <div class="text-xs text-gray-400">Active Trades</div>
225
+ </div>
226
+ <div class="flex space-x-2">
227
+ <button class="bg-green-500/20 hover:bg-green-500/30 text-green-500 px-3 py-2 rounded-lg flex items-center space-x-1">
228
+ <i data-feather="play" class="w-4 h-4"></i>
229
+ <span class="hidden lg:block">Start</span>
230
+ </button>
231
+ <button class="bg-blue-500/20 hover:bg-blue-500/30 text-blue-500 px-3 py-2 rounded-lg flex items-center space-x-1">
232
+ <i data-feather="settings" class="w-4 h-4"></i>
233
+ <span class="hidden lg:block">Config</span>
234
+ </button>
235
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded-lg flex items-center space-x-1">
236
+ <i data-feather="bar-chart-2" class="w-4 h-4"></i>
237
+ </button>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ </div>
242
+
243
+ <!-- EA 3 -->
244
+ <div class="status-error rounded-lg p-4">
245
+ <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
246
+ <div class="flex items-center space-x-4 mb-3 lg:mb-0">
247
+ <div class="w-12 h-12 bg-red-500/20 rounded-lg flex items-center justify-center">
248
+ <i data-feather="alert-triangle" class="w-6 h-6 text-red-500"></i>
249
+ </div>
250
+ <div>
251
+ <div class="font-semibold">GridMaster 2.0</div>
252
+ <div class="text-sm text-gray-400">XAU/USD - H1 | Risk: Low</div>
253
+ <div class="text-xs text-red-400 mt-1">Connection lost - Retrying...</div>
254
+ </div>
255
+ </div>
256
+ <div class="flex items-center space-x-6">
257
+ <div class="text-center">
258
+ <div class="font-mono text-lg">$0.00</div>
259
+ <div class="text-xs text-gray-400">Current P&L</div>
260
+ </div>
261
+ <div class="text-center">
262
+ <div class="font-mono text-lg">0</div>
263
+ <div class="text-xs text-gray-400">Active Trades</div>
264
+ </div>
265
+ <div class="flex space-x-2">
266
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded-lg flex items-center space-x-1 text-gray-400" disabled>
267
+ <i data-feather="refresh-cw" class="w-4 h-4"></i>
268
+ <span class="hidden lg:block">Retry</span>
269
+ </button>
270
+ <button class="bg-blue-500/20 hover:bg-blue-500/30 text-blue-500 px-3 py-2 rounded-lg flex items-center space-x-1">
271
+ <i data-feather="settings" class="w-4 h-4"></i>
272
+ <span class="hidden lg:block">Config</span>
273
+ </button>
274
+ </div>
275
+ </div>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ </div>
280
+
281
+ <!-- Performance Charts -->
282
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
283
+ <div class="glass-effect rounded-xl p-6">
284
+ <h3 class="font-semibold mb-4">EA Performance Overview</h3>
285
+ <div class="h-64 bg-gray-900 rounded-lg flex items-center justify-center">
286
+ <div class="text-center text-gray-400">
287
+ <i data-feather="bar-chart-2" class="w-12 h-12 mx-auto mb-2"></i>
288
+ <p>Performance Analytics</p>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ <div class="glass-effect rounded-xl p-6">
293
+ <h3 class="font-semibold mb-4">Risk Distribution</h3>
294
+ <div class="h-64 bg-gray-900 rounded-lg flex items-center justify-center">
295
+ <div class="text-center text-gray-400">
296
+ <i data-feather="pie-chart" class="w-12 h-12 mx-auto mb-2"></i>
297
+ <p>Risk Management Dashboard</p>
298
+ </div>
299
+ </div>
300
+ </div>
301
+ </div>
302
+ </main>
303
+
304
+ <script>
305
+ feather.replace();
306
+
307
+ // Simulate EA status updates
308
+ setInterval(() => {
309
+ const eaStatuses = document.querySelectorAll('[class*="status-"]');
310
+ eaStatuses.forEach(status => {
311
+ if (Math.random() > 0.95) {
312
+ const classes = status.className.split(' ');
313
+ const statusClass = classes.find(c => c.startsWith('status-'));
314
+ if (statusClass) {
315
+ const newStatus = Math.random() > 0.5 ? 'status-active' : 'status-paused';
316
+ status.className = classes.filter(c => !c.startsWith('status-')).join(' ') + ' ' + newStatus;
317
+ }
318
+ }
319
+ });
320
+ }, 3000);
321
+ </script>
322
+ </body>
323
+ </html>
index.html CHANGED
@@ -1,19 +1,324 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>TradeFlow Pro Nexus - Dashboard</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: '#6366f1',
18
+ secondary: '#10b981'
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
+ <style>
25
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
26
+ body { font-family: 'Inter', sans-serif; }
27
+ .glass-effect { backdrop-filter: blur(16px) saturate(180%); background: rgba(17, 25, 40, 0.75); }
28
+ .gradient-bg { background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%); }
29
+ .chart-container { height: 400px; }
30
+ .mobile-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; }
31
+ @media (min-width: 1024px) {
32
+ .mobile-bottom-nav { display: none; }
33
+ }
34
+ </style>
35
+ </head>
36
+ <body class="gradient-bg min-h-screen text-white">
37
+ <!-- Desktop Navigation -->
38
+ <nav class="hidden lg:flex glass-effect border-b border-gray-700 p-4">
39
+ <div class="container mx-auto flex justify-between items-center">
40
+ <div class="flex items-center space-x-2">
41
+ <i data-feather="trending-up" class="text-primary"></i>
42
+ <span class="text-xl font-bold">TradeFlow Pro</span>
43
+ </div>
44
+ <div class="flex space-x-6">
45
+ <a href="index.html" class="flex items-center space-x-1 text-primary border-b-2 border-primary pb-1">
46
+ <i data-feather="bar-chart-2"></i>
47
+ <span>Dashboard</span>
48
+ </a>
49
+ <a href="ea-control.html" class="flex items-center space-x-1 hover:text-gray-300">
50
+ <i data-feather="cpu"></i>
51
+ <span>EA Control</span>
52
+ </a>
53
+ <a href="trading.html" class="flex items-center space-x-1 hover:text-gray-300">
54
+ <i data-feather="activity"></i>
55
+ <span>Trading</span>
56
+ </a>
57
+ <a href="protection.html" class="flex items-center space-x-1 hover:text-gray-300">
58
+ <i data-feather="shield"></i>
59
+ <span>Protection</span>
60
+ </a>
61
+ <a href="analytics.html" class="flex items-center space-x-1 hover:text-gray-300">
62
+ <i data-feather="pie-chart"></i>
63
+ <span>Analytics</span>
64
+ </a>
65
+ </div>
66
+ <div class="flex items-center space-x-4">
67
+ <div class="relative">
68
+ <i data-feather="bell" class="cursor-pointer"></i>
69
+ <span class="absolute -top-1 -right-1 bg-red-500 text-xs rounded-full w-4 h-4 flex items-center justify-center">3</span>
70
+ </div>
71
+ <div class="flex items-center space-x-2">
72
+ <div class="w-8 h-8 bg-primary rounded-full flex items-center justify-center">
73
+ <i data-feather="user" class="w-4 h-4"></i>
74
+ </div>
75
+ <span>Trader</span>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </nav>
80
+
81
+ <!-- Mobile Bottom Navigation -->
82
+ <nav class="mobile-bottom-nav glass-effect border-t border-gray-700 lg:hidden">
83
+ <div class="flex justify-around items-center py-3">
84
+ <a href="index.html" class="flex flex-col items-center text-primary">
85
+ <i data-feather="bar-chart-2" class="w-5 h-5"></i>
86
+ <span class="text-xs mt-1">Dashboard</span>
87
+ </a>
88
+ <a href="ea-control.html" class="flex flex-col items-center text-gray-400">
89
+ <i data-feather="cpu" class="w-5 h-5"></i>
90
+ <span class="text-xs mt-1">EAs</span>
91
+ </a>
92
+ <a href="trading.html" class="flex flex-col items-center text-gray-400">
93
+ <i data-feather="activity" class="w-5 h-5"></i>
94
+ <span class="text-xs mt-1">Trade</span>
95
+ </a>
96
+ <a href="protection.html" class="flex flex-col items-center text-gray-400">
97
+ <i data-feather="shield" class="w-5 h-5"></i>
98
+ <span class="text-xs mt-1">Shield</span>
99
+ </a>
100
+ <a href="analytics.html" class="flex flex-col items-center text-gray-400">
101
+ <i data-feather="pie-chart" class="w-5 h-5"></i>
102
+ <span class="text-xs mt-1">Stats</span>
103
+ </a>
104
+ </div>
105
+ </nav>
106
+
107
+ <!-- Main Content -->
108
+ <main class="container mx-auto px-4 py-6 lg:py-8 pb-20 lg:pb-8">
109
+ <!-- Connection Status -->
110
+ <div class="glass-effect rounded-xl p-4 mb-6 flex items-center justify-between">
111
+ <div class="flex items-center space-x-3">
112
+ <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
113
+ <span class="font-medium">Connected to MT5</span>
114
+ <span class="text-sm text-gray-400">Account: 12345678 | Broker: Demo Server</span>
115
+ </div>
116
+ <div class="flex items-center space-x-4">
117
+ <div class="text-right">
118
+ <div class="text-2xl font-bold">$25,847.32</div>
119
+ <div class="text-sm text-green-500">+$324.50 (+1.27%) Today</div>
120
+ </div>
121
+ <button class="bg-primary hover:bg-primary/80 px-4 py-2 rounded-lg flex items-center space-x-2">
122
+ <i data-feather="refresh-cw" class="w-4 h-4"></i>
123
+ <span>Sync</span>
124
+ </button>
125
+ </div>
126
+ </div>
127
+
128
+ <!-- Dashboard Grid -->
129
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
130
+ <!-- Account Summary -->
131
+ <div class="glass-effect rounded-xl p-6 lg:col-span-1">
132
+ <h2 class="text-lg font-semibold mb-4 flex items-center space-x-2">
133
+ <i data-feather="dollar-sign" class="text-primary"></i>
134
+ <span>Account Summary</span>
135
+ </h2>
136
+ <div class="space-y-3">
137
+ <div class="flex justify-between">
138
+ <span>Balance:</span>
139
+ <span class="font-mono">$25,522.82</span>
140
+ </div>
141
+ <div class="flex justify-between">
142
+ <span>Equity:</span>
143
+ <span class="font-mono">$25,847.32</span>
144
+ </div>
145
+ <div class="flex justify-between">
146
+ <span>Free Margin:</span>
147
+ <span class="font-mono">$18,234.15</span>
148
+ </div>
149
+ <div class="flex justify-between">
150
+ <span>Margin Level:</span>
151
+ <span class="font-mono text-green-500">142%</span>
152
+ </div>
153
+ </div>
154
+ </div>
155
+
156
+ <!-- Active EAs -->
157
+ <div class="glass-effect rounded-xl p-6 lg:col-span-2">
158
+ <h2 class="text-lg font-semibold mb-4 flex items-center space-x-2">
159
+ <i data-feather="cpu" class="text-secondary"></i>
160
+ <span>Active Expert Advisors</span>
161
+ </h2>
162
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
163
+ <div class="border border-gray-600 rounded-lg p-4">
164
+ <div class="flex justify-between items-start mb-2">
165
+ <span class="font-medium">TrendMaster Pro</span>
166
+ <span class="text-xs bg-green-500/20 text-green-400 px-2 py-1 rounded">Active</span>
167
+ </div>
168
+ <div class="text-sm text-gray-400 mb-2">EUR/USD - M15</div>
169
+ <div class="flex justify-between text-sm">
170
+ <span>P&L:</span>
171
+ <span class="text-green-500">+$142.50</span>
172
+ </div>
173
+ <div class="flex justify-between text-sm">
174
+ <span>Trades:</span>
175
+ <span>3</span>
176
+ </div>
177
+ </div>
178
+ <div class="border border-gray-600 rounded-lg p-4">
179
+ <div class="flex justify-between items-start mb-2">
180
+ <span class="font-medium">ScalperX</span>
181
+ <span class="text-xs bg-yellow-500/20 text-yellow-400 px-2 py-1 rounded">Paused</span>
182
+ </div>
183
+ <div class="text-sm text-gray-400 mb-2">GBP/USD - M5</div>
184
+ <div class="flex justify-between text-sm">
185
+ <span>P&L:</span>
186
+ <span class="text-red-500">-$23.80</span>
187
+ </div>
188
+ <div class="flex justify-between text-sm">
189
+ <span>Trades:</span>
190
+ <span>1</span>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ </div>
195
+ </div>
196
+
197
+ <!-- Charts and Open Positions -->
198
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
199
+ <!-- Price Chart -->
200
+ <div class="glass-effect rounded-xl p-6">
201
+ <div class="flex justify-between items-center mb-4">
202
+ <h2 class="text-lg font-semibold">EUR/USD - 1H</h2>
203
+ <div class="flex space-x-2">
204
+ <button class="px-3 py-1 bg-gray-700 rounded text-sm">1H</button>
205
+ <button class="px-3 py-1 bg-primary rounded text-sm">4H</button>
206
+ <button class="px-3 py-1 bg-gray-700 rounded text-sm">1D</button>
207
+ </div>
208
+ </div>
209
+ <div class="chart-container bg-gray-900 rounded-lg flex items-center justify-center">
210
+ <div class="text-center">
211
+ <i data-feather="trending-up" class="w-12 h-12 text-primary mx-auto mb-2"></i>
212
+ <p class="text-gray-400">Live Chart Integration</p>
213
+ <p class="text-sm text-gray-500">Real-time MT5 data streaming</p>
214
+ </div>
215
+ </div>
216
+ </div>
217
+
218
+ <!-- Open Positions -->
219
+ <div class="glass-effect rounded-xl p-6">
220
+ <h2 class="text-lg font-semibold mb-4 flex items-center space-x-2">
221
+ <i data-feather="layers" class="text-primary"></i>
222
+ <span>Open Positions</span>
223
+ <span class="bg-primary/20 text-primary text-xs px-2 py-1 rounded">5</span>
224
+ </h2>
225
+ <div class="space-y-3 max-h-80 overflow-y-auto">
226
+ <div class="flex justify-between items-center p-3 bg-gray-800/50 rounded-lg">
227
+ <div>
228
+ <div class="font-medium">EUR/USD</div>
229
+ <div class="text-sm text-gray-400">Buy 0.1 Lot</div>
230
+ </div>
231
+ <div class="text-right">
232
+ <div class="text-green-500 font-mono">+$32.50</div>
233
+ <div class="text-sm text-gray-400">1.08745</div>
234
+ </div>
235
+ </div>
236
+ <div class="flex justify-between items-center p-3 bg-gray-800/50 rounded-lg">
237
+ <div>
238
+ <div class="font-medium">GBP/USD</div>
239
+ <div class="text-sm text-gray-400">Sell 0.05 Lot</div>
240
+ </div>
241
+ <div class="text-right">
242
+ <div class="text-red-500 font-mono">-$12.80</div>
243
+ <div class="text-sm text-gray-400">1.26530</div>
244
+ </div>
245
+ </div>
246
+ <div class="flex justify-between items-center p-3 bg-gray-800/50 rounded-lg">
247
+ <div>
248
+ <div class="font-medium">XAU/USD</div>
249
+ <div class="text-sm text-gray-400">Buy 0.01 Lot</div>
250
+ </div>
251
+ <div class="text-right">
252
+ <div class="text-green-500 font-mono">+$87.20</div>
253
+ <div class="text-sm text-gray-400">1987.45</div>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </div>
259
+
260
+ <!-- Quick Actions -->
261
+ <div class="glass-effect rounded-xl p-6 mt-6">
262
+ <h2 class="text-lg font-semibold mb-4">Quick Actions</h2>
263
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
264
+ <button class="bg-primary/20 hover:bg-primary/30 border border-primary/30 rounded-lg p-4 flex flex-col items-center justify-center space-y-2 transition-colors">
265
+ <i data-feather="plus-circle" class="w-8 h-8 text-primary"></i>
266
+ <span class="text-sm">New Trade</span>
267
+ </button>
268
+ <button class="bg-red-500/20 hover:bg-red-500/30 border border-red-500/30 rounded-lg p-4 flex flex-col items-center justify-center space-y-2 transition-colors">
269
+ <i data-feather="x-circle" class="w-8 h-8 text-red-500"></i>
270
+ <span class="text-sm">Close All</span>
271
+ </button>
272
+ <button class="bg-green-500/20 hover:bg-green-500/30 border border-green-500/30 rounded-lg p-4 flex flex-col items-center justify-center space-y-2 transition-colors">
273
+ <i data-feather="trending-up" class="w-8 h-8 text-green-500"></i>
274
+ <span class="text-sm">Analytics</span>
275
+ </button>
276
+ <button class="bg-blue-500/20 hover:bg-blue-500/30 border border-blue-500/30 rounded-lg p-4 flex flex-col items-center justify-center space-y-2 transition-colors">
277
+ <i data-feather="settings" class="w-8 h-8 text-blue-500"></i>
278
+ <span class="text-sm">Settings</span>
279
+ </button>
280
+ </div>
281
+ </div>
282
+ </main>
283
+
284
+ <!-- Vanta.js Background -->
285
+ <div id="vanta-bg" class="fixed inset-0 -z-10"></div>
286
+
287
+ <script>
288
+ // Initialize Vanta.js background
289
+ VANTA.GLOBE({
290
+ el: "#vanta-bg",
291
+ mouseControls: true,
292
+ touchControls: true,
293
+ gyroControls: false,
294
+ minHeight: 200.00,
295
+ minWidth: 200.00,
296
+ scale: 1.00,
297
+ scaleMobile: 1.00,
298
+ color: 0x6366f1,
299
+ backgroundColor: 0x0f172a
300
+ });
301
+
302
+ // Initialize Feather Icons
303
+ feather.replace();
304
+
305
+ // Simulate real-time data updates
306
+ setInterval(() => {
307
+ const equityElement = document.querySelector('.text-2xl.font-bold');
308
+ if (equityElement) {
309
+ const currentValue = parseFloat(equityElement.textContent.replace('$', '').replace(',', ''));
310
+ const change = (Math.random() - 0.5) * 20;
311
+ const newValue = currentValue + change;
312
+ equityElement.textContent = '$' + newValue.toFixed(2);
313
+
314
+ const changeElement = document.querySelector('.text-sm.text-green-500');
315
+ if (changeElement) {
316
+ const isPositive = change >= 0;
317
+ changeElement.textContent = `${isPositive ? '+' : ''}$${change.toFixed(2)} (${isPositive ? '+' : ''}${(change/currentValue*100).toFixed(2)}%) Today`;
318
+ changeElement.className = `text-sm ${isPositive ? 'text-green-500' : 'text-red-500'}`;
319
+ }
320
+ }
321
+ }, 5000);
322
+ </script>
323
+ </body>
324
  </html>
protection.html ADDED
@@ -0,0 +1,393 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>TradeFlow Pro Nexus - Protection</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ darkMode: 'class',
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#6366f1',
17
+ secondary: '#10b981'
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ <style>
24
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
25
+ body { font-family: 'Inter', sans-serif; }
26
+ .glass-effect { backdrop-filter: blur(16px) saturate(180%); background: rgba(17, 25, 40, 0.75); }
27
+ .gradient-bg { background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%); }
28
+ .mobile-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; }
29
+ @media (min-width: 1024px) {
30
+ .mobile-bottom-nav { display: none; }
31
+ }
32
+ .protection-active { border-left: 4px solid #10b981; background: linear-gradient(90deg, #10b98110, transparent); }
33
+ </style>
34
+ </head>
35
+ <body class="gradient-bg min-h-screen text-white">
36
+ <!-- Desktop Navigation -->
37
+ <nav class="hidden lg:flex glass-effect border-b border-gray-700 p-4">
38
+ <div class="container mx-auto flex justify-between items-center">
39
+ <div class="flex items-center space-x-2">
40
+ <i data-feather="trending-up" class="text-primary"></i>
41
+ <span class="text-xl font-bold">TradeFlow Pro</span>
42
+ </div>
43
+ <div class="flex space-x-6">
44
+ <a href="index.html" class="flex items-center space-x-1 hover:text-gray-300">
45
+ <i data-feather="bar-chart-2"></i>
46
+ <span>Dashboard</span>
47
+ </a>
48
+ <a href="ea-control.html" class="flex items-center space-x-1 hover:text-gray-300">
49
+ <i data-feather="cpu"></i>
50
+ <span>EA Control</span>
51
+ </a>
52
+ <a href="trading.html" class="flex items-center space-x-1 hover:text-gray-300">
53
+ <i data-feather="activity"></i>
54
+ <span>Trading</span>
55
+ </a>
56
+ <a href="protection.html" class="flex items-center space-x-1 text-primary border-b-2 border-primary pb-1">
57
+ <i data-feather="shield"></i>
58
+ <span>Protection</span>
59
+ </a>
60
+ <a href="analytics.html" class="flex items-center space-x-1 hover:text-gray-300">
61
+ <i data-feather="pie-chart"></i>
62
+ <span>Analytics</span>
63
+ </a>
64
+ </div>
65
+ <div class="flex items-center space-x-4">
66
+ <div class="relative">
67
+ <i data-feather="bell" class="cursor-pointer"></i>
68
+ <span class="absolute -top-1 -right-1 bg-yellow-500 text-xs rounded-full w-4 h-4 flex items-center justify-center">2</span>
69
+ </div>
70
+ <div class="flex items-center space-x-2">
71
+ <div class="w-8 h-8 bg-primary rounded-full flex items-center justify-center">
72
+ <i data-feather="user" class="w-4 h-4"></i>
73
+ </div>
74
+ <span>Trader</span>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </nav>
79
+
80
+ <!-- Mobile Bottom Navigation -->
81
+ <nav class="mobile-bottom-nav glass-effect border-t border-gray-700 lg:hidden">
82
+ <div class="flex justify-around items-center py-3">
83
+ <a href="index.html" class="flex flex-col items-center text-gray-400">
84
+ <i data-feather="bar-chart-2" class="w-5 h-5"></i>
85
+ <span class="text-xs mt-1">Dashboard</span>
86
+ </a>
87
+ <a href="ea-control.html" class="flex flex-col items-center text-gray-400">
88
+ <i data-feather="cpu" class="w-5 h-5"></i>
89
+ <span class="text-xs mt-1">EAs</span>
90
+ </a>
91
+ <a href="trading.html" class="flex flex-col items-center text-gray-400">
92
+ <i data-feather="activity" class="w-5 h-5"></i>
93
+ <span class="text-xs mt-1">Trade</span>
94
+ </a>
95
+ <a href="protection.html" class="flex flex-col items-center text-primary">
96
+ <i data-feather="shield" class="w-5 h-5"></i>
97
+ <span class="text-xs mt-1">Shield</span>
98
+ </a>
99
+ <a href="analytics.html" class="flex flex-col items-center text-gray-400">
100
+ <i data-feather="pie-chart" class="w-5 h-5"></i>
101
+ <span class="text-xs mt-1">Stats</span>
102
+ </a>
103
+ </div>
104
+ </nav>
105
+
106
+ <!-- Main Content -->
107
+ <main class="container mx-auto px-4 py-6 lg:py-8 pb-20 lg:pb-8">
108
+ <!-- Protection Header -->
109
+ <div class="glass-effect rounded-xl p-6 mb-6">
110
+ <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
111
+ <div>
112
+ <h1 class="text-2xl font-bold mb-2">Advanced Protection System</h1>
113
+ <p class="text-gray-400">Automated risk management and capital protection tools</p>
114
+ </div>
115
+ <div class="flex space-x-3 mt-4 lg:mt-0">
116
+ <button class="bg-primary hover:bg-primary/80 px-4 py-2 rounded-lg flex items-center space-x-2">
117
+ <i data-feather="plus" class="w-4 h-4"></i>
118
+ <span>New Template</span>
119
+ </button>
120
+ <button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg flex items-center space-x-2">
121
+ <i data-feather="settings" class="w-4 h-4"></i>
122
+ <span>Global Settings</span>
123
+ </button>
124
+ </div>
125
+ </div>
126
+ </div>
127
+
128
+ <!-- Protection Dashboard -->
129
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-6">
130
+ <div class="glass-effect rounded-xl p-6 text-center">
131
+ <div class="text-3xl font-bold text-green-500 mb-2">12</div>
132
+ <div class="text-gray-400">Active Protections</div>
133
+ </div>
134
+ <div class="glass-effect rounded-xl p-6 text-center">
135
+ <div class="text-3xl font-bold text-blue-500 mb-2">$1,245</div>
136
+ <div class="text-gray-400">Protected Today</div>
137
+ </div>
138
+ <div class="glass-effect rounded-xl p-6 text-center">
139
+ <div class="text-3xl font-bold text-yellow-500 mb-2">87%</div>
140
+ <div class="text-gray-400">Success Rate</div>
141
+ </div>
142
+ <div class="glass-effect rounded-xl p-6 text-center">
143
+ <div class="text-3xl font-bold text-red-500 mb-2">3</div>
144
+ <div class="text-gray-400">Triggers Today</div>
145
+ </div>
146
+ </div>
147
+
148
+ <!-- Protection Templates -->
149
+ <div class="glass-effect rounded-xl p-6 mb-6">
150
+ <h2 class="text-lg font-semibold mb-4">Protection Templates</h2>
151
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
152
+ <!-- Template 1 -->
153
+ <div class="protection-active rounded-lg p-4 border border-gray-600">
154
+ <div class="flex items-center justify-between mb-3">
155
+ <span class="font-semibold">Breakeven Multi-Level</span>
156
+ <span class="text-xs bg-green-500/20 text-green-400 px-2 py-1 rounded">Active</span>
157
+ </div>
158
+ <div class="text-sm text-gray-400 mb-3">
159
+ Moves SL to breakeven at +20 pips, then locks profits progressively
160
+ </div>
161
+ <div class="space-y-2 text-xs">
162
+ <div class="flex justify-between">
163
+ <span>Level 1:</span>
164
+ <span>+20 pips → BE</span>
165
+ </div>
166
+ <div class="flex justify-between">
167
+ <span>Level 2:</span>
168
+ <span>+40 pips → +20</span>
169
+ </div>
170
+ <div class="flex justify-between">
171
+ <span>Applied to:</span>
172
+ <span>5 positions</span>
173
+ </div>
174
+ </div>
175
+ </div>
176
+
177
+ <!-- Template 2 -->
178
+ <div class="protection-active rounded-lg p-4 border border-gray-600">
179
+ <div class="flex items-center justify-between mb-3">
180
+ <span class="font-semibold">ATR Trailing Stop</span>
181
+ <span class="text-xs bg-green-500/20 text-green-400 px-2 py-1 rounded">Active</span>
182
+ </div>
183
+ <div class="text-sm text-gray-400 mb-3">
184
+ Dynamic trailing stop based on 2x ATR (14 period)
185
+ </div>
186
+ <div class="space-y-2 text-xs">
187
+ <div class="flex justify-between">
188
+ <span>ATR Period:</span>
189
+ <span>14</span>
190
+ </div>
191
+ <div class="flex justify-between">
192
+ <span>Multiplier:</span>
193
+ <span>2.0x</span>
194
+ </div>
195
+ <div class="flex justify-between">
196
+ <span>Applied to:</span>
197
+ <span>3 positions</span>
198
+ </div>
199
+ </div>
200
+ </div>
201
+
202
+ <!-- Template 3 -->
203
+ <div class="rounded-lg p-4 border border-gray-600">
204
+ <div class="flex items-center justify-between mb-3">
205
+ <span class="font-semibold">MA Trailing Stop</span>
206
+ <span class="text-xs bg-gray-500/20 text-gray-400 px-2 py-1 rounded">Inactive</span>
207
+ </div>
208
+ <div class="text-sm text-gray-400 mb-3">
209
+ SL follows EMA(20) for trend-following positions
210
+ </div>
211
+ <div class="space-y-2 text-xs">
212
+ <div class="flex justify-between">
213
+ <span>MA Type:</span>
214
+ <span>EMA 20</span>
215
+ </div>
216
+ <div class="flex justify-between">
217
+ <span>Offset:</span>
218
+ <span>10 pips</span>
219
+ </div>
220
+ <div class="flex justify-between">
221
+ <span>Applied to:</span>
222
+ <span>0 positions</span>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ </div>
228
+
229
+ <!-- Active Protections -->
230
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
231
+ <!-- Protected Positions -->
232
+ <div class="glass-effect rounded-xl p-6">
233
+ <h3 class="font-semibold mb-4 flex items-center space-x-2">
234
+ <i data-feather="shield" class="text-green-500"></i>
235
+ <span>Protected Positions</span>
236
+ <span class="bg-green-500/20 text-green-400 text-xs px-2 py-1 rounded">8 Active</span>
237
+ </h3>
238
+ <div class="space-y-3 max-h-80 overflow-y-auto">
239
+ <!-- Position 1 -->
240
+ <div class="bg-gray-800/50 rounded-lg p-3">
241
+ <div class="flex justify-between items-start mb-2">
242
+ <div>
243
+ <div class="font-medium">EUR/USD Buy</div>
244
+ <div class="text-sm text-gray-400">0.1 Lot • Breakeven Multi-Level</div>
245
+ </div>
246
+ <div class="text-right">
247
+ <div class="text-green-500 font-mono">+$42.50</div>
248
+ <div class="text-xs text-gray-400">+28 pips</div>
249
+ </div>
250
+ </div>
251
+ <div class="flex justify-between text-xs text-gray-400">
252
+ <span>Current SL: 1.08620 (BE)</span>
253
+ <span>Next Level: +40 pips</span>
254
+ </div>
255
+ </div>
256
+
257
+ <!-- Position 2 -->
258
+ <div class="bg-gray-800/50 rounded-lg p-3">
259
+ <div class="flex justify-between items-start mb-2">
260
+ <div>
261
+ <div class="font-medium">XAU/USD Buy</div>
262
+ <div class="text-sm text-gray-400">0.02 Lot • ATR Trailing Stop</div>
263
+ </div>
264
+ <div class="text-right">
265
+ <div class="text-green-500 font-mono">+$156.80</div>
266
+ <div class="text-xs text-gray-400">+$12.50</div>
267
+ </div>
268
+ </div>
269
+ <div class="flex justify-between text-xs text-gray-400">
270
+ <span>Current SL: 1975.40</span>
271
+ <span>ATR: 8.5 pips</span>
272
+ </div>
273
+ </div>
274
+
275
+ <!-- Position 3 -->
276
+ <div class="bg-gray-800/50 rounded-lg p-3">
277
+ <div class="flex justify-between items-start mb-2">
278
+ <div>
279
+ <div class="font-medium">GBP/JPY Sell</div>
280
+ <div class="text-sm text-gray-400">0.05 Lot • Partial Close + Trail</div>
281
+ </div>
282
+ <div class="text-right">
283
+ <div class="text-green-500 font-mono">+$23.40</div>
284
+ <div class="text-xs text-gray-400">-15 pips</div>
285
+ </div>
286
+ </div>
287
+ <div class="flex justify-between text-xs text-gray-400">
288
+ <span>50% closed at TP1</span>
289
+ <span>Trailing active</span>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </div>
294
+
295
+ <!-- Protection Settings -->
296
+ <div class="glass-effect rounded-xl p-6">
297
+ <h3 class="font-semibold mb-4">Create New Protection</h3>
298
+ <div class="space-y-4">
299
+ <!-- Protection Type -->
300
+ <div>
301
+ <label class="text-sm text-gray-400 mb-2 block">Protection Type</label>
302
+ <select class="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2">
303
+ <option>Breakeven Multi-Level</option>
304
+ <option>ATR Trailing Stop</option>
305
+ <option>MA Trailing Stop</option>
306
+ <option>Partial Close + Trail</option>
307
+ <option>Stealth Mode</option>
308
+ <option>OCO (One Cancels Other)</option>
309
+ </select>
310
+ </div>
311
+
312
+ <!-- Parameters -->
313
+ <div class="grid grid-cols-2 gap-4">
314
+ <div>
315
+ <label class="text-sm text-gray-400 mb-2 block">Activation Level</label>
316
+ <input type="number" class="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2" placeholder="Pips">
317
+ </div>
318
+ <div>
319
+ <label class="text-sm text-gray-400 mb-2 block">Trailing Distance</label>
320
+ <input type="number" class="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2" placeholder="Pips">
321
+ </div>
322
+ </div>
323
+
324
+ <!-- Apply To -->
325
+ <div>
326
+ <label class="text-sm text-gray-400 mb-2 block">Apply To</label>
327
+ <div class="space-y-2">
328
+ <label class="flex items-center space-x-2">
329
+ <input type="checkbox" class="rounded bg-gray-700">
330
+ <span>All Open Positions</span>
331
+ </label>
332
+ <label class="flex items-center space-x-2">
333
+ <input type="checkbox" class="rounded bg-gray-700">
334
+ <span>Specific Symbols</span>
335
+ </label>
336
+ <label class="flex items-center space-x-2">
337
+ <input type="checkbox" class="rounded bg-gray-700">
338
+ <span>Future Positions Only</span>
339
+ </label>
340
+ </div>
341
+ </div>
342
+
343
+ <!-- Template Options -->
344
+ <div class="flex space-x-3">
345
+ <button class="flex-1 bg-primary hover:bg-primary/80 py-3 rounded-lg font-semibold">
346
+ Activate Protection
347
+ </button>
348
+ <button class="bg-gray-700 hover:bg-gray-600 px-4 py-3 rounded-lg">
349
+ <i data-feather="save" class="w-4 h-4"></i>
350
+ </button>
351
+ </div>
352
+ </div>
353
+
354
+ <!-- Emergency Controls -->
355
+ <div class="mt-6 pt-6 border-t border-gray-600">
356
+ <h4 class="font-semibold mb-3 text-red-400">Emergency Controls</h4>
357
+ <div class="grid grid-cols-2 gap-3">
358
+ <button class="bg-red-500/20 hover:bg-red-500/30 text-red-400 py-3 rounded-lg flex items-center justify-center space-x-2">
359
+ <i data-feather="alert-octagon" class="w-4 h-4"></i>
360
+ <span>Close All</span>
361
+ </button>
362
+ <button class="bg-yellow-500/20 hover:bg-yellow-500/30 text-yellow-400 py-3 rounded-lg flex items-center justify-center space-x-2">
363
+ <i data-feather="pause" class="w-4 h-4"></i>
364
+ <span>Pause All</span>
365
+ </button>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </div>
370
+ </main>
371
+
372
+ <script>
373
+ feather.replace();
374
+
375
+ // Simulate protection updates
376
+ setInterval(() => {
377
+ const protectionElements = document.querySelectorAll('.protection-active');
378
+ protectionElements.forEach(element => {
379
+ if (Math.random() > 0.98) {
380
+ const pnlElement = element.querySelector('.font-mono');
381
+ if (pnlElement) {
382
+ const currentValue = parseFloat(pnlElement.textContent.replace('+', '').replace('$', ''));
383
+ const change = (Math.random() - 0.3) * 10;
384
+ const newValue = Math.max(0, currentValue + change);
385
+ pnlElement.textContent = '+$' + newValue.toFixed(2);
386
+ pnlElement.className = `font-mono ${change >= 0 ? 'text-green-500' : 'text-red-500'}`;
387
+ }
388
+ }
389
+ });
390
+ }, 2000);
391
+ </script>
392
+ </body>
393
+ </html>
trading.html ADDED
@@ -0,0 +1,341 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>TradeFlow Pro Nexus - Trading</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ darkMode: 'class',
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#6366f1',
17
+ secondary: '#10b981'
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ <style>
24
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
25
+ body { font-family: 'Inter', sans-serif; }
26
+ .glass-effect { backdrop-filter: blur(16px) saturate(180%); background: rgba(17, 25, 40, 0.75); }
27
+ .gradient-bg { background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%); }
28
+ .mobile-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; }
29
+ @media (min-width: 1024px) {
30
+ .mobile-bottom-nav { display: none; }
31
+ }
32
+ .chart-container { height: 500px; }
33
+ .order-type-active { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
34
+ </style>
35
+ </head>
36
+ <body class="gradient-bg min-h-screen text-white">
37
+ <!-- Desktop Navigation -->
38
+ <nav class="hidden lg:flex glass-effect border-b border-gray-700 p-4">
39
+ <div class="container mx-auto flex justify-between items-center">
40
+ <div class="flex items-center space-x-2">
41
+ <i data-feather="trending-up" class="text-primary"></i>
42
+ <span class="text-xl font-bold">TradeFlow Pro</span>
43
+ </div>
44
+ <div class="flex space-x-6">
45
+ <a href="index.html" class="flex items-center space-x-1 hover:text-gray-300">
46
+ <i data-feather="bar-chart-2"></i>
47
+ <span>Dashboard</span>
48
+ </a>
49
+ <a href="ea-control.html" class="flex items-center space-x-1 hover:text-gray-300">
50
+ <i data-feather="cpu"></i>
51
+ <span>EA Control</span>
52
+ </a>
53
+ <a href="trading.html" class="flex items-center space-x-1 text-primary border-b-2 border-primary pb-1">
54
+ <i data-feather="activity"></i>
55
+ <span>Trading</span>
56
+ </a>
57
+ <a href="protection.html" class="flex items-center space-x-1 hover:text-gray-300">
58
+ <i data-feather="shield"></i>
59
+ <span>Protection</span>
60
+ </a>
61
+ <a href="analytics.html" class="flex items-center space-x-1 hover:text-gray-300">
62
+ <i data-feather="pie-chart"></i>
63
+ <span>Analytics</span>
64
+ </a>
65
+ </div>
66
+ <div class="flex items-center space-x-4">
67
+ <div class="relative">
68
+ <i data-feather="bell" class="cursor-pointer"></i>
69
+ <span class="absolute -top-1 -right-1 bg-red-500 text-xs rounded-full w-4 h-4 flex items-center justify-center">1</span>
70
+ </div>
71
+ <div class="flex items-center space-x-2">
72
+ <div class="w-8 h-8 bg-primary rounded-full flex items-center justify-center">
73
+ <i data-feather="user" class="w-4 h-4"></i>
74
+ </div>
75
+ <span>Trader</span>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </nav>
80
+
81
+ <!-- Mobile Bottom Navigation -->
82
+ <nav class="mobile-bottom-nav glass-effect border-t border-gray-700 lg:hidden">
83
+ <div class="flex justify-around items-center py-3">
84
+ <a href="index.html" class="flex flex-col items-center text-gray-400">
85
+ <i data-feather="bar-chart-2" class="w-5 h-5"></i>
86
+ <span class="text-xs mt-1">Dashboard</span>
87
+ </a>
88
+ <a href="ea-control.html" class="flex flex-col items-center text-gray-400">
89
+ <i data-feather="cpu" class="w-5 h-5"></i>
90
+ <span class="text-xs mt-1">EAs</span>
91
+ </a>
92
+ <a href="trading.html" class="flex flex-col items-center text-primary">
93
+ <i data-feather="activity" class="w-5 h-5"></i>
94
+ <span class="text-xs mt-1">Trade</span>
95
+ </a>
96
+ <a href="protection.html" class="flex flex-col items-center text-gray-400">
97
+ <i data-feather="shield" class="w-5 h-5"></i>
98
+ <span class="text-xs mt-1">Shield</span>
99
+ </a>
100
+ <a href="analytics.html" class="flex flex-col items-center text-gray-400">
101
+ <i data-feather="pie-chart" class="w-5 h-5"></i>
102
+ <span class="text-xs mt-1">Stats</span>
103
+ </a>
104
+ </div>
105
+ </nav>
106
+
107
+ <!-- Main Content -->
108
+ <main class="container mx-auto px-4 py-6 lg:py-8 pb-20 lg:pb-8">
109
+ <!-- Trading Header -->
110
+ <div class="glass-effect rounded-xl p-6 mb-6">
111
+ <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
112
+ <div class="flex items-center space-x-4 mb-4 lg:mb-0">
113
+ <div class="text-2xl font-bold">EUR/USD</div>
114
+ <div class="flex items-center space-x-2">
115
+ <div class="text-green-500 font-mono text-xl">1.08745</div>
116
+ <div class="text-sm text-green-500">+0.0023 (+0.21%)</div>
117
+ </div>
118
+ </div>
119
+ <div class="flex space-x-3">
120
+ <button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg">1H</button>
121
+ <button class="bg-primary px-4 py-2 rounded-lg">4H</button>
122
+ <button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg">1D</button>
123
+ <button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg">1W</button>
124
+ </div>
125
+ </div>
126
+ </div>
127
+
128
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
129
+ <!-- Chart Section -->
130
+ <div class="lg:col-span-2">
131
+ <div class="glass-effect rounded-xl p-6">
132
+ <div class="chart-container bg-gray-900 rounded-lg relative">
133
+ <!-- Chart Tools -->
134
+ <div class="absolute top-4 left-4 z-10 flex space-x-2">
135
+ <button class="bg-gray-800 hover:bg-gray-700 p-2 rounded-lg">
136
+ <i data-feather="trending-up" class="w-4 h-4"></i>
137
+ </button>
138
+ <button class="bg-gray-800 hover:bg-gray-700 p-2 rounded-lg">
139
+ <i data-feather="minus" class="w-4 h-4"></i>
140
+ </button>
141
+ <button class="bg-gray-800 hover:bg-gray-700 p-2 rounded-lg">
142
+ <i data-feather="maximize" class="w-4 h-4"></i>
143
+ </button>
144
+ </div>
145
+
146
+ <!-- Price Levels -->
147
+ <div class="absolute right-4 top-4 z-10 text-right">
148
+ <div class="text-sm text-gray-400">Bid: <span class="text-green-500">1.08742</span></div>
149
+ <div class="text-sm text-gray-400">Ask: <span class="text-red-500">1.08748</span></div>
150
+ <div class="text-sm text-gray-400">Spread: <span class="text-yellow-500">0.6 pips</span></div>
151
+ </div>
152
+
153
+ <!-- Chart Placeholder -->
154
+ <div class="w-full h-full flex items-center justify-center">
155
+ <div class="text-center">
156
+ <i data-feather="trending-up" class="w-16 h-16 text-primary mx-auto mb-4"></i>
157
+ <h3 class="text-xl font-semibold mb-2">Live Trading Chart</h3>
158
+ <p class="text-gray-400">Real-time MT5 price data streaming</p>
159
+ <p class="text-sm text-gray-500 mt-2">Interactive drawing tools available</p>
160
+ </div>
161
+ </div>
162
+
163
+ <!-- Drawing Tools -->
164
+ <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2">
165
+ <button class="bg-primary/20 hover:bg-primary/30 px-3 py-2 rounded-lg flex items-center space-x-2">
166
+ <i data-feather="edit" class="w-4 h-4"></i>
167
+ <span class="text-sm">Draw</span>
168
+ </button>
169
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded-lg flex items-center space-x-2">
170
+ <i data-feather="sliders" class="w-4 h-4"></i>
171
+ <span class="text-sm">Indicators</span>
172
+ </button>
173
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded-lg flex items-center space-x-2">
174
+ <i data-feather="save" class="w-4 h-4"></i>
175
+ <span class="text-sm">Template</span>
176
+ </button>
177
+ </div>
178
+ </div>
179
+ </div>
180
+
181
+ <!-- Order Management -->
182
+ <div class="glass-effect rounded-xl p-6 mt-6">
183
+ <h3 class="font-semibold mb-4">Open Positions & Orders</h3>
184
+ <div class="space-y-3 max-h-64 overflow-y-auto">
185
+ <div class="flex justify-between items-center p-3 bg-gray-800/50 rounded-lg">
186
+ <div class="flex items-center space-x-3">
187
+ <div class="w-3 h-3 bg-green-500 rounded-full"></div>
188
+ <div>
189
+ <div class="font-medium">EUR/USD Buy</div>
190
+ <div class="text-sm text-gray-400">0.1 Lot • 1.08620</div>
191
+ </div>
192
+ </div>
193
+ <div class="text-right">
194
+ <div class="text-green-500 font-mono">+$12.50</div>
195
+ <div class="text-sm text-gray-400">TP: 1.08800</div>
196
+ </div>
197
+ </div>
198
+ <div class="flex justify-between items-center p-3 bg-gray-800/50 rounded-lg">
199
+ <div class="flex items-center space-x-3">
200
+ <div class="w-3 h-3 bg-red-500 rounded-full"></div>
201
+ <div>
202
+ <div class="font-medium">GBP/USD Sell</div>
203
+ <div class="text-sm text-gray-400">0.05 Lot • 1.26780</div>
204
+ </div>
205
+ </div>
206
+ <div class="text-right">
207
+ <div class="text-red-500 font-mono">-$8.30</div>
208
+ <div class="text-sm text-gray-400">SL: 1.27000</div>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </div>
214
+
215
+ <!-- Trading Panel -->
216
+ <div class="glass-effect rounded-xl p-6">
217
+ <h3 class="font-semibold mb-4">Trade Execution</h3>
218
+
219
+ <!-- Order Type Selection -->
220
+ <div class="grid grid-cols-2 gap-2 mb-6">
221
+ <button class="order-type-active py-3 rounded-lg text-center">
222
+ <div class="font-medium">Market</div>
223
+ <div class="text-xs text-gray-300">Instant Execution</div>
224
+ </button>
225
+ <button class="bg-gray-700 hover:bg-gray-600 py-3 rounded-lg text-center">
226
+ <div class="font-medium">Pending</div>
227
+ <div class="text-xs text-gray-300">Limit/Stop Orders</div>
228
+ </button>
229
+ </div>
230
+
231
+ <!-- Trade Size Calculator -->
232
+ <div class="mb-6">
233
+ <h4 class="font-medium mb-3">Position Calculator</h4>
234
+ <div class="space-y-3">
235
+ <div>
236
+ <label class="text-sm text-gray-400">Account Balance</label>
237
+ <div class="font-mono">$25,847.32</div>
238
+ </div>
239
+ <div>
240
+ <label class="text-sm text-gray-400">Risk %</label>
241
+ <input type="range" min="0.5" max="5" step="0.5" value="2" class="w-full">
242
+ <div class="flex justify-between text-sm">
243
+ <span>0.5%</span>
244
+ <span class="text-primary">2%</span>
245
+ <span>5%</span>
246
+ </div>
247
+ </div>
248
+ <div>
249
+ <label class="text-sm text-gray-400">Stop Loss (pips)</label>
250
+ <input type="number" value="30" class="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2">
251
+ </div>
252
+ <div class="bg-primary/20 rounded-lg p-3">
253
+ <div class="flex justify-between text-sm">
254
+ <span>Lot Size:</span>
255
+ <span class="font-mono">0.15</span>
256
+ </div>
257
+ <div class="flex justify-between text-sm">
258
+ <span>Risk Amount:</span>
259
+ <span class="font-mono">$45.00</span>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ </div>
264
+
265
+ <!-- Buy/Sell Buttons -->
266
+ <div class="grid grid-cols-2 gap-3 mb-6">
267
+ <button class="bg-green-500 hover:bg-green-600 py-4 rounded-lg font-semibold text-lg">
268
+ BUY
269
+ </button>
270
+ <button class="bg-red-500 hover:bg-red-600 py-4 rounded-lg font-semibold text-lg">
271
+ SELL
272
+ </button>
273
+ </div>
274
+
275
+ <!-- Order Settings -->
276
+ <div class="space-y-4">
277
+ <div>
278
+ <label class="text-sm text-gray-400">Stop Loss</label>
279
+ <div class="flex space-x-2">
280
+ <input type="number" value="1.08420" class="flex-1 bg-gray-800 border border-gray-600 rounded-lg px-3 py-2">
281
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 rounded-lg">Set</button>
282
+ </div>
283
+ </div>
284
+ <div>
285
+ <label class="text-sm text-gray-400">Take Profit</label>
286
+ <div class="flex space-x-2">
287
+ <input type="number" value="1.09000" class="flex-1 bg-gray-800 border border-gray-600 rounded-lg px-3 py-2">
288
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 rounded-lg">Set</button>
289
+ </div>
290
+ </div>
291
+ <div class="text-center text-sm text-gray-400">
292
+ Risk/Reward: 1:2.5
293
+ </div>
294
+ </div>
295
+
296
+ <!-- Quick Actions -->
297
+ <div class="mt-6 pt-6 border-t border-gray-600">
298
+ <h4 class="font-medium mb-3">Quick Actions</h4>
299
+ <div class="grid grid-cols-2 gap-2">
300
+ <button class="bg-gray-700 hover:bg-gray-600 py-2 rounded-lg text-sm">
301
+ Close All
302
+ </button>
303
+ <button class="bg-gray-700 hover:bg-gray-600 py-2 rounded-lg text-sm">
304
+ Hedge
305
+ </button>
306
+ <button class="bg-gray-700 hover:bg-gray-600 py-2 rounded-lg text-sm">
307
+ Partial Close
308
+ </button>
309
+ <button class="bg-gray-700 hover:bg-gray-600 py-2 rounded-lg text-sm">
310
+ Breakeven
311
+ </button>
312
+ </div>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ </main>
317
+
318
+ <script>
319
+ feather.replace();
320
+
321
+ // Simulate price updates
322
+ setInterval(() => {
323
+ const priceElement = document.querySelector('.text-green-500.font-mono.text-xl');
324
+ if (priceElement) {
325
+ const currentPrice = parseFloat(priceElement.textContent);
326
+ const change = (Math.random() - 0.5) * 0.001;
327
+ const newPrice = currentPrice + change;
328
+ priceElement.textContent = newPrice.toFixed(5);
329
+
330
+ const changeElement = document.querySelector('.text-sm.text-green-500');
331
+ if (changeElement) {
332
+ const changePips = (change * 10000).toFixed(1);
333
+ const changePercent = (change / currentPrice * 100).toFixed(2);
334
+ changeElement.textContent = `${change >= 0 ? '+' : ''}${changePips} pips (${change >= 0 ? '+' : ''}${changePercent}%)`;
335
+ changeElement.className = `text-sm ${change >= 0 ? 'text-green-500' : 'text-red-500'}`;
336
+ }
337
+ }
338
+ }, 2000);
339
+ </script>
340
+ </body>
341
+ </html>