Phase 23: UI redesign — responsive mobile + desktop layout

- Replace SB Admin 2 sidebar with a clean fixed sidebar (desktop)
  and a sticky bottom tab navigation (mobile, ≤767px)
- Sidebar collapses to icon-only mode with state persisted in localStorage
- Logo is a functional home link on all viewports
- Mobile: full-width content, bottom nav replaces sidebar
- Dashboard: 6 OBD stat cards (status, speed, RPM, coolant, throttle, fuel)
  wired to live socket events; removed all placeholder buttons/dropdowns
- GPS info section cleaned up (lat/lon display instead of X/Y paragraphs)
- DTC page: live /api/dtc wiring — MIL indicator + DTC table populated from API
- New /api/dtc route added to app.py (mil + codes)
- yaris.js: added obd_coolant_temp / obd_fuel_level / obd_throttle listeners
- yaris.css: full rewrite — layout variables, sidebar, bottom nav, OBD cards,
  border-start utilities, mobile padding for bottom nav

Co-authored-by: Copilot <[email protected]>

app.py

@@ -210,6 +210,13 @@ def data():
     response.content_type = 'application/json'
     return response
 
+@app.route('/api/dtc')
+def api_dtc():
+    return jsonify({
+        "mil": app_obd.get_fresh_mil(),
+        "codes": app_obd.get_fresh_dtc_codes(),
+    })
+
 if __name__ == '__main__':
     # Debug/Development
     # app.run(debug=True, host="0.0.0.0", port="5000")

static/js/theme.js

@@ -1,76 +1,30 @@
-(function() {
+(function () {
-  "use strict"; // Start of use strict
+    'use strict';
 
-  var sidebar = document.querySelector('.sidebar');
+    const COLLAPSED_KEY = 'sidebar-collapsed';
-  var sidebarToggles = document.querySelectorAll('#sidebarToggle, #sidebarToggleTop');
+    const sidebar = document.getElementById('app-sidebar');
-  
+    const contentWrapper = document.getElementById('content-wrapper');
-  if (sidebar) {
+    const toggleBtn = document.getElementById('sidebarToggle');
-    
-    var collapseEl = sidebar.querySelector('.collapse');
-    var collapseElementList = [].slice.call(document.querySelectorAll('.sidebar .collapse'))
-    var sidebarCollapseList = collapseElementList.map(function (collapseEl) {
-      return new bootstrap.Collapse(collapseEl, { toggle: false });
-    });
 
-    for (var toggle of sidebarToggles) {
+    if (!sidebar) return;
 
-      // Toggle the side navigation
+    function applyCollapsed(collapsed) {
-      toggle.addEventListener('click', function(e) {
+        sidebar.classList.toggle('collapsed', collapsed);
-        document.body.classList.toggle('sidebar-toggled');
+        contentWrapper.classList.toggle('sidebar-collapsed', collapsed);
-        sidebar.classList.toggle('toggled');
+        const icon = toggleBtn && toggleBtn.querySelector('i');
-
+        if (icon) {
-        if (sidebar.classList.contains('toggled')) {
+            icon.className = collapsed ? 'fas fa-chevron-right' : 'fas fa-chevron-left';
-          for (var bsCollapse of sidebarCollapseList) {
+        }
-            bsCollapse.hide();
-          }
-        };
-      });
     }
 
-    // Close any open menu accordions when window is resized below 768px
+    // Restore saved state
-    window.addEventListener('resize', function() {
+    applyCollapsed(localStorage.getItem(COLLAPSED_KEY) === '1');
-      var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
 
-      if (vw < 768) {
+    if (toggleBtn) {
-        for (var bsCollapse of sidebarCollapseList) {
+        toggleBtn.addEventListener('click', function () {
-          bsCollapse.hide();
+            const nowCollapsed = !sidebar.classList.contains('collapsed');
-        }
+            applyCollapsed(nowCollapsed);
-      };
+            localStorage.setItem(COLLAPSED_KEY, nowCollapsed ? '1' : '0');
-    });
+        });
-  }
+    }
-
+})();
-  // Prevent the content wrapper from scrolling when the fixed side navigation hovered over
-  
-  var fixedNaigation = document.querySelector('body.fixed-nav .sidebar');
-  
-  if (fixedNaigation) {
-    fixedNaigation.on('mousewheel DOMMouseScroll wheel', function(e) {
-      var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
-
-      if (vw > 768) {
-        var e0 = e.originalEvent,
-          delta = e0.wheelDelta || -e0.detail;
-        this.scrollTop += (delta < 0 ? 1 : -1) * 30;
-        e.preventDefault();
-      }
-    });
-  }
-
-  var scrollToTop = document.querySelector('.scroll-to-top');
-  
-  if (scrollToTop) {
-    
-    // Scroll to top button appear
-    window.addEventListener('scroll', function() {
-      var scrollDistance = window.pageYOffset;
-
-      //check if user is scrolling up
-      if (scrollDistance > 100) {
-        scrollToTop.style.display = 'block';
-      } else {
-        scrollToTop.style.display = 'none';
-      }
-    });
-  }
-
-})(); // End of use strict

static/js/yaris.js

@@ -94,6 +94,21 @@ socket.on('obd_rpm', function(data) {
     status.innerHTML = data;
 });
 
+socket.on('obd_coolant_temp', function(data) {
+    const el = document.getElementById('obd-coolant');
+    if (el) el.textContent = data != null ? data + ' °C' : '—';
+});
+
+socket.on('obd_fuel_level', function(data) {
+    const el = document.getElementById('obd-fuel');
+    if (el) el.textContent = data != null ? data + ' %' : '—';
+});
+
+socket.on('obd_throttle', function(data) {
+    const el = document.getElementById('obd-throttle');
+    if (el) el.textContent = data != null ? data + ' %' : '—';
+});
+
 socket.on('obd_error', function(data) {
     console.log("obd errors "+data);
     const status = document.getElementById('obd-error');

static/yaris.css

@@ -1,3 +1,216 @@
+/* ── Layout ──────────────────────────────────────────────────────────────── */
+
+:root {
+    --sidebar-width: 14rem;
+    --sidebar-collapsed-width: 4rem;
+    --topbar-height: 3.5rem;
+    --sidebar-bg: #1a1a2e;
+    --sidebar-hover: rgba(255,255,255,.08);
+    --sidebar-active: rgba(255,255,255,.15);
+    --primary: #4e73df;
+}
+
+body {
+    background: #f4f6fb;
+    min-height: 100vh;
+}
+
+/* Desktop sidebar */
+.app-sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: var(--sidebar-width);
+    height: 100vh;
+    background: var(--sidebar-bg);
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    transition: width .2s ease;
+    z-index: 1040;
+    overflow: hidden;
+}
+
+.app-sidebar.collapsed {
+    width: var(--sidebar-collapsed-width);
+}
+
+.sidebar-brand {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    padding: 1.25rem 1rem;
+    color: #fff;
+    text-decoration: none;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+.sidebar-brand:hover { color: rgba(255,255,255,.85); }
+
+.sidebar-brand-icon {
+    font-size: 1.25rem;
+    flex-shrink: 0;
+    width: 2rem;
+    text-align: center;
+}
+
+.sidebar-brand-text {
+    font-weight: 700;
+    font-size: .95rem;
+    letter-spacing: .02em;
+    transition: opacity .15s;
+}
+
+.app-sidebar.collapsed .sidebar-brand-text,
+.app-sidebar.collapsed .nav-link span {
+    opacity: 0;
+    pointer-events: none;
+    width: 0;
+    overflow: hidden;
+}
+
+.sidebar-divider {
+    border-color: rgba(255,255,255,.15);
+    margin: 0 1rem .5rem;
+}
+
+.app-sidebar .nav-link {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    padding: .65rem 1rem;
+    color: rgba(255,255,255,.7);
+    white-space: nowrap;
+    border-radius: .375rem;
+    margin: .1rem .5rem;
+    transition: background .15s, color .15s;
+}
+
+.app-sidebar .nav-link:hover {
+    color: #fff;
+    background: var(--sidebar-hover);
+}
+
+.app-sidebar .nav-link.active {
+    color: #fff;
+    background: var(--sidebar-active);
+    font-weight: 600;
+}
+
+.app-sidebar .nav-link .fa-fw {
+    flex-shrink: 0;
+    width: 1.25rem;
+    text-align: center;
+}
+
+.sidebar-collapse-btn {
+    background: none;
+    border: none;
+    color: rgba(255,255,255,.5);
+    padding: .75rem 1rem;
+    text-align: right;
+    cursor: pointer;
+    transition: color .15s, transform .2s;
+    margin-top: auto;
+    flex-shrink: 0;
+}
+
+.sidebar-collapse-btn:hover { color: #fff; }
+
+.app-sidebar.collapsed .sidebar-collapse-btn {
+    text-align: center;
+    transform: rotate(180deg);
+}
+
+/* Content wrapper shifts right on desktop */
+#content-wrapper {
+    margin-left: var(--sidebar-width);
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    transition: margin-left .2s ease;
+}
+
+#content-wrapper.sidebar-collapsed {
+    margin-left: var(--sidebar-collapsed-width);
+}
+
+/* Top bar */
+.topbar {
+    height: var(--topbar-height);
+    position: sticky;
+    top: 0;
+    z-index: 1030;
+    border-bottom: 1px solid rgba(0,0,0,.06);
+}
+
+.main-content {
+    flex: 1;
+    /* on mobile, leave room for the bottom nav */
+    padding-bottom: 5rem;
+}
+
+/* ── Mobile bottom navigation ─────────────────────────────────────────────── */
+
+.mobile-bottom-nav {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 3.75rem;
+    background: #fff;
+    border-top: 1px solid rgba(0,0,0,.1);
+    z-index: 1040;
+    box-shadow: 0 -2px 8px rgba(0,0,0,.08);
+}
+
+.mobile-nav-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: .2rem;
+    color: #6c757d;
+    text-decoration: none;
+    font-size: .6rem;
+    font-weight: 500;
+    padding: .25rem 0;
+    transition: color .15s;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.mobile-nav-item i {
+    font-size: 1.1rem;
+    line-height: 1;
+}
+
+.mobile-nav-item.active {
+    color: var(--primary);
+}
+
+.mobile-nav-item:hover {
+    color: var(--primary);
+}
+
+@media (max-width: 767.98px) {
+    #content-wrapper {
+        margin-left: 0 !important;
+    }
+    .main-content {
+        padding-bottom: 5rem;
+    }
+}
+
+@media (min-width: 768px) {
+    .main-content {
+        padding-bottom: 1.5rem;
+    }
+}
+
+/* ── Maps ────────────────────────────────────────────────────────────────── */
+
 #map { height: 20rem; }
 
 #history-map {
@@ -5,15 +218,14 @@
     min-height: 24rem;
 }
 
+/* ── Alert dropdown ──────────────────────────────────────────────────────── */
+
 #alert-menu {
     min-width: min(22rem, calc(100vw - 2rem));
     max-width: calc(100vw - 2rem);
 }
 
-.app-sidebar {
+/* ── Data table ──────────────────────────────────────────────────────────── */
-    color: var(--bs-accordion-btn-focus-border-color);
-    background: #000;
-}
 
 .data-list {
     min-height: 10rem;
@@ -49,6 +261,8 @@
     justify-content: flex-end;
 }
 
+/* ── Dashcam / video ─────────────────────────────────────────────────────── */
+
 .local-video-thumbnail {
     width: 8rem;
     aspect-ratio: 16 / 9;
@@ -63,4 +277,22 @@
     width: 100%;
     max-height: 70vh;
     background: #000;
-}
+}
+
+/* ── OBD stat cards ──────────────────────────────────────────────────────── */
+
+.stat-card-icon {
+    font-size: 1.75rem;
+    opacity: .2;
+}
+
+/* ── Misc ────────────────────────────────────────────────────────────────── */
+
+.border-start-primary { border-left: .25rem solid var(--primary) !important; }
+.border-start-success { border-left: .25rem solid #1cc88a !important; }
+.border-start-info    { border-left: .25rem solid #36b9cc !important; }
+.border-start-warning { border-left: .25rem solid #f6c23e !important; }
+.border-start-danger  { border-left: .25rem solid #e74a3b !important; }
+
+.text-xs { font-size: .75rem; }
+.text-gray-300 { color: #dddfeb !important; }

templates/base.html

@@ -12,85 +12,111 @@
 </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">
+    {# ── Desktop sidebar ─────────────────────────────────────────────────── #}
-            <div class="container-fluid d-flex flex-column p-0">
+    <nav id="app-sidebar" class="app-sidebar d-none d-md-flex flex-column">
-                <a class="navbar-brand d-flex justify-content-center align-items-center sidebar-brand m-0" href="{{ url_for('index') }}">
+        <a class="sidebar-brand" href="{{ url_for('index') }}" aria-label="Home">
-                    <div class="sidebar-brand-icon rotate-n-15"><i class="fas fa-car"></i></div>
+            <i class="fas fa-car sidebar-brand-icon"></i>
-                    <div id="index-car-model" class="sidebar-brand-text mx-3"><span>{{ car.model }}</span></div>
+            <span class="sidebar-brand-text">{{ car.model }}</span>
+        </a>
+        <hr class="sidebar-divider">
+        <ul class="nav flex-column flex-grow-1">
+            <li class="nav-item">
+                <a class="nav-link{% if request.endpoint == 'index' %} active{% endif %}" href="{{ url_for('index') }}">
+                    <i class="fas fa-tachometer-alt fa-fw"></i><span>Dashboard</span>
                 </a>
-                <hr class="sidebar-divider my-0">
+            </li>
-                <ul class="navbar-nav text-light" id="accordionSidebar">
+            <li class="nav-item">
-                    <li class="nav-item">
+                <a class="nav-link{% if request.endpoint == 'dash' %} active{% endif %}" href="{{ url_for('dash') }}">
-                        <a class="nav-link{% if request.endpoint == 'index' %} active{% endif %}" href="{{ url_for('index') }}">
+                    <i class="fas fa-video fa-fw"></i><span>Dashcam</span>
-                            <i class="fas fa-tachometer-alt"></i><span>Dashboard</span>
+                </a>
-                        </a>
+            </li>
-                    </li>
+            <li class="nav-item">
-                    <li class="nav-item">
+                <a class="nav-link{% if request.endpoint == 'history' %} active{% endif %}" href="{{ url_for('history') }}">
-                        <a class="nav-link{% if request.endpoint == 'dash' %} active{% endif %}" href="{{ url_for('dash') }}">
+                    <i class="fas fa-route fa-fw"></i><span>Trip history</span>
-                            <i class="fas fa-video"></i><span>Dashcam</span>
+                </a>
-                        </a>
+            </li>
-                    </li>
+            <li class="nav-item">
-                    <li class="nav-item">
+                <a class="nav-link{% if request.endpoint == 'dtc' %} active{% endif %}" href="{{ url_for('dtc') }}">
-                        <a class="nav-link{% if request.endpoint == 'history' %} active{% endif %}" href="{{ url_for('history') }}">
+                    <i class="fas fa-exclamation-triangle fa-fw"></i><span>DTC</span>
-                            <i class="fas fa-route"></i><span>Trip history</span>
+                </a>
-                        </a>
+            </li>
-                    </li>
+            <li class="nav-item">
-                    <li class="nav-item">
+                <a class="nav-link{% if request.endpoint == 'settings' %} active{% endif %}" href="{{ url_for('settings') }}">
-                        <a class="nav-link{% if request.endpoint == 'dtc' %} active{% endif %}" href="{{ url_for('dtc') }}">
+                    <i class="fas fa-cog fa-fw"></i><span>Settings</span>
-                            <i class="fas fa-exclamation-triangle"></i><span>DTC</span>
+                </a>
-                        </a>
+            </li>
-                    </li>
+        </ul>
-                    <li class="nav-item">
+        <button class="sidebar-collapse-btn" id="sidebarToggle" type="button" aria-label="Collapse sidebar">
-                        <a class="nav-link{% if request.endpoint == 'settings' %} active{% endif %}" href="{{ url_for('settings') }}">
+            <i class="fas fa-chevron-left"></i>
-                            <i class="fas fa-cog"></i><span>Settings</span>
+        </button>
-                        </a>
+    </nav>
-                    </li>
+
-                </ul>
+    {# ── Main content area ────────────────────────────────────────────────── #}
-                <div class="text-center d-none d-md-inline">
+    <div id="content-wrapper">
-                    <button class="btn rounded-circle border-0" id="sidebarToggle" type="button" aria-label="Toggle sidebar"></button>
+
+        {# Top bar #}
+        <nav class="topbar navbar navbar-light bg-white shadow-sm">
+            <div class="container-fluid px-3 gap-2">
+                {# Mobile: logo on left #}
+                <a class="navbar-brand d-flex d-md-none align-items-center gap-2 text-decoration-none" href="{{ url_for('index') }}">
+                    <i class="fas fa-car text-primary"></i>
+                    <span class="fw-bold text-dark">{{ car.model }}</span>
+                </a>
+                <div class="ms-auto d-flex align-items-center gap-2">
+                    <div class="dropdown">
+                        <button class="btn btn-link position-relative p-2" id="alert-toggle" type="button"
+                                data-bs-toggle="dropdown" aria-expanded="false" aria-label="System alerts">
+                            <i class="fas fa-bell fa-fw text-secondary"></i>
+                            <span id="alert-count" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" hidden></span>
+                        </button>
+                        <div class="dropdown-menu dropdown-menu-end shadow" id="alert-menu" aria-labelledby="alert-toggle">
+                            <h6 class="dropdown-header">System alerts</h6>
+                            <div id="alert-notifications">
+                                <div class="dropdown-item-text text-muted small">Loading…</div>
+                            </div>
+                        </div>
+                    </div>
+                    <span class="text-muted small d-none d-sm-inline">{{ account.name }}</span>
+                    <img class="rounded-circle border" style="width:2rem;height:2rem;object-fit:cover;"
+                         src="{{ url_for('static', filename='img/yaris.png') }}" alt="">
                 </div>
             </div>
         </nav>
-        <div class="d-flex flex-column" id="content-wrapper">
+
-            <div id="content">
+        <main class="container-fluid py-4 px-3 px-md-4 main-content">
-                <nav class="navbar navbar-expand bg-white shadow mb-4 topbar static-top navbar-light">
+            {% block content %}{% endblock %}
-                    <div class="container-fluid">
+        </main>
-                        <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>
+        <footer class="bg-white border-top text-center py-3 small text-muted d-none d-md-block">
-                        </button>
+            &copy; Yaris OBD {{ car.model }}
-                        <div class="ms-auto d-flex align-items-center">
+        </footer>
-                            <div class="dropdown me-3">
-                                <button class="btn btn-link position-relative p-1" id="alert-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="System alerts">
-                                    <i class="fas fa-bell fa-fw"></i>
-                                    <span id="alert-count" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" hidden></span>
-                                </button>
-                                <div class="dropdown-menu dropdown-menu-end shadow" id="alert-menu" aria-labelledby="alert-toggle">
-                                    <h6 class="dropdown-header">System alerts</h6>
-                                    <div id="alert-notifications">
-                                        <div class="dropdown-item-text text-muted small">Loading...</div>
-                                    </div>
-                                </div>
-                            </div>
-                            <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>
+
+    {# ── Mobile bottom navigation bar ─────────────────────────────────────── #}
+    <nav class="mobile-bottom-nav d-flex d-md-none" aria-label="Main navigation">
+        <a class="mobile-nav-item{% if request.endpoint == 'index' %} active{% endif %}" href="{{ url_for('index') }}">
+            <i class="fas fa-tachometer-alt"></i>
+            <span>Dashboard</span>
+        </a>
+        <a class="mobile-nav-item{% if request.endpoint == 'dash' %} active{% endif %}" href="{{ url_for('dash') }}">
+            <i class="fas fa-video"></i>
+            <span>Dashcam</span>
+        </a>
+        <a class="mobile-nav-item{% if request.endpoint == 'history' %} active{% endif %}" href="{{ url_for('history') }}">
+            <i class="fas fa-route"></i>
+            <span>History</span>
+        </a>
+        <a class="mobile-nav-item{% if request.endpoint == 'dtc' %} active{% endif %}" href="{{ url_for('dtc') }}">
+            <i class="fas fa-exclamation-triangle"></i>
+            <span>DTC</span>
+        </a>
+        <a class="mobile-nav-item{% if request.endpoint == 'settings' %} active{% endif %}" href="{{ url_for('settings') }}">
+            <i class="fas fa-cog"></i>
+            <span>Settings</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>

templates/dtc.html

@@ -4,22 +4,86 @@
 {% block title %}DTC Codes - Yaris OBD{% endblock %}
 
 {% block content %}
-                    <h3 class="text-dark mb-4">DTC Codes</h3>
+<div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
-                    <div class="card shadow">
+    <h3 class="text-dark fw-bold mb-0">DTC Codes</h3>
-                        <div class="card-header py-3">
+    <div class="d-flex align-items-center gap-3">
-                            <p class="text-primary m-0 fw-bold">Output</p>
+        <div id="mil-indicator" class="d-flex align-items-center gap-2 px-3 py-1 rounded-pill border small fw-semibold" style="display:none!important">
-                        </div>
+            <i class="fas fa-exclamation-circle"></i>
-                        <div class="card-body p-0">
+            <span>Check Engine</span>
-                            {{ data_table(
+        </div>
-                                "dtc-list",
+        <button id="dtc-refresh-btn" class="btn btn-sm btn-secondary">
-                                [
+            <i class="fas fa-sync-alt me-1"></i>Refresh
-                                    {"key": "code", "label": "Code", "sortable": true},
+        </button>
-                                    {"key": "description", "label": "Description", "sortable": true},
+    </div>
-                                    {"key": "actions", "label": "Actions", "sortable": false}
+</div>
-                                ],
+
-                                "No trouble codes available",
+<div class="card shadow-sm">
-                                "Stored diagnostic trouble codes will appear here once OBD data is connected."
+    <div class="card-header d-flex align-items-center justify-content-between">
-                            ) }}
+        <p class="text-primary m-0 fw-bold">Stored trouble codes</p>
-                        </div>
+        <span id="dtc-updated" class="small text-muted"></span>
-                    </div>
+    </div>
+    <div class="card-body p-0">
+        {{ data_table(
+            "dtc-list",
+            [
+                {"key": "code", "label": "Code", "sortable": true},
+                {"key": "description", "label": "Description", "sortable": true}
+            ],
+            "No trouble codes",
+            "No diagnostic trouble codes are currently stored. Great news!"
+        ) }}
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+(function () {
+    const milEl = document.getElementById('mil-indicator');
+    const updatedEl = document.getElementById('dtc-updated');
+    const refreshBtn = document.getElementById('dtc-refresh-btn');
+    const body = document.querySelector('#dtc-list [data-data-list-body]');
+
+    async function loadDtc() {
+        refreshBtn.disabled = true;
+        try {
+            const r = await fetch('/api/dtc');
+            const d = await r.json();
+
+            // MIL indicator
+            const milOn = d.mil === true;
+            milEl.style.removeProperty('display');
+            milEl.classList.toggle('text-danger', milOn);
+            milEl.classList.toggle('border-danger', milOn);
+            milEl.classList.toggle('text-muted', !milOn);
+            milEl.classList.toggle('border-secondary', !milOn);
+            milEl.querySelector('span').textContent = milOn ? 'Check Engine ON' : 'Check Engine OFF';
+
+            // Table rows
+            body.innerHTML = '';
+            const codes = d.codes || [];
+            codes.forEach(function (c) {
+                const code = c.code ?? (Array.isArray(c) ? c[0] : c);
+                const desc = c.description ?? (Array.isArray(c) ? c[1] : '—');
+                const row = document.createElement('tr');
+                row.dataset.code = code;
+                row.dataset.description = desc;
+                row.innerHTML = `
+                    <td><span class="badge bg-danger-subtle text-danger-emphasis fw-bold font-monospace">${code}</span></td>
+                    <td>${desc}</td>`;
+                body.appendChild(row);
+            });
+
+            updatedEl.textContent = 'Updated ' + new Date().toLocaleTimeString();
+        } catch (e) {
+            updatedEl.textContent = 'Failed to load';
+        } finally {
+            refreshBtn.disabled = false;
+        }
+    }
+
+    refreshBtn.addEventListener('click', loadDtc);
+    loadDtc();
+})();
+</script>
 {% endblock %}

templates/index.html

@@ -7,129 +7,132 @@
 {% endblock %}
 
 {% block content %}
-                    <div class="d-sm-flex justify-content-between align-items-center mb-4">
+<h3 class="text-dark mb-4 fw-bold">Dashboard</h3>
-                        <h3 class="text-dark mb-0">Dashboard</h3><a class="btn btn-primary btn-sm d-none d-sm-inline-block" role="button" href="#"><i class="fas fa-download fa-sm text-white-50"></i>&nbsp;Placeholder button</a>
+
+{# ── OBD stat cards ──────────────────────────────────────────────────── #}
+<div class="row g-3 mb-4">
+    <div class="col-6 col-lg-4 col-xl-2">
+        <div class="card shadow-sm border-start-primary h-100">
+            <div class="card-body py-3">
+                <div class="text-uppercase text-primary fw-bold text-xs mb-1">OBD Status</div>
+                <div id="obd-status" class="fw-bold h5 mb-0 text-dark">—</div>
+            </div>
+        </div>
+    </div>
+    <div class="col-6 col-lg-4 col-xl-2">
+        <div class="card shadow-sm border-start-success h-100">
+            <div class="card-body py-3">
+                <div class="text-uppercase text-success fw-bold text-xs mb-1">Speed</div>
+                <div id="obd-speed" class="fw-bold h5 mb-0 text-dark">—</div>
+            </div>
+        </div>
+    </div>
+    <div class="col-6 col-lg-4 col-xl-2">
+        <div class="card shadow-sm border-start-info h-100">
+            <div class="card-body py-3">
+                <div class="text-uppercase text-info fw-bold text-xs mb-1">RPM</div>
+                <div id="obd-rpm" class="fw-bold h5 mb-0 text-dark">—</div>
+            </div>
+        </div>
+    </div>
+    <div class="col-6 col-lg-4 col-xl-2">
+        <div class="card shadow-sm border-start-warning h-100">
+            <div class="card-body py-3">
+                <div class="text-uppercase text-warning fw-bold text-xs mb-1">Coolant temp</div>
+                <div id="obd-coolant" class="fw-bold h5 mb-0 text-dark">—</div>
+            </div>
+        </div>
+    </div>
+    <div class="col-6 col-lg-4 col-xl-2">
+        <div class="card shadow-sm border-start-danger h-100">
+            <div class="card-body py-3">
+                <div class="text-uppercase text-danger fw-bold text-xs mb-1">Throttle</div>
+                <div id="obd-throttle" class="fw-bold h5 mb-0 text-dark">—</div>
+            </div>
+        </div>
+    </div>
+    <div class="col-6 col-lg-4 col-xl-2">
+        <div class="card shadow-sm border-start-primary h-100">
+            <div class="card-body py-3">
+                <div class="text-uppercase text-primary fw-bold text-xs mb-1">Fuel level</div>
+                <div id="obd-fuel" class="fw-bold h5 mb-0 text-dark">—</div>
+            </div>
+        </div>
+    </div>
+</div>
+
+{# ── Pi health ───────────────────────────────────────────────────────── #}
+<div class="card shadow-sm mb-4" id="pi-health-card">
+    <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
+        <h6 class="text-primary fw-bold m-0">Pi health</h6>
+        <span id="pi-health-updated" class="small text-muted">Loading…</span>
+    </div>
+    <div class="card-body">
+        <div id="pi-health-warning" class="alert alert-warning" role="alert" hidden></div>
+        <div id="pi-health-error" class="alert alert-danger" role="alert" hidden></div>
+        <div class="row g-3">
+            <div class="col-6 col-lg-3">
+                <div class="text-uppercase text-muted fw-bold text-xs mb-1">CPU temperature</div>
+                <div id="pi-temperature" class="h5 text-dark fw-bold mb-0">--</div>
+            </div>
+            <div class="col-6 col-lg-3">
+                <div class="text-uppercase text-muted fw-bold text-xs mb-1">Memory used</div>
+                <div id="pi-memory" class="h5 text-dark fw-bold mb-0">--</div>
+            </div>
+            <div class="col-6 col-lg-3">
+                <div class="text-uppercase text-muted fw-bold text-xs mb-1">Disk used</div>
+                <div id="pi-disk" class="h5 text-dark fw-bold mb-0">--</div>
+            </div>
+            <div class="col-6 col-lg-3">
+                <div class="text-uppercase text-muted fw-bold text-xs mb-1">Uptime</div>
+                <div id="pi-uptime" class="h5 text-dark fw-bold mb-0">--</div>
+            </div>
+        </div>
+    </div>
+</div>
+
+{# ── Speed graph + GPS ───────────────────────────────────────────────── #}
+<div class="row g-3">
+    <div class="col-lg-7 col-xl-8">
+        <div class="card shadow-sm mb-4">
+            <div class="card-header">
+                <h6 class="text-primary fw-bold m-0">Speed Graph</h6>
+            </div>
+            <div class="card-body">
+                <div class="chart-container" style="position:relative;height:40vh;text-align:center;">
+                    <canvas id="speedGraph"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-lg-5 col-xl-4">
+        <div class="card shadow-sm mb-3">
+            <div class="card-header">
+                <h6 class="text-primary fw-bold m-0">GPS</h6>
+            </div>
+            <div class="card-body p-0">
+                <div id="map"></div>
+            </div>
+        </div>
+        <div class="card shadow-sm mb-4">
+            <div class="card-header">
+                <h6 class="text-primary fw-bold m-0">GPS coordinates</h6>
+            </div>
+            <div class="card-body py-2">
+                <div class="d-flex gap-4">
+                    <div>
+                        <div class="text-xs text-muted fw-bold text-uppercase mb-1">Latitude</div>
+                        <div id="gpsLocationX" class="fw-bold">—</div>
                     </div>
-                    <div class="row">
+                    <div>
-                        <div class="col-md-6 col-xl-4 mb-4">
+                        <div class="text-xs text-muted fw-bold text-uppercase mb-1">Longitude</div>
-                            <div class="card shadow border-start-primary py-2">
+                        <div id="gpsLocationY" class="fw-bold">—</div>
-                                <div class="card-body">
-                                    <div class="row align-items-center no-gutters">
-                                        <div class="col me-2">
-                                            <div class="text-uppercase text-primary fw-bold text-xs mb-1"><span>OBD Status</span></div>
-                                            <div id="obd-status" class="text-dark fw-bold h5 mb-0"><span>unknown</span></div>
-                                        </div>
-                                        <div class="col-auto"><i class="fas fa-calendar fa-2x text-gray-300"></i></div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-md-6 col-xl-4 mb-4">
-                            <div class="card shadow border-start-success py-2">
-                                <div class="card-body">
-                                    <div class="row align-items-center no-gutters">
-                                        <div class="col me-2">
-                                            <div class="text-uppercase text-success fw-bold text-xs mb-1"><span>VEHICLE SPEED</span></div>
-                                            <div id="obd-speed" class="text-dark fw-bold h5 mb-0"><span>unknown</span></div>
-                                        </div>
-                                        <div class="col-auto"><i class="fas fa-dollar-sign fa-2x text-gray-300"></i></div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-md-6 col-xl-4 mb-4">
-                            <div class="card shadow border-start-info py-2">
-                                <div class="card-body">
-                                    <div class="row align-items-center no-gutters">
-                                        <div class="col me-2">
-                                            <div class="text-uppercase text-warning fw-bold text-xs mb-1" style="color: rgb(246,62,62);"><span style="color: rgb(246,62,62);">RPM</span></div>
-                                            <div id="obd-rpm" class="text-dark fw-bold h5 mb-0"><span>unknown</span></div>
-                                        </div>
-                                        <div class="col-auto"><i class="fas fa-comments fa-2x text-gray-300"></i></div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="card shadow mb-4" id="pi-health-card">
-                        <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
-                            <h6 class="text-primary fw-bold m-0">Pi health</h6>
-                            <span id="pi-health-updated" class="small text-muted">Loading...</span>
-                        </div>
-                        <div class="card-body">
-                            <div id="pi-health-warning" class="alert alert-warning" role="alert" hidden></div>
-                            <div id="pi-health-error" class="alert alert-danger" role="alert" hidden></div>
-                            <div class="row g-4">
-                                <div class="col-6 col-lg-3">
-                                    <div class="text-uppercase text-muted fw-bold text-xs mb-1">CPU temperature</div>
-                                    <div id="pi-temperature" class="h5 text-dark fw-bold mb-0">--</div>
-                                </div>
-                                <div class="col-6 col-lg-3">
-                                    <div class="text-uppercase text-muted fw-bold text-xs mb-1">Memory used</div>
-                                    <div id="pi-memory" class="h5 text-dark fw-bold mb-0">--</div>
-                                </div>
-                                <div class="col-6 col-lg-3">
-                                    <div class="text-uppercase text-muted fw-bold text-xs mb-1">Disk used</div>
-                                    <div id="pi-disk" class="h5 text-dark fw-bold mb-0">--</div>
-                                </div>
-                                <div class="col-6 col-lg-3">
-                                    <div class="text-uppercase text-muted fw-bold text-xs mb-1">Uptime</div>
-                                    <div id="pi-uptime" class="h5 text-dark fw-bold mb-0">--</div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col-lg-7 col-xl-8">
-                            <div class="card shadow mb-4">
-                                <div class="card-header d-flex justify-content-between align-items-center">
-                                    <h6 class="text-primary fw-bold m-0">Speed Graph</h6>
-                                    <div class="dropdown no-arrow"><button class="btn btn-link btn-sm dropdown-toggle" aria-expanded="false" data-bs-toggle="dropdown" type="button"><i class="fas fa-ellipsis-v text-gray-400"></i></button>
-                                        <div class="dropdown-menu shadow dropdown-menu-end animated--fade-in">
-                                            <p class="text-center dropdown-header">dropdown header:</p><a class="dropdown-item" href="#">&nbsp;Action</a><a class="dropdown-item" href="#">&nbsp;Another action</a>
-                                            <div class="dropdown-divider"></div><a class="dropdown-item" href="#">&nbsp;Something else here</a>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="card-body">
-                                    <div class="chart-container" style="position: relative; height:40vh; text-align: center;">
-                                        <canvas id="speedGraph"></canvas>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-lg-5 col-xl-4">
-                            <div class="card shadow mb-4">
-                                <div class="card-header d-flex justify-content-between align-items-center">
-                                    <h6 class="text-primary fw-bold m-0">GPS</h6>
-                                    <div class="dropdown no-arrow"><button class="btn btn-link btn-sm dropdown-toggle" aria-expanded="false" data-bs-toggle="dropdown" type="button"><i class="fas fa-ellipsis-v text-gray-400"></i></button>
-                                        <div class="dropdown-menu shadow dropdown-menu-end animated--fade-in">
-                                            <p class="text-center dropdown-header">dropdown header:</p><a class="dropdown-item" href="#">&nbsp;Action</a><a class="dropdown-item" href="#">&nbsp;Another action</a>
-                                            <div class="dropdown-divider"></div><a class="dropdown-item" href="#">&nbsp;Something else here</a>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="card-body">
-                                    <div id="map"></div>
-                                </div>
-                            </div>
-                            <div class="card shadow mb-4">
-                                <div class="card-header d-flex justify-content-between align-items-center">
-                                    <h6 class="text-primary fw-bold m-0">GPS Info</h6>
-                                    <div class="dropdown no-arrow"><button class="btn btn-link btn-sm dropdown-toggle" aria-expanded="false" data-bs-toggle="dropdown" type="button"><i class="fas fa-ellipsis-v text-gray-400"></i></button>
-                                        <div class="dropdown-menu shadow dropdown-menu-end animated--fade-in">
-                                            <p class="text-center dropdown-header">dropdown header:</p><a class="dropdown-item" href="#">&nbsp;Action</a><a class="dropdown-item" href="#">&nbsp;Another action</a>
-                                            <div class="dropdown-divider"></div><a class="dropdown-item" href="#">&nbsp;Something else here</a>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="card-body">
-                                    <p>GPS X: <span id="gpsLocationX"></span></p>
-                                    <p>GPS Y: <span id="gpsLocationY"></span></p>
-                                </div>
-                            </div>
-                        </div>
                     </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
 {% endblock %}
 
 {% block scripts %}