refactored templates
This commit is contained in:
@@ -195,3 +195,12 @@ def hide_active_banner():
|
|||||||
@flask_login.login_required
|
@flask_login.login_required
|
||||||
def confused_notifications():
|
def confused_notifications():
|
||||||
return render_template("confused.html")
|
return render_template("confused.html")
|
||||||
|
|
||||||
|
|
||||||
|
@admin_bp.route("/dashboard")
|
||||||
|
@flask_login.login_required
|
||||||
|
def dashboard():
|
||||||
|
return render_template(
|
||||||
|
'dashboard.html',
|
||||||
|
grafana_url='/dashboard/d/tutor-tool'
|
||||||
|
)
|
||||||
|
|||||||
@@ -1,229 +1,144 @@
|
|||||||
<!DOCTYPE html>
|
{% extends "admin_base.html" %}
|
||||||
<html lang="en" class="dark">
|
{% from "macros/ui.html" import course_switcher, delete_button, styled_field %}
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Deck Admin</title>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/output.css') }}">
|
{% set active_page = 'admin' %}
|
||||||
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
{% set title = 'Deck Admin' %}
|
||||||
|
|
||||||
|
{# Override left nav to include course switcher #}
|
||||||
|
{% block nav_left_extra %}
|
||||||
|
{{ course_switcher(courses, active_course_name, '/admin/switch_course') }}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
</head>
|
{% block admin_content %}
|
||||||
<body class="bg-background text-text min-h-screen font-sans">
|
<div class="container mx-auto px-6 py-10 space-y-12">
|
||||||
<nav class="bg-white border-gray-200 dark:bg-gray-900">
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
|
||||||
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
|
|
||||||
<div class="flex items-center space-x-6 rtl:space-x-reverse">
|
|
||||||
<a href="{{ url_for('main.index') }}" class="flex items-center">
|
|
||||||
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Tutortool</span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="relative group">
|
{# ── Deck Form + Decks ─────────────────────────────────────── #}
|
||||||
<button class="flex items-center text-gray-900 dark:text-white hover:text-blue-700 dark:hover:text-blue-500 font-medium py-2 px-3 rounded-lg bg-transparent">
|
<div class="bg-surface rounded-xl p-6 shadow-lg space-y-6">
|
||||||
{{active_course_name}}
|
<h2 class="text-2xl font-semibold">Add New Deck</h2>
|
||||||
<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">
|
<form method="POST" class="space-y-4">
|
||||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
|
{{ deck_form.hidden_tag() }}
|
||||||
</svg>
|
{{ styled_field(deck_form.name) }}
|
||||||
</button>
|
{{ styled_field(deck_form.deck, {'multiple': true}) }}
|
||||||
|
{{ styled_field(deck_form.description) }}
|
||||||
<div class="absolute z-10 hidden group-hover:block w-44 bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700">
|
<div>
|
||||||
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
|
{{ deck_form.submit_deck(class="w-full bg-primary hover:bg-blue-700 text-white py-2 px-4 rounded-lg") }}
|
||||||
{% for course in courses %}
|
|
||||||
<li>
|
|
||||||
<form method="POST" action="/admin/switch_course/{{ course.id }}">
|
|
||||||
<button type="submit">{{ course.name }}</button>
|
|
||||||
</form>
|
|
||||||
</li>
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
<div class="w-auto" id="navbar-default">
|
<h2 class="text-2xl font-semibold pt-6">Existing Decks</h2>
|
||||||
<ul class="flex flex-row space-x-8 rtl:space-x-reverse font-medium p-0 border-0 bg-white dark:bg-gray-900">
|
{% if decks %}
|
||||||
<li>
|
<div class="overflow-x-auto">
|
||||||
<a href="{{ url_for('admin.admin') }}" class="rounded-sm text-blue-700 dark:text-blue-500 font-semibold" aria-current="page">Deck Admin</a>
|
<table class="w-full table-auto text-left text-sm">
|
||||||
</li>
|
<thead class="text-muted border-b border-border">
|
||||||
<li>
|
<tr>
|
||||||
<a href="{{ url_for('admin.banner') }}" class="text-gray-900 dark:text-white hover:text-blue-700 dark:hover:text-blue-500">Banner</a>
|
<th class="px-4 py-2">Name</th>
|
||||||
</li>
|
<th class="px-4 py-2">Passwords</th>
|
||||||
<li>
|
<th class="px-4 py-2">Action</th>
|
||||||
<a href="{{ url_for('admin.confused_notifications') }}" class="text-gray-900 dark:text-white hover:text-blue-700 dark:hover:text-blue-500">Confused</a>
|
</tr>
|
||||||
</li>
|
</thead>
|
||||||
</ul>
|
<tbody>
|
||||||
</div>
|
{% for deck in decks %}
|
||||||
|
<tr class="border-b border-border hover:bg-background/30">
|
||||||
|
<td class="px-4 py-2 font-medium">{{ deck.name }}</td>
|
||||||
|
<td class="px-4 py-2">
|
||||||
|
{% if deck.passwords %}
|
||||||
|
<ul class="list-disc list-inside text-muted">
|
||||||
|
{% for password in deck.passwords %}
|
||||||
|
<li>{{ password.value }}</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
{% else %}
|
||||||
|
<em class="text-muted">None</em>
|
||||||
|
{% endif %}
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-2">
|
||||||
|
{{ delete_button(url_for('admin.delete_deck', deck_id=deck.id)) }}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
{% else %}
|
||||||
<div class="container mx-auto px-6 py-10 space-y-12">
|
<p class="text-center text-muted">No decks available.</p>
|
||||||
|
{% endif %}
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
|
|
||||||
|
|
||||||
<!-- Deck Form + Decks -->
|
|
||||||
<div class="bg-surface rounded-xl p-6 shadow-lg space-y-6">
|
|
||||||
<h2 class="text-2xl font-semibold">Add New Deck</h2>
|
|
||||||
<form method="POST" class="space-y-4">
|
|
||||||
{{ deck_form.hidden_tag() }}
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label class="block mb-1 text-sm font-medium">{{ deck_form.name.label }}</label>
|
|
||||||
{{ deck_form.name(class="w-full rounded-lg p-3 bg-background border border-border text-text placeholder-muted focus:outline-none focus:ring-2 focus:ring-primary") }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label class="block mb-1 text-sm font-medium">{{ deck_form.deck.label }}</label>
|
|
||||||
{{ deck_form.deck(multiple=True, class="w-full rounded-lg p-3 bg-background border border-border text-text placeholder-muted focus:outline-none focus:ring-2 focus:ring-primary") }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label class="block mb-1 text-sm font-medium">{{ deck_form.description.label }}</label>
|
|
||||||
{{ deck_form.description(class="w-full rounded-lg p-3 bg-background border border-border text-text placeholder-muted focus:outline-none focus:ring-2 focus:ring-primary") }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
{{ deck_form.submit_deck(class="w-full bg-primary hover:bg-blue-700 text-white py-2 px-4 rounded-lg") }}
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<!-- Existing Decks Table -->
|
|
||||||
<h2 class="text-2xl font-semibold pt-6">Existing Decks</h2>
|
|
||||||
{% if decks %}
|
|
||||||
<div class="overflow-x-auto">
|
|
||||||
<table class="w-full table-auto text-left text-sm">
|
|
||||||
<thead class="text-muted border-b border-border">
|
|
||||||
<tr>
|
|
||||||
<th class="px-4 py-2">Name</th>
|
|
||||||
<th class="px-4 py-2">Passwords</th>
|
|
||||||
<th class="px-4 py-2">Action</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{% for deck in decks %}
|
|
||||||
<tr class="border-b border-border hover:bg-background/30">
|
|
||||||
<td class="px-4 py-2 font-medium">{{ deck.name }}</td>
|
|
||||||
<td class="px-4 py-2">
|
|
||||||
{% if deck.passwords %}
|
|
||||||
<ul class="list-disc list-inside text-muted">
|
|
||||||
{% for password in deck.passwords %}
|
|
||||||
<li>{{ password.value }}</li>
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
{% else %}
|
|
||||||
<em class="text-muted">None</em>
|
|
||||||
{% endif %}
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-2">
|
|
||||||
<form method="POST" action="{{ url_for('admin.delete_deck', deck_id=deck.id) }}">
|
|
||||||
<button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded-lg text-sm">Delete</button>
|
|
||||||
</form>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{% endfor %}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
{% else %}
|
|
||||||
<p class="text-center text-muted">No decks available.</p>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Password Form + Passwords -->
|
|
||||||
<div class="bg-surface rounded-xl p-6 shadow-lg space-y-6">
|
|
||||||
<h2 class="text-2xl font-semibold">Add New Password</h2>
|
|
||||||
<form method="POST" class="space-y-4">
|
|
||||||
{{ password_form.hidden_tag() }}
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label class="block mb-1 text-sm font-medium">{{ password_form.value.label }}</label>
|
|
||||||
{{ password_form.value(class="w-full rounded-lg p-3 bg-background border border-border text-text placeholder-muted focus:outline-none focus:ring-2 focus:ring-primary") }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label class="block mb-1 text-sm font-medium">{{ password_form.expires_at.label }}</label>
|
|
||||||
{{ password_form.expires_at(class="w-full rounded-lg p-3 bg-background border border-border text-text placeholder-muted focus:outline-none focus:ring-2 focus:ring-primary", type="datetime-local") }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label class="block mb-1 text-sm font-medium">{{ password_form.decks.label }}</label>
|
|
||||||
{{ password_form.decks(class="w-full rounded-lg p-3 bg-background border border-border text-text placeholder-muted focus:outline-none focus:ring-2 focus:ring-primary") }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
{{ password_form.submit_password(class="w-full bg-primary hover:bg-blue-700 text-white py-2 px-4 rounded-lg") }}
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<!-- Existing Passwords Table -->
|
|
||||||
<h2 class="text-2xl font-semibold pt-6">Existing Passwords</h2>
|
|
||||||
{% if passwords %}
|
|
||||||
<div class="overflow-x-auto">
|
|
||||||
<table class="w-full table-auto text-left text-sm">
|
|
||||||
<thead class="text-muted border-b border-border">
|
|
||||||
<tr>
|
|
||||||
<th class="px-4 py-2">Password</th>
|
|
||||||
<th class="px-4 py-2">Expires</th>
|
|
||||||
<th class="px-4 py-2">Decks</th>
|
|
||||||
<th class="px-4 py-2">Action</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{% for password in passwords %}
|
|
||||||
<tr class="border-b border-border hover:bg-background/30">
|
|
||||||
<td class="px-4 py-2 font-medium">{{ password.value }}</td>
|
|
||||||
<td class="px-4 py-2 local-time"
|
|
||||||
data-utc="{{ password.expires_at.strftime('%Y-%m-%dT%H:%M:%SZ') if password.expires_at }}">
|
|
||||||
{{ password.expires_at }}
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-2">
|
|
||||||
{% if password.decks %}
|
|
||||||
<ul class="list-disc list-inside text-muted">
|
|
||||||
{% for deck in password.decks %}
|
|
||||||
<li>{{ deck.name }}</li>
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
{% else %}
|
|
||||||
<em class="text-muted">None</em>
|
|
||||||
{% endif %}
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-2">
|
|
||||||
<form method="POST" action="{{ url_for('admin.delete_password', password_id=password.id) }}">
|
|
||||||
<button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded-lg text-sm">Delete</button>
|
|
||||||
</form>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{% endfor %}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
{% else %}
|
|
||||||
<p class="text-center text-muted">No passwords available.</p>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
|
{# ── Password Form + Passwords ──────────────────────────────── #}
|
||||||
<script>
|
<div class="bg-surface rounded-xl p-6 shadow-lg space-y-6">
|
||||||
document.querySelectorAll('.local-time').forEach(el => {
|
<h2 class="text-2xl font-semibold">Add New Password</h2>
|
||||||
|
<form method="POST" class="space-y-4">
|
||||||
|
{{ password_form.hidden_tag() }}
|
||||||
|
{{ styled_field(password_form.value) }}
|
||||||
|
{{ styled_field(password_form.expires_at, {'type': 'datetime-local'}) }}
|
||||||
|
{{ styled_field(password_form.decks) }}
|
||||||
|
<div>
|
||||||
|
{{ password_form.submit_password(class="w-full bg-primary hover:bg-blue-700 text-white py-2 px-4 rounded-lg") }}
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<h2 class="text-2xl font-semibold pt-6">Existing Passwords</h2>
|
||||||
|
{% if passwords %}
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<table class="w-full table-auto text-left text-sm">
|
||||||
|
<thead class="text-muted border-b border-border">
|
||||||
|
<tr>
|
||||||
|
<th class="px-4 py-2">Password</th>
|
||||||
|
<th class="px-4 py-2">Expires</th>
|
||||||
|
<th class="px-4 py-2">Decks</th>
|
||||||
|
<th class="px-4 py-2">Action</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{% for password in passwords %}
|
||||||
|
<tr class="border-b border-border hover:bg-background/30">
|
||||||
|
<td class="px-4 py-2 font-medium">{{ password.value }}</td>
|
||||||
|
<td class="px-4 py-2 local-time"
|
||||||
|
data-utc="{{ password.expires_at.strftime('%Y-%m-%dT%H:%M:%SZ') if password.expires_at }}">
|
||||||
|
{{ password.expires_at }}
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-2">
|
||||||
|
{% if password.decks %}
|
||||||
|
<ul class="list-disc list-inside text-muted">
|
||||||
|
{% for deck in password.decks %}
|
||||||
|
<li>{{ deck.name }}</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
{% else %}
|
||||||
|
<em class="text-muted">None</em>
|
||||||
|
{% endif %}
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-2">
|
||||||
|
{{ delete_button(url_for('admin.delete_password', password_id=password.id)) }}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<p class="text-center text-muted">No passwords available.</p>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endblock admin_content %}
|
||||||
|
|
||||||
|
{% block scripts_extra %}
|
||||||
|
<script>
|
||||||
|
document.querySelectorAll('.local-time').forEach(el => {
|
||||||
const utcStr = el.getAttribute('data-utc');
|
const utcStr = el.getAttribute('data-utc');
|
||||||
if (utcStr) {
|
if (utcStr) {
|
||||||
// Now utcStr is "2026-02-17T02:44:23Z"
|
const date = new Date(utcStr);
|
||||||
const date = new Date(utcStr);
|
if (!isNaN(date)) {
|
||||||
|
el.textContent = date.toLocaleString('de-DE', {
|
||||||
if (!isNaN(date)) {
|
day: '2-digit', month: '2-digit', year: 'numeric',
|
||||||
el.textContent = date.toLocaleString('de-DE', {
|
hour: '2-digit', minute: '2-digit'
|
||||||
day: '2-digit',
|
});
|
||||||
month: '2-digit',
|
}
|
||||||
year: 'numeric',
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: '2-digit'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
{% endblock %}
|
||||||
</html>
|
|
||||||
|
|
||||||
|
|||||||
54
app/templates/admin_base.html
Normal file
54
app/templates/admin_base.html
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
{% extends "base.html" %}
|
||||||
|
|
||||||
|
{#
|
||||||
|
Admin base layout.
|
||||||
|
Child templates can set `active_page` to one of: 'admin', 'banner', 'confused'
|
||||||
|
to highlight the correct nav link.
|
||||||
|
#}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
{% block admin_nav %}
|
||||||
|
<nav class="bg-white border-gray-200 dark:bg-gray-900">
|
||||||
|
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
|
||||||
|
|
||||||
|
{# Left side: logo + optional course switcher #}
|
||||||
|
<div class="flex items-center space-x-6 rtl:space-x-reverse">
|
||||||
|
<a href="{{ url_for('main.index') }}" class="flex items-center">
|
||||||
|
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Tutortool</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
{% block nav_left_extra %}{% endblock %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# Right side: nav links #}
|
||||||
|
<div class="w-auto" id="navbar-default">
|
||||||
|
<ul class="flex flex-row space-x-8 rtl:space-x-reverse font-medium p-0 border-0 bg-white dark:bg-gray-900">
|
||||||
|
{% set nav_links = [
|
||||||
|
('admin.admin', 'Deck Admin', 'admin'),
|
||||||
|
('admin.banner', 'Banner', 'banner'),
|
||||||
|
('admin.confused_notifications','Confused', 'confused'),
|
||||||
|
('admin.dashboard', 'Dashboard', 'dashboard')
|
||||||
|
] %}
|
||||||
|
{% for endpoint, label, page_id in nav_links %}
|
||||||
|
{% if active_page == page_id %}
|
||||||
|
<li>
|
||||||
|
<a href="{{ url_for(endpoint) }}"
|
||||||
|
class="rounded-sm text-blue-700 dark:text-blue-500 font-semibold"
|
||||||
|
aria-current="page">{{ label }}</a>
|
||||||
|
</li>
|
||||||
|
{% else %}
|
||||||
|
<li>
|
||||||
|
<a href="{{ url_for(endpoint) }}"
|
||||||
|
class="text-gray-900 dark:text-white hover:text-blue-700 dark:hover:text-blue-500">{{ label }}</a>
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
{% endblock admin_nav %}
|
||||||
|
|
||||||
|
{% block admin_content %}{% endblock %}
|
||||||
|
{% endblock body %}
|
||||||
@@ -1,101 +1,85 @@
|
|||||||
<!DOCTYPE html>
|
{% extends "base.html" %}
|
||||||
<html lang="en" class="dark">
|
{% from "macros/ui.html" import flash_messages %}
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Login</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/output.css') }}">
|
|
||||||
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
|
||||||
</head>
|
|
||||||
<body class="bg-gray-900 text-gray-100 min-h-screen flex items-center justify-center">
|
|
||||||
|
|
||||||
<div class="w-full max-w-sm p-6 bg-gray-800 rounded-2xl shadow-lg">
|
{% set title = 'Admin Login' %}
|
||||||
<h2 class="text-2xl font-bold mb-6 text-center text-white">Admin Login</h2>
|
|
||||||
|
|
||||||
<!-- Display Flash Messages -->
|
{% block body_class %}bg-gray-900 text-gray-100 min-h-screen flex items-center justify-center{% endblock %}
|
||||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
||||||
{% if messages %}
|
|
||||||
<div class="mb-4">
|
|
||||||
{% for category, message in messages %}
|
|
||||||
<div class="text-sm p-3 rounded-md {{ 'bg-red-600' if category == 'error' else 'bg-green-600' }} text-white">
|
|
||||||
{{ message }}
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
{% endwith %}
|
|
||||||
|
|
||||||
<form method="POST" novalidate>
|
{% block body %}
|
||||||
{{ form.hidden_tag() }}
|
<div class="w-full max-w-sm p-6 bg-gray-800 rounded-2xl shadow-lg">
|
||||||
|
<h2 class="text-2xl font-bold mb-6 text-center text-white">Admin Login</h2>
|
||||||
|
|
||||||
<!-- Username Field -->
|
{{ flash_messages() }}
|
||||||
<div class="mb-4">
|
|
||||||
<label for="user_name" class="block text-sm font-medium mb-1 text-gray-200">
|
|
||||||
{{ form.user_name.label.text }}
|
|
||||||
</label>
|
|
||||||
{{ form.user_name(class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500") }}
|
|
||||||
{% for error in form.user_name.errors %}
|
|
||||||
<p class="text-red-400 text-sm mt-1">{{ error }}</p>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Password Field with Toggle -->
|
<form method="POST" novalidate>
|
||||||
<div class="mb-6">
|
{{ form.hidden_tag() }}
|
||||||
<label for="password" class="block text-sm font-medium mb-1 text-gray-200">
|
|
||||||
{{ form.password.label.text }}
|
|
||||||
</label>
|
|
||||||
<div class="relative">
|
|
||||||
{{ form.password(
|
|
||||||
class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500",
|
|
||||||
id="password"
|
|
||||||
) }}
|
|
||||||
<button type="button"
|
|
||||||
onclick="togglePassword()"
|
|
||||||
class="absolute inset-y-0 right-0 px-3 flex items-center text-gray-400 hover:text-white"
|
|
||||||
tabindex="-1"
|
|
||||||
aria-label="Toggle password visibility">
|
|
||||||
<svg id="eyeIcon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-5 h-5">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
||||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
||||||
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{% for error in form.password.errors %}
|
|
||||||
<p class="text-red-400 text-sm mt-1">{{ error }}</p>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Submit Button -->
|
{# Username #}
|
||||||
<div>
|
<div class="mb-4">
|
||||||
<button type="submit"
|
<label for="user_name" class="block text-sm font-medium mb-1 text-gray-200">
|
||||||
class="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-md transition duration-300">
|
{{ form.user_name.label.text }}
|
||||||
Log In
|
</label>
|
||||||
</button>
|
{{ form.user_name(class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500") }}
|
||||||
</div>
|
{% for error in form.user_name.errors %}
|
||||||
</form>
|
<p class="text-red-400 text-sm mt-1">{{ error }}</p>
|
||||||
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Password Toggle Script -->
|
{# Password with visibility toggle #}
|
||||||
<script>
|
<div class="mb-6">
|
||||||
function togglePassword() {
|
<label for="password" class="block text-sm font-medium mb-1 text-gray-200">
|
||||||
const passwordInput = document.getElementById("password");
|
{{ form.password.label.text }}
|
||||||
const icon = document.getElementById("eyeIcon");
|
</label>
|
||||||
const isHidden = passwordInput.type === "password";
|
<div class="relative">
|
||||||
passwordInput.type = isHidden ? "text" : "password";
|
{{ form.password(
|
||||||
icon.innerHTML = isHidden
|
class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500",
|
||||||
? `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
id="password"
|
||||||
d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.542-7a9.953 9.953 0 012.159-3.362m2.649-2.35A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.542 7a9.953 9.953 0 01-4.042 4.442M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
) }}
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
<button type="button"
|
||||||
d="M3 3l18 18" />`
|
onclick="togglePassword()"
|
||||||
: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
class="absolute inset-y-0 right-0 px-3 flex items-center text-gray-400 hover:text-white"
|
||||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
tabindex="-1"
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
aria-label="Toggle password visibility">
|
||||||
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />`;
|
<svg id="eyeIcon" xmlns="http://www.w3.org/2000/svg" fill="none"
|
||||||
}
|
viewBox="0 0 24 24" stroke="currentColor" class="w-5 h-5">
|
||||||
</script>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{% for error in form.password.errors %}
|
||||||
|
<p class="text-red-400 text-sm mt-1">{{ error }}</p>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
|
||||||
</body>
|
<button type="submit"
|
||||||
</html>
|
class="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-md transition duration-300">
|
||||||
|
Log In
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block scripts %}{% endblock %}{# No Flowbite needed #}
|
||||||
|
|
||||||
|
{% block scripts_extra %}
|
||||||
|
<script>
|
||||||
|
function togglePassword() {
|
||||||
|
const input = document.getElementById("password");
|
||||||
|
const icon = document.getElementById("eyeIcon");
|
||||||
|
const hide = input.type === "password";
|
||||||
|
input.type = hide ? "text" : "password";
|
||||||
|
icon.innerHTML = hide
|
||||||
|
? `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.542-7a9.953 9.953 0 012.159-3.362m2.649-2.35A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.542 7a9.953 9.953 0 01-4.042 4.442M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M3 3l18 18" />`
|
||||||
|
: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />`;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
|
|||||||
@@ -1,105 +1,59 @@
|
|||||||
<!DOCTYPE html>
|
{% extends "admin_base.html" %}
|
||||||
<html lang="en" class="dark">
|
{% from "macros/ui.html" import styled_field %}
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Banner</title>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/output.css') }}">
|
{% set active_page = 'banner' %}
|
||||||
|
{% set title = 'Banner' %}
|
||||||
|
|
||||||
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
{% block admin_content %}
|
||||||
|
<main class="max-w-5xl mx-auto px-6 py-10 space-y-12">
|
||||||
|
|
||||||
</head>
|
{# ── Banner Form ───────────────────────────────────────────────── #}
|
||||||
|
<section class="flex justify-center">
|
||||||
<body class="bg-background text-text min-h-screen font-sans">
|
<div class="w-full max-w-md">
|
||||||
|
<div class="bg-surface border border-border rounded-lg shadow-md p-6">
|
||||||
<nav class="bg-white border-gray-200 dark:bg-gray-900">
|
<h2 class="text-xl font-semibold text-center mb-4">Enter new Banner</h2>
|
||||||
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
|
<form method="POST" class="space-y-4">
|
||||||
<a href="{{url_for('main.index')}}" class="flex items-center space-x-3 rtl:space-x-reverse">
|
{{ banner_form.hidden_tag() }}
|
||||||
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Tutortool</span>
|
{{ styled_field(banner_form.content) }}
|
||||||
</a>
|
<button type="submit"
|
||||||
<div class="hidden w-full md:block md:w-auto" id="navbar-default">
|
class="w-full bg-primary hover:bg-blue-700 text-white py-2 rounded-md transition">
|
||||||
<ul class="font-medium flex flex-col justify-between md:justify-evenly p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
|
Add message
|
||||||
<li>
|
</button>
|
||||||
<a href="{{url_for('admin.admin')}}"
|
</form>
|
||||||
class="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">
|
{% if error %}
|
||||||
Deck Admin
|
<p class="text-red-500 text-center mt-3">{{ error }}</p>
|
||||||
</a>
|
{% endif %}
|
||||||
</li>
|
</div>
|
||||||
<li>
|
|
||||||
<a href="{{url_for('admin.banner')}}"
|
|
||||||
class="block py-2 px-3 text-white bg-blue-700 rounded-sm md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500"
|
|
||||||
aria-current="page">
|
|
||||||
Banner
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="{{url_for('admin.confused_notifications')}}"
|
|
||||||
class="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">
|
|
||||||
Confused
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Main Content -->
|
{# ── Banner List ───────────────────────────────────────────────── #}
|
||||||
<main class="max-w-5xl mx-auto px-6 py-10 space-y-12">
|
{% if banners %}
|
||||||
|
<section>
|
||||||
<!-- Banner Form -->
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
<section class="flex justify-center">
|
{% for banner in banners %}
|
||||||
<div class="w-full max-w-md">
|
<div class="block bg-surface border border-border rounded-xl p-5 shadow-sm hover:border-primary hover:bg-background transition">
|
||||||
<div class="bg-surface border border-border rounded-lg shadow-md p-6">
|
<h3 class="text-lg font-semibold mb-1">{{ banner.content }}</h3>
|
||||||
<h2 class="text-xl font-semibold text-center mb-4">Enter new Banner</h2>
|
{% if banner.is_active %}
|
||||||
<form method="POST" class="space-y-4">
|
<form method="POST" action="{{ url_for('admin.hide_active_banner') }}">
|
||||||
{{ banner_form.hidden_tag() }}
|
<button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white py-2 rounded-md transition">
|
||||||
<div>
|
Hide
|
||||||
<label class="block mb-1 text-sm font-medium">{{ banner_form.content.label }}</label>
|
|
||||||
{{ banner_form.content(class="w-full rounded-lg p-3 bg-background border border-border text-text placeholder-muted focus:outline-none focus:ring-2 focus:ring-primary") }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
class="w-full bg-primary hover:bg-blue-700 text-white py-2 rounded-md transition">
|
|
||||||
Add message
|
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
{% if error %}
|
{% else %}
|
||||||
<p class="text-red-500 text-center mt-3">{{ error }}</p>
|
<form method="POST" action="{{ url_for('admin.set_active_banner', banner_id=banner.id) }}">
|
||||||
{% endif %}
|
<button type="submit" class="w-full bg-primary hover:bg-blue-700 text-white py-2 rounded-md transition">
|
||||||
</div>
|
Show banner
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{% else %}
|
||||||
|
<p class="text-center text-muted">No banners created yet.</p>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
<!-- Banners -->
|
</main>
|
||||||
{% if banners %}
|
{% endblock admin_content %}
|
||||||
<section>
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
||||||
{% for banner in banners %}
|
|
||||||
<div 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">{{ banner.content }}</h3>
|
|
||||||
{% if banner.is_active %}
|
|
||||||
<form method="POST" action="{{ url_for('admin.hide_active_banner') }}">
|
|
||||||
<button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white py-2 rounded-md transition">Hide</button>
|
|
||||||
</form>
|
|
||||||
{% else %}
|
|
||||||
<form method="POST", action="{{ url_for('admin.set_active_banner', banner_id=banner.id)}}">
|
|
||||||
<button type="submit" class="w-full bg-primary hover:bg-blue-700 text-white py-2 rounded-md transition">
|
|
||||||
Show banner
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
{% else %}
|
|
||||||
<p class="text-center text-muted">No banners created yet.</p>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
24
app/templates/base.html
Normal file
24
app/templates/base.html
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>{% block title %}Tutortool{% endblock %}</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/output.css') }}">
|
||||||
|
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
||||||
|
|
||||||
|
{% block head_extra %}{% endblock %}
|
||||||
|
</head>
|
||||||
|
<body class="{% block body_class %}bg-background text-text min-h-screen font-sans{% endblock %}">
|
||||||
|
|
||||||
|
{% block body %}{% endblock %}
|
||||||
|
|
||||||
|
{% block scripts %}
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block scripts_extra %}{% endblock %}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
13
app/templates/centered_layout.html
Normal file
13
app/templates/centered_layout.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
{% extends "base.html" %}
|
||||||
|
|
||||||
|
{# Centered card layout used by login, register, and set_token pages. #}
|
||||||
|
|
||||||
|
{% block body_class %}flex items-center justify-center min-h-screen bg-background{% endblock %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<div class="bg-gray-800 p-8 rounded-lg shadow-lg max-w-md w-full border border-gray-700">
|
||||||
|
{% block card_content %}{% endblock %}
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block scripts %}{% endblock %}{# No Flowbite needed on auth pages #}
|
||||||
@@ -1,99 +1,60 @@
|
|||||||
<!DOCTYPE html>
|
{% extends "admin_base.html" %}
|
||||||
<html lang="en" class="dark">
|
|
||||||
<head>
|
{% set active_page = 'confused' %}
|
||||||
<meta charset="utf-8">
|
{% set title = 'Live Confusion Alerts' %}
|
||||||
<title>Live Confusion Alerts</title>
|
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/output.css') }}">
|
{% block head_extra %}
|
||||||
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
|
||||||
<script src="{{ url_for('static', filename='js/socket.io.min.js') }}"></script>
|
<script src="{{ url_for('static', filename='js/socket.io.min.js') }}"></script>
|
||||||
</head>
|
{% endblock %}
|
||||||
<body class="bg-background min-h-screen">
|
|
||||||
<nav class="bg-white border-gray-200 dark:bg-gray-900">
|
{% block admin_content %}
|
||||||
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
|
<div class="max-w-3xl mx-auto mt-12 px-4">
|
||||||
<a href="{{url_for('main.index')}}" class="flex items-center space-x-3 rtl:space-x-reverse">
|
<h1 class="text-3xl font-bold mb-6 dark:text-white">Live Confusion Alerts</h1>
|
||||||
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Tutortool</span>
|
<div id="notif-list" class="space-y-4 text-gray-700">
|
||||||
</a>
|
<p class="italic text-gray-500">Waiting for students to click "I'm confused…"</p>
|
||||||
<div class="hidden w-full md:block md:w-auto" id="navbar-default">
|
|
||||||
<ul class="font-medium flex flex-col justify-between md:justify-evenly p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
|
|
||||||
<li>
|
|
||||||
<a href="{{url_for('admin.admin')}}"
|
|
||||||
class="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">
|
|
||||||
Deck Admin
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="{{url_for('admin.banner')}}"
|
|
||||||
class="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">
|
|
||||||
Banner
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="{{url_for('admin.confused_notifications')}}"
|
|
||||||
class="block py-2 px-3 text-white bg-blue-700 rounded-sm md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500"
|
|
||||||
aria-current="page">
|
|
||||||
Confused
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</div>
|
||||||
|
{% endblock admin_content %}
|
||||||
|
|
||||||
|
{% block scripts %}{% endblock %}{# No Flowbite needed #}
|
||||||
|
|
||||||
<div class="max-w-3xl mx-auto mt-12 px-4">
|
{% block scripts_extra %}
|
||||||
<h1 class="text-3xl font-bold mb-6 dark:text-white">Live Confusion Alerts</h1>
|
<script>
|
||||||
<div id="notif-list" class="space-y-4 text-gray-700">
|
const notifList = document.getElementById("notif-list");
|
||||||
<p class="italic text-gray-500">Waiting for students to click “I’m confused…”</p>
|
const socket = io({ transports: ['websocket'] });
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Socket.IO client (served by your Flask-SocketIO) -->
|
socket.on("confused", data => {
|
||||||
<script>
|
if (notifList.children.length === 1 &&
|
||||||
const notifList = document.getElementById("notif-list");
|
notifList.children[0].classList.contains("italic")) {
|
||||||
const socket = io({ transports: ['websocket'] });
|
notifList.innerHTML = "";
|
||||||
|
}
|
||||||
|
|
||||||
socket.on("confused", data => {
|
const box = document.createElement("div");
|
||||||
// Remove placeholder if it’s still there
|
box.className = [
|
||||||
if (notifList.children.length === 1 &&
|
"flex items-start",
|
||||||
notifList.children[0].classList.contains("italic")) {
|
"bg-red-50 border border-red-400",
|
||||||
notifList.innerHTML = "";
|
"text-red-800 px-4 py-3 rounded-lg shadow",
|
||||||
}
|
"relative"
|
||||||
|
].join(" ");
|
||||||
|
|
||||||
// Build a new alert box
|
const who = data.who || "Someone";
|
||||||
const box = document.createElement("div");
|
const now = new Date().toLocaleTimeString();
|
||||||
box.className = [
|
box.innerHTML = `
|
||||||
"flex items-start",
|
<div class="flex-1">
|
||||||
"bg-red-50 border border-red-400",
|
<strong class="font-semibold">Confused!</strong>
|
||||||
"text-red-800 px-4 py-3 rounded-lg shadow",
|
<p>${who} clicked "I'm confused." at ${now}</p>
|
||||||
"relative"
|
</div>
|
||||||
].join(" ");
|
`;
|
||||||
|
|
||||||
// Message text
|
const btn = document.createElement("button");
|
||||||
const who = data.who || "Someone";
|
btn.className = "ml-4 text-red-600 hover:text-red-900 focus:outline-none";
|
||||||
const now = new Date().toLocaleTimeString();
|
btn.setAttribute("aria-label", "Dismiss");
|
||||||
box.innerHTML = `
|
btn.innerHTML = "×";
|
||||||
<div class="flex-1">
|
btn.onclick = () => box.remove();
|
||||||
<strong class="font-semibold">Confused!</strong>
|
box.appendChild(btn);
|
||||||
<p>${who} clicked “I’m confused.” at ${now}</p>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
// Close button
|
|
||||||
const btn = document.createElement("button");
|
|
||||||
btn.className = "ml-4 text-red-600 hover:text-red-900 focus:outline-none";
|
|
||||||
btn.setAttribute("aria-label", "Dismiss");
|
|
||||||
btn.innerHTML = "×";
|
|
||||||
btn.onclick = () => box.remove();
|
|
||||||
|
|
||||||
box.appendChild(btn);
|
|
||||||
|
|
||||||
// Prepend new alert
|
|
||||||
notifList.prepend(box);
|
|
||||||
|
|
||||||
// Auto‐remove after 20 s
|
|
||||||
setTimeout(() => box.remove(), 20000);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
|
notifList.prepend(box);
|
||||||
|
setTimeout(() => box.remove(), 20000);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
|
|||||||
14
app/templates/dashboard.html
Normal file
14
app/templates/dashboard.html
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
{% extends "admin_base.html" %}
|
||||||
|
|
||||||
|
{% set active_page = 'dashboard' %}
|
||||||
|
{% set title = 'Dashboard' %}
|
||||||
|
|
||||||
|
{% block admin_content %}
|
||||||
|
<div class="flex flex-col" style="height: calc(100vh - 57px);">
|
||||||
|
<iframe
|
||||||
|
src="{{ grafana_url }}?kiosk"
|
||||||
|
class="w-full flex-1 border-0"
|
||||||
|
allowfullscreen>
|
||||||
|
</iframe>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
@@ -1,58 +1,55 @@
|
|||||||
<!DOCTYPE html>
|
{% extends "base.html" %}
|
||||||
<html lang="en" class="dark">
|
{% from "macros/ui.html" import course_switcher %}
|
||||||
<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') }}">
|
{% set title = 'Tutorial Materials' %}
|
||||||
|
|
||||||
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
|
||||||
|
|
||||||
|
{% block head_extra %}
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.1/socket.io.min.js"></script>
|
<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>
|
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
|
||||||
</head>
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
|
||||||
<body class="bg-background text-text min-h-screen font-sans">
|
{# ── Header ────────────────────────────────────────────────────── #}
|
||||||
|
|
||||||
<!-- Header -->
|
|
||||||
<header class="bg-surface border-b border-border shadow-sm">
|
<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="w-full px-6 py-3 flex items-center justify-between gap-4">
|
||||||
|
|
||||||
<div class="flex items-center space-x-2">
|
{# Left: user + logout #}
|
||||||
<span class="text-gray-700 dark:text-gray-200 text-base font-medium whitespace-nowrap">
|
<div class="flex items-center gap-2 min-w-0">
|
||||||
User: {{ user_name }}
|
<span class="text-gray-700 dark:text-gray-200 text-sm font-medium truncate">
|
||||||
|
{{ user_name }}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<form method="POST" action="/logout">
|
<form method="POST" action="/logout">
|
||||||
<button
|
<button type="submit"
|
||||||
type="submit"
|
class="text-xs text-white bg-red-600 px-2.5 py-1 rounded-md hover:bg-red-700 transition">
|
||||||
class="text-sm text-white bg-red-600 px-3 py-1 rounded-md hover:bg-red-700 transition"
|
|
||||||
>
|
|
||||||
Logout
|
Logout
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
</div>
|
</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>
|
|
||||||
|
|
||||||
|
{# Center: course switcher #}
|
||||||
|
<div class="flex justify-center">
|
||||||
|
{{ course_switcher(courses, active_course_name, '/switch_course') }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# Right: social links + admin #}
|
||||||
|
<div class="flex items-center gap-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-7 w-7">
|
||||||
|
</a>
|
||||||
|
<a href="https://discordapp.com/users/306086176585154560" target="_blank">
|
||||||
|
<img src="{{ url_for('static', filename='discord_icon.svg') }}" class="h-7 w-7">
|
||||||
|
</a>
|
||||||
<a href="{{ url_for('admin.admin') }}">
|
<a href="{{ url_for('admin.admin') }}">
|
||||||
<button class="bg-primary hover:bg-blue-700 text-white px-3 py-1 rounded-md transition">
|
<button class="bg-primary hover:bg-blue-700 text-white text-sm px-3 py-1 rounded-md transition">
|
||||||
Admin
|
Admin
|
||||||
</button>
|
</button>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header> <!-- Main Content -->
|
</header>
|
||||||
|
|
||||||
|
{# ── Main Content ──────────────────────────────────────────────── #}
|
||||||
<main class="max-w-5xl mx-auto px-6 py-10 space-y-12">
|
<main class="max-w-5xl mx-auto px-6 py-10 space-y-12">
|
||||||
|
|
||||||
{% if active_banner %}
|
{% if active_banner %}
|
||||||
@@ -63,30 +60,8 @@
|
|||||||
</section>
|
</section>
|
||||||
{% endif %}
|
{% 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">
|
{# ── Password Form ─────────────────────────────────────────── #}
|
||||||
<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">
|
<section class="flex justify-center">
|
||||||
<div class="w-full max-w-md">
|
<div class="w-full max-w-md">
|
||||||
<div class="bg-surface border border-border rounded-lg shadow-md p-6">
|
<div class="bg-surface border border-border rounded-lg shadow-md p-6">
|
||||||
@@ -100,68 +75,66 @@
|
|||||||
autofocus
|
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"
|
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
|
<button type="submit"
|
||||||
type="submit"
|
class="w-full bg-primary hover:bg-blue-700 text-white py-2 rounded-md transition">
|
||||||
class="w-full bg-primary hover:bg-blue-700 text-white py-2 rounded-md transition"
|
|
||||||
>
|
|
||||||
Unlock
|
Unlock
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||||
{% if messages %}
|
{% if messages %}
|
||||||
<div class="flashed-messages">
|
<div class="flashed-messages mt-3 space-y-2">
|
||||||
{% for category, message in messages %}
|
{% for category, message in messages %}
|
||||||
{% if category == 'error' %}
|
{% if category == 'error' %}
|
||||||
<p class="text-red-500 text-center mt-3">{{ message }}</p>
|
<p class="text-red-500 text-center">{{ message }}</p>
|
||||||
{% elif category == 'expired' %}
|
{% elif category == 'expired' %}
|
||||||
<p class="text-orange-500 text-center mt-3">{{ message }}</p>
|
<p class="text-orange-500 text-center">{{ message }}</p>
|
||||||
{% else %}
|
{% else %}
|
||||||
<p class="text-gray-500 text-center mt-3">{{ message }}</p>
|
<p class="text-gray-500 text-center">{{ message }}</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endwith %}
|
{% endwith %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Deck Cards -->
|
{# ── Deck Cards ────────────────────────────────────────────── #}
|
||||||
{% if decks %}
|
{% if decks %}
|
||||||
<section>
|
<section>
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
{% for deck in decks %}
|
{% for deck in decks %}
|
||||||
<div class="bg-surface border border-border rounded-xl shadow-sm transition hover:shadow-lg flex flex-col">
|
<div class="bg-surface border border-border rounded-xl shadow-sm transition hover:shadow-lg flex flex-col">
|
||||||
|
<div class="flex items-stretch p-5 gap-4">
|
||||||
|
|
||||||
<div class="flex items-center p-5 gap-4">
|
<a href="/slides/{{ deck.course.folder }}/{{ deck.deck }}/{{ deck.index_file }}"
|
||||||
|
class="flex-grow block hover:text-primary transition">
|
||||||
|
<h3 class="text-lg font-semibold mb-1">{{ deck.name }}</h3>
|
||||||
|
<p class="text-muted text-sm">{{ deck.description }}</p>
|
||||||
|
</a>
|
||||||
|
|
||||||
<a href="/slides/{{deck.course.folder}}/{{ deck.deck }}/{{ deck.index_file}}"
|
{% if deck.export_file %}
|
||||||
class="flex-grow block border-r border-border pr-4 hover:border-primary transition rounded-xl">
|
<div class="w-px bg-border self-stretch"></div>
|
||||||
<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>
|
|
||||||
|
|
||||||
|
<a href="/slides/{{ deck.course.folder }}/{{ deck.deck }}/export"
|
||||||
|
class="inline-flex items-center justify-center flex-shrink-0 w-10 text-muted hover:text-primary 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>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
{% else %}
|
{% else %}
|
||||||
<p class="text-center text-muted">No decks unlocked yet.</p>
|
<p class="text-center text-muted">No decks unlocked yet.</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
{% endblock body %}
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
133
app/templates/macros/ui.html
Normal file
133
app/templates/macros/ui.html
Normal file
@@ -0,0 +1,133 @@
|
|||||||
|
{#
|
||||||
|
Reusable UI macros for Tutortool templates.
|
||||||
|
Usage: {% from "macros/ui.html" import flash_messages, styled_field, text_input %}
|
||||||
|
#}
|
||||||
|
|
||||||
|
|
||||||
|
{# Renders all flashed messages with colour-coded styling. #}
|
||||||
|
{% macro flash_messages() %}
|
||||||
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||||
|
{% if messages %}
|
||||||
|
<div class="space-y-3 mb-6">
|
||||||
|
{% for category, message in messages %}
|
||||||
|
{% if category == 'error' %}
|
||||||
|
{% set alert_class = 'bg-red-900 border-red-400 text-red-100' %}
|
||||||
|
{% elif category == 'expired' %}
|
||||||
|
{% set alert_class = 'bg-orange-900 border-orange-400 text-orange-100' %}
|
||||||
|
{% else %}
|
||||||
|
{% set alert_class = 'bg-green-900 border-green-400 text-green-100' %}
|
||||||
|
{% endif %}
|
||||||
|
<div class="p-3 border rounded-lg {{ alert_class }}" role="alert">
|
||||||
|
{{ message }}
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% endwith %}
|
||||||
|
{% endmacro %}
|
||||||
|
|
||||||
|
|
||||||
|
{#
|
||||||
|
Renders a WTForms field with a label and standard Tailwind styling.
|
||||||
|
Pass extra_kwargs as a dict for additional HTML attributes (e.g. type, multiple).
|
||||||
|
#}
|
||||||
|
{% macro styled_field(field, extra_kwargs={}) %}
|
||||||
|
<div>
|
||||||
|
<label class="block mb-1 text-sm font-medium">{{ field.label }}</label>
|
||||||
|
{{ field(
|
||||||
|
class="w-full rounded-lg p-3 bg-background border border-border text-text placeholder-muted focus:outline-none focus:ring-2 focus:ring-primary",
|
||||||
|
**extra_kwargs
|
||||||
|
) }}
|
||||||
|
{% for error in field.errors %}
|
||||||
|
<p class="text-red-400 text-sm mt-1">{{ error }}</p>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endmacro %}
|
||||||
|
|
||||||
|
|
||||||
|
{#
|
||||||
|
Renders a plain <input> (not WTForms) with standard styling.
|
||||||
|
`type` defaults to 'text'.
|
||||||
|
#}
|
||||||
|
{% macro text_input(name, label, placeholder='', type='text', required=true, autofocus=false) %}
|
||||||
|
<div class="mb-4">
|
||||||
|
<label for="{{ name }}" class="block text-sm font-medium text-gray-400 mb-2">{{ label }}</label>
|
||||||
|
<input
|
||||||
|
type="{{ type }}"
|
||||||
|
id="{{ name }}"
|
||||||
|
name="{{ name }}"
|
||||||
|
placeholder="{{ placeholder }}"
|
||||||
|
{% if required %}required{% endif %}
|
||||||
|
{% if autofocus %}autofocus{% endif %}
|
||||||
|
class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
{% endmacro %}
|
||||||
|
|
||||||
|
|
||||||
|
{# Renders a delete button wrapped in a form. #}
|
||||||
|
{% macro delete_button(action_url, label='Delete') %}
|
||||||
|
<form method="POST" action="{{ action_url }}">
|
||||||
|
<button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded-lg text-sm">
|
||||||
|
{{ label }}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
{% endmacro %}
|
||||||
|
|
||||||
|
|
||||||
|
{# Course-switcher dropdown (used in admin and index pages). #}
|
||||||
|
{% macro course_switcher(courses, active_course_name, switch_url_prefix) %}
|
||||||
|
<div class="relative" id="course-switcher">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onclick="toggleCourseSwitcher()"
|
||||||
|
class="flex items-center gap-2 px-4 py-1.5 rounded-lg border border-border bg-surface
|
||||||
|
text-sm font-medium text-text hover:border-primary hover:text-primary transition whitespace-nowrap">
|
||||||
|
<span id="course-switcher-label">{{ active_course_name }}</span>
|
||||||
|
<svg class="w-3.5 h-3.5 text-muted transition-transform duration-200" id="course-switcher-chevron"
|
||||||
|
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 id="course-switcher-menu"
|
||||||
|
class="hidden absolute left-1/2 -translate-x-1/2 mt-2 w-52 z-50
|
||||||
|
bg-surface border border-border rounded-xl shadow-lg overflow-hidden whitespace-nowrap">
|
||||||
|
{% for course in courses %}
|
||||||
|
<form method="POST" action="{{ switch_url_prefix }}/{{ course.id }}">
|
||||||
|
<button type="submit"
|
||||||
|
class="w-full text-left px-4 py-2.5 text-sm
|
||||||
|
{% if course.name == active_course_name %}
|
||||||
|
text-primary font-semibold bg-primary/10
|
||||||
|
{% else %}
|
||||||
|
text-text hover:bg-background hover:text-primary
|
||||||
|
{% endif %}
|
||||||
|
transition">
|
||||||
|
{{ course.name }}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function toggleCourseSwitcher() {
|
||||||
|
const menu = document.getElementById('course-switcher-menu');
|
||||||
|
const chevron = document.getElementById('course-switcher-chevron');
|
||||||
|
const isOpen = !menu.classList.contains('hidden');
|
||||||
|
menu.classList.toggle('hidden', isOpen);
|
||||||
|
chevron.style.transform = isOpen ? '' : 'rotate(180deg)';
|
||||||
|
|
||||||
|
if (!isOpen) {
|
||||||
|
// Close when clicking outside
|
||||||
|
document.addEventListener('click', function handler(e) {
|
||||||
|
if (!document.getElementById('course-switcher').contains(e.target)) {
|
||||||
|
menu.classList.add('hidden');
|
||||||
|
chevron.style.transform = '';
|
||||||
|
document.removeEventListener('click', handler);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
{% endmacro %}
|
||||||
@@ -1,61 +1,42 @@
|
|||||||
<!DOCTYPE html>
|
{% extends "centered_layout.html" %}
|
||||||
<html lang="en">
|
{% from "macros/ui.html" import flash_messages, text_input %}
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Register for Tutortool</title>
|
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/output.css') }}">
|
|
||||||
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
|
||||||
</head>
|
|
||||||
<body class="flex items-center justify-center min-h-screen bg-background">
|
|
||||||
<div class="bg-gray-800 p-8 rounded-lg shadow-lg max-w-md w-full border border-gray-700">
|
|
||||||
<div class="text-center mb-6">
|
|
||||||
<h1 class="text-3xl font-bold text-white mb-2">Create an Account</h1>
|
|
||||||
<p class="text-muted text-sm">Choose a username to get started.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
{% set title = 'Register – Tutortool' %}
|
||||||
{% if messages %}
|
|
||||||
<div class="space-y-3 mb-6">
|
|
||||||
{% for category, message in messages %}
|
|
||||||
{% set alert_class = 'bg-red-900 border-red-400 text-red-100' if category == 'error' else 'bg-green-900 border-green-400 text-green-100' %}
|
|
||||||
<div class="p-3 border rounded-lg {{ alert_class }}" role="alert">
|
|
||||||
{{ message }}
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
{% endwith %}
|
|
||||||
|
|
||||||
<form action="/register" method="POST" class="space-y-6">
|
{% block card_content %}
|
||||||
<!-- Flask-WTF form fields will be injected here -->
|
<div class="text-center mb-6">
|
||||||
<div class="mb-4">
|
<h1 class="text-3xl font-bold text-white mb-2">Create an Account</h1>
|
||||||
<label for="username" class="block text-sm font-medium text-gray-400 mb-2">Username</label>
|
<p class="text-muted text-sm">Choose a username to get started.</p>
|
||||||
<input type="text" id="username" name="username" placeholder="Your unique username" required class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-gray-700 p-4 rounded-lg border border-gray-600 space-y-3">
|
{{ flash_messages() }}
|
||||||
<h3 class="text-sm font-semibold text-gray-200">Important Information</h3>
|
|
||||||
<p class="text-xs text-gray-400">
|
|
||||||
Your username is tied to the slides using a browser cookie. If you clear your cookies, you can regain access to your slides by logging in with the same username.
|
|
||||||
</p>
|
|
||||||
<div class="flex items-center">
|
|
||||||
<input type="checkbox" id="acknowledge" name="acknowledge" required class="h-4 w-4 text-blue-500 rounded border-gray-300 focus:ring-blue-500">
|
|
||||||
<label for="acknowledge" class="ml-2 block text-sm text-gray-400">
|
|
||||||
I understand and agree
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition-colors">
|
<form action="/register" method="POST" class="space-y-6">
|
||||||
Register
|
{{ text_input('username', 'Username', placeholder='Your unique username') }}
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<p class="text-center mt-4 text-sm text-text">
|
<div class="bg-gray-700 p-4 rounded-lg border border-gray-600 space-y-3">
|
||||||
Already have an account? <a href="/set_token" class="text-blue-400 hover:underline">Log In</a>
|
<h3 class="text-sm font-semibold text-gray-200">Important Information</h3>
|
||||||
</p>
|
<p class="text-xs text-gray-400">
|
||||||
|
Your username is tied to the slides using a browser cookie. If you clear your cookies,
|
||||||
|
you can regain access to your slides by logging in with the same username.
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="checkbox" id="acknowledge" name="acknowledge" required
|
||||||
|
class="h-4 w-4 text-blue-500 rounded border-gray-300 focus:ring-blue-500">
|
||||||
|
<label for="acknowledge" class="ml-2 block text-sm text-gray-400">
|
||||||
|
I understand and agree
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
|
<button type="submit"
|
||||||
|
class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition-colors">
|
||||||
|
Register
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<p class="text-center mt-4 text-sm text-text">
|
||||||
|
Already have an account?
|
||||||
|
<a href="/set_token" class="text-blue-400 hover:underline">Log In</a>
|
||||||
|
</p>
|
||||||
|
{% endblock %}
|
||||||
|
|||||||
@@ -1,47 +1,26 @@
|
|||||||
<!DOCTYPE html>
|
{% extends "centered_layout.html" %}
|
||||||
<html lang="en">
|
{% from "macros/ui.html" import flash_messages, text_input %}
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Register for Tutortool</title>
|
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/output.css') }}">
|
|
||||||
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
|
||||||
</head>
|
|
||||||
<body class="flex items-center justify-center min-h-screen bg-background">
|
|
||||||
<div class="bg-gray-800 p-8 rounded-lg shadow-lg max-w-md w-full border border-gray-700">
|
|
||||||
<div class="text-center mb-6">
|
|
||||||
<h1 class="text-3xl font-bold text-white mb-2">Login</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
{% set title = 'Login – Tutortool' %}
|
||||||
{% if messages %}
|
|
||||||
<div class="space-y-3 mb-6">
|
|
||||||
{% for category, message in messages %}
|
|
||||||
{% set alert_class = 'bg-red-900 border-red-400 text-red-100' if category == 'error' else 'bg-green-900 border-green-400 text-green-100' %}
|
|
||||||
<div class="p-3 border rounded-lg {{ alert_class }}" role="alert">
|
|
||||||
{{ message }}
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
{% endwith %}
|
|
||||||
|
|
||||||
<form action="/set_token" method="POST" class="space-y-6">
|
{% block card_content %}
|
||||||
<!-- Flask-WTF form fields will be injected here -->
|
<div class="text-center mb-6">
|
||||||
<div class="mb-4">
|
<h1 class="text-3xl font-bold text-white mb-2">Login</h1>
|
||||||
<label for="username" class="block text-sm font-medium text-gray-400 mb-2">Username</label>
|
</div>
|
||||||
<input type="text" id="username" name="username" placeholder="Your unique username" required class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition-colors">
|
{{ flash_messages() }}
|
||||||
Login
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<p class="text-center mt-4 text-sm text-text">
|
<form action="/set_token" method="POST" class="space-y-6">
|
||||||
Do not have an Account? <a href="/register" class="text-blue-400 hover:underline">Create one</a>
|
{{ text_input('username', 'Username', placeholder='Your unique username') }}
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
|
<button type="submit"
|
||||||
|
class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition-colors">
|
||||||
|
Login
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<p class="text-center mt-4 text-sm text-text">
|
||||||
|
Do not have an Account?
|
||||||
|
<a href="/register" class="text-blue-400 hover:underline">Create one</a>
|
||||||
|
</p>
|
||||||
|
{% endblock %}
|
||||||
|
|||||||
@@ -69,8 +69,9 @@ services:
|
|||||||
- ./grafana/provisioning:/etc/grafana/provisioning
|
- ./grafana/provisioning:/etc/grafana/provisioning
|
||||||
environment:
|
environment:
|
||||||
- GF_USERS_ALLOW_SIGN_UP=false
|
- GF_USERS_ALLOW_SIGN_UP=false
|
||||||
# Only allow access from localhost/reverse proxy
|
- GF_SERVER_ROOT_URL=https://tutor.cato447.de/dashboard/
|
||||||
- GF_SERVER_ROOT_URL=https://tutor.cato447.de/dashboard
|
- GF_SERVER_SERVE_FROM_SUB_PATH=true
|
||||||
|
- GF_SECURITY_ALLOW_EMBEDDING=true
|
||||||
depends_on:
|
depends_on:
|
||||||
- prometheus
|
- prometheus
|
||||||
- db
|
- db
|
||||||
|
|||||||
Reference in New Issue
Block a user