Skip to content

Layout

HTML layout templates and page rendering utilities.

Provides the base page structure including sidebar navigation and main content area. All dashboard pages are rendered through render_page which wraps content in the standard layout with navigation and base styles.

SIDEBAR_HTML = '\n<aside class="sidebar">\n <div class="sidebar-header">\n <h1>OneSecondTrader</h1>\n <button class="sidebar-toggle" aria-label="Toggle sidebar">\n <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>\n </button>\n </div>\n <nav class="sidebar-nav">\n <a href="/explorer" class="{explorer_active}">\n <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>\n <span class="nav-label">Explorer</span>\n </a>\n <a href="/backtest" class="{backtest_active}">\n <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>\n <span class="nav-label">Backtest</span>\n </a>\n <a href="/splits" class="{splits_active}">\n <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"></path></svg>\n <span class="nav-label">Splits</span>\n </a>\n </nav>\n</aside>\n' module-attribute

render_sidebar(active='')

Render the sidebar navigation HTML.

Parameters:

Name Type Description Default
active str

Name of the currently active page for highlighting.

 ''

Returns:

Type Description
str

HTML string for the sidebar.
Source code in src/onesecondtrader/dashboard/layout.py 
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
def render_sidebar(active: str = "") -> str:
    """
    Render the sidebar navigation HTML.

    Parameters:
        active:
            Name of the currently active page for highlighting.

    Returns:
        HTML string for the sidebar.
    """
    return SIDEBAR_HTML.format(
        explorer_active="active" if active == "explorer" else "",
        backtest_active="active" if active == "backtest" else "",
        splits_active="active" if active == "splits" else "",
    )

render_page(title, content, active='')

Render a complete HTML page with layout.

Parameters:

Name Type Description Default
title str

Page title displayed in the browser tab.

 required
content str

HTML content to render in the main content area.

 required
active str

Name of the currently active page for sidebar highlighting.

 ''

Returns:

Type Description
str

Complete HTML document string.
Source code in src/onesecondtrader/dashboard/layout.py 
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
def render_page(title: str, content: str, active: str = "") -> str:
    """
    Render a complete HTML page with layout.

    Parameters:
        title:
            Page title displayed in the browser tab.
        content:
            HTML content to render in the main content area.
        active:
            Name of the currently active page for sidebar highlighting.

    Returns:
        Complete HTML document string.
    """
    sidebar = render_sidebar(active)
    return f"""<!DOCTYPE html>
<html>
<head>
    <title>{title} - OneSecondTrader</title>
    <link rel="stylesheet" href="/static/css/base.css">
</head>
<body>
    <script>if(sessionStorage.getItem('sidebarCollapsed')==='true')document.body.classList.add('collapsed')</script>
    {sidebar}
    <main class="main-content">
        <div class="container">
            {content}
        </div>
    </main>
    <script>
        (function() {{
            document.querySelector('.sidebar-toggle').addEventListener('click', function() {{
                document.body.classList.toggle('collapsed');
                sessionStorage.setItem('sidebarCollapsed', document.body.classList.contains('collapsed'));
            }});
            document.querySelectorAll('.sidebar-nav a').forEach(function(link) {{
                link.addEventListener('click', function() {{
                    sessionStorage.setItem('sidebarCollapsed', 'true');
                }});
            }});
        }})();
    </script>
</body>
</html>"""