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/course_dashboard.html
+84 -36
View File
@@ -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>