Merge branch '121-teilnehmer-nicht-uberdecken' into 'master'

Resolve "Teilnehmer nicht überdecken"

Closes #121

See merge request enrichment-2024/qivip!78

datenschutzerklaerung.txt

@@ -0,0 +1,7 @@
+Name und Anschrift des Verantwortlichen
+
+//NAME HIER EINSETZEN//
+
+//ADRESSE HIER EINSETZEN//
+
+//E-MAIL HIER EINSETZEN//

django/accounts/forms.py

@@ -6,11 +6,15 @@ from django import forms
 class RegisterForm(UserCreationForm):
     class Meta:
         model=User
-        fields = ['username','password1','password2']
+        fields = ['username','password1','password2', "email"]
         
     username = forms.CharField(
         widget=forms.TextInput(attrs={'placeholder': 'BENUTZERNAME'})
     )
+    email = forms.EmailField(
+        widget=forms.TextInput(attrs={'placeholder': 'E-MAIL'})
+    )
+
     password1 = forms.CharField(
         widget=forms.PasswordInput(attrs={'placeholder': 'PASSWORT'})
     )
@@ -19,4 +23,3 @@ class RegisterForm(UserCreationForm):
     )
 
 
-

django/accounts/urls.py

@@ -1,7 +1,8 @@
-from django.urls import path # type: ignore
+from django.urls import path, reverse_lazy # type: ignore
 from . import views
 from django.contrib.auth.views import LogoutView
 from django.contrib.auth.views import LoginView 
+from django.contrib.auth import views as auth_views
 
 app_name = 'accounts' # Namensraum zum verhindern von Konflikten zwischen Apps
 #
@@ -13,4 +14,22 @@ urlpatterns = [
     path('logout/', LogoutView.as_view(next_page='accounts:login'), name='logout'),
     path('login/', LoginView.as_view(template_name='accounts/login.html', next_page='accounts:home'), name='login'),
     path('register/', views.register, name='register'),
-]
+    path('password_reset/', auth_views.PasswordResetView.as_view(success_url=reverse_lazy('accounts:password_reset_done')), name='password_reset'),
+    path('password_reset/done/', auth_views.PasswordResetDoneView.as_view(), name='password_reset_done'),
+    path('reset/done/', auth_views.PasswordResetCompleteView.as_view(), name='password_reset_complete'),
+    
+
+
+    path('password_change/', views.password_changed, name='password_change'),
+    path('password_change/done/', auth_views.PasswordChangeDoneView.as_view(), name='password_change_done'),
+    path('delete_account/', views.deleteAccount, name="delete_account"),
+    path(
+    'reset/<uidb64>/<token>/',
+    auth_views.PasswordResetConfirmView.as_view(
+        template_name='registration/password_reset_confirm.html',
+        success_url=reverse_lazy('accounts:password_reset_complete') 
+    ),
+    name='password_reset_confirm'
+),
+   
+]

django/accounts/views.py

@@ -2,12 +2,20 @@ from django.shortcuts import render, redirect
 from django.contrib.auth.decorators import login_required
 from django.contrib.auth import login, authenticate
 from .forms import RegisterForm
+from django.contrib.auth.forms import PasswordChangeForm
+from django.contrib.auth import update_session_auth_hash
+from django.contrib import messages
+from django.contrib.auth import logout
+
+
 
 # Create your views here.
 @login_required
 def home(request):
     return render(request, 'accounts/home.html')
 
+
+
 def register(response):
     if response.method == "POST":
         form = RegisterForm(response.POST)
@@ -18,4 +26,34 @@ def register(response):
     else:
         form = RegisterForm()
 
-    return render(response, "accounts/register.html", {"form":form})
+    return render(response, "accounts/register.html", {"form":form})
+
+from django.contrib.auth import views as auth_views
+
+@login_required
+def password_changed(request):
+    if request.method == 'POST':
+        form = PasswordChangeForm(user=request.user, data=request.POST)
+        if form.is_valid():
+            user = form.save()
+            #update_session_auth_hash(request, user) #Hier wäre der User nach Passwortänderung noch angemeldet!
+            logout(request)
+            messages.success(request, "Das Passwort wurde erfolgreich geändert!")
+            return redirect('accounts:home')
+            
+    else:
+        form = PasswordChangeForm(user=request.user)
+    
+    return render(request, 'registration/password_change_form.html', {'form': form})
+
+
+@login_required
+def deleteAccount(request):
+    if request.method == 'POST':
+        user=request.user
+        logout(request)
+        user.delete()
+        messages.success(request, "Der Account wurde erfolgreich gelöscht!")
+        return redirect('homepage:home')
+    return render(request, 'registration/delete_account_confirm.html')
+

django/components/admin.py

@@ -1,3 +0,0 @@
-from django.contrib import admin
-
-# Register your models here.

django/components/apps.py

@@ -1,6 +0,0 @@
-from django.apps import AppConfig
-
-
-class ComponentsConfig(AppConfig):
-    default_auto_field = 'django.db.models.BigAutoField'
-    name = 'components'

django/components/models.py

@@ -1,3 +0,0 @@
-from django.db import models
-
-# Create your models here.

django/components/tests.py

@@ -1,3 +0,0 @@
-from django.test import TestCase
-
-# Create your tests here.

django/components/urls.py

@@ -1,14 +0,0 @@
-from django.urls import path # type: ignore
-from . import views
-
-
-app_name = 'components' # Namensraum zum verhindern von Konflikten zwischen Apps
-#
-# Wichtig: Damit Links funktionieren müssen diese so eingebunden werden: {% url 'accounts:login' %} statt {% url 'login' %}
-#
-
-urlpatterns = [
-    path('<int:pk>', views.play, name='play'),
-    path('ranking/<int:pk>', views.show_rank, name='ranking')
-  
-]

django/components/views.py

@@ -1,9 +0,0 @@
-from django.shortcuts import render
-
-# Create your views here.
-def play(request,pk):     #
-    return render(request, 'components/answer.html', {"pk": pk}) #
-
-
-def show_rank(request,pk):     #
-    return render(request, 'components/ranking.html', {"pk": pk}) #

django/core/settings.py

@@ -16,6 +16,7 @@ from pathlib import Path
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
 BASE_DIR = Path(__file__).resolve().parent.parent
 
+EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend' #TODO: NUR FÜR ENTWICKLUNG
 
 # Quick-start development settings - unsuitable for production
 # See https://docs.djangoproject.com/en/5.1/howto/deployment/checklist/
@@ -37,7 +38,6 @@ with open(BASE_DIR / 'config' / 'qivip_config.json') as config_file:
 INSTALLED_APPS = [
     'library.apps.LibraryConfig',
     'homepage.apps.HomepageConfig',
-    'components.apps.ComponentsConfig',
     'accounts.apps.AccountsConfig',
     'play',
     'django.contrib.admin',

django/core/urls.py

@@ -25,7 +25,6 @@ urlpatterns = [
     path('', include('homepage.urls')),
     path('play/', include('play.urls')),
     path('library/', include('library.urls')),
-    path('components/', include('components.urls'))
 ]
 
 if settings.DEBUG:

django/library/forms.py

@@ -15,7 +15,7 @@ from django import forms
 
 class QuizFilterForm(forms.Form):
     search = forms.CharField(required=False, label="Suche", widget=forms.TextInput(attrs={
-        'class': 'flex flex-grow rounded-lg p-2' ,'placeholder': 'Suche ...',
+        'class': 'flex flex-grow rounded-lg p-2' ,'placeholder': 'Suche ...', 'list': 'quiz-names',
     }))
 
 

django/library/urls.py

@@ -16,5 +16,6 @@ urlpatterns = [
     path('question/delete/<int:pk>/', views.delete_question, name='delete_question'),
     path('detail/copy/<int:pk>/', views.copy_quiz, name='copy_quiz'),
     path('favorite_quiz/<int:pk>/', views.favorite_quiz, name='favorite_quiz'),
+    path("quiz-names-json/", views.quiz_names_json, name="quiz_names_json"),
 
 ]

django/library/views.py

@@ -1,6 +1,6 @@
 from django.utils import timezone
 import uuid
-from django.http import HttpResponse, HttpResponseRedirect
+from django.http import HttpResponse, HttpResponseRedirect, JsonResponse
 from django.shortcuts import render, redirect, get_object_or_404
 from django.contrib.auth.decorators import login_required
 from django.contrib.auth.models import User
@@ -16,6 +16,18 @@ from django.db.models import Count
 from django.contrib.auth.models import User
 # Übersicht aller Quizze
 
+
+def quiz_names_json(request):
+    form = QuizFilterForm(request.GET)
+    if form.is_valid():
+        search = form.cleaned_data.get('search')
+        names = list(
+    QivipQuiz.objects.all().annotate(max_amout_questions=Count('questions')).filter(max_amout_questions__gte=1, status='öffentlich', name__icontains=search)
+    .values_list('name', flat=True)
+    .distinct()
+)
+    return JsonResponse(names, safe=False)
+
 def overview_quiz(request):
     # Filter
     form = QuizFilterForm(request.GET)
@@ -85,36 +97,6 @@ def overview_quiz(request):
         except:
             favorite_quizzes=QivipQuiz.objects.none()
 
-        """
-        if search: # Suche nach Namen
-           filter_other_quizzes = filter_other_quizzes.filter(name__icontains=search)
-           filter_my_quizzes = filter_my_quizzes.filter(name__icontains=search)
-
-        if min_amout_questions:
-           filter_other_quizzes = filter_other_quizzes.filter(max_amout_questions__gte=min_amout_questions)
-           filter_my_quizzes = filter_my_quizzes.filter(max_amout_questions__gte=min_amout_questions) if filter_my_quizzes else QivipQuiz.objects.none()
-
-        if max_amout_questions:
-           filter_other_quizzes = filter_other_quizzes.filter(max_amout_questions__lte=max_amout_questions)
-           try:
-               filter_my_quizzes =filter_my_quizzes.filter(max_amout_questions__lte=max_amout_questions)
-           except:
-               filter_my_quizzes = QivipQuiz.objects.none()
-               
-        if username:
-            try:
-                user = User.objects.get(username=username)  # Benutzer anhand des Namens holen
-                filter_other_quizzes = filter_other_quizzes.filter(user_id=user.id)
-                filter_my_quizzes = filter_my_quizzes.filter(user_id=user.id)  # Nach der user_id filtern
-            except User.DoesNotExist:
-                filter_other_quizzes = QivipQuiz.objects.none()  # Falls User nicht existiert, leere Query zurückgeben
-                filter_my_quizzes = QivipQuiz.objects.none()
-                
-        try:
-           filter_other_quizzes=filter_other_quizzes.exclude(user_id=request.user)
-        except:
-            filter_other_quizzes=filter_other_quizzes
-        """
         
 
         # Pagination for my quizzes

django/package-lock.json

@@ -10,7 +10,6 @@
       "license": "ISC",
       "dependencies": {
         "@tailwindcss/cli": "^4.1.5",
-        "swiper": "^11.2.6",
         "tailwindcss": "^4.1.5"
       }
     },
@@ -889,25 +888,6 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/swiper": {
-      "version": "11.2.6",
-      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.6.tgz",
-      "integrity": "sha512-8aXpYKtjy3DjcbzZfz+/OX/GhcU5h+looA6PbAzHMZT6ESSycSp9nAjPCenczgJyslV+rUGse64LMGpWE3PX9Q==",
-      "funding": [
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/swiperjs"
-        },
-        {
-          "type": "open_collective",
-          "url": "http://opencollective.com/swiper"
-        }
-      ],
-      "license": "MIT",
-      "engines": {
-        "node": ">= 4.7.0"
-      }
-    },
     "node_modules/tailwindcss": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.5.tgz",

django/package.json

@@ -11,7 +11,6 @@
   "description": "",
   "dependencies": {
     "@tailwindcss/cli": "^4.1.5",
-    "swiper": "^11.2.6",
     "tailwindcss": "^4.1.5"
   }
 }

django/play/consumers/game.py

@@ -188,17 +188,20 @@ class GameConsumer(AsyncWebsocketConsumer):
             question_data = json.loads(current_question.data)
             print(answer_index)
             try:
-            #if answer_index >= 0 :  # -1 means timeout
-                is_correct = question_data['options'][answer_index]['is_correct']
-                print(is_correct)
+                if answer_index >= 0 :  # -1 means timeout
+                    is_correct = question_data['options'][answer_index]['is_correct']
+                    print(is_correct)
             except:
-                user_input = str(answer_index).strip().lower()
-                correct_value = str(question_data['options'][0].get('value', '')).strip().lower()
+                user_input = str(answer_index).strip().lower().replace(" ", "")
+                correct_value = str(question_data['options'][0].get('value', '')).strip().lower().replace(" ", "")
                 print("Richtig",correct_value)
+                print(user_input)
                 if user_input == correct_value:
                     is_correct=True
-                    answer_index=0
+                    answer_index=int(0)
                     print(is_correct)
+                else:
+                    answer_index=int(1)
 
                     
                 

django/templates/accounts/home.html

@@ -9,11 +9,15 @@
       
         <h1 class="text-center m-4 text-3xl lg:text-6xl">Willkommen,  <b>{{ request.user.username }}</b>!</h1>
        
+      
         <form action="{% url 'accounts:logout' %}" method="post">
             {% csrf_token %}
             <button class="w-full p-3 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200 cursor-pointer" type="submit">Abmelden</button>
             </form>
+            <button class="text-center text-sm w-full mt-4 font-light text-blue-600"><a  href="{% url 'accounts:password_change' %}">Passwort ändern</a></button>
+            <button class="text-center text-sm w-full mt-4 font-light text-red-600"><a  href="{% url 'accounts:delete_account'  %}">Account löschen</a></button>
         </div>
+       
         <div class="flex justify-end">
             <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>

django/templates/accounts/login.html

@@ -27,6 +27,7 @@
             <button class="w-full p-3 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200 cursor-pointer" type="submit" class="login-button">Anmelden</button>
         </form>
         <button class="text-center text-sm w-full mt-2 font-light text-blue-600"><a href="{% url 'accounts:register' %}" class="register_link">Noch kein Konto?</a></button>
+        <button class="text-center text-sm w-full mt-2 font-light text-blue-600"><a href="{% url 'accounts:password_reset' %}" class="register_link">Passwort vergessen?</a></button>
     </div>
     </div>
 {% endblock %}

django/templates/accounts/register.html

@@ -37,7 +37,14 @@
                 {{ form.password2 }}
 
                 </div>
-      
+                <div class="register">
+                
+                    {{ form.email }}
+    
+                    </div>
+        <div class="text-center text-gray-600 text-sm dislay-flex align-bottom">
+            <label class=''>Mit der Erstellung ihres Kontos stimmen Sie der <a class="text-blue-600" href="/privacy">Datenschutzerklärung </a> zu.</label>
+        </div>
             <button class="w-full p-3 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200" type="submit" class="login-button">Registrieren</button>
         </form>
         <button class="text-center text-sm w-full mt-2 font-light text-blue-600"><a href="{% url 'accounts:login' %}" class="register_link">Bereits ein Konto?</a></button>

django/templates/base.html

@@ -13,6 +13,7 @@
 <body>
     {% include 'partials/_nav.html' %}
     {% block content%}{% endblock %}
+    {% block faqs%}{% endblock %}
     {% include 'partials/_footer.html' %}
     
     <!-- Toast Container -->

django/templates/components/answer.html

@@ -1,22 +0,0 @@
-{% extends 'components/base.html' %}
-{% load static %}
-{% block title %}Antwort{% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'css/t-style.css' %}">
-
- <!-- TODO Bedingung festlegen: Quiztyp unterscheiden % if <Bedingung> % -->
-  {% if user.is_authenticated %}
-<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>
-
-<!-- TODO wieder einfügen, wenn Bedingung gestetzt  -->
-{% 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-green-500 rounded-sm shadow-[0_2px_2px_rgba(0,0,0,0.1)]  text-center text-white">wahr</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-red-500 rounded-sm shadow-[0_2px_2px_rgba(0,0,0,0.1)] text-center text-white">falsch</button>
-
-    
-<!--TODO wieder einfügen, wenn Bedingung gestetzt plus   -->
-{% endif %}
-{% endblock %}

django/templates/components/base.html

@@ -1,45 +0,0 @@
-{% load static %}
-<!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  h-full m-0">
-
-    <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 class=" dark:bg-gray-900  flex justify-end gap-2 " style="height: calc(12vh);">
-    <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>
-    <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 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;">
- 
-      
-      {% block content %}
-   
-      {% endblock %}
-  
-  </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>

django/templates/components/ranking.html

@@ -1,63 +0,0 @@
-{% load static %}
-<link rel="stylesheet" href="{% static 'css/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>

django/templates/homepage/home.html

@@ -4,7 +4,7 @@
 <div class="grid place-content-center md:h-screen h-150 w-full -z-50 top-0 p-4">
     <div class="text-center">
         <h2 class="font-bold md:text-8xl text-6xl md:mb-8 text-blue-600">qivip</h2>
-        <h3 class="mt-4 italic font-extralight sm:text-2xl text-md">Interaktives Lernen neu definiert.</h3>
+        <h3 class="mt-4 italic font-extralight sm:text-4xl text-md">forever and forall</h3>
     </div>
     <div class="grid sm:grid-cols-3 place-items-stretch text-center mt-8 gap-4 p-4 border-3 bg-blue-100 border-blue-100 rounded-md">
         <a class="qp-a-button bg-green-500 text-white" href="{% url 'play:join_game' %}">Teilnehmen</a>
@@ -12,4 +12,156 @@
         <a class="qp-a-button bg-purple-500 text-white" href="{% url 'library:new_quiz' %}">Erstellen</a>
     </div>
 </div>
+{% endblock %}
+
+{% block faqs %}
+<style>
+   details[open] summary svg {
+    transform: rotate(180deg);
+  }
+
+</style>
+
+
+<div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 mb-6">
+  <div class="flex items-center gap-3">
+    <h2 class="text-2xl font-bold text-gray-900">FAQs</h2>
+    <div class="h-0.5 flex-grow bg-gradient-to-r from-blue-600 to-transparent rounded-full"></div>
+  </div>
+</div>
+
+
+    <div class="input-group !max-w-4xl tracking-wide">
+        <h1 class="font-black text-blue-600 flex justify-between gap-2 lg:text-lg">
+
+
+        FAQs - häufig gestellte Fragen
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
+</svg></h1>
+   
+</div>
+
+
+<div class="input-group mt-2.5 !max-w-4xl hover:!bg-gray-50">
+        <details>
+            <summary class="flex justify-between cursor-pointer font-bold">Was ist qivip?
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
+                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+                </svg>
+            </summary> 
+            <p class="text-blue-600">qivip ist eine Webseite zum Lernen! Es können vor allem Quizze erstellt, bearbeitet, kopiert und auch gespielt werden. </p>
+        </details>
+</div>
+
+<div class="input-group mt-2.5 !max-w-4xl hover:!bg-gray-50">
+        <details>
+            <summary class="flex justify-between cursor-pointer font-bold">Was sind die Vorteile von qivip?
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
+                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+                </svg>
+            </summary> 
+            <p class="text-blue-600">
+                Einige Vorteile von qivip:
+                <br>
+                - Sie können Quizze moderieren ohne Account (siehe wie man Quizze mit mehreren Personen gemeinsam spielt)
+                <br>
+                - alle öffentlichen Quizze können auch ohne Account gespielt werden
+                <br>
+                - qivip ist 100% kostenlos
+                                <br>
+                - es gibt keine Werbung
+                                                <br>
+                - qivip ist Open Source
+            </p>
+        </details>
+</div>
+
+<div class="input-group mt-2.5 !max-w-4xl hover:!bg-gray-50">
+        <details>
+            <summary class="flex justify-between cursor-pointer font-bold">Ist qivip kostenlos?
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
+                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+                </svg>
+            </summary> 
+            <p class="text-blue-600">Ja! qivip ist zu 100% kostenlos und es gibt keine versteckten Kosten.</p>
+        </details>
+</div>
+
+<div class="input-group mt-2.5 !max-w-4xl hover:!bg-gray-50">
+        <details>
+            <summary class="flex justify-between cursor-pointer font-bold">Muss ich mich bei qivip registrieren, wenn ich ein Quiz spielen möchte?
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
+                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+                </svg>
+            </summary> 
+            <p class="text-blue-600">Nein! qivip ist so ausgelegt, dass man auch ohne Account alle öffentlichen Quizze spielen kann.</p>
+        </details>
+</div>
+
+<div class="input-group mt-2.5 !max-w-4xl hover:!bg-gray-50">
+        <details>
+            <summary class="flex justify-between cursor-pointer font-bold">Kann ich ein Quiz von qivip auch alleine spielen?
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
+                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+                </svg>
+            </summary> 
+            <p class="text-blue-600">Ja! Gehen Sie zur Bibliothek und klicken Sie auf den Button "spielen" (eines von Ihnen ausgewählten Quizzes). Wählen Sie anschließend bei den Spielmodi einfach den Lernmodus aus.</p>
+        </details>
+</div>
+<div class="input-group mt-2.5 !max-w-4xl hover:!bg-gray-50">
+        <details>
+            <summary class="flex justify-between cursor-pointer font-bold">Wie kann ich ein Quiz erstellen?
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
+                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+                </svg>
+            </summary> 
+            <p class="text-blue-600">Wichtig: Für diese Funktion müssen Sie angemeldet sein. Gehen Sie dafür auf die Startseite und klicken Sie auf "Erstellen". Nun wird Ihnen ein Formular angezeigt, dass Sie dann ausfüllen.
+                Anschließend können Sie Fragen zu dem Quiz hinzufügen, indem Sie auf den Button eines Fragetyps klicken. </p>
+        </details>
+    </div>
+
+    <div class="input-group mt-2.5 !max-w-4xl hover:!bg-gray-50">
+        <details>
+            <summary class="flex justify-between cursor-pointer font-bold">Wie kann ich mit mehreren Personen ein Quiz gemeinsam spielen?
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
+                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+                </svg>
+            </summary> 
+            <p class="text-blue-600">
+                Wenn man ein Quiz mit mehreren Personen spielt, gibt es sowohl einen Moderator als auch die Teilnehmer.
+                <br>
+                <br>
+                <b>Moderator: </b>Der Moderator selbst spielt nicht mit. Gehen Sie entweder auf die Startseite und klicken Sie auf "Moderieren" oder klicken einfach auf "spielen" (eines von Ihnen ausgewählten Quizzes) und dann auf Moderiermodus.
+                Der Moderator kann das Spiel, wenn die Teilnehmer da sind starten.
+                <br>
+                <br>
+                <b>Teilnehmer: </b>Gehen Sie auf die Startseite und klicken Sie auf "Teilnehmen" und geben Sie dann den beim Moderator angegebenen Zahlencode ein. Anschließlich können Sie noch einen Anzeigenamen eingeben.  
+             </p>
+        </details>
+    </div>
+
+
+    <div class="input-group mt-2.5 !max-w-4xl hover:!bg-gray-50">
+        <details>
+            <summary class="flex justify-between cursor-pointer font-bold">Wo steht unser Server?
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
+                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+                </svg>
+            </summary> 
+            <p class="text-blue-600">Unser Server befindet sich in Deutschland, genauer gesagt in Nürnberg. </p>
+        </details>
+    </div>
+
+    <div class="input-group mt-2.5 !max-w-4xl hover:!bg-gray-50">
+        <details>
+            <summary class="flex justify-between cursor-pointer font-bold">Wer steckt hinter qivip?
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
+                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+                </svg>
+            </summary> 
+            <p class="text-blue-600">Wir sind eine kleine Gruppe von Schülern, die sich im Rahmen eines Enrichmenten Projektes zusammengefunden hat. </p>
+        </details>
+    </div>
+ 
 {% endblock %}

django/templates/library/detail_quiz.html

@@ -237,4 +237,5 @@
 </div>
 
 </div>
+
 {% endblock %}

django/templates/library/form.html

@@ -18,7 +18,9 @@
             <input  class="bg-blue-200 p-2 m-2 rounded-lg border-2 border-blue-400" type="file" name="quiz_image" id="quiz_image">
         </div>
 
-
+       <div class="text-center text-gray-600 text-sm dislay-flex align-bottom">
+            <label class=''>Mit der Erstellung von diesem Quiz stimmen Sie der <a class="text-blue-600" href="/privacy">Datenschutzerklärung </a> zu.</label>
+        </div>
 
         <div class="flex justify-center space-x-3">
             <a href="{% if object.quiz_id %}{% url 'library:detail_quiz' object.quiz_id.id %}{% else %}{% url 'library:overview_quiz' %}{% endif %}" 

django/templates/library/overview_quiz.html

@@ -2,21 +2,8 @@
 {% load static %}
 
 {% block extra_css %}
-<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;
-  }
 
   .custom-outline {
     -webkit-text-stroke: 0.2px rgb(0, 0, 0);

django/templates/partials/_nav.html

@@ -11,7 +11,7 @@
         <!-- Desktop Search (centered on screen) - Hidden on mobile -->
         <div class="hidden md:flex justify-center items-center absolute left-1/2 transform -translate-x-1/2 min-w-40">
             <form method="get" action="{% url 'library:overview_quiz' %}" class="mr-2 ml-2 flex items-center justify-center w-screen max-w-sm bg-white rounded-full px-4 py-1 shadow-md">
-                <input type="text" name="search" placeholder="Suche ..." value="{{ request.GET.search }}"
+                <input id="quiz-search-desktop" list="quiz-names-desktop" type="text" name="search" placeholder="Suche ..." value="{{ request.GET.search }}"
                        class="text-sm w-full px-3 py-1 text-black bg-transparent focus:outline-none lg:text-base">
                 <button class="py-1 text-blue-600">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 md:size-6">
@@ -20,9 +20,9 @@
                 </button>
             </form>
         </div>
-        
+    
         <!-- Desktop Navigation Links - Hidden on mobile -->
-        <div class="hidden md:flex items-center space-x-4 md:w-40">
+        <div class="hidden md:flex items-center">
             <ul class="flex space-x-4 qp-nav-list">
                 {% if show_search %}
                 <li><a href="{% url 'library:overview_quiz' %}">Bibliothek</a></li>
@@ -53,7 +53,7 @@
             <!-- Search in mobile menu -->
             <form method="get" action="{% url 'library:overview_quiz' %}" class="px-4 mb-4">
                 <div class="flex items-center justify-center bg-white rounded-full px-4 py-2 shadow-md">
-                    <input type="text" name="search" placeholder="Suche ..." value="{{ request.GET.search }}"
+                    <input id="quiz-search-mobile" list="quiz-names-mobile" type="text" name="search" placeholder="Suche ..." value="{{ request.GET.search }}"
                             class="w-full text-sm px-2 text-black bg-transparent focus:outline-none">
                     <button class="text-blue-600">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" 
@@ -63,6 +63,78 @@
                         </svg>              
                     </button>
                 </div>
+
+                <datalist id="quiz-names-desktop">
+                    {% for quiz in quiz_names %}
+                        <option value="{{ quiz.name }}">
+                    {% endfor %}
+                </datalist>
+
+                <datalist id="quiz-names-mobile">
+                    {% for quiz in quiz_names %}
+                        <button value="{{ quiz.name }}" onclick="performSearch(this.value)"><option value="{{ quiz.name }}" ></option></button>
+                    {% endfor %}
+                </datalist>
+                
+                
+
+              
+                {{ quiz_names|json_script:"quiz-names-data" }}
+
+                <script>
+                    async function fetchQuizNames() {
+                        try {
+                            const response = await fetch("{% url 'library:quiz_names_json' %}");
+                            if (!response.ok) throw new Error("Netzwerkfehler");
+                            const data = await response.json();
+                            if (Array.isArray(data)) return data;
+                        } catch (err) {
+                            console.error("Fehler beim Laden der Quiz-Namen:", err);
+                        }
+                        return [];
+                    }
+                
+                    function setupAutocomplete(inputId, datalistId, quizNames) {
+                        const searchInput = document.getElementById(inputId);
+                        const datalist = document.getElementById(datalistId);
+                        if (!searchInput || !datalist) return;
+                
+                        // Wenn der Benutzer den Text ändert, Filter anwenden
+                        searchInput.addEventListener('input', () => {
+                            const value = searchInput.value.toLowerCase();
+                            datalist.innerHTML = '';
+                            quizNames
+                                .filter(name => name.toLowerCase().includes(value))
+                                .slice(0, 10)
+                                .forEach(name => {
+                                    const option = document.createElement('option');
+                                    option.value = name;
+                                    datalist.appendChild(option);
+                                    
+                                });
+                        });
+       
+
+                    }
+                
+                    // Funktion zum Durchführen der Suche
+                    function performSearch(query) {
+                        datalist.innerHTML = '';
+                        // Hier kann deine Logik zur Verarbeitung der Suche eingefügt werden
+
+                        // Falls du die Seite zu einer Suchergebnisseite weiterleiten möchtest:
+                        window.location.href = `{% url 'library:overview_quiz' %}?search=${query}`;
+                    }
+                
+                    document.addEventListener('DOMContentLoaded', async () => {
+                        const quizNames = await fetchQuizNames();
+                        setupAutocomplete('quiz-search-desktop', 'quiz-names-desktop', quizNames);
+                        setupAutocomplete('quiz-search-mobile', 'quiz-names-mobile', quizNames);
+                    });
+                </script>
+                
+                    
+                
             </form>
 
             <!-- Mobile Navigation Links -->

django/templates/play/game/question_host.html

@@ -50,15 +50,16 @@
         </div>
         {% else %}
         {% if request.session.mode == "learn" %}
+        <form action="">
         <input id="textanswer" type="text" placeholder="DEINE ANTWORT" 
-        class="answer-option text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option">
+        class="answer-option text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option lg:w-80 ">
    
  <button {% if request.session.mode == "learn" %}
  onclick="submitAnswer( -1 );" {% endif %}
-         class="text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option">
+         class="mt-2 text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option">
      abschicken
  </button>
-
+</form>
   
         {% endif %}
         {% endif %}

django/templates/play/game/question_participant.html

@@ -27,13 +27,15 @@
             {% endfor %}
         </div>
         {% else %}
+        <form action="">
         <input id="textanswer" type="text" placeholder="DEINE ANTWORT" 
-        class="answer-option text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option">
+        class="answer-option text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option lg:w-80">
  <button
  onclick="submitAnswer( -1 );"
-         class="text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option">
+         class="mt-2 text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option">
      abschicken
  </button>
+ </form>
         {% endif %}
     </div>
 </div>

django/templates/play/game/score_overview.html

@@ -10,10 +10,16 @@
             <p class="text-lg mb-2">{{ question_data.question }}</p>
             <div class="grid grid-cols-2 gap-4">
                 {% for option in question_data.options %}
-                    <div class="p-4 rounded-lg {% if option.is_correct %}bg-green-100 border-2 border-green-500 {% else %} bg-gray-100 {% endif %}">
-                        <p class="text-lg">{{ option.value }}</p>
-                        <p class="text-gray-600" id="option-count-{{ forloop.counter0 }}">0 Antworten</p>
-                    </div>
+                
+            <div id="option-box-{{ forloop.counter0 }}" class="bg-gray-100 relative p-4 rounded-lg overflow-hidden {% if option.is_correct %} border-2 border-green-500{% else %}border-2 border-red-500{% endif %}">
+            
+            <div id="option-fill-{{ forloop.counter0 }}" class="absolute left-0 top-0 h-full {% if option.is_correct %}bg-green-300 {% else %}bg-red-300 {% endif %} opacity-50 z-0 transition-all duration-1500 " style="width: 0%;"></div>
+            <div class="relative z-10">
+            <p class="text-lg">{{ option.value }}</p>
+            <p class="text-gray-600" id="option-count-{{ forloop.counter0 }}">0 Antworten</p>
+             
+            </div>
+        </div>
                 {% endfor %}
             </div>
         </div>
@@ -36,7 +42,7 @@
                                     {% endif %}
                                     {{ participant.display_name }}
                                 </p>
-                                <p class="text-gray-600">{{ participant.score }} Punkte</p> 
+                                <p data-last-score="{{ participant.last_score }}" class="text-gray-600" id="score-{{ forloop.counter0 }}">{{ participant.score }} Punkte</p> 
                             </div>                     
                             {% if participant.last_answer_correct %}
                                 <span class="text-green-500">✓</span>
@@ -66,6 +72,7 @@
 
 {% block extra_js %}
 {% if is_last_question %}
+
 <script>
     // Hilfsfunktion für Pausen
     function sleep(ms) {
@@ -174,17 +181,25 @@
     {% endif %}
     {% endif %}
 
-    function updateAnswerStats(stats) {
-        for (var optionIndex in stats) {
-            if (stats.hasOwnProperty(optionIndex)) {
-                var element = document.getElementById('option-count-' + optionIndex);
-                if (element) {
-                    
-                    element.textContent = stats[optionIndex] + ' Antwort(en)';
-                }
+function updateAnswerStats(stats) {
+    const total = Object.values(stats).reduce((a, b) => a + b, 0) || 1;
+
+    for (var optionIndex in stats) {
+        if (stats.hasOwnProperty(optionIndex)) {
+            var countElement = document.getElementById('option-count-' + optionIndex);
+            var fillElement = document.getElementById('option-fill-' + optionIndex);
+
+            if (countElement) {
+                countElement.textContent = stats[optionIndex] + ' Antwort(en)';
+            }
+
+            if (fillElement) {
+                const percentage = Math.round((stats[optionIndex] / total) * 100);
+                fillElement.style.width = percentage + '%';
             }
         }
     }
+}
 
     // Request answer stats when page loads
     gameSocket.onopen = function(e) {

django/templates/play/join_game.html

@@ -7,7 +7,7 @@
         <form action="{% url 'play:join_game' %}" method="post" class="flex flex-col gap-4">
             {% csrf_token %}
             <div class="flex gap-3 items-center justify-center">
-                <input type="text" name="game_code" placeholder="123456" maxlength="6" class="w-32 p-3 rounded-full bg-gray-200 focus:scale-105 transition duration-200 font-black focus:outline-none focus:ring-2 focus:ring-blue-400 focus:bg-blue-100 text-center tracking-wider"  autofocus>
+                <input type="number" name="game_code" placeholder="123456" maxlength="6" class="w-32 p-3 rounded-full bg-gray-200 focus:scale-105 transition duration-200 font-black focus:outline-none focus:ring-2 focus:ring-blue-400 focus:bg-blue-100 text-center tracking-wider"  autofocus>
                 <button type="submit" class="h-12 px-6 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200 flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-blue-700 active:scale-95 group" disabled>
                     <span class="hidden sm:block">Beitreten</span>
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 transition-transform group-hover:translate-x-1">

django/templates/play/lobby.html

@@ -26,7 +26,7 @@
         {% endif %}
 
         <!-- Participants List -->
-        <div class="mb-6">
+        <div class="mb-6 overflow-y-scroll max-h-96">
             <h3 class="font-bold text-lg mb-3 flex items-center">
                 <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />

django/templates/registration/delete_account_confirm.html

@@ -0,0 +1,35 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<div class="container mx-auto px-4">
+    <div class="max-w-lg mx-auto mt-10">
+        <div class="bg-white rounded-lg shadow-md p-6 border-blue-600 border-2 rounded-xl shadow-md">
+            <div class="text-center">
+                <svg class="mx-auto h-12 w-12 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+                </svg>
+                
+                <h2 class="mt-4 text-xl font-bold text-gray-900">Löschen bestätigen</h2>
+                
+                <p class="mt-2 text-sm text-gray-600">
+                        Möchten Sie ihren Account wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.
+                </p>
+            </div>
+
+            <form method="post" class="mt-6">
+                {% csrf_token %}
+                <div class="flex justify-center space-x-3"> 
+                    <a href="{% url 'accounts:home' %}" 
+                       class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                        Abbrechen
+                    </a>
+                    <button type="submit" 
+                            class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
+                        Löschen
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+{% endblock %}

django/templates/registration/password_change_form.html

@@ -0,0 +1,42 @@
+{% extends 'base.html' %}
+{% load static %}
+{% block title %}Passwort ändern{% endblock %}
+{% block content %}
+    <div class="grid place-content-center h-120 mt-12 mb-12 ">
+    <div class="w-80 p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90">
+        <h2 class="text-2xl text-center p-4 font-black">Passwort ändern</h2>
+        <form class="space-y-4" method="post">
+            {% if form.errors %}
+            <div class=" items-center text-red-600 font-black overflow-x-auto break-words text-center">
+                <ul>
+                    {% for field, errors in form.errors.items %}
+                        {% for error in errors %}
+                            <li>{{ error }}</li>
+                        {% endfor %}
+                    {% endfor %}
+                </ul>
+            </div>
+            {% endif %}
+            {% csrf_token %}
+            <div  class="register">
+                
+            {{ form.old_password.label_tag }} 
+            <input type="password" name="old_password" placeholder="ALTES PASSWORT" />
+            
+        </div>
+            
+        <div class="register">
+            {{ form.new_password1.label_tag }} 
+            <input type="password" name="new_password1" placeholder="NEUES PASSWORT" /> 
+        </div>
+            <div class="register">
+            {{ form.new_password2.label_tag }}  
+            <input type="password" name="new_password2" placeholder="NEUES PASSWORT WIEDERHOLEN" /> 
+        </div>
+            <button class="w-full p-3 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200" type="submit">Bestätigen</button>
+            <button class="text-center text-sm w-full mt-2 font-light text-blue-600"><a href="{% url 'accounts:home' %}" class="register_link">Doch nicht ändern?</a></button>
+        </form>
+       
+    </div>
+    </div>
+{% endblock %}

django/templates/registration/password_reset_complete.html

@@ -0,0 +1,19 @@
+{% extends 'base.html' %}
+{% load static %}
+{% block title %}Passwort zurückgesetzt{% endblock %}
+{% block content %}
+    <div class="grid place-content-center h-120 mt-12 mb-12 ">
+    <div class="w-80 p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90">
+        <h2 class="text-2xl text-center p-4 font-black">Passwort zurückgesetzt</h2>
+        <div class="space-y-4">
+            Das Passwort wurde erfolgreich zurückgesetzt! Sie können sich nun mit dem neuen Passwort anmelden!
+            {% csrf_token %}
+            <div class="mt-4">
+            <a href="{% url 'accounts:login' %}" class="register_link"><button class="w-full p-3 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200"  class="login-button">anmelden</button></a>
+        </div>
+
+        </div>
+       
+    </div>
+    </div>
+{% endblock %}

django/templates/registration/password_reset_confirm.html

@@ -0,0 +1,42 @@
+{% extends 'base.html' %}
+{% load static %}
+{% block title %}Passwort zurücksetzen{% endblock %}
+{% block content %}
+    <div class="grid place-content-center h-120 mt-12 mb-12 ">
+    <div class="w-80 p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90">
+        <h2 class="text-2xl text-center p-4 font-black">Passwort zurücksetzen</h2>
+        {% if validlink %} 
+        <form class="space-y-4" method="post">
+            {% if form.errors %}
+            <div class=" items-center text-red-600 font-black overflow-x-auto break-words text-center">
+                <ul>
+                    {% for field, errors in form.errors.items %}
+                        {% for error in errors %}
+                            <li>{{ error }}</li>
+                        {% endfor %}
+                    {% endfor %}
+                </ul>
+            </div>
+            {% endif %}
+            {% csrf_token %}
+            
+        <div class="register">
+            {{ form.new_password1.label_tag }}  
+            <input type="password" name="new_password1" placeholder="NEUES PASSWORT" /> 
+        </div>
+            <div class="register">
+            {{ form.new_password2.label_tag }}  
+            <input type="password" name="new_password2" placeholder="NEUES PASSWORT WIEDERHOLEN" /> 
+
+        </div>
+            <button class="w-full p-3 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200" type="submit">Bestätigen</button>
+            <button class="text-center text-sm w-full mt-2 font-light text-blue-600"><a href="{% url 'accounts:home' %}" class="register_link">Doch nicht zurücksetzen?</a></button>
+        </form>
+        {% else %}
+        Dieser Link ist leider nicht mehr gültig oder abgelaufen. Bitte versuchen Sie es erneut:
+        <button class="text-center text-sm w-full mt-2 font-light text-blue-600"><a href="{% url 'accounts:password_reset' %}" class="register_link">Passwort zurücksetzen</a></button>
+        {% endif %}
+      
+    </div>
+    </div>
+{% endblock %}

django/templates/registration/password_reset_done.html

@@ -0,0 +1,18 @@
+{% extends 'base.html' %}
+{% load static %}
+{% block title %}E-Mail gesendet{% endblock %}
+
+{% block content %}
+<div class="grid place-content-center h-120 mt-12 mb-12">
+    <div class="w-80 p-6 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90 text-center">
+        <h2 class="text-2xl font-black mb-4">E-Mail wurde gesendet</h2>
+        <p class="text-gray-700 mb-6">
+            Wenn ein Konto mit dieser E-Mail-Adresse existiert, haben wir dir eine Nachricht mit einem Link zum Zurücksetzen des Passworts gesendet.
+       
+        </p><p class="text-gray-700 mb-6 font-bold">&nbsp; Tipp: Gegebenenfalls Spam überprüfen.</p>
+        
+        
+        <a href="{% url 'accounts:login' %}" class="block w-full p-3 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200">Zur Anmeldung</a>
+    </div>
+</div>
+{% endblock %}

django/templates/registration/password_reset_email.html

@@ -0,0 +1,11 @@
+{% load i18n %}
+{% autoescape off %}
+{% blocktranslate %}Du erhältst diese E-Mail, weil du einen Passwort-Zurücksetzungsversuch bei {{ site_name }} angefragt hast.{% endblocktranslate %}
+
+{% translate "Bitte gehe zu folgender Seite und wähle ein neues Passwort:" %}
+{{ protocol }}://{{ domain }}{% url 'accounts:password_reset_confirm' uidb64=uid token=token %}
+
+{% translate "Dein Benutzername ist:" %} {{ user.get_username }}
+
+{% blocktranslate %}Danke, dass du {{ site_name }} benutzt!{% endblocktranslate %}
+{% endautoescape %}

django/templates/registration/password_reset_form.html

@@ -0,0 +1,35 @@
+{% extends 'base.html' %}
+{% load static %}
+{% block title %}Passwort ändern{% endblock %}
+{% block content %}
+    <div class="grid place-content-center h-120 mt-12 mb-12 ">
+    <div class="w-80 p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90">
+        <h2 class="text-2xl text-center p-4 font-black">Passwort zurücksetzen</h2>
+        <form class="space-y-4" method="post">
+            Gib hier deine E-Mail an und erhalte eine E-Mail, um das Passwort zurückzusetzen.
+            {% if form.errors %}
+            <div class=" items-center text-red-600 font-black overflow-x-auto break-words text-center">
+                <ul>
+                    {% for field, errors in form.errors.items %}
+                        {% for error in errors %}
+                            <li>{{ error }}</li>
+                        {% endfor %}
+                    {% endfor %}
+                </ul>
+            </div>
+            {% endif %}
+            {% csrf_token %}
+
+            
+        <div class="register">
+            {{ form.email.label_tag }}
+            <input type="email" name="email" placeholder="E-MAIL" /> 
+        </div>
+        
+
+            <button class="w-full p-3 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200" type="submit">Bestätigen</button>
+        </form>
+       
+    </div>
+    </div>
+{% endblock %}