Spaces:
Running
Running
Usar dados reais usando essa api import { CandleData } from '@/types/trading'; const API_BASE_URL = 'https://api.binance.com/api/v3'; export const fetchMarketData = async (symbol: string, timeframe: string): Promise<CandleData[]> => { try { console.log('Fetching market data for:', symbol); // Convert forex pair to Binance spot format const formattedSymbol = symbol === 'EURUSD' ? 'EURUSDT' : symbol; // Convert timeframe to interval format expected by Binance const interval = timeframe.replace('m', 'm').replace('h', 'h').replace('d', 'd'); // Get current timestamp const endTime = Date.now(); const startTime = endTime - (30 * 60 * 1000); // Last 30 minutes of data console.log('Making API request with:', { symbol: formattedSymbol, interval, startTime, endTime }); // Fetch real market data from Binance Spot API const response = await fetch( `${API_BASE_URL}/klines?symbol=${formattedSymbol}&interval=${interval}&startTime=${startTime}&endTime=${endTime}&limit=30` ); if (!response.ok) { const errorText = await response.text(); console.error('API Error Response:', errorText); throw new Error(`Failed to fetch market data: ${response.statusText}. ${errorText}`); } const data = await response.json(); // Transform Binance data to CandleData format const candles: CandleData[] = data.map((candle: any) => ({ timestamp: candle[0], open: parseFloat(candle[1]), high: parseFloat(candle[2]), low: parseFloat(candle[3]), close: parseFloat(candle[4]), volume: parseFloat(candle[5]) })); console.log('Processed market data:', candles); return candles; } catch (error) { console.error('Error fetching market data:', error); throw error; } }; - Follow Up Deployment
b40745e verified | <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NeuroTrade - Plataforma de Trading com IA</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> | |
| <script type="text/babel"> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#0f172a', | |
| secondary: '#1e293b', | |
| accent: '#3b82f6', | |
| success: '#10b981', | |
| danger: '#ef4444', | |
| warning: '#f59e0b' | |
| } | |
| } | |
| } | |
| } | |
| // API functions | |
| const API_BASE_URL = 'https://api.binance.com/api/v3'; | |
| const fetchMarketData = async (symbol, timeframe) => { | |
| try { | |
| console.log('Fetching market data for:', symbol); | |
| // Convert forex pair to Binance spot format | |
| const formattedSymbol = symbol === 'EURUSD' ? 'EURUSDT' : symbol; | |
| // Convert timeframe to interval format expected by Binance | |
| const interval = timeframe.replace('m', 'm').replace('h', 'h').replace('d', 'd'); | |
| // Get current timestamp | |
| const endTime = Date.now(); | |
| const startTime = endTime - (30 * 60 * 1000); // Last 30 minutes of data | |
| console.log('Making API request with:', { | |
| symbol: formattedSymbol, | |
| interval, | |
| startTime, | |
| endTime | |
| }); | |
| // Fetch real market data from Binance Spot API | |
| const response = await fetch( | |
| `${API_BASE_URL}/klines?symbol=${formattedSymbol}&interval=${interval}&startTime=${startTime}&endTime=${endTime}&limit=30` | |
| ); | |
| if (!response.ok) { | |
| const errorText = await response.text(); | |
| console.error('API Error Response:', errorText); | |
| throw new Error(`Failed to fetch market data: ${response.statusText}. ${errorText}`); | |
| } | |
| const data = await response.json(); | |
| // Transform Binance data to CandleData format | |
| const candles = data.map(candle => ({ | |
| timestamp: candle[0], | |
| open: parseFloat(candle[1]), | |
| high: parseFloat(candle[2]), | |
| low: parseFloat(candle[3]), | |
| close: parseFloat(candle[4]), | |
| volume: parseFloat(candle[5]) | |
| })); | |
| console.log('Processed market data:', candles); | |
| return candles; | |
| } catch (error) { | |
| console.error('Error fetching market data:', error); | |
| throw error; | |
| } | |
| }; | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #0f172a; | |
| color: #f1f5f9; | |
| } | |
| .neural-network { | |
| position: relative; | |
| height: 300px; | |
| width: 100%; | |
| overflow: hidden; | |
| } | |
| .neuron { | |
| position: absolute; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, #3b82f6, #60a5fa); | |
| box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-weight: bold; | |
| transition: all 0.3s ease; | |
| } | |
| .connection { | |
| position: absolute; | |
| background: rgba(59, 130, 246, 0.3); | |
| transform-origin: 0 0; | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } | |
| } | |
| .trade-card { | |
| transition: all 0.3s ease; | |
| border-left: 4px solid transparent; | |
| } | |
| .trade-buy { | |
| border-left-color: #10b981; | |
| } | |
| .trade-sell { | |
| border-left-color: #ef4444; | |
| } | |
| .glow { | |
| text-shadow: 0 0 10px rgba(59, 130, 246, 0.7); | |
| } | |
| .stat-card { | |
| background: linear-gradient(135deg, #1e293b, #0f172a); | |
| border: 1px solid #334155; | |
| border-radius: 12px; | |
| transition: transform 0.3s ease; | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .market-indicator { | |
| height: 8px; | |
| border-radius: 4px; | |
| background: linear-gradient(to right, #ef4444, #f59e0b, #10b981); | |
| } | |
| .progress-bar { | |
| height: 6px; | |
| border-radius: 3px; | |
| background: #334155; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: 3px; | |
| background: linear-gradient(to right, #3b82f6, #60a5fa); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Header --> | |
| <header class="bg-primary border-b border-secondary py-4 px-6 flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-lg bg-accent flex items-center justify-center"> | |
| <i class="fas fa-brain text-white text-xl"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold">Neuro<span class="text-accent">Trade</span></h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="hidden md:flex items-center space-x-2 bg-secondary px-4 py-2 rounded-lg"> | |
| <i class="fas fa-server text-success"></i> | |
| <span class="font-medium">Rede Neural Ativa</span> | |
| </div> | |
| <div class="flex items-center space-x-2 bg-secondary px-4 py-2 rounded-lg"> | |
| <i class="fas fa-sync-alt animate-spin text-accent"></i> | |
| <span class="font-medium">Treinando...</span> | |
| </div> | |
| <button class="bg-accent hover:bg-blue-600 text-white px-4 py-2 rounded-lg font-medium transition"> | |
| <i class="fas fa-cog mr-2"></i>Configurações | |
| </button> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Dashboard Stats --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="stat-card p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Taxa de Acerto</p> | |
| <h3 class="text-3xl font-bold mt-1">92.7%</h3> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-green-500/20 flex items-center justify-center"> | |
| <i class="fas fa-percentage text-success text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Objetivo: 90%</span> | |
| <span>+2.7%</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill w-[92.7%]"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="stat-card p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Trades Realizados</p> | |
| <h3 class="text-3xl font-bold mt-1">1,248</h3> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-blue-500/20 flex items-center justify-center"> | |
| <i class="fas fa-chart-line text-accent text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Hoje: 24</span> | |
| <span>+12%</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill w-[88%]"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="stat-card p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Lucro Total</p> | |
| <h3 class="text-3xl font-bold mt-1 text-success">$12,480</h3> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-green-500/20 flex items-center justify-center"> | |
| <i class="fas fa-dollar-sign text-success text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Mensal: $1,840</span> | |
| <span>+18.4%</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill w-[92%]"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="stat-card p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Último Trade</p> | |
| <h3 class="text-3xl font-bold mt-1 text-success">+2.4%</h3> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-yellow-500/20 flex items-center justify-center"> | |
| <i class="fas fa-clock text-warning text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Tempo restante:</span> | |
| <span>3:42 min</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill w-[38%]"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Neural Network Visualization --> | |
| <div class="lg:col-span-2"> | |
| <div class="stat-card p-6 mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">Visualização da Rede Neural</h2> | |
| <div class="flex space-x-2"> | |
| <span class="px-3 py-1 bg-blue-500/20 text-blue-300 rounded-full text-sm">Teste</span> | |
| <span class="px-3 py-1 bg-purple-500/20 text-purple-300 rounded-full text-sm">Validação</span> | |
| </div> | |
| </div> | |
| <div class="neural-network relative rounded-xl overflow-hidden bg-secondary border border-gray-700"> | |
| <!-- Canvas para a rede neural --> | |
| <canvas id="networkCanvas"></canvas> | |
| <!-- Camadas da rede neural --> | |
| <div class="absolute top-0 left-0 w-full h-full"> | |
| <!-- Input Layer --> | |
| <div class="absolute left-4 top-1/2 transform -translate-y-1/2 flex flex-col space-y-4"> | |
| <div class="neuron w-12 h-12 pulse">I1</div> | |
| <div class="neuron w-12 h-12 pulse">I2</div> | |
| <div class="neuron w-12 h-12 pulse">I3</div> | |
| <div class="neuron w-12 h-12 pulse">I4</div> | |
| </div> | |
| <!-- Hidden Layers --> | |
| <div class="absolute left-1/3 top-1/2 transform -translate-y-1/2 flex flex-col space-y-4"> | |
| <div class="neuron w-10 h-10">H1</div> | |
| <div class="neuron w-10 h-10">H2</div> | |
| <div class="neuron w-10 h-10">H3</div> | |
| <div class="neuron w-10 h-10">H4</div> | |
| <div class="neuron w-10 h-10">H5</div> | |
| </div> | |
| <div class="absolute left-2/3 top-1/2 transform -translate-y-1/2 flex flex-col space-y-4"> | |
| <div class="neuron w-10 h-10">H6</div> | |
| <div class="neuron w-10 h-10">H7</div> | |
| <div class="neuron w-10 h-10">H8</div> | |
| <div class="neuron w-10 h-10">H9</div> | |
| <div class="neuron w-10 h-10">H10</div> | |
| </div> | |
| <!-- Output Layer --> | |
| <div class="absolute right-4 top-1/2 transform -translate-y-1/2"> | |
| <div class="neuron w-14 h-14 glow">S</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 grid grid-cols-3 gap-4"> | |
| <div class="text-center"> | |
| <p class="text-gray-400 text-sm">Camada de Entrada</p> | |
| <p class="font-medium">Dados de Mercado</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-gray-400 text-sm">Camadas Ocultas</p> | |
| <p class="font-medium">Processamento</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-gray-400 text-sm">Camada de Saída</p> | |
| <p class="font-medium">Decisão de Trade</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Gráfico de Performance --> | |
| <div class="stat-card p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">Performance da Rede Neural</h2> | |
| <select class="bg-secondary border border-gray-700 rounded-lg px-3 py-1 text-sm"> | |
| <option>Últimos 30 dias</option> | |
| <option>Últimos 7 dias</option> | |
| <option>Últimas 24 horas</option> | |
| </select> | |
| </div> | |
| <!-- Real-time Price Chart --> | |
| <div class="stat-card p-6 mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">EUR/USD em Tempo Real</h2> | |
| <div class="flex items-center space-x-4"> | |
| <div class="text-2xl font-bold" id="latestPrice">1.08420</div> | |
| <div class="text-sm font-medium" id="priceChange">+0.24%</div> | |
| </div> | |
| </div> | |
| <canvas id="priceChart" height="200"></canvas> | |
| </div> | |
| <!-- Performance Chart --> | |
| <div class="stat-card p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">Performance da Rede Neural</h2> | |
| <select class="bg-secondary border border-gray-700 rounded-lg px-3 py-1 text-sm"> | |
| <option>Últimos 30 dias</option> | |
| <option>Últimos 7 dias</option> | |
| <option>Últimas 24 horas</option> | |
| </select> | |
| </div> | |
| <canvas id="performanceChart" height="200"></canvas> | |
| </div> | |
| </div> | |
| <!-- Painel Lateral --> | |
| <div> | |
| <!-- Próximo Trade --> | |
| <div class="stat-card p-6 mb-8"> | |
| <h2 class="text-xl font-bold mb-4">Próximo Trade</h2> | |
| <div class="text-center py-6"> | |
| <div class="text-5xl font-bold mb-2 glow">3:42</div> | |
| <p class="text-gray-400 mb-6">Até o próximo trade automático</p> | |
| <div class="bg-secondary rounded-xl p-4 mb-4"> | |
| <div class="flex justify-between mb-2"> | |
| <span>Ativo:</span> | |
| <span class="font-medium">EUR/USD</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span>Direção Prevista:</span> | |
| <span class="text-success font-medium">COMPRA</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Confiança:</span> | |
| <span class="font-medium">94.2%</span> | |
| </div> | |
| </div> | |
| <button class="w-full bg-accent hover:bg-blue-600 text-white py-3 rounded-lg font-medium transition"> | |
| <i class="fas fa-play mr-2"></i>Iniciar Trade Manual | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Últimos Trades --> | |
| <div class="stat-card p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold">Histórico de Trades</h2> | |
| <button class="text-accent text-sm"> | |
| Ver Todos <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4 max-h-96 overflow-y-auto pr-2"> | |
| <div class="trade-card trade-buy bg-secondary/50 p-4 rounded-lg border border-gray-700"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <div class="font-medium">EUR/USD</div> | |
| <div class="text-sm text-gray-400">Compra • 1.0842</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="font-medium text-success">+1.2%</div> | |
| <div class="text-sm text-gray-400">1 min atrás</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="trade-card trade-sell bg-secondary/50 p-4 rounded-lg border border-gray-700"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <div class="font-medium">GBP/JPY</div> | |
| <div class="text-sm text-gray-400">Venda • 172.35</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="font-medium text-danger">-0.8%</div> | |
| <div class="text-sm text-gray-400">3 min atrás</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="trade-card trade-buy bg-secondary/50 p-4 rounded-lg border border-gray-700"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <div class="font-medium">USD/CAD</div> | |
| <div class="text-sm text-gray-400">Compra • 1.3456</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="font-medium text-success">+2.1%</div> | |
| <div class="text-sm text-gray-400">7 min atrás</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="trade-card trade-buy bg-secondary/50 p-4 rounded-lg border border-gray-700"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <div class="font-medium">AUD/USD</div> | |
| <div class="text-sm text-gray-400">Compra • 0.6678</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="font-medium text-success">+0.9%</div> | |
| <div class="text-sm text-gray-400">12 min atrás</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="trade-card trade-sell bg-secondary/50 p-4 rounded-lg border border-gray-700"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <div class="font-medium">USD/CHF</div> | |
| <div class="text-sm text-gray-400">Venda • 0.8921</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="font-medium text-success">+1.5%</div> | |
| <div class="text-sm text-gray-400">15 min atrás</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="trade-card trade-buy bg-secondary/50 p-4 rounded-lg border border-gray-700"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <div class="font-medium">NZD/USD</div> | |
| <div class="text-sm text-gray-400">Compra • 0.5987</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="font-medium text-danger">-0.3%</div> | |
| <div class="text-sm text-gray-400">18 min atrás</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Estatísticas Avançadas --> | |
| <div class="stat-card p-6 mt-8"> | |
| <h2 class="text-xl font-bold mb-6">Estatísticas Avançadas</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-secondary/50 rounded-xl p-5 border border-gray-700"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center mr-3"> | |
| <i class="fas fa-wave-square text-accent"></i> | |
| </div> | |
| <h3 class="font-bold">Análise de Volume</h3> | |
| </div> | |
| <p class="text-gray-400 text-sm mb-3">Intenção de Compra Detectada</p> | |
| <div class="flex items-center"> | |
| <div class="w-full bg-gray-700 rounded-full h-2.5 mr-3"> | |
| <div class="bg-accent h-2.5 rounded-full" style="width: 78%"></div> | |
| </div> | |
| <span class="text-sm font-medium">78%</span> | |
| </div> | |
| </div> | |
| <div class="bg-secondary/50 rounded-xl p-5 border border-gray-700"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-lg bg-green-500/20 flex items-center justify-center mr-3"> | |
| <i class="fas fa-chart-bar text-success"></i> | |
| </div> | |
| <h3 class="font-bold">Previsibilidade do Mercado</h3> | |
| </div> | |
| <p class="text-gray-400 text-sm mb-3">Tendência Algorítmica</p> | |
| <div class="flex items-center"> | |
| <div class="w-full bg-gray-700 rounded-full h-2.5 mr-3"> | |
| <div class="bg-success h-2.5 rounded-full" style="width: 91%"></div> | |
| </div> | |
| <span class="text-sm font-medium">91%</span> | |
| </div> | |
| </div> | |
| <div class="bg-secondary/50 rounded-xl p-5 border border-gray-700"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center mr-3"> | |
| <i class="fas fa-bolt text-purple-400"></i> | |
| </div> | |
| <h3 class="font-bold">Reatividade da IA</h3> | |
| </div> | |
| <p class="text-gray-400 text-sm mb-3">Tempo Médio de Decisão</p> | |
| <div class="flex items-center"> | |
| <div class="w-full bg-gray-700 rounded-full h-2.5 mr-3"> | |
| <div class="bg-purple-500 h-2.5 rounded-full" style="width: 96%"></div> | |
| </div> | |
| <span class="text-sm font-medium">96%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-400">Indicador de Mercado</span> | |
| <span class="text-sm">Alta Volatilidade</span> | |
| </div> | |
| <div class="market-indicator relative"> | |
| <div class="absolute top-0 left-1/3 w-1 h-full bg-white"></div> | |
| <div class="absolute top-0 left-2/3 w-1 h-full bg-white"></div> | |
| <div class="absolute top-0 left-1/2 w-1 h-full bg-yellow-400"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-400 mt-1"> | |
| <span>Baixo Risco</span> | |
| <span>Médio Risco</span> | |
| <span>Alto Risco</span> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="border-t border-secondary py-6 px-4 mt-12"> | |
| <div class="container mx-auto text-center text-gray-500 text-sm"> | |
| <p>NeuroTrade © 2023 - Plataforma de Trading com Inteligência Artificial</p> | |
| <p class="mt-2">Desempenho passado não garante resultados futuros. Trading envolve riscos.</p> | |
| </div> | |
| </footer> | |
| <script type="text/babel"> | |
| // Initialize charts | |
| let priceChart; | |
| let performanceChart; | |
| // Initialize price chart | |
| const initPriceChart = () => { | |
| const ctx = document.getElementById('priceChart').getContext('2d'); | |
| priceChart = new Chart(ctx, { | |
| type: 'line', | |
| data: { | |
| labels: [], | |
| datasets: [{ | |
| label: 'EUR/USD Price', | |
| data: [], | |
| borderColor: '#3b82f6', | |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', | |
| borderWidth: 2, | |
| pointRadius: 0, | |
| fill: true, | |
| tension: 0.2 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| grid: { | |
| color: 'rgba(255, 255, 255, 0.1)' | |
| }, | |
| ticks: { | |
| color: '#94a3b8' | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| display: false | |
| }, | |
| ticks: { | |
| color: '#94a3b8' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| }; | |
| // Initialize performance chart | |
| const initPerformanceChart = () => { | |
| const ctx = document.getElementById('performanceChart').getContext('2d'); | |
| performanceChart = new Chart(ctx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'], | |
| datasets: [{ | |
| label: 'Taxa de Acerto (%)', | |
| data: [82, 85, 87, 89, 90, 91, 92, 91, 93, 92, 94, 92.7], | |
| borderColor: '#3b82f6', | |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', | |
| borderWidth: 2, | |
| pointBackgroundColor: '#3b82f6', | |
| fill: true, | |
| tension: 0.3 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: false, | |
| min: 80, | |
| max: 100, | |
| grid: { | |
| color: 'rgba(255, 255, 255, 0.1)' | |
| }, | |
| ticks: { | |
| color: '#94a3b8' | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| display: false | |
| }, | |
| ticks: { | |
| color: '#94a3b8' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| }; | |
| // Simular conexões na rede neural | |
| function drawNetworkConnections() { | |
| const canvas = document.getElementById('networkCanvas'); | |
| const ctx = canvas.getContext('2d'); | |
| // Ajustar tamanho do canvas ao container | |
| canvas.width = canvas.parentElement.clientWidth; | |
| canvas.height = canvas.parentElement.clientHeight; | |
| // Cores das conexões | |
| const colors = ['rgba(59, 130, 246, 0.1)', 'rgba(139, 92, 246, 0.1)', 'rgba(16, 185, 129, 0.1)']; | |
| // Desenhar conexões entre camadas | |
| const layers = [ | |
| {x: 50, y: [100, 150, 200, 250]}, // Input | |
| {x: 200, y: [80, 120, 160, 200, 240]}, // Hidden 1 | |
| {x: 350, y: [80, 120, 160, 200, 240]}, // Hidden 2 | |
| {x: 500, y: [160]} // Output | |
| ]; | |
| // Conexões entre camadas | |
| for (let i = 0; i < layers.length - 1; i++) { | |
| const currentLayer = layers[i]; | |
| const nextLayer = layers[i + 1]; | |
| currentLayer.y.forEach(y1 => { | |
| nextLayer.y.forEach(y2 => { | |
| ctx.beginPath(); | |
| ctx.moveTo(currentLayer.x, y1); | |
| ctx.lineTo(nextLayer.x, y2); | |
| ctx.strokeStyle = colors[Math.floor(Math.random() * colors.length)]; | |
| ctx.lineWidth = 0.5; | |
| ctx.stroke(); | |
| }); | |
| }); | |
| } | |
| } | |
| // Redesenhar conexões quando a janela for redimensionada | |
| window.addEventListener('resize', drawNetworkConnections); | |
| // Inicializar visualização da rede | |
| setTimeout(drawNetworkConnections, 100); | |
| // Animação de contagem regressiva | |
| let countdownTime = 222; // segundos | |
| function updateCountdown() { | |
| const minutes = Math.floor(countdownTime / 60); | |
| const seconds = countdownTime % 60; | |
| document.querySelector('.glow').textContent = | |
| `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`; | |
| countdownTime--; | |
| if (countdownTime < 0) countdownTime = 300; // Reset após 5 minutos | |
| setTimeout(updateCountdown, 1000); | |
| } | |
| updateCountdown(); | |
| // Simular atualização de dados | |
| setInterval(() => { | |
| // Simular novo trade | |
| const tradesContainer = document.querySelector('.max-h-96'); | |
| const firstTrade = tradesContainer.firstElementChild.cloneNode(true); | |
| tradesContainer.insertBefore(firstTrade, tradesContainer.firstChild); | |
| // Remover último trade se tiver mais de 10 | |
| if (tradesContainer.children.length > 10) { | |
| tradesContainer.removeChild(tradesContainer.lastElementChild); | |
| } | |
| // Atualizar estatísticas | |
| const accuracyElement = document.querySelector('.text-3xl.font-bold.mt-1'); | |
| const currentValue = parseFloat(accuracyElement.textContent.replace('%', '')); | |
| const newValue = (currentValue + (Math.random() * 0.2 - 0.1)).toFixed(1); | |
| accuracyElement.textContent = newValue + '%'; | |
| // Atualizar barra de progresso | |
| document.querySelector('.progress-fill').style.width = newValue + '%'; | |
| }, 5000); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=olywwe/testfincna" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |