Merge branch '131-style-optimieren' into 'master'

Resolve "Style optimieren!"

Closes #131

See merge request enrichment-2024/qivip!90

django/templates/play/game/question_host.html

@@ -9,38 +9,68 @@
             Spiel verlassen
         </button>
     </div>{% endif %}
-    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+    <div class="bg-white rounded-lg shadow-md p-4 mb-6">
-        <p class="text-gray-700 font-bold text-xl mb-4">Frage {{ question_index|add:1 }} von {{ total_questions }}</p>
+        <div class="flex justify-between mb-2">
-        <h1 class="text-3xl font-bold mb-6">{{ question_data.question }}</h1> 
+            <div class="flex gap-1 text-sm"><p class="text-sm">Frage</p>
+                <p class="text-gray-700 font-bold text-sm">{{ question_index|add:1 }}</p>
+                <p class="text-sm">von</p>
+                <p class="text-gray-700 font-bold text-sm">{{ total_questions }}</p>
+            </div>
+        <div class="flex gap-1 mb-2"><p class="text-sm">Antworten:</p> <p id="answer-count" class="text-gray-700 font-bold text-sm"></p></div>
+        </div>
+
+        
+        
+
+        <h1 class="text-xl font-black mb-2 border-blue-500 border-4 p-4 text-center rounded-lg md:text-2xl lg:text-4xl">{{ question_data.question}}</h1>
 
         {% if question_image %}
             <div class="flex justify-center">
-                <img class="m-4 w-full max-w-[500px] " src="{{ question_image.image.url }}" alt="Bild der Frage">
+                <img class="m-4 max-h-[33vh] w-auto rounded-lg" src="{{ question_image.image.url }}" alt="Bild der Frage">
             </div>
         {% endif %}
+            {% if request.session.mode != "learn" %}
+           <div class="w-full bg-gray-300 rounded-full h-4 mx-2">
+           <div id="time-bar" class="bg-blue-600 h-4 rounded-full transition-all duration-100 linear" style="width: 100%;"></div>
+           </div>
+            {% endif %}
         
         {% if request.session.mode == "learn" %} 
         <div class="grid grid-cols-1 gap-4 mb-6">
         {% else %}
         <div class="grid grid-cols-2 gap-4 mb-6">
         {% endif %}
-                {% if request.session.mode != "learn" %} 
-            <div class="p-4 bg-blue-50 rounded-lg">
-                <p class="text-blue-600 text-xl mb-2">Verbleibende Zeit </p>
-                <p id="remaining-time" class="text-6xl font-bold text-blue-700">30</p>
-            </div>
-            {% endif %}
 
-            <div class="p-4 bg-blue-50 rounded-lg">
+
-                <p class="text-blue-600 text-xl mb-2">Antworten</p>
-                <p id="answer-count" class="text-6xl font-bold text-blue-700">0/0</p>
-            </div>
         </div>
         {% if question_data.type  != "input" %}
         <div class="grid grid-cols-2 gap-4" id="options-container">
             {% for option in question_data.options %}
                 <button 
-                    class="p-4 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option"
+                    class="  
+                    {% if forloop.counter0 == 0 %}
+                    bg-green-500
+                    hover:bg-green-600
+                    {% elif forloop.counter0 == 1 %}
+                    bg-red-500
+                    hover:bg-red-600
+                    {% elif forloop.counter0 == 2 %}
+                    bg-blue-500
+                    hover:bg-blue-600
+                    {% elif forloop.counter0 == 3 %}
+                    bg-purple-500
+                    hover:bg-purple-600
+                    {% elif forloop.counter0 == 4 %}
+                    bg-orange-500
+                    hover:bg-orange-600
+                    {% elif forloop.counter0 == 5 %}
+                    bg-yellow-500
+                    hover:bg-yellow-600
+                    {% else %}
+                    bg-gray-500
+                    hover:bg-gray-600
+                    {% endif %}
+                    p-4 rounded-lg text-white transition-colors duration-200 answer-option"
                     data-index="{{ forloop.counter0 }}"
                     {% if request.session.mode == "learn" %}
                     onclick="submitAnswer({{ forloop.counter0 }});" {% endif %}>
@@ -151,10 +181,15 @@
     function updateTimer() {
         const now = Date.now();
         const elapsed = now - questionStartTime;
-        const remaining = Math.max(0, Math.ceil((questionDuration - elapsed) / 1000));
+        const remaining = Math.max(0, (questionDuration - elapsed) / 1000);
-        
-        document.getElementById('remaining-time').textContent = remaining;
 
+        
+        //document.getElementById('remaining-time').textContent = remaining;
+
+        document.getElementById('time-bar').style.width = ((remaining * 1000) / questionDuration * 100) + '%';
+                if (remaining<3){
+        document.getElementById('time-bar').style.backgroundColor="red";}else if(remaining<5){document.getElementById('time-bar').style.backgroundColor="orange";}
+   
         if (remaining === 0) {
             advanceToScores();
         } else {

django/templates/play/game/question_participant.html

@@ -8,18 +8,48 @@
         </button>
     </div>
     <div class="bg-white rounded-lg shadow-md p-6 mb-6">
-        <p class="text-gray-700 font-bold text-xl mb-4">Frage {{ question_index|add:1 }} von {{ total_questions }}</p>
+            
+        <div class="flex justify-between mb-2">
+            <div class="flex gap-1 text-sm"><p class="text-sm">Frage</p>
+                <p class="text-gray-700 font-bold text-sm">{{ question_index|add:1 }}</p>
+                <p class="text-sm">von</p>
+                <p class="text-gray-700 font-bold text-sm">{{ total_questions }}</p>
+            </div>
+        </div>
         <h1 class="text-3xl font-bold mb-6">{{ question_data.question }}</h1>
         
-        <div class="p-4 bg-blue-50 rounded-lg mb-6">
+            <div class="w-full bg-gray-300 rounded-full h-4 my-4">
-            <p class="text-blue-600 text-xl mb-2">Verbleibende Zeit</p>
+           <div id="time-bar" class="bg-blue-600 h-4 rounded-full transition-all duration-100 linear" style="width: 100%;"></div>
-            <p id="remaining-time" class="text-6xl font-bold text-blue-700">30</p>
+           </div>
-        </div>
+
         {% if question_data.type  != "input" %}
         <div class="grid grid-cols-2 gap-4" id="options-container">
             {% for option in question_data.options %}
                 <button 
-                    class="p-4 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option"
+                    class="
+                    {% if forloop.counter0 == 0 %}
+                    bg-green-500
+                    hover:bg-green-600
+                    {% elif forloop.counter0 == 1 %}
+                    bg-red-500
+                    hover:bg-red-600
+                    {% elif forloop.counter0 == 2 %}
+                    bg-blue-500
+                    hover:bg-blue-600
+                    {% elif forloop.counter0 == 3 %}
+                    bg-purple-500
+                    hover:bg-purple-600
+                    {% elif forloop.counter0 == 4 %}
+                    bg-orange-500
+                    hover:bg-orange-600
+                    {% elif forloop.counter0 == 5 %}
+                    bg-yellow-500
+                    hover:bg-yellow-600
+                    {% else %}
+                    bg-gray-500
+                    hover:bg-gray-600
+                    {% endif %}
+                    p-4 rounded-lg text-white transition-colors duration-200 answer-option"
                     data-index="{{ forloop.counter0 }}"
                     onclick="submitAnswer({{ forloop.counter0 }});">
                     <p class="text-lg">{{ option.value }}</p>
@@ -118,9 +148,13 @@
     function updateTimer() {
         const now = Date.now();
         const elapsed = now - questionStartTime;
-        const remaining = Math.max(0, Math.ceil((questionDuration - elapsed) / 1000));
+        const remaining = Math.max(0, (questionDuration - elapsed) / 1000);
+        document.getElementById('time-bar').style.width = ((remaining * 1000) / questionDuration * 100) + '%';
+        if (remaining<3){
+        document.getElementById('time-bar').style.backgroundColor="red";}else if(remaining<5){document.getElementById('time-bar').style.backgroundColor="orange";}
+   
         
-        document.getElementById('remaining-time').textContent = remaining;
+        //document.getElementById('remaining-time').textContent = remaining;
 
         if (remaining === 0 && !hasAnswered) {
             // Auto-submit timeout answer