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

@@ -3,18 +3,18 @@
{% block content %}
<div class="container mx-auto px-4 py-8">
<div class="max-w-2xl mx-auto bg-white rounded-lg shadow-lg p-6">
<div class="max-w-2xl mx-auto bg-white rounded-lg shadow-lg p-6 dark:bg-transparent dark:text-white">
<!-- Quiz Info -->
<div class="text-center mb-8">
<h3 class="text-xl text-gray-600 mb-2">{{ quiz.name }}</h3>
<h3 class="text-xl text-gray-600 mb-2 dark:text-white">{{ quiz.name }}</h3>
{% if request.session.mode != "learn" %}
{% if host_id %}
<div class="bg-blue-100 rounded-lg p-4 mb-4">
<h1 class="text-4xl font-bold text-blue-800">{{ quiz_game.join_code }}</h1>
<div class="bg-blue-100 rounded-lg p-4 mb-4 dark:bg-transparent">
<h1 class="text-4xl font-bold text-blue-800 dark:text-white">{{ quiz_game.join_code }}</h1>
<div class="w-full flex justify-center my-2">
<img src="data:image/png;base64,{{ qr_code_base64 }}" class="h-1/2 w-1/2" alt="QR-Code">
</div>
<p class="text-sm text-blue-600 mt-1">Spiel-Code</p>
<p class="text-sm text-blue-600 mt-1 dark:text-white">Spiel-Code</p>
</div>
</div>
{% endif %}
@@ -23,23 +23,23 @@
<!-- Participant Info -->
{% if participant %}
<div class="mb-6 text-center">
<div class="inline-flex items-center bg-green-100 px-4 py-2 rounded-full">
<span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
<div class="inline-flex items-center bg-green-100 px-4 py-2 rounded-full dark:text-black">
<span class="w-2 h-2 bg-green-500 rounded-full mr-2 "></span>
<span>Angemeldet als <b>{{ participant.display_name }}</b></span>
</div>
</div>
{% endif %}
<!-- Participants List -->
<div class="mb-6 overflow-y-scroll max-h-96">
<div class="mb-6 overflow-y-scroll max-h-96 overflow-x-hidden">
<h3 class="font-bold text-lg mb-3 flex items-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
Teilnehmer
</h3>
<ul id="participants-list" class="space-y-2 max-h-60">
<li class="text-gray-500 p-3 bg-gray-50 rounded-lg text-center">Warte auf Teilnehmer...</li>
<ul id="participants-list" class="space-y-2 max-h-60 ">
<li class=" p-3 bg-gray-50 rounded-lg text-center dark:bg-transparent">Warte auf Teilnehmer...</li>
</ul>
</div>
@@ -248,7 +248,7 @@
}
if (!participants || participants.length === 0) {
list.innerHTML = '<li class="text-gray-500 p-3 bg-gray-50 rounded-lg text-center">Noch keine Teilnehmer...</li>';
list.innerHTML = '<li class="text-gray-500 p-3 bg-gray-50 rounded-lg text-center dark:bg-transparent">Noch keine Teilnehmer...</li>';
return;
}
@@ -298,13 +298,13 @@
'<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" ' +
'd="M6 18L18 6M6 6l12 12"/>' +
'</svg>' +
'<span class="absolute -top-8 left-1/2 transform -translate-x-1/2 px-2 py-1 ' +
'<span class="absolute pr-8 -top-8 left-1/2 transform -translate-x-1/2 px-2 py-1 ' +
'bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 ' +
'transition-opacity duration-200 whitespace-nowrap">Spieler kicken</span>' +
'</button>';
}
return '<li class="p-3 bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition duration-200 flex items-center justify-between animate-fade-in">' +
return '<li class="dark:bg-transparent p-3 bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition duration-200 flex items-center justify-between animate-fade-in">' +
'<div class="flex items-center">' +
'<div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">' +
'<span class="text-blue-600 font-bold">' + initial.toUpperCase() + '</span>' +