Spaces:
Running
Running
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:
cc5978c
verified
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Monitoring - QuantumTrade Nexus</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://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| secondary: { | |
| 50: '#fdf4ff', | |
| 100: '#fae8ff', | |
| 200: '#f5d0fe', | |
| 300: '#f0abfc', | |
| 400: '#e879f9', | |
| 500: '#d946ef', | |
| 600: '#c026d3', | |
| 700: '#a21caf', | |
| 800: '#86198f', | |
| 900: '#701a75', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.05); | |
| backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .status-indicator { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin-right: 8px; | |
| } | |
| .status-healthy { background-color: #10b981; animation: pulse-green 2s infinite; } | |
| .status-warning { background-color: #f59e0b; animation: pulse-yellow 2s infinite; } | |
| .status-critical { background-color: #ef4444; animation: pulse-red 2s infinite; } | |
| @keyframes pulse-green { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| @keyframes pulse-yellow { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| @keyframes pulse-red { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .metric-card { | |
| transition: all 0.3s ease; | |
| } | |
| .metric-card:hover { | |
| transform: translateY(-2px); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="glass-effect border-b border-gray-800 sticky top-0 z-50"> | |
| <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center h-16"> | |
| <div class="flex items-center space-x-3"> | |
| <a href="index.html" class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 bg-gradient-to-br from-primary-500 to-secondary-500 rounded-lg flex items-center justify-center"> | |
| <i data-feather="trending-up" class="w-6 h-6"></i> | |
| </div> | |
| <span class="text-xl font-bold bg-gradient-to-r from-primary-500 to-secondary-500 bg-clip-text text-transparent">QuantumTrade</span> | |
| </a> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="index.html" class="text-gray-300 hover:text-white transition-colors duration-200">Dashboard</a> | |
| <a href="trading.html" class="text-gray-300 hover:text-white transition-colors duration-200">Trading</a> | |
| <a href="analytics.html" class="text-gray-300 hover:text-white transition-colors duration-200">Analytics</a> | |
| <a href="strategies.html" class="text-gray-300 hover:text-white transition-colors duration-200">Strategies</a> | |
| <a href="monitoring.html" class="text-primary-400 hover:text-primary-300 transition-colors duration-200 font-medium">Monitoring</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="hidden md:flex items-center space-x-2 text-sm"> | |
| <span class="text-gray-400">Monitoring</span> | |
| <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div> | |
| </div> | |
| <button class="p-2 rounded-lg glass-effect hover:bg-gray-800 transition-colors duration-200"> | |
| <i data-feather="settings" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Monitoring Dashboard --> | |
| <main class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <!-- Header --> | |
| <div class="mb-8"> | |
| <h1 class="text-4xl font-bold mb-2">System Monitoring</h1> | |
| <p class="text-gray-400">Real-time system health, performance metrics, and infrastructure monitoring</p> | |
| </div> | |
| <!-- System Status Overview --> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="glass-effect rounded-2xl p-6 metric-card"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold">Overall Health</h3> | |
| <span class="status-indicator status-healthy"></span> | |
| </div> | |
| <div class="text-3xl font-bold text-green-500 mb-2">99.97%</div> | |
| <div class="text-sm text-gray-400">Uptime (30 days)</div> | |
| <div class="mt-4 bg-gray-700 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 99.97%"></div> | |
| </div> | |
| </div> | |
| <div class="glass-effect rounded-2xl p-6 metric-card"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold">API Response</h3> | |
| <span class="status-indicator status-healthy"></span> | |
| </div> | |
| <div class="text-3xl font-bold text-blue-500 mb-2">47ms</div> | |
| <div class="text-sm text-gray-400">Average Latency</div> | |
| <div class="mt-4 bg-gray-700 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 94%"></div> | |
| </div> | |
| </div> | |
| <div class="glass-effect rounded-2xl p-6 metric-card"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold">CPU Usage</h3> | |
| <span class="status-indicator status-healthy"></span> | |
| </div> | |
| <div class="text-3xl font-bold text-yellow-500 mb-2">42%</div> | |
| <div class="text-sm text-gray-400">Current Load</div> | |
| <div class="mt-4 bg-gray-700 rounded-full h-2"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 42%"></div> | |
| </div> | |
| </div> | |
| <div class="glass-effect rounded-2xl p-6 metric-card"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold">Memory</h3> | |
| <span class="status-indicator status-warning"></span> | |
| </div> | |
| <div class="text-3xl font-bold text-orange-500 mb-2">78%</div> | |
| <div class="text-sm text-gray-400">RAM Utilization</div> | |
| <div class="mt-4 bg-gray-700 rounded-full h-2"> | |
| <div class="bg-orange-500 h-2 rounded-full" style="width: 78%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Real-time Metrics --> | |
| <div class="grid grid-cols-1 xl:grid-cols-2 gap-8 mb-8"> | |
| <!-- System Performance --> | |
| <div class="glass-effect rounded-2xl p-6"> | |
| <h3 class="text-xl font-semibold mb-6">System Performance</h3> | |
| <div class="h-80"> | |
| <canvas id="performance-chart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Infrastructure Health --> | |
| <div class="glass-effect rounded-2xl p-6"> | |
| <h3 class="text-xl font-semibold mb-6">Infrastructure Health</h3> | |
| <div class="space-y-4"> | |
| <!-- Database Cluster --> | |
| <div class="bg-gray-800 rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <span class="status-indicator status-healthy"></span> | |
| <span class="font-semibold">Database Cluster</span> | |
| </div> | |
| <span class="text-sm text-green-500">Healthy</span> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4 text-sm"> | |
| <div> | |
| <div class="text-gray-400">Primary</div> | |
| <div class="font-semibold">Online</div> | |
| </div> | |
| <div> | |
| <div class="text-gray-400">Replica 1</div> | |
| <div class="font-semibold">Synced</div> | |
| </div> | |
| <div> | |
| <div class="text-gray-400">Replica 2</div> | |
| <div class="font-semibold">Synced</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Cache System --> | |
| <div class="bg-gray-800 rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <span class="status-indicator status-healthy"></span> | |
| <span class="font-semibold">Redis Cache</span> | |
| </div> | |
| <span class="text-sm text-green-500">Optimal</span> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4 text-sm"> | |
| <div> | |
| <div class="text-gray-400">Hit Rate</div> | |
| <div class="font-semibold">98.7%</div> | |
| </div> | |
| <div> | |
| <div class="text-gray-400">Memory</div> | |
| <div class="font-semibold">64%</div> | |
| </div> | |
| <div> | |
| <div class="text-gray-400">Connections</div> | |
| <div class="font-semibold">142</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Message Queue --> | |
| <div class="bg-gray-800 rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <span class="status-indicator status-warning"></span> | |
| <span class="font-semibold">MQTT Broker</span> | |
| </div> | |
| <span class="text-sm text-yellow-500">High Load</span> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4 text-sm"> | |
| <div> | |
| <div class="text-gray-400">Messages/s</div> | |
| <div class="font-semibold">1,248</div> | |
| </div> | |
| <div> | |
| <div class="text-gray-400">Queue</div> | |
| <div class="font-semibold">84%</div> | |
| </div> | |
| <div> | |
| <div class="text-gray-400">Clients</div> | |
| <div class="font-semibold">56</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Service Monitoring --> | |
| <div class="glass-effect rounded-2xl p-6 mb-8"> | |
| <h3 class="text-xl font-semibold mb-6">Service Monitoring</h3> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead class="bg-gray-800"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-sm font-semibold">Service</th> | |
| <th class="px-6 py-3 text-left text-sm font-semibold">Status</th> | |
| <th class="px-6 py-3 text-left text-sm font-semibold">Response Time</th> | |
| <th class="px-6 py-3 text-left text-sm font-semibold">CPU</th> | |
| <th class="px-6 py-3 text-left text-sm font-semibold">Memory</th> | |
| <th class="px-6 py-3 text-left text-sm font-semibold">Last Check</th> | |
| <th class="px-6 py-3 text-left text-sm font-semibold">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-gray-700"> | |
| <tr class="hover:bg-gray-800 transition-colors"> | |
| <td class="px-6 py-4"> | |
| <div class="flex items-center"> | |
| <span class="status-indicator status-healthy"></span> | |
| <span class="font-medium">API Gateway</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4"> | |
| <span class="px-3 py-1 rounded-full text-sm bg-green-500/20 text-green-500">Healthy</span> | |
| </td> | |
| <td class="px-6 py-4">23ms</td> | |
| <td class="px-6 py-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: 32%"></div> | |
| </div> | |
| 32% | |
| </div> | |
| </td> | |
| <td class="px-6 py-4"> | |
| <div class="flex items-center"> | |
| <div class="w-16 bg-gray-700 rounded-full h-2 mr-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 45%"></div> | |
| </div> | |
| 45% | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 text-gray-400">2 seconds ago</td> | |
| <td class="px-6 py-4"> | |
| <button class="text-primary-500 hover:text-primary-400 text-sm">Restart</button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-800 transition-colors"> | |
| <td class="px-6 py-4"> | |
| <div class="flex items-center"> | |
| <span class="status-indicator status-healthy"></span> | |
| <span class="font-medium">Signal Service</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4"> | |
| <span class="px-3 py-1 rounded-full text-sm bg-green-500/20 text-green-500">Healthy</span> | |
| </td> | |
| <td class="px-6 py-4">18ms</td> | |
| <td class="px-6 py-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: 28%"></div> | |
| </div> | |
| 28% | |
| </div> | |
| </td> | |
| <td class="px-6 py-4"> | |
| <div class="flex items-center"> | |
| <div class="w-16 bg-gray-700 rounded-full h-2 mr-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 52%"></div> | |
| </div> | |
| 52% | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 text-gray-400">5 seconds ago</td> | |
| <td class="px-6 py-4"> | |
| <button class="text-primary-500 hover:text-primary-400 text-sm">Restart</button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-800 transition-colors"> | |
| <td class="px-6 py-4"> | |
| <div class="flex items-center"> | |
| <span class="status-indicator status-warning"></span> | |
| <span class="font-medium">ML Model Service</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4"> | |
| <span class="px-3 py-1 rounded-full text-sm bg-yellow-500/20 text-yellow-500">High Load</span> | |
| </td> | |
| <td class="px-6 py-4">67ms</td> | |
| <td class="px-6 py-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: 78%"></div> | |
| </div> | |
| 78% | |
| </div> | |
| </td> | |
| <td class="px-6 py-4"> | |
| <div class="flex items-center"> | |
| <div class="w-16 bg-gray-700 rounded-full h-2 mr-2"> | |
| <div class="bg-orange-500 h-2 rounded-full" style="width: 82%"></div> | |
| </div> | |
| 82% | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 text-gray-400">10 seconds ago</td> | |
| <td class="px-6 py-4"> | |
| <button class="text-primary-500 hover:text-primary-400 text-sm">Scale</button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-800 transition-colors"> | |
| <td class="px-6 py-4"> | |
| <div class="flex items-center"> | |
| <span class="status-indicator status-healthy"></span> | |
| <span class="font-medium">Market Data Service</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4"> | |
| <span class="px-3 py-1 rounded-full text-sm bg-green-500/20 text-green-500">Healthy</span> | |
| </td> | |
| <td class="px-6 py-4">34ms</td> | |
| <td class="px-6 py-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: 41%"></div> | |
| </div> | |
| 41% | |
| </div> | |
| </td> | |
| <td class="px-6 py-4"> | |
| <div class="flex items-center"> | |
| <div class="w-16 bg-gray-700 rounded-full h-2 mr-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 58%"></div> | |
| </div> | |
| 58% | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 text-gray-400">3 seconds ago</td> | |
| <td class="px-6 py-4"> | |
| <button class="text-primary-500 hover:text-primary-400 text-sm">Restart</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Alert Center --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8"> | |
| <!-- Active Alerts --> | |
| <div class="glass-effect rounded-2xl p-6"> | |
| <h3 class="text-xl font-semibold mb-6">Active Alerts</h3> | |
| <div class="space-y-4"> | |
| <div class="bg-yellow-500/10 border border-yellow-500/30 rounded-lg p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="font-semibold">High CPU Usage</span> | |
| <span class="text-yellow-500 text-sm">Warning</span> | |
| </div> | |
| <p class="text-sm text-gray-300 mb-2">ML Model Service CPU usage above 75% for 5 minutes</p> | |
| <div class="text-xs text-gray-400">Triggered 15 minutes ago</div> | |
| </div> | |
| <div class="bg-orange-500/10 border border-orange-500/30 rounded-lg p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="font-semibold">Memory Pressure</span> | |
| <span class="text-orange-500 text-sm">Critical</span> | |
| </div> | |
| <p class="text-sm text-gray-300 mb-2">System memory usage at 85% capacity</p> | |
| <div class="text-xs text-gray-400">Triggered 8 minutes ago</div> | |
| </div> | |
| <div class="bg-blue-500/10 border border-blue-500/30 rounded-lg p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="font-semibold">Database Latency</span> | |
| <span class="text-blue-500 text-sm">Info</span> | |
| </div> | |
| <p class="text-sm text-gray-300 mb-2">Query response time increased by 20%</p> | |
| <div class="text-xs text-gray-400">Triggered 25 minutes ago</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Performance Metrics --> | |
| <div class="glass-effect rounded-2xl p-6"> | |
| <h3 class="text-xl font-semibold mb-6">Performance Metrics</h3> | |
| <div class="h-64"> | |
| <canvas id="metrics-chart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Log Viewer --> | |
| <div class="glass-effect rounded-2xl p-6"> | |
| <h3 class="text-xl font-semibold mb-6">Real-time Log Viewer</h3> | |
| <div class="bg-gray-800 rounded-lg p-4 h-64 overflow-y-auto font-mono text-sm"> | |
| <div class="text-green-400">[INFO] 14:23:45 - API Gateway: Processed 142 requests in last minute</div> | |
| <div class="text-blue-400">[DEBUG] 14:23:42 - Signal Service: Generated BUY signal for EUR/USD</div> | |
| <div class="text-gray-400">[INFO] 14:23:40 - Market Data: Updated 56 currency pairs</div> | |
| <div class="text-yellow-400">[WARN] 14:23:38 - ML Service: Model inference latency 45ms</div> | |
| <div class="text-green-400">[INFO] 14:23:35 - Database: Connection pool healthy (42 active)</div> | |
| <div class="text-blue-400">[DEBUG] 14:23:32 - Trading Engine: Executed order #884732</div> | |
| <div class="text-gray-400">[INFO] 14:23:30 - Cache: Hit rate 98.7% (12,485 requests)</div> | |
| <div class="text-green-400">[INFO] 14:23:28 - Monitoring: All systems operational</div> | |
| <div class="text-blue-400">[DEBUG] 14:23:25 - Strategy Service: Backtest completed</div> | |
| <div class="text-gray-400">[INFO] 14:23:22 - Notification: Sent 3 trade alerts</div> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Performance Chart | |
| const perfCtx = document.getElementById('performance-chart').getContext('2d'); | |
| const perfChart = new Chart(perfCtx, { | |
| type: 'line', | |
| data: { | |
| labels: Array.from({length: 24}, (_, i) => `${i}:00`), | |
| datasets: [{ | |
| label: 'CPU Usage', | |
| data: Array.from({length: 24}, () => 20 + Math.random() * 60), | |
| borderColor: '#0ea5e9', | |
| backgroundColor: 'rgba(14, 165, 233, 0.1)', | |
| fill: true, | |
| tension: 0.4 | |
| }, { | |
| label: 'Memory Usage', | |
| data: Array.from({length: 24}, () => 40 + Math.random() * 40), | |
| borderColor: '#d946ef', | |
| backgroundColor: 'rgba(217, 70, 239, 0.1)', | |
| fill: true, | |
| tension: 0.4 | |
| }, { | |
| label: 'Network I/O', | |
| data: Array.from({length: 24}, () => 10 + Math.random() * 30), | |
| borderColor: '#10b981', | |
| backgroundColor: 'rgba(16, 185, 129, 0.1)', | |
| fill: true, | |
| tension: 0.4 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| labels: { color: 'rgba(255, 255, 255, 0.7)' } | |
| } | |
| }, | |
| scales: { | |
| x: { | |
| grid: { color: 'rgba(255, 255, 255, 0.1)' }, | |
| ticks: { color: 'rgba(255, 255, 255, 0.7)' } | |
| }, | |
| y: { | |
| grid: { color: 'rgba(255, 255, 255, 0.1)' }, | |
| ticks: { color: 'rgba(255, 255, 255, 0.7)' } | |
| } | |
| } | |
| } | |
| }); | |
| // Metrics Chart | |
| const metricsCtx = document.getElementById('metrics-chart').getContext('2d'); | |
| const metricsChart = new Chart(metricsCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['API Latency', 'DB Queries', 'Cache Hits', 'Messages/s', 'Errors'], | |
| datasets: [{ | |
| label: 'Current', | |
| data: [23, 142, 12485, 1248, 2], | |
| backgroundColor: '#0ea5e9', | |
| borderColor: '#0ea5e9', | |
| borderWidth: 1 | |
| }, { | |
| label: 'Average', | |
| data: [28, 135, 11800, 1100, 1], | |
| backgroundColor: '#d946ef', | |
| borderColor: '#d946ef', | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| labels: { color: 'rgba(255, 255, 255, 0.7)' } | |
| } | |
| }, | |
| scales: { | |
| x: { | |
| grid: { color: 'rgba(255, 255, 255, 0.1)' }, | |
| ticks: { color: 'rgba(255, 255, 255, 0.7)' } | |
| }, | |
| y: { | |
| grid: { color: 'rgba(255, 255, 255, 0.1)' }, | |
| ticks: { color: 'rgba(255, 255, 255, 0.7)' } | |
| } | |
| } | |
| } | |
| }); | |
| // Simulate real-time updates | |
| setInterval(() => { | |
| // Update performance chart | |
| perfChart.data.datasets.forEach(dataset => { | |
| dataset.data.push(Math.random() * 80 + 20); | |
| dataset.data.shift(); | |
| }); | |
| perfChart.update('none'); | |
| // Update metrics chart with random variations | |
| metricsChart.data.datasets[0].data = metricsChart.data.datasets[0].data.map(value => | |
| Math.max(0, value + (Math.random() - 0.5) * 20) | |
| ); | |
| metricsChart.update('none'); | |
| // Add new log entry | |
| const logContainer = document.querySelector('.font-mono'); | |
| const logTypes = [ | |
| { class: 'text-green-400', prefix: '[INFO]' }, | |
| { class: 'text-blue-400', prefix: '[DEBUG]' }, | |
| { class: 'text-yellow-400', prefix: '[WARN]' }, | |
| { class: 'text-gray-400', prefix: '[INFO]' } | |
| ]; | |
| const logType = logTypes[Math.floor(Math.random() * logTypes.length)]; | |
| const now = new Date(); | |
| const time = `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`; | |
| const messages = [ | |
| 'API Gateway: Processed requests', | |
| 'Signal Service: Market analysis', | |
| 'Market Data: Price updates', | |
| 'ML Service: Model inference', | |
| 'Database: Query execution', | |
| 'Cache: Memory optimization', | |
| 'Trading Engine: Order processing' | |
| ]; | |
| const message = messages[Math.floor(Math.random() * messages.length)]; | |
| const logEntry = document.createElement('div'); | |
| logEntry.className = logType.class; | |
| logEntry.textContent = `${logType.prefix} ${time} - ${message}`; | |
| logContainer.appendChild(logEntry); | |
| logContainer.scrollTop = logContainer.scrollHeight; | |
| // Keep only last 10 log entries | |
| if (logContainer.children.length > 10) { | |
| logContainer.removeChild(logContainer.firstChild); | |
| } | |
| }, 3000); | |
| // Add animations | |
| anime({ | |
| targets: '.metric-card', | |
| translateY: [20, 0], | |
| opacity: [0, 1], | |
| duration: 600, | |
| delay: anime.stagger(100), | |
| easing: 'easeOutQuad' | |
| }); | |
| </script> | |
| </body> | |
| </ | |
| </html> |