Add shared UI shell and list component

Co-authored-by: Copilot <[email protected]>
This commit is contained in:
Mathieu Moran
2026-08-09 18:03:32 -04:00
co-authored by Copilot
parent 606f67d077
commit c367504c13
7 changed files with 253 additions and 218 deletions
+79
View File
@@ -0,0 +1,79 @@
<!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{% 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">
<div id="wrapper">
<nav class="navbar align-items-start sidebar sidebar-dark accordion bg-gradient-primary p-0 navbar-dark app-sidebar">
<div class="container-fluid d-flex flex-column p-0">
<a class="navbar-brand d-flex justify-content-center align-items-center sidebar-brand m-0" href="{{ url_for('index') }}">
<div class="sidebar-brand-icon rotate-n-15"><i class="fas fa-car"></i></div>
<div id="index-car-model" class="sidebar-brand-text mx-3"><span>{{ car.model }}</span></div>
</a>
<hr class="sidebar-divider my-0">
<ul class="navbar-nav text-light" id="accordionSidebar">
<li class="nav-item">
<a class="nav-link{% if request.endpoint == 'index' %} active{% endif %}" href="{{ url_for('index') }}">
<i class="fas fa-tachometer-alt"></i><span>Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link{% if request.endpoint == 'dash' %} active{% endif %}" href="{{ url_for('dash') }}">
<i class="fas fa-video"></i><span>Dashcam</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link{% if request.endpoint == 'dtc' %} active{% endif %}" href="{{ url_for('dtc') }}">
<i class="fas fa-exclamation-triangle"></i><span>DTC</span>
</a>
</li>
</ul>
<div class="text-center d-none d-md-inline">
<button class="btn rounded-circle border-0" id="sidebarToggle" type="button" aria-label="Toggle sidebar"></button>
</div>
</div>
</nav>
<div class="d-flex flex-column" id="content-wrapper">
<div id="content">
<nav class="navbar navbar-expand bg-white shadow mb-4 topbar static-top navbar-light">
<div class="container-fluid">
<button class="btn btn-link d-md-none rounded-circle me-3" id="sidebarToggleTop" type="button" aria-label="Toggle sidebar">
<i class="fas fa-bars"></i>
</button>
<div class="ms-auto d-flex align-items-center">
<span id="index-pp" class="d-none d-sm-inline me-2 text-gray-600 small">{{ account.name }}</span>
<img class="border rounded-circle img-profile" src="{{ url_for('static', filename='img/yaris.png') }}" alt="">
</div>
</div>
</nav>
<main class="container-fluid">
{% block content %}{% endblock %}
</main>
</div>
<footer class="bg-white sticky-footer">
<div class="container my-auto">
<div class="text-center my-auto copyright"><span>Copyright © yaris vroom vroom de course 2023</span></div>
</div>
</footer>
</div>
<a class="border rounded d-inline scroll-to-top" href="#page-top" aria-label="Back to top">
<i class="fas fa-angle-up"></i>
</a>
</div>
<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>
<script src="{{ url_for('static', filename='js/data-list.js') }}"></script>
{% block scripts %}{% endblock %}
</body>
</html>