yaris-obd/server/templates/base.html

<!DOCTYPE html>
<html data-bs-theme="light" lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>{% block title %}Yaris OBD – Remote{% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='yaris.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='fonts/fontawesome-all.min.css') }}">
    {% block styles %}{% endblock %}
</head>

<body id="page-top">

    {# ── Desktop sidebar ─────────────────────────────────────────────────── #}
    <nav id="app-sidebar" class="app-sidebar d-none d-md-flex flex-column">
        <a class="sidebar-brand" href="{{ url_for('portal_index') }}" aria-label="Home">
            <i class="fas fa-car sidebar-brand-icon"></i>
            <span class="sidebar-brand-text">Yaris OBD</span>
        </a>
        <div class="px-3 pb-1">
            <span class="badge bg-warning text-dark w-100 text-center" style="font-size:.65rem;letter-spacing:.04em;">
                <i class="fas fa-cloud fa-fw"></i> Remote server
            </span>
        </div>
        <hr class="sidebar-divider">
        <ul class="nav flex-column flex-grow-1">
            <li class="nav-item">
                <a class="nav-link{% if request.endpoint == 'portal_index' %} active{% endif %}" href="{{ url_for('portal_index') }}">
                    <i class="fas fa-chart-line fa-fw"></i><span>Overview</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link{% if request.endpoint == 'portal_history' %} active{% endif %}" href="{{ url_for('portal_history') }}">
                    <i class="fas fa-route fa-fw"></i><span>Trip history</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link{% if request.endpoint == 'portal_dashcam' %} active{% endif %}" href="{{ url_for('portal_dashcam') }}">
                    <i class="fas fa-video fa-fw"></i><span>Dashcam archive</span>
                </a>
            </li>
        </ul>
        <div class="px-3 pb-2 mt-auto text-muted" style="font-size:.75rem;">
            <i class="fas fa-user fa-fw"></i> {{ current_user.username }}
            &nbsp;·&nbsp;
            <a href="{{ url_for('change_password_page') }}" class="text-muted">Password</a>
            &nbsp;·&nbsp;
            <a href="{{ url_for('logout') }}" class="text-muted">Logout</a>
        </div>
        <button class="sidebar-collapse-btn" id="sidebarToggle" type="button" aria-label="Collapse sidebar">
            <i class="fas fa-chevron-left"></i>
        </button>
    </nav>

    {# ── Main content area ────────────────────────────────────────────────── #}
    <div id="content-wrapper">

        {# Top bar #}
        <nav class="topbar navbar navbar-light bg-white shadow-sm">
            <div class="container-fluid px-3 gap-2">
                <a class="navbar-brand d-flex d-md-none align-items-center gap-2 text-decoration-none" href="{{ url_for('portal_index') }}">
                    <i class="fas fa-car text-primary"></i>
                    <span class="fw-bold text-dark">Yaris OBD</span>
                    <span class="badge bg-warning text-dark ms-1" style="font-size:.6rem;">Remote</span>
                </a>
                <div class="ms-auto d-flex align-items-center gap-2">
                    <span class="text-muted small d-none d-sm-inline">{{ current_user.username }}</span>
                    <a href="{{ url_for('logout') }}" class="btn btn-outline-secondary btn-sm" title="Logout">
                        <i class="fas fa-sign-out-alt fa-fw"></i>
                    </a>
                </div>
            </div>
        </nav>

        <main class="container-fluid px-3 px-md-4 main-content">
            {% block content %}{% endblock %}
        </main>

        <footer class="bg-white border-top text-center py-3 small text-muted d-none d-md-block">
            &copy; vroom vroom yaris de course 2023 &mdash; remote server
        </footer>
    </div>

    {# ── Mobile bottom navigation ──────────────────────────────────────────── #}
    <nav class="mobile-bottom-nav d-flex d-md-none" aria-label="Main navigation">
        <a class="mobile-nav-item{% if request.endpoint == 'portal_index' %} active{% endif %}" href="{{ url_for('portal_index') }}">
            <i class="fas fa-chart-line"></i>
            <span>Overview</span>
        </a>
        <a class="mobile-nav-item{% if request.endpoint == 'portal_history' %} active{% endif %}" href="{{ url_for('portal_history') }}">
            <i class="fas fa-route"></i>
            <span>History</span>
        </a>
        <a class="mobile-nav-item{% if request.endpoint == 'portal_dashcam' %} active{% endif %}" href="{{ url_for('portal_dashcam') }}">
            <i class="fas fa-video"></i>
            <span>Dashcam</span>
        </a>
        <a class="mobile-nav-item" href="{{ url_for('logout') }}">
            <i class="fas fa-sign-out-alt"></i>
            <span>Logout</span>
        </a>
    </nav>

    <script src="{{ url_for('static', filename='bootstrap/js/bootstrap.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/bs-init.js') }}"></script>
    <script src="{{ url_for('static', filename='js/theme.js') }}"></script>

    {# ── Shared confirmation modal ─────────────────────────────────────────── #}
    <div class="modal fade" id="confirm-modal" tabindex="-1" aria-labelledby="confirm-modal-label" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirm-modal-label">Confirm delete</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="confirm-modal-body">Are you sure?</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirm-modal-ok">Delete</button>
                </div>
            </div>
        </div>
    </div>
    <script>
    // Global helper: show confirmation modal, resolve true/false on user choice.
    window.confirmDelete = function(message) {
        return new Promise(function(resolve) {
            const modal = document.getElementById('confirm-modal');
            document.getElementById('confirm-modal-body').textContent = message;
            const bsModal = bootstrap.Modal.getOrCreate(modal);
            const okBtn = document.getElementById('confirm-modal-ok');
            function onOk() { cleanup(); resolve(true); }
            function onHide() { cleanup(); resolve(false); }
            function cleanup() {
                okBtn.removeEventListener('click', onOk);
                modal.removeEventListener('hidden.bs.modal', onHide);
                bsModal.hide();
            }
            okBtn.addEventListener('click', onOk);
            modal.addEventListener('hidden.bs.modal', onHide, { once: true });
            bsModal.show();
        });
    };
    </script>
    {% block scripts %}{% endblock %}
</body>

</html>