forked from rDrama/rDrama
126 lines
4.0 KiB
HTML
126 lines
4.0 KiB
HTML
{% extends "CHRISTMAS/default.html" %}
|
|
|
|
{% block title %}
|
|
<title>Badge Grant</title>
|
|
{% endblock %}
|
|
|
|
{% block pagetype %}message{% endblock %}
|
|
|
|
{% block subHeader %}
|
|
<div class="relative max-w-screen-2xl mx-auto px-4 py-4 grid grid-cols-12 rounded-t">
|
|
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-300 to-gray-200 dark:bg-none dark:bg-gray-800 rounded-t sub-header-shadow dark:border-b dark:border-gray-700 sub-header"></div>
|
|
<div class="relative col-span-full flex items-center">
|
|
<div>
|
|
<h1 class="font-bold text-xl font-heading leading-normal mb-0">
|
|
Badge Grant
|
|
</h1>
|
|
<ul class="flex space-x-2 text-xs text-gray-500 dark:text-gray-400 leading-normal mb-0">
|
|
<li>
|
|
<a href="/admin" class="text-gray-500 hover:underline">Admin Dashboard</a>
|
|
</li>
|
|
<li>
|
|
<i class="fas fa-arrow-alt-right text-shadow fa-fw fa-sm"></i>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="text-gray-700 dark:text-gray-500 hover:underline">Badge Grant</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="ml-auto">
|
|
<button type="submit" form="badge-grant-form" class="btn btn-green">
|
|
<i class="fas fa-badge fa-sm fa-fw mr-1"></i>
|
|
Give badge
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="col-span-full my-2 px-2.5 md:px-0">
|
|
|
|
{% if error %}
|
|
<div class="alert alert-danger alert-dismissible fade show my-3" role="alert">
|
|
<i class="fas fa-exclamation-circle my-auto"></i>
|
|
<span>
|
|
{{error}}
|
|
</span>
|
|
<button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true"><i class="far fa-times"></i></span>
|
|
</button>
|
|
</div>
|
|
{% endif %}
|
|
{% if msg %}
|
|
<div class="alert alert-success alert-dismissible fade show my-3" role="alert">
|
|
<i class="fas fa-check-circle my-auto" aria-hidden="true"></i>
|
|
<span>
|
|
{{msg}}
|
|
</span>
|
|
<button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true"><i class="far fa-times"></i></span>
|
|
</button>
|
|
</div>
|
|
{% endif %}
|
|
|
|
|
|
<form id="badge-grant-form" action="/admin/badge_grant" method="post">
|
|
<input type="hidden" name="formkey" value="{{v.formkey}}">
|
|
|
|
<label for="input-username" class="label">Username</label>
|
|
<input autocomplete="off" id="input-username" class="form-input mb-2" type="text" name="username" required placeholder="Enter a username">
|
|
|
|
<label for="input-url" class="label">URL</label>
|
|
<input id="input-url" class="form-input mb-2" type="text" name="url" placeholder="Optional">
|
|
|
|
<label for="input-description" class="label">Custom description</label>
|
|
<textarea id="input-description" class="form-input" name="description" placeholder="Leave blank for badge's default desription."></textarea>
|
|
|
|
<table class="w-full table table-striped mt-6">
|
|
<thead class="bg-primary text-white">
|
|
<tr>
|
|
<th scope="col" class="p-2.5">Select</th>
|
|
<th scope="col" class="p-2.5">Image</th>
|
|
<th scope="col" class="p-2.5">Name</th>
|
|
<th scope="col" class="p-2.5">Default Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for k, v in badge_types.items() %}
|
|
<tr class="odd:bg-gray-300 dark:odd:bg-white/[.05] hover:bg-gray-400 dark:hover:bg-white/10 hover:cursor-pointer" onclick="selectCheckbox('badge-{{k}}')">
|
|
<td class="px-2.5" tabindex="1">
|
|
<input type="radio" id="badge-{{k}}" name="badge_id" value="{{k}}" class="pointer-events-none">
|
|
</td>
|
|
<td class="px-2.5">
|
|
<img loading="lazy" src="/assets/CHRISTMAS/images/badges/{{v['name']}}.webp?a=1" class="object-contain w-16 h-16 p-2" alt="{{v['name']}} badge"/>
|
|
</td>
|
|
<td class="px-2.5 font-bold">{{v['name']}}</td>
|
|
<td class="px-2.5 text-gray-700 dark:text-gray-500">{{v['description']}}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
<style>
|
|
@media (max-width: 767.98px) {
|
|
table {
|
|
display: inline-block;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
function selectCheckbox(id) {
|
|
const el = document.getElementById(id);
|
|
el.checked = !el.checked;
|
|
}
|
|
</script>
|
|
{% endblock %}
|