admtracksteel/BrainsteelFin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add multi-asset sidebar (BTC, USD, XAU) with asset switching

Browse Source 
- Added sidebar navigation with 3 tabs: Bitcoin, Dólar, Ouro
- Added switchAsset() function to switch between assets
- Updated CSS with sidebar layout (fixed 200px sidebar)
- Updated script.js with asset state management
- Sync sidebar clock and status with main header
- BTC remains default active tab
This commit is contained in:
admtracksteel
2026-06-15 16:31:17 +00:00
parent e39c5586d7
commit 1e3f2e7199
3 changed files with 153 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/script.js
+36
View File
@@ -7,13 +7,44 @@
let autoMode = false;
let autoInterval = null;
let pollInterval = null;
let currentAsset = 'btc'; // 'btc', 'usd', 'xau'
const AGENT_EMOJIS = { brief: "📊", decio: "🎯", papert: "⚡", audit: "🔍" };
const AGENT_COLORS = { brief: "#4fc3f7", decio: "#ffd54f", papert: "#69f0ae", audit: "#b388ff" };
// ── Asset Switching ───────────────────────────────────────────────────────────
const ASSET_SYMBOLS = { btc: '₿', usd: '💵', xau: '🪙' };
const ASSET_LABELS = { btc: 'Bitcoin', usd: 'Dólar', xau: 'Ouro' };
const ASSET_PAIRS = { btc: 'BTC/USD', usd: 'USD/BRL', xau: 'XAU/USD' };
function switchAsset(asset, btnEl) {
if (asset === currentAsset) return;
currentAsset = asset;
// Update sidebar buttons
document.querySelectorAll('.sidebar-btn').forEach(b => b.classList.remove('active'));
if (btnEl) btnEl.classList.add('active');
// Update header title dynamically
const titleEl = document.querySelector('.logo-text strong');
if (titleEl) titleEl.textContent = asset.toUpperCase();
// Reload data for new asset
loadConfig();
loadPortfolio();
loadMultiStratChart('live');
addLog('SYS', `Ativo alterado para ${ASSET_LABELS[asset]} (${ASSET_PAIRS[asset]})`);
}
// ── Init ─────────────────────────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', () => {
updateClock();
setInterval(updateClock, 1000);
// Sidebar clock
setInterval(() => {
const now = new Date();
const el = document.getElementById('sidebarClock');
if (el) el.textContent = now.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
}, 1000);
startPolling();
loadAgentRegistry();
loadMetrics();
@@ -75,6 +106,11 @@ function updateStatus(text, type) {
const txt = document.getElementById('statusText');
if (dot) dot.className = `status-dot ${type}`;
if (txt) txt.textContent = text;
// Sync sidebar status
const sidebarDot = document.getElementById('sidebarStatusDot');
const sidebarTxt = document.getElementById('sidebarStatusText');
if (sidebarDot) sidebarDot.className = `status-dot ${type}`;
if (sidebarTxt) sidebarTxt.textContent = text;
}
// ── Pipeline ─────────────────────────────────────────────────────────────────
static/style.css
+83 -6
View File
@@ -15,27 +15,104 @@
--shadow: 0 8px 32px rgba(0,0,0,0.4);
}
/* ── Reset & Base ───────────────────────────────────────── */
/* ── Reset & Base ───────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* ── Sidebar Layout ──────────────────────────────────── */
body {
display: flex;
min-height: 100vh;
font-family: 'Exo 2', 'Noto Sans JP', sans-serif;
background: var(--bg-dark);
color: var(--text-primary);
min-height: 100vh;
overflow-x: hidden;
}
/* ── Dashboard Layout ───────────────────────────────────── */
.dashboard {
/* ── Sidebar ─────────────────────────────────────────── */
.sidebar {
width: 200px;
min-height: 100vh;
background: var(--bg-card);
border-right: 1px solid rgba(79,195,247,0.1);
display: flex;
flex-direction: column;
padding: 20px 0;
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 100;
}
.sidebar-logo {
display: flex;
align-items: center;
gap: 10px;
padding: 0 16px 20px;
border-bottom: 1px solid rgba(255,255,255,0.05);
margin-bottom: 20px;
}
.sidebar-logo-icon { font-size: 1.8rem; }
.sidebar-logo-text { font-size: 0.9rem; line-height: 1.2; color: var(--text-primary); }
.sidebar-logo-text strong { color: var(--accent-blue); }
.sidebar-nav {
display: flex;
flex-direction: column;
gap: 4px;
padding: 0 10px;
flex: 1;
}
.sidebar-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 14px 8px;
border: none;
border-radius: 12px;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s;
text-align: center;
}
.sidebar-btn:hover {
background: var(--bg-card-hover);
color: var(--text-primary);
}
.sidebar-btn.active {
background: rgba(79,195,247,0.1);
color: var(--accent-blue);
border: 1px solid rgba(79,195,247,0.2);
}
.sidebar-icon { font-size: 1.6rem; }
.sidebar-label { font-size: 0.8rem; font-weight: 600; }
.sidebar-pair { font-size: 0.65rem; opacity: 0.6; }
.sidebar-footer {
padding: 16px;
border-top: 1px solid rgba(255,255,255,0.05);
text-align: center;
}
.sidebar-clock { font-size: 1.1rem; color: var(--accent-blue); margin-bottom: 8px; }
.sidebar-status { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.75rem; color: var(--text-secondary); }
/* ── Main Content ────────────────────────────────────── */
.main-content {
margin-left: 200px;
flex: 1;
padding: 20px;
max-width: calc(100vw - 200px);
}
.main-content .dashboard {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
display: flex;
flex-direction: column;
gap: 24px;
}
/* ── Header ──────────────────────────────────────────────── */
/* ── Header ──────────────────────────────────────────── */
.header {
display: flex;
align-items: center;
templates/index.html
+34 -1
View File
@@ -8,7 +8,40 @@
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="dashboard">
<!-- Sidebar -->
<nav class="sidebar" id="sidebar">
<div class="sidebar-logo">
<span class="sidebar-logo-icon">🏢</span>
<div class="sidebar-logo-text">BrainSteel<br><strong>Fin</strong></div>
</div>
<div class="sidebar-nav">
<button class="sidebar-btn active" onclick="switchAsset('btc', this)" data-asset="btc">
<span class="sidebar-icon">₿</span>
<span class="sidebar-label">Bitcoin</span>
<span class="sidebar-pair">BTC/USD</span>
</button>
<button class="sidebar-btn" onclick="switchAsset('usd', this)" data-asset="usd">
<span class="sidebar-icon">💵</span>
<span class="sidebar-label">Dólar</span>
<span class="sidebar-pair">USD/BRL</span>
</button>
<button class="sidebar-btn" onclick="switchAsset('xau', this)" data-asset="xau">
<span class="sidebar-icon">🪙</span>
<span class="sidebar-label">Ouro</span>
<span class="sidebar-pair">XAU/USD</span>
</button>
</div>
<div class="sidebar-footer">
<div class="sidebar-clock" id="sidebarClock"></div>
<div class="sidebar-status">
<span class="status-dot" id="sidebarStatusDot"></span>
<span id="sidebarStatusText">Online</span>
</div>
</div>
</nav>
<!-- Main Content -->
<div class="main-content" id="mainContent">
<!-- Header -->
<header class="header">
<div class="logo">