Components App mit base.html und answer.html

This commit is contained in:
ben8
2025-02-14 17:31:34 +01:00
parent 7f1be5afab
commit 70e901dfbf
7 changed files with 87 additions and 1 deletions

View File

@@ -0,0 +1,21 @@
{% extends 'components/base.html' %}
{% load static %}
{% block title %}Antwort{% endblock %}
{% block content %}
{% if <Bedingung> %} <!-- TODO Bedingung festlegen: Quiztyp unterscheiden -->
<button class="overflow-x-auto text-[clamp(0.3rem,5vw,1rem)] break-words border-4 border-gray-500 text-2xl font-black m-0.75 bg-red-500 rounded-sm shadow-[0_2px_2px_rgba(0,0,0,0.1)] text-center text-white">1</button>
<button class="overflow-x-auto text-[clamp(0.3rem,5vw,1rem)] break-words border-4 border-gray-500 text-2xl font-black m-0.75 bg-indigo-500 rounded-sm shadow-[0_2px_2px_rgba(0,0,0,0.1)] text-center text-white">2</button>
<button class="overflow-x-auto text-[clamp(0.3rem,5vw,1rem)] break-words border-4 border-gray-500 text-2xl font-black m-0.75 bg-yellow-500 rounded-sm shadow-[0_2px_2px_rgba(0,0,0,0.1)] text-center text-white">3</button>
<button class="overflow-x-auto text-[clamp(0.3rem,5vw,1rem)] break-words border-4 border-gray-500 text-2xl font-black m-0.75 bg-green-500 rounded-sm shadow-[0_2px_2px_rgba(0,0,0,0.1)] text-center text-white">4</button>
{% else %}
<button class="overflow-x-auto text-[clamp(0.3rem,5vw,1rem)] break-words border-4 border-gray-500 text-2xl font-black m-0.75 bg-yellow-500 rounded-sm shadow-[0_2px_2px_rgba(0,0,0,0.1)] text-center text-white">3</button>
<button class="overflow-x-auto text-[clamp(0.3rem,5vw,1rem)] break-words border-4 border-gray-500 text-2xl font-black m-0.75 bg-green-500 rounded-sm shadow-[0_2px_2px_rgba(0,0,0,0.1)] text-center text-white">4</button>
{% endif %}
{% endblock %}

View File

@@ -0,0 +1,45 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body class="dark:bg-gray-900">
<div class=" font-semibold px-1 w-full h-20 shadow-[0_2px_2px_rgba(0,0,0,0.1)] break-words text-center flex items-center justify-center overflow-x-auto text-[clamp(0.75rem,5vw,1.5rem)]"> Frage: Wie hoch ist der Eiffelturm insgesamt?
</div>
<div class=" dark:bg-gray-900 flex justify-end gap-2 ">
<span class="mt-5 text-[clamp(0.6rem,5vw,1rem)] overflow-x-auto ml-0.75 text-white bg-blue-400 mb-8 rounded-sm p-3 shadow-[0_2px_2px_rgba(0,0,0,0.1)] ">Zeit: 60s</span>
<span class="mt-5 text-[clamp(0.6rem,5vw,1rem)] overflow-x-auto mr-0.75 bg-gray-500 text-white mb-8 rounded-sm p-3 shadow-[0_2px_2px_rgba(0,0,0,0.1)] ">Deine Punkte: 60</span>
</div>
<div class="h-[calc(100svh-13rem)]
">
<div class="dark:bg-gray-900 h-full place-content-end ">
<div class=" grid grid-cols-2 h-full md:h-5/7 ">
{% block content %}
{% endblock %}
</div>
</div>
<div class="absolute bottom-0 right-0">
<span class="text-[clamp(0.6rem,5vw,1rem)] font-black overflow-x-auto mt-1 ml-0.75 text-blue-600 p-0.75 bg-white">qivip
</span>
</div>
</div>
 </body>
</html>