Adding a new settings page and other tweaks for how it looks

docker-compose.yml

@@ -1,19 +1,22 @@
+version: '3.8'
+
 services:
   offlineu:
-    build: .
+    image: ghcr.io/skippysteve/offlineu:main
-    pull_policy: build
+    container_name: offlineu-app
-    container_name: offlineu
-    network_mode: host
     ports:
       - "5000:5000"
     environment:
-      - PUID=1000
-      - PGID=10
-      - TZ=America/New_York
       - FLASK_ENV=production
     volumes:
       # Mount a local directory for course data persistence
-      - /volume1/files/training:/app/courses
+      - ./courses:/app/courses
       # Mount a local directory for user data/progress
-      - /volume2/docker/offlineu/data:/app/data
+      - ./data:/app/data
-    restart: unless-stopped
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:5000/"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s 

offlineu_core.py

@@ -32,6 +32,91 @@ QUIZ_INDICATORS = {'quiz', 'exam', 'test', 'assessment', 'exercise', 'assignment
 # COURSES_LIBRARY_PATH env var.
 LIBRARY_PATH = os.environ.get('COURSES_LIBRARY_PATH', '/app/courses')
 
+# App-wide (non per-course) persisted data, e.g. display settings. Matches
+# the ./data volume mount in docker-compose.yml.
+DATA_DIR = os.environ.get('OFFLINEU_DATA_DIR', '/app/data')
+SETTINGS_FILE = os.path.join(DATA_DIR, 'settings.json')
+
+DEFAULT_SETTINGS = {
+    'theme': 'dark',              # 'dark' | 'light'
+    'accent_color': '#007acc',    # any #rrggbb hex
+    'font_family': 'system',      # 'system' | 'sans' | 'serif' | 'monospace'
+    'font_size': 'medium',        # 'small' | 'medium' | 'large' | 'xlarge'
+    'layout_width': 'wide',       # 'normal' | 'wide' | 'full'
+    'density': 'comfortable',     # 'comfortable' | 'compact'
+    'card_style': 'flat',         # 'flat' | 'elevated' | 'bordered'
+    'corner_radius': 'rounded',   # 'sharp' | 'rounded' | 'pill'
+}
+
+# Allowed values for every setting except accent_color (validated separately
+# as a hex string). Anything outside these sets is rejected/ignored on save.
+SETTINGS_CHOICES = {
+    'theme': {'dark', 'light'},
+    'font_family': {'system', 'sans', 'serif', 'monospace'},
+    'font_size': {'small', 'medium', 'large', 'xlarge'},
+    'layout_width': {'normal', 'wide', 'full'},
+    'density': {'comfortable', 'compact'},
+    'card_style': {'flat', 'elevated', 'bordered'},
+    'corner_radius': {'sharp', 'rounded', 'pill'},
+}
+
+# How each choice resolves to an actual CSS value. Keeping this server-side
+# (rather than duplicating the mapping in JS) means the client just applies
+# whatever /api/settings hands back.
+FONT_FAMILY_CSS = {
+    'system': "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
+    'sans': "Arial, Helvetica, sans-serif",
+    'serif': "Georgia, 'Times New Roman', serif",
+    'monospace': "'Courier New', Consolas, monospace",
+}
+FONT_SIZE_CSS = {'small': '14px', 'medium': '16px', 'large': '18px', 'xlarge': '20px'}
+LAYOUT_WIDTH_CSS = {'normal': '1000px', 'wide': '1600px', 'full': '100%'}
+RADIUS_CSS = {'sharp': '2px', 'rounded': '8px', 'pill': '999px'}
+
+HEX_COLOR_RE = re.compile(r'^#[0-9a-fA-F]{6}$')
+
+
+def load_settings() -> Dict[str, Any]:
+    """Load persisted display settings, filling in defaults for anything missing/invalid."""
+    settings = dict(DEFAULT_SETTINGS)
+    try:
+        if os.path.exists(SETTINGS_FILE):
+            with open(SETTINGS_FILE, 'r') as f:
+                saved = json.load(f)
+            for key, value in saved.items():
+                if key == 'accent_color' and isinstance(value, str) and HEX_COLOR_RE.match(value):
+                    settings[key] = value
+                elif key in SETTINGS_CHOICES and value in SETTINGS_CHOICES[key]:
+                    settings[key] = value
+    except (json.JSONDecodeError, OSError) as e:
+        print(f"Could not load settings, using defaults: {e}")
+    return settings
+
+
+def save_settings(new_settings: Dict[str, Any]) -> Dict[str, Any]:
+    """Validate and persist display settings; unknown/invalid keys are ignored."""
+    current = load_settings()
+    for key, value in new_settings.items():
+        if key == 'accent_color' and isinstance(value, str) and HEX_COLOR_RE.match(value):
+            current[key] = value
+        elif key in SETTINGS_CHOICES and value in SETTINGS_CHOICES[key]:
+            current[key] = value
+    os.makedirs(DATA_DIR, exist_ok=True)
+    with open(SETTINGS_FILE, 'w') as f:
+        json.dump(current, f, indent=2)
+    return current
+
+
+def settings_css_vars(settings: Dict[str, Any]) -> Dict[str, str]:
+    """Resolve a settings dict into the actual CSS custom-property values."""
+    return {
+        '--accent': settings['accent_color'],
+        '--font-family': FONT_FAMILY_CSS[settings['font_family']],
+        '--font-size-base': FONT_SIZE_CSS[settings['font_size']],
+        '--container-max-width': LAYOUT_WIDTH_CSS[settings['layout_width']],
+        '--radius': RADIUS_CSS[settings['corner_radius']],
+    }
+
 
 @dataclass
 class Lesson:
@@ -545,6 +630,61 @@ def browse_library():
     })
 
 
+@app.route('/settings')
+def settings_page():
+    """Render the display-settings page."""
+    current = load_settings()
+    return render_template(
+        'settings.html',
+        settings=current,
+        theme_choices=sorted(SETTINGS_CHOICES['theme']),
+        font_family_choices=['system', 'sans', 'serif', 'monospace'],
+        font_size_choices=['small', 'medium', 'large', 'xlarge'],
+        layout_width_choices=['normal', 'wide', 'full'],
+        density_choices=['comfortable', 'compact'],
+        card_style_choices=['flat', 'elevated', 'bordered'],
+        corner_radius_choices=['sharp', 'rounded', 'pill'],
+    )
+
+
+@app.route('/api/settings', methods=['GET'])
+def get_settings_api():
+    """Return current settings plus their resolved CSS values, for the shared theme script."""
+    current = load_settings()
+    return jsonify({
+        'settings': current,
+        'css_vars': settings_css_vars(current)
+    })
+
+
+@app.route('/api/settings', methods=['POST'])
+def save_settings_api():
+    """Persist updated display settings."""
+    try:
+        new_settings = request.get_json(force=True) or {}
+        saved = save_settings(new_settings)
+        return jsonify({
+            'success': True,
+            'settings': saved,
+            'css_vars': settings_css_vars(saved)
+        })
+    except Exception as e:
+        return jsonify({'success': False, 'error': str(e)}), 400
+
+
+@app.route('/api/settings/reset', methods=['POST'])
+def reset_settings_api():
+    """Reset settings back to defaults."""
+    os.makedirs(DATA_DIR, exist_ok=True)
+    with open(SETTINGS_FILE, 'w') as f:
+        json.dump(DEFAULT_SETTINGS, f, indent=2)
+    return jsonify({
+        'success': True,
+        'settings': DEFAULT_SETTINGS,
+        'css_vars': settings_css_vars(DEFAULT_SETTINGS)
+    })
+
+
 @app.route('/load_course', methods=['POST'])
 def load_course():
     """Load course from selected directory"""

static/theme.js

@@ -0,0 +1,30 @@
+// Applies the user's saved display settings (theme, accent color, font,
+// layout width, density, card style, corner radius) to whichever page
+// includes this script. Settings are fetched from /api/settings, which
+// resolves the stored choices into actual CSS values server-side, so
+// this file doesn't need to duplicate any of those mappings.
+(function () {
+    function apply(data) {
+        const root = document.documentElement;
+        const vars = data.css_vars || {};
+        Object.keys(vars).forEach(function (name) {
+            root.style.setProperty(name, vars[name]);
+        });
+
+        const settings = data.settings || {};
+        if (settings.theme) root.setAttribute('data-theme', settings.theme);
+        if (settings.density) root.setAttribute('data-density', settings.density);
+        if (settings.card_style) root.setAttribute('data-card-style', settings.card_style);
+    }
+
+    fetch('/api/settings')
+        .then(function (r) { return r.json(); })
+        .then(apply)
+        .catch(function (err) {
+            console.warn('Could not load display settings, using page defaults:', err);
+        });
+
+    // Exposed so the settings page itself can live-preview changes
+    // before saving.
+    window.__offlineuApplyTheme = apply;
+})();

templates/course_dashboard.html

@@ -11,35 +11,78 @@
             box-sizing: border-box;
         }
 
+        :root {
+            --bg-primary: #1a1a1a;
+            --bg-secondary: #2d2d2d;
+            --bg-tertiary: #3d3d3d;
+            --bg-tertiary-hover: #404040;
+            --text-primary: #e0e0e0;
+            --text-muted: #999;
+            --border-color: #555;
+            --accent: #007acc;
+            --accent-hover: #005a9e;
+            --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            --font-size-base: 16px;
+            --container-max-width: 1600px;
+            --radius: 8px;
+        }
+        [data-theme="light"] {
+            --bg-primary: #f2f2f2;
+            --bg-secondary: #ffffff;
+            --bg-tertiary: #eeeeee;
+            --bg-tertiary-hover: #e2e2e2;
+            --text-primary: #222222;
+            --text-muted: #666666;
+            --border-color: #cccccc;
+        }
+        [data-density="compact"] .container { padding: 10px; }
+        [data-density="compact"] .card,
+        [data-density="compact"] .lesson-item,
+        [data-density="compact"] .tree-header,
+        [data-density="compact"] .course-selector { padding: 10px; margin-bottom: 8px; }
+        [data-card-style="elevated"] .card,
+        [data-card-style="elevated"] .lesson-item,
+        [data-card-style="elevated"] .tree-header,
+        [data-card-style="elevated"] .course-selector {
+            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
+        }
+        [data-card-style="bordered"] .card,
+        [data-card-style="bordered"] .lesson-item,
+        [data-card-style="bordered"] .tree-header,
+        [data-card-style="bordered"] .course-selector {
+            border: 1px solid var(--border-color);
+        }
+
         body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            font-family: var(--font-family);
-            background: #1a1a1a;
+            font-size: var(--font-size-base);
-            color: #e0e0e0;
+            background: var(--bg-primary);
+            color: var(--text-primary);
             line-height: 1.6;
         }
 
         .container {
-            max-width: 1600px;
+            max-width: var(--container-max-width);
             width: 95%;
             margin: 0 auto;
             padding: 20px;
         }
 
         .header {
-            background: #2d2d2d;
+            background: var(--bg-secondary);
             padding: 20px 0;
             margin-bottom: 30px;
-            border-bottom: 3px solid #007acc;
+            border-bottom: 3px solid var(--accent);
         }
 
         .header h1 {
-            color: #007acc;
+            color: var(--accent);
             text-align: center;
             font-size: 2.5em;
         }
 
         .nav {
-            background: #333;
+            background: var(--bg-tertiary);
             padding: 10px 0;
             margin-bottom: 20px;
         }
@@ -51,31 +94,31 @@
         }
 
         .nav a {
-            color: #e0e0e0;
+            color: var(--text-primary);
             text-decoration: none;
             padding: 10px 15px;
-            border-radius: 5px;
+            border-radius: var(--radius);
             transition: background 0.3s;
         }
 
         .nav a:hover {
-            background: #007acc;
+            background: var(--accent);
         }
 
         .card {
-            background: #2d2d2d;
+            background: var(--bg-secondary);
-            border-radius: 8px;
+            border-radius: var(--radius);
             padding: 20px;
             margin-bottom: 20px;
-            border-left: 4px solid #007acc;
+            border-left: 4px solid var(--accent);
         }
 
         .btn {
-            background: #007acc;
+            background: var(--accent);
             color: white;
             border: none;
             padding: 12px 24px;
-            border-radius: 5px;
+            border-radius: var(--radius);
             cursor: pointer;
             text-decoration: none;
             display: inline-block;
@@ -84,7 +127,7 @@
         }
 
         .btn:hover {
-            background: #005a9e;
+            background: var(--accent-hover);
         }
 
         .btn:disabled {
@@ -109,7 +152,7 @@
         }
 
         .progress-fill {
-            background: linear-gradient(90deg, #007acc, #00a0ff);
+            background: var(--accent);
             height: 100%;
             transition: width 0.3s ease;
             border-radius: 10px;
@@ -125,9 +168,9 @@
         }
 
         .tree-header {
-            background: #3d3d3d;
+            background: var(--bg-tertiary);
             padding: 12px 15px;
-            border-radius: 5px;
+            border-radius: var(--radius);
             cursor: pointer;
             display: flex;
             align-items: center;
@@ -137,11 +180,11 @@
         }
 
         .tree-header:hover {
-            background: #404040;
+            background: var(--bg-tertiary-hover);
         }
 
         .tree-header.directory {
-            border-left-color: #007acc;
+            border-left-color: var(--accent);
         }
 
         .tree-header.lesson {
@@ -176,14 +219,14 @@
 
         .tree-stats {
             font-size: 0.85em;
-            color: #999;
+            color: var(--text-muted);
             margin-left: 10px;
         }
 
         .tree-toggle {
             background: none;
             border: none;
-            color: #e0e0e0;
+            color: var(--text-primary);
             font-size: 1.2em;
             cursor: pointer;
             padding: 5px;
@@ -206,9 +249,9 @@
         }
 
         .lesson-item {
-            background: #3d3d3d;
+            background: var(--bg-tertiary);
             padding: 10px 15px;
-            border-radius: 5px;
+            border-radius: var(--radius);
             margin-bottom: 5px;
             display: flex;
             justify-content: space-between;
@@ -219,8 +262,8 @@
         }
 
         .lesson-item:hover {
-            border-left-color: #007acc;
+            border-left-color: var(--accent);
-            background: #404040;
+            background: var(--bg-tertiary-hover);
             transform: translateX(5px);
         }
 
@@ -246,7 +289,7 @@
 
         .lesson-meta {
             font-size: 0.85em;
-            color: #999;
+            color: var(--text-muted);
             display: flex;
             align-items: center;
             gap: 5px;
@@ -285,27 +328,27 @@
             text-align: center;
             margin: 40px 0;
             border-radius: 10px;
-            background: #2d2d2d;
+            background: var(--bg-secondary);
         }
 
         .course-selector input {
-            background: #3d3d3d;
+            background: var(--bg-tertiary);
             border: 1px solid #666;
-            color: #e0e0e0;
+            color: var(--text-primary);
             padding: 12px;
             font-size: 14px;
-            border-radius: 5px;
+            border-radius: var(--radius);
             width: 80%;
             margin-right: 10px;
         }
 
         .course-selector input::placeholder {
-            color: #999;
+            color: var(--text-muted);
         }
 
         .course-selector input:focus {
             outline: none;
-            border-color: #007acc;
+            border-color: var(--accent);
             box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.2);
         }
 
@@ -356,6 +399,7 @@
             <div class="container">
                 <a href="/reset_course">← Select Different Course</a>
                 <a href="#stats">Progress</a>
+                <a href="/settings">⚙ Settings</a>
                 <span style="color: #666; margin-left: auto;">
                     {{ stats.total_lessons }} lessons
                 </span>
@@ -444,7 +488,10 @@
     {% else %}
         <div class="container">
             <div class="card" id="library-card">
-                <h2>Your Courses</h2>
+                <div style="display: flex; justify-content: space-between; align-items: center;">
+                    <h2>Your Courses</h2>
+                    <a href="/settings" style="color: var(--text-muted); text-decoration: none; font-size: 0.9em;">⚙ Settings</a>
+                </div>
                 <p id="library-path-bar" style="color: #999; font-size: 13px; margin-top: 6px;"></p>
                 <div id="library-groups" style="margin-top: 15px;"></div>
             </div>
@@ -629,5 +676,6 @@
             }
         });
     </script>
+    <script src="/static/theme.js"></script>
 </body>
 </html>

templates/lesson_view.html

@@ -3,24 +3,63 @@
 <head>
     <title>{{ lesson.title }} - {{ course.name }}</title>
     <style>
+        :root {
+            --bg-primary: #1a1a1a;
+            --bg-secondary: #2d2d2d;
+            --bg-tertiary: #3d3d3d;
+            --bg-tertiary-hover: #404040;
+            --text-primary: #e0e0e0;
+            --text-muted: #999;
+            --border-color: #555;
+            --accent: #007acc;
+            --accent-hover: #005a9e;
+            --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            --font-size-base: 16px;
+            --container-max-width: 1600px;
+            --radius: 8px;
+        }
+        [data-theme="light"] {
+            --bg-primary: #f2f2f2;
+            --bg-secondary: #ffffff;
+            --bg-tertiary: #eeeeee;
+            --bg-tertiary-hover: #e2e2e2;
+            --text-primary: #222222;
+            --text-muted: #666666;
+            --border-color: #cccccc;
+        }
+        [data-density="compact"] .container { padding: 10px; }
+        [data-density="compact"] .text-content { padding: 10px; margin: 10px 0; }
+        [data-density="compact"] .navigation,
+        [data-density="compact"] .nav-buttons { gap: 5px; margin: 10px 0; }
+        [data-card-style="elevated"] .container,
+        [data-card-style="elevated"] .text-content,
+        [data-card-style="elevated"] .file-link {
+            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
+        }
+        [data-card-style="bordered"] .container,
+        [data-card-style="bordered"] .text-content,
+        [data-card-style="bordered"] .file-link {
+            border: 1px solid var(--border-color);
+        }
         body { 
-            font-family: Arial, sans-serif; 
+            font-family: var(--font-family); 
+            font-size: var(--font-size-base);
             margin: 20px; 
-            background: #1a1a1a;
+            background: var(--bg-primary);
-            color: #e0e0e0;
+            color: var(--text-primary);
         }
         .container { 
-            max-width: 1600px; 
+            max-width: var(--container-max-width); 
             width: 95%;
             margin: 20px auto; 
-            background: #2d2d2d;
+            background: var(--bg-secondary);
             padding: 20px;
-            border-radius: 8px;
+            border-radius: var(--radius);
         }
         video, audio { 
             width: 100%; 
             max-width: 800px; 
-            border-radius: 5px;
+            border-radius: var(--radius);
             display: block;
             margin: 0 auto;
         }
@@ -38,14 +77,14 @@
             padding: 10px 20px; 
             margin: 5px; 
             cursor: pointer; 
-            background: #007acc;
+            background: var(--accent);
             color: white;
             border: none;
-            border-radius: 5px;
+            border-radius: var(--radius);
             transition: background 0.3s;
         }
         button:hover {
-            background: #005a9e;
+            background: var(--accent-hover);
         }
         button:disabled {
             background: #666;
@@ -55,31 +94,31 @@
             display: block; 
             margin: 5px 0; 
             padding: 10px; 
-            background: #3d3d3d; 
+            background: var(--bg-tertiary); 
             text-decoration: none; 
-            color: #e0e0e0; 
+            color: var(--text-primary); 
-            border-radius: 5px;
+            border-radius: var(--radius);
             transition: background 0.3s;
         }
         .file-link:hover { 
-            background: #404040; 
+            background: var(--bg-tertiary-hover); 
         }
         .lesson-path {
-            background: #333;
+            background: var(--bg-tertiary);
             padding: 10px;
-            border-radius: 5px;
+            border-radius: var(--radius);
             margin-bottom: 20px;
             font-family: monospace;
-            color: #999;
+            color: var(--text-muted);
         }
         .lesson-title {
-            color: #007acc;
+            color: var(--accent);
             margin-bottom: 20px;
         }
         .text-content {
-            background: #3d3d3d;
+            background: var(--bg-tertiary);
             padding: 20px;
-            border-radius: 5px;
+            border-radius: var(--radius);
             margin: 20px 0;
         }
         .text-content.plain-text {
@@ -91,7 +130,7 @@
         }
         .text-content iframe {
             background: white;
-            border-radius: 5px;
+            border-radius: var(--radius);
         }
         .nav-buttons {
             display: flex;
@@ -113,8 +152,9 @@
         </div>
         
         <div class="navigation">
-            <a href="/" style="text-decoration: none; color: #007acc;">← Back to Course</a>
+            <a href="/" style="text-decoration: none; color: var(--accent);">← Back to Course</a>
             <button onclick="markCompleted()">Mark as Completed</button>
+            <a href="/settings" style="text-decoration: none; color: var(--text-muted); margin-left: auto; font-size: 0.9em;">⚙ Settings</a>
         </div>
 
         <div class="content">
@@ -386,5 +426,6 @@
             }
         </script>
     </div>
+    <script src="/static/theme.js"></script>
 </body>
 </html>

templates/settings.html

@@ -0,0 +1,319 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Settings - OfflineU</title>
+    <style>
+        :root {
+            --bg-primary: #1a1a1a;
+            --bg-secondary: #2d2d2d;
+            --bg-tertiary: #3d3d3d;
+            --bg-tertiary-hover: #404040;
+            --text-primary: #e0e0e0;
+            --text-muted: #999;
+            --border-color: #555;
+            --accent: #007acc;
+            --accent-hover: #005a9e;
+            --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            --font-size-base: 16px;
+            --container-max-width: 1600px;
+            --radius: 8px;
+        }
+        [data-theme="light"] {
+            --bg-primary: #f2f2f2;
+            --bg-secondary: #ffffff;
+            --bg-tertiary: #eeeeee;
+            --bg-tertiary-hover: #e2e2e2;
+            --text-primary: #222222;
+            --text-muted: #666666;
+            --border-color: #cccccc;
+        }
+        [data-card-style="elevated"] .card {
+            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
+        }
+        [data-card-style="bordered"] .card {
+            border: 1px solid var(--border-color);
+        }
+        * { box-sizing: border-box; }
+        body {
+            font-family: var(--font-family);
+            font-size: var(--font-size-base);
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            margin: 20px;
+        }
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+        }
+        h1 {
+            color: var(--accent);
+            margin-bottom: 5px;
+        }
+        .subtitle {
+            color: var(--text-muted);
+            margin-bottom: 25px;
+        }
+        .card {
+            background: var(--bg-secondary);
+            border-radius: var(--radius);
+            padding: 20px 25px;
+            margin-bottom: 20px;
+        }
+        .card h2 {
+            font-size: 1.1em;
+            margin-bottom: 15px;
+            color: var(--text-primary);
+        }
+        .setting-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 0;
+            border-bottom: 1px solid var(--bg-tertiary);
+            gap: 20px;
+        }
+        .setting-row:last-child {
+            border-bottom: none;
+        }
+        .setting-row label {
+            flex: 1;
+        }
+        .setting-row .setting-desc {
+            display: block;
+            font-size: 0.85em;
+            color: var(--text-muted);
+            margin-top: 2px;
+        }
+        select {
+            background: var(--bg-tertiary);
+            color: var(--text-primary);
+            border: 1px solid var(--border-color);
+            padding: 8px 12px;
+            border-radius: var(--radius);
+            font-size: 14px;
+            min-width: 160px;
+        }
+        input[type="color"] {
+            width: 44px;
+            height: 34px;
+            padding: 0;
+            border: 1px solid var(--border-color);
+            border-radius: var(--radius);
+            background: none;
+            cursor: pointer;
+        }
+        .color-row {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        input[type="text"].hex-input {
+            width: 90px;
+            background: var(--bg-tertiary);
+            color: var(--text-primary);
+            border: 1px solid var(--border-color);
+            padding: 8px 10px;
+            border-radius: var(--radius);
+            font-family: monospace;
+        }
+        .actions {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 10px;
+        }
+        .btn {
+            background: var(--accent);
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: var(--radius);
+            cursor: pointer;
+            text-decoration: none;
+            display: inline-block;
+            font-size: 14px;
+            transition: background 0.3s;
+        }
+        .btn:hover { background: var(--accent-hover); }
+        .btn-secondary {
+            background: var(--bg-tertiary);
+            color: var(--text-primary);
+        }
+        .btn-secondary:hover { background: var(--bg-tertiary-hover); }
+        #save-status {
+            font-size: 0.9em;
+            color: #28a745;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        #save-status.visible { opacity: 1; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <a href="/" style="color: var(--text-muted); text-decoration: none; font-size: 0.9em;">← Back</a>
+        <h1 style="margin-top: 10px;">Settings</h1>
+        <p class="subtitle">Changes save and apply immediately across the app.</p>
+
+        <div class="card">
+            <h2>Appearance</h2>
+            <div class="setting-row">
+                <label for="theme">Theme
+                    <span class="setting-desc">Overall light/dark palette</span>
+                </label>
+                <select id="theme" data-setting="theme">
+                    {% for choice in theme_choices %}
+                    <option value="{{ choice }}" {% if settings.theme == choice %}selected{% endif %}>{{ choice|capitalize }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+            <div class="setting-row">
+                <label for="accent-hex">Accent color
+                    <span class="setting-desc">Used for links, buttons, and highlights</span>
+                </label>
+                <div class="color-row">
+                    <input type="color" id="accent-picker" value="{{ settings.accent_color }}">
+                    <input type="text" id="accent-hex" class="hex-input" value="{{ settings.accent_color }}" maxlength="7">
+                </div>
+            </div>
+            <div class="setting-row">
+                <label for="corner_radius">Corner style
+                    <span class="setting-desc">Sharp, rounded, or pill-shaped elements</span>
+                </label>
+                <select id="corner_radius" data-setting="corner_radius">
+                    {% for choice in corner_radius_choices %}
+                    <option value="{{ choice }}" {% if settings.corner_radius == choice %}selected{% endif %}>{{ choice|capitalize }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+            <div class="setting-row">
+                <label for="card_style">Card style
+                    <span class="setting-desc">Flat, elevated with shadow, or bordered</span>
+                </label>
+                <select id="card_style" data-setting="card_style">
+                    {% for choice in card_style_choices %}
+                    <option value="{{ choice }}" {% if settings.card_style == choice %}selected{% endif %}>{{ choice|capitalize }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+        </div>
+
+        <div class="card">
+            <h2>Typography</h2>
+            <div class="setting-row">
+                <label for="font_family">Font
+                    <span class="setting-desc">Typeface used across the app</span>
+                </label>
+                <select id="font_family" data-setting="font_family">
+                    {% for choice in font_family_choices %}
+                    <option value="{{ choice }}" {% if settings.font_family == choice %}selected{% endif %}>{{ choice|capitalize }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+            <div class="setting-row">
+                <label for="font_size">Text size
+                    <span class="setting-desc">Base font size</span>
+                </label>
+                <select id="font_size" data-setting="font_size">
+                    {% for choice in font_size_choices %}
+                    <option value="{{ choice }}" {% if settings.font_size == choice %}selected{% endif %}>{{ choice|capitalize }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+        </div>
+
+        <div class="card">
+            <h2>Layout</h2>
+            <div class="setting-row">
+                <label for="layout_width">Page width
+                    <span class="setting-desc">How much of the browser window content uses</span>
+                </label>
+                <select id="layout_width" data-setting="layout_width">
+                    {% for choice in layout_width_choices %}
+                    <option value="{{ choice }}" {% if settings.layout_width == choice %}selected{% endif %}>{{ choice|capitalize }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+            <div class="setting-row">
+                <label for="density">Density
+                    <span class="setting-desc">Spacing and padding throughout the app</span>
+                </label>
+                <select id="density" data-setting="density">
+                    {% for choice in density_choices %}
+                    <option value="{{ choice }}" {% if settings.density == choice %}selected{% endif %}>{{ choice|capitalize }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+        </div>
+
+        <div class="actions">
+            <button class="btn btn-secondary" onclick="resetSettings()">Reset to Defaults</button>
+            <span id="save-status">✓ Saved</span>
+        </div>
+    </div>
+
+    <script src="/static/theme.js"></script>
+    <script>
+        let saveTimeout = null;
+
+        function showSaved() {
+            const status = document.getElementById('save-status');
+            status.classList.add('visible');
+            clearTimeout(saveTimeout);
+            saveTimeout = setTimeout(() => status.classList.remove('visible'), 1500);
+        }
+
+        function saveSetting(key, value) {
+            fetch('/api/settings', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ [key]: value })
+            })
+            .then(r => r.json())
+            .then(data => {
+                if (data.success && window.__offlineuApplyTheme) {
+                    window.__offlineuApplyTheme(data);
+                    showSaved();
+                }
+            })
+            .catch(err => console.error('Failed to save setting:', err));
+        }
+
+        document.querySelectorAll('select[data-setting]').forEach(el => {
+            el.addEventListener('change', () => saveSetting(el.dataset.setting, el.value));
+        });
+
+        const accentPicker = document.getElementById('accent-picker');
+        const accentHex = document.getElementById('accent-hex');
+
+        accentPicker.addEventListener('input', () => {
+            accentHex.value = accentPicker.value;
+            saveSetting('accent_color', accentPicker.value);
+        });
+
+        accentHex.addEventListener('change', () => {
+            let value = accentHex.value.trim();
+            if (!value.startsWith('#')) value = '#' + value;
+            if (/^#[0-9a-fA-F]{6}$/.test(value)) {
+                accentPicker.value = value;
+                saveSetting('accent_color', value);
+            } else {
+                accentHex.value = accentPicker.value; // revert invalid input
+            }
+        });
+
+        function resetSettings() {
+            fetch('/api/settings/reset', { method: 'POST' })
+                .then(r => r.json())
+                .then(data => {
+                    if (data.success) {
+                        location.reload();
+                    }
+                })
+                .catch(err => console.error('Failed to reset settings:', err));
+        }
+    </script>
+</body>
+</html>