From c67ab034e0e010d37f9d61012e5596495f89f783 Mon Sep 17 00:00:00 2001 From: Michael Sitz Date: Thu, 20 Aug 2026 18:04:48 -0400 Subject: [PATCH] New header and footer with settings in the bottom --- templates/course_dashboard.html | 134 ++++++++++++++++++++++++++++---- templates/lesson_view.html | 92 +++++++++++++++++++++- templates/settings.html | 80 ++++++++++++++++++- 3 files changed, 289 insertions(+), 17 deletions(-) diff --git a/templates/course_dashboard.html b/templates/course_dashboard.html index e2e72da..9d2e65a 100644 --- a/templates/course_dashboard.html +++ b/templates/course_dashboard.html @@ -53,12 +53,21 @@ border: 1px solid var(--border-color); } + html, body { + height: 100%; + } body { font-family: var(--font-family); font-size: var(--font-size-base); background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; + display: flex; + flex-direction: column; + min-height: 100vh; + } + .page-content { + flex: 1; } .container { @@ -68,17 +77,98 @@ padding: 20px; } - .header { - background: var(--bg-secondary); - padding: 20px 0; + .app-header { + background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary)); + padding: 28px 0; margin-bottom: 30px; border-bottom: 3px solid var(--accent); + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); } - .header h1 { + .app-header .container { + display: flex; + align-items: center; + justify-content: space-between; + gap: 20px; + flex-wrap: wrap; + } + + .brand { + display: flex; + align-items: center; + gap: 14px; + } + + .brand-icon { + font-size: 2.2em; + line-height: 1; + } + + .brand h1 { + color: var(--accent); + font-size: 1.9em; + letter-spacing: 0.5px; + } + + .brand .tagline { + color: var(--text-muted); + font-size: 0.85em; + margin-top: 2px; + } + + .header-course-badge { + background: var(--bg-primary); + border: 1px solid var(--accent); + color: var(--text-primary); + padding: 8px 16px; + border-radius: var(--radius); + font-size: 0.9em; + max-width: 340px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .app-footer { + background: var(--bg-secondary); + border-top: 1px solid var(--border-color); + margin-top: 40px; + padding: 18px 0; + } + + .app-footer .container { + display: flex; + align-items: center; + justify-content: space-between; + gap: 15px; + flex-wrap: wrap; + } + + .footer-brand { + color: var(--text-muted); + font-size: 0.9em; + display: flex; + align-items: center; + gap: 8px; + } + + .footer-links { + display: flex; + gap: 20px; + } + + .footer-links a { + color: var(--text-muted); + text-decoration: none; + font-size: 0.9em; + display: flex; + align-items: center; + gap: 6px; + transition: color 0.2s; + } + + .footer-links a:hover { color: var(--accent); - text-align: center; - font-size: 2.5em; } .nav { @@ -388,18 +478,27 @@ -
+
-

OfflineU

+
+ 📚 +
+

OfflineU

+

Your self-hosted course library

+
+
+ {% if course %} +
{{ course.name }}
+ {% endif %}
+
{% if course %}
← Select Different Course Progress - ⚙ Settings {{ stats.total_lessons }} lessons @@ -488,10 +587,7 @@ {% else %}
-
-

Your Courses

- ⚙ Settings -
+

Your Courses

@@ -537,6 +633,18 @@
{% endif %} +
+ +
+
+ + + \ No newline at end of file diff --git a/templates/settings.html b/templates/settings.html index a87e5d1..5852d42 100644 --- a/templates/settings.html +++ b/templates/settings.html @@ -36,12 +36,69 @@ border: 1px solid var(--border-color); } * { box-sizing: border-box; } + html, body { height: 100%; } body { font-family: var(--font-family); font-size: var(--font-size-base); background: var(--bg-primary); color: var(--text-primary); - margin: 20px; + margin: 0; + display: flex; + flex-direction: column; + min-height: 100vh; + } + .page-content { + flex: 1; + padding: 20px; + } + .app-header { + background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary)); + padding: 18px 0; + border-bottom: 3px solid var(--accent); + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); + } + .app-header .header-inner { + max-width: 800px; + margin: 0 auto; + display: flex; + align-items: center; + gap: 12px; + } + .app-header .brand-icon { + font-size: 1.6em; + } + .app-header a.brand-link { + color: var(--accent); + text-decoration: none; + font-size: 1.3em; + font-weight: 600; + letter-spacing: 0.5px; + } + .app-footer { + background: var(--bg-secondary); + border-top: 1px solid var(--border-color); + padding: 18px 0; + } + .app-footer .footer-inner { + max-width: 800px; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; + gap: 15px; + flex-wrap: wrap; + } + .footer-brand { + color: var(--text-muted); + font-size: 0.9em; + display: flex; + align-items: center; + gap: 8px; + } + .footer-links a { + color: var(--accent); + text-decoration: none; + font-size: 0.9em; } .container { max-width: 800px; @@ -152,8 +209,15 @@ +
+
+ 📚 + OfflineU +
+
+ +
- ← Back

Settings

Changes save and apply immediately across the app.

@@ -253,6 +317,18 @@ ✓ Saved
+ + +