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

Added a back to main clicking on the link, added help page, added a last 5 viewed

Browse Source
This commit is contained in:
rmsitz
2026-08-20 18:57:27 -04:00
parent 66dff7e69f
commit 5b8bef1451
5 changed files with 306 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/course_dashboard.html
+25 -25
View File
@@ -97,6 +97,9 @@
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.brand-icon {
@@ -480,13 +483,13 @@
<body>
<div class="app-header">
<div class="container">
<div class="brand">
<a href="/" class="brand">
<span class="brand-icon">📚</span>
<div>
<h1>OfflineU</h1>
<p class="tagline">Your self-hosted course library</p>
</div>
</div>
</a>
{% if course %}
<div class="header-course-badge">{{ course.name }}</div>
{% endif %}
@@ -494,6 +497,25 @@
</div>
<div class="page-content">
{% if recent_views %}
<div class="container">
<div class="card">
<h2>🕐 Recently Viewed</h2>
<div style="margin-top: 12px;">
{% for view in recent_views %}
<div class="lesson-item"
onclick="window.location.href='/recent/open?course_path={{ view.course_path | urlencode }}&lesson_path={{ view.lesson_path | urlencode }}'">
<div class="lesson-title">
<span class="lesson-icon">▶️</span>
<span>{{ view.lesson_title }}</span>
</div>
<span class="lesson-meta">{{ view.course_name }}{% if view.viewed_display %} · {{ view.viewed_display }}{% endif %}</span>
</div>
{% endfor %}
</div>
</div>
</div>
{% endif %}
{% if course %}
<div class="nav">
<div class="container">
@@ -608,29 +630,6 @@
<div id="course-status" style="margin-top: 10px;"></div>
</div>
</div>
<div style="margin-top: 40px;">
<div class="card">
<h3>How to Use OfflineU:</h3>
<ul style="margin-top: 10px; list-style-type: none; padding-left: 20px;">
<li><strong>Prepare your course files</strong> in a directory structure</li>
<li><strong>Copy the full path</strong> to your course directory</li>
<li><strong>Paste the path</strong> in the input field above</li>
<li><strong>Click "Load Course"</strong> or press Enter</li>
<li><strong>Start learning!</strong> Your progress will be saved automatically</li>
</ul>
</div>
<div class="card">
<h3>Supported File Types:</h3>
<ul style="margin-top: 10px; list-style-type: none; padding-left: 20px;">
<li><strong>Videos:</strong> .mp4, .mkv, .avi, .mov, .webm</li>
<li><strong>Audio:</strong> .mp3, .wav, .m4a, .aac</li>
<li><strong>Documents:</strong> .txt, .md, .html, .pdf</li>
<li><strong>Subtitles:</strong> .srt, .vtt</li>
</ul>
</div>
</div>
</div>
{% endif %}
</div>
@@ -641,6 +640,7 @@
📚 <span>OfflineU</span>
</div>
<div class="footer-links">
<a href="/help">❓ Help</a>
<a href="/settings">⚙ Settings</a>
</div>
</div>
templates/help.html
+174
View File
@@ -0,0 +1,174 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Help - 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; }
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: 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;
margin: 0 auto;
}
h1 {
color: var(--accent);
margin-bottom: 20px;
}
.card {
background: var(--bg-secondary);
border-radius: var(--radius);
padding: 20px 25px;
margin-bottom: 20px;
}
.card h3 {
margin-bottom: 10px;
}
.card ul {
list-style-type: none;
padding-left: 0;
}
.card li {
padding: 6px 0;
}
</style>
</head>
<body>
<div class="app-header">
<div class="header-inner">
<span class="brand-icon">📚</span>
<a href="/" class="brand-link">OfflineU</a>
</div>
</div>
<div class="page-content">
<div class="container">
<h1>Help</h1>
<div class="card">
<h3>How to Use OfflineU</h3>
<ul>
<li><strong>Prepare your course files</strong> in a directory structure</li>
<li><strong>Browse your library</strong> from the main page, or enter a path manually</li>
<li><strong>Click a course</strong> to load it</li>
<li><strong>Start learning!</strong> Your progress will be saved automatically</li>
</ul>
</div>
<div class="card">
<h3>Supported File Types</h3>
<ul>
<li><strong>Videos:</strong> .mp4, .mkv, .avi, .mov, .webm</li>
<li><strong>Audio:</strong> .mp3, .wav, .m4a, .aac</li>
<li><strong>Documents:</strong> .txt, .md, .html, .pdf</li>
<li><strong>Subtitles:</strong> .srt, .vtt</li>
</ul>
</div>
</div>
</div>
<footer class="app-footer">
<div class="footer-inner">
<div class="footer-brand">
📚 <span>OfflineU</span>
</div>
<div class="footer-links">
<a href="/">← Back to app</a>
</div>
</div>
</footer>
<script src="/static/theme.js"></script>
</body>
</html>
templates/lesson_view.html
+5
View File
@@ -104,6 +104,10 @@
align-items: center;
gap: 8px;
}
.footer-links {
display: flex;
gap: 20px;
}
.footer-links a {
color: var(--text-muted);
text-decoration: none;
@@ -509,6 +513,7 @@
📚 <span>OfflineU</span>
</div>
<div class="footer-links">
<a href="/help">❓ Help</a>
<a href="/settings">⚙ Settings</a>
</div>
</div>
templates/settings.html
+5
View File
@@ -95,6 +95,10 @@
align-items: center;
gap: 8px;
}
.footer-links {
display: flex;
gap: 20px;
}
.footer-links a {
color: var(--accent);
text-decoration: none;
@@ -340,6 +344,7 @@
📚 <span>OfflineU</span>
</div>
<div class="footer-links">
<a href="/help">❓ Help</a>
<a href="/">← Back to app</a>
</div>
</div>