176 lines
6.0 KiB
HTML
176 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="dark">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Tutorial Materials</title>
|
|
|
|
<!-- Tailwind CSS v4.1.4 CDN -->
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
|
|
|
|
<!-- Tailwind Config (Dark Mode + Theme Colors) -->
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
background: '#121418', // dark slate with blue/gray tone
|
|
surface: '#1e2127', // a bit lighter for containers/cards
|
|
border: '#2a2d34', // visible but subtle borders
|
|
primary: '#4f8cff', // soft blue that pops but is not neon
|
|
text: '#e4e4e7', // light gray for high contrast
|
|
muted: '#a0a0ad', // for subdued text
|
|
},
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<!-- Flowbite -->
|
|
<link href="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.css" rel="stylesheet" />
|
|
|
|
<!-- in base.html, in <head> or just before </body> -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.1/socket.io.min.js"></script>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body class="bg-background text-text min-h-screen font-sans">
|
|
|
|
<!-- Header -->
|
|
<header class="bg-surface border-b border-border shadow-sm">
|
|
<div
|
|
class="w-full px-6 py-4
|
|
flex items-center justify-between"
|
|
>
|
|
<div class="relative z-20">
|
|
<button id="menu-toggle" class="text-white hover:text-gray-300 focus:outline-none p-2 rounded-md">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="hamburger-menu">
|
|
<button class="menu-toggle" aria-controls="course-selector">Menu</button>
|
|
|
|
<select id="course-selector" name="course_selection" onchange="this.form.submit()">
|
|
<option value="" disabled selected>Select a Course</option>
|
|
|
|
{% for course in courses %}
|
|
<option value="{{ course.id }}">
|
|
{{ course.display_name }}
|
|
</option>
|
|
{% endfor %}
|
|
|
|
</select>
|
|
</div>
|
|
|
|
|
|
<div class="flex items-center space-x-1 relative z-10">
|
|
<span class="text-white text-base font-medium whitespace-nowrap py-1">
|
|
User: {{ user_name }}
|
|
</span>
|
|
|
|
<form method="POST" action="/logout">
|
|
<button
|
|
type="submit"
|
|
class="text-sm text-white bg-red-600 px-3 py-1 rounded-md hover:bg-red-700 transition"
|
|
>
|
|
Logout
|
|
</button>
|
|
</form>
|
|
|
|
<a href="/admin" class="ml-4">
|
|
<button class="bg-primary hover:bg-blue-700 text-white px-3 py-1 rounded-md transition">
|
|
Admin
|
|
</button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<script>
|
|
document.getElementById('menu-toggle').addEventListener('click', function() {
|
|
document.getElementById('course-menu').classList.toggle('hidden');
|
|
});
|
|
</script> <!-- Main Content -->
|
|
|
|
<main class="max-w-5xl mx-auto px-6 py-10 space-y-12">
|
|
<h3 class="text-3xl font-bold text-center mb-8">{{course_display_name}}</h3>
|
|
|
|
|
|
{% if active_banner %}
|
|
<section class="flex justify-center">
|
|
<div class="p-4 text-sm text-yellow-800 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300" role="alert">
|
|
<span class="font-bold">{{ active_banner.content }}</span>
|
|
</div>
|
|
</section>
|
|
{% endif %}
|
|
|
|
<!-- Password Form -->
|
|
<section class="flex justify-center">
|
|
<div class="w-full max-w-md">
|
|
<div class="bg-surface border border-border rounded-lg shadow-md p-6">
|
|
<h2 class="text-xl font-semibold text-center mb-4">Enter Access Password</h2>
|
|
<form method="POST" action="/access" class="space-y-4">
|
|
<input
|
|
type="password"
|
|
name="password"
|
|
placeholder="Enter password"
|
|
required
|
|
autofocus
|
|
class="w-full px-4 py-3 rounded-md bg-background border border-border text-text placeholder-muted focus:outline-none focus:ring-2 focus:ring-primary"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
class="w-full bg-primary hover:bg-blue-700 text-white py-2 rounded-md transition"
|
|
>
|
|
Unlock
|
|
</button>
|
|
</form>
|
|
{% if error %}
|
|
<p class="text-red-500 text-center mt-3">{{ error }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Deck Cards -->
|
|
{% if decks %}
|
|
<section>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{% for deck in decks %}
|
|
<a href="/slides/{{ deck.deck }}/" class="block bg-surface border border-border rounded-xl p-5 shadow-sm hover:border-primary hover:bg-background transition">
|
|
<h3 class="text-lg font-semibold mb-1">{{ deck.name }}</h3>
|
|
<p class="text-muted text-sm">{{ deck.description }}</p>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
{% else %}
|
|
<p class="text-center text-muted">No decks unlocked yet.</p>
|
|
{% endif %}
|
|
|
|
</main>
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
|
|
<script>
|
|
function enableUsernameEdit() {
|
|
const input = document.getElementById('usernameInput');
|
|
const editBtn = document.getElementById('editBtn');
|
|
const saveBtn = document.getElementById('saveBtn');
|
|
|
|
input.removeAttribute('disabled');
|
|
input.classList.add('border-border');
|
|
input.focus();
|
|
|
|
editBtn.classList.add('hidden');
|
|
saveBtn.classList.remove('hidden');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|