Hugging Face's logo

Spaces:
jsonet
/
tradeflow-pro
Running

App Files Community
jsonet commited on
Commit
c363c4f
·
verified ·
1 Parent(s): e582852

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 (4) hide show
  1. README.md +8 -5
  2. ea-dashboard.html +303 -0
  3. index.html +339 -18
  4. position-calculator.html +201 -0
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Tradeflow Pro
3
- emoji: 🚀
4
- colorFrom: pink
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 🚀
3
+ colorFrom: red
4
+ colorTo: purple
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).
ea-dashboard.html ADDED
@@ -0,0 +1,303 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>TradeFlow Pro - EA 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://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: {
18
+ 500: '#6366f1',
19
+ },
20
+ secondary: {
21
+ 500: '#8b5cf6',
22
+ },
23
+ }
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ </head>
29
+ <body class="bg-gray-900 text-white">
30
+ <!-- Header -->
31
+ <header class="bg-gray-800 bg-opacity-50 backdrop-blur-md border-b border-gray-700 sticky top-0 z-50">
32
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
33
+ <div class="flex items-center space-x-4">
34
+ <a href="index.html" class="p-2 rounded-lg hover:bg-gray-700">
35
+ <i data-feather="arrow-left" class="w-5 h-5"></i>
36
+ </a>
37
+ <h1 class="text-xl font-bold">Expert Advisors Dashboard</h1>
38
+ </div>
39
+
40
+ <div class="flex items-center space-x-4">
41
+ <button class="bg-gradient-to-r from-primary-500 to-secondary-500 px-4 py-2 rounded-lg flex items-center">
42
+ <i data-feather="plus" class="mr-2"></i>
43
+ Add EA
44
+ </button>
45
+ </div>
46
+ </div>
47
+ </header>
48
+
49
+ <!-- Main Content -->
50
+ <main class="container mx-auto px-4 py-8">
51
+ <!-- EA Controls -->
52
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
53
+ <div class="bg-gray-800 bg-opacity-50 backdrop-blur-md rounded-xl p-6 border border-gray-700">
54
+ <h3 class="text-lg font-bold mb-4">Global EA Controls</h3>
55
+ <div class="grid grid-cols-2 gap-4">
56
+ <button class="p-4 rounded-lg bg-green-500 bg-opacity-20 hover:bg-opacity-30 transition flex flex-col items-center">
57
+ <i data-feather="play" class="w-8 h-8 mb-2 text-green-400"></i>
58
+ <span>Start All</span>
59
+ </button>
60
+ <button class="p-4 rounded-lg bg-red-500 bg-opacity-20 hover:bg-opacity-30 transition flex flex-col items-center">
61
+ <i data-feather="stop-circle" class="w-8 h-8 mb-2 text-red-400"></i>
62
+ <span>Stop All</span>
63
+ </button>
64
+ <button class="p-4 rounded-lg bg-yellow-500 bg-opacity-20 hover:bg-opacity-30 transition flex flex-col items-center">
65
+ <i data-feather="refresh-cw" class="w-8 h-8 mb-2 text-yellow-400"></i>
66
+ <span>Restart All</span>
67
+ </button>
68
+ <button class="p-4 rounded-lg bg-purple-500 bg-opacity-20 hover:bg-opacity-30 transition flex flex-col items-center">
69
+ <i data-feather="alert-triangle" class="w-8 h-8 mb-2 text-purple-400"></i>
70
+ <span>Emergency Close</span>
71
+ </button>
72
+ </div>
73
+ </div>
74
+
75
+ <div class="bg-gray-800 bg-opacity-50 backdrop-blur-md rounded-xl p-6 border border-gray-700 md:col-span-2">
76
+ <h3 class="text-lg font-bold mb-4">EA Performance Overview</h3>
77
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
78
+ <div class="text-center">
79
+ <p class="text-3xl font-bold text-green-400">8</p>
80
+ <p class="text-gray-400">Active EAs</p>
81
+ </div>
82
+ <div class="text-center">
83
+ <p class="text-3xl font-bold text-blue-400">24</p>
84
+ <p class="text-gray-400">Open Trades</p>
85
+ </div>
86
+ <div class="text-center">
87
+ <p class="text-3xl font-bold text-yellow-400">4.2</p>
88
+ <p class="text-gray-400">Avg. Profit Factor</p>
89
+ </div>
90
+ <div class="text-center">
91
+ <p class="text-3xl font-bold text-purple-400">12.7%</p>
92
+ <p class="text-gray-400">Avg. Drawdown</p>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </div>
97
+
98
+ <!-- EA List -->
99
+ <div class="bg-gray-800 bg-opacity-50 backdrop-blur-md rounded-xl border border-gray-700 mb-8">
100
+ <div class="p-6 border-b border-gray-700">
101
+ <h2 class="text-xl font-bold">Managed Expert Advisors</h2>
102
+ </div>
103
+
104
+ <div class="overflow-x-auto">
105
+ <table class="w-full">
106
+ <thead>
107
+ <tr class="text-left text-gray-400">
108
+ <th class="p-4">EA Name</th>
109
+ <th class="p-4">Symbol</th>
110
+ <th class="p-4">Status</th>
111
+ <th class="p-4">Open Trades</th>
112
+ <th class="p-4">Volume</th>
113
+ <th class="p-4">P&L</th>
114
+ <th class="p-4">Profit Factor</th>
115
+ <th class="p-4">Drawdown</th>
116
+ <th class="p-4">Actions</th>
117
+ </tr>
118
+ </thead>
119
+ <tbody>
120
+ <tr class="border-t border-gray-700 hover:bg-gray-750">
121
+ <td class="p-4 font-medium">ScalperPro</td>
122
+ <td class="p-4">EUR/USD</td>
123
+ <td class="p-4">
124
+ <span class="px-2 py-1 rounded-full bg-green-500 bg-opacity-20 text-green-400 text-sm">Active</span>
125
+ </td>
126
+ <td class="p-4">3</td>
127
+ <td class="p-4">1.25</td>
128
+ <td class="p-4 text-green-400">+$142.35</td>
129
+ <td class="p-4">1.87</td>
130
+ <td class="p-4 text-red-400">8.2%</td>
131
+ <td class="p-4">
132
+ <div class="flex space-x-2">
133
+ <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600">
134
+ <i data-feather="play" class="w-4 h-4"></i>
135
+ </button>
136
+ <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600">
137
+ <i data-feather="stop-circle" class="w-4 h-4"></i>
138
+ </button>
139
+ <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600">
140
+ <i data-feather="settings" class="w-4 h-4"></i>
141
+ </button>
142
+ <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600">
143
+ <i data-feather="bar-chart-2" class="w-4 h-4"></i>
144
+ </button>
145
+ </div>
146
+ </td>
147
+ </tr>
148
+ <tr class="border-t border-gray-700 hover:bg-gray-750">
149
+ <td class="p-4 font-medium">TrendFollower</td>
150
+ <td class="p-4">GBP/JPY</td>
151
+ <td class="p-4">
152
+ <span class="px-2 py-1 rounded-full bg-yellow-500 bg-opacity-20 text-yellow-400 text-sm">Warning</span>
153
+ </td>
154
+ <td class="p-4">2</td>
155
+ <td class="p-4">0.75</td>
156
+ <td class="p-4 text-red-400">-$32.18</td>
157
+ <td class="p-4">0.92</td>
158
+ <td class="p-4 text-red-400">15.4%</td>
159
+ <td class="p-4">
160
+ <div class="flex space-x-2">
161
+ <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600">
162
+ <i data-feather="play" class="w-4 h-4"></i>
163
+ </button>
164
+ <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600">
165
+ <i data-feather="stop-circle" class="w-4 h-4"></i>
166
+ </button>
167
+ <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600">
168
+ <i data-feather="settings" class="w-4 h-4"></i>
169
+ </button>
170
+ <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600">
171
+ <i data-feather="bar-chart-2" class="w-4 h-4"></i>
172
+ </button>
173
+ </div>
174
+ </td>
175
+ </tr>
176
+ <tr class="border-t border-gray-700 hover:bg-gray-750">
177
+ <td class="p-4 font-medium">BreakoutBot</td>
178
+ <td class="p-4">USD/CAD</td>
179
+ <td class="p-4">
180
+ <span class="px-2 py-1 rounded-full bg-green-500 bg-opacity-20 text-green-400 text-sm">Active</span>
181
+ </td>
182
+ <td class="p-4">1</td>
183
+ <td class="p-4">0.50</td>
184
+ <td class="p-4 text-green-400">+$78.92</td>
185
+ <td class="p-4">2.15</td>
186
+ <td class="p-4 text-red-400">3.7%</td>
187
+ <td class="p-4">
188
+ <div class="flex space-x-2">
189
+ <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600">
190
+ <i data-feather="play" class="w-4 h-4"></i>
191
+ </button>
192
+ <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600">
193
+ <i data-feather="stop-circle" class="w-4 h-4"></i>
194
+ </button>
195
+ <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600">
196
+ <i data-feather="settings" class="w-4 h-4"></i>
197
+ </button>
198
+ <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600">
199
+ <i data-feather="bar-chart-2" class="w-4 h-4"></i>
200
+ </button>
201
+ </div>
202
+ </td>
203
+ </tr>
204
+ <tr class="border-t border-gray-700 hover:bg-gray-750">
205
+ <td class="p-4 font-medium">RangeTrader</td>
206
+ <td class="p-4">AUD/USD</td>
207
+ <td class="p-4">
208
+ <span class="px-2 py-1 rounded-full bg-red-500 bg-opacity-20 text-red-400 text-sm">Stopped</span>
209
+ </td>
210
+ <td class="p-4">0</td>
211
+ <td class="p-4">0.00</td>
212
+ <td class="p-4">-$0.00</td>
213
+ <td class="p-4">-</td>
214
+ <td class="p-4">-</td>
215
+ <td class="p-4">
216
+ <div class="flex space-x-2">
217
+ <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600">
218
+ <i data-feather="play" class="w-4 h-4"></i>
219
+ </button>
220
+ <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600">
221
+ <i data-feather="stop-circle" class="w-4 h-4"></i>
222
+ </button>
223
+ <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600">
224
+ <i data-feather="settings" class="w-4 h-4"></i>
225
+ </button>
226
+ <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600">
227
+ <i data-feather="bar-chart-2" class="w-4 h-4"></i>
228
+ </button>
229
+ </div>
230
+ </td>
231
+ </tr>
232
+ </tbody>
233
+ </table>
234
+ </div>
235
+ </div>
236
+
237
+ <!-- EA Parameters -->
238
+ <div class="bg-gray-800 bg-opacity-50 backdrop-blur-md rounded-xl border border-gray-700">
239
+ <div class="p-6 border-b border-gray-700">
240
+ <h2 class="text-xl font-bold">EA Parameters</h2>
241
+ </div>
242
+
243
+ <div class="p-6">
244
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
245
+ <div>
246
+ <h3 class="text-lg font-bold mb-4">ScalperPro Parameters</h3>
247
+ <div class="space-y-4">
248
+ <div>
249
+ <label class="block text-gray-400 mb-2">Lot Size</label>
250
+ <input type="text" value="0.01" class="w-full bg-gray-700 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary-500">
251
+ </div>
252
+ <div>
253
+ <label class="block text-gray-400 mb-2">Stop Loss (pips)</label>
254
+ <input type="text" value="15" class="w-full bg-gray-700 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary-500">
255
+ </div>
256
+ <div>
257
+ <label class="block text-gray-400 mb-2">Take Profit (pips)</label>
258
+ <input type="text" value="30" class="w-full bg-gray-700 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary-500">
259
+ </div>
260
+ <div>
261
+ <label class="block text-gray-400 mb-2">Trailing Stop (pips)</label>
262
+ <input type="text" value="10" class="w-full bg-gray-700 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary-500">
263
+ </div>
264
+ </div>
265
+ </div>
266
+
267
+ <div>
268
+ <h3 class="text-lg font-bold mb-4">Risk Management</h3>
269
+ <div class="space-y-4">
270
+ <div>
271
+ <label class="block text-gray-400 mb-2">Max Spread (pips)</label>
272
+ <input type="text" value="2.5" class="w-full bg-gray-700 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary-500">
273
+ </div>
274
+ <div>
275
+ <label class="block text-gray-400 mb-2">Max Drawdown (%)</label>
276
+ <input type="text" value="10" class="w-full bg-gray-700 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary-500">
277
+ </div>
278
+ <div>
279
+ <label class="block text-gray-400 mb-2">Daily Loss Limit ($)</label>
280
+ <input type="text" value="200" class="w-full bg-gray-700 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary-500">
281
+ </div>
282
+ <div class="flex items-center">
283
+ <input type="checkbox" id="news-filter" class="mr-2">
284
+ <label for="news-filter">Avoid trading during news events</label>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </div>
289
+
290
+ <div class="mt-6 flex justify-end">
291
+ <button class="bg-gradient-to-r from-primary-500 to-secondary-500 px-6 py-3 rounded-lg font-medium">
292
+ Save Parameters
293
+ </button>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </main>
298
+
299
+ <script>
300
+ feather.replace();
301
+ </script>
302
+ </body>
303
+ </html>
index.html CHANGED
@@ -1,19 +1,340 @@
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">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>TradeFlow Pro - 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://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
12
+ <script>
13
+ tailwind.config = {
14
+ darkMode: 'class',
15
+ theme: {
16
+ extend: {
17
+ colors: {
18
+ primary: {
19
+ 500: '#6366f1',
20
+ },
21
+ secondary: {
22
+ 500: '#8b5cf6',
23
+ },
24
+ }
25
+ }
26
+ }
27
+ }
28
+ </script>
29
+ </head>
30
+ <body class="bg-gray-900 text-white">
31
+ <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full -z-10"></div>
32
+
33
+ <!-- Header -->
34
+ <header class="bg-gray-800 bg-opacity-50 backdrop-blur-md border-b border-gray-700 sticky top-0 z-50">
35
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
36
+ <div class="flex items-center space-x-2">
37
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary-500 to-secondary-500 flex items-center justify-center">
38
+ <i data-feather="activity" class="text-white"></i>
39
+ </div>
40
+ <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500">
41
+ TradeFlow Pro
42
+ </h1>
43
+ </div>
44
+
45
+ <div class="flex items-center space-x-4">
46
+ <div class="relative">
47
+ <input type="text" placeholder="Search..." class="bg-gray-700 rounded-full py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-primary-500 w-64">
48
+ <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
49
+ </div>
50
+
51
+ <button class="p-2 rounded-full hover:bg-gray-700 transition">
52
+ <i data-feather="bell"></i>
53
+ </button>
54
+
55
+ <div class="flex items-center space-x-2 cursor-pointer">
56
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-green-400 to-blue-500 flex items-center justify-center">
57
+ <span class="font-semibold">T</span>
58
+ </div>
59
+ <span>Trader</span>
60
+ </div>
61
+ </div>
62
+ </div>
63
+ </header>
64
+
65
+ <!-- Main Content -->
66
+ <main class="container mx-auto px-4 py-8">
67
+ <!-- Account Summary -->
68
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
69
+ <div class="bg-gray-800 bg-opacity-50 backdrop-blur-md rounded-xl p-6 border border-gray-700">
70
+ <div class="flex justify-between items-start">
71
+ <div>
72
+ <p class="text-gray-400">Balance</p>
73
+ <h2 class="text-2xl font-bold">$24,568.32</h2>
74
+ </div>
75
+ <div class="p-3 rounded-lg bg-green-500 bg-opacity-20">
76
+ <i data-feather="dollar-sign" class="text-green-400"></i>
77
+ </div>
78
+ </div>
79
+ <div class="mt-4">
80
+ <p class="text-green-400 text-sm">+2.3% today</p>
81
+ </div>
82
+ </div>
83
+
84
+ <div class="bg-gray-800 bg-opacity-50 backdrop-blur-md rounded-xl p-6 border border-gray-700">
85
+ <div class="flex justify-between items-start">
86
+ <div>
87
+ <p class="text-gray-400">Equity</p>
88
+ <h2 class="text-2xl font-bold">$25,120.75</h2>
89
+ </div>
90
+ <div class="p-3 rounded-lg bg-blue-500 bg-opacity-20">
91
+ <i data-feather="trending-up" class="text-blue-400"></i>
92
+ </div>
93
+ </div>
94
+ <div class="mt-4">
95
+ <p class="text-green-400 text-sm">+$552.43</p>
96
+ </div>
97
+ </div>
98
+
99
+ <div class="bg-gray-800 bg-opacity-50 backdrop-blur-md rounded-xl p-6 border border-gray-700">
100
+ <div class="flex justify-between items-start">
101
+ <div>
102
+ <p class="text-gray-400">Open Positions</p>
103
+ <h2 class="text-2xl font-bold">12</h2>
104
+ </div>
105
+ <div class="p-3 rounded-lg bg-purple-500 bg-opacity-20">
106
+ <i data-feather="bar-chart-2" class="text-purple-400"></i>
107
+ </div>
108
+ </div>
109
+ <div class="mt-4">
110
+ <p class="text-green-400 text-sm">4 buying, 8 selling</p>
111
+ </div>
112
+ </div>
113
+
114
+ <div class="bg-gray-800 bg-opacity-50 backdrop-blur-md rounded-xl p-6 border border-gray-700">
115
+ <div class="flex justify-between items-start">
116
+ <div>
117
+ <p class="text-gray-400">Free Margin</p>
118
+ <h2 class="text-2xl font-bold">$8,240.15</h2>
119
+ </div>
120
+ <div class="p-3 rounded-lg bg-yellow-500 bg-opacity-20">
121
+ <i data-feather="lock" class="text-yellow-400"></i>
122
+ </div>
123
+ </div>
124
+ <div class="mt-4">
125
+ <p class="text-gray-400 text-sm">33.4% of equity</p>
126
+ </div>
127
+ </div>
128
+ </div>
129
+
130
+ <!-- EA Dashboard -->
131
+ <div class="bg-gray-800 bg-opacity-50 backdrop-blur-md rounded-xl border border-gray-700 mb-8">
132
+ <div class="p-6 border-b border-gray-700">
133
+ <div class="flex justify-between items-center">
134
+ <h2 class="text-xl font-bold">Expert Advisors Dashboard</h2>
135
+ <button class="bg-gradient-to-r from-primary-500 to-secondary-500 px-4 py-2 rounded-lg flex items-center">
136
+ <i data-feather="plus" class="mr-2"></i>
137
+ Add EA
138
+ </button>
139
+ </div>
140
+ </div>
141
+
142
+ <div class="overflow-x-auto">
143
+ <table class="w-full">
144
+ <thead>
145
+ <tr class="text-left text-gray-400">
146
+ <th class="p-4">EA Name</th>
147
+ <th class="p-4">Symbol</th>
148
+ <th class="p-4">Status</th>
149
+ <th class="p-4">Open Trades</th>
150
+ <th class="p-4">Volume</th>
151
+ <th class="p-4">P&L</th>
152
+ <th class="p-4">Actions</th>
153
+ </tr>
154
+ </thead>
155
+ <tbody>
156
+ <tr class="border-t border-gray-700 hover:bg-gray-750">
157
+ <td class="p-4 font-medium">ScalperPro</td>
158
+ <td class="p-4">EUR/USD</td>
159
+ <td class="p-4">
160
+ <span class="px-2 py-1 rounded-full bg-green-500 bg-opacity-20 text-green-400 text-sm">Active</span>
161
+ </td>
162
+ <td class="p-4">3</td>
163
+ <td class="p-4">1.25</td>
164
+ <td class="p-4 text-green-400">+$142.35</td>
165
+ <td class="p-4">
166
+ <div class="flex space-x-2">
167
+ <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600">
168
+ <i data-feather="play" class="w-4 h-4"></i>
169
+ </button>
170
+ <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600">
171
+ <i data-feather="stop-circle" class="w-4 h-4"></i>
172
+ </button>
173
+ <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600">
174
+ <i data-feather="settings" class="w-4 h-4"></i>
175
+ </button>
176
+ </div>
177
+ </td>
178
+ </tr>
179
+ <tr class="border-t border-gray-700 hover:bg-gray-750">
180
+ <td class="p-4 font-medium">TrendFollower</td>
181
+ <td class="p-4">GBP/JPY</td>
182
+ <td class="p-4">
183
+ <span class="px-2 py-1 rounded-full bg-yellow-500 bg-opacity-20 text-yellow-400 text-sm">Warning</span>
184
+ </td>
185
+ <td class="p-4">2</td>
186
+ <td class="p-4">0.75</td>
187
+ <td class="p-4 text-red-400">-$32.18</td>
188
+ <td class="p-4">
189
+ <div class="flex space-x-2">
190
+ <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600">
191
+ <i data-feather="play" class="w-4 h-4"></i>
192
+ </button>
193
+ <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600">
194
+ <i data-feather="stop-circle" class="w-4 h-4"></i>
195
+ </button>
196
+ <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600">
197
+ <i data-feather="settings" class="w-4 h-4"></i>
198
+ </button>
199
+ </div>
200
+ </td>
201
+ </tr>
202
+ <tr class="border-t border-gray-700 hover:bg-gray-750">
203
+ <td class="p-4 font-medium">BreakoutBot</td>
204
+ <td class="p-4">USD/CAD</td>
205
+ <td class="p-4">
206
+ <span class="px-2 py-1 rounded-full bg-green-500 bg-opacity-20 text-green-400 text-sm">Active</span>
207
+ </td>
208
+ <td class="p-4">1</td>
209
+ <td class="p-4">0.50</td>
210
+ <td class="p-4 text-green-400">+$78.92</td>
211
+ <td class="p-4">
212
+ <div class="flex space-x-2">
213
+ <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600">
214
+ <i data-feather="play" class="w-4 h-4"></i>
215
+ </button>
216
+ <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600">
217
+ <i data-feather="stop-circle" class="w-4 h-4"></i>
218
+ </button>
219
+ <button class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600">
220
+ <i data-feather="settings" class="w-4 h-4"></i>
221
+ </button>
222
+ </div>
223
+ </td>
224
+ </tr>
225
+ </tbody>
226
+ </table>
227
+ </div>
228
+ </div>
229
+
230
+ <!-- Charts and Analytics -->
231
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
232
+ <!-- Equity Curve -->
233
+ <div class="bg-gray-800 bg-opacity-50 backdrop-blur-md rounded-xl border border-gray-700 p-6">
234
+ <h3 class="text-lg font-bold mb-4">Equity Curve</h3>
235
+ <div class="h-80 flex items-center justify-center">
236
+ <div class="text-center">
237
+ <i data-feather="activity" class="w-16 h-16 text-gray-500 mx-auto mb-4"></i>
238
+ <p class="text-gray-400">Equity chart visualization</p>
239
+ </div>
240
+ </div>
241
+ </div>
242
+
243
+ <!-- Market Overview -->
244
+ <div class="bg-gray-800 bg-opacity-50 backdrop-blur-md rounded-xl border border-gray-700 p-6">
245
+ <h3 class="text-lg font-bold mb-4">Market Overview</h3>
246
+ <div class="space-y-4">
247
+ <div class="flex justify-between items-center p-3 rounded-lg bg-gray-750">
248
+ <div class="flex items-center">
249
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-400 to-cyan-500 flex items-center justify-center mr-3">
250
+ <span class="font-bold">E</span>
251
+ </div>
252
+ <div>
253
+ <p class="font-medium">EUR/USD</p>
254
+ <p class="text-sm text-gray-400">Forex</p>
255
+ </div>
256
+ </div>
257
+ <div class="text-right">
258
+ <p class="font-medium">1.0842</p>
259
+ <p class="text-green-400 text-sm">+0.24%</p>
260
+ </div>
261
+ </div>
262
+
263
+ <div class="flex justify-between items-center p-3 rounded-lg bg-gray-750">
264
+ <div class="flex items-center">
265
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-red-400 to-orange-500 flex items-center justify-center mr-3">
266
+ <span class="font-bold">G</span>
267
+ </div>
268
+ <div>
269
+ <p class="font-medium">Gold</p>
270
+ <p class="text-sm text-gray-400">Commodity</p>
271
+ </div>
272
+ </div>
273
+ <div class="text-right">
274
+ <p class="font-medium">2341.65</p>
275
+ <p class="text-red-400 text-sm">-0.12%</p>
276
+ </div>
277
+ </div>
278
+
279
+ <div class="flex justify-between items-center p-3 rounded-lg bg-gray-750">
280
+ <div class="flex items-center">
281
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-green-400 to-emerald-500 flex items-center justify-center mr-3">
282
+ <span class="font-bold">B</span>
283
+ </div>
284
+ <div>
285
+ <p class="font-medium">BTC/USD</p>
286
+ <p class="text-sm text-gray-400">Crypto</p>
287
+ </div>
288
+ </div>
289
+ <div class="text-right">
290
+ <p class="font-medium">61,245.30</p>
291
+ <p class="text-green-400 text-sm">+1.87%</p>
292
+ </div>
293
+ </div>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </main>
298
+
299
+ <!-- Navigation -->
300
+ <nav class="fixed bottom-0 left-0 right-0 bg-gray-800 bg-opacity-80 backdrop-blur-md border-t border-gray-700 md:hidden">
301
+ <div class="flex justify-around py-3">
302
+ <button class="p-3 rounded-lg bg-gray-700">
303
+ <i data-feather="home" class="w-6 h-6"></i>
304
+ </button>
305
+ <button class="p-3 rounded-lg">
306
+ <i data-feather="activity" class="w-6 h-6"></i>
307
+ </button>
308
+ <button class="p-3 rounded-lg">
309
+ <i data-feather="bar-chart-2" class="w-6 h-6"></i>
310
+ </button>
311
+ <button class="p-3 rounded-lg">
312
+ <i data-feather="book" class="w-6 h-6"></i>
313
+ </button>
314
+ <button class="p-3 rounded-lg">
315
+ <i data-feather="more-horizontal" class="w-6 h-6"></i>
316
+ </button>
317
+ </div>
318
+ </nav>
319
+
320
+ <script>
321
+ // Initialize Vanta.js background
322
+ VANTA.GLOBE({
323
+ el: "#vanta-bg",
324
+ mouseControls: true,
325
+ touchControls: true,
326
+ gyroControls: false,
327
+ minHeight: 200.00,
328
+ minWidth: 200.00,
329
+ scale: 1.00,
330
+ scaleMobile: 1.00,
331
+ color: 0x6366f1,
332
+ color2: 0x8b5cf6,
333
+ backgroundColor: 0x111827
334
+ })
335
+
336
+ // Initialize Feather icons
337
+ feather.replace();
338
+ </script>
339
+ </body>
340
  </html>
position-calculator.html ADDED
@@ -0,0 +1,201 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>TradeFlow Pro - Position Calculator</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://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: {
18
+ 500: '#6366f1',
19
+ },
20
+ secondary: {
21
+ 500: '#8b5cf6',
22
+ },
23
+ }
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ </head>
29
+ <body class="bg-gray-900 text-white">
30
+ <!-- Header -->
31
+ <header class="bg-gray-800 bg-opacity-50 backdrop-blur-md border-b border-gray-700 sticky top-0 z-50">
32
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
33
+ <div class="flex items-center space-x-4">
34
+ <a href="index.html" class="p-2 rounded-lg hover:bg-gray-700">
35
+ <i data-feather="arrow-left" class="w-5 h-5"></i>
36
+ </a>
37
+ <h1 class="text-xl font-bold">Position Calculator</h1>
38
+ </div>
39
+ </div>
40
+ </header>
41
+
42
+ <!-- Main Content -->
43
+ <main class="container mx-auto px-4 py-8">
44
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
45
+ <!-- Calculator Inputs -->
46
+ <div class="bg-gray-800 bg-opacity-50 backdrop-blur-md rounded-xl border border-gray-700 p-6">
47
+ <h2 class="text-xl font-bold mb-6">Position Size Calculator</h2>
48
+
49
+ <div class="space-y-6">
50
+ <div>
51
+ <label class="block text-gray-400 mb-2">Account Balance</label>
52
+ <div class="relative">
53
+ <span class="absolute left-3 top-3 text-gray-400">$</span>
54
+ <input type="text" value="25000" class="w-full bg-gray-700 rounded-lg p-3 pl-8 focus:outline-none focus:ring-2 focus:ring-primary-500">
55
+ </div>
56
+ </div>
57
+
58
+ <div>
59
+ <label class="block text-gray-400 mb-2">Risk Percentage</label>
60
+ <div class="flex items-center">
61
+ <input type="range" min="0.1" max="5" step="0.1" value="1" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
62
+ <span class="ml-4 w-16 bg-gray-700 rounded-lg p-2 text-center">1%</span>
63
+ </div>
64
+ </div>
65
+
66
+ <div>
67
+ <label class="block text-gray-400 mb-2">Stop Loss (pips)</label>
68
+ <input type="text" value="25" class="w-full bg-gray-700 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary-500">
69
+ </div>
70
+
71
+ <div>
72
+ <label class="block text-gray-400 mb-2">Instrument</label>
73
+ <select class="w-full bg-gray-700 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary-500">
74
+ <option>EUR/USD</option>
75
+ <option>GBP/USD</option>
76
+ <option>USD/JPY</option>
77
+ <option>Gold</option>
78
+ <option>Bitcoin</option>
79
+ </select>
80
+ </div>
81
+
82
+ <div>
83
+ <label class="block text-gray-400 mb-2">Account Currency</label>
84
+ <select class="w-full bg-gray-700 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary-500">
85
+ <option>USD</option>
86
+ <option>EUR</option>
87
+ <option>GBP</option>
88
+ <option>JPY</option>
89
+ </select>
90
+ </div>
91
+ </div>
92
+
93
+ <div class="mt-8">
94
+ <button class="w-full bg-gradient-to-r from-primary-500 to-secondary-500 px-6 py-3 rounded-lg font-medium">
95
+ Calculate Position Size
96
+ </button>
97
+ </div>
98
+ </div>
99
+
100
+ <!-- Calculator Results -->
101
+ <div class="bg-gray-800 bg-opacity-50 backdrop-blur-md rounded-xl border border-gray-700 p-6">
102
+ <h2 class="text-xl font-bold mb-6">Calculation Results</h2>
103
+
104
+ <div class="space-y-6">
105
+ <div class="bg-gray-750 rounded-lg p-4">
106
+ <div class="flex justify-between">
107
+ <span class="text-gray-400">Risk Amount</span>
108
+ <span class="font-medium">$250.00</span>
109
+ </div>
110
+ </div>
111
+
112
+ <div class="bg-gray-750 rounded-lg p-4">
113
+ <div class="flex justify-between">
114
+ <span class="text-gray-400">Position Size (lots)</span>
115
+ <span class="font-medium">0.12</span>
116
+ </div>
117
+ </div>
118
+
119
+ <div class="bg-gray-750 rounded-lg p-4">
120
+ <div class="flex justify-between">
121
+ <span class="text-gray-400">Contracts/Units</span>
122
+ <span class="font-medium">12,000</span>
123
+ </div>
124
+ </div>
125
+
126
+ <div class="bg-gray-750 rounded-lg p-4">
127
+ <div class="flex justify-between">
128
+ <span class="text-gray-400">Risk per Pip</span>
129
+ <span class="font-medium">$10.00</span>
130
+ </div>
131
+ </div>
132
+
133
+ <div class="bg-gray-750 rounded-lg p-4">
134
+ <div class="flex justify-between">
135
+ <span class="text-gray-400">Reward/Risk Ratio (2:1)</span>
136
+ <span class="font-medium">$500.00</span>
137
+ </div>
138
+ </div>
139
+ </div>
140
+
141
+ <div class="mt-8">
142
+ <h3 class="text-lg font-bold mb-4">Risk Visualization</h3>
143
+ <div class="h-48 flex items-center justify-center">
144
+ <div class="text-center">
145
+ <i data-feather="pie-chart" class="w-16 h-16 text-gray-500 mx-auto mb-4"></i>
146
+ <p class="text-gray-400">Risk/reward visualization</p>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </div>
152
+
153
+ <!-- Breakeven and Trailing Stop Calculator -->
154
+ <div class="bg-gray-800 bg-opacity-50 backdrop-blur-md rounded-xl border border-gray-700 mt-8 p-6">
155
+ <h2 class="text-xl font-bold mb-6">Breakeven & Trailing Stop Calculator</h2>
156
+
157
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
158
+ <div>
159
+ <h3 class="text-lg font-bold mb-4">Breakeven Levels</h3>
160
+ <div class="space-y-4">
161
+ <div class="flex items-center justify-between p-3 bg-gray-750 rounded-lg">
162
+ <span>Basic BE (0 pips)</span>
163
+ <span class="font-medium">1.0850</span>
164
+ </div>
165
+ <div class="flex items-center justify-between p-3 bg-gray-750 rounded-lg">
166
+ <span>BE at +20 pips</span>
167
+ <span class="font-medium">1.0870</span>
168
+ </div>
169
+ <div class="flex items-center justify-between p-3 bg-gray-750 rounded-lg">
170
+ <span>BE at +40 pips</span>
171
+ <span class="font-medium">1.0890</span>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <div>
177
+ <h3 class="text-lg font-bold mb-4">Trailing Stop Options</h3>
178
+ <div class="space-y-4">
179
+ <div class="flex items-center justify-between p-3 bg-gray-750 rounded-lg">
180
+ <span>Basic TS (1:1)</span>
181
+ <span class="font-medium">1 pip/pip</span>
182
+ </div>
183
+ <div class="flex items-center justify-between p-3 bg-gray-750 rounded-lg">
184
+ <span>ATR-Based TS</span>
185
+ <span class="font-medium">1.5x ATR</span>
186
+ </div>
187
+ <div class="flex items-center justify-between p-3 bg-gray-750 rounded-lg">
188
+ <span>MA-Based TS</span>
189
+ <span class="font-medium">EMA 20</span>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ </div>
195
+ </main>
196
+
197
+ <script>
198
+ feather.replace();
199
+ </script>
200
+ </body>
201
+ </html>