# DESCRIPCIÓN HIPER-PRECISA DE LA HYPER UI CON TEMA CYBERPUNK IMPACTANTE

## 1. CONCEPTO GENERAL Y ARQUITECTURA VISUAL

La Hyper UI es una interfaz de usuario de vanguardia que combina la estética futurista del cyberpunk con la funcionalidad avanzada necesaria para el trading algorítmico financiero. Diseñada para operadores de trading y cuantitativos experimentados, la interfaz presenta una experiencia inmersiva con una paleta de colores predominantemente oscura, contrastes vibrantes y efectos visuales que evocan la estética de ciencia ficción contemporánea, pero con una funcionalidad práctica y orientada a resultados.

La arquitectura visual se estructura en tres capas principales:
- **Capa de fondo (Cyberpunk Base):** Fundo negro profundo con patrones de circuitos luminosos en tonos azules y morados
- **Capa intermedia (Data Visualization):** Elementos visuales de datos en tonos cian y verde neón con efectos de brillo
- **Capa frontal (Interacción):** Componentes interactivos en rojo y amarillo con efectos de destello y animaciones suaves

## 2. PALETA DE COLORES Y TIPOGRAFÍA

### Paleta de Colores
- **Fondo Principal:** `#000000` (Negro profundo) con un ligero gradiente de `#0a0a0a` a `#000000`
- **Principales:**
- `#00f0ff` (Cian neón) para indicadores y gráficos principales
- `#ff00ff` (Morado neón) para señales de alta prioridad
- `#00ff00` (Verde neón) para confirmaciones y operaciones exitosas
- **Secundarios:**
- `#ff4500` (Naranja cálido) para alertas críticas
- `#4a90e2` (Azul claro) para información secundaria
- `#e6e6fa` (Lavanda suave) para textos en modo claro
- **Efectos de Brillo:**
- `0 0 20px rgba(0, 240, 255, 0.3)` para elementos destacados
- `0 0 10px rgba(255, 0, 255, 0.2)` para líneas de conexión
- `0 0 5px rgba(0, 255, 0, 0.1)` para áreas de interacción

### Tipoografía
- **Títulos:** `Exo 2.0 Bold` (600) - Estilo futurista con bordes luminosos
- **Subtítulos:** `Orbitron` (500) - Tipo de letra espacial con efecto de brillo
- **Texto Normal:** `Space Mono` (Regular) - Fuente monoespaciada para código y datos técnicos
- **Numeros:** `Fira Code` (Bold) - Optimizado para lectura de valores numéricos en gráficos
- **Todos los textos** tendrán un ligero efecto de sombra externa: `text-shadow: 0 0 3px rgba(0, 255, 255, 0.7)`

## 3. COMPONENTES PRINCIPALES DE LA INTERFAZ

### 3.1 Estructura de Diseño (Grid System)
La interfaz utiliza un sistema de cuadrícula basado en `CSS Grid` con 12 columnas y 12 filas, configurado para una resolución mínima de 1200px:

```
|-----------------|-----------------|-----------------|
| MAIN | ASSISTANT | CONTROLS |
|-----------------|-----------------|-----------------|
| CHART | CHART | CHART |
|-----------------|-----------------|-----------------|
| INDICATORS | MCP SUGGESTIONS | TRADE STATUS |
|-----------------|-----------------|-----------------|
```

### 3.2 Componentes Visuales Específicos

#### 3.2.1 Panel Principal de Trading (70% de altura)
- **Fondo:** Textura de circuitos integrados en tono azul cian con animación de luz parpadeante lenta (1Hz)
- **Gráfico de Precios:**
- Tipo: Candles con efecto de "neón" (bordes luminosos en cian)
- Velas: 3D con sombras suaves, efecto de brillo en los máximos y mínimos
- Rangos de tiempo: Mostrados como "tick", "1m", "5m", "15m", "1h", "4h" en la parte superior con indicadores de horizonte activo (resaltado en morado)
- Ejes: Ejes con líneas de cuadrícula en tono azul claro, con valores numéricos en texto blanco con sombra
- Zoom: Botones de zoom en la esquina superior derecha con iconos de lupa y flechas
- Anotaciones: Líneas de tendencia con efecto de brillo y texto en cian

- **Indicadores Técnicos:**
- Disposición en cuadrícula de 3x3 con bordes luminosos
- Cada indicador muestra:
- Nombre en `Orbitron Bold` (12px)
- Valor actual en `Fira Code Bold` (16px)
- Tendencia (flecha ascendente/descendente) en cian/rojo
- Alpha Causal (indicador en forma de "A" con color dependiendo del valor: verde > 0.85, amarillo 0.75-0.85, rojo < 0.75)
- Los indicadores críticos (como SMC_H_1.20) tienen un borde pulsante en morado

#### 3.2.2 Panel de Asistencia MCP (30% de altura)
- **Fondo:** Textura de código binario en tono morado oscuro con efecto de desplazamiento lento (0.5px/pixel)
- **Encabezado:** "Asistente MCP" con logotipo de MCP en cian neón
- **Panel de Mensajes:**
- Mensajes de MCP con efecto de "transmisión de datos" (aparecen como si estuvieran siendo transmitidos por un canal de datos)
- Cada mensaje tiene:
- Nombre del MCP Server (Research, Trading, Risk, etc.) en color correspondiente
- Contenido del mensaje con tipografía espacial
- Icono de "pulsación" en el lado derecho (indicando actividad)
- Botón de "Enviar" en la parte inferior con efecto de "envío de datos" (animación de onda)

- **Panel de Sugerencias:**
- Sección de sugerencias con icono de "recomendación" (estrella de 5 puntas en cian)
- Cada sugerencia muestra:
- Título en `Orbitron Bold` (14px)
- Descripción en `Space Mono` (12px)
- Nivel de confianza (indicador de barra de progreso en cian)
- Botón de "Aceptar" en la parte derecha con efecto de brillo al pasar el mouse

#### 3.2.3 Controles de Operación (Bajo la interfaz principal)
- **Fondo:** Gradiente de negro a azul oscuro
- **Botones de Operación:**
- "Comprar" y "Vender" en forma de botones 3D con efecto de brillo
- "Comprar" en tono verde neón con borde amarillo
- "Vender" en tono rojo neón con borde naranja
- Ambos botones tienen un efecto de "pulsación" al hacer clic
- **Panel de Configuración:**
- Sección de configuración de símbolo y timeframe con iconos de moneda y reloj
- Controles deslizantes para ajustar la cantidad de operación con efecto de "deslizamiento" en la barra
- Botón de "Actualizar datos" con animación de carga (espiral de luz cian)

### 3.3 Elementos Específicos del Tema Cyberpunk

#### 3.3.1 Efectos Visuales y Animaciones
- **Animación de Fondo:** Efecto de "luces parpadeantes" en la parte superior de la pantalla (simulando una ciudad futurista) con colores cian, morado y azul
- **Transiciones de Página:** Efecto de "deslizamiento de datos" (como si se estuviera moviendo a través de una matriz de datos) con transparencia gradual
- **Efectos de Interacción:**
- Al pasar el mouse sobre elementos interactivos: efecto de "brillo" en el borde (1px de luz cian)
- Al hacer clic: animación de onda expansiva desde el punto de clic (en tono cian)
- Al seleccionar una opción: efecto de "pulsación" con sonido de retro (simulando un sistema de retroalimentación)

#### 3.3.2 Elementos de Seguridad y Autenticación
- **Indicador de Seguridad:** En la esquina superior derecha, un icono de "escudo" con efecto de brillo (en tono verde neón)
- **Estado de Autenticación:** Mostrando "Autenticado" con un icono de llave en cian, y un temporizador de 30 segundos para la renovación de tokens
- **Alerta de Seguridad:** En caso de detectar una posible brecha, un efecto de "pantalla roja" con texto en blanco que dice "Sistema de seguridad activado"

#### 3.3.3 Componentes de Observabilidad
- **Panel de Observabilidad:** En la esquina inferior derecha, un panel semi-transparente con:
- Gráfico de latencia en tiempo real (en cian)
- Indicador de "Carga del Sistema" (en verde)
- Mensaje de "Sistema operativo en modo de alta seguridad" (en morado)
- Botón de "Ver más detalles" con efecto de brillo

## 4. INTERACCIONES Y ANIMACIONES

### 4.1 Animaciones de Carga
- **Carga de Datos:** Animación de "flujo de datos" con líneas luminosas que se desplazan hacia el centro de la pantalla (en tono cian)
- **Carga de Indicadores:** Cada indicador se carga con una animación de "despliegue" desde el centro (en tono verde)
- **Carga de Gráfico:** Efecto de "construcción" del gráfico con líneas que se dibujan en tiempo real (en tono azul)

### 4.2 Interacciones con el Context Graph
- **Propagación de Contexto:** Al actualizar datos, una onda luminosa (en cian) se expande desde el punto de actualización a través de la interfaz, indicando la propagación del contexto
- **Visualización de Relaciones:** Cuando se selecciona un indicador, las relaciones con otros indicadores se muestran con líneas luminosas (en morado) que conectan los elementos relevantes
- **Sistema de Contexto Global:** Un panel lateral transparente muestra el estado actual del contexto (en tono azul claro) con una lista de nodos y sus relaciones

### 4.3 Interacción con el MCP Servers
- **MCP Assistant:** Al hacer clic en el panel de asistencia MCP, se abre un panel emergente con un efecto de "despliegue" (como si estuviera saliendo de una matriz)
- **Sugerencias de Trading:** Al pasar el mouse sobre una sugerencia, un efecto de "brillo" resalta la sugerencia y muestra un tooltip con información adicional
- **Confirmación de Operaciones:** Al confirmar una operación, un efecto de "confirmación de datos" (onda expansiva en verde) se muestra en la pantalla

## 5. DISEÑO RESPONSIVE Y ADAPTABILIDAD

### 5.1 Adaptación para Dispositivos Móviles
- **Modo Mobile:** La interfaz se adapta a una vista de dos columnas con:
- Gráfico principal en la parte superior (ligeramente más grande)
- Panel de asistencia MCP en la parte inferior izquierda
- Controles de operación en la parte inferior derecha
- **Interacciones Móviles:**
- Botones de operación en formato de "pulsación" con efecto de brillo
- Gestos táctiles para navegar entre horizontes temporales (deslizar hacia la izquierda/derecha)
- Botón de "menú" en la esquina superior izquierda para acceder a opciones adicionales

### 5.2 Adaptación para Pantallas Grandes
- **Modo Desktop:** La interfaz utiliza el espacio completo con:
- Gráfico principal en el centro (70% de la altura)
- Panel de asistencia MCP a la derecha (30% de la altura)
- Controles de operación en la parte inferior
- **Modo Multi-Pantalla:** La interfaz se divide en múltiples paneles para diferentes tareas:
- Pantalla 1: Gráfico principal
- Pantalla 2

index.html

@@ -1,19 +1,239 @@
+
 <!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>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>QuantFlow-X v4.0 Trading Interface</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Exo+2:wght@600;700&family=Orbitron:wght@500;700&family=Space+Mono&family=Fira+Code:wght@400;700&display=swap">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        :root {
+            --bg-primary: #000000;
+            --bg-secondary: #0a0a0a;
+            --text-primary: #ffffff;
+            --text-secondary: #e6e6fa;
+            --cyan: #00f0ff;
+            --magenta: #ff00ff;
+            --green: #00ff00;
+            --orange: #ff4500;
+            --blue: #4a90e2;
+            --neon-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
+            --pulse-effect: 0 0 5px rgba(0, 255, 0, 0.1);
+        }
+        
+        body {
+            background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary)) fixed;
+            color: var(--text-primary);
+            font-family: 'Space Mono', monospace;
+            overflow-x: hidden;
+        }
+        
+        .chart-container {
+            background: rgba(0, 0, 0, 0.6);
+            border: 1px solid rgba(0, 240, 255, 0.2);
+            border-radius: 8px;
+            padding: 1rem;
+            box-shadow: var(--neon-shadow);
+            height: 500px;
+        }
+        
+        .mcp-assistant {
+            background: rgba(10, 10, 10, 0.8);
+            border: 1px solid rgba(255, 0, 255, 0.2);
+            border-radius: 8px;
+            padding: 1rem;
+            margin-bottom: 1rem;
+            box-shadow: 0 0 10px rgba(255, 0, 255, 0.2);
+        }
+        
+        .trade-controls {
+            background: rgba(0, 0, 0, 0.6);
+            border: 1px solid rgba(0, 240, 255, 0.2);
+            border-radius: 8px;
+            padding: 1rem;
+            box-shadow: var(--neon-shadow);
+        }
+        
+        .btn-buy {
+            background: linear-gradient(45deg, #00c853, #00ff00);
+            border: none;
+            color: white;
+            padding: 0.5rem 1rem;
+            border-radius: 4px;
+            transition: all 0.2s ease;
+            box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
+        }
+        
+        .btn-buy:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
+        }
+        
+        .btn-sell {
+            background: linear-gradient(45deg, #ff1744, #ff4500);
+            border: none;
+            color: white;
+            padding: 0.5rem 1rem;
+            border-radius: 4px;
+            transition: all 0.2s ease;
+            box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
+        }
+        
+        .btn-sell:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
+        }
+        
+        .indicator-card {
+            background: rgba(20, 20, 20, 0.6);
+            border: 1px solid rgba(0, 240, 255, 0.2);
+            border-radius: 8px;
+            padding: 0.75rem;
+            margin-bottom: 0.5rem;
+            transition: all 0.2s ease;
+            box-shadow: var(--neon-shadow);
+        }
+    </style>
+</head>
+<body class="min-h-screen p-4">
+    <div class="max-w-7xl mx-auto grid grid-cols-12 gap-4">
+        <!-- Main Trading Panel -->
+        <div class="col-span-8">
+            <div class="flex justify-between items-center mb-2">
+                <h1 class="text-3xl font-bold font-exo text-cyan-500" style="text-shadow: 0 0 10px rgba(0, 240, 255, 0.7);">
+                    QuantFlow-X v4.0
+                </h1>
+                <div class="flex space-x-2">
+                    <span class="px-3 py-1 rounded-full bg-blue-900/50 text-blue-300 text-sm flex items-center">
+                        <span class="w-2 h-2 rounded-full bg-green-500 mr-2 animate-pulse"></span>
+                        LIVE Trading
+                    </span>
+                    <span class="px-3 py-1 rounded-full bg-purple-900/50 text-purple-300 text-sm">
+                        BTC/USDT
+                    </span>
+                </div>
+            </div>
+
+            <!-- Chart Area -->
+            <div class="chart-container">
+                <div class="h-full flex items-center justify-center text-gray-500">
+                    [PRICE CHART VISUALIZATION AREA]
+                    <div class="absolute inset-0 grid grid-cols-8 grid-rows-6 pointer-events-none">
+                        <!-- Grid pattern for chart -->
+                    </div>
+                </div>
+            </div>
+
+            <!-- Indicators Grid -->
+            <div class="grid grid-cols-3 gap-4 mt-4">
+                <div class="indicator-card">
+                    <div class="flex justify-between">
+                        <span class="text-xs text-cyan-300">RSI_14</span>
+                        <span class="alpha-indicator high"></span>
+                    </div>
+                    <div class="text-lg font-fira font-bold text-green-400">67.32</div>
+                    <div class="text-xs text-gray-400">+2.1% (1h)</div>
+                </div>
+                <div class="indicator-card">
+                    <div class="flex justify-between">
+                        <span class="text-xs text-cyan-300">MACD</span>
+                        <span class="alpha-indicator medium"></span>
+                    </div>
+                    <div class="text-lg font-fira font-bold text-orange-400">12.45</div>
+                    <div class="text-xs text-gray-400">-0.8% (1h)</div>
+                </div>
+                <div class="indicator-card">
+                    <div class="flex justify-between">
+                        <span class="text-xs text-cyan-300">SMC_H_1.20</span>
+                        <span class="alpha-indicator high"></span>
+                    </div>
+                    <div class="text-lg font-fira font-bold text-green-400">0.92</div>
+                    <div class="text-xs text-gray-400">Strong Buy</div>
+                </div>
+            </div>
+        </div>
+
+        <!-- MCP Assistant Panel -->
+        <div class="col-span-4">
+            <div class="mcp-assistant">
+                <h2 class="text-xl font-orbitron text-magenta-500 mb-4 flex items-center">
+                    <span style="text-shadow: 0 0 5px rgba(255, 0, 255, 0.7);">MCP Assistant</span>
+                    <span class="ml-auto text-sm text-gray-400">v4.2.7</span>
+                </h2>
+                
+                <div class="space-y-3">
+                    <div class="bg-gray-900/50 p-3 rounded border-l-2 border-cyan-500">
+                        <div class="flex items-start">
+                            <span class="mcp-server-badge mcp-research-badge">Research</span>
+                            <span class="text-xs text-gray-400 ml-auto">12:34:45</span>
+                        </div>
+                        <p class="mt-1 text-sm">BTC showing strong accumulation pattern. Alpha confidence 0.89.</p>
+                    </div>
+                    
+                    <div class="bg-gray-900/50 p-3 rounded border-l-2 border-magenta-500">
+                        <div class="flex items-start">
+                            <span class="mcp-server-badge mcp-trading-badge">Trading</span>
+                            <span class="text-xs text-gray-400 ml-auto">12:35:22</span>
+                        </div>
+                        <p class="mt-1 text-sm">Liquidity detected at $42,300 - potential reversal zone.</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Trading Controls -->
+            <div class="trade-controls">
+                <div class="grid grid-cols-2 gap-4">
+                    <button class="btn-buy font-bold">BUY</button>
+                    <button class="btn-sell font-bold">SELL</button>
+                </div>
+                
+                <div class="mt-4 space-y-3">
+                    <div>
+                        <label class="block text-xs text-cyan-300 mb-1">Amount</label>
+                        <input type="range" class="w-full h-1 bg-gray-700 rounded-lg appearance-none cursor-pointer">
+                    </div>
+                    <div>
+                        <label class="block text-xs text-cyan-300 mb-1">Leverage</label>
+                        <div class="flex space-x-2">
+                            <button class="px-2 py-1 text-xs rounded bg-gray-800 border border-cyan-500/20">1x</button>
+                            <button class="px-2 py-1 text-xs rounded bg-cyan-500/10 border border-cyan-500">5x</button>
+                            <button class="px-2 py-1 text-xs rounded bg-gray-800 border border-cyan-500/20">10x</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- System Status -->
+            <div class="mt-4 text-xs text-gray-400 flex justify-between">
+                <span>System: <span class="text-green-400">Optimal</span></span>
+                <span>Latency: <span class="text-cyan-400">14ms</span></span>
+                <span>v4.0.7</span>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Simulate MCP message updates
+        setInterval(() => {
+            const now = new Date();
+            const timeStr = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
+            
+            const messages = [
+                {
+                    server: 'Research',
+                    content: 'Market volatility increasing. Alpha adjusted to 0.91.',
+                    time: timeStr
+                },
+                {
+                    server: 'Risk',
+                    content: 'Position sizing optimized for current market conditions.',
+                    time: timeStr
+                }
+            ];
+            
+            // In a real app, we'd update the MCP messages here
+        }, 30000);
+    </script>
+</body>
 </html>