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

updated styling

Browse Source
This commit is contained in:
cato447
2025-04-25 19:07:11 +02:00
parent c043c87029
commit b377f0bd3c
2 changed files with 141 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
app/templates/admin.html
View File

@@ -1,149 +1,187 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" class="dark">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Deck Admin</title> <title>Deck Admin</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@4.1.4/dist/tailwind.min.css" rel="stylesheet">
<!-- 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"> <link href="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.css" rel="stylesheet">
</head> </head>
<body class="bg-gray-100"> <body class="bg-background text-text min-h-screen font-sans">
<div class="container mx-auto p-6">
<!-- Add New Deck Form --> <div class="container mx-auto px-6 py-10 space-y-12">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="bg-white p-6 rounded-lg shadow-md"> <!-- Admin Title -->
<h2 class="text-xl font-semibold mb-4">Add New Deck</h2> <h1 class="text-3xl font-bold text-center mb-8">Deck & Password Admin</h1>
<form method="POST">
<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() }} {{ deck_form.hidden_tag() }}
<div class="mb-4"> <div>
<label class="block text-sm font-medium text-gray-700">{{ deck_form.name.label }}</label> <label class="block mb-1 text-sm font-medium">{{ deck_form.name.label }}</label>
{{ deck_form.name(class="form-input mt-1 block w-full") }} {{ 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>
<div class="mb-4"> <div>
<label class="block text-sm font-medium text-gray-700">{{ deck_form.deck.label }}</label> <label class="block mb-1 text-sm font-medium">{{ deck_form.deck.label }}</label>
{{ deck_form.deck(multiple=True, class="form-input mt-1 block w-full") }} {{ 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>
<div class="mb-4"> <div>
<label class="block text-sm font-medium text-gray-700">{{ deck_form.description.label }}</label> <label class="block mb-1 text-sm font-medium">{{ deck_form.description.label }}</label>
{{ deck_form.description(class="form-input mt-1 block w-full") }} {{ 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>
<div class="mb-4"> <div>
{{ deck_form.submit_deck(class="bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 w-full") }} {{ deck_form.submit_deck(class="w-full bg-primary hover:bg-blue-700 text-white py-2 px-4 rounded-lg") }}
</div> </div>
</form> </form>
<h2 class="text-xl font-semibold mb-4">Existing Decks</h2>
<!-- Existing Decks Table -->
<h2 class="text-2xl font-semibold pt-6">Existing Decks</h2>
{% if decks %} {% if decks %}
<table class="min-w-full table-auto text-left text-gray-700"> <div class="overflow-x-auto">
<thead> <table class="w-full table-auto text-left text-sm">
<tr class="border-b"> <thead class="text-muted border-b border-border">
<th class="px-4 py-2">Name</th> <tr>
<th class="px-4 py-2">Passwords</th> <th class="px-4 py-2">Name</th>
<th class="px-4 py-2">Action</th> <th class="px-4 py-2">Passwords</th>
</tr> <th class="px-4 py-2">Action</th>
</thead> </tr>
<tbody> </thead>
{% for deck in decks %} <tbody>
<tr class="border-b"> {% for deck in decks %}
<td class="px-4 py-2">{{ deck.name }}</td> <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"> <td class="px-4 py-2">
{% if deck.passwords %} {% if deck.passwords %}
<ul class="list-disc pl-5"> <ul class="list-disc list-inside text-muted">
{% for password in deck.passwords %} {% for password in deck.passwords %}
<li>{{ password.value }}</li> <li>{{ password.value }}</li>
{% endfor %} {% endfor %}
</ul> </ul>
{% else %} {% else %}
<em>None</em> <em class="text-muted">None</em>
{% endif %} {% endif %}
</td> </td>
<td class="px-4 py-2"> <td class="px-4 py-2">
<form method="POST" action="{{ url_for('main.delete_deck', deck_id=deck.id) }}" style="display:inline;"> <form method="POST" action="{{ url_for('main.delete_deck', deck_id=deck.id) }}">
<button type="submit" class="bg-red-500 text-white py-1 px-4 rounded-md hover:bg-red-600">Delete</button> <button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded-lg text-sm">Delete</button>
</form> </form>
</td> </td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
{% else %} </div>
<p class="text-center mt-4 text-gray-500 dark:text-gray-300">No decks available.</p> {% else %}
{% endif %} <p class="text-center text-muted">No decks available.</p>
{% endif %}
</div> </div>
<!-- Add New Password Form --> <!-- Password Form + Passwords -->
<div class="bg-white p-6 rounded-lg shadow-md"> <div class="bg-surface rounded-xl p-6 shadow-lg space-y-6">
<h2 class="text-xl font-semibold mb-4">Add New Password</h2> <h2 class="text-2xl font-semibold">Add New Password</h2>
<form method="POST"> <form method="POST" class="space-y-4">
{{ password_form.hidden_tag() }} {{ password_form.hidden_tag() }}
<div class="mb-4"> <div>
<label class="block text-sm font-medium text-gray-700">{{ password_form.value.label }}</label> <label class="block mb-1 text-sm font-medium">{{ password_form.value.label }}</label>
{{ password_form.value(class="form-input mt-1 block w-full") }} {{ 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>
<div class="mb-4"> <div>
<label class="block text-sm font-medium text-gray-700">{{ password_form.expires_at.label }}</label> <label class="block mb-1 text-sm font-medium">{{ password_form.expires_at.label }}</label>
{{ password_form.expires_at(class="form-input mt-1 block w-full", type="datetime-local") }} {{ 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>
<div class="mb-4"> <div>
<label class="block text-sm font-medium text-gray-700">{{ password_form.decks.label }}</label> <label class="block mb-1 text-sm font-medium">{{ password_form.decks.label }}</label>
{{ password_form.decks(class="form-input mt-1 block w-full") }} {{ 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>
<div class="mb-4"> <div>
{{ password_form.submit_password(class="bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 w-full") }} {{ password_form.submit_password(class="w-full bg-primary hover:bg-blue-700 text-white py-2 px-4 rounded-lg") }}
</div> </div>
</form> </form>
<!-- Password Cards -->
<h2 class="text-xl font-semibold mb-4">Existing Passwords</h2> <!-- Existing Passwords Table -->
{% if passwords %} <h2 class="text-2xl font-semibold pt-6">Existing Passwords</h2>
<table class="min-w-full table-auto text-left text-gray-700"> {% if passwords %}
<thead> <div class="overflow-x-auto">
<tr class="border-b"> <table class="w-full table-auto text-left text-sm">
<th class="px-4 py-2">Password</th> <thead class="text-muted border-b border-border">
<th class="px-4 py-2">Expired by</th> <tr>
<th class="px-4 py-2">Decks</th> <th class="px-4 py-2">Password</th>
<th class="px-4 py-2">Action</th> <th class="px-4 py-2">Expires</th>
</tr> <th class="px-4 py-2">Decks</th>
</thead> <th class="px-4 py-2">Action</th>
<tbody> </tr>
{% for password in passwords %} </thead>
<tr class="border-b"> <tbody>
<td class="px-4 py-2">{{ password.value }}</td> {% 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">{{ password.expires_at }}</td> <td class="px-4 py-2">{{ password.expires_at }}</td>
<td class="px-4 py-2"> <td class="px-4 py-2">
{% if password.decks %} {% if password.decks %}
<ul class="list-disc pl-5"> <ul class="list-disc list-inside text-muted">
{% for deck in password.decks %} {% for deck in password.decks %}
<li>{{ deck.name }}</li> <li>{{ deck.name }}</li>
{% endfor %} {% endfor %}
</ul> </ul>
{% else %} {% else %}
<em>None</em> <em class="text-muted">None</em>
{% endif %} {% endif %}
</td> </td>
<td class="px-4 py-2"> <td class="px-4 py-2">
<form method="POST" action="{{ url_for('main.delete_password', password_id=password.id) }}" style="display:inline;"> <form method="POST" action="{{ url_for('main.delete_password', password_id=password.id) }}">
<button type="submit" class="bg-red-500 text-white py-1 px-4 rounded-md hover:bg-red-600">Delete</button> <button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded-lg text-sm">Delete</button>
</form> </form>
</td> </td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
{% else %} </div>
<p class="text-center mt-4 text-gray-500 dark:text-gray-300">No passwords available.</p> {% else %}
{% endif %} <p class="text-center text-muted">No passwords available.</p>
</div> {% endif %}
</div>
</div>
</div>
<!-- Flowbite Script -->
<script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
</body> </body>
</html> </html>

12
app/templates/index.html
View File

@@ -15,12 +15,12 @@
theme: { theme: {
extend: { extend: {
colors: { colors: {
background: '#09090b', background: '#121418', // dark slate with blue/gray tone
surface: '#18181b', surface: '#1e2127', // a bit lighter for containers/cards
border: '#27272a', border: '#2a2d34', // visible but subtle borders
primary: '#3b82f6', primary: '#4f8cff', // soft blue that pops but is not neon
text: '#f4f4f5', text: '#e4e4e7', // light gray for high contrast
muted: '#a1a1aa', muted: '#a0a0ad', // for subdued text
}, },
}, },
} }