797 lines
26 KiB
HTML
797 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% if course %}{{ course.name }} - OfflineU{% else %}OfflineU{% endif %}</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
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);
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
body {
|
|
font-family: var(--font-family);
|
|
font-size: var(--font-size-base);
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
line-height: 1.6;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
}
|
|
.page-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.container {
|
|
max-width: var(--container-max-width);
|
|
width: 95%;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.app-header {
|
|
background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
|
|
padding: 28px 0;
|
|
margin-bottom: 30px;
|
|
border-bottom: 3px solid var(--accent);
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.app-header .container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
|
|
.brand-icon {
|
|
font-size: 2.2em;
|
|
line-height: 1;
|
|
}
|
|
|
|
.brand h1 {
|
|
color: var(--accent);
|
|
font-size: 1.9em;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.brand .tagline {
|
|
color: var(--text-muted);
|
|
font-size: 0.85em;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.header-course-badge {
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--accent);
|
|
color: var(--text-primary);
|
|
padding: 8px 16px;
|
|
border-radius: var(--radius);
|
|
font-size: 0.9em;
|
|
max-width: 340px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.app-footer {
|
|
background: var(--bg-secondary);
|
|
border-top: 1px solid var(--border-color);
|
|
margin-top: 40px;
|
|
padding: 18px 0;
|
|
}
|
|
|
|
.app-footer .container {
|
|
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 {
|
|
display: flex;
|
|
gap: 20px;
|
|
}
|
|
|
|
.footer-links a {
|
|
color: var(--text-muted);
|
|
text-decoration: none;
|
|
font-size: 0.9em;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.footer-links a:hover {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.nav {
|
|
background: var(--bg-tertiary);
|
|
padding: 10px 0;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.nav .container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
.nav a {
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
padding: 10px 15px;
|
|
border-radius: var(--radius);
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.nav a:hover {
|
|
background: var(--accent);
|
|
}
|
|
|
|
.card {
|
|
background: var(--bg-secondary);
|
|
border-radius: var(--radius);
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
border-left: 4px solid var(--accent);
|
|
}
|
|
|
|
.btn {
|
|
background: var(--accent);
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 24px;
|
|
border-radius: var(--radius);
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
transition: background 0.3s;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.btn:hover {
|
|
background: var(--accent-hover);
|
|
}
|
|
|
|
.btn:disabled {
|
|
background: #666;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: #666;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: #555;
|
|
}
|
|
|
|
.progress-bar {
|
|
background: #444;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
height: 20px;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.progress-fill {
|
|
background: var(--accent);
|
|
height: 100%;
|
|
transition: width 0.3s ease;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* Dynamic Directory Tree Styles */
|
|
.tree-container {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.tree-item {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.tree-header {
|
|
background: var(--bg-tertiary);
|
|
padding: 12px 15px;
|
|
border-radius: var(--radius);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
transition: background 0.3s;
|
|
border-left: 3px solid #666;
|
|
}
|
|
|
|
.tree-header:hover {
|
|
background: var(--bg-tertiary-hover);
|
|
}
|
|
|
|
.tree-header.directory {
|
|
border-left-color: var(--accent);
|
|
}
|
|
|
|
.tree-header.lesson {
|
|
border-left-color: #28a745;
|
|
}
|
|
|
|
.tree-header.completed {
|
|
border-left-color: #28a745;
|
|
background: #1e3d1e;
|
|
}
|
|
|
|
.tree-header.completed:hover {
|
|
background: #2d5a2d;
|
|
}
|
|
|
|
.tree-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex: 1;
|
|
}
|
|
|
|
.tree-icon {
|
|
font-size: 1.2em;
|
|
width: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.tree-name {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tree-stats {
|
|
font-size: 0.85em;
|
|
color: var(--text-muted);
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.tree-toggle {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-primary);
|
|
font-size: 1.2em;
|
|
cursor: pointer;
|
|
padding: 5px;
|
|
border-radius: 3px;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.tree-toggle:hover {
|
|
background: #555;
|
|
}
|
|
|
|
.tree-content {
|
|
margin-left: 25px;
|
|
margin-top: 5px;
|
|
display: none;
|
|
}
|
|
|
|
.tree-content.expanded {
|
|
display: block;
|
|
}
|
|
|
|
.lesson-item {
|
|
background: var(--bg-tertiary);
|
|
padding: 10px 15px;
|
|
border-radius: var(--radius);
|
|
margin-bottom: 5px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
transition: all 0.3s;
|
|
cursor: pointer;
|
|
border-left: 3px solid #666;
|
|
}
|
|
|
|
.lesson-item:hover {
|
|
border-left-color: var(--accent);
|
|
background: var(--bg-tertiary-hover);
|
|
transform: translateX(5px);
|
|
}
|
|
|
|
.lesson-item.completed {
|
|
border-left-color: #28a745;
|
|
background: #1e3d1e;
|
|
}
|
|
|
|
.lesson-item.completed:hover {
|
|
background: #2d5a2d;
|
|
}
|
|
|
|
.lesson-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex: 1;
|
|
}
|
|
|
|
.lesson-icon {
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.lesson-meta {
|
|
font-size: 0.85em;
|
|
color: var(--text-muted);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.lesson-type {
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-size: 0.8em;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.lesson-type.video { background: #e74c3c; color: white; }
|
|
.lesson-type.audio { background: #9b59b6; color: white; }
|
|
.lesson-type.text { background: #34495e; color: white; }
|
|
.lesson-type.quiz { background: #f39c12; color: white; }
|
|
.lesson-type.mixed { background: #16a085; color: white; }
|
|
|
|
.status-icon {
|
|
font-size: 1.2em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.status-icon.completed {
|
|
color: #28a745;
|
|
}
|
|
|
|
.status-icon.pending {
|
|
color: #666;
|
|
}
|
|
|
|
.course-selector {
|
|
border: 2px dashed #666;
|
|
padding: 40px;
|
|
text-align: center;
|
|
margin: 40px 0;
|
|
border-radius: 10px;
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.course-selector input {
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid #666;
|
|
color: var(--text-primary);
|
|
padding: 12px;
|
|
font-size: 14px;
|
|
border-radius: var(--radius);
|
|
width: 80%;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.course-selector input::placeholder {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.course-selector input:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.2);
|
|
}
|
|
|
|
.last-accessed {
|
|
background: #2d5a2d;
|
|
border-left-color: #28a745;
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: 10px;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 2em;
|
|
}
|
|
|
|
.nav .container {
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.course-selector input {
|
|
width: 100%;
|
|
margin-right: 0;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.tree-content {
|
|
margin-left: 15px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app-header">
|
|
<div class="container">
|
|
<div class="brand">
|
|
<span class="brand-icon">📚</span>
|
|
<div>
|
|
<h1>OfflineU</h1>
|
|
<p class="tagline">Your self-hosted course library</p>
|
|
</div>
|
|
</div>
|
|
{% if course %}
|
|
<div class="header-course-badge">{{ course.name }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page-content">
|
|
{% if course %}
|
|
<div class="nav">
|
|
<div class="container">
|
|
<a href="/reset_course">← Select Different Course</a>
|
|
<a href="#stats">Progress</a>
|
|
<span style="color: #666; margin-left: auto;">
|
|
{{ stats.total_lessons }} lessons
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="card">
|
|
<h2>{{ course.name }}</h2>
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 15px; flex-wrap: wrap; gap: 10px;">
|
|
<div>
|
|
<strong>{{ stats.completed_lessons }}/{{ stats.total_lessons }}</strong> lessons completed
|
|
</div>
|
|
<div style="color: #007acc; font-size: 1.2em;">
|
|
{{ "%.1f"|format(stats.completion_percentage) }}%
|
|
</div>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: {{ stats.completion_percentage }}%;"></div>
|
|
</div>
|
|
|
|
{% if stats.last_accessed_path %}
|
|
<div class="last-accessed">
|
|
<strong>Last Accessed:</strong> {{ stats.last_accessed_path }}
|
|
<a href="/lesson/{{ stats.last_accessed_path }}" class="btn" style="margin-left: 10px;">
|
|
Continue
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="tree-container">
|
|
{% macro render_tree_node(node, depth=0) %}
|
|
<div class="tree-item">
|
|
<div class="tree-header directory" onclick="toggleTree(this)">
|
|
<div class="tree-title">
|
|
<span class="tree-icon">📁</span>
|
|
<span class="tree-name">{{ node.name }}</span>
|
|
<span class="tree-stats">
|
|
{{ (node.children|length + node.lessons|length) }} items
|
|
</span>
|
|
</div>
|
|
{% if node.children or node.lessons %}
|
|
<button class="tree-toggle">▶</button>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if node.children or node.lessons %}
|
|
<div class="tree-content">
|
|
{% for child_name, child_node in node.children.items() %}
|
|
{{ render_tree_node(child_node, depth + 1) }}
|
|
{% endfor %}
|
|
|
|
{% for lesson in node.lessons %}
|
|
{% set lesson_relative_path = lesson.path|replace('\\', '/')|replace(course.path|replace('\\', '/'), '')|replace('//', '/')|replace('/', '', 1) %}
|
|
<div class="lesson-item {% if lesson.completed %}completed{% endif %}"
|
|
onclick="window.location.href='/lesson/{{ lesson_relative_path }}/{{ lesson.title|replace(' ', '_') }}'">
|
|
<div class="lesson-title">
|
|
<span class="lesson-icon">
|
|
{% if lesson.lesson_type == 'video' %}🎥
|
|
{% elif lesson.lesson_type == 'audio' %}🎵
|
|
{% elif lesson.lesson_type == 'quiz' %}📝
|
|
{% elif lesson.lesson_type == 'mixed' %}📦
|
|
{% else %}📄{% endif %}
|
|
</span>
|
|
{{ lesson.title }}
|
|
</div>
|
|
<div class="lesson-meta">
|
|
<span class="lesson-type {{ lesson.lesson_type }}">{{ lesson.lesson_type|title }}</span>
|
|
{% if lesson.completed %}
|
|
<span class="status-icon completed">✓</span>
|
|
{% else %}
|
|
<span class="status-icon pending">○</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{{ render_tree_node(course.root_node) }}
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="container">
|
|
<div class="card" id="library-card">
|
|
<h2>Your Courses</h2>
|
|
<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>
|
|
|
|
<div class="course-selector card">
|
|
<p>
|
|
<a href="#" onclick="toggleManualPath(event)" style="color: #007acc;">
|
|
Don't see it? Enter a path manually
|
|
</a>
|
|
</p>
|
|
<div id="manual-path-box" style="display:none; margin-top: 15px;">
|
|
<p>Enter the full path to your course directory:</p>
|
|
<div style="margin: 20px 0;">
|
|
<input type="text" id="course-path" placeholder="e.g., /app/courses/My Course">
|
|
<button onclick="loadCourseFromPath()" class="btn">Load Course</button>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<footer class="app-footer">
|
|
<div class="container">
|
|
<div class="footer-brand">
|
|
📚 <span>OfflineU</span>
|
|
</div>
|
|
<div class="footer-links">
|
|
<a href="/settings">⚙ Settings</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
function toggleTree(element) {
|
|
console.log('Toggle clicked:', element);
|
|
|
|
// Find the content div that comes after this header
|
|
const content = element.nextElementSibling;
|
|
const toggle = element.querySelector('.tree-toggle');
|
|
|
|
console.log('Content element:', content);
|
|
console.log('Toggle element:', toggle);
|
|
|
|
if (content && content.classList.contains('tree-content')) {
|
|
const isExpanded = content.classList.contains('expanded');
|
|
content.classList.toggle('expanded');
|
|
|
|
if (toggle) {
|
|
toggle.textContent = content.classList.contains('expanded') ? '▼' : '▶';
|
|
}
|
|
|
|
console.log('Toggled tree, expanded:', content.classList.contains('expanded'));
|
|
} else {
|
|
console.log('No content element found or not tree-content');
|
|
}
|
|
}
|
|
|
|
function toggleManualPath(e) {
|
|
e.preventDefault();
|
|
const box = document.getElementById('manual-path-box');
|
|
box.style.display = box.style.display === 'none' ? 'block' : 'none';
|
|
}
|
|
|
|
function loadLibrary() {
|
|
const libraryCard = document.getElementById('library-card');
|
|
if (!libraryCard) return;
|
|
|
|
fetch('/library')
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
document.getElementById('library-path-bar').textContent =
|
|
`Scanning ${data.library_path}`;
|
|
|
|
const container = document.getElementById('library-groups');
|
|
const groupNames = Object.keys(data.groups).sort((a, b) => a.localeCompare(b));
|
|
|
|
if (groupNames.length === 0) {
|
|
const reason = (data.errors && data.errors.length)
|
|
? data.errors.join(' ')
|
|
: `No course folders found under ${data.library_path}.`;
|
|
container.innerHTML = `<p style="color:#999;">${reason} You can still load a course by path below.</p>`;
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = groupNames.map((group, i) => `
|
|
<div class="tree-item">
|
|
<div class="tree-header directory" onclick="toggleTree(this)">
|
|
<div class="tree-title">
|
|
<span class="tree-icon">📁</span>
|
|
<span class="tree-name">${group}</span>
|
|
<span class="tree-stats">${data.groups[group].length} course${data.groups[group].length === 1 ? '' : 's'}</span>
|
|
</div>
|
|
<button class="tree-toggle">▶</button>
|
|
</div>
|
|
<div class="tree-content">
|
|
${data.groups[group].map(course => `
|
|
<div class="lesson-item"
|
|
onclick="loadCoursePath('${course.path.replace(/'/g, "\\'")}')">
|
|
<div class="lesson-title">
|
|
<span class="lesson-icon">🎓</span>
|
|
<span>${course.name}</span>
|
|
</div>
|
|
<span class="lesson-meta">${course.media_files} media file${course.media_files === 1 ? '' : 's'}</span>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
})
|
|
.catch(() => {
|
|
document.getElementById('library-groups').innerHTML =
|
|
'<p style="color:#ff6b6b;">Could not reach the library scanner.</p>';
|
|
});
|
|
}
|
|
|
|
function loadCoursePath(path) {
|
|
fetch('/load_course', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({course_path: path})
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
location.reload();
|
|
} else {
|
|
alert('Error: ' + data.error);
|
|
}
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', loadLibrary);
|
|
|
|
function loadCourseFromPath() {
|
|
const pathInput = document.getElementById('course-path');
|
|
const statusDiv = document.getElementById('course-status');
|
|
const coursePath = pathInput.value.trim();
|
|
|
|
if (!coursePath) {
|
|
statusDiv.innerHTML = '<p style="color: #ff6b6b;">Please enter a course path.</p>';
|
|
return;
|
|
}
|
|
|
|
// Show loading status
|
|
statusDiv.innerHTML = '<p style="color: #007acc;">Loading course...</p>';
|
|
|
|
fetch('/load_course', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({course_path: coursePath})
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
statusDiv.innerHTML = '<p style="color: #28a745;">Course loaded successfully! Redirecting...</p>';
|
|
setTimeout(() => location.reload(), 1000);
|
|
} else {
|
|
statusDiv.innerHTML = `<p style="color: #ff6b6b;">Error: ${data.error}</p>`;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading course:', error);
|
|
statusDiv.innerHTML = '<p style="color: #ff6b6b;">Error loading course. Please check the path and try again.</p>';
|
|
});
|
|
}
|
|
|
|
// Allow Enter key to submit
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const pathInput = document.getElementById('course-path');
|
|
if (pathInput) {
|
|
pathInput.addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
loadCourseFromPath();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
<script src="/static/theme.js"></script>
|
|
</body>
|
|
</html> |