dark_mode
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user