henrik2399/qivip
1
0
Fork 0
Code Issues 24 Pull Requests 14 Actions Packages Projects Releases Wiki Activity

improved_library_structure#140

Browse Source
This commit is contained in:
ben8
2025-06-23 14:54:46 +02:00
parent d2274960cb
commit e65cd408eb
9 changed files with 1669 additions and 522 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
django/templates/library/head.html Normal file
View File

@@ -0,0 +1,145 @@
{% 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 %}