Spaces:
Running
Running
Por, favor añade elementos visuales de redes neuronales interactivas y todas las paginas del frontend, no solamente en el dashboard, y quiero que tambien implementes un aspecto visual mas futurista en todo el frontend mas elementos visuales interactivos, mucho mas efectos 3D y mas colores gradientes con alto contraste! - Initial Deployment
6d78783
verified
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hiper Feature Pipeline - Dashboard</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/[email protected]/dist/aos.js"></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/vanta@latest/dist/vanta.net.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/particles.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Rajdhani', sans-serif; | |
| overflow-x: hidden; | |
| } | |
| .orbitron { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .vanta-bg { | |
| position: fixed; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -2; | |
| } | |
| #particles-js { | |
| position: fixed; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| .glass-effect { | |
| background: linear-gradient(135deg, rgba(16, 23, 41, 0.7), rgba(10, 15, 30, 0.7)); | |
| backdrop-filter: blur(12px); | |
| border: 1px solid rgba(66, 92, 255, 0.3); | |
| box-shadow: 0 8px 32px rgba(0, 4, 255, 0.2); | |
| border-radius: 16px; | |
| transition: all 0.3s ease; | |
| } | |
| .glass-effect:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 12px 40px rgba(66, 92, 255, 0.4); | |
| border-color: rgba(66, 220, 255, 0.6); | |
| } | |
| .neural-connection { | |
| position: absolute; | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .floating-2 { | |
| animation: float 7s ease-in-out infinite; | |
| animation-delay: 1s; | |
| } | |
| .floating-3 { | |
| animation: float 5s ease-in-out infinite; | |
| animation-delay: 2s; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .pulse-glow { | |
| animation: pulse-glow 2s infinite; | |
| } | |
| @keyframes pulse-glow { | |
| 0% { box-shadow: 0 0 5px rgba(66, 220, 255, 0.6); } | |
| 50% { box-shadow: 0 0 20px rgba(66, 220, 255, 0.8), 0 0 30px rgba(66, 92, 255, 0.6); } | |
| 100% { box-shadow: 0 0 5px rgba(66, 220, 255, 0.6); } | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #42dcff, #4260ff, #9042ff); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-size: 200% auto; | |
| animation: gradient-flow 3s linear infinite; | |
| } | |
| @keyframes gradient-flow { | |
| 0% { background-position: 0% center; } | |
| 100% { background-position: 200% center; } | |
| } | |
| .cyber-border { | |
| position: relative; | |
| border: 1px solid transparent; | |
| background: linear-gradient(45deg, #42dcff, #4260ff, #9042ff) border-box; | |
| -webkit-mask: | |
| linear-gradient(#fff 0 0) padding-box, | |
| linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: destination-out; | |
| mask-composite: exclude; | |
| } | |
| .neuron { | |
| position: absolute; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: #42dcff; | |
| box-shadow: 0 0 10px #42dcff, 0 0 20px #42dcff; | |
| z-index: 1; | |
| } | |
| .neuron-pulse { | |
| animation: neuron-pulse 2s infinite; | |
| } | |
| @keyframes neuron-pulse { | |
| 0% { transform: scale(1); opacity: 1; } | |
| 50% { transform: scale(1.5); opacity: 0.7; } | |
| 100% { transform: scale(1); opacity: 1; } | |
| } | |
| .nav-glow { | |
| box-shadow: 0 4px 30px rgba(66, 220, 255, 0.3); | |
| border-bottom: 1px solid rgba(66, 220, 255, 0.2); | |
| } | |
| .data-stream { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .data-stream::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, #42dcff, transparent); | |
| animation: data-stream 2s linear infinite; | |
| } | |
| @keyframes data-stream { | |
| 0% { left: -100%; } | |
| 100% { left: 100%; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen"> | |
| <div id="vanta-bg" class="vanta-bg"></div> | |
| <div id="particles-js"></div> | |
| <!-- Neural Network Connections --> | |
| <svg class="neural-connection" width="100%" height="100%" style="position: fixed; top: 0; left: 0; z-index: -1;"> | |
| <defs> | |
| <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" stop-color="#42dcff" /> | |
| <stop offset="50%" stop-color="#4260ff" /> | |
| <stop offset="100%" stop-color="#9042ff" /> | |
| </linearGradient> | |
| </defs> | |
| <!-- Lines will be dynamically added by JavaScript --> | |
| </svg> | |
| <!-- Floating Neurons --> | |
| <div class="neuron neuron-pulse" style="top: 20%; left: 10%;"></div> | |
| <div class="neuron neuron-pulse" style="top: 30%; left: 85%; animation-delay: 0.5s;"></div> | |
| <div class="neuron neuron-pulse" style="top: 70%; left: 15%; animation-delay: 1s;"></div> | |
| <div class="neuron neuron-pulse" style="top: 80%; left: 90%; animation-delay: 1.5s;"></div> | |
| <div class="neuron neuron-pulse" style="top: 45%; left: 5%; animation-delay: 0.7s;"></div> | |
| <div class="neuron neuron-pulse" style="top: 55%; left: 95%; animation-delay: 1.2s;"></div> | |
| <!-- Navigation --> | |
| <nav class="glass-effect fixed w-full z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16 items-center"> | |
| <div class="flex items-center"> | |
| <i data-feather="cpu" class="h-8 w-8 text-blue-400"></i> | |
| <span class="ml-2 text-xl font-bold">Hiper Feature Pipeline</span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="index.html" class="px-3 py-2 rounded-md text-sm font-medium bg-blue-700 text-white">Dashboard</a> | |
| <a href="datasets.html" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-600">Datasets</a> | |
| <a href="training.html" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-600">Training</a> | |
| <a href="models.html" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-600">Models</a> | |
| <a href="system-health.html" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-600">System Health</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="pt-20 pb-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <!-- Header --> | |
| <div class="text-center py-12" data-aos="fade-down"> | |
| <h1 class="text-5xl font-bold mb-4 orbitron gradient-text">QUANTUM TRADING AI v6.0</h1> | |
| <p class="text-xl text-[#42dcff] orbitron">ADVANCED FINANCIAL ML WITH EVENT SOURCING + CQRS ARCHITECTURE</p> | |
| <div class="mt-4 data-stream"></div> | |
| </div> | |
| <!-- Stats Overview --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12"> | |
| <div class="glass-effect rounded-lg p-6" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="flex items-center"> | |
| <div class="p-3 bg-blue-500 rounded-lg"> | |
| <i data-feather="database" class="h-6 w-6"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-300">Datasets</p> | |
| <p class="text-2xl font-bold">24</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass-effect rounded-lg p-6" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="flex items-center"> | |
| <div class="p-3 bg-green-500 rounded-lg"> | |
| <i data-feather="activity" class="h-6 w-6"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-300">Training Sessions</p> | |
| <p class="text-2xl font-bold">12</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass-effect rounded-lg p-6" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="flex items-center"> | |
| <div class="p-3 bg-purple-500 rounded-lg"> | |
| <i data-feather="box" class="h-6 w-6"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-300">ONNX Models</p> | |
| <p class="text-2xl font-bold">8</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass-effect rounded-lg p-6" data-aos="fade-up" data-aos-delay="400"> | |
| <div class="flex items-center"> | |
| <div class="p-3 bg-yellow-500 rounded-lg"> | |
| <i data-feather="trending-up" class="h-6 w-6"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-300">Avg Performance</p> | |
| <p class="text-2xl font-bold">94.7%</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div class="glass-effect rounded-lg p-6 mb-12" data-aos="fade-up"> | |
| <h2 class="text-2xl font-bold mb-6">Actividad Reciente</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between p-4 bg-gray-800 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="p-2 bg-blue-500 rounded-full"> | |
| <i data-feather="upload" class="h-4 w-4"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="font-medium">Nuevo dataset ingresado</p> | |
| <p class="text-sm text-gray-400">SP500_2023.csv</p> | |
| </div> | |
| </div> | |
| <span class="text-sm text-gray-400">Hace 2 minutos</span> | |
| </div> | |
| <div class="flex items-center justify-between p-4 bg-gray-800 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="p-2 bg-green-500 rounded-full"> | |
| <i data-feather="play" class="h-4 w-4"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="font-medium">Entrenamiento iniciado</p> | |
| <p class="text-sm text-gray-400">LSTM_Model_v2</p> | |
| </div> | |
| </div> | |
| <span class="text-sm text-gray-400">Hace 15 minutos</span> | |
| </div> | |
| <div class="flex items-center justify-between p-4 bg-gray-800 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="p-2 bg-purple-500 rounded-full"> | |
| <i data-feather="check-circle" class="h-4 w-4"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="font-medium">Modelo exportado a ONNX</p> | |
| <p class="text-sm text-gray-400">Transformer_Financial</p> | |
| </div> | |
| </div> | |
| <span class="text-sm text-gray-400">Hace 1 hora</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- System Status --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div class="glass-effect rounded-lg p-6" data-aos="fade-right"> | |
| <h2 class="text-2xl font-bold mb-6">Estado del Sistema</h2> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between items-center"> | |
| <span>Event Store</span> | |
| <span class="px-3 py-1 bg-green-500 rounded-full text-xs">Online</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span>Read Models</span> | |
| <span class="px-3 py-1 bg-green-500 rounded-full text-xs">Online</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span>Feature Engineering</span> | |
| <span class="px-3 py-1 bg-green-500 rounded-full text-xs">Online</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span>Model Training</span> | |
| <span class="px-3 py-1 bg-yellow-500 rounded-full text-xs">Warning</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass-effect rounded-lg p-6" data-aos="fade-left"> | |
| <h2 class="text-2xl font-bold mb-6">Rendimiento</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span>CPU Usage</span> | |
| <span>65%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span>Memory</span> | |
| <span>78%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 78%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span>Storage</span> | |
| <span>45%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="glass-effect nav-glow mt-12 py-6"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <p class="text-[#42dcff] orbitron">QUANTUM TRADING AI v6.0 - ADVANCED FINANCIAL MACHINE LEARNING SYSTEM</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Vanta.js NET background | |
| VANTA.NET({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x4260ff, | |
| backgroundColor: 0x10172a, | |
| points: 15.00, | |
| maxDistance: 25.00, | |
| spacing: 18.00 | |
| }); | |
| // Initialize particles.js | |
| particlesJS('particles-js', { | |
| particles: { | |
| number: { value: 80, density: { enable: true, value_area: 800 } }, | |
| color: { value: "#42dcff" }, | |
| shape: { | |
| type: "circle", | |
| stroke: { width: 0, color: "#000000" }, | |
| polygon: { nb_sides: 5 } | |
| }, | |
| opacity: { | |
| value: 0.5, | |
| random: true, | |
| anim: { enable: true, speed: 1, opacity_min: 0.1, sync: false } | |
| }, | |
| size: { | |
| value: 3, | |
| random: true, | |
| anim: { enable: true, speed: 2, size_min: 0.1, sync: false } | |
| }, | |
| line_linked: { | |
| enable: true, | |
| distance: 150, | |
| color: "#4260ff", | |
| opacity: 0.4, | |
| width: 1 | |
| }, | |
| move: { | |
| enable: true, | |
| speed: 2, | |
| direction: "none", | |
| random: true, | |
| straight: false, | |
| out_mode: "out", | |
| bounce: false, | |
| attract: { enable: false, rotateX: 600, rotateY: 1200 } | |
| } | |
| }, | |
| interactivity: { | |
| detect_on: "canvas", | |
| events: { | |
| onhover: { enable: true, mode: "grab" }, | |
| onclick: { enable: true, mode: "push" }, | |
| resize: true | |
| }, | |
| modes: { | |
| grab: { distance: 140, line_linked: { opacity: 1 } }, | |
| push: { particles_nb: 4 } | |
| } | |
| }, | |
| retina_detect: true | |
| }); | |
| // Initialize AOS | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Create neural network connections | |
| document.addEventListener('DOMContentLoaded', function() { | |
| createNeuralConnections(); | |
| }); | |
| function createNeuralConnections() { | |
| const svg = document.querySelector('.neural-connection'); | |
| const containers = document.querySelectorAll('.glass-effect'); | |
| // Clear existing connections | |
| svg.innerHTML = '<defs><linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#42dcff" /><stop offset="50%" stop-color="#4260ff" /><stop offset="100%" stop-color="#9042ff" /></linearGradient></defs>'; | |
| // Create connections between elements | |
| for (let i = 0; i < containers.length - 1; i++) { | |
| for (let j = i + 1; j < containers.length; j++) { | |
| if (Math.random() > 0.7) { // Only connect some elements | |
| const rect1 = containers[i].getBoundingClientRect(); | |
| const rect2 = containers[j].getBoundingClientRect(); | |
| const x1 = rect1.left + rect1.width / 2; | |
| const y1 = rect1.top + rect1.height / 2; | |
| const x2 = rect2.left + rect2.width / 2; | |
| const y2 = rect2.top + rect2.height / 2; | |
| // Create a curved line | |
| const curveIntensity = 50 * (Math.random() - 0.5); | |
| const path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); | |
| path.setAttribute('d', `M${x1},${y1} C${x1 + curveIntensity},${y1} ${x2 - curveIntensity},${y2} ${x2},${y2}`); | |
| path.setAttribute('stroke', 'url(#gradient)'); | |
| path.setAttribute('stroke-width', '1'); | |
| path.setAttribute('fill', 'none'); | |
| path.setAttribute('stroke-dasharray', '5,5'); | |
| // Add animation | |
| const animate = document.createElementNS('http://www.w3.org/2000/svg', 'animate'); | |
| animate.setAttribute('attributeName', 'stroke-dashoffset'); | |
| animate.setAttribute('from', '0'); | |
| animate.setAttribute('to', '10'); | |
| animate.setAttribute('dur', '1s'); | |
| animate.setAttribute('repeatCount', 'indefinite'); | |
| path.appendChild(animate); | |
| svg.appendChild(path); | |
| } | |
| } | |
| } | |
| } | |
| // Recreate connections on resize | |
| window.addEventListener('resize', createNeuralConnections); | |
| </script> | |
| </body> | |
| </html> | |