cmon

quiz/templates/quiz.html

@@ -73,18 +73,26 @@
         }
 
         button {
-            background-color: rgb(106, 90, 205);
-            color: rgb(255, 255, 255);
+            background-color: rgb(102, 51, 153);
+            /* Dunkel-lila Hintergrund */
+            color: white;
+            /* Weiße Schriftfarbe */
             padding: 10px;
             border: none;
             border-radius: 4px;
             cursor: pointer;
             width: 100%;
-            transition: background-color 0.3s ease-in-out;
+            transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+            /* Leicht erhabener Effekt */
         }
 
+        /* Aktualisierte Stilregel für den Button im Hover-Zustand */
         button:hover {
             background-color: rgb(72, 61, 139);
+            /* Dunkleres Lila im Hover-Zustand */
+            box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2);
+            /* Stärkerer erhabener Effekt im Hover-Zustand */
         }
 
         p {
@@ -103,6 +111,36 @@
             color: rgb(106, 90, 205);
             text-decoration: underline;
         }
+
+        .alert-message {
+            padding: 10px;
+            border-radius: 5px;
+            font-weight: bold;
+            text-align: center;
+        }
+
+        .alert-success {
+            background-color: lightgreen;
+            color: green;
+        }
+
+        .alert-danger {
+            background-color: lightcoral;
+            color: red;
+        }
+
+        .image-container {
+            max-height: 50pt;
+            overflow: hidden;
+            text-align: center;
+            /* Zentriert das Bild horizontal */
+        }
+
+        .image-container img {
+            max-height: 50pt;
+            /* max-width: 100%; */
+            /* height: auto; */
+        }
     </style>
 </head>
 
@@ -110,13 +148,31 @@
 
     <form method="POST" action="/submit_quiz">
         <p name="question">{{ frage.index }}. {{ frage.question }}</p>
-        <input type="text" name="answer" placeholder="Antwort eingeben..." required>
-        <input type="submit" value="Quiz abschicken">
+        <input type="text" name="answer" placeholder="Antwort eingeben..." required autofocus>
+        <button type="submit">Antwort abschicken</button>
         <p class="q-amount">{{correct_sum}} von {{max_correct_sum}} nacheinander korrekt.</p>
         <br />
         {% if debugtxt %}
         <p class="debug">{{debugtxt}}</p>
         {% endif %}
+        {% if alerttxt %}
+        <div id="message" class="alert-message alert-danger">
+            {{alerttxt}}
+        </div>
+        {% endif %}
+        {% if successtxt %}
+        <div id="message" class="alert-message alert-success">
+            {{successtxt | safe}}
+        </div>
+        {% endif %}
+        {% if won %}
+        <br />
+        <br />
+        <div class="image-container">
+            <img src="{{ url_for('static', filename='pics/cake.jpg') }}" alt="Suessigkeit">
+        </div>
+        {% endif %}
+
     </form>
 
 </body>