Adding a new settings page and other tweaks for how it looks
This commit is contained in:
+12
-9
@@ -1,19 +1,22 @@
|
||||
version: '3.8'
|
||||
|
||||
services:
|
||||
offlineu:
|
||||
build: .
|
||||
pull_policy: build
|
||||
container_name: offlineu
|
||||
network_mode: host
|
||||
image: ghcr.io/skippysteve/offlineu:main
|
||||
container_name: offlineu-app
|
||||
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
|
||||
healthcheck:
|
||||
test: ["CMD", "curl", "-f", "http://localhost:5000/"]
|
||||
interval: 30s
|
||||
timeout: 10s
|
||||
retries: 3
|
||||
start_period: 40s
|
||||
@@ -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"""
|
||||
|
||||
@@ -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;
|
||||
})();
|
||||
@@ -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;
|
||||
background: #1a1a1a;
|
||||
color: #e0e0e0;
|
||||
font-family: var(--font-family);
|
||||
font-size: var(--font-size-base);
|
||||
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;
|
||||
border-radius: 8px;
|
||||
background: var(--bg-secondary);
|
||||
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;
|
||||
background: #404040;
|
||||
border-left-color: var(--accent);
|
||||
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>
|
||||
+63
-22
@@ -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;
|
||||
color: #e0e0e0;
|
||||
background: var(--bg-primary);
|
||||
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;
|
||||
border-radius: 5px;
|
||||
color: var(--text-primary);
|
||||
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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user