Spaces:
Running
Running
Desarrolle e implemente completamente una interfaz de usuario y experiencia UX/UI de vanguardia implementando el c贸digo en diferentes paginas independientes interconectadas, para la aplicaci贸n detallada en los siguientes diagramas, cumpliendo con los siguientes requisitos t茅cnicos y de dise帽o:
08ce598
verified
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>QuantumTrade Matrix - Next-Gen Trading Platform</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script> | |
| <style> | |
| @keyframes quantum-pulse { | |
| 0%, 100% { opacity: 1; transform: scale(1); } | |
| 50% { opacity: 0.7; transform: scale(1.05); } | |
| } | |
| @keyframes matrix-rain { | |
| 0% { transform: translateY(-100%); opacity: 0; } | |
| 10% { opacity: 1; } | |
| 90% { opacity: 1; } | |
| 100% { transform: translateY(100vh); opacity: 0; } | |
| } | |
| .quantum-pulse { | |
| animation: quantum-pulse 2s ease-in-out infinite; | |
| } | |
| .matrix-rain { | |
| animation: matrix-rain 8s linear infinite; | |
| } | |
| .glass-morphism { | |
| background: rgba(15, 23, 42, 0.7); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .neon-glow { | |
| box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); | |
| } | |
| .trading-card { | |
| background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.9) 100%); | |
| border: 1px solid rgba(59, 130, 246, 0.3); | |
| transition: all 0.3s ease; | |
| } | |
| .trading-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 40px rgba(59, 130, 246, 0.3); | |
| } | |
| .quantum-button { | |
| background: linear-gradient(45deg, #3b82f6, #8b5cf6); | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .quantum-button::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); | |
| transition: left 0.5s; | |
| } | |
| .quantum-button:hover::before { | |
| left: 100%; | |
| } | |
| .quantum-button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4); | |
| } | |
| .matrix-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| opacity: 0.1; | |
| } | |
| .matrix-char { | |
| position: absolute; | |
| color: #10b981; | |
| font-family: 'Courier New', monospace; | |
| font-size: 14px; | |
| white-space: nowrap; | |
| pointer-events: none; | |
| } | |
| .vanta-bg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -2; | |
| } | |
| .performance-metric { | |
| background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%); | |
| border: 1px solid rgba(59, 130, 246, 0.2); | |
| } | |
| .signal-indicator { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin-right: 8px; | |
| animation: pulse 2s infinite; | |
| } | |
| .signal-buy { | |
| background: #10b981; | |
| box-shadow: 0 0 10px rgba(16, 185, 129, 0.5); | |
| } | |
| .signal-sell { | |
| background: #ef4444; | |
| box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); | |
| } | |
| .signal-hold { | |
| background: #f59e0b; | |
| box-shadow: 0 0 10px rgba(245, 158, 11, 0.5); | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .chart-container { | |
| background: rgba(15, 23, 42, 0.8); | |
| border: 1px solid rgba(59, 130, 246, 0.2); | |
| border-radius: 12px; | |
| padding: 20px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .chart-line { | |
| stroke: #3b82f6; | |
| stroke-width: 2; | |
| fill: none; | |
| filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.5)); | |
| } | |
| .chart-area { | |
| fill: url(#gradient); | |
| opacity: 0.3; | |
| } | |
| .price-ticker { | |
| font-family: 'Courier New', monospace; | |
| font-weight: bold; | |
| font-size: 1.5rem; | |
| background: linear-gradient(135deg, #3b82f6, #8b5cf6); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .floating-element { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white overflow-x-hidden"> | |
| <div class="vanta-bg" id="vanta-bg"></div> | |
| <div class="matrix-bg" id="matrix-bg"></div> | |
| <!-- Navigation --> | |
| <nav class="fixed top-0 w-full z-50 glass-morphism"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center quantum-pulse"> | |
| <i data-feather="trending-up" class="w-6 h-6"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"> | |
| QuantumTrade Matrix | |
| </h1> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="dashboard.html" class="hover:text-blue-400 transition-colors">Dashboard</a> | |
| <a href="signals.html" class="hover:text-blue-400 transition-colors">Signals</a> | |
| <a href="strategies.html" class="hover:text-blue-400 transition-colors">Strategies</a> | |
| <a href="portfolio.html" class="hover:text-blue-400 transition-colors">Portfolio</a> | |
| <a href="settings.html" class="hover:text-blue-400 transition-colors">Settings</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="quantum-button px-6 py-2 rounded-lg font-semibold"> | |
| Connect MT5 | |
| </button> | |
| <div class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center"> | |
| <i data-feather="user" class="w-5 h-5"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative min-h-screen flex items-center justify-center"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-6xl md:text-8xl font-bold mb-6 floating-element"> | |
| <span class="bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent"> | |
| Quantum | |
| </span> | |
| <br> | |
| <span class="text-white">Trading</span> | |
| </h2> | |
| <p class="text-xl md:text-2xl text-gray-300 mb-8"> | |
| Next-generation AI-powered trading platform with real-time signals and advanced analytics | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <button class="quantum-button px-8 py-4 rounded-lg font-semibold text-lg"> | |
| Start Trading Now | |
| </button> | |
| <button class="px-8 py-4 rounded-lg font-semibold text-lg border border-blue-500 hover:bg-blue-500 hover:bg-opacity-20 transition-all"> | |
| View Demo | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Live Trading Widget --> | |
| <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 w-full max-w-6xl px-6"> | |
| <div class="glass-morphism rounded-2xl p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="trading-card rounded-xl p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="text-gray-400">EUR/USD</span> | |
| <span class="signal-indicator signal-buy"></span> | |
| </div> | |
| <div class="price-ticker">1.0856</div> | |
| <div class="text-green-400 text-sm">+0.0023 (+0.21%)</div> | |
| </div> | |
| <div class="trading-card rounded-xl p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="text-gray-400">GBP/USD</span> | |
| <span class="signal-indicator signal-sell"></span> | |
| </div> | |
| <div class="price-ticker">1.2743</div> | |
| <div class="text-red-400 text-sm">-0.0012 (-0.09%)</div> | |
| </div> | |
| <div class="trading-card rounded-xl p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="text-gray-400">USD/JPY</span> | |
| <span class="signal-indicator signal-hold"></span> | |
| </div> | |
| <div class="price-ticker">149.82</div> | |
| <div class="text-yellow-400 text-sm">+0.05 (+0.03%)</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-20 relative"> | |
| <div class="container mx-auto px-6"> | |
| <h3 class="text-4xl font-bold text-center mb-16 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"> | |
| Quantum Features | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="trading-card rounded-xl p-8 floating-element"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="cpu" class="w-8 h-8"></i> | |
| </div> | |
| <h4 class="text-2xl font-bold mb-4">AI-Powered Signals</h4> | |
| <p class="text-gray-300"> | |
| Advanced machine learning models analyze market data in real-time to generate high-accuracy trading signals | |
| </p> | |
| </div> | |
| <div class="trading-card rounded-xl p-8 floating-element" style="animation-delay: 0.2s;"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-blue-500 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="zap" class="w-8 h-8"></i> | |
| </div> | |
| <h4 class="text-2xl font-bold mb-4">Lightning Fast</h4> | |
| <p class="text-gray-300"> | |
| Sub-100ms response times with 60 FPS rendering for the smoothest trading experience | |
| </p> | |
| </div> | |
| <div class="trading-card rounded-xl p-8 floating-element" style="animation-delay: 0.4s;"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="shield" class="w-8 h-8"></i> | |
| </div> | |
| <h4 class="text-2xl font-bold mb-4">Bank-Level Security</h4> | |
| <p class="text-gray-300"> | |
| Military-grade encryption and multi-factor authentication protect your assets | |
| </p> | |
| </div> | |
| <div class="trading-card rounded-xl p-8 floating-element" style="animation-delay: 0.6s;"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="trending-up" class="w-8 h-8"></i> | |
| </div> | |
| <h4 class="text-2xl font-bold mb-4">Advanced Analytics</h4> | |
| <p class="text-gray-300"> | |
| Comprehensive portfolio analytics with real-time P&L tracking and risk management | |
| </p> | |
| </div> | |
| <div class="trading-card rounded-xl p-8 floating-element" style="animation-delay: 0.8s;"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="smartphone" class="w-8 h-8"></i> | |
| </div> | |
| <h4 class="text-2xl font-bold mb-4">Mobile Optimized</h4> | |
| <p class="text-gray-300"> | |
| Perfectly responsive design from 320px to 8K displays with touch-optimized controls | |
| </p> | |
| </div> | |
| <div class="trading-card rounded-xl p-8 floating-element" style="animation-delay: 1s;"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-teal-500 to-cyan-500 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="cloud" class="w-8 h-8"></i> | |
| </div> | |
| <h4 class="text-2xl font-bold mb-4">Cloud Native</h4> | |
| <p class="text-gray-300"> | |
| Auto-scaling infrastructure with 99.9% uptime guarantee and global CDN | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Performance Metrics --> | |
| <section class="py-20 bg-gray-800 bg-opacity-50"> | |
| <div class="container mx-auto px-6"> | |
| <h3 class="text-4xl font-bold text-center mb-16 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"> | |
| System Performance | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="performance-metric rounded-xl p-6 text-center"> | |
| <div class="text-4xl font-bold text-blue-400 mb-2">99.9%</div> | |
| <div class="text-gray-300">Uptime</div> | |
| </div> | |
| <div class="performance-metric rounded-xl p-6 text-center"> | |
| <div class="text-4xl font-bold text-green-400 mb-2">< 50ms</div> | |
| <div class="text-gray-300">Latency</div> | |
| </div> | |
| <div class="performance-metric rounded-xl p-6 text-center"> | |
| <div class="text-4xl font-bold text-purple-400 mb-2">60 FPS</div> | |
| <div class="text-gray-300">Rendering</div> | |
| </div> | |
| <div class="performance-metric rounded-xl p-6 text-center"> | |
| <div class="text-4xl font-bold text-yellow-400 mb-2">>95</div> | |
| <div class="text-gray-300">Lighthouse Score</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-3 mb-4 md:mb-0"> | |
| <div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center"> | |
| <i data-feather="trending-up" class="w-5 h-5"></i> | |
| </div> | |
| <span class="text-xl font-bold">QuantumTrade Matrix</span> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="hover:text-blue-400 transition-colors">Privacy Policy</a> | |
| <a href="#" class="hover:text-blue-400 transition-colors">Terms of Service</a> | |
| <a href="#" class="hover:text-blue-400 transition-colors">Contact</a> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-8 border-t border-gray-800 text-center text-gray-400"> | |
| <p>© 2025 QuantumTrade Matrix. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x3b82f6, | |
| color2: 0x8b5cf6, | |
| size: 1.20, | |
| backgroundColor: 0x0f172a | |
| }); | |
| // Matrix rain effect | |
| function createMatrixRain() { | |
| const matrixBg = document.getElementById('matrix-bg'); | |
| const characters = '01銈€偆銈︺偍銈偒銈偗銈便偝銈点偡銈广偦銈姐偪銉併儎銉嗐儓銉娿儖銉屻儘銉庛儚銉掋儠銉樸儧銉炪儫銉犮儭銉€儰銉︺儴銉┿儶銉儸銉儻銉层兂'; | |
| for (let i = 0; i < 50; i++) { | |
| const char = document.createElement('div'); | |
| char.className = 'matrix-char'; | |
| char.textContent = characters[Math.floor(Math.random() * characters.length)]; | |
| char.style.left = Math.random() * 100 + '%'; | |
| char.style.animationDelay = Math.random() * 8 + 's'; | |
| char.style.animationDuration = (Math.random() * 3 + 5) + 's'; | |
| matrixBg.appendChild(char); | |
| } | |
| } | |
| createMatrixRain(); | |
| // Animate elements on scroll | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -100px 0px' | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = '1'; | |
| entry.target.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }, observerOptions); | |
| // Observe all trading cards | |
| document.querySelectorAll('.trading-card').forEach(card => { | |
| card.style.opacity = '0'; | |
| card.style.transform = 'translateY(50px)'; | |
| card.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; | |
| observer.observe(card); | |
| }); | |
| // Simulate real-time price updates | |
| function updatePrices() { | |
| const priceElements = document.querySelectorAll('.price-ticker'); | |
| priceElements.forEach(element => { | |
| const currentPrice = parseFloat(element.textContent); | |
| const change = (Math.random() - 0.5) * 0.001; | |
| const newPrice = currentPrice + change; | |
| element.textContent = newPrice.toFixed(4); | |
| // Animate the change | |
| anime({ | |
| targets: element, | |
| scale: [1, 1.1, 1], | |
| duration: 300, | |
| easing: 'easeInOutQuad' | |
| }); | |
| }); | |
| } | |
| // Update prices every 2 seconds | |
| setInterval(updatePrices, 2000); | |
| // Add hover effects to buttons | |
| document.querySelectorAll('.quantum-button').forEach(button => { | |
| button.addEventListener('mouseenter', function() { | |
| anime({ | |
| targets: this, | |
| scale: 1.05, | |
| duration: 200, | |
| easing: 'easeOutQuad' | |
| }); | |
| }); | |
| button.addEventListener('mouseleave', function() { | |
| anime({ | |
| targets: this, | |
| scale: 1, | |
| duration: 200, | |
| easing: 'easeOutQuad' | |
| }); | |
| }); | |
| }); | |
| // Initialize Feather icons | |
| feather.replace(); | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Add loading animation | |
| window.addEventListener('load', () => { | |
| anime({ | |
| targets: 'body', | |
| opacity: [0, 1], | |
| duration: 1000, | |
| easing: 'easeOutQuad' | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |