Hugging Face's logo

Spaces:
jsonet
/
quantumtrade-pro
Running

App Files Community
jsonet commited on
Commit
910cf83
·
verified ·
1 Parent(s): 3a36075

Desarrolle e implemente completamente una interfaz de usuario y experiencia UX/UI de vanguardia y futurista de máximo rendimiento, 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:

Browse files

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 ExternalServ

Files changed (3) hide show
  1. README.md +8 -5
  2. index.html +420 -18
  3. signals.html +409 -0
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Quantumtrade Pro
3
- emoji: 📊
4
- colorFrom: pink
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: QuantumTrade Pro
3
+ colorFrom: red
4
+ colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,421 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>QuantumTrade Pro - Futuristic Trading Platform</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Exo+2:wght@300;400;500;600&display=swap');
14
+ body {
15
+ font-family: 'Exo 2', sans-serif;
16
+ background-color: #0f172a;
17
+ color: #e2e8f0;
18
+ }
19
+ .orbitron {
20
+ font-family: 'Orbitron', sans-serif;
21
+ }
22
+ .glass-effect {
23
+ background: rgba(30, 41, 59, 0.6);
24
+ backdrop-filter: blur(12px);
25
+ -webkit-backdrop-filter: blur(12px);
26
+ border: 1px solid rgba(148, 163, 184, 0.2);
27
+ }
28
+ .neon-border {
29
+ box-shadow: 0 0 15px rgba(56, 189, 248, 0.5);
30
+ }
31
+ .pulse {
32
+ animation: pulse 2s infinite;
33
+ }
34
+ @keyframes pulse {
35
+ 0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.7); }
36
+ 70% { box-shadow: 0 0 0 10px rgba(56, 189, 248, 0); }
37
+ 100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
38
+ }
39
+ .market-up {
40
+ color: #4ade80;
41
+ }
42
+ .market-down {
43
+ color: #f87171;
44
+ }
45
+ .grid-pattern {
46
+ background-image:
47
+ linear-gradient(rgba(148, 163, 184, 0.1) 1px, transparent 1px),
48
+ linear-gradient(90deg, rgba(148, 163, 184, 0.1) 1px, transparent 1px);
49
+ background-size: 20px 20px;
50
+ }
51
+ </style>
52
+ </head>
53
+ <body class="min-h-screen grid-pattern">
54
+ <!-- Background Animation -->
55
+ <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
56
+
57
+ <!-- Main Content -->
58
+ <div class="relative z-10 min-h-screen">
59
+ <!-- Header -->
60
+ <header class="glass-effect border-b border-slate-700">
61
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
62
+ <div class="flex items-center space-x-2">
63
+ <div class="w-10 h-10 rounded-full bg-cyan-500 flex items-center justify-center">
64
+ <i data-feather="activity" class="text-white"></i>
65
+ </div>
66
+ <h1 class="orbitron text-2xl font-bold text-cyan-400">QuantumTrade<span class="text-white">Pro</span></h1>
67
+ </div>
68
+
69
+ <nav class="hidden md:flex space-x-8">
70
+ <a href="index.html" class="text-cyan-400 border-b-2 border-cyan-400 pb-1">Dashboard</a>
71
+ <a href="signals.html" class="text-slate-300 hover:text-cyan-300 transition">Signals</a>
72
+ <a href="strategies.html" class="text-slate-300 hover:text-cyan-300 transition">Strategies</a>
73
+ <a href="analytics.html" class="text-slate-300 hover:text-cyan-300 transition">Analytics</a>
74
+ </nav>
75
+
76
+ <div class="flex items-center space-x-4">
77
+ <button class="p-2 rounded-full hover:bg-slate-700 transition">
78
+ <i data-feather="bell"></i>
79
+ </button>
80
+ <button class="p-2 rounded-full hover:bg-slate-700 transition">
81
+ <i data-feather="settings"></i>
82
+ </button>
83
+ <div class="w-8 h-8 rounded-full bg-gradient-to-r from-cyan-500 to-blue-500"></div>
84
+ </div>
85
+ </div>
86
+ </header>
87
+
88
+ <!-- Main Content Area -->
89
+ <main class="container mx-auto px-4 py-8">
90
+ <!-- Welcome Section -->
91
+ <section class="mb-12">
92
+ <div class="glass-effect rounded-xl p-6 neon-border">
93
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
94
+ <div>
95
+ <h2 class="orbitron text-3xl font-bold mb-2">Welcome back, Trader</h2>
96
+ <p class="text-slate-300 max-w-2xl">Your AI-powered trading system is analyzing markets in real-time. Today's opportunities await.</p>
97
+ </div>
98
+ <div class="mt-4 md:mt-0">
99
+ <div class="flex items-center space-x-4">
100
+ <div class="text-right">
101
+ <p class="text-sm text-slate-400">Portfolio Value</p>
102
+ <p class="orbitron text-2xl">$124,582.36</p>
103
+ </div>
104
+ <div class="px-3 py-1 rounded-full bg-emerald-900/30 text-emerald-400 flex items-center">
105
+ <i data-feather="trending-up" class="mr-1"></i>
106
+ <span>+2.4%</span>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </section>
113
+
114
+ <!-- Stats Grid -->
115
+ <section class="mb-12">
116
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
117
+ <!-- Card 1 -->
118
+ <div class="glass-effect rounded-xl p-6 hover:neon-border transition-all duration-300">
119
+ <div class="flex justify-between items-start">
120
+ <div>
121
+ <p class="text-slate-400 text-sm">Active Signals</p>
122
+ <p class="orbitron text-3xl mt-2">24</p>
123
+ </div>
124
+ <div class="p-3 rounded-lg bg-cyan-900/30">
125
+ <i data-feather="zap" class="text-cyan-400"></i>
126
+ </div>
127
+ </div>
128
+ <div class="mt-4 flex items-center">
129
+ <span class="text-emerald-400 text-sm">+12%</span>
130
+ <span class="text-slate-500 text-sm ml-2">from last week</span>
131
+ </div>
132
+ </div>
133
+
134
+ <!-- Card 2 -->
135
+ <div class="glass-effect rounded-xl p-6 hover:neon-border transition-all duration-300">
136
+ <div class="flex justify-between items-start">
137
+ <div>
138
+ <p class="text-slate-400 text-sm">Win Rate</p>
139
+ <p class="orbitron text-3xl mt-2">78%</p>
140
+ </div>
141
+ <div class="p-3 rounded-lg bg-emerald-900/30">
142
+ <i data-feather="target" class="text-emerald-400"></i>
143
+ </div>
144
+ </div>
145
+ <div class="mt-4 flex items-center">
146
+ <span class="text-emerald-400 text-sm">+5%</span>
147
+ <span class="text-slate-500 text-sm ml-2">from last month</span>
148
+ </div>
149
+ </div>
150
+
151
+ <!-- Card 3 -->
152
+ <div class="glass-effect rounded-xl p-6 hover:neon-border transition-all duration-300">
153
+ <div class="flex justify-between items-start">
154
+ <div>
155
+ <p class="text-slate-400 text-sm">Avg. Return</p>
156
+ <p class="orbitron text-3xl mt-2">3.2%</p>
157
+ </div>
158
+ <div class="p-3 rounded-lg bg-amber-900/30">
159
+ <i data-feather="trending-up" class="text-amber-400"></i>
160
+ </div>
161
+ </div>
162
+ <div class="mt-4 flex items-center">
163
+ <span class="text-emerald-400 text-sm">+0.8%</span>
164
+ <span class="text-slate-500 text-sm ml-2">this quarter</span>
165
+ </div>
166
+ </div>
167
+
168
+ <!-- Card 4 -->
169
+ <div class="glass-effect rounded-xl p-6 hover:neon-border transition-all duration-300">
170
+ <div class="flex justify-between items-start">
171
+ <div>
172
+ <p class="text-slate-400 text-sm">Risk Score</p>
173
+ <p class="orbitron text-3xl mt-2">Low</p>
174
+ </div>
175
+ <div class="p-3 rounded-lg bg-purple-900/30">
176
+ <i data-feather="shield" class="text-purple-400"></i>
177
+ </div>
178
+ </div>
179
+ <div class="mt-4 flex items-center">
180
+ <span class="text-emerald-400 text-sm">Optimal</span>
181
+ <span class="text-slate-500 text-sm ml-2">risk profile</span>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ </section>
186
+
187
+ <!-- Market Overview & Recent Signals -->
188
+ <section class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
189
+ <!-- Market Overview -->
190
+ <div class="glass-effect rounded-xl p-6">
191
+ <div class="flex justify-between items-center mb-6">
192
+ <h3 class="orbitron text-xl font-semibold">Market Overview</h3>
193
+ <button class="text-cyan-400 text-sm flex items-center">
194
+ View All <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i>
195
+ </button>
196
+ </div>
197
+ <div class="space-y-4">
198
+ <!-- Market Item 1 -->
199
+ <div class="flex justify-between items-center pb-4 border-b border-slate-700">
200
+ <div class="flex items-center">
201
+ <div class="w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center mr-3">
202
+ <span class="font-bold">EUR</span>
203
+ </div>
204
+ <div>
205
+ <p class="font-medium">EUR/USD</p>
206
+ <p class="text-slate-400 text-sm">Euro vs US Dollar</p>
207
+ </div>
208
+ </div>
209
+ <div class="text-right">
210
+ <p class="font-medium">1.0842</p>
211
+ <p class="market-up text-sm flex items-center justify-end">
212
+ <i data-feather="trending-up" class="w-4 h-4 mr-1"></i>
213
+ +0.32%
214
+ </p>
215
+ </div>
216
+ </div>
217
+
218
+ <!-- Market Item 2 -->
219
+ <div class="flex justify-between items-center pb-4 border-b border-slate-700">
220
+ <div class="flex items-center">
221
+ <div class="w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center mr-3">
222
+ <span class="font-bold">BTC</span>
223
+ </div>
224
+ <div>
225
+ <p class="font-medium">BTC/USD</p>
226
+ <p class="text-slate-400 text-sm">Bitcoin</p>
227
+ </div>
228
+ </div>
229
+ <div class="text-right">
230
+ <p class="font-medium">63,482.15</p>
231
+ <p class="market-up text-sm flex items-center justify-end">
232
+ <i data-feather="trending-up" class="w-4 h-4 mr-1"></i>
233
+ +2.15%
234
+ </p>
235
+ </div>
236
+ </div>
237
+
238
+ <!-- Market Item 3 -->
239
+ <div class="flex justify-between items-center pb-4 border-b border-slate-700">
240
+ <div class="flex items-center">
241
+ <div class="w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center mr-3">
242
+ <span class="font-bold">AAPL</span>
243
+ </div>
244
+ <div>
245
+ <p class="font-medium">Apple Inc</p>
246
+ <p class="text-slate-400 text-sm">NASDAQ</p>
247
+ </div>
248
+ </div>
249
+ <div class="text-right">
250
+ <p class="font-medium">192.45</p>
251
+ <p class="market-down text-sm flex items-center justify-end">
252
+ <i data-feather="trending-down" class="w-4 h-4 mr-1"></i>
253
+ -0.72%
254
+ </p>
255
+ </div>
256
+ </div>
257
+
258
+ <!-- Market Item 4 -->
259
+ <div class="flex justify-between items-center">
260
+ <div class="flex items-center">
261
+ <div class="w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center mr-3">
262
+ <span class="font-bold">GOO</span>
263
+ </div>
264
+ <div>
265
+ <p class="font-medium">Google</p>
266
+ <p class="text-slate-400 text-sm">NASDAQ</p>
267
+ </div>
268
+ </div>
269
+ <div class="text-right">
270
+ <p class="font-medium">174.28</p>
271
+ <p class="market-up text-sm flex items-center justify-end">
272
+ <i data-feather="trending-up" class="w-4 h-4 mr-1"></i>
273
+ +1.05%
274
+ </p>
275
+ </div>
276
+ </div>
277
+ </div>
278
+ </div>
279
+
280
+ <!-- Recent Signals -->
281
+ <div class="glass-effect rounded-xl p-6">
282
+ <div class="flex justify-between items-center mb-6">
283
+ <h3 class="orbitron text-xl font-semibold">Recent Signals</h3>
284
+ <button class="text-cyan-400 text-sm flex items-center">
285
+ View All <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i>
286
+ </button>
287
+ </div>
288
+ <div class="space-y-4">
289
+ <!-- Signal 1 -->
290
+ <div class="flex justify-between items-center pb-4 border-b border-slate-700">
291
+ <div class="flex items-center">
292
+ <div class="w-3 h-3 rounded-full bg-emerald-500 mr-3"></div>
293
+ <div>
294
+ <p class="font-medium">BUY Signal</p>
295
+ <p class="text-slate-400 text-sm">EUR/USD - 1.0842</p>
296
+ </div>
297
+ </div>
298
+ <div class="text-right">
299
+ <p class="text-emerald-400 font-medium">+1.24%</p>
300
+ <p class="text-slate-400 text-sm">2 min ago</p>
301
+ </div>
302
+ </div>
303
+
304
+ <!-- Signal 2 -->
305
+ <div class="flex justify-between items-center pb-4 border-b border-slate-700">
306
+ <div class="flex items-center">
307
+ <div class="w-3 h-3 rounded-full bg-rose-500 mr-3"></div>
308
+ <div>
309
+ <p class="font-medium">SELL Signal</p>
310
+ <p class="text-slate-400 text-sm">BTC/USD - 63,482</p>
311
+ </div>
312
+ </div>
313
+ <div class="text-right">
314
+ <p class="text-rose-400 font-medium">-0.85%</p>
315
+ <p class="text-slate-400 text-sm">15 min ago</p>
316
+ </div>
317
+ </div>
318
+
319
+ <!-- Signal 3 -->
320
+ <div class="flex justify-between items-center pb-4 border-b border-slate-700">
321
+ <div class="flex items-center">
322
+ <div class="w-3 h-3 rounded-full bg-emerald-500 mr-3"></div>
323
+ <div>
324
+ <p class="font-medium">BUY Signal</p>
325
+ <p class="text-slate-400 text-sm">AAPL - 192.45</p>
326
+ </div>
327
+ </div>
328
+ <div class="text-right">
329
+ <p class="text-emerald-400 font-medium">+2.10%</p>
330
+ <p class="text-slate-400 text-sm">1 hour ago</p>
331
+ </div>
332
+ </div>
333
+
334
+ <!-- Signal 4 -->
335
+ <div class="flex justify-between items-center">
336
+ <div class="flex items-center">
337
+ <div class="w-3 h-3 rounded-full bg-slate-500 mr-3"></div>
338
+ <div>
339
+ <p class="font-medium">HOLD Signal</p>
340
+ <p class="text-slate-400 text-sm">GOOGL - 174.28</p>
341
+ </div>
342
+ </div>
343
+ <div class="text-right">
344
+ <p class="text-slate-400 font-medium">0.00%</p>
345
+ <p class="text-slate-400 text-sm">3 hours ago</p>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ </section>
351
+
352
+ <!-- Performance Chart -->
353
+ <section class="glass-effect rounded-xl p-6 mb-12">
354
+ <div class="flex justify-between items-center mb-6">
355
+ <h3 class="orbitron text-xl font-semibold">Portfolio Performance</h3>
356
+ <div class="flex space-x-2">
357
+ <button class="px-3 py-1 text-sm rounded-lg bg-slate-700">1D</button>
358
+ <button class="px-3 py-1 text-sm rounded-lg">1W</button>
359
+ <button class="px-3 py-1 text-sm rounded-lg">1M</button>
360
+ <button class="px-3 py-1 text-sm rounded-lg">1Y</button>
361
+ </div>
362
+ </div>
363
+ <div class="h-64 flex items-center justify-center">
364
+ <div class="text-center">
365
+ <div class="inline-block p-4 rounded-full bg-cyan-900/20 mb-4">
366
+ <i data-feather="bar-chart-2" class="text-cyan-400 w-12 h-12"></i>
367
+ </div>
368
+ <p class="text-slate-400">Interactive performance chart would appear here</p>
369
+ <p class="text-slate-500 text-sm mt-2">Showing 24-hour performance with 5-minute intervals</p>
370
+ </div>
371
+ </div>
372
+ </section>
373
+ </main>
374
+
375
+ <!-- Footer -->
376
+ <footer class="glass-effect border-t border-slate-700 py-6">
377
+ <div class="container mx-auto px-4">
378
+ <div class="flex flex-col md:flex-row justify-between items-center">
379
+ <div class="flex items-center space-x-2 mb-4 md:mb-0">
380
+ <div class="w-8 h-8 rounded-full bg-cyan-500 flex items-center justify-center">
381
+ <i data-feather="activity" class="text-white w-4 h-4"></i>
382
+ </div>
383
+ <span class="orbitron font-bold text-cyan-400">QuantumTrade<span class="text-white">Pro</span></span>
384
+ </div>
385
+ <div class="flex space-x-6">
386
+ <a href="#" class="text-slate-400 hover:text-cyan-300 transition">Documentation</a>
387
+ <a href="#" class="text-slate-400 hover:text-cyan-300 transition">API</a>
388
+ <a href="#" class="text-slate-400 hover:text-cyan-300 transition">Support</a>
389
+ <a href="#" class="text-slate-400 hover:text-cyan-300 transition">Privacy</a>
390
+ </div>
391
+ <div class="mt-4 md:mt-0 text-slate-500 text-sm">
392
+ © 2025 QuantumTrade Pro. All rights reserved.
393
+ </div>
394
+ </div>
395
+ </div>
396
+ </footer>
397
+ </div>
398
+
399
+ <script>
400
+ // Initialize Vanta.js background
401
+ VANTA.GLOBE({
402
+ el: "#vanta-bg",
403
+ mouseControls: true,
404
+ touchControls: true,
405
+ gyroControls: false,
406
+ minHeight: 200.00,
407
+ minWidth: 200.00,
408
+ scale: 1.00,
409
+ scaleMobile: 1.00,
410
+ color: 0x38bdf8,
411
+ color2: 0x0ea5e9,
412
+ backgroundColor: 0x0f172a,
413
+ size: 1.00,
414
+ lineColor: 0x0ea5e9
415
+ });
416
+
417
+ // Initialize Feather icons
418
+ feather.replace();
419
+ </script>
420
+ </body>
421
  </html>
signals.html ADDED
@@ -0,0 +1,409 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Trading Signals | QuantumTrade Pro</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Exo+2:wght@300;400;500;600&display=swap');
13
+ body {
14
+ font-family: 'Exo 2', sans-serif;
15
+ background-color: #0f172a;
16
+ color: #e2e8f0;
17
+ }
18
+ .orbitron {
19
+ font-family: 'Orbitron', sans-serif;
20
+ }
21
+ .glass-effect {
22
+ background: rgba(30, 41, 59, 0.6);
23
+ backdrop-filter: blur(12px);
24
+ -webkit-backdrop-filter: blur(12px);
25
+ border: 1px solid rgba(148, 163, 184, 0.2);
26
+ }
27
+ .neon-border {
28
+ box-shadow: 0 0 15px rgba(56, 189, 248, 0.5);
29
+ }
30
+ .market-up {
31
+ color: #4ade80;
32
+ }
33
+ .market-down {
34
+ color: #f87171;
35
+ }
36
+ .signal-buy {
37
+ background: rgba(34, 197, 94, 0.1);
38
+ border-left: 3px solid #22c55e;
39
+ }
40
+ .signal-sell {
41
+ background: rgba(239, 68, 68, 0.1);
42
+ border-left: 3px solid #ef4444;
43
+ }
44
+ .signal-hold {
45
+ background: rgba(148, 163, 184, 0.1);
46
+ border-left: 3px solid #94a3b8;
47
+ }
48
+ .grid-pattern {
49
+ background-image:
50
+ linear-gradient(rgba(148, 163, 184, 0.1) 1px, transparent 1px),
51
+ linear-gradient(90deg, rgba(148, 163, 184, 0.1) 1px, transparent 1px);
52
+ background-size: 20px 20px;
53
+ }
54
+ </style>
55
+ </head>
56
+ <body class="min-h-screen grid-pattern">
57
+ <!-- Header -->
58
+ <header class="glass-effect border-b border-slate-700">
59
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
60
+ <div class="flex items-center space-x-2">
61
+ <div class="w-10 h-10 rounded-full bg-cyan-500 flex items-center justify-center">
62
+ <i data-feather="activity" class="text-white"></i>
63
+ </div>
64
+ <h1 class="orbitron text-2xl font-bold text-cyan-400">QuantumTrade<span class="text-white">Pro</span></h1>
65
+ </div>
66
+
67
+ <nav class="hidden md:flex space-x-8">
68
+ <a href="index.html" class="text-slate-300 hover:text-cyan-300 transition">Dashboard</a>
69
+ <a href="signals.html" class="text-cyan-400 border-b-2 border-cyan-400 pb-1">Signals</a>
70
+ <a href="strategies.html" class="text-slate-300 hover:text-cyan-300 transition">Strategies</a>
71
+ <a href="analytics.html" class="text-slate-300 hover:text-cyan-300 transition">Analytics</a>
72
+ </nav>
73
+
74
+ <div class="flex items-center space-x-4">
75
+ <button class="p-2 rounded-full hover:bg-slate-700 transition">
76
+ <i data-feather="bell"></i>
77
+ </button>
78
+ <button class="p-2 rounded-full hover:bg-slate-700 transition">
79
+ <i data-feather="settings"></i>
80
+ </button>
81
+ <div class="w-8 h-8 rounded-full bg-gradient-to-r from-cyan-500 to-blue-500"></div>
82
+ </div>
83
+ </div>
84
+ </header>
85
+
86
+ <!-- Main Content -->
87
+ <main class="container mx-auto px-4 py-8">
88
+ <!-- Page Header -->
89
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
90
+ <div>
91
+ <h1 class="orbitron text-3xl font-bold mb-2">Trading Signals</h1>
92
+ <p class="text-slate-400">Real-time signals generated by our AI algorithms</p>
93
+ </div>
94
+ <div class="mt-4 md:mt-0 flex space-x-3">
95
+ <button class="px-4 py-2 rounded-lg glass-effect hover:neon-border transition flex items-center">
96
+ <i data-feather="filter" class="w-4 h-4 mr-2"></i>
97
+ Filter
98
+ </button>
99
+ <button class="px-4 py-2 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition flex items-center">
100
+ <i data-feather="refresh-cw" class="w-4 h-4 mr-2"></i>
101
+ Refresh
102
+ </button>
103
+ </div>
104
+ </div>
105
+
106
+ <!-- Filters -->
107
+ <div class="glass-effect rounded-xl p-6 mb-8">
108
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
109
+ <div>
110
+ <label class="block text-slate-400 text-sm mb-2">Symbol</label>
111
+ <select class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500">
112
+ <option>All Symbols</option>
113
+ <option>EUR/USD</option>
114
+ <option>BTC/USD</option>
115
+ <option>AAPL</option>
116
+ <option>GOOGL</option>
117
+ </select>
118
+ </div>
119
+ <div>
120
+ <label class="block text-slate-400 text-sm mb-2">Signal Type</label>
121
+ <select class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500">
122
+ <option>All Types</option>
123
+ <option>Buy</option>
124
+ <option>Sell</option>
125
+ <option>Hold</option>
126
+ </select>
127
+ </div>
128
+ <div>
129
+ <label class="block text-slate-400 text-sm mb-2">Time Range</label>
130
+ <select class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500">
131
+ <option>Last Hour</option>
132
+ <option>Last 24 Hours</option>
133
+ <option>Last Week</option>
134
+ <option>Last Month</option>
135
+ </select>
136
+ </div>
137
+ <div>
138
+ <label class="block text-slate-400 text-sm mb-2">Status</label>
139
+ <select class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500">
140
+ <option>All Statuses</option>
141
+ <option>Active</option>
142
+ <option>Executed</option>
143
+ <option>Rejected</option>
144
+ </select>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- Signals Table -->
150
+ <div class="glass-effect rounded-xl overflow-hidden">
151
+ <div class="overflow-x-auto">
152
+ <table class="w-full">
153
+ <thead class="border-b border-slate-700">
154
+ <tr>
155
+ <th class="py-4 px-6 text-left text-slate-400 font-normal">Symbol</th>
156
+ <th class="py-4 px-6 text-left text-slate-400 font-normal">Type</th>
157
+ <th class="py-4 px-6 text-left text-slate-400 font-normal">Price</th>
158
+ <th class="py-4 px-6 text-left text-slate-400 font-normal">Strength</th>
159
+ <th class="py-4 px-6 text-left text-slate-400 font-normal">Timestamp</th>
160
+ <th class="py-4 px-6 text-left text-slate-400 font-normal">Status</th>
161
+ <th class="py-4 px-6 text-left text-slate-400 font-normal">Actions</th>
162
+ </tr>
163
+ </thead>
164
+ <tbody>
165
+ <!-- Signal Row 1 -->
166
+ <tr class="signal-buy border-b border-slate-700 hover:bg-slate-800/50 transition">
167
+ <td class="py-4 px-6">
168
+ <div class="flex items-center">
169
+ <div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center mr-3">
170
+ <span class="font-bold text-xs">EUR</span>
171
+ </div>
172
+ <div>
173
+ <p class="font-medium">EUR/USD</p>
174
+ <p class="text-slate-400 text-sm">Forex</p>
175
+ </div>
176
+ </div>
177
+ </td>
178
+ <td class="py-4 px-6">
179
+ <span class="px-2 py-1 rounded-full bg-emerald-900/30 text-emerald-400 text-xs">BUY</span>
180
+ </td>
181
+ <td class="py-4 px-6">1.0842</td>
182
+ <td class="py-4 px-6">
183
+ <div class="flex items-center">
184
+ <div class="w-24 bg-slate-700 rounded-full h-2 mr-2">
185
+ <div class="bg-emerald-500 h-2 rounded-full" style="width: 85%"></div>
186
+ </div>
187
+ <span>85%</span>
188
+ </div>
189
+ </td>
190
+ <td class="py-4 px-6">2025-04-05 14:32:18</td>
191
+ <td class="py-4 px-6">
192
+ <span class="px-2 py-1 rounded-full bg-emerald-900/30 text-emerald-400 text-xs">ACTIVE</span>
193
+ </td>
194
+ <td class="py-4 px-6">
195
+ <button class="text-cyan-400 hover:text-cyan-300 mr-3">
196
+ <i data-feather="eye" class="w-4 h-4"></i>
197
+ </button>
198
+ <button class="text-amber-400 hover:text-amber-300">
199
+ <i data-feather="play" class="w-4 h-4"></i>
200
+ </button>
201
+ </td>
202
+ </tr>
203
+
204
+ <!-- Signal Row 2 -->
205
+ <tr class="signal-sell border-b border-slate-700 hover:bg-slate-800/50 transition">
206
+ <td class="py-4 px-6">
207
+ <div class="flex items-center">
208
+ <div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center mr-3">
209
+ <span class="font-bold text-xs">BTC</span>
210
+ </div>
211
+ <div>
212
+ <p class="font-medium">BTC/USD</p>
213
+ <p class="text-slate-400 text-sm">Crypto</p>
214
+ </div>
215
+ </div>
216
+ </td>
217
+ <td class="py-4 px-6">
218
+ <span class="px-2 py-1 rounded-full bg-rose-900/30 text-rose-400 text-xs">SELL</span>
219
+ </td>
220
+ <td class="py-4 px-6">63,482.15</td>
221
+ <td class="py-4 px-6">
222
+ <div class="flex items-center">
223
+ <div class="w-24 bg-slate-700 rounded-full h-2 mr-2">
224
+ <div class="bg-rose-500 h-2 rounded-full" style="width: 72%"></div>
225
+ </div>
226
+ <span>72%</span>
227
+ </div>
228
+ </td>
229
+ <td class="py-4 px-6">2025-04-05 14:15:42</td>
230
+ <td class="py-4 px-6">
231
+ <span class="px-2 py-1 rounded-full bg-slate-700 text-slate-300 text-xs">EXECUTED</span>
232
+ </td>
233
+ <td class="py-4 px-6">
234
+ <button class="text-cyan-400 hover:text-cyan-300 mr-3">
235
+ <i data-feather="eye" class="w-4 h-4"></i>
236
+ </button>
237
+ <button class="text-slate-500 cursor-not-allowed">
238
+ <i data-feather="play" class="w-4 h-4"></i>
239
+ </button>
240
+ </td>
241
+ </tr>
242
+
243
+ <!-- Signal Row 3 -->
244
+ <tr class="signal-buy border-b border-slate-700 hover:bg-slate-800/50 transition">
245
+ <td class="py-4 px-6">
246
+ <div class="flex items-center">
247
+ <div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center mr-3">
248
+ <span class="font-bold text-xs">AAPL</span>
249
+ </div>
250
+ <div>
251
+ <p class="font-medium">Apple Inc</p>
252
+ <p class="text-slate-400 text-sm">Stock</p>
253
+ </div>
254
+ </div>
255
+ </td>
256
+ <td class="py-4 px-6">
257
+ <span class="px-2 py-1 rounded-full bg-emerald-900/30 text-emerald-400 text-xs">BUY</span>
258
+ </td>
259
+ <td class="py-4 px-6">192.45</td>
260
+ <td class="py-4 px-6">
261
+ <div class="flex items-center">
262
+ <div class="w-24 bg-slate-700 rounded-full h-2 mr-2">
263
+ <div class="bg-emerald-500 h-2 rounded-full" style="width: 91%"></div>
264
+ </div>
265
+ <span>91%</span>
266
+ </div>
267
+ </td>
268
+ <td class="py-4 px-6">2025-04-05 13:48:33</td>
269
+ <td class="py-4 px-6">
270
+ <span class="px-2 py-1 rounded-full bg-emerald-900/30 text-emerald-400 text-xs">ACTIVE</span>
271
+ </td>
272
+ <td class="py-4 px-6">
273
+ <button class="text-cyan-400 hover:text-cyan-300 mr-3">
274
+ <i data-feather="eye" class="w-4 h-4"></i>
275
+ </button>
276
+ <button class="text-amber-400 hover:text-amber-300">
277
+ <i data-feather="play" class="w-4 h-4"></i>
278
+ </button>
279
+ </td>
280
+ </tr>
281
+
282
+ <!-- Signal Row 4 -->
283
+ <tr class="signal-hold border-b border-slate-700 hover:bg-slate-800/50 transition">
284
+ <td class="py-4 px-6">
285
+ <div class="flex items-center">
286
+ <div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center mr-3">
287
+ <span class="font-bold text-xs">GOO</span>
288
+ </div>
289
+ <div>
290
+ <p class="font-medium">Google</p>
291
+ <p class="text-slate-400 text-sm">Stock</p>
292
+ </div>
293
+ </div>
294
+ </td>
295
+ <td class="py-4 px-6">
296
+ <span class="px-2 py-1 rounded-full bg-slate-700 text-slate-300 text-xs">HOLD</span>
297
+ </td>
298
+ <td class="py-4 px-6">174.28</td>
299
+ <td class="py-4 px-6">
300
+ <div class="flex items-center">
301
+ <div class="w-24 bg-slate-700 rounded-full h-2 mr-2">
302
+ <div class="bg-slate-500 h-2 rounded-full" style="width: 45%"></div>
303
+ </div>
304
+ <span>45%</span>
305
+ </div>
306
+ </td>
307
+ <td class="py-4 px-6">2025-04-05 12:21:07</td>
308
+ <td class="py-4 px-6">
309
+ <span class="px-2 py-1 rounded-full bg-slate-700 text-slate-300 text-xs">REJECTED</span>
310
+ </td>
311
+ <td class="py-4 px-6">
312
+ <button class="text-cyan-400 hover:text-cyan-300 mr-3">
313
+ <i data-feather="eye" class="w-4 h-4"></i>
314
+ </button>
315
+ <button class="text-slate-500 cursor-not-allowed">
316
+ <i data-feather="play" class="w-4 h-4"></i>
317
+ </button>
318
+ </td>
319
+ </tr>
320
+
321
+ <!-- Signal Row 5 -->
322
+ <tr class="signal-buy hover:bg-slate-800/50 transition">
323
+ <td class="py-4 px-6">
324
+ <div class="flex items-center">
325
+ <div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center mr-3">
326
+ <span class="font-bold text-xs">ETH</span>
327
+ </div>
328
+ <div>
329
+ <p class="font-medium">ETH/USD</p>
330
+ <p class="text-slate-400 text-sm">Crypto</p>
331
+ </div>
332
+ </div>
333
+ </td>
334
+ <td class="py-4 px-6">
335
+ <span class="px-2 py-1 rounded-full bg-emerald-900/30 text-emerald-400 text-xs">BUY</span>
336
+ </td>
337
+ <td class="py-4 px-6">3,421.67</td>
338
+ <td class="py-4 px-6">
339
+ <div class="flex items-center">
340
+ <div class="w-24 bg-slate-700 rounded-full h-2 mr-2">
341
+ <div class="bg-emerald-500 h-2 rounded-full" style="width: 78%"></div>
342
+ </div>
343
+ <span>78%</span>
344
+ </div>
345
+ </td>
346
+ <td class="py-4 px-6">2025-04-05 11:56:44</td>
347
+ <td class="py-4 px-6">
348
+ <span class="px-2 py-1 rounded-full bg-emerald-900/30 text-emerald-400 text-xs">ACTIVE</span>
349
+ </td>
350
+ <td class="py-4 px-6">
351
+ <button class="text-cyan-400 hover:text-cyan-300 mr-3">
352
+ <i data-feather="eye" class="w-4 h-4"></i>
353
+ </button>
354
+ <button class="text-amber-400 hover:text-amber-300">
355
+ <i data-feather="play" class="w-4 h-4"></i>
356
+ </button>
357
+ </td>
358
+ </tr>
359
+ </tbody>
360
+ </table>
361
+ </div>
362
+
363
+ <!-- Pagination -->
364
+ <div class="border-t border-slate-700 px-6 py-4 flex justify-between items-center">
365
+ <p class="text-slate-400">Showing 1 to 5 of 24 signals</p>
366
+ <div class="flex space-x-2">
367
+ <button class="w-8 h-8 rounded-lg glass-effect flex items-center justify-center">
368
+ <i data-feather="chevron-left" class="w-4 h-4"></i>
369
+ </button>
370
+ <button class="w-8 h-8 rounded-lg bg-cyan-600 flex items-center justify-center">1</button>
371
+ <button class="w-8 h-8 rounded-lg glass-effect flex items-center justify-center">2</button>
372
+ <button class="w-8 h-8 rounded-lg glass-effect flex items-center justify-center">3</button>
373
+ <button class="w-8 h-8 rounded-lg glass-effect flex items-center justify-center">
374
+ <i data-feather="chevron-right" class="w-4 h-4"></i>
375
+ </button>
376
+ </div>
377
+ </div>
378
+ </div>
379
+ </main>
380
+
381
+ <!-- Footer -->
382
+ <footer class="glass-effect border-t border-slate-700 py-6 mt-12">
383
+ <div class="container mx-auto px-4">
384
+ <div class="flex flex-col md:flex-row justify-between items-center">
385
+ <div class="flex items-center space-x-2 mb-4 md:mb-0">
386
+ <div class="w-8 h-8 rounded-full bg-cyan-500 flex items-center justify-center">
387
+ <i data-feather="activity" class="text-white w-4 h-4"></i>
388
+ </div>
389
+ <span class="orbitron font-bold text-cyan-400">QuantumTrade<span class="text-white">Pro</span></span>
390
+ </div>
391
+ <div class="flex space-x-6">
392
+ <a href="#" class="text-slate-400 hover:text-cyan-300 transition">Documentation</a>
393
+ <a href="#" class="text-slate-400 hover:text-cyan-300 transition">API</a>
394
+ <a href="#" class="text-slate-400 hover:text-cyan-300 transition">Support</a>
395
+ <a href="#" class="text-slate-400 hover:text-cyan-300 transition">Privacy</a>
396
+ </div>
397
+ <div class="mt-4 md:mt-0 text-slate-500 text-sm">
398
+ © 2025 QuantumTrade Pro. All rights reserved.
399
+ </div>
400
+ </div>
401
+ </div>
402
+ </footer>
403
+
404
+ <script>
405
+ // Initialize Feather icons
406
+ feather.replace();
407
+ </script>
408
+ </body>
409
+ </html>