cato447/tutor-tool
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

v 0.0.1

Browse Source
This commit is contained in:
cato447
2025-04-25 18:37:37 +02:00
commit c043c87029
11 changed files with 789 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
app/templates/admin.html Normal file
View File

@@ -0,0 +1,150 @@
<!DOCTYPE html>
<html lang="en">
<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 href="https://cdn.jsdelivr.net/npm/tailwindcss@4.1.4/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
<div class="container mx-auto p-6">
<!-- Add New Deck Form -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="bg-white p-6 rounded-lg shadow-md">
<h2 class="text-xl font-semibold mb-4">Add New Deck</h2>
<form method="POST">
{{ deck_form.hidden_tag() }}
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700">{{ deck_form.name.label }}</label>
{{ deck_form.name(class="form-input mt-1 block w-full") }}
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700">{{ deck_form.deck.label }}</label>
{{ deck_form.deck(multiple=True, class="form-input mt-1 block w-full") }}
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700">{{ deck_form.description.label }}</label>
{{ deck_form.description(class="form-input mt-1 block w-full") }}
</div>
<div class="mb-4">
{{ deck_form.submit_deck(class="bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 w-full") }}
</div>
</form>
<h2 class="text-xl font-semibold mb-4">Existing Decks</h2>
{% if decks %}
<table class="min-w-full table-auto text-left text-gray-700">
<thead>
<tr class="border-b">
<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">
<td class="px-4 py-2">{{ deck.name }}</td>
<td class="px-4 py-2">
{% if deck.passwords %}
<ul class="list-disc pl-5">
{% for password in deck.passwords %}
<li>{{ password.value }}</li>
{% endfor %}
</ul>
{% else %}
<em>None</em>
{% endif %}
</td>
<td class="px-4 py-2">
<form method="POST" action="{{ url_for('main.delete_deck', deck_id=deck.id) }}" style="display:inline;">
<button type="submit" class="bg-red-500 text-white py-1 px-4 rounded-md hover:bg-red-600">Delete</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p class="text-center mt-4 text-gray-500 dark:text-gray-300">No decks available.</p>
{% endif %}
</div>
<!-- Add New Password Form -->
<div class="bg-white p-6 rounded-lg shadow-md">
<h2 class="text-xl font-semibold mb-4">Add New Password</h2>
<form method="POST">
{{ password_form.hidden_tag() }}
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700">{{ password_form.value.label }}</label>
{{ password_form.value(class="form-input mt-1 block w-full") }}
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700">{{ password_form.expires_at.label }}</label>
{{ password_form.expires_at(class="form-input mt-1 block w-full", type="datetime-local") }}
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700">{{ password_form.decks.label }}</label>
{{ password_form.decks(class="form-input mt-1 block w-full") }}
</div>
<div class="mb-4">
{{ password_form.submit_password(class="bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 w-full") }}
</div>
</form>
<!-- Password Cards -->
<h2 class="text-xl font-semibold mb-4">Existing Passwords</h2>
{% if passwords %}
<table class="min-w-full table-auto text-left text-gray-700">
<thead>
<tr class="border-b">
<th class="px-4 py-2">Password</th>
<th class="px-4 py-2">Expired by</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">
<td class="px-4 py-2">{{ password.value }}</td>
<td class="px-4 py-2">{{ password.expires_at }}</td>
<td class="px-4 py-2">
{% if password.decks %}
<ul class="list-disc pl-5">
{% for deck in password.decks %}
<li>{{ deck.name }}</li>
{% endfor %}
</ul>
{% else %}
<em>None</em>
{% endif %}
</td>
<td class="px-4 py-2">
<form method="POST" action="{{ url_for('main.delete_password', password_id=password.id) }}" style="display:inline;">
<button type="submit" class="bg-red-500 text-white py-1 px-4 rounded-md hover:bg-red-600">Delete</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p class="text-center mt-4 text-gray-500 dark:text-gray-300">No passwords available.</p>
{% endif %}
</div>
<!-- Flowbite Script -->
<script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
</body>
</html>

100
app/templates/index.html Normal file
View File

@@ -0,0 +1,100 @@
<!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: '#09090b',
surface: '#18181b',
border: '#27272a',
primary: '#3b82f6',
text: '#f4f4f5',
muted: '#a1a1aa',
},
},
}
};
</script>
<!-- Flowbite -->
<link href="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.css" rel="stylesheet" />
</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="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="text-sm text-muted font-medium">{{ user_name }}</div>
<div class="text-lg font-semibold">GRNVS Tutorium</div>
<a href="/admin">
<button class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-md transition">
Admin
</button>
</a>
</div>
</header>
<!-- Main Content -->
<main class="max-w-5xl mx-auto px-6 py-10 space-y-12">
<!-- 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>
</body>
</html>

108
app/templates/login.html Normal file
View File

@@ -0,0 +1,108 @@
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Flowbite -->
<script src="https://unpkg.com/flowbite@2.3.0/dist/flowbite.min.js"></script>
<script>
tailwind.config = {
darkMode: 'class',
};
</script>
</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">
<h2 class="text-2xl font-bold mb-6 text-center text-white">Login</h2>
<!-- Display Flash Messages -->
{% 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>
{{ form.hidden_tag() }}
<!-- Username Field -->
<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 -->
<div class="mb-6">
<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 -->
<div>
<button type="submit"
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>
</div>
</form>
</div>
<!-- Password Toggle Script -->
<script>
function togglePassword() {
const passwordInput = document.getElementById("password");
const icon = document.getElementById("eyeIcon");
const isHidden = passwordInput.type === "password";
passwordInput.type = isHidden ? "text" : "password";
icon.innerHTML = isHidden
? `<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>
</body>
</html>