From cfd9d03e8118449d9afade173f14d9d4be36f194 Mon Sep 17 00:00:00 2001 From: Mathieu Moran Date: Wed, 12 Aug 2026 16:43:04 -0400 Subject: [PATCH] =?UTF-8?q?ui:=20rework=20Pi=20settings=20page=20=E2=80=94?= =?UTF-8?q?=20grouped=20sections,=20icons,=20clearer=20labels?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Four logical sections: Car & identity, Connectivity, Server & uploads, Alerts - FontAwesome icons on every card header for visual scanning - Reordered cards (identity → in-car AP → phone hotspot → server → uploads → alerts) - settings-section + settings-card styles added via block styles - Improved helper text (device name, odometer, hotspot password) - All element IDs preserved — JS behavior unchanged --- templates/settings.html | 218 +++++++++++++++++++++++----------------- 1 file changed, 123 insertions(+), 95 deletions(-) diff --git a/templates/settings.html b/templates/settings.html index 9afb5ea..562ab7f 100644 --- a/templates/settings.html +++ b/templates/settings.html @@ -2,6 +2,24 @@ {% block title %}Settings - Yaris OBD{% endblock %} +{% block styles %} + +{% endblock %} + {% block content %}
@@ -28,17 +46,19 @@
- {# ── Device identity ────────────────────────────────────────────── #} -
+ {# ═══ Car & identity ═══════════════════════════════════════════════ #} +
Car & identity
+
-

Device identity

+ +

Device identity

@@ -63,107 +83,42 @@
-
Reserved for future server portal display.
+
Shown in the server portal.
-
Enter your car's current odometer reading. The app adds trip distances to this baseline. Leave at 0 to use live OBD reading (not available on 2013 Yaris).
-
-
-

Edit your device identity here. If server sync is enabled, these fields are read-only.

-
-
-
- - {# ── Remote server credentials ────────────────────────────────────── #} -
-
-

Remote server credentials

-
-
-
-
- - -
-
-
- - -
-
-
- - -
-
Leave blank to keep saved key.
-
- - +
Your car's current odometer reading. Trip distances are added to this. Leave at 0 to use live OBD (unsupported on 2013 Yaris).
-

- These values are stored only on this Pi in db/upload_creds.env and are reused by both uploads and config sync. -

- {# ── Upload & retention ──────────────────────────────────────────── #} -
+ {# ═══ Connectivity ══════════════════════════════════════════════════ #} +
Connectivity
+
-

Uploads & local video

-
-
-
- - -
-
- - -
-

Checking…

-
- -
- - days -
- (0 = keep forever) -
-
-
- - -
-
-
- - {# ── In-car access ────────────────────────────────────────────────── #} -
-
-

In-car access

+ +

In-car hotspot

- +
- + -
Write-only — never sent back to the browser.
+
Write-only — never shown again.
- +
- {# ── Phone hotspot ───────────────────────────────────────────────── #} -
+
-

Phone hotspot internet

+ +

Phone hotspot internet

@@ -217,23 +171,96 @@

- Save while connected to home WiFi, then tap Wait for hotspot and enable the phone hotspot within 2 min. + Save while on home WiFi, then tap Wait for hotspot and enable the phone hotspot within 2 min. Password is write-only. If the Pi hotspot doesn't appear via yaris.local, use the last phone IP above.

- {# ── Cellular + ntfy (collapsible together) ─────────────────────── #} -
+ {# ═══ Server & uploads ══════════════════════════════════════════════ #} +
Server & uploads
+
+
+ +

Remote server

+
+
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
Leave blank to keep saved key.
+
+ + +
+
+
+

+ Stored only on this Pi in db/upload_creds.env — reused by uploads and config sync. +

+
+
+ +
+
+ +

Uploads & storage

+
+
+
+ + +
+
+ + +
+

Checking…

+
+ +
+ + days +
+ (0 = keep forever) +
+
+
+ + +
+
+
+ + {# ═══ Alerts ════════════════════════════════════════════════════════ #} +
Alerts & notifications
+
- {# Cellular #}

SIM868 Cellular

@@ -247,7 +274,6 @@
Small trip-log batches only. Dashcam video never uses cellular.
- {# ntfy #}

ntfy push notifications

@@ -279,12 +305,14 @@
- {# ── Alert thresholds (collapsible) ──────────────────────────────── #} -
+