146 lines
6.1 KiB
HTML
146 lines
6.1 KiB
HTML
{% load static %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
|
|
|
|
.custom-outline {
|
|
-webkit-text-stroke: 0.2px rgb(0, 0, 0);
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block head %}
|
|
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
|
|
<button id="filterButton" class="p-2 hover:bg-gray-100 rounded-lg transition-colors duration-200 flex items-center gap-2 text-gray-700">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
|
</svg>
|
|
<span>Filter</span>
|
|
</button>
|
|
<div class="flex gap-2">
|
|
<a href="{% url link %}" class="inline-flex items-center px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors duration-200">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
|
</svg>
|
|
Zurücksetzen
|
|
</a>
|
|
<a href="{% url 'library:new_quiz' %}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
Neues Quiz
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="filterPanel" class="container mx-auto px-4 {% if request.GET.filter == '1' %}block{% else %}hidden{% endif %}">
|
|
<div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
|
|
<form action="{% url link %}" method="get" class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<input type="hidden" name="filter" id="filter-input">
|
|
<div class="space-y-2">
|
|
<div class="flex gap-2">
|
|
<input type="checkbox" name="use_min_amount_questions" id="use_min_amount_questions" {% if form.use_min_amount_questions.value %}checked{% endif %}>
|
|
<label class="block text-sm font-medium text-gray-700">minimale Anzahl an Fragen</label>
|
|
</div>
|
|
<input
|
|
type="range"
|
|
name="min_amount_questions"
|
|
id="id_min_amount_questions"
|
|
min="0"
|
|
max="100"
|
|
step="1"
|
|
value="{{ form.min_amount_questions.value|default_if_none:0 }}"
|
|
class="w-full accent-blue-600"
|
|
oninput="document.getElementById('min_amount_value').textContent = this.value + ' Frage(n)'"
|
|
{% if not form.use_min_amount_questions.value %}disabled{% endif %}
|
|
>
|
|
|
|
<span id="min_amount_value" class="text-sm font-semibold text-gray-800">
|
|
{{ form.min_amount_questions.value|default_if_none:0 }} Frage(n)
|
|
</span>
|
|
<br>
|
|
<span class="text-xs text-gray-600"> Quizze anderer User werden erst ab min. 1 Frage angezeigt.</span>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<div class="flex gap-2">
|
|
<input type="checkbox" name="use_max_amount_questions" id="use_max_amount_questions" {% if form.use_max_amount_questions.value %}checked{% endif %}>
|
|
<label class="block text-sm font-medium text-gray-700">maximale Anzahl an Fragen</label>
|
|
</div>
|
|
<input
|
|
type="range"
|
|
name="max_amount_questions"
|
|
id="id_max_amount_questions"
|
|
min="1"
|
|
max="100"
|
|
step="1"
|
|
value="{{ form.max_amount_questions.value|default_if_none:100 }}"
|
|
class="w-full accent-blue-600"
|
|
oninput="document.getElementById('max_amount_value').textContent = this.value+' Frage(n)'"
|
|
{% if not form.use_max_amount_questions.value %}disabled{% endif %}
|
|
>
|
|
|
|
<span id="max_amount_value" class="text-sm font-semibold text-gray-800">
|
|
{{ form.max_amount_questions.value|default_if_none:100 }} Frage(n)
|
|
</span>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<label class="block text-sm font-medium text-gray-700">veröffentlicht von User</label>
|
|
<input type="text" name="user" class="border-2 border-gray-300 rounded-lg p-2 w-full" id="id_user" value="{{ form.user.value|default_if_none:'' }}">
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="block text-sm font-medium text-gray-700">Kategorie</label>
|
|
{{ form.categories }}
|
|
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="block text-sm font-medium text-gray-700">Suche</label>
|
|
{{ form.search }}
|
|
|
|
</div>
|
|
|
|
|
|
<div class="md:col-span-3 flex justify-end">
|
|
<button
|
|
type="submit" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path>
|
|
</svg>
|
|
Filtern
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<script>
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
|
|
|
const checkbox = document.getElementById('use_min_amount_questions');
|
|
const slider = document.getElementById('id_min_amount_questions');
|
|
|
|
const checkbox_max = document.getElementById('use_max_amount_questions');
|
|
const slider_max = document.getElementById('id_max_amount_questions');
|
|
|
|
checkbox.addEventListener('change', () => {
|
|
slider.disabled = !checkbox.checked;
|
|
});
|
|
|
|
checkbox_max.addEventListener('change', () => {
|
|
slider_max.disabled = !checkbox_max.checked;
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|
|
{% endblock %}
|
|
|
|
|