Desarrolle e implemente completamente una interfaz de usuario y experiencia UX/UI de vanguardia implementando el código en diferentes paginas independientes interconectadas, para la aplicación detallada en los siguientes diagramas, cumpliendo con los siguientes requisitos técnicos y de diseño:

1. Implementación de las mejores prácticas de diseño y desarrollo (2025), garantizando compatibilidad total con:
- HTML6
- CSS4
- ECMAScript 2025

2. Diseño futurista y minimalista con alto impacto visual, manteniendo:
- Tiempos de respuesta inferiores a 100ms
- Eficiencia operativa del 99.9%

3. Optimización extrema del rendimiento que asegure:
- 60 FPS constantes en todos los dispositivos
- Tiempo de renderizado menor a 16ms
- Uso de memoria optimizado

4. Código de alta calidad que cumpla con:
- Estándares W3C y WCAG 3.0
- Arquitectura modular con patrones atómicos
- Cobertura de pruebas superior al 90%

5. Experiencia de usuario innovadora que incluya:
- Flujos intuitivos basados en diagramas de flujo UX
- Interacciones coherentes en todos los componentes
- Navegación predictiva con inteligencia contextual

6. Interfaz de última generación con:
- Animaciones fluidas a 60 FPS sincronizadas con el hardware
- Retroalimentación táctil precisa con respuesta háptica
- Transiciones perfectamente sincronizadas entre estados

7. Arquitectura robusta con componentes reutilizables que garanticen:
- Tiempo de carga inicial menor a 1 segundo
- Escalabilidad ilimitada mediante diseño atómico
- Mantenibilidad óptima con documentación completa

Prioridades clave:
- Coherencia visual en todos los breakpoints (desde 320px hasta 8K) con diseño adaptable
- Interacciones fluidas con latencia inferior a 50ms en todas las acciones
- Innovación demostrable en cada componente mediante métricas cuantificables

Métricas requeridas:
- Usabilidad: SUS >85 en pruebas con usuarios reales
- Rendimiento: Lighthouse score >95 en todas las categorías
- Experiencia: NPS >75 en encuestas post-implementación

@startuml TradingSystem_ComponentDiagram
!theme aws-orange
title Sistema de Trading - Diagrama de Componentes

!define RECTANGLE class

package "Frontend Layer" {
[Web Dashboard] as WebUI
[Mobile App] as MobileApp
[Trading Terminal] as Terminal
}

package "API Gateway" {
[FastAPI Gateway] as Gateway
[Authentication] as Auth
[Rate Limiting] as RateLimit
[Load Balancer] as LoadBalancer
}

package "Core Services" {
package "Trading Core" {
[Signal Service] as SignalSvc
[Strategy Service] as StrategySvc
[Indicator Service] as IndicatorSvc
[Market Data Service] as MarketDataSvc
}

package "ML/AI Services" {
[ML Model Service] as MLSvc
[Feature Engineering] as FeatureSvc
[Model Training] as TrainingSvc
[MLflow Tracking] as MLflowSvc
}

package "Integration Services" {
[MetaTrader5 Connector] as MT5Connector
[Data Provider Service] as DataProviderSvc
[Notification Service] as NotificationSvc
[MQTT Service] as MQTTSvc
}
}

package "Data Layer" {
[PostgreSQL] as PostgresDB
[Redis Cache] as RedisCache
[Time Series DB] as TimeSeriesDB
[File Storage] as FileStorage
}

package "External Systems" {
[MetaTrader 5] as MT5
[Alpha Vantage API] as AlphaVantage
[Yahoo Finance] as YahooFinance
[Telegram Bot API] as Telegram
[Email Service] as EmailSvc
}

package "Infrastructure" {
package "Monitoring" {
[Prometheus] as Prometheus
[Grafana] as Grafana
[AlertManager] as AlertManager
[Jaeger Tracing] as Jaeger
}

package "Message Queue" {
[MQTT Broker] as MQTTBroker
[Redis Pub/Sub] as RedisPubSub
}

package "Security" {
[JWT Service] as JWTSvc
[Encryption Service] as EncryptionSvc
[Audit Service] as AuditSvc
}
}

package "DevOps & Deployment" {
[Docker Containers] as Docker
[Kubernetes] as K8s
[CI/CD Pipeline] as CICD
[Backup Service] as BackupSvc
}

' Frontend connections
WebUI --> Gateway : HTTPS/REST
MobileApp --> Gateway : HTTPS/REST
Terminal --> Gateway : HTTPS/REST + WebSocket

' API Gateway connections
Gateway --> Auth : Authentication
Gateway --> RateLimit : Rate Control
LoadBalancer --> Gateway : Load Distribution

' Core Services connections
Gateway --> SignalSvc : REST API
Gateway --> StrategySvc : REST API
Gateway --> IndicatorSvc : REST API
Gateway --> MarketDataSvc : REST API

SignalSvc --> PostgresDB : Signal Data
SignalSvc --> RedisCache : Caching
SignalSvc --> MQTTSvc : Real-time Updates

StrategySvc --> MLSvc : ML Predictions
StrategySvc --> IndicatorSvc : Technical Analysis
StrategySvc --> PostgresDB : Strategy Data

IndicatorSvc --> MarketDataSvc : Market Data
IndicatorSvc --> RedisCache : Indicator Cache
IndicatorSvc --> TimeSeriesDB : Historical Data

MarketDataSvc --> MT5Connector : Live Data
MarketDataSvc --> DataProviderSvc : External Data
MarketDataSvc --> TimeSeriesDB : Storage

' ML Services connections
MLSvc --> FeatureSvc : Feature Preparation
MLSvc --> MLflowSvc : Model Management
MLSvc --> FileStorage : Model Storage
TrainingSvc --> MLflowSvc : Experiment Tracking

' Integration Services connections
MT5Connector --> MT5 : MT5 API
DataProviderSvc --> AlphaVantage : Market Data API
DataProviderSvc --> YahooFinance : Market Data API
NotificationSvc --> Telegram : Notifications
NotificationSvc --> EmailSvc : Email Alerts
MQTTSvc --> MQTTBroker : Message Publishing

' Data Layer connections
PostgresDB --> BackupSvc : Database Backup
RedisCache --> RedisPubSub : Pub/Sub Messaging
TimeSeriesDB --> BackupSvc : Time Series Backup

' Monitoring connections
SignalSvc --> Prometheus : Metrics
StrategySvc --> Prometheus : Metrics
MLSvc --> Prometheus : Metrics
Prometheus --> Grafana : Visualization
Prometheus --> AlertManager : Alerting
Gateway --> Jaeger : Distributed Tracing

' Security connections
Gateway --> JWTSvc : Token Validation
SignalSvc --> AuditSvc : Audit Logging
StrategySvc --> EncryptionSvc : Data Encryption

' Infrastructure connections
Docker --> K8s : Container Orchestration
CICD --> Docker : Container Building
CICD --> K8s : Deployment

' Notes
note right of MLSvc : Utiliza modelos ONNX\npara inferencia rápida
note right of MT5Connector : Conexión directa con\nMetaTrader 5 terminal
note right of MQTTBroker : Comunicación en tiempo real\ncon clientes suscritos
note right of Prometheus : Métricas de rendimiento\ny monitoreo del sistema
note right of PostgresDB : Base de datos principal\ncon replicación

@enduml

---------------------------------------------------------------------------------------------


@startuml TradingSystem_DeploymentDiagram
!theme aws-orange
title Sistema de Trading - Diagrama de Despliegue

!define RECTANGLE node

node "Load Balancer" as LB {
artifact "Nginx" as Nginx
artifact "SSL Termination" as SSL
}

node "Web Servers Cluster" as WebCluster {
node "Web Server 1" as Web1 {
artifact "FastAPI App" as App1
artifact "Gunicorn" as Gunicorn1
}

node "Web Server 2" as Web2 {
artifact "FastAPI App" as App2
artifact "Gunicorn" as Gunicorn2
}

node "Web Server 3" as Web3 {
artifact "FastAPI App" as App3
artifact "Gunicorn" as Gunicorn3
}
}

node "Application Services" as AppServices {
node "ML Service Node" as MLNode {
artifact "ML Model Service" as MLService
artifact "ONNX Runtime" as ONNXRuntime
artifact "Feature Engineering" as FeatureEng
database "Model Storage" as ModelStorage
}

node "Trading Service Node" as TradingNode {
artifact "Signal Service" as SignalService
artifact "Strategy Service" as StrategyService
artifact "Indicator Service" as IndicatorService
}

node "Integration Node" as IntegrationNode {
artifact "MT5 Connector" as MT5Conn
artifact "Data Provider Service" as DataProvider
artifact "MQTT Service" as MQTTService
}
}

node "Database Cluster" as DBCluster {
node "Primary DB" as PrimaryDB {
database "PostgreSQL Primary" as PostgresPrimary
artifact "Connection Pool" as ConnPool1
}

node "Replica DB 1" as ReplicaDB1 {
database "PostgreSQL Replica" as PostgresReplica1
artifact "Connection Pool" as ConnPool2
}

node "Replica DB 2" as ReplicaDB2 {
database "PostgreSQL Replica" as PostgresReplica2
artifact "Connection Pool" as ConnPool3
}
}

node "Cache Cluster" as CacheCluster {
node "Redis Master" as RedisMaster {
database "Redis Primary" as RedisDB1
}

node "Redis Slave 1" as RedisSlave1 {
database "Redis Replica" as RedisDB2
}

node "Redis Slave 2" as RedisSlave2 {
database "Redis Replica" as RedisDB3
}
}

node "Time Series Database" as TSDBNode {
database "InfluxDB" as InfluxDB
artifact "Retention Policies" as RetentionPolicies
}

node "Message Queue" as MQNode {
node "MQTT Broker Cluster" as MQTTCluster {
artifact "MQTT Broker 1" as MQTTBroker1
artifact "MQTT Broker 2" as MQTTBroker2
}

artifact "Redis Pub/Sub" as RedisPubSub
}

node "Monitoring Stack" as MonitoringStack {
node "Metrics Collection" as MetricsNode {
artifact "Prometheus" as Prometheus
database "Metrics Storage" as MetricsDB
}

node "Visualization" as VizNode {
artifact "Grafana" as Grafana
database "Dashboard Config" as DashboardDB
}

node "Alerting" as AlertNode {
artifact "AlertManager" as AlertManager
artifact "Notification Handlers" as NotificationHandlers
}

node "Tracing" as TracingNode {
artifact "Jaeger" as Jaeger
database "Trace Storage" as TraceDB
}

node "Log Aggregation" as LogNode {
artifact "Loki" as Loki
artifact "Promtail" as Promtail
database "Log Storage" as LogDB
}
}

node "External Services" as ExternalServices {
cloud "MetaTrader 5 Termi

README.md

@@ -1,10 +1,13 @@
 ---
-title: Quantumtrade Matrix
-emoji: 👀
-colorFrom: yellow
-colorTo: red
+title: QuantumTrade Matrix 🚀
+colorFrom: green
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

dashboard.html

@@ -0,0 +1,517 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dashboard - QuantumTrade Matrix</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        .glass-morphism {
+            background: rgba(15, 23, 42, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        
+        .trading-card {
+            background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.9) 100%);
+            border: 1px solid rgba(59, 130, 246, 0.3);
+            transition: all 0.3s ease;
+        }
+        
+        .trading-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
+        }
+        
+        .quantum-button {
+            background: linear-gradient(45deg, #3b82f6, #8b5cf6);
+            transition: all 0.3s ease;
+        }
+        
+        .quantum-button:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 5px 20px rgba(139, 92, 246, 0.4);
+        }
+        
+        .signal-buy {
+            background: #10b981;
+            box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
+        }
+        
+        .signal-sell {
+            background: #ef4444;
+            box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
+        }
+        
+        .signal-hold {
+            background: #f59e0b;
+            box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
+        }
+        
+        .price-ticker {
+            font-family: 'Courier New', monospace;
+            font-weight: bold;
+            font-size: 1.25rem;
+            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+        
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        
+        .chart-container {
+            position: relative;
+            height: 300px;
+        }
+        
+        .floating-element {
+            animation: float 6s ease-in-out infinite;
+        }
+        
+        @keyframes float {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+        }
+        
+        .sidebar-item {
+            transition: all 0.3s ease;
+            border-left: 3px solid transparent;
+        }
+        
+        .sidebar-item:hover {
+            background: rgba(59, 130, 246, 0.1);
+            border-left-color: #3b82f6;
+        }
+        
+        .sidebar-item.active {
+            background: rgba(59, 130, 246, 0.2);
+            border-left-color: #3b82f6;
+        }
+        
+        .metric-card {
+            background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
+            border: 1px solid rgba(59, 130, 246, 0.2);
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white">
+    <!-- Navigation -->
+    <nav class="fixed top-0 w-full z-50 glass-morphism">
+        <div class="container mx-auto px-6 py-4">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center space-x-3">
+                    <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+                        <i data-feather="trending-up" class="w-6 h-6"></i>
+                    </div>
+                    <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
+                        QuantumTrade Matrix
+                    </h1>
+                </div>
+                
+                <div class="flex items-center space-x-4">
+                    <div class="hidden md:flex items-center space-x-2">
+                        <div class="w-3 h-3 bg-green-500 rounded-full pulse"></div>
+                        <span class="text-sm">System Online</span>
+                    </div>
+                    <div class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center">
+                        <i data-feather="user" class="w-5 h-5"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+    
+    <!-- Main Layout -->
+    <div class="flex pt-20">
+        <!-- Sidebar -->
+        <aside class="fixed left-0 top-20 w-64 h-full bg-gray-900 bg-opacity-80 border-r border-gray-800 p-6 overflow-y-auto">
+            <nav class="space-y-2">
+                <a href="dashboard.html" class="sidebar-item active flex items-center space-x-3 p-3 rounded-lg">
+                    <i data-feather="home" class="w-5 h-5"></i>
+                    <span>Dashboard</span>
+                </a>
+                <a href="signals.html" class="sidebar-item flex items-center space-x-3 p-3 rounded-lg">
+                    <i data-feather="radio" class="w-5 h-5"></i>
+                    <span>Signals</span>
+                </a>
+                <a href="strategies.html" class="sidebar-item flex items-center space-x-3 p-3 rounded-lg">
+                    <i data-feather="target" class="w-5 h-5"></i>
+                    <span>Strategies</span>
+                </a>
+                <a href="portfolio.html" class="sidebar-item flex items-center space-x-3 p-3 rounded-lg">
+                    <i data-feather="briefcase" class="w-5 h-5"></i>
+                    <span>Portfolio</span>
+                </a>
+                <a href="settings.html" class="sidebar-item flex items-center space-x-3 p-3 rounded-lg">
+                    <i data-feather="settings" class="w-5 h-5"></i>
+                    <span>Settings</span>
+                </a>
+            </nav>
+            
+            <div class="mt-8 p-4 glass-morphism rounded-lg">
+                <h4 class="font-semibold mb-2">Quick Stats</h4>
+                <div class="space-y-2 text-sm">
+                    <div class="flex justify-between">
+                        <span class="text-gray-400">Active Signals</span>
+                        <span class="text-green-400">12</span>
+                    </div>
+                    <div class="flex justify-between">
+                        <span class="text-gray-400">Win Rate</span>
+                        <span class="text-blue-400">78.5%</span>
+                    </div>
+                    <div class="flex justify-between">
+                        <span class="text-gray-400">P&L Today</span>
+                        <span class="text-green-400">+$1,245</span>
+                    </div>
+                </div>
+            </div>
+        </aside>
+        
+        <!-- Main Content -->
+        <main class="ml-64 flex-1 p-6">
+            <!-- Top Metrics -->
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+                <div class="metric-card rounded-xl p-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <span class="text-gray-400">Total Balance</span>
+                        <i data-feather="dollar-sign" class="w-5 h-5 text-blue-400"></i>
+                    </div>
+                    <div class="text-3xl font-bold">$45,678</div>
+                    <div class="text-green-400 text-sm mt-2">+2.34% this week</div>
+                </div>
+                
+                <div class="metric-card rounded-xl p-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <span class="text-gray-400">Active Positions</span>
+                        <i data-feather="activity" class="w-5 h-5 text-green-400"></i>
+                    </div>
+                    <div class="text-3xl font-bold">8</div>
+                    <div class="text-gray-400 text-sm mt-2">2 pending orders</div>
+                </div>
+                
+                <div class="metric-card rounded-xl p-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <span class="text-gray-400">Today's P&L</span>
+                        <i data-feather="trending-up" class="w-5 h-5 text-purple-400"></i>
+                    </div>
+                    <div class="text-3xl font-bold text-green-400">+$1,245</div>
+                    <div class="text-green-400 text-sm mt-2">+2.8% today</div>
+                </div>
+                
+                <div class="metric-card rounded-xl p-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <span class="text-gray-400">Win Rate</span>
+                        <i data-feather="target" class="w-5 h-5 text-yellow-400"></i>
+                    </div>
+                    <div class="text-3xl font-bold">78.5%</div>
+                    <div class="text-gray-400 text-sm mt-2">Last 30 days</div>
+                </div>
+            </div>
+            
+            <!-- Charts Section -->
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+                <div class="trading-card rounded-xl p-6">
+                    <h3 class="text-xl font-bold mb-4">Portfolio Performance</h3>
+                    <div class="chart-container">
+                        <canvas id="portfolioChart"></canvas>
+                    </div>
+                </div>
+                
+                <div class="trading-card rounded-xl p-6">
+                    <h3 class="text-xl font-bold mb-4">Signal Accuracy</h3>
+                    <div class="chart-container">
+                        <canvas id="accuracyChart"></canvas>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Active Signals -->
+            <div class="trading-card rounded-xl p-6 mb-8">
+                <div class="flex items-center justify-between mb-6">
+                    <h3 class="text-xl font-bold">Active Signals</h3>
+                    <button class="quantum-button px-4 py-2 rounded-lg text-sm">
+                        View All
+                    </button>
+                </div>
+                
+                <div class="overflow-x-auto">
+                    <table class="w-full">
+                        <thead>
+                            <tr class="border-b border-gray-700">
+                                <th class="text-left py-3 px-4">Symbol</th>
+                                <th class="text-left py-3 px-4">Type</th>
+                                <th class="text-left py-3 px-4">Entry</th>
+                                <th class="text-left py-3 px-4">Current</th>
+                                <th class="text-left py-3 px-4">P&L</th>
+                                <th class="text-left py-3 px-4">Confidence</th>
+                                <th class="text-left py-3 px-4">Time</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr class="border-b border-gray-800 hover:bg-gray-800">
+                                <td class="py-3 px-4">
+                                    <div class="flex items-center">
+                                        <span class="signal-indicator signal-buy"></span>
+                                        EUR/USD
+                                    </div>
+                                </td>
+                                <td class="py-3 px-4">
+                                    <span class="text-green-400">BUY</span>
+                                </td>
+                                <td class="py-3 px-4">1.0845</td>
+                                <td class="py-3 px-4 price-ticker">1.0856</td>
+                                <td class="py-3 px-4 text-green-400">+11 pips</td>
+                                <td class="py-3 px-4">
+                                    <div class="flex items-center">
+                                        <div class="w-16 bg-gray-700 rounded-full h-2 mr-2">
+                                            <div class="bg-green-500 h-2 rounded-full" style="width: 85%"></div>
+                                        </div>
+                                        <span class="text-sm">85%</span>
+                                    </div>
+                                </td>
+                                <td class="py-3 px-4 text-gray-400">2 min ago</td>
+                            </tr>
+                            <tr class="border-b border-gray-800 hover:bg-gray-800">
+                                <td class="py-3 px-4">
+                                    <div class="flex items-center">
+                                        <span class="signal-indicator signal-sell"></span>
+                                        GBP/USD
+                                    </div>
+                                </td>
+                                <td class="py-3 px-4">
+                                    <span class="text-red-400">SELL</span>
+                                </td>
+                                <td class="py-3 px-4">1.2755</td>
+                                <td class="py-3 px-4 price-ticker">1.2743</td>
+                                <td class="py-3 px-4 text-green-400">+12 pips</td>
+                                <td class="py-3 px-4">
+                                    <div class="flex items-center">
+                                        <div class="w-16 bg-gray-700 rounded-full h-2 mr-2">
+                                            <div class="bg-green-500 h-2 rounded-full" style="width: 78%"></div>
+                                        </div>
+                                        <span class="text-sm">78%</span>
+                                    </div>
+                                </td>
+                                <td class="py-3 px-4 text-gray-400">5 min ago</td>
+                            </tr>
+                            <tr class="border-b border-gray-800 hover:bg-gray-800">
+                                <td class="py-3 px-4">
+                                    <div class="flex items-center">
+                                        <span class="signal-indicator signal-hold"></span>
+                                        USD/JPY
+                                    </div>
+                                </td>
+                                <td class="py-3 px-4">
+                                    <span class="text-yellow-400">HOLD</span>
+                                </td>
+                                <td class="py-3 px-4">149.80</td>
+                                <td class="py-3 px-4 price-ticker">149.82</td>
+                                <td class="py-3 px-4 text-yellow-400">+2 pips</td>
+                                <td class="py-3 px-4">
+                                    <div class="flex items-center">
+                                        <div class="w-16 bg-gray-700 rounded-full h-2 mr-2">
+                                            <div class="bg-yellow-500 h-2 rounded-full" style="width: 65%"></div>
+                                        </div>
+                                        <span class="text-sm">65%</span>
+                                    </div>
+                                </td>
+                                <td class="py-3 px-4 text-gray-400">8 min ago</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            
+            <!-- Recent Activity -->
+            <div class="trading-card rounded-xl p-6">
+                <h3 class="text-xl font-bold mb-6">Recent Activity</h3>
+                <div class="space-y-4">
+                    <div class="flex items-center justify-between p-4 bg-gray-800 bg-opacity-50 rounded-lg">
+                        <div class="flex items-center space-x-3">
+                            <div class="w-10 h-10 bg-green-500 bg-opacity-20 rounded-full flex items-center justify-center">
+                                <i data-feather="trending-up" class="w-5 h-5 text-green-400"></i>
+                            </div>
+                            <div>
+                                <p class="font-semibold">Signal Executed</p>
+                                <p class="text-sm text-gray-400">EUR/USD BUY at 1.0845</p>
+                            </div>
+                        </div>
+                        <span class="text-sm text-gray-400">2 min ago</span>
+                    </div>
+                    
+                    <div class="flex items-center justify-between p-4 bg-gray-800 bg-opacity-50 rounded-lg">
+                        <div class="flex items-center space-x-3">
+                            <div class="w-10 h-10 bg-blue-500 bg-opacity-20 rounded-full flex items-center justify-center">
+                                <i data-feather="cpu" class="w-5 h-5 text-blue-400"></i>
+                            </div>
+                            <div>
+                                <p class="font-semibold">ML Model Updated</p>
+                                <p class="text-sm text-gray-400">EUR/USD accuracy improved to 85%</p>
+                            </div>
+                        </div>
+                        <span class="text-sm text-gray-400">15 min ago</span>
+                    </div>
+                    
+                    <div class="flex items-center justify-between p-4 bg-gray-800 bg-opacity-50 rounded-lg">
+                        <div class="flex items-center space-x-3">
+                            <div class="w-10 h-10 bg-purple-500 bg-opacity-20 rounded-full flex items-center justify-center">
+                                <i data-feather="target" class="w-5 h-5 text-purple-400"></i>
+                            </div>
+                            <div>
+                                <p class="font-semibold">Strategy Optimized</p>
+                                <p class="text-sm text-gray-400">Scalping strategy parameters adjusted</p>
+                            </div>
+                        </div>
+                        <span class="text-sm text-gray-400">1 hour ago</span>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+    
+    <script>
+        // Initialize charts
+        const portfolioCtx = document.getElementById('portfolioChart').getContext('2d');
+        const portfolioChart = new Chart(portfolioCtx, {
+            type: 'line',
+            data: {
+                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+                datasets: [{
+                    label: 'Portfolio Value',
+                    data: [40000, 42000, 41000, 43500, 44000, 45678],
+                    borderColor: '#3b82f6',
+                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                    tension: 0.4,
+                    fill: true
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        display: false
+                    }
+                },
+                scales: {
+                    x: {
+                        grid: {
+                            color: 'rgba(255, 255, 255, 0.1)'
+                        },
+                        ticks: {
+                            color: '#9ca3af'
+                        }
+                    },
+                    y: {
+                        grid: {
+                            color: 'rgba(255, 255, 255, 0.1)'
+                        },
+                        ticks: {
+                            color: '#9ca3af'
+                        }
+                    }
+                }
+            }
+        });
+        
+        const accuracyCtx = document.getElementById('accuracyChart').getContext('2d');
+        const accuracyChart = new Chart(accuracyCtx, {
+            type: 'doughnut',
+            data: {
+                labels: ['Win', 'Loss', 'Break Even'],
+                datasets: [{
+                    data: [78.5, 15.2, 6.3],
+                    backgroundColor: ['#10b981', '#ef4444', '#f59e0b'],
+                    borderWidth: 0
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        position: 'bottom',
+                        labels: {
+                            color: '#9ca3af',
+                            padding: 20
+                        }
+                    }
+                }
+            }
+        });
+        
+        // Simulate real-time updates
+        function updateDashboard() {
+            // Update prices
+            const priceElements = document.querySelectorAll('.price-ticker');
+            priceElements.forEach(element => {
+                const currentPrice = parseFloat(element.textContent);
+                const change = (Math.random() - 0.5) * 0.001;
+                const newPrice = currentPrice + change;
+                element.textContent = newPrice.toFixed(4);
+            });
+            
+            // Update P&L
+            const plElements = document.querySelectorAll('td.text-green-400, td.text-red-400, td.text-yellow-400');
+            plElements.forEach(element => {
+                if (element.textContent.includes('pips')) {
+                    const currentPips = parseInt(element.textContent);
+                    const change = Math.floor((Math.random() - 0.5) * 3);
+                    const newPips = currentPips + change;
+                    element.textContent = `${newPips >= 0 ? '+' : ''}${newPips} pips`;
+                    element.className = newPips >= 0 ? 'py-3 px-4 text-green-400' : 'py-3 px-4 text-red-400';
+                }
+            });
+        }
+        
+        setInterval(updateDashboard, 3000);
+        
+        // Add hover animations
+        document.querySelectorAll('.trading-card').forEach(card => {
+            card.addEventListener('mouseenter', function() {
+                anime({
+                    targets: this,
+                    translateY: -5,
+                    duration: 300,
+                    easing: 'easeOutQuad'
+                });
+            });
+            
+            card.addEventListener('mouseleave', function() {
+                anime({
+                    targets: this,
+                    translateY: 0,
+                    duration: 300,
+                    easing: 'easeOutQuad'
+                });
+            });
+        });
+        
+        // Initialize Feather icons
+        feather.replace();
+        
+        // Animate elements on load
+        anime({
+            targets: '.metric-card',
+            opacity: [0, 1],
+            translateY: [20, 0],
+            delay: anime.stagger(100),
+            duration: 800,
+            easing: 'easeOutQuad'
+        });
+    </script>
+</body>
+</html>

index.html

@@ -1,19 +1,531 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>QuantumTrade Matrix - Next-Gen Trading Platform</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
+    <style>
+        @keyframes quantum-pulse {
+            0%, 100% { opacity: 1; transform: scale(1); }
+            50% { opacity: 0.7; transform: scale(1.05); }
+        }
+        
+        @keyframes matrix-rain {
+            0% { transform: translateY(-100%); opacity: 0; }
+            10% { opacity: 1; }
+            90% { opacity: 1; }
+            100% { transform: translateY(100vh); opacity: 0; }
+        }
+        
+        .quantum-pulse {
+            animation: quantum-pulse 2s ease-in-out infinite;
+        }
+        
+        .matrix-rain {
+            animation: matrix-rain 8s linear infinite;
+        }
+        
+        .glass-morphism {
+            background: rgba(15, 23, 42, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        
+        .neon-glow {
+            box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
+        }
+        
+        .trading-card {
+            background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.9) 100%);
+            border: 1px solid rgba(59, 130, 246, 0.3);
+            transition: all 0.3s ease;
+        }
+        
+        .trading-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 40px rgba(59, 130, 246, 0.3);
+        }
+        
+        .quantum-button {
+            background: linear-gradient(45deg, #3b82f6, #8b5cf6);
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .quantum-button::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+            transition: left 0.5s;
+        }
+        
+        .quantum-button:hover::before {
+            left: 100%;
+        }
+        
+        .quantum-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4);
+        }
+        
+        .matrix-bg {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            opacity: 0.1;
+        }
+        
+        .matrix-char {
+            position: absolute;
+            color: #10b981;
+            font-family: 'Courier New', monospace;
+            font-size: 14px;
+            white-space: nowrap;
+            pointer-events: none;
+        }
+        
+        .vanta-bg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -2;
+        }
+        
+        .performance-metric {
+            background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
+            border: 1px solid rgba(59, 130, 246, 0.2);
+        }
+        
+        .signal-indicator {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            display: inline-block;
+            margin-right: 8px;
+            animation: pulse 2s infinite;
+        }
+        
+        .signal-buy {
+            background: #10b981;
+            box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
+        }
+        
+        .signal-sell {
+            background: #ef4444;
+            box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
+        }
+        
+        .signal-hold {
+            background: #f59e0b;
+            box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
+        }
+        
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+        
+        .chart-container {
+            background: rgba(15, 23, 42, 0.8);
+            border: 1px solid rgba(59, 130, 246, 0.2);
+            border-radius: 12px;
+            padding: 20px;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .chart-line {
+            stroke: #3b82f6;
+            stroke-width: 2;
+            fill: none;
+            filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.5));
+        }
+        
+        .chart-area {
+            fill: url(#gradient);
+            opacity: 0.3;
+        }
+        
+        .price-ticker {
+            font-family: 'Courier New', monospace;
+            font-weight: bold;
+            font-size: 1.5rem;
+            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        
+        .floating-element {
+            animation: float 6s ease-in-out infinite;
+        }
+        
+        @keyframes float {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white overflow-x-hidden">
+    <div class="vanta-bg" id="vanta-bg"></div>
+    <div class="matrix-bg" id="matrix-bg"></div>
+    
+    <!-- Navigation -->
+    <nav class="fixed top-0 w-full z-50 glass-morphism">
+        <div class="container mx-auto px-6 py-4">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center space-x-3">
+                    <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center quantum-pulse">
+                        <i data-feather="trending-up" class="w-6 h-6"></i>
+                    </div>
+                    <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
+                        QuantumTrade Matrix
+                    </h1>
+                </div>
+                
+                <div class="hidden md:flex items-center space-x-8">
+                    <a href="dashboard.html" class="hover:text-blue-400 transition-colors">Dashboard</a>
+                    <a href="signals.html" class="hover:text-blue-400 transition-colors">Signals</a>
+                    <a href="strategies.html" class="hover:text-blue-400 transition-colors">Strategies</a>
+                    <a href="portfolio.html" class="hover:text-blue-400 transition-colors">Portfolio</a>
+                    <a href="settings.html" class="hover:text-blue-400 transition-colors">Settings</a>
+                </div>
+                
+                <div class="flex items-center space-x-4">
+                    <button class="quantum-button px-6 py-2 rounded-lg font-semibold">
+                        Connect MT5
+                    </button>
+                    <div class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center">
+                        <i data-feather="user" class="w-5 h-5"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+    
+    <!-- Hero Section -->
+    <section class="relative min-h-screen flex items-center justify-center">
+        <div class="container mx-auto px-6 text-center">
+            <div class="max-w-4xl mx-auto">
+                <h2 class="text-6xl md:text-8xl font-bold mb-6 floating-element">
+                    <span class="bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
+                        Quantum
+                    </span>
+                    <br>
+                    <span class="text-white">Trading</span>
+                </h2>
+                <p class="text-xl md:text-2xl text-gray-300 mb-8">
+                    Next-generation AI-powered trading platform with real-time signals and advanced analytics
+                </p>
+                <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                    <button class="quantum-button px-8 py-4 rounded-lg font-semibold text-lg">
+                        Start Trading Now
+                    </button>
+                    <button class="px-8 py-4 rounded-lg font-semibold text-lg border border-blue-500 hover:bg-blue-500 hover:bg-opacity-20 transition-all">
+                        View Demo
+                    </button>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Live Trading Widget -->
+        <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 w-full max-w-6xl px-6">
+            <div class="glass-morphism rounded-2xl p-6">
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div class="trading-card rounded-xl p-4">
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="text-gray-400">EUR/USD</span>
+                            <span class="signal-indicator signal-buy"></span>
+                        </div>
+                        <div class="price-ticker">1.0856</div>
+                        <div class="text-green-400 text-sm">+0.0023 (+0.21%)</div>
+                    </div>
+                    <div class="trading-card rounded-xl p-4">
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="text-gray-400">GBP/USD</span>
+                            <span class="signal-indicator signal-sell"></span>
+                        </div>
+                        <div class="price-ticker">1.2743</div>
+                        <div class="text-red-400 text-sm">-0.0012 (-0.09%)</div>
+                    </div>
+                    <div class="trading-card rounded-xl p-4">
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="text-gray-400">USD/JPY</span>
+                            <span class="signal-indicator signal-hold"></span>
+                        </div>
+                        <div class="price-ticker">149.82</div>
+                        <div class="text-yellow-400 text-sm">+0.05 (+0.03%)</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- Features Section -->
+    <section class="py-20 relative">
+        <div class="container mx-auto px-6">
+            <h3 class="text-4xl font-bold text-center mb-16 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
+                Quantum Features
+            </h3>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <div class="trading-card rounded-xl p-8 floating-element">
+                    <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center mb-6">
+                        <i data-feather="cpu" class="w-8 h-8"></i>
+                    </div>
+                    <h4 class="text-2xl font-bold mb-4">AI-Powered Signals</h4>
+                    <p class="text-gray-300">
+                        Advanced machine learning models analyze market data in real-time to generate high-accuracy trading signals
+                    </p>
+                </div>
+                
+                <div class="trading-card rounded-xl p-8 floating-element" style="animation-delay: 0.2s;">
+                    <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-blue-500 rounded-lg flex items-center justify-center mb-6">
+                        <i data-feather="zap" class="w-8 h-8"></i>
+                    </div>
+                    <h4 class="text-2xl font-bold mb-4">Lightning Fast</h4>
+                    <p class="text-gray-300">
+                        Sub-100ms response times with 60 FPS rendering for the smoothest trading experience
+                    </p>
+                </div>
+                
+                <div class="trading-card rounded-xl p-8 floating-element" style="animation-delay: 0.4s;">
+                    <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg flex items-center justify-center mb-6">
+                        <i data-feather="shield" class="w-8 h-8"></i>
+                    </div>
+                    <h4 class="text-2xl font-bold mb-4">Bank-Level Security</h4>
+                    <p class="text-gray-300">
+                        Military-grade encryption and multi-factor authentication protect your assets
+                    </p>
+                </div>
+                
+                <div class="trading-card rounded-xl p-8 floating-element" style="animation-delay: 0.6s;">
+                    <div class="w-16 h-16 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-lg flex items-center justify-center mb-6">
+                        <i data-feather="trending-up" class="w-8 h-8"></i>
+                    </div>
+                    <h4 class="text-2xl font-bold mb-4">Advanced Analytics</h4>
+                    <p class="text-gray-300">
+                        Comprehensive portfolio analytics with real-time P&L tracking and risk management
+                    </p>
+                </div>
+                
+                <div class="trading-card rounded-xl p-8 floating-element" style="animation-delay: 0.8s;">
+                    <div class="w-16 h-16 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-lg flex items-center justify-center mb-6">
+                        <i data-feather="smartphone" class="w-8 h-8"></i>
+                    </div>
+                    <h4 class="text-2xl font-bold mb-4">Mobile Optimized</h4>
+                    <p class="text-gray-300">
+                        Perfectly responsive design from 320px to 8K displays with touch-optimized controls
+                    </p>
+                </div>
+                
+                <div class="trading-card rounded-xl p-8 floating-element" style="animation-delay: 1s;">
+                    <div class="w-16 h-16 bg-gradient-to-r from-teal-500 to-cyan-500 rounded-lg flex items-center justify-center mb-6">
+                        <i data-feather="cloud" class="w-8 h-8"></i>
+                    </div>
+                    <h4 class="text-2xl font-bold mb-4">Cloud Native</h4>
+                    <p class="text-gray-300">
+                        Auto-scaling infrastructure with 99.9% uptime guarantee and global CDN
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- Performance Metrics -->
+    <section class="py-20 bg-gray-800 bg-opacity-50">
+        <div class="container mx-auto px-6">
+            <h3 class="text-4xl font-bold text-center mb-16 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
+                System Performance
+            </h3>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                <div class="performance-metric rounded-xl p-6 text-center">
+                    <div class="text-4xl font-bold text-blue-400 mb-2">99.9%</div>
+                    <div class="text-gray-300">Uptime</div>
+                </div>
+                <div class="performance-metric rounded-xl p-6 text-center">
+                    <div class="text-4xl font-bold text-green-400 mb-2">< 50ms</div>
+                    <div class="text-gray-300">Latency</div>
+                </div>
+                <div class="performance-metric rounded-xl p-6 text-center">
+                    <div class="text-4xl font-bold text-purple-400 mb-2">60 FPS</div>
+                    <div class="text-gray-300">Rendering</div>
+                </div>
+                <div class="performance-metric rounded-xl p-6 text-center">
+                    <div class="text-4xl font-bold text-yellow-400 mb-2">>95</div>
+                    <div class="text-gray-300">Lighthouse Score</div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- Footer -->
+    <footer class="bg-gray-900 py-12">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="flex items-center space-x-3 mb-4 md:mb-0">
+                    <div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+                        <i data-feather="trending-up" class="w-5 h-5"></i>
+                    </div>
+                    <span class="text-xl font-bold">QuantumTrade Matrix</span>
+                </div>
+                <div class="flex space-x-6">
+                    <a href="#" class="hover:text-blue-400 transition-colors">Privacy Policy</a>
+                    <a href="#" class="hover:text-blue-400 transition-colors">Terms of Service</a>
+                    <a href="#" class="hover:text-blue-400 transition-colors">Contact</a>
+                </div>
+            </div>
+            <div class="mt-8 pt-8 border-t border-gray-800 text-center text-gray-400">
+                <p>&copy; 2025 QuantumTrade Matrix. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    
+    <script>
+        // Initialize Vanta.js background
+        VANTA.GLOBE({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x3b82f6,
+            color2: 0x8b5cf6,
+            size: 1.20,
+            backgroundColor: 0x0f172a
+        });
+        
+        // Matrix rain effect
+        function createMatrixRain() {
+            const matrixBg = document.getElementById('matrix-bg');
+            const characters = '01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン';
+            
+            for (let i = 0; i < 50; i++) {
+                const char = document.createElement('div');
+                char.className = 'matrix-char';
+                char.textContent = characters[Math.floor(Math.random() * characters.length)];
+                char.style.left = Math.random() * 100 + '%';
+                char.style.animationDelay = Math.random() * 8 + 's';
+                char.style.animationDuration = (Math.random() * 3 + 5) + 's';
+                matrixBg.appendChild(char);
+            }
+        }
+        
+        createMatrixRain();
+        
+        // Animate elements on scroll
+        const observerOptions = {
+            threshold: 0.1,
+            rootMargin: '0px 0px -100px 0px'
+        };
+        
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.style.opacity = '1';
+                    entry.target.style.transform = 'translateY(0)';
+                }
+            });
+        }, observerOptions);
+        
+        // Observe all trading cards
+        document.querySelectorAll('.trading-card').forEach(card => {
+            card.style.opacity = '0';
+            card.style.transform = 'translateY(50px)';
+            card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
+            observer.observe(card);
+        });
+        
+        // Simulate real-time price updates
+        function updatePrices() {
+            const priceElements = document.querySelectorAll('.price-ticker');
+            priceElements.forEach(element => {
+                const currentPrice = parseFloat(element.textContent);
+                const change = (Math.random() - 0.5) * 0.001;
+                const newPrice = currentPrice + change;
+                element.textContent = newPrice.toFixed(4);
+                
+                // Animate the change
+                anime({
+                    targets: element,
+                    scale: [1, 1.1, 1],
+                    duration: 300,
+                    easing: 'easeInOutQuad'
+                });
+            });
+        }
+        
+        // Update prices every 2 seconds
+        setInterval(updatePrices, 2000);
+        
+        // Add hover effects to buttons
+        document.querySelectorAll('.quantum-button').forEach(button => {
+            button.addEventListener('mouseenter', function() {
+                anime({
+                    targets: this,
+                    scale: 1.05,
+                    duration: 200,
+                    easing: 'easeOutQuad'
+                });
+            });
+            
+            button.addEventListener('mouseleave', function() {
+                anime({
+                    targets: this,
+                    scale: 1,
+                    duration: 200,
+                    easing: 'easeOutQuad'
+                });
+            });
+        });
+        
+        // Initialize Feather icons
+        feather.replace();
+        
+        // Smooth scrolling for navigation links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const target = document.querySelector(this.getAttribute('href'));
+                if (target) {
+                    target.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }
+            });
+        });
+        
+        // Add loading animation
+        window.addEventListener('load', () => {
+            anime({
+                targets: 'body',
+                opacity: [0, 1],
+                duration: 1000,
+                easing: 'easeOutQuad'
+            });
+        });
+    </script>
+</body>
 </html>

portfolio.html

@@ -0,0 +1,650 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Portfolio - QuantumTrade Matrix</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        .glass-morphism {
+            background: rgba(15, 23, 42, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        
+        .trading-card {
+            background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.9) 100%);
+            border: 1px solid rgba(59, 130, 246, 0.3);
+            transition: all 0.3s ease;
+        }
+        
+        .trading-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
+        }
+        
+        .quantum-button {
+            background: linear-gradient(45deg, #3b82f6, #8b5cf6);
+            transition: all 0.3s ease;
+        }
+        
+        .quantum-button:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 5px 20px rgba(139, 92, 246, 0.4);
+        }
+        
+        .sidebar-item {
+            transition: all 0.3s ease;
+            border-left: 3px solid transparent;
+        }
+        
+        .sidebar-item:hover {
+            background: rgba(59, 130, 246, 0.1);
+            border-left-color: #3b82f6;
+        }
+        
+        .sidebar-item.active {
+            background: rgba(59, 130, 246, 0.2);
+            border-left-color: #3b82f6;
+        }
+        
+        .portfolio-card {
+            background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.8) 100%);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            transition: all 0.3s ease;
+        }
+        
+        .portfolio-card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 15px 40px rgba(59, 130, 246, 0.2);
+        }
+        
+        .asset-row {
+            background: rgba(59, 130, 246, 0.05);
+            border: 1px solid rgba(59, 130, 246, 0.1);
+            transition: all 0.3s ease;
+        }
+        
+        .asset-row:hover {
+            background: rgba(59, 130, 246, 0.1);
+            border-color: rgba(59, 130, 246, 0.3);
+        }
+        
+        .profit-positive {
+            color: #10b981;
+            background: rgba(16, 185, 129, 0.1);
+        }
+        
+        .profit-negative {
+            color: #ef4444;
+            background: rgba(239, 68, 68, 0.1);
+        }
+        
+        .chart-container {
+            position: relative;
+            height: 300px;
+        }
+        
+        .metric-highlight {
+            background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
+            border: 1px solid rgba(59, 130, 246, 0.2);
+        }
+        
+        @keyframes slideInLeft {
+            from {
+                opacity: 0;
+                transform: translateX(-30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateX(0);
+            }
+        }
+        
+        .slide-in-left {
+            animation: slideInLeft 0.6s ease-out;
+        }
+        
+        .price-ticker {
+            font-family: 'Courier New', monospace;
+            font-weight: bold;
+            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white">
+    <!-- Navigation -->
+    <nav class="fixed top-0 w-full z-50 glass-morphism">
+        <div class="container mx-auto px-6 py-4">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center space-x-3">
+                    <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+                        <i data-feather="trending-up" class="w-6 h-6"></i>
+                    </div>
+                    <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
+                        QuantumTrade Matrix
+                    </h1>
+                </div>
+                
+                <div class="flex items-center space-x-4">
+                    <div class="hidden md:flex items-center space-x-2">
+                        <div class="w-3 h-3 bg-green-500 rounded-full pulse"></div>
+                        <span class="text-sm">System Online</span>
+                    </div>
+                    <div class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center">
+                        <i data-feather="user" class="w-5 h-5"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+    
+    <!-- Main Layout -->
+    <div class="flex pt-20">
+        <!-- Sidebar -->
+        <aside class="fixed left-0 top-20 w-64 h-full bg-gray-900 bg-opacity-80 border-r border-gray-800 p-6 overflow-y-auto">
+            <nav class="space-y-2">
+                <a href="dashboard.html" class="sidebar-item flex items-center space-x-3 p-3 rounded-lg">
+                    <i data-feather="home" class="w-5 h-5"></i>
+                    <span>Dashboard</span>
+                </a>
+                <a href="signals.html" class="sidebar-item flex items-center space-x-3 p-3 rounded-lg">
+                    <i data-feather="radio" class="w-5 h-5"></i>
+                    <span>Signals</span>
+                </a>
+                <a href="strategies.html" class="sidebar-item flex items-center space-x-3 p-3 rounded-lg">
+                    <i data-feather="target" class="w-5 h-5"></i>
+                    <span>Strategies</span>
+                </a>
+                <a href="portfolio.html" class="sidebar-item active flex items-center space-x-3 p-3 rounded-lg">
+                    <i data-feather="briefcase" class="w-5 h-5"></i>
+                    <span>Portfolio</span>
+                </a>
+                <a href="settings.html" class="sidebar-item flex items-center space-x-3 p-3 rounded-lg">
+                    <i data-feather="settings" class="w-5 h-5"></i>
+                    <span>Settings</span>
+                </a>
+            </nav>
+            
+            <div class="mt-8 p-4 glass-morphism rounded-lg">
+                <h4 class="font-semibold mb-2">Portfolio Summary</h4>
+                <div class="space-y-2 text-sm">
+                    <div class="flex justify-between">
+                        <span class="text-gray-400">Total Value</span>
+                        <span class="text-blue-400">$45,678</span>
+                    </div>
+                    <div class="flex justify-between">
+                        <span class="text-gray-400">Today's P&L</span>
+                        <span class="text-green-400">+$1,245</span>
+                    </div>
+                    <div class="flex justify-between">
+                        <span class="text-gray-400">Total Return</span>
+                        <span class="text-green-400">+23.4%</span>
+                    </div>
+                </div>
+            </div>
+        </aside>
+        
+        <!-- Main Content -->
+        <main class="ml-64 flex-1 p-6">
+            <!-- Portfolio Overview -->
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+                <div class="metric-highlight rounded-xl p-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <span class="text-gray-400">Total Balance</span>
+                        <i data-feather="dollar-sign" class="w-5 h-5 text-blue-400"></i>
+                    </div>
+                    <div class="text-3xl font-bold">$45,678.45</div>
+                    <div class="text-green-400 text-sm mt-2">+$1,245.32 today (+2.8%)</div>
+                </div>
+                
+                <div class="metric-highlight rounded-xl p-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <span class="text-gray-400">Available Margin</span>
+                        <i data-feather="credit-card" class="w-5 h-5 text-green-400"></i>
+                    </div>
+                    <div class="text-3xl font-bold">$32,456.78</div>
+                    <div class="text-gray-400 text-sm mt-2">Margin used: 29%</div>
+                </div>
+                
+                <div class="metric-highlight rounded-xl p-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <span class="text-gray-400">Open P&L</span>
+                        <i data-feather="trending-up" class="w-5 h-5 text-purple-400"></i>
+                    </div>
+                    <div class="text-3xl font-bold text-green-400">+$2,134.56</div>
+                    <div class="text-gray-400 text-sm mt-2">Across 8 positions</div>
+                </div>
+                
+                <div class="metric-highlight rounded-xl p-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <span class="text-gray-400">Total Return</span>
+                        <i data-feather="award" class="w-5 h-5 text-yellow-400"></i>
+                    </div>
+                    <div class="text-3xl font-bold">+23.4%</div>
+                    <div class="text-green-400 text-sm mt-2">Since inception</div>
+                </div>
+            </div>
+            
+            <!-- Portfolio Performance Chart -->
+            <div class="trading-card rounded-xl p-6 mb-8">
+                <div class="flex items-center justify-between mb-6">
+                    <h3 class="text-xl font-bold">Portfolio Performance</h3>
+                    <div class="flex space-x-2">
+                        <button class="px-3 py-1 rounded text-sm border border-gray-600 hover:bg-gray-700">1D</button>
+                        <button class="px-3 py-1 rounded text-sm border border-gray-600 hover:bg-gray-700">1W</button>
+                        <button class="px-3 py-1 rounded text-sm bg-blue-600">1M</button>
+                        <button class="px-3 py-1 rounded text-sm border border-gray-600 hover:bg-gray-700">3M</button>
+                        <button class="px-3 py-1 rounded text-sm border border-gray-600 hover:bg-gray-700">1Y</button>
+                        <button class="px-3 py-1 rounded text-sm border border-gray-600 hover:bg-gray-700">ALL</button>
+                    </div>
+                </div>
+                <div class="chart-container">
+                    <canvas id="portfolioChart"></canvas>
+                </div>
+            </div>
+            
+            <!-- Asset Allocation -->
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+                <div class="trading-card rounded-xl p-6">
+                    <h3 class="text-xl font-bold mb-6">Asset Allocation</h3>
+                    <div class="chart-container mb-6">
+                        <canvas id="allocationChart"></canvas>
+                    </div>
+                    <div class="space-y-3">
+                        <div class="flex items-center justify-between">
+                            <div class="flex items-center space-x-3">
+                                <div class="w-4 h-4 bg-blue-500 rounded"></div>
+                                <span>Forex</span>
+                            </div>
+                            <span class="font-semibold">65.2%</span>
+                        </div>
+                        <div class="flex items-center justify-between">
+                            <div class="flex items-center space-x-3">
+                                <div class="w-4 h-4 bg-green-500 rounded"></div>
+                                <span>Crypto</span>
+                            </div>
+                            <span class="font-semibold">20.8%</span>
+                        </div>
+                        <div class="flex items-center justify-between">
+                            <div class="flex items-center space-x-3">
+                                <div class="w-4 h-4 bg-purple-500 rounded"></div>
+                                <span>Indices</span>
+                            </div>
+                            <span class="font-semibold">10.5%</span>
+                        </div>
+                        <div class="flex items-center justify-between">
+                            <div class="flex items-center space-x-3">
+                                <div class="w-4 h-4 bg-yellow-500 rounded"></div>
+                                <span>Commodities</span>
+                            </div>
+                            <span class="font-semibold">3.5%</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="trading-card rounded-xl p-6">
+                    <h3 class="text-xl font-bold mb-6">Top Performers</h3>
+                    <div class="space-y-4">
+                        <div class="asset-row rounded-lg p-4">
+                            <div class="flex items-center justify-between mb-2">
+                                <div class="flex items-center space-x-3">
+                                    <span class="text-lg font-semibold">EUR/USD</span>
+                                    <span class="text-sm text-gray-400">Long</span>
+                                </div>
+                                <div class="profit-positive px-3 py-1 rounded text-sm font-semibold">
+                                    +$456.78
+                                </div>
+                            </div>
+                            <div class="flex justify-between text-sm">
+                                <span class="text-gray-400">Entry: 1.0845</span>
+                                <span class="price-ticker">Current: 1.0856</span>
+                                <span class="text-green-400">+11 pips</span>
+                            </div>
+                        </div>
+                        
+                        <div class="asset-row rounded-lg p-4">
+                            <div class="flex items-center justify-between mb-2">
+                                <div class="flex items-center space-x-3">
+                                    <span class="text-lg font-semibold">GBP/USD</span>
+                                    <span class="text-sm text-gray-400">Short</span>
+                                </div>
+                                <div class="profit-positive px-3 py-1 rounded text-sm font-semibold">
+                                    +$234.56
+                                </div>
+                            </div>
+                            <div class="flex justify-between text-sm">
+                                <span class="text-gray-400">Entry: 1.2755</span>
+                                <span class="price-ticker">Current: 1.2743</span>
+                                <span class="text-green-400">+12 pips</span>
+                            </div>
+                        </div>
+                        
+                        <div class="asset-row rounded-lg p-4">
+                            <div class="flex items-center justify-between mb-2">
+                                <div class="flex items-center space-x-3">
+                                    <span class="text-lg font-semibold">USD/JPY</span>
+                                    <span class="text-sm text-gray-400">Long</span>
+                                </div>
+                                <div class="profit-negative px-3 py-1 rounded text-sm font-semibold">
+                                    -$123.45
+                                </div>
+                            </div>
+                            <div class="flex justify-between text-sm">
+                                <span class="text-gray-400">Entry: 149.90</span>
+                                <span class="price-ticker">Current: 149.82</span>
+                                <span class="text-red-400">-8 pips</span>
+                            </div>
+                        </div>
+                        
+                        <div class="asset-row rounded-lg p-4">
+                            <div class="flex items-center justify-between mb-2">
+                                <div class="flex items-center space-x-3">
+                                    <span class="text-lg font-semibold">AUD/USD</span>
+                                    <span class="text-sm text-gray-400">Long</span>
+                                </div>
+                                <div class="profit-positive px-3 py-1 rounded text-sm font-semibold">
+                                    +$89.23
+                                </div>
+                            </div>
+                            <div class="flex justify-between text-sm">
+                                <span class="text-gray-400">Entry: 0.6543</span>
+                                <span class="price-ticker">Current: 0.6548</span>
+                                <span class="text-green-400">+5 pips</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Open Positions -->
+            <div class="trading-card rounded-xl p-6 mb-8">
+                <div class="flex items-center justify-between mb-6">
+                    <h3 class="text-xl font-bold">Open Positions</h3>
+                    <button class="quantum-button px-4 py-2 rounded-lg text-sm">
+                        Close All
+                    </button>
+                </div>
+                
+                <div class="overflow-x-auto">
+                    <table class="w-full">
+                        <thead>
+                            <tr class="border-b border-gray-700">
+                                <th class="text-left py-3 px-4">Symbol</th>
+                                <th class="text-left py-3 px-4">Type</th>
+                                <th class="text-left py-3 px-4">Volume</th>
+                                <th class="text-left py-3 px-4">Entry</th>
+                                <th class="text-left py-3 px-4">Current</th>
+                                <th class="text-left py-3 px-4">P&L</th>
+                                <th class="text-left py-3 px-4">Margin</th>
+                                <th class="text-left py-3 px-4">Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody id="positionsTable">
+                            <!-- Positions will be populated here -->
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            
+            <!-- Trade History -->
+            <div class="trading-card rounded-xl p-6">
+                <div class="flex items-center justify-between mb-6">
+                    <h3 class="text-xl font-bold">Recent Trades</h3>
+                    <select class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-sm">
+                        <option>Last 7 Days</option>
+                        <option>Last 30 Days</option>
+                        <option>Last 90 Days</option>
+                        <option>All Time</option>
+                    </select>
+                </div>
+                
+                <div class="overflow-x-auto">
+                    <table class="w-full">
+                        <thead>
+                            <tr class="border-b border-gray-700">
+                                <th class="text-left py-3 px-4">Date</th>
+                                <th class="text-left py-3 px-4">Symbol</th>
+                                <th class="text-left py-3 px-4">Type</th>
+                                <th class="text-left py-3 px-4">Volume</th>
+                                <th class="text-left py-3 px-4">Open</th>
+                                <th class="text-left py-3 px-4">Close</th>
+                                <th class="text-left py-3 px-4">P&L</th>
+                                <th class="text-left py-3 px-4">Duration</th>
+                            </tr>
+                        </thead>
+                        <tbody id="tradesTable">
+                            <!-- Trades will be populated here -->
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </main>
+    </div>
+    
+    <script>
+        // Initialize portfolio performance chart
+        const portfolioCtx = document.getElementById('portfolioChart').getContext('2d');
+        const portfolioChart = new Chart(portfolioCtx, {
+            type: 'line',
+            data: {
+                labels: Array.from({length: 30}, (_, i) => `Day ${i + 1}`),
+                datasets: [{
+                    label: 'Portfolio Value',
+                    data: Array.from({length: 30}, (_, i) => 40000 + Math.random() * 5000 + i * 150),
+                    borderColor: '#3b82f6',
+                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                    tension: 0.4,
+                    fill: true
+                }, {
+                    label: 'Benchmark',
+                    data: Array.from({length: 30}, (_, i) => 40000 + i * 100),
+                    borderColor: '#6b7280',
+                    borderDash: [5, 5],
+                    tension: 0.4,
+                    fill: false
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        display: true,
+                        labels: {
+                            color: '#9ca3af'
+                        }
+                    }
+                },
+                scales: {
+                    x: {
+                        grid: {
+                            color: 'rgba(255, 255, 255, 0.1)'
+                        },
+                        ticks: {
+                            color: '#9ca3af'
+                        }
+                    },
+                    y: {
+                        grid: {
+                            color: 'rgba(255, 255, 255, 0.1)'
+                        },
+                        ticks: {
+                            color: '#9ca3af'
+                        }
+                    }
+                }
+            }
+        });
+        
+        // Initialize allocation chart
+        const allocationCtx = document.getElementById('allocationChart').getContext('2d');
+        const allocationChart = new Chart(allocationCtx, {
+            type: 'doughnut',
+            data: {
+                labels: ['Forex', 'Crypto', 'Indices', 'Commodities'],
+                datasets: [{
+                    data: [65.2, 20.8, 10.5, 3.5],
+                    backgroundColor: ['#3b82f6', '#10b981', '#8b5cf6', '#f59e0b'],
+                    borderWidth: 0
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        display: false
+                    }
+                }
+            }
+        });
+        
+        // Generate random positions
+        function generatePositions() {
+            const symbols = ['EUR/USD', 'GBP/USD', 'USD/JPY', 'AUD/USD', 'USD/CHF', 'NZD/USD'];
+            const types = ['BUY', 'SELL'];
+            const tbody = document.getElementById('positionsTable');
+            
+            const positions = Array.from({length: 8}, (_, i) => {
+                const symbol = symbols[Math.floor(Math.random() * symbols.length)];
+                const type = types[Math.floor(Math.random() * types.length)];
+                const volume = (Math.random() * 1.9 + 0.1).toFixed(2);
+                const entry = (1 + Math.random()).toFixed(4);
+                const current = (parseFloat(entry) + (Math.random() - 0.5) * 0.01).toFixed(4);
+                const pips = Math.floor((parseFloat(current) - parseFloat(entry)) * 10000);
+                const pl = (pips * volume * 10).toFixed(2);
+                const margin = (volume * 1000).toFixed(2);
+                
+                return {
+                    symbol, type, volume, entry, current, pips, pl, margin
+                };
+            });
+            
+            tbody.innerHTML = positions.map(pos => `
+                <tr class="border-b border-gray-800 hover:bg-gray-800">
+                    <td class="py-3 px-4">
+                        <div class="flex items-center">
+                            <span class="w-2 h-2 rounded-full ${pos.type === 'BUY' ? 'bg-green-500' : 'bg-red-500'} mr-2"></span>
+                            ${pos.symbol}
+                        </div>
+                    </td>
+                    <td class="py-3 px-4">
+                        <span class="${pos.type === 'BUY' ? 'text-green-400' : 'text-red-400'}">${pos.type}</span>
+                    </td>
+                    <td class="py-3 px-4">${pos.volume}</td>
+                    <td class="py-3 px-4">${pos.entry}</td>
+                    <td class="py-3 px-4 price-ticker">${pos.current}</td>
+                    <td class="py-3 px-4 ${pos.pips >= 0 ? 'text-green-400' : 'text-red-400'}">
+                        ${pos.pips >= 0 ? '+' : ''}${pos.pl}
+                    </td>
+                    <td class="py-3 px-4">$${pos.margin}</td>
+                    <td class="py-3 px-4">
+                        <button class="text-blue-400 hover:text-blue-300">
+                            <i data-feather="more-horizontal" class="w-5 h-5"></i>
+                        </button>
+                    </td>
+                </tr>
+            `).join('');
+        }
+        
+        // Generate random trades
+        function generateTrades() {
+            const symbols = ['EUR/USD', 'GBP/USD', 'USD/JPY', 'AUD/USD', 'USD/CHF', 'NZD/USD'];
+            const types = ['BUY', 'SELL'];
+            const tbody = document.getElementById('tradesTable');
+            
+            const trades = Array.from({length: 10}, (_, i) => {
+                const date = new Date(Date.now() - i * 86400000).toLocaleDateString();
+                const symbol = symbols[Math.floor(Math.random() * symbols.length)];
+                const type = types[Math.floor(Math.random() * types.length)];
+                const volume = (Math.random() * 1.9 + 0.1).toFixed(2);
+                const open = (1 + Math.random()).toFixed(4);
+                const close = (parseFloat(open) + (Math.random() - 0.5) * 0.02).toFixed(4);
+                const pips = Math.floor((parseFloat(close) - parseFloat(open)) * 10000);
+                const pl = (pips * volume * 10).toFixed(2);
+                const duration = Math.floor(Math.random() * 240) + 15;
+                
+                return {
+                    date, symbol, type, volume, open, close, pips, pl, duration
+                };
+            });
+            
+            tbody.innerHTML = trades.map(trade => `
+                <tr class="border-b border-gray-800 hover:bg-gray-800">
+                    <td class="py-3 px-4 text-gray-400">${trade.date}</td>
+                    <td class="py-3 px-4">${trade.symbol}</td>
+                    <td class="py-3 px-4">
+                        <span class="${trade.type === 'BUY' ? 'text-green-400' : 'text-red-400'}">${trade.type}</span>
+                    </td>
+                    <td class="py-3 px-4">${trade.volume}</td>
+                    <td class="py-3 px-4">${trade.open}</td>
+                    <td class="py-3 px-4">${trade.close}</td>
+                    <td class="py-3 px-4 ${trade.pips >= 0 ? 'text-green-400' : 'text-red-400'}">
+                        ${trade.pips >= 0 ? '+' : ''}${trade.pl}
+                    </td>
+                    <td class="py-3 px-4 text-gray-400">${trade.duration}m</td>
+                </tr>
+            `).join('');
+        }
+        
+        // Initial generation
+        generatePositions();
+        generateTrades();
+        
+        // Update positions every 3 seconds
+        setInterval(generatePositions, 3000);
+        
+        // Animate elements
+        anime({
+            targets: '.metric-highlight',
+            opacity: [0, 1],
+            translateY: [20, 0],
+            delay: anime.stagger(100),
+            duration: 800,
+            easing: 'easeOutQuad'
+        });
+        
+        anime({
+            targets: '.portfolio-card',
+            opacity: [0, 1],
+            translateX: [-30, 0],
+            delay: anime.stagger(150),
+            duration: 800,
+            easing: 'easeOutQuad'
+        });
+        
+        // Add hover effects
+        document.querySelectorAll('.asset-row').forEach(row => {
+            row.addEventListener('mouseenter', function() {
+                anime({
+                    targets: this,
+                    scale: 1.02,
+                    duration: 200,
+                    easing: 'easeOutQuad'
+                });
+            });
+            
+            row.addEventListener('mouseleave', function() {
+                anime({
+                    targets: this,
+                    scale: 1,
+                    duration: 200,
+                    easing: 'easeOutQuad'
+                });
+            });
+        });
+        
+        // Initialize Feather icons
+        feather.replace();
+    </script>
+</body>
+</html>

settings.html

@@ -0,0 +1,267 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Settings - QuantumTrade Matrix</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        .glass-morphism {
+            background: rgba(15, 23, 42, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        
+        .trading-card {
+            background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.9) 100%);
+            border: 1px solid rgba(59, 130, 246, 0.3);
+            transition: all 0.3s ease;
+        }
+        
+        .trading-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
+        }
+        
+        .quantum-button {
+            background: linear-gradient(45deg, #3b82f6, #8b5cf6);
+            transition: all 0.3s ease;
+        }
+        
+        .quantum-button:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 5px 20px rgba(139, 92, 246, 0.4);
+        }
+        
+        .sidebar-item {
+            transition: all 0.3s ease;
+            border-left: 3px solid transparent;
+        }
+        
+        .sidebar-item:hover {
+            background: rgba(59, 130, 246, 0.1);
+            border-left-color: #3b82f6;
+        }
+        
+        .sidebar-item.active {
+            background: rgba(59, 130, 246, 0.2);
+            border-left-color: #3b82f6;
+        }
+        
+        .settings-card {
+            background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.8) 100%);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            transition: all 0.3s ease;
+        }
+        
+        .settings-card:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2);
+        }
+        
+        .toggle-switch {
+            position: relative;
+            width: 48px;
+            height: 24px;
+            background: #374151;
+            border-radius: 24px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        
+        .toggle-switch.active {
+            background: #3b82f6;
+        }
+        
+        .toggle-switch::after {
+            content: '';
+            position: absolute;
+            top: 2px;
+            left: 2px;
+            width: 20px;
+            height: 20px;
+            background: white;
+            border-radius: 50%;
+            transition: all 0.3s ease;
+        }
+        
+        .toggle-switch.active::after {
+            left: 26px;
+        }
+        
+        .input-field {
+            background: rgba(31, 41, 55, 0.5);
+            border: 1px solid rgba(59, 130, 246, 0.3);
+            transition: all 0.3s ease;
+        }
+        
+        .input-field:focus {
+            border-color: #3b82f6;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+        }
+        
+        .danger-zone {
+            background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
+            border: 1px solid rgba(239, 68, 68, 0.3);
+        }
+        
+        .danger-button {
+            background: linear-gradient(45deg, #ef4444, #dc2626);
+            transition: all 0.3s ease;
+        }
+        
+        .danger-button:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 5px 20px rgba(239, 68, 68, 0.4);
+        }
+        
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        
+        .fade-in {
+            animation: fadeIn 0.5s ease-out;
+        }
+        
+        .tab-content {
+            display: none;
+        }
+        
+        .tab-content.active {
+            display: block;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white">
+    <!-- Navigation -->
+    <nav class="fixed top-0 w-full z-50 glass-morphism">
+        <div class="container mx-auto px-6 py-4">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center space-x-3">
+                    <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+                        <i data-feather="trending-up" class="w-6 h-6"></i>
+                    </div>
+                    <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
+                        QuantumTrade Matrix
+                    </h1>
+                </div>
+                
+                <div class="flex items-center space-x-4">
+                    <div class="hidden md:flex items-center space-x-2">
+                        <div class="w-3 h-3 bg-green-500 rounded-full pulse"></div>
+                        <span class="text-sm">System Online</span>
+                    </div>
+                    <div class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center">
+                        <i data-feather="user" class="w-5 h-5"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+    
+    <!-- Main Layout -->
+    <div class="flex pt-20">
+        <!-- Sidebar -->
+        <aside class="fixed left-0 top-20 w-64 h-full bg-gray-900 bg-opacity-80 border-r border-gray-800 p-6 overflow-y-auto">
+            <nav class="space-y-2">
+                <a href="dashboard.html" class="sidebar-item flex items-center space-x-3 p-3 rounded-lg">
+                    <i data-feather="home" class="w-5 h-5"></i>
+                    <span>Dashboard</span>
+                </a>
+                <a href="signals.html" class="sidebar-item flex items-center space-x-3 p-3 rounded-lg">
+                    <i data-feather="radio" class="w-5 h-5"></i>
+                    <span>Signals</span>
+                </a>
+                <a href="strategies.html" class="sidebar-item flex items-center space-x-3 p-3 rounded-lg">
+                    <i data-feather="target" class="w-5 h-5"></i>
+                    <span>Strategies</span>
+                </a>
+                <a href="portfolio.html" class="sidebar-item flex items-center space-x-3 p-3 rounded-lg">
+                    <i data-feather="briefcase" class="w-5 h-5"></i>
+                    <span>Portfolio</span>
+                </a>
+                <a href="settings.html" class="sidebar-item active flex items-center space-x-3 p-3 rounded-lg">
+                    <i data-feather="settings" class="w-5 h-5"></i>
+                    <span>Settings</span>
+                </a>
+            </nav>
+        </aside>
+        
+        <!-- Main Content -->
+        <main class="ml-64 flex-1 p-6">
+            <!-- Header -->
+            <div class="mb-8">
+                <h2 class="text-3xl font-bold mb-6">Settings</h2>
+                
+                <!-- Settings Tabs -->
+                <div class="flex space-x-1 mb-6 bg-gray-800 bg-opacity-50 p-1 rounded-lg">
+                    <button class="tab-button px-6 py-2 rounded-lg text-sm font-medium active" data-tab="general">
+                        General
+                    </button>
+                    <button class="tab-button px-6 py-2 rounded-lg text-sm font-medium" data-tab="security">
+                        Security
+                    </button>
+                    <button class="tab-button px-6 py-2 rounded-lg text-sm font-medium" data-tab="notifications">
+                        Notifications
+                    </button>
+                    <button class="tab-button px-6 py-2 rounded-lg text-sm font-medium" data-tab="api">
+                        API & Integrations
+                    </button>
+                    <button class="tab-button px-6 py-2 rounded-lg text-sm font-medium" data-tab="advanced">
+                        Advanced
+                    </button>
+                </div>
+            </div>
+            
+            <!-- General Settings -->
+            <div id="general" class="tab-content active">
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <!-- Profile Settings -->
+                    <div class="settings-card rounded-xl p-6 fade-in">
+                        <h3 class="text-xl font-bold mb-6">Profile Information</h3>
+                        
+                        <div class="space-y-4">
+                            <div>
+                                <label class="block text-sm text-gray-400 mb-2">Full Name</label>
+                                <input type="text" class="input-field w-full px-4 py-2 rounded-lg" value="John Doe">
+                            </div>
+                            
+                            <div>
+                                <label class="block text-sm text-gray-400 mb-2">Email Address</label>
+                                <input type="email" class="input-field w-full px-4 py-2 rounded-lg" value="john.doe@example.com">
+                            </div>
+                            
+                            <div>
+                                <label class="block text-sm text-gray-400 mb-2">Phone Number</label>
+                                <input type="tel" class="input-field w-full px-4 py-2 rounded-lg" value="+1 (555) 123-4567">
+                            </div>
+                            
+                            <div>
+                                <label class="block text-sm text-gray-400 mb-2">Timezone</label>
+                                <select class="input-field w-full px-4 py-2 rounded-lg">
+                                    <option>UTC-5 (Eastern Time)</option>
+                                    <option>UTC-6 (Central Time)</option>
+                                    <option>UTC-7 (Mountain Time)</option>
+                                    <option>UTC-8 (Pacific Time)</option>
+                                    <option>UTC+0 (GMT)</option>
+                                    <option>UTC+1 (CET)</option>
+                                </select>
+                            </div>
+                            
+                            <div>
+                                <label class="block text-sm text-gray-400 mb-2">Language</label>
+                                <select class="input-field w-full px-4 py-2 rounded-lg">
+                                    <option>English</option>
+</body>
+</html>

signals.html

@@ -0,0 +1,554 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Signals - QuantumTrade Matrix</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        .glass-morphism {
+            background: rgba(15, 23, 42, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        
+        .trading-card {
+            background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.9) 100%);
+            border: 1px solid rgba(59, 130, 246, 0.3);
+            transition: all 0.3s ease;
+        }
+        
+        .trading-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
+        }
+        
+        .quantum-button {
+            background: linear-gradient(45deg, #3b82f6, #8b5cf6);
+            transition: all 0.3s ease;
+        }
+        
+        .quantum-button:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 5px 20px rgba(139, 92, 246, 0.4);
+        }
+        
+        .signal-buy {
+            background: #10b981;
+            box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
+        }
+        
+        .signal-sell {
+            background: #ef4444;
+            box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
+        }
+        
+        .signal-hold {
+            background: #f59e0b;
+            box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
+        }
+        
+        .price-ticker {
+            font-family: 'Courier New', monospace;
+            font-weight: bold;
+            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        
+        .sidebar-item {
+            transition: all 0.3s ease;
+            border-left: 3px solid transparent;
+        }
+        
+        .sidebar-item:hover {
+            background: rgba(59, 130, 246, 0.1);
+            border-left-color: #3b82f6;
+        }
+        
+        .sidebar-item.active {
+            background: rgba(59, 130, 246, 0.2);
+            border-left-color: #3b82f6;
+        }
+        
+        .signal-card {
+            background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.8) 100%);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            transition: all 0.3s ease;
+        }
+        
+        .signal-card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 15px 40px rgba(59, 130, 246, 0.2);
+        }
+        
+        .filter-chip {
+            background: rgba(59, 130, 246, 0.1);
+            border: 1px solid rgba(59, 130, 246, 0.3);
+            transition: all 0.3s ease;
+        }
+        
+        .filter-chip:hover, .filter-chip.active {
+            background: rgba(59, 130, 246, 0.3);
+            border-color: #3b82f6;
+        }
+        
+        @keyframes slideIn {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        
+        .signal-item {
+            animation: slideIn 0.5s ease-out;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white">
+    <!-- Navigation -->
+    <nav class="fixed top-0 w-full z-50 glass-morphism">
+        <div class="container mx-auto px-6 py-4">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center space-x-3">
+                    <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+                        <i data-feather="trending-up" class="w-6 h-6"></i>
+                    </div>
+                    <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
+                        QuantumTrade Matrix
+                    </h1>
+                </div>
+                
+                <div class="flex items-center space-x-4">
+                    <div class="hidden md:flex items-center space-x-2">
+                        <div class="w-3 h-3 bg-green-500 rounded-full pulse"></div>
+                        <span class="text-sm">System Online</span>
+                    </div>
+                    <div class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center">
+                        <i data-feather="user" class="w-5 h-5"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+    
+    <!-- Main Layout -->
+    <div class="flex pt-20">
+        <!-- Sidebar -->
+        <aside class="fixed left-0 top-20 w-64 h-full bg-gray-900 bg-opacity-80 border-r border-gray-800 p-6 overflow-y-auto">
+            <nav class="space-y-2">
+                <a href="dashboard.html" class="sidebar-item flex items-center space-x-3 p-3 rounded-lg">
+                    <i data-feather="home" class="w-5 h-5"></i>
+                    <span>Dashboard</span>
+                </a>
+                <a href="signals.html" class="sidebar-item active flex items-center space-x-3 p-3 rounded-lg">
+                    <i data-feather="radio" class="w-5 h-5"></i>
+                    <span>Signals</span>
+                </a>
+                <a href="strategies.html" class="sidebar-item flex items-center space-x-3 p-3 rounded-lg">
+                    <i data-feather="target" class="w-5 h-5"></i>
+                    <span>Strategies</span>
+                </a>
+                <a href="portfolio.html" class="sidebar-item flex items-center space-x-3 p-3 rounded-lg">
+                    <i data-feather="briefcase" class="w-5 h-5"></i>
+                    <span>Portfolio</span>
+                </a>
+                <a href="settings.html" class="sidebar-item flex items-center space-x-3 p-3 rounded-lg">
+                    <i data-feather="settings" class="w-5 h-5"></i>
+                    <span>Settings</span>
+                </a>
+            </nav>
+            
+            <div class="mt-8 p-4 glass-morphism rounded-lg">
+                <h4 class="font-semibold mb-2">Signal Stats</h4>
+                <div class="space-y-2 text-sm">
+                    <div class="flex justify-between">
+                        <span class="text-gray-400">Total Signals</span>
+                        <span class="text-blue-400">1,247</span>
+                    </div>
+                    <div class="flex justify-between">
+                        <span class="text-gray-400">Success Rate</span>
+                        <span class="text-green-400">78.5%</span>
+                    </div>
+                    <div class="flex justify-between">
+                        <span class="text-gray-400">Avg. P&L</span>
+                        <span class="text-green-400">+45 pips</span>
+                    </div>
+                </div>
+            </div>
+        </aside>
+        
+        <!-- Main Content -->
+        <main class="ml-64 flex-1 p-6">
+            <!-- Filters -->
+            <div class="mb-8">
+                <h2 class="text-3xl font-bold mb-6">Trading Signals</h2>
+                
+                <div class="flex flex-wrap gap-3 mb-6">
+                    <button class="filter-chip active px-4 py-2 rounded-lg text-sm">All Signals</button>
+                    <button class="filter-chip px-4 py-2 rounded-lg text-sm">Buy Only</button>
+                    <button class="filter-chip px-4 py-2 rounded-lg text-sm">Sell Only</button>
+                    <button class="filter-chip px-4 py-2 rounded-lg text-sm">High Confidence</button>
+                    <button class="filter-chip px-4 py-2 rounded-lg text-sm">Recent</button>
+                </div>
+                
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                    <select class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2">
+                        <option>All Symbols</option>
+                        <option>EUR/USD</option>
+                        <option>GBP/USD</option>
+                        <option>USD/JPY</option>
+                        <option>AUD/USD</option>
+                    </select>
+                    
+                    <select class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2">
+                        <option>All Timeframes</option>
+                        <option>1 Minute</option>
+                        <option>5 Minutes</option>
+                        <option>15 Minutes</option>
+                        <option>1 Hour</option>
+                        <option>4 Hours</option>
+                        <option>1 Day</option>
+                    </select>
+                    
+                    <select class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2">
+                        <option>All Strategies</option>
+                        <option>Scalping</option>
+                        <option>Day Trading</option>
+                        <option>Swing Trading</option>
+                        <option>Position Trading</option>
+                    </select>
+                </div>
+            </div>
+            
+            <!-- Signal Cards Grid -->
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+                <!-- Signal Card 1 -->
+                <div class="signal-card rounded-xl p-6 signal-item">
+                    <div class="flex items-center justify-between mb-4">
+                        <div class="flex items-center space-x-3">
+                            <span class="signal-indicator signal-buy"></span>
+                            <div>
+                                <h3 class="font-bold text-lg">EUR/USD</h3>
+                                <p class="text-sm text-gray-400">5 Minute</p>
+                            </div>
+                        </div>
+                        <div class="text-right">
+                            <div class="price-ticker text-xl">1.0856</div>
+                            <div class="text-green-400 text-sm">+0.0011</div>
+                        </div>
+                    </div>
+                    
+                    <div class="mb-4">
+                        <div class="flex justify-between items-center mb-2">
+                            <span class="text-gray-400">Signal Type</span>
+                            <span class="text-green-400 font-semibold">BUY</span>
+                        </div>
+                        <div class="flex justify-between items-center mb-2">
+                            <span class="text-gray-400">Confidence</span>
+                            <div class="flex items-center">
+                                <div class="w-20 bg-gray-700 rounded-full h-2 mr-2">
+                                    <div class="bg-green-500 h-2 rounded-full" style="width: 85%"></div>
+                                </div>
+                                <span class="text-sm">85%</span>
+                            </div>
+                        </div>
+                        <div class="flex justify-between items-center mb-2">
+                            <span class="text-gray-400">Entry Price</span>
+                            <span>1.0845</span>
+                        </div>
+                        <div class="flex justify-between items-center mb-2">
+                            <span class="text-gray-400">Take Profit</span>
+                            <span class="text-green-400">1.0865</span>
+                        </div>
+                        <div class="flex justify-between items-center">
+                            <span class="text-gray-400">Stop Loss</span>
+                            <span class="text-red-400">1.0835</span>
+                        </div>
+                    </div>
+                    
+                    <div class="flex space-x-2">
+                        <button class="quantum-button flex-1 py-2 rounded-lg text-sm">
+                            Execute
+                        </button>
+                        <button class="flex-1 py-2 rounded-lg text-sm border border-gray-600 hover:bg-gray-700">
+                            Details
+                        </button>
+                    </div>
+                </div>
+                
+                <!-- Signal Card 2 -->
+                <div class="signal-card rounded-xl p-6 signal-item" style="animation-delay: 0.1s;">
+                    <div class="flex items-center justify-between mb-4">
+                        <div class="flex items-center space-x-3">
+                            <span class="signal-indicator signal-sell"></span>
+                            <div>
+                                <h3 class="font-bold text-lg">GBP/USD</h3>
+                                <p class="text-sm text-gray-400">15 Minute</p>
+                            </div>
+                        </div>
+                        <div class="text-right">
+                            <div class="price-ticker text-xl">1.2743</div>
+                            <div class="text-red-400 text-sm">-0.0012</div>
+                        </div>
+                    </div>
+                    
+                    <div class="mb-4">
+                        <div class="flex justify-between items-center mb-2">
+                            <span class="text-gray-400">Signal Type</span>
+                            <span class="text-red-400 font-semibold">SELL</span>
+                        </div>
+                        <div class="flex justify-between items-center mb-2">
+                            <span class="text-gray-400">Confidence</span>
+                            <div class="flex items-center">
+                                <div class="w-20 bg-gray-700 rounded-full h-2 mr-2">
+                                    <div class="bg-green-500 h-2 rounded-full" style="width: 78%"></div>
+                                </div>
+                                <span class="text-sm">78%</span>
+                            </div>
+                        </div>
+                        <div class="flex justify-between items-center mb-2">
+                            <span class="text-gray-400">Entry Price</span>
+                            <span>1.2755</span>
+                        </div>
+                        <div class="flex justify-between items-center mb-2">
+                            <span class="text-gray-400">Take Profit</span>
+                            <span class="text-green-400">1.2735</span>
+                        </div>
+                        <div class="flex justify-between items-center">
+                            <span class="text-gray-400">Stop Loss</span>
+                            <span class="text-red-400">1.2765</span>
+                        </div>
+                    </div>
+                    
+                    <div class="flex space-x-2">
+                        <button class="quantum-button flex-1 py-2 rounded-lg text-sm">
+                            Execute
+                        </button>
+                        <button class="flex-1 py-2 rounded-lg text-sm border border-gray-600 hover:bg-gray-700">
+                            Details
+                        </button>
+                    </div>
+                </div>
+                
+                <!-- Signal Card 3 -->
+                <div class="signal-card rounded-xl p-6 signal-item" style="animation-delay: 0.2s;">
+                    <div class="flex items-center justify-between mb-4">
+                        <div class="flex items-center space-x-3">
+                            <span class="signal-indicator signal-hold"></span>
+                            <div>
+                                <h3 class="font-bold text-lg">USD/JPY</h3>
+                                <p class="text-sm text-gray-400">1 Hour</p>
+                            </div>
+                        </div>
+                        <div class="text-right">
+                            <div class="price-ticker text-xl">149.82</div>
+                            <div class="text-green-400 text-sm">+0.02</div>
+                        </div>
+                    </div>
+                    
+                    <div class="mb-4">
+                        <div class="flex justify-between items-center mb-2">
+                            <span class="text-gray-400">Signal Type</span>
+                            <span class="text-yellow-400 font-semibold">HOLD</span>
+                        </div>
+                        <div class="flex justify-between items-center mb-2">
+                            <span class="text-gray-400">Confidence</span>
+                            <div class="flex items-center">
+                                <div class="w-20 bg-gray-700 rounded-full h-2 mr-2">
+                                    <div class="bg-yellow-500 h-2 rounded-full" style="width: 65%"></div>
+                                </div>
+                                <span class="text-sm">65%</span>
+                            </div>
+                        </div>
+                        <div class="flex justify-between items-center mb-2">
+                            <span class="text-gray-400">Entry Price</span>
+                            <span>149.80</span>
+                        </div>
+                        <div class="flex justify-between items-center mb-2">
+                            <span class="text-gray-400">Take Profit</span>
+                            <span class="text-green-400">150.20</span>
+                        </div>
+                        <div class="flex justify-between items-center">
+                            <span class="text-gray-400">Stop Loss</span>
+                            <span class="text-red-400">149.40</span>
+                        </div>
+                    </div>
+                    
+                    <div class="flex space-x-2">
+                        <button class="quantum-button flex-1 py-2 rounded-lg text-sm">
+                            Execute
+                        </button>
+                        <button class="flex-1 py-2 rounded-lg text-sm border border-gray-600 hover:bg-gray-700">
+                            Details
+                        </button>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Detailed Signals Table -->
+            <div class="trading-card rounded-xl p-6">
+                <div class="flex items-center justify-between mb-6">
+                    <h3 class="text-xl font-bold">All Signals</h3>
+                    <div class="flex space-x-2">
+                        <button class="quantum-button px-4 py-2 rounded-lg text-sm">
+                            Export CSV
+                        </button>
+                        <button class="px-4 py-2 rounded-lg text-sm border border-gray-600 hover:bg-gray-700">
+                            Auto-Trade
+                        </button>
+                    </div>
+                </div>
+                
+                <div class="overflow-x-auto">
+                    <table class="w-full">
+                        <thead>
+                            <tr class="border-b border-gray-700">
+                                <th class="text-left py-3 px-4">Time</th>
+                                <th class="text-left py-3 px-4">Symbol</th>
+                                <th class="text-left py-3 px-4">Type</th>
+                                <th class="text-left py-3 px-4">Entry</th>
+                                <th class="text-left py-3 px-4">Current</th>
+                                <th class="text-left py-3 px-4">P&L</th>
+                                <th class="text-left py-3 px-4">Confidence</th>
+                                <th class="text-left py-3 px-4">Status</th>
+                                <th class="text-left py-3 px-4">Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody id="signalsTableBody">
+                            <!-- Signals will be populated here -->
+                        </tbody>
+                    </table>
+                </div>
+                
+                <div class="mt-6 flex justify-center">
+                    <div class="flex space-x-2">
+                        <button class="px-3 py-1 rounded border border-gray-600 hover:bg-gray-700">Previous</button>
+                        <button class="px-3 py-1 rounded bg-blue-600">1</button>
+                        <button class="px-3 py-1 rounded border border-gray-600 hover:bg-gray-700">2</button>
+                        <button class="px-3 py-1 rounded border border-gray-600 hover:bg-gray-700">3</button>
+                        <button class="px-3 py-1 rounded border border-gray-600 hover:bg-gray-700">Next</button>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+    
+    <script>
+        // Generate random signals
+        const symbols = ['EUR/USD', 'GBP/USD', 'USD/JPY', 'AUD/USD', 'USD/CHF', 'NZD/USD'];
+        const timeframes = ['1m', '5m', '15m', '1h', '4h', '1d'];
+        const signalTypes = ['BUY', 'SELL', 'HOLD'];
+        
+        function generateSignals() {
+            const signals = [];
+            const now = new Date();
+            
+            for (let i = 0; i < 20; i++) {
+                const time = new Date(now - i * 5 * 60 * 1000);
+                const symbol = symbols[Math.floor(Math.random() * symbols.length)];
+                const type = signalTypes[Math.floor(Math.random() * signalTypes.length)];
+                const entry = (1 + Math.random() * 2).toFixed(4);
+                const current = (parseFloat(entry) + (Math.random() - 0.5) * 0.01).toFixed(4);
+                const confidence = Math.floor(Math.random() * 30) + 70;
+                const pips = Math.floor((parseFloat(current) - parseFloat(entry)) * 10000);
+                
+                signals.push({
+                    time: time.toLocaleTimeString(),
+                    symbol,
+                    type,
+                    entry,
+                    current,
+                    pips,
+                    confidence,
+                    status: Math.random() > 0.5 ? 'Active' : 'Executed'
+                });
+            }
+            
+            return signals;
+        }
+        
+        function renderSignals() {
+            const tbody = document.getElementById('signalsTableBody');
+            const signals = generateSignals();
+            
+            tbody.innerHTML = signals.map(signal => `
+                <tr class="border-b border-gray-800 hover:bg-gray-800 signal-item">
+                    <td class="py-3 px-4 text-gray-400">${signal.time}</td>
+                    <td class="py-3 px-4">
+                        <div class="flex items-center">
+                            <span class="signal-indicator signal-${signal.type.toLowerCase()}"></span>
+                            ${signal.symbol}
+                        </div>
+                    </td>
+                    <td class="py-3 px-4">
+                        <span class="${signal.type === 'BUY' ? 'text-green-400' : signal.type === 'SELL' ? 'text-red-400' : 'text-yellow-400'}">
+                            ${signal.type}
+                        </span>
+                    </td>
+                    <td class="py-3 px-4">${signal.entry}</td>
+                    <td class="py-3 px-4 price-ticker">${signal.current}</td>
+                    <td class="py-3 px-4 ${signal.pips >= 0 ? 'text-green-400' : 'text-red-400'}">
+                        ${signal.pips >= 0 ? '+' : ''}${signal.pips} pips
+                    </td>
+                    <td class="py-3 px-4">
+                        <div class="flex items-center">
+                            <div class="w-16 bg-gray-700 rounded-full h-2 mr-2">
+                                <div class="bg-${signal.confidence > 80 ? 'green' : signal.confidence > 60 ? 'yellow' : 'red'}-500 h-2 rounded-full" style="width: ${signal.confidence}%"></div>
+                            </div>
+                            <span class="text-sm">${signal.confidence}%</span>
+                        </div>
+                    </td>
+                    <td class="py-3 px-4">
+                        <span class="px-2 py-1 rounded text-xs ${signal.status === 'Active' ? 'bg-green-500 bg-opacity-20 text-green-400' : 'bg-blue-500 bg-opacity-20 text-blue-400'}">
+                            ${signal.status}
+                        </span>
+                    </td>
+                    <td class="py-3 px-4">
+                        <button class="text-blue-400 hover:text-blue-300">
+                            <i data-feather="more-horizontal" class="w-5 h-5"></i>
+                        </button>
+                    </td>
+                </tr>
+            `).join('');
+        }
+        
+        // Initial render
+        renderSignals();
+        
+        // Update signals every 5 seconds
+        setInterval(renderSignals, 5000);
+        
+        // Add filter functionality
+        document.querySelectorAll('.filter-chip').forEach(chip => {
+            chip.addEventListener('click', function() {
+                document.querySelectorAll('.filter-chip').forEach(c => c.classList.remove('active'));
+                this.classList.add('active');
+                renderSignals();
+            });
+        });
+        
+        // Animate signal cards
+        anime({
+            targets: '.signal-card',
+            opacity: [0, 1],
+            translateY: [30, 0],
+            delay: anime.stagger(100),
+            duration: 800,
+            easing: 'easeOutQuad'
+        });
+        
+        // Initialize Feather icons
+        feather.replace();
+    </script>
+</body>
+</html>

strategies.html

@@ -0,0 +1,660 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Strategies - QuantumTrade Matrix</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        .glass-morphism {
+            background: rgba(15, 23, 42, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        
+        .trading-card {
+            background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.9) 100%);
+            border: 1px solid rgba(59, 130, 246, 0.3);
+            transition: all 0.3s ease;
+        }
+        
+        .trading-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
+        }
+        
+        .quantum-button {
+            background: linear-gradient(45deg, #3b82f6, #8b5cf6);
+            transition: all 0.3s ease;
+        }
+        
+        .quantum-button:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 5px 20px rgba(139, 92, 246, 0.4);
+        }
+        
+        .sidebar-item {
+            transition: all 0.3s ease;
+            border-left: 3px solid transparent;
+        }
+        
+        .sidebar-item:hover {
+            background: rgba(59, 130, 246, 0.1);
+            border-left-color: #3b82f6;
+        }
+        
+        .sidebar-item.active {
+            background: rgba(59, 130, 246, 0.2);
+            border-left-color: #3b82f6;
+        }
+        
+        .strategy-card {
+            background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.8) 100%);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            transition: all 0.3s ease;
+        }
+        
+        .strategy-card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 15px 40px rgba(59, 130, 246, 0.2);
+        }
+        
+        .performance-badge {
+            background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.2) 100%);
+            border: 1px solid rgba(16, 185, 129, 0.3);
+        }
+        
+        .chart-container {
+            position: relative;
+            height: 200px;
+        }
+        
+        .metric-box {
+            background: rgba(59, 130, 246, 0.1);
+            border: 1px solid rgba(59, 130, 246, 0.2);
+        }
+        
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        
+        .fade-in-up {
+            animation: fadeInUp 0.6s ease-out;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white">
+    <!-- Navigation -->
+    <nav class="fixed top-0 w-full z-50 glass-morphism">
+        <div class="container mx-auto px-6 py-4">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center space-x-3">
+                    <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+                        <i data-feather="trending-up" class="w-6 h-6"></i>
+                    </div>
+                    <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
+                        QuantumTrade Matrix
+                    </h1>
+                </div>
+                
+                <div class="flex items-center space-x-4">
+                    <div class="hidden md:flex items-center space-x-2">
+                        <div class="w-3 h-3 bg-green-500 rounded-full pulse"></div>
+                        <span class="text-sm">System Online</span>
+                    </div>
+                    <div class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center">
+                        <i data-feather="user" class="w-5 h-5"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+    
+    <!-- Main Layout -->
+    <div class="flex pt-20">
+        <!-- Sidebar -->
+        <aside class="fixed left-0 top-20 w-64 h-full bg-gray-900 bg-opacity-80 border-r border-gray-800 p-6 overflow-y-auto">
+            <nav class="space-y-2">
+                <a href="dashboard.html" class="sidebar-item flex items-center space-x-3 p-3 rounded-lg">
+                    <i data-feather="home" class="w-5 h-5"></i>
+                    <span>Dashboard</span>
+                </a>
+                <a href="signals.html" class="sidebar-item flex items-center space-x-3 p-3 rounded-lg">
+                    <i data-feather="radio" class="w-5 h-5"></i>
+                    <span>Signals</span>
+                </a>
+                <a href="strategies.html" class="sidebar-item active flex items-center space-x-3 p-3 rounded-lg">
+                    <i data-feather="target" class="w-5 h-5"></i>
+                    <span>Strategies</span>
+                </a>
+                <a href="portfolio.html" class="sidebar-item flex items-center space-x-3 p-3 rounded-lg">
+                    <i data-feather="briefcase" class="w-5 h-5"></i>
+                    <span>Portfolio</span>
+                </a>
+                <a href="settings.html" class="sidebar-item flex items-center space-x-3 p-3 rounded-lg">
+                    <i data-feather="settings" class="w-5 h-5"></i>
+                    <span>Settings</span>
+                </a>
+            </nav>
+            
+            <div class="mt-8 p-4 glass-morphism rounded-lg">
+                <h4 class="font-semibold mb-2">Strategy Stats</h4>
+                <div class="space-y-2 text-sm">
+                    <div class="flex justify-between">
+                        <span class="text-gray-400">Active</span>
+                        <span class="text-green-400">8</span>
+                    </div>
+                    <div class="flex justify-between">
+                        <span class="text-gray-400">Total P&L</span>
+                        <span class="text-green-400">+$12,456</span>
+                    </div>
+                    <div class="flex justify-between">
+                        <span class="text-gray-400">Avg. Win Rate</span>
+                        <span class="text-blue-400">76.3%</span>
+                    </div>
+                </div>
+            </div>
+        </aside>
+        
+        <!-- Main Content -->
+        <main class="ml-64 flex-1 p-6">
+            <!-- Header -->
+            <div class="mb-8">
+                <h2 class="text-3xl font-bold mb-6">Trading Strategies</h2>
+                
+                <div class="flex flex-wrap gap-3 mb-6">
+                    <button class="quantum-button px-6 py-2 rounded-lg">
+                        <i data-feather="plus" class="w-4 h-4 inline mr-2"></i>
+                        Create Strategy
+                    </button>
+                    <button class="px-6 py-2 rounded-lg border border-gray-600 hover:bg-gray-700">
+                        <i data-feather="upload" class="w-4 h-4 inline mr-2"></i>
+                        Import
+                    </button>
+                    <button class="px-6 py-2 rounded-lg border border-gray-600 hover:bg-gray-700">
+                        <i data-feather="download" class="w-4 h-4 inline mr-2"></i>
+                        Export
+                    </button>
+                </div>
+            </div>
+            
+            <!-- Strategy Overview Cards -->
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+                <div class="metric-box rounded-xl p-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <span class="text-gray-400">Total Strategies</span>
+                        <i data-feather="target" class="w-5 h-5 text-blue-400"></i>
+                    </div>
+                    <div class="text-3xl font-bold">24</div>
+                    <div class="text-green-400 text-sm mt-2">+3 this month</div>
+                </div>
+                
+                <div class="metric-box rounded-xl p-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <span class="text-gray-400">Active Today</span>
+                        <i data-feather="activity" class="w-5 h-5 text-green-400"></i>
+                    </div>
+                    <div class="text-3xl font-bold">8</div>
+                    <div class="text-gray-400 text-sm mt-2">2 pending activation</div>
+                </div>
+                
+                <div class="metric-box rounded-xl p-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <span class="text-gray-400">Best Performer</span>
+                        <i data-feather="award" class="w-5 h-5 text-yellow-400"></i>
+                    </div>
+                    <div class="text-lg font-bold">Scalping Pro</div>
+                    <div class="text-green-400 text-sm mt-2">+89.2% ROI</div>
+                </div>
+                
+                <div class="metric-box rounded-xl p-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <span class="text-gray-400">Avg. Win Rate</span>
+                        <i data-feather="trending-up" class="w-5 h-5 text-purple-400"></i>
+                    </div>
+                    <div class="text-3xl font-bold">76.3%</div>
+                    <div class="text-green-400 text-sm mt-2">+2.1% vs last month</div>
+                </div>
+            </div>
+            
+            <!-- Strategy Cards -->
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+                <!-- Scalping Strategy -->
+                <div class="strategy-card rounded-xl p-6 fade-in-up">
+                    <div class="flex items-center justify-between mb-4">
+                        <div>
+                            <h3 class="text-xl font-bold">Scalping Pro</h3>
+                            <p class="text-gray-400 text-sm">High-frequency trading on 1-5 minute charts</p>
+                        </div>
+                        <div class="performance-badge px-3 py-1 rounded-full text-sm">
+                            +89.2% ROI
+                        </div>
+                    </div>
+                    
+                    <div class="chart-container mb-4">
+                        <canvas id="scalpingChart"></canvas>
+                    </div>
+                    
+                    <div class="grid grid-cols-2 gap-4 mb-4">
+                        <div>
+                            <p class="text-gray-400 text-sm">Win Rate</p>
+                            <p class="text-lg font-bold text-green-400">82.5%</p>
+                        </div>
+                        <div>
+                            <p class="text-gray-400 text-sm">Total Trades</p>
+                            <p class="text-lg font-bold">1,247</p>
+                        </div>
+                        <div>
+                            <p class="text-gray-400 text-sm">Avg. Trade</p>
+                            <p class="text-lg font-bold">+12.3 pips</p>
+                        </div>
+                        <div>
+                            <p class="text-gray-400 text-sm">Max DD</p>
+                            <p class="text-lg font-bold text-red-400">-5.2%</p>
+                        </div>
+                    </div>
+                    
+                    <div class="flex space-x-2">
+                        <button class="quantum-button flex-1 py-2 rounded-lg text-sm">
+                            Activate
+                        </button>
+                        <button class="px-4 py-2 rounded-lg text-sm border border-gray-600 hover:bg-gray-700">
+                            <i data-feather="settings" class="w-4 h-4"></i>
+                        </button>
+                        <button class="px-4 py-2 rounded-lg text-sm border border-gray-600 hover:bg-gray-700">
+                            <i data-feather="bar-chart-2" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                </div>
+                
+                <!-- Day Trading Strategy -->
+                <div class="strategy-card rounded-xl p-6 fade-in-up" style="animation-delay: 0.1s;">
+                    <div class="flex items-center justify-between mb-4">
+                        <div>
+                            <h3 class="text-xl font-bold">Day Trading Elite</h3>
+                            <p class="text-gray-400 text-sm">Intraday momentum and breakout strategies</p>
+                        </div>
+                        <div class="performance-badge px-3 py-1 rounded-full text-sm">
+                            +64.7% ROI
+                        </div>
+                    </div>
+                    
+                    <div class="chart-container mb-4">
+                        <canvas id="dayTradingChart"></canvas>
+                    </div>
+                    
+                    <div class="grid grid-cols-2 gap-4 mb-4">
+                        <div>
+                            <p class="text-gray-400 text-sm">Win Rate</p>
+                            <p class="text-lg font-bold text-green-400">76.8%</p>
+                        </div>
+                        <div>
+                            <p class="text-gray-400 text-sm">Total Trades</p>
+                            <p class="text-lg font-bold">892</p>
+                        </div>
+                        <div>
+                            <p class="text-gray-400 text-sm">Avg. Trade</p>
+                            <p class="text-lg font-bold">+28.7 pips</p>
+                        </div>
+                        <div>
+                            <p class="text-gray-400 text-sm">Max DD</p>
+                            <p class="text-lg font-bold text-red-400">-8.1%</p>
+                        </div>
+                    </div>
+                    
+                    <div class="flex space-x-2">
+                        <button class="quantum-button flex-1 py-2 rounded-lg text-sm">
+                            Activate
+                        </button>
+                        <button class="px-4 py-2 rounded-lg text-sm border border-gray-600 hover:bg-gray-700">
+                            <i data-feather="settings" class="w-4 h-4"></i>
+                        </button>
+                        <button class="px-4 py-2 rounded-lg text-sm border border-gray-600 hover:bg-gray-700">
+                            <i data-feather="bar-chart-2" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                </div>
+                
+                <!-- Swing Trading Strategy -->
+                <div class="strategy-card rounded-xl p-6 fade-in-up" style="animation-delay: 0.2s;">
+                    <div class="flex items-center justify-between mb-4">
+                        <div>
+                            <h3 class="text-xl font-bold">Swing Master</h3>
+                            <p class="text-gray-400 text-sm">Multi-day trend following system</p>
+                        </div>
+                        <div class="performance-badge px-3 py-1 rounded-full text-sm">
+                            +45.3% ROI
+                        </div>
+                    </div>
+                    
+                    <div class="chart-container mb-4">
+                        <canvas id="swingChart"></canvas>
+                    </div>
+                    
+                    <div class="grid grid-cols-2 gap-4 mb-4">
+                        <div>
+                            <p class="text-gray-400 text-sm">Win Rate</p>
+                            <p class="text-lg font-bold text-green-400">71.2%</p>
+                        </div>
+                        <div>
+                            <p class="text-gray-400 text-sm">Total Trades</p>
+                            <p class="text-lg font-bold">456</p>
+                        </div>
+                        <div>
+                            <p class="text-gray-400 text-sm">Avg. Trade</p>
+                            <p class="text-lg font-bold">+87.4 pips</p>
+                        </div>
+                        <div>
+                            <p class="text-gray-400 text-sm">Max DD</p>
+                            <p class="text-lg font-bold text-red-400">-12.3%</p>
+                        </div>
+                    </div>
+                    
+                    <div class="flex space-x-2">
+                        <button class="quantum-button flex-1 py-2 rounded-lg text-sm">
+                            Activate
+                        </button>
+                        <button class="px-4 py-2 rounded-lg text-sm border border-gray-600 hover:bg-gray-700">
+                            <i data-feather="settings" class="w-4 h-4"></i>
+                        </button>
+                        <button class="px-4 py-2 rounded-lg text-sm border border-gray-600 hover:bg-gray-700">
+                            <i data-feather="bar-chart-2" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                </div>
+                
+                <!-- AI Strategy -->
+                <div class="strategy-card rounded-xl p-6 fade-in-up" style="animation-delay: 0.3s;">
+                    <div class="flex items-center justify-between mb-4">
+                        <div>
+                            <h3 class="text-xl font-bold">AI Quantum</h3>
+                            <p class="text-gray-400 text-sm">Machine learning adaptive strategy</p>
+                        </div>
+                        <div class="performance-badge px-3 py-1 rounded-full text-sm">
+                            +92.1% ROI
+                        </div>
+                    </div>
+                    
+                    <div class="chart-container mb-4">
+                        <canvas id="aiChart"></canvas>
+                    </div>
+                    
+                    <div class="grid grid-cols-2 gap-4 mb-4">
+                        <div>
+                            <p class="text-gray-400 text-sm">Win Rate</p>
+                            <p class="text-lg font-bold text-green-400">84.7%</p>
+                        </div>
+                        <div>
+                            <p class="text-gray-400 text-sm">Total Trades</p>
+                            <p class="text-lg font-bold">2,134</p>
+                        </div>
+                        <div>
+                            <p class="text-gray-400 text-sm">Avg. Trade</p>
+                            <p class="text-lg font-bold">+34.2 pips</p>
+                        </div>
+                        <div>
+                            <p class="text-gray-400 text-sm">Max DD</p>
+                            <p class="text-lg font-bold text-red-400">-6.8%</p>
+                        </div>
+                    </div>
+                    
+                    <div class="flex space-x-2">
+                        <button class="quantum-button flex-1 py-2 rounded-lg text-sm">
+                            Activate
+                        </button>
+                        <button class="px-4 py-2 rounded-lg text-sm border border-gray-600 hover:bg-gray-700">
+                            <i data-feather="settings" class="w-4 h-4"></i>
+                        </button>
+                        <button class="px-4 py-2 rounded-lg text-sm border border-gray-600 hover:bg-gray-700">
+                            <i data-feather="bar-chart-2" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Strategy Builder -->
+            <div class="trading-card rounded-xl p-6">
+                <h3 class="text-xl font-bold mb-6">Strategy Builder</h3>
+                
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <div>
+                        <h4 class="font-semibold mb-4">Indicators</h4>
+                        <div class="space-y-3">
+                            <div class="flex items-center justify-between p-3 bg-gray-800 bg-opacity-50 rounded-lg">
+                                <div class="flex items-center space-x-3">
+                                    <input type="checkbox" class="rounded" checked>
+                                    <span>Moving Average (SMA)</span>
+                                </div>
+                                <select class="bg-gray-700 border border-gray-600 rounded px-2 py-1 text-sm">
+                                    <option>20</option>
+                                    <option>50</option>
+                                    <option>100</option>
+                                    <option>200</option>
+                                </select>
+                            </div>
+                            
+                            <div class="flex items-center justify-between p-3 bg-gray-800 bg-opacity-50 rounded-lg">
+                                <div class="flex items-center space-x-3">
+                                    <input type="checkbox" class="rounded" checked>
+                                    <span>RSI</span>
+                                </div>
+                                <select class="bg-gray-700 border border-gray-600 rounded px-2 py-1 text-sm">
+                                    <option>14</option>
+                                    <option>21</option>
+                                    <option>28</option>
+                                </select>
+                            </div>
+                            
+                            <div class="flex items-center justify-between p-3 bg-gray-800 bg-opacity-50 rounded-lg">
+                                <div class="flex items-center space-x-3">
+                                    <input type="checkbox" class="rounded">
+                                    <span>MACD</span>
+                                </div>
+                                <select class="bg-gray-700 border border-gray-600 rounded px-2 py-1 text-sm">
+                                    <option>12,26,9</option>
+                                    <option>8,21,5</option>
+                                </select>
+                            </div>
+                            
+                            <div class="flex items-center justify-between p-3 bg-gray-800 bg-opacity-50 rounded-lg">
+                                <div class="flex items-center space-x-3">
+                                    <input type="checkbox" class="rounded" checked>
+                                    <span>Bollinger Bands</span>
+                                </div>
+                                <select class="bg-gray-700 border border-gray-600 rounded px-2 py-1 text-sm">
+                                    <option>20,2</option>
+                                    <option>10,1.5</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div>
+                        <h4 class="font-semibold mb-4">Risk Management</h4>
+                        <div class="space-y-4">
+                            <div>
+                                <label class="block text-sm text-gray-400 mb-2">Risk per Trade (%)</label>
+                                <input type="range" min="1" max="5" value="2" class="w-full">
+                                <div class="flex justify-between text-xs text-gray-500 mt-1">
+                                    <span>1%</span>
+                                    <span class="text-blue-400">2%</span>
+                                    <span>5%</span>
+                                </div>
+                            </div>
+                            
+                            <div>
+                                <label class="block text-sm text-gray-400 mb-2">Max Daily Loss (%)</label>
+                                <input type="range" min="5" max="20" value="10" class="w-full">
+                                <div class="flex justify-between text-xs text-gray-500 mt-1">
+                                    <span>5%</span>
+                                    <span class="text-blue-400">10%</span>
+                                    <span>20%</span>
+                                </div>
+                            </div>
+                            
+                            <div>
+                                <label class="block text-sm text-gray-400 mb-2">Reward:Risk Ratio</label>
+                                <select class="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2">
+                                    <option>1:1</option>
+                                    <option>1.5:1</option>
+                                    <option>2:1</option>
+                                    <option>3:1</option>
+                                </select>
+                            </div>
+                            
+                            <div class="flex items-center space-x-2">
+                                <input type="checkbox" class="rounded" checked>
+                                <span class="text-sm">Use Trailing Stop</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="mt-6 flex justify-end space-x-3">
+                    <button class="px-6 py-2 rounded-lg border border-gray-600 hover:bg-gray-700">
+                        Backtest
+                    </button>
+                    <button class="quantum-button px-6 py-2 rounded-lg">
+                        Save Strategy
+                    </button>
+                </div>
+            </div>
+        </main>
+    </div>
+    
+    <script>
+        // Initialize charts
+        const chartOptions = {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    display: false
+                }
+            },
+            scales: {
+                x: {
+                    display: false
+                },
+                y: {
+                    display: false
+                }
+            }
+        };
+        
+        // Scalping Chart
+        const scalpingCtx = document.getElementById('scalpingChart').getContext('2d');
+        new Chart(scalpingCtx, {
+            type: 'line',
+            data: {
+                labels: Array.from({length: 30}, (_, i) => i),
+                datasets: [{
+                    data: Array.from({length: 30}, () => Math.random() * 50 + 50),
+                    borderColor: '#10b981',
+                    backgroundColor: 'rgba(16, 185, 129, 0.1)',
+                    tension: 0.4,
+                    fill: true
+                }]
+            },
+            options: chartOptions
+        });
+        
+        // Day Trading Chart
+        const dayTradingCtx = document.getElementById('dayTradingChart').getContext('2d');
+        new Chart(dayTradingCtx, {
+            type: 'line',
+            data: {
+                labels: Array.from({length: 30}, (_, i) => i),
+                datasets: [{
+                    data: Array.from({length: 30}, () => Math.random() * 40 + 40),
+                    borderColor: '#3b82f6',
+                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                    tension: 0.4,
+                    fill: true
+                }]
+            },
+            options: chartOptions
+        });
+        
+        // Swing Chart
+        const swingCtx = document.getElementById('swingChart').getContext('2d');
+        new Chart(swingCtx, {
+            type: 'line',
+            data: {
+                labels: Array.from({length: 30}, (_, i) => i),
+                datasets: [{
+                    data: Array.from({length: 30}, () => Math.random() * 30 + 30),
+                    borderColor: '#8b5cf6',
+                    backgroundColor: 'rgba(139, 92, 246, 0.1)',
+                    tension: 0.4,
+                    fill: true
+                }]
+            },
+            options: chartOptions
+        });
+        
+        // AI Chart
+        const aiCtx = document.getElementById('aiChart').getContext('2d');
+        new Chart(aiCtx, {
+            type: 'line',
+            data: {
+                labels: Array.from({length: 30}, (_, i) => i),
+                datasets: [{
+                    data: Array.from({length: 30}, () => Math.random() * 60 + 60),
+                    borderColor: '#f59e0b',
+                    backgroundColor: 'rgba(245, 158, 11, 0.1)',
+                    tension: 0.4,
+                    fill: true
+                }]
+            },
+            options: chartOptions
+        });
+        
+        // Animate strategy cards
+        anime({
+            targets: '.strategy-card',
+            opacity: [0, 1],
+            translateY: [30, 0],
+            delay: anime.stagger(100),
+            duration: 800,
+            easing: 'easeOutQuad'
+        });
+        
+        // Add hover effects
+        document.querySelectorAll('.strategy-card').forEach(card => {
+            card.addEventListener('mouseenter', function() {
+                anime({
+                    targets: this,
+                    scale: 1.02,
+                    duration: 300,
+                    easing: 'easeOutQuad'
+                });
+            });
+            
+            card.addEventListener('mouseleave', function() {
+                anime({
+                    targets: this,
+                    scale: 1,
+                    duration: 300,
+                    easing: 'easeOutQuad'
+                });
+            });
+        });
+        
+        // Initialize Feather icons
+        feather.replace();
+    </script>
+</body>
+</html>