Rankliste, Bilder, bei Fragen Bilder möglich
This commit is contained in:
@@ -1,46 +1,45 @@
|
|||||||
{% load static %}
|
{% load static %}
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html>
|
<html class="h-full">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body class="dark:bg-gray-900">
|
<body class="dark:bg-gray-900 h-full m-0">
|
||||||
|
|
||||||
<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 style="height: calc(12vh);" class=" m-0 text-white bg-blue-600 rounded-lg h-12 shadow-md 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.55rem,5vw,1.5rem)]" > Frage: Wie hoch ist der Eiffelturm insgesamt?
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class=" dark:bg-gray-900 flex justify-end gap-2 ">
|
<div class=" dark:bg-gray-900 flex justify-end gap-2 " style="height: calc(12vh);">
|
||||||
<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-4 text-[clamp(0.6rem,5vw,1rem)] overflow-x-auto ml-0.75 text-white bg-blue-400 mb-6 h-12 rounded-sm p-3 shadow-[0_2px_2px_rgba(0,0,0,0.1)] z-40 items-center">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 class="mt-4 text-[clamp(0.6rem,5vw,1rem)] overflow-x-auto mr-0.75 bg-gray-500 text-white h-12 mb-6 rounded-sm p-3 shadow-[0_2px_2px_rgba(0,0,0,0.1)] z-40 items-center ">Deine Punkte: 60</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="h-[calc(100svh-13rem)]
|
|
||||||
">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="dark:bg-gray-900 h-full place-content-end ">
|
<div class="mt-3 flex justify-center -z-1 " style="height: calc(37vh);"> <img class="object-cover " src="{% static 'components/Ausgabe.png' %}" alt="Bild"> </div>
|
||||||
|
<div class="w-full grid grid-cols-2 p-2 h-full" style="height: calc(38vh);min-height: 50px;">
|
||||||
|
|
||||||
|
|
||||||
<div class=" grid grid-cols-2 h-full md:h-5/7 ">
|
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="absolute bottom-0 right-0">
|
<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 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>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
63
core/components/templates/components/ranking.html
Normal file
63
core/components/templates/components/ranking.html
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
{% load static %}
|
||||||
|
<link rel="stylesheet" href="{% static 'homepage/t-style.css' %}">
|
||||||
|
<!doctype html>
|
||||||
|
<html class="h-full">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
</head>
|
||||||
|
<body class=" dark:bg-gray-900 w-full justify-center h-full m-0">
|
||||||
|
<div style="height: calc(10vh);" class=" m-0 text-white bg-blue-600 rounded-lg h-12 shadow-md 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)]" >Ranking
|
||||||
|
</div>
|
||||||
|
<div class="m-4 flex justify-end font-bold">Frage 1/10</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="text-[clamp(0.75rem,5vw,1.25rem)] font-bold flex items-center justify-around border-blue-600 border-4 space-x-2 mt-2 overflow-x-auto rounded-lg p-4 shadow-[0_2px_2px_rgba(0,0,0,0.1)] w-full">
|
||||||
|
<div style="background:linear-gradient(120deg, rgb(255, 208, 0),rgb(216, 151, 21))" class="text-white !important px-4 rounded-sm">1. Platz</div>
|
||||||
|
<div class="text-stone-900 ">6000 Punkte</div>
|
||||||
|
<div class="">Person XY</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=" text-[clamp(0.75rem,5vw,1.25rem)] font-bold p-4 flex items-center justify-around border-blue-600 border-4 space-x-2 mt-2 overflow-x-auto rounded-lg shadow-[0_2px_2px_rgba(0,0,0,0.1)] w-full">
|
||||||
|
<div style="background:linear-gradient(120deg, rgb(102, 122, 122),rgb(194, 186, 186))" class="text-white !important px-4 rounded-sm">2. Platz</div>
|
||||||
|
<div class="text-stone-900 ">5000 Punkte</div>
|
||||||
|
<div class="">Person XY</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=" text-[clamp(0.75rem,5vw,1.25rem)] font-bold flex items-center justify-around border-blue-600 border-4 space-x-2 mt-2 overflow-x-auto rounded-lg p-4 shadow-[0_2px_2px_rgba(0,0,0,0.1)] w-full">
|
||||||
|
<div style="background:linear-gradient(120deg, rgb(211, 91, 17),rgb(219, 168, 109))" class="text-white !important px-4 rounded-sm">3. Platz</div>
|
||||||
|
<div class="text-stone-900 ">600 Punkte</div>
|
||||||
|
<div class="">Person XY</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=" text-[clamp(0.75rem,5vw,1.25rem)] items-center flex justify-around font-bold border-blue-600 border-4 space-x-2 mt-2 text-[clamp(0.6rem,5vw,1rem)] overflow-x-auto rounded-lg p-4 shadow-[0_2px_2px_rgba(0,0,0,0.1)] w-full">
|
||||||
|
<div>4. Platz</div>
|
||||||
|
<div>200 Punkte</div>
|
||||||
|
<div>Person XY</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>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -9,5 +9,6 @@ app_name = 'components' # Namensraum zum verhindern von Konflikten zwischen Apps
|
|||||||
|
|
||||||
urlpatterns = [
|
urlpatterns = [
|
||||||
path('<int:pk>', views.play, name='play'),
|
path('<int:pk>', views.play, name='play'),
|
||||||
|
path('ranking/<int:pk>', views.show_rank, name='ranking')
|
||||||
|
|
||||||
]
|
]
|
||||||
@@ -3,3 +3,7 @@ from django.shortcuts import render
|
|||||||
# Create your views here.
|
# Create your views here.
|
||||||
def play(request,pk): #
|
def play(request,pk): #
|
||||||
return render(request, 'components/answer.html', {"pk": pk}) #
|
return render(request, 'components/answer.html', {"pk": pk}) #
|
||||||
|
|
||||||
|
|
||||||
|
def show_rank(request,pk): #
|
||||||
|
return render(request, 'components/ranking.html', {"pk": pk}) #
|
||||||
@@ -119,6 +119,7 @@ USE_TZ = True
|
|||||||
# https://docs.djangoproject.com/en/5.1/howto/static-files/
|
# https://docs.djangoproject.com/en/5.1/howto/static-files/
|
||||||
|
|
||||||
STATIC_URL = '/static/'
|
STATIC_URL = '/static/'
|
||||||
|
BASE_DIR='static' #von ben8 hinzugefügt
|
||||||
|
|
||||||
# Default primary key field type
|
# Default primary key field type
|
||||||
# https://docs.djangoproject.com/en/5.1/ref/settings/#default-auto-field
|
# https://docs.djangoproject.com/en/5.1/ref/settings/#default-auto-field
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user