168 lines
6.8 KiB
HTML
168 lines
6.8 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>
|
|
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/output.css') }}">
|
|
|
|
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.1/socket.io.min.js"></script>
|
|
|
|
<script src="https://unpkg.com/htmx.org@1.9.10"></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="flex items-center space-x-2">
|
|
<span class="text-gray-700 dark:text-gray-200 text-base font-medium whitespace-nowrap">
|
|
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>
|
|
|
|
</div>
|
|
<div class="flex items-center space-x-3">
|
|
<a href="https://zulip.in.tum.de/#narrow/channel/3234-ITSec-Tutorium-Simon-Bu.C3.9Fmann" target="_blank">
|
|
<img src="{{ url_for('static', filename='zulip_icon.svg') }}" class="h-8 w-8">
|
|
</a>
|
|
<a href="https://discordapp.com/users/306086176585154560" target="_blank" class="mr-6">
|
|
<img src="{{ url_for('static', filename='discord_icon.svg') }}" class="h-8 w-8">
|
|
</a>
|
|
|
|
<a href="{{ url_for('admin.admin') }}">
|
|
<button class="bg-primary hover:bg-blue-700 text-white px-3 py-1 rounded-md transition">
|
|
Admin
|
|
</button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header> <!-- Main Content -->
|
|
|
|
<main class="max-w-5xl mx-auto px-6 py-10 space-y-12">
|
|
|
|
{% 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 %}
|
|
|
|
<div class="flex justify-center">
|
|
<div class="relative group">
|
|
<button class="flex items-center text-gray-900 dark:text-white hover:text-blue-700 dark:hover:text-blue-500 font-medium py-1 px-3 rounded-lg bg-transparent text-2xl">
|
|
{{active_course_name}}
|
|
<svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="absolute hidden group-hover:block bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 z-50">
|
|
<ul class="py-2 px-4 text-sm text-gray-700 dark:text-gray-200">
|
|
{% for course in courses %}
|
|
<li>
|
|
<form method="POST" action="/switch_course/{{ course.id }}">
|
|
<button type="submit"> {{ course.name }}</button>
|
|
</form>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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>
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
<div class="flashed-messages">
|
|
{% for category, message in messages %}
|
|
{% if category == 'error' %}
|
|
<p class="text-red-500 text-center mt-3">{{ message }}</p>
|
|
{% elif category == 'expired' %}
|
|
<p class="text-orange-500 text-center mt-3">{{ message }}</p>
|
|
{% else %}
|
|
<p class="text-gray-500 text-center mt-3">{{ message }}</p>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
</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 %}
|
|
<div class="bg-surface border border-border rounded-xl shadow-sm transition hover:shadow-lg flex flex-col">
|
|
|
|
<div class="flex items-center p-5 gap-4">
|
|
|
|
<a href="/slides/{{deck.course.folder}}/{{ deck.deck }}/{{ deck.index_file}}"
|
|
class="flex-grow block border-r border-border pr-4 hover:border-primary transition rounded-xl">
|
|
<h3 class="text-lg font-semibold mb-1">{{ deck.name }}</h3>
|
|
<p class="text-muted text-sm">{{ deck.description }}</p>
|
|
</a>
|
|
{% if deck.export_file %}
|
|
<a href="/slides/{{deck.course.folder}}/{{ deck.deck }}/export"
|
|
class="inline-flex items-center justify-center flex-shrink-0 h-10 w-10 text-on-primary hover:bg-primary/90 transition"
|
|
download title="Download Presentation">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
|
</svg>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
</div>
|
|
{% 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>
|
|
</body>
|
|
</html>
|