210 lines
9.2 KiB
HTML
210 lines
9.2 KiB
HTML
{% extends 'base.html' %}
|
|
{% block content %}
|
|
{% load static %}
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Swiper Demo</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="stylesheet" href="{% static 'swiper/swiper-bundle.min.css' %}">
|
|
<style>
|
|
|
|
|
|
|
|
|
|
.swiper {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.swiper-slide {
|
|
text-align: center;
|
|
font-size: 18px;
|
|
background: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<div class="flex justify-end mr-2">
|
|
<a href="{% url 'library:new_quiz' %}" class="mt-2 p-2 shadow-md border-blue-600 border-2 rounded-md text-black ">Neues Quiz erstellen</a>
|
|
</div>
|
|
<div class="flex justify-end mr-2">
|
|
<a href="{% url 'library:overview_quiz' %}" class="mt-2 p-2 shadow-md border-blue-600 border-2 rounded-md text-black ">Suche und Filter zurücksetzen</a>
|
|
</div>
|
|
|
|
<div class="w-screen flex justify-center items-center">
|
|
<div class="w-full m-4 border-blue-600 border-2 rounded-xl shadow-md p-6 lg:w-1/4">
|
|
<form method="get" class="flex flex-col space-y-4">
|
|
<h1 class="text-xl font-bold">Filter</h1>
|
|
Minimale Anzahl an Fragen {{ form.min_amout_questions }}
|
|
Maximale Anzahl an Fragen {{ form.max_amout_questions }}
|
|
von User {{ form.user }}
|
|
<!-- Rendert die Form-Felder -->
|
|
<button type="submit" class="qp-a-button-small border-2 border-blue-600 text-black">Filtern</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<!-- Swiper Container für eigene Quiz -->
|
|
{% if filter_my_quizzes %}
|
|
<div class="text-center m-8 bg-blue-600 grid mx-8 h-8 place-items-center rounded-xl shadow-md ">
|
|
<h1 id="my-quizzes" class="flex px-4 font-bold text-white">Eigene Quiz</h1>
|
|
</div>
|
|
|
|
<div class="swiper mySwiper">
|
|
<div class="swiper-wrapper">
|
|
{% for quiz in filter_my_quizzes %}
|
|
<div class="swiper-slide">
|
|
<div class="relative h-80 bg-white bg-cover text-white w-full max-w-md rounded-lg p-4 shadow-md border-blue-600 border-2 rounded-xl flex flex-col justify-between"
|
|
{% if quiz.image %} style="background-image: url('http://127.0.0.1:8000/library{{ quiz.image.url }}');" {% endif %}>
|
|
<div class="absolute inset-0 bg-gray-900/60 bg-opacity-50 rounded-lg"></div>
|
|
|
|
<h2 class=" font-bold break-words truncate text-white font-bold text-white drop-shadow-lg custom-outline"> <a href="{% url 'library:detail_quiz' quiz.id %}">{{ quiz.name }}</a></h2>
|
|
|
|
<p class="text-white font-bold text-white drop-shadow-lg custom-outline">
|
|
<span class="break-words line-clamp-2 ">{{ quiz.description }}</span><br>
|
|
Schwierigkeit: <span class="font-bold">{{ quiz.difficulty }}</span><br>
|
|
Anzahl der Fragen: <span class="font-bold ">{{ quiz.question.count }}</span><br>
|
|
Status: <span class="font-bold ">{{ quiz.status }}</span>
|
|
</p>
|
|
|
|
<!-- Buttons bleiben am unteren Rand -->
|
|
<div class="flex justify-between items-center gap-2 ">
|
|
<a href="#" class="qp-a-button-small border-2 border-blue-600 text-white font-bold text-white drop-shadow-lg custom-outline">Spiel starten</a>
|
|
<div class="flex gap-2">
|
|
<a href="{% url 'library:detail_quiz' quiz.id %}" class="qp-a-button-small border-2 border-blue-600 text-white text-white font-bold text-white drop-shadow-lg custom-outline">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-7">
|
|
<path d="M13.488 2.513a1.75 1.75 0 0 0-2.475 0L6.75 6.774a2.75 2.75 0 0 0-.596.892l-.848 2.047a.75.75 0 0 0 .98.98l2.047-.848a2.75 2.75 0 0 0 .892-.596l4.261-4.262a1.75 1.75 0 0 0 0-2.474Z" />
|
|
<path d="M4.75 3.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h6.5c.69 0 1.25-.56 1.25-1.25V9A.75.75 0 0 1 14 9v2.25A2.75 2.75 0 0 1 11.25 14h-6.5A2.75 2.75 0 0 1 2 11.25v-6.5A2.75 2.75 0 0 1 4.75 2H7a.75.75 0 0 1 0 1.5H4.75Z" />
|
|
</svg>
|
|
</a>
|
|
<a href="{% url 'library:delete_quiz' quiz.id %}" class="qp-a-button-small border-2 border-blue-600 text-white text-white font-bold text-white drop-shadow-lg custom-outline">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-7">
|
|
<path fill-rule="evenodd" d="M5 3.25V4H2.75a.75.75 0 0 0 0 1.5h.3l.815 8.15A1.5 1.5 0 0 0 5.357 15h5.285a1.5 1.5 0 0 0 1.493-1.35l.815-8.15h.3a.75.75 0 0 0 0-1.5H11v-.75A2.25 2.25 0 0 0 8.75 1h-1.5A2.25 2.25 0 0 0 5 3.25Zm2.25-.75a.75.75 0 0 0-.75.75V4h3v-.75a.75.75 0 0 0-.75-.75h-1.5ZM6.05 6a.75.75 0 0 1 .787.713l.275 5.5a.75.75 0 0 1-1.498.075l-.275-5.5A.75.75 0 0 1 6.05 6Zm3.9 0a.75.75 0 0 1 .712.787l-.275 5.5a.75.75 0 0 1-1.498-.075l.275-5.5a.75.75 0 0 1 .786-.711Z" clip-rule="evenodd" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
</div>
|
|
|
|
{% if filter_my_quizzes|length > 1 %}
|
|
<div class="swiper-button-next"></div>
|
|
<div class="swiper-button-prev"></div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Swiper Container für Quiz von anderen Nutzern -->
|
|
{% if filter_other_quizzes %}
|
|
<div class="text-center m-8 bg-blue-600 grid mx-8 h-8 place-items-center rounded-xl shadow-md">
|
|
<h1 id="other-quizzes" class="flex px-4 font-bold text-white">Quiz von anderen Nutzern</h1>
|
|
</div>
|
|
|
|
<div class="swiper mySwiper">
|
|
<div class="swiper-wrapper">
|
|
|
|
|
|
{% for quiz in filter_other_quizzes %}
|
|
<div class="swiper-slide">
|
|
<div class="relative h-80 bg-white bg-cover text-white w-full max-w-md rounded-lg p-4 shadow-md border-blue-600 border-2 rounded-xl flex flex-col justify-between"
|
|
{% if quiz.image %} style="background-image: url('http://127.0.0.1:8000/library{{ quiz.image.url }}');" {% endif %}>
|
|
<div class="absolute inset-0 bg-gray-900/60 bg-opacity-50 rounded-lg"></div>
|
|
|
|
<h2 class=" font-bold break-words truncate text-white font-bold text-white drop-shadow-lg custom-outline"> <a href="{% url 'library:detail_quiz' quiz.id %}">{{ quiz.name }}</a></h2>
|
|
|
|
<p class="text-white font-bold text-white drop-shadow-lg custom-outline">
|
|
<span class="break-words line-clamp-2 ">{{ quiz.description }}</span><br>
|
|
Schwierigkeit: <span class="font-bold">{{ quiz.difficulty }}</span><br>
|
|
Anzahl der Fragen: <span class="font-bold ">{{ quiz.question.count }}</span><br>
|
|
Erstellt am: <span class="font-bold ">{{ quiz.creation_date }}</span>
|
|
</p>
|
|
|
|
<!-- Buttons bleiben am unteren Rand -->
|
|
<div class="flex justify-between items-center gap-2 ">
|
|
<a href="#" class="qp-a-button-small border-2 border-blue-600 text-white font-bold text-white drop-shadow-lg custom-outline">Spiel starten</a>
|
|
<a href="{% url 'library:detail_quiz' quiz.id %}" class="qp-a-button-small border-2 border-blue-600 text-white text-white font-bold text-white drop-shadow-lg custom-outline">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-7">
|
|
<path d="M13.488 2.513a1.75 1.75 0 0 0-2.475 0L6.75 6.774a2.75 2.75 0 0 0-.596.892l-.848 2.047a.75.75 0 0 0 .98.98l2.047-.848a2.75 2.75 0 0 0 .892-.596l4.261-4.262a1.75 1.75 0 0 0 0-2.474Z" />
|
|
<path d="M4.75 3.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h6.5c.69 0 1.25-.56 1.25-1.25V9A.75.75 0 0 1 14 9v2.25A2.75 2.75 0 0 1 11.25 14h-6.5A2.75 2.75 0 0 1 2 11.25v-6.5A2.75 2.75 0 0 1 4.75 2H7a.75.75 0 0 1 0 1.5H4.75Z" />
|
|
</svg></a>
|
|
<div class="flex gap-2">
|
|
<a href="{% url 'library:overview_quiz' %}?user={{ quiz.user_id }}" class="text-gray-600 text-sm">
|
|
<button type="submit" class=" text-sm py-1 text-white font-bold text-white drop-shadow-lg custom-outline hover:text-gray-300"> Quiz von {{ quiz.user_id }}</button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
{% if filter_other_quizzes|length > 1 %}
|
|
<div class="swiper-button-next"></div>
|
|
<div class="swiper-button-prev"></div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if not filter_other_quizzes and not filter_my_quizzes %}
|
|
<div class="grid text-center font-bold items-center">Es wurde kein Quiz passendes gefunden!</div>
|
|
{% endif %}
|
|
|
|
|
|
|
|
<!-- Swiper.js -->
|
|
<script src="{% static 'swiper/swiper-bundle.min.js' %}"></script>
|
|
<script>
|
|
|
|
|
|
|
|
var swiper = new Swiper('.swiper', {
|
|
slidesPerView: getSlidesPerView(),
|
|
direction: getDirection(),
|
|
navigation: {
|
|
nextEl: '.swiper-button-next',
|
|
prevEl: '.swiper-button-prev',
|
|
},
|
|
on: {
|
|
resize: function () {
|
|
swiper.changeDirection(getDirection());
|
|
swiper.params.slidesPerView = getSlidesPerView();
|
|
swiper.update();
|
|
},
|
|
},
|
|
});
|
|
|
|
function getDirection() {
|
|
return window.innerWidth <= 0? 'vertical' : 'horizontal';
|
|
}
|
|
|
|
function getSlidesPerView() {
|
|
if (window.innerWidth <= 840) {
|
|
return 1; // Smartphones
|
|
} else if (window.innerWidth <= 1024) {
|
|
return 2; // Tablets
|
|
} else {
|
|
return 3; // Desktops
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.custom-outline {
|
|
-webkit-text-stroke: 0.2px rgb(0, 0, 0); /* Schwarze Umrandung */
|
|
}
|
|
</style>
|
|
{% endblock %}
|