Full site structure — standalone pages, dashboard modules, lazy-loading flow
LEGEND
Standalone page (direct URL)
Dashboard tab (lazy-loaded)
Sidecar JS/CSS
Shared resource
Arrows → navigation / lazy-load
SHARED RESOURCES
css/style.css
js/main.js (i18n + UI)
sw.js (Service Worker)
js/i18n-data.js + i18n-core.js
STANDALONE PAGES (direct URL)
/index.html
Main landing page
/login.html + /register.html
Auth pages (JWT)
/check.html
Test Your Idea
/backtester.html
Standalone backtester
/live/index.html
Live trading page
/research/*.html
Research pages
/forgot-password.html
Password reset / verify
nav link →
→ /dashboard/#test-idea
→ /dashboard/#backtester
DASHBOARD (SPA — /dashboard/index.html)
/dashboard/index.html
Shell: sidebar + topbar
Sidebar nav (13 items)
data-section + hash routing
Topbar
Title + user-badge + lang?
hashchange handler
#backtester → click → lazy-load
DASHBOARD TABS (lazy-loaded)
#dashboard
(inline HTML)
#backtester
→ backtester-content.html
#live
→ live-content.html
#strategies
→ strategies-content.html
#test-idea
iframe → /check.html?embed=1
#lab, #nme, #journal
#profile, #preferences
#backtests, #roadmap
#research (inline)
SIDECAR FILES (loaded by dashboard tabs)
backtester-content.html
(HTML partial)
backtester.v2.js
(JS logic)
live-content.html
(HTML partial)
live-dash.v2.js
(JS logic)
strategies-content.html
(HTML partial)
BACKEND API (FastAPI — localhost:8510)
/api/auth/* (JWT auth)
(login, register, me, logout)
/api/backtest/*
(run, optimize, monte-carlo, walk-forward)
/api/idea/*
(translate, check — AI check)
/api/connections/*
(exchange connections, bots)
⚠ PROBLEM AREAS (why changes ripple)
1. Topbar layout: h1 + user-badge + [NEW ELEMENT] — flex row
Добавление select в topbar меняет его высоту → все секции (.dash-main padding-top) съезжают.
2. CSS specificity: ID-селекторы (#sec-*) перебивают class-селекторы (.dashboard-section.active)
Новый CSS для секции может случайно применяться ко всем (как было с #sec-test-idea { display: flex }).
🔑 Key Insight: Layout Ripple Effect
Topbar is a flex row : [`h1` · `user-badge`]. Adding a 3rd element (lang select) changes its height → shifts ALL content below because .dash-main uses padding: 28px 36px (not flex-based)
Dashboard sections use display: none/block. Any new CSS with #sec-* ID selector overrides the class because ID > class specificity
Standalone pages (/backtester.html, /check.html) have their own CSS/JS. Dashboard lazy-loads partials. Changes to one don't affect the other — unless you add global CSS/JS to dashboard/index.html
Solution: Don't add elements to topbar. Put lang-selector inside user-badge or as a separate compact element that doesn't change row height
📐 Layout Math
.dash-main = margin-left: var(--dash-sidebar) (240px) + padding: 28px 36px.dash-topbar = flex row, padding-bottom: 14px, margin-bottom: 28pxTopbar height ≈ 52px (h1 line-height + padding). Adding a 28px select = topbar becomes 72px → content shifts 20px down
#sec-test-idea uses negative margins to compensate: margin: -28px -36px → if topbar grows, calc breaks