diff --git a/src/admin-dashboard.js b/src/admin-dashboard.js index 48cf746..d0ae630 100644 --- a/src/admin-dashboard.js +++ b/src/admin-dashboard.js @@ -15,6 +15,111 @@ function buildAdminDashboardHTML(user) { const today = now.toISOString().slice(0, 10); const pageCSS = ` + /* Trading Terminal - Live Rates */ + .trading-terminal { + background: linear-gradient(135deg, #0F1923 0%, #1A2332 50%, #0D1B2A 100%); + border-top: 1px solid rgba(0,255,136,0.15); + border-bottom: 1px solid rgba(0,255,136,0.15); + padding: 16px 40px; + position: relative; + overflow: hidden; + } + .trading-terminal::before { + content: ''; + position: absolute; top: 0; left: 0; right: 0; height: 1px; + background: linear-gradient(90deg, transparent, rgba(0,255,136,0.3), transparent); + } + .trading-terminal::after { + content: ''; + position: absolute; bottom: 0; left: 0; right: 0; height: 1px; + background: linear-gradient(90deg, transparent, rgba(0,255,136,0.3), transparent); + } + .live-rate-bar { + display: flex; align-items: center; justify-content: center; gap: 20px; + max-width: 1600px; margin: 0 auto; + } + .terminal-title { + font-size: 10px; font-weight: 700; color: rgba(0,255,136,0.6); + text-transform: uppercase; letter-spacing: 2px; margin-right: 8px; + font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + } + .live-rate-dot { + width: 7px; height: 7px; border-radius: 50%; background: #00FF88; + display: inline-block; animation: blink 1.5s infinite; + box-shadow: 0 0 6px rgba(0,255,136,0.6); + } + @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } } + .rate-pair-group { + display: flex; align-items: center; gap: 8px; + background: rgba(255,255,255,0.03); + border: 1px solid rgba(255,255,255,0.06); + border-radius: 8px; padding: 8px 14px; + } + .rate-pair-label { + font-size: 11px; font-weight: 800; color: rgba(255,255,255,0.35); + text-transform: uppercase; letter-spacing: 1px; writing-mode: vertical-rl; + text-orientation: mixed; font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + } + .live-rate-btn { + display: flex; flex-direction: column; align-items: center; gap: 1px; + padding: 8px 18px; border-radius: 6px; border: 1px solid transparent; + font-family: inherit; font-size: 14px; font-weight: 700; cursor: default; + transition: all 0.25s; min-width: 150px; justify-content: center; + position: relative; + } + .rate-flags { font-size: 9px; opacity: 0.5; letter-spacing: 1px; line-height: 1; } + .live-rate-btn.compra { + background: rgba(0,255,136,0.08); color: #00FF88; + border-color: rgba(0,255,136,0.2); + } + .live-rate-btn.compra:hover { background: rgba(0,255,136,0.14); } + .live-rate-btn.venda { + background: rgba(255,68,68,0.08); color: #FF4444; + border-color: rgba(255,68,68,0.2); + } + .live-rate-btn.venda:hover { background: rgba(255,68,68,0.14); } + .live-rate-btn .rate-value { + font-size: 22px; font-weight: 800; letter-spacing: -0.5px; + font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + font-variant-numeric: tabular-nums; + text-shadow: 0 0 12px currentColor; + } + .live-rate-btn .rate-type { + font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px; + opacity: 0.5; font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + } + .live-rate-btn.pulse .rate-value { animation: ratePulse 0.4s ease; } + @keyframes ratePulse { + 0% { transform: scale(1); text-shadow: 0 0 12px currentColor; } + 50% { transform: scale(1.06); text-shadow: 0 0 24px currentColor, 0 0 48px currentColor; } + 100% { transform: scale(1); text-shadow: 0 0 12px currentColor; } + } + .live-rate-time { + font-size: 10px; color: rgba(255,255,255,0.25); + font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + letter-spacing: 0.5px; + } + @media (max-width: 768px) { + .trading-terminal { padding: 12px 16px; } + .live-rate-bar { flex-wrap: wrap; gap: 10px; justify-content: center; } + .terminal-title { display: none; } + .rate-pair-group { padding: 8px 12px; width: 100%; justify-content: center; } + .live-rate-btn { min-width: 120px; padding: 8px 14px; flex: 1; } + .live-rate-btn .rate-value { font-size: 18px; } + .live-rate-time { width: 100%; text-align: center; } + } + @media (max-width: 480px) { + .trading-terminal { padding: 10px 12px; } + .live-rate-bar { gap: 8px; flex-direction: column; align-items: center; } + .rate-pair-group { padding: 10px; gap: 6px; } + .rate-pair-label { writing-mode: horizontal-tb; font-size: 10px; } + .live-rate-btn { min-width: 110px; padding: 8px 12px; } + .live-rate-btn .rate-value { font-size: 16px; } + .live-rate-btn .rate-type { font-size: 8px; } + .rate-flags { font-size: 9px; } + .live-rate-time { font-size: 9px; } + } + /* Filter Bar */ .filter-bar { background: var(--card); @@ -347,6 +452,29 @@ ${buildHead('Dashboard Corporate', pageCSS, pageScripts)} ${buildHeader({ role: role, userName: user.nome, activePage: 'dashboard' })} +
+
+ + Live Rates + +
+ USD + + +
+ + -- +
+
+
Periodo: @@ -577,6 +705,30 @@ async function loadRanking() { function loadAllData() { updatePeriodInfo(); loadKPIs(); loadTrend(); loadRanking(); } document.addEventListener('DOMContentLoaded', loadAllData); + +// Live Rates +let _lastUsdBid = null, _lastUsdAsk = null; +function pulseEl(el) { el.closest('.live-rate-btn').classList.add('pulse'); setTimeout(() => el.closest('.live-rate-btn').classList.remove('pulse'), 500); } +async function fetchLiveRate() { + try { + const resp = await fetch('/api/cotacao'); + const json = await resp.json(); + const usd = json.USDBRL; + if (usd) { + const bidRaw = parseFloat(usd.bid), askRaw = parseFloat(usd.ask); + const bid = bidRaw * (1 - 0.0043); + const ask = askRaw * (1 + 0.0005); + const elC = document.getElementById('rateUsdCompra'), elV = document.getElementById('rateUsdVenda'); + elC.textContent = bid.toFixed(4); elV.textContent = ask.toFixed(4); + if (_lastUsdBid !== null && bidRaw !== _lastUsdBid) pulseEl(elC); + if (_lastUsdAsk !== null && askRaw !== _lastUsdAsk) pulseEl(elV); + _lastUsdBid = bidRaw; _lastUsdAsk = askRaw; + } + document.getElementById('rateTime').textContent = new Date().toLocaleTimeString('pt-BR'); + } catch (e) { /* retry next cycle */ } +} +fetchLiveRate(); +setInterval(fetchLiveRate, 3000); <\/script> `; diff --git a/src/admin-home.js b/src/admin-home.js index 87c5113..6e7cad9 100644 --- a/src/admin-home.js +++ b/src/admin-home.js @@ -29,6 +29,91 @@ function buildAdminHomeHTML(stats, user) { const pageScripts = ``; const pageCSS = ` + /* Trading Terminal - Live Rates */ + .trading-terminal { + background: linear-gradient(135deg, #0F1923 0%, #1A2332 50%, #0D1B2A 100%); + border-top: 1px solid rgba(0,255,136,0.15); + border-bottom: 1px solid rgba(0,255,136,0.15); + padding: 16px 40px; + position: relative; + overflow: hidden; + } + .trading-terminal::before { + content: ''; + position: absolute; top: 0; left: 0; right: 0; height: 1px; + background: linear-gradient(90deg, transparent, rgba(0,255,136,0.3), transparent); + } + .trading-terminal::after { + content: ''; + position: absolute; bottom: 0; left: 0; right: 0; height: 1px; + background: linear-gradient(90deg, transparent, rgba(0,255,136,0.3), transparent); + } + .live-rate-bar { + display: flex; align-items: center; justify-content: center; gap: 20px; + max-width: 1600px; margin: 0 auto; + } + .terminal-title { + font-size: 10px; font-weight: 700; color: rgba(0,255,136,0.6); + text-transform: uppercase; letter-spacing: 2px; margin-right: 8px; + font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + } + .live-rate-dot { + width: 7px; height: 7px; border-radius: 50%; background: #00FF88; + display: inline-block; animation: blink 1.5s infinite; + box-shadow: 0 0 6px rgba(0,255,136,0.6); + } + @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } } + .rate-pair-group { + display: flex; align-items: center; gap: 8px; + background: rgba(255,255,255,0.03); + border: 1px solid rgba(255,255,255,0.06); + border-radius: 8px; padding: 8px 14px; + } + .rate-pair-label { + font-size: 11px; font-weight: 800; color: rgba(255,255,255,0.35); + text-transform: uppercase; letter-spacing: 1px; writing-mode: vertical-rl; + text-orientation: mixed; font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + } + .live-rate-btn { + display: flex; flex-direction: column; align-items: center; gap: 1px; + padding: 8px 18px; border-radius: 6px; border: 1px solid transparent; + font-family: inherit; font-size: 14px; font-weight: 700; cursor: default; + transition: all 0.25s; min-width: 150px; justify-content: center; + position: relative; + } + .rate-flags { font-size: 9px; opacity: 0.5; letter-spacing: 1px; line-height: 1; } + .live-rate-btn.compra { + background: rgba(0,255,136,0.08); color: #00FF88; + border-color: rgba(0,255,136,0.2); + } + .live-rate-btn.compra:hover { background: rgba(0,255,136,0.14); } + .live-rate-btn.venda { + background: rgba(255,68,68,0.08); color: #FF4444; + border-color: rgba(255,68,68,0.2); + } + .live-rate-btn.venda:hover { background: rgba(255,68,68,0.14); } + .live-rate-btn .rate-value { + font-size: 22px; font-weight: 800; letter-spacing: -0.5px; + font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + font-variant-numeric: tabular-nums; + text-shadow: 0 0 12px currentColor; + } + .live-rate-btn .rate-type { + font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px; + opacity: 0.5; font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + } + .live-rate-btn.pulse .rate-value { animation: ratePulse 0.4s ease; } + @keyframes ratePulse { + 0% { transform: scale(1); text-shadow: 0 0 12px currentColor; } + 50% { transform: scale(1.06); text-shadow: 0 0 24px currentColor, 0 0 48px currentColor; } + 100% { transform: scale(1); text-shadow: 0 0 12px currentColor; } + } + .live-rate-time { + font-size: 10px; color: rgba(255,255,255,0.25); + font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + letter-spacing: 0.5px; + } + .date-banner { background: var(--card); border-radius: 12px; padding: 16px 24px; margin-bottom: 24px; border: 1px solid var(--border); @@ -105,6 +190,13 @@ function buildAdminHomeHTML(stats, user) { .detail-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { + .trading-terminal { padding: 12px 16px; } + .live-rate-bar { flex-wrap: wrap; gap: 10px; justify-content: center; } + .terminal-title { display: none; } + .rate-pair-group { padding: 8px 12px; width: 100%; justify-content: center; } + .live-rate-btn { min-width: 120px; padding: 8px 14px; flex: 1; } + .live-rate-btn .rate-value { font-size: 18px; } + .live-rate-time { width: 100%; text-align: center; } .kpi-grid, .charts-grid { grid-template-columns: 1fr; } .date-banner { flex-direction: column; @@ -127,6 +219,15 @@ function buildAdminHomeHTML(stats, user) { .detail-row { font-size: 12px; padding: 8px 0; } } @media (max-width: 480px) { + .trading-terminal { padding: 10px 12px; } + .live-rate-bar { gap: 8px; flex-direction: column; align-items: center; } + .rate-pair-group { padding: 10px; gap: 6px; } + .rate-pair-label { writing-mode: horizontal-tb; font-size: 10px; } + .live-rate-btn { min-width: 110px; padding: 8px 12px; } + .live-rate-btn .rate-value { font-size: 16px; } + .live-rate-btn .rate-type { font-size: 8px; } + .rate-flags { font-size: 9px; } + .live-rate-time { font-size: 9px; } .kpi-value { font-size: 24px; } .chart-wrap { height: 180px; } .detail-card h3 .icon { width: 24px; height: 24px; font-size: 12px; } @@ -143,6 +244,29 @@ ${buildHead('Home', pageCSS, pageScripts)} ${buildHeader({ role: role, userName: user.nome, activePage: 'home' })} +
+
+ + Live Rates + +
+ USD + + +
+ + -- +
+
+

${hoje}

@@ -354,6 +478,30 @@ new Chart(document.getElementById('chartVol'), { } } }); + +// Live Rates +let _lastUsdBid = null, _lastUsdAsk = null; +function pulseEl(el) { el.closest('.live-rate-btn').classList.add('pulse'); setTimeout(() => el.closest('.live-rate-btn').classList.remove('pulse'), 500); } +async function fetchLiveRate() { + try { + const resp = await fetch('/api/cotacao'); + const json = await resp.json(); + const usd = json.USDBRL; + if (usd) { + const bidRaw = parseFloat(usd.bid), askRaw = parseFloat(usd.ask); + const bid = bidRaw * (1 - 0.0043); + const ask = askRaw * (1 + 0.0005); + const elC = document.getElementById('rateUsdCompra'), elV = document.getElementById('rateUsdVenda'); + elC.textContent = bid.toFixed(4); elV.textContent = ask.toFixed(4); + if (_lastUsdBid !== null && bidRaw !== _lastUsdBid) pulseEl(elC); + if (_lastUsdAsk !== null && askRaw !== _lastUsdAsk) pulseEl(elV); + _lastUsdBid = bidRaw; _lastUsdAsk = askRaw; + } + document.getElementById('rateTime').textContent = new Date().toLocaleTimeString('pt-BR'); + } catch (e) { /* retry next cycle */ } +} +fetchLiveRate(); +setInterval(fetchLiveRate, 3000); `;