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

offlineu_core.py

@@ -439,6 +439,66 @@ def get_library_root() -> str:
     return LIBRARY_PATH
 
 
+RECENT_VIEWS_FILE = os.path.join(DATA_DIR, 'recent_views.json')
+MAX_RECENT_VIEWS = 5
+
+
+def record_recent_view(course_name: str, course_path: str, lesson_path: str, lesson_title: str) -> None:
+    """
+    Record a lesson view for the cross-course 'Recently Viewed' list on the
+    dashboard, so jumping back to where you left off doesn't require
+    re-browsing the library - even for a different course than whichever
+    one happens to be loaded right now.
+    """
+    entries = get_recent_views()
+
+    # Drop any existing entry for this exact lesson so it moves to the
+    # front instead of appearing twice.
+    entries = [
+        e for e in entries
+        if not (e.get('course_path') == course_path and e.get('lesson_path') == lesson_path)
+    ]
+
+    entries.insert(0, {
+        'course_name': course_name,
+        'course_path': course_path,
+        'lesson_path': lesson_path,
+        'lesson_title': lesson_title,
+        'viewed_at': datetime.now().isoformat()
+    })
+    entries = entries[:MAX_RECENT_VIEWS]
+
+    try:
+        os.makedirs(DATA_DIR, exist_ok=True)
+        with open(RECENT_VIEWS_FILE, 'w') as f:
+            json.dump(entries, f, indent=2)
+    except OSError as e:
+        print(f"Could not save recent views: {e}")
+
+
+def get_recent_views() -> List[Dict[str, Any]]:
+    """Load the persisted 'Recently Viewed' list, newest first."""
+    try:
+        if os.path.exists(RECENT_VIEWS_FILE):
+            with open(RECENT_VIEWS_FILE, 'r') as f:
+                return json.load(f)
+    except (json.JSONDecodeError, OSError) as e:
+        print(f"Could not load recent views: {e}")
+    return []
+
+
+def get_recent_views_for_display() -> List[Dict[str, Any]]:
+    """Recent views with a human-friendly timestamp added for the template."""
+    entries = get_recent_views()
+    for entry in entries:
+        try:
+            dt = datetime.fromisoformat(entry['viewed_at'])
+            entry['viewed_display'] = dt.strftime('%b %d, %I:%M %p').replace(' 0', ' ')
+        except (KeyError, ValueError):
+            entry['viewed_display'] = ''
+    return entries
+
+
 class ProgressTracker:
     """Handles progress tracking and persistence"""
 
@@ -527,7 +587,8 @@ def index():
         # Show dashboard with course selection option
         return render_template('course_dashboard.html',
                                course=None,
-                               stats={'total_lessons': 0, 'completed_lessons': 0, 'completion_percentage': 0})
+                               stats={'total_lessons': 0, 'completed_lessons': 0, 'completion_percentage': 0},
+                               recent_views=get_recent_views_for_display())
 
     # Apply progress data to tree
     ProgressTracker.apply_progress_to_tree(current_course)
@@ -535,7 +596,8 @@ def index():
 
     return render_template('course_dashboard.html',
                            course=current_course,
-                           stats=stats)
+                           stats=stats,
+                           recent_views=get_recent_views_for_display())
 
 
 @app.route('/browse')
@@ -724,6 +786,36 @@ def load_course():
         return jsonify({'error': str(e)}), 500
 
 
+@app.route('/recent/open')
+def open_recent():
+    """
+    Jump straight to a "Recently Viewed" entry from the dashboard: load its
+    course if it isn't already the active one, then go to that lesson.
+    """
+    global current_course
+
+    course_path = request.args.get('course_path', '')
+    lesson_path = request.args.get('lesson_path', '')
+
+    if not course_path or not lesson_path or not os.path.exists(course_path):
+        return redirect(url_for('index'))
+
+    try:
+        if not current_course or current_course.path != course_path:
+            current_course = DynamicCourseParser.scan_directory(course_path)
+    except Exception as e:
+        print(f"Could not load course for recent view: {e}")
+        return redirect(url_for('index'))
+
+    return redirect(url_for('view_lesson', lesson_path=lesson_path))
+
+
+@app.route('/help')
+def help_page():
+    """Static help page: how to use the app, supported file types."""
+    return render_template('help.html')
+
+
 @app.route('/lesson/<path:lesson_path>')
 def view_lesson(lesson_path: str):
     """View specific lesson by path"""
@@ -761,6 +853,9 @@ def view_lesson(lesson_path: str):
     # Update last accessed
     ProgressTracker.update_lesson_progress(current_course, lesson_path)
 
+    # Record for the cross-course "Recently Viewed" list on the dashboard
+    record_recent_view(current_course.name, current_course.path, lesson_path, lesson.title)
+
     return render_template('lesson_view.html',
                            course=current_course,
                            lesson=lesson,

templates/course_dashboard.html

@@ -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

@@ -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

@@ -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

@@ -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>