dark_mode

This commit is contained in:
ben8
2025-07-11 16:54:00 +02:00
parent 7f845b8f36
commit d17d41e07a
36 changed files with 296 additions and 264 deletions

View File

@@ -12,14 +12,14 @@
{% 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">
<button id="filterButton" class="dark:text-white dark:hover:bg-[#2a2f3a] 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">
<a href="{% url link %}" class="dark:bg-transparent dark:text-white dark:hover:bg-[#2a2f3a] 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>
@@ -35,13 +35,13 @@
</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">
<div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200 dark:bg-transparent dark:text-white ">
<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>
<label class="block text-sm font-medium text-gray-700 dark:text-white">minimale Anzahl an Fragen</label>
</div>
<input
type="range"
@@ -51,22 +51,22 @@
max="100"
step="1"
value="{{ form.min_amount_questions.value|default_if_none:0 }}"
class="w-full accent-blue-600"
class="w-full accent-blue-600 dark:text-white"
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">
<span id="min_amount_value" class="text-sm font-semibold text-gray-800 dark:text-white">
{{ 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>
<span class="text-xs text-gray-600 dark:text-white"> 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>
<label class="block text-sm font-medium text-gray-700 dark:text-white">maximale Anzahl an Fragen</label>
</div>
<input
type="range"
@@ -81,22 +81,22 @@
{% if not form.use_max_amount_questions.value %}disabled{% endif %}
>
<span id="max_amount_value" class="text-sm font-semibold text-gray-800">
<span id="max_amount_value" class="text-sm font-semibold text-gray-800 dark:text-white">
{{ 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:'' }}">
<label class="block text-sm font-medium text-gray-700 dark:text-white">veröffentlicht von User</label>
<input type="text" name="user" class="border-2 border-gray-300 rounded-lg p-2 w-full dark:text-white" 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>
<label class="block text-sm font-medium text-gray-700 dark:text-white">Kategorie</label>
{{ form.categories }}
</div>
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700">Suche</label>
<label class="block text-sm font-medium text-gray-700 dark:text-white">Suche</label>
{{ form.search }}
</div>