rmsitz/offlineu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
rmsitz
2026-08-20 17:04:21 -04:00
parent 13de434e6c
commit a604569a45
6 changed files with 649 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/lesson_view.html
+63 -22
View File
@@ -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>