Change Allowed Hosts

Resolve "Host und Spiel App erstellen und Grundlegende Templates erstellen"

Closes #21

See merge request enrichment-2024/qivip!6

.gitignore

@@ -2,3 +2,5 @@ __pycache__
 .venv
 db.sqlite3
 tailwindcss.exe
+t-style.css
+dump.rdb

README.md

@@ -6,6 +6,7 @@
 2. [Starten des Servers](#starten-des-servers)
 3. [Superuser erstellen](#superuser-erstellen)
 4. [Tailwind-Nutzung](#tailwind-nutzung)
+5. [Issue - Merge Request - Merge](#issue-mergerequest-merge)
 
 ## Initialisierung des Projekts
 
@@ -83,7 +84,11 @@ npm install tailwindcss @tailwindcss/cli
 ### Datei generieren
 
 ```sh
+# Bei Verwendung der Binärdatei:
 tailwindcss -i <INPUT-DATEI> -o <OUTPUT-DATEI> --watch --minify
+
+# Bei Verwendung von NPM:
+npx @tailwindcss/cli -i <INPUT-DATEI> -o <OUTPUT-DATEI> --watch --minify
 ```
 
 - INPUT-DATEI: CSS Datei, welche die Einbindung und Konfiguration von Tailwind enthält
@@ -94,5 +99,19 @@ tailwindcss -i <INPUT-DATEI> -o <OUTPUT-DATEI> --watch --minify
 **Beispiel:**
 
 ```sh
-tailwindcss -i core/homepage/static/homepage/t-input.css -o core/homepage/static/homepage/t-style.css --watch --minify
+# unter Linux mit Tailwind Binärdatei:
+tailwindcss -i core/static/homepage/t-input.css -o core/static/homepage/t-style.css --watch --minify
+
+# unter Windows mit NPM:
+npx @tailwindcss/cli -i .\core\static\homepage\t-input.css -o .\core\static\homepage\t-style.css --watch --minify
 ```
+
+## Issue - Merge Request - Merge
+
+Hier der vereinbarte Arbeitsablauf:
+
+1. Issue erstellen - das geht am einfachsten über die Webseite. Der Titel beschreibt kurz und klar, was angestrebt wird.
+
+2. Merge Request anlegen - dadurch wird der Bransch automatisch angelegt. Dieser kann mit `git pull` geholt und mit `git checkout <branch>` bearbeitet werden.
+
+3. Nach dem Hochladen kann der Merge in den Master durchgeführt werden.

core/accounts/static/accounts/css/base.css

@@ -1,21 +0,0 @@
-/*color vars*/
-:root {
-    --main_bg: #1e1e1e;
-    --main_text_color: #d3d3d3;
-    --main_color: #3399cc;
-    --hover_main_color: #3399ccb0;
-
-  }
-
-
-
-body {
-    background-color: var(--main_bg); 
-    color: var(--main_text_color); 
-    font-family: Arial, sans-serif;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    margin: 0;
-}

core/accounts/static/accounts/css/login.css

@@ -1,128 +0,0 @@
-
-.register_link {
-    color:var(--main_text_color);
-    background-color: #2e2e2e;
-}
-
-.register_button {
-    color:var(--main_text_color);
-    background-color: #2e2e2e;
-    border-radius: 5px;
-    border:none;
-    margin-top: 10px;
-}
-
-
-
-.login-container {
-    background-color: #2e2e2e; 
-    padding: 30px;
-    border-radius: 15px;
-    width: 400px;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
-    text-align: center;
-    border: 2px solid var(--main_color);
-}
-
-.login-header {
-    color: var(--main_text_color);
-    font-size: 24px;
-    margin-bottom: 20px;
-}
-
-
-.input-group {
-    width: 350px;
-    margin-bottom: 15px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding-left: 25px;
-    padding-right: 25px;
-}
-
-
-.input-group input {
-    width: 100%;
-    padding: 10px;
-    border: 1px solid #555; 
-    border-radius: 15px;
-    background-color: #4a4a4a; 
-    color: var(--main_text_color);
-    outline: none;
-    transition: transform 0.2s ease;
-}
-
-
-.input-group input:focus {
-    transform: scale(1.06); 
-    border-color: var(--main_color); 
-}
-
-
-.login-button {
-    width: 50%;
-    padding: 13px;
-    background-color: var(--main_color); 
-    color: var(--main_text_color); 
-    border: none;
-    border-radius: 15px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-    font-size: 20px;
-    font-weight: bold;
-    margin-top: 10px;
-    transition: transform 0.2s ease;
-}
-
-
-.login-button:hover {
-    background-color: var(--hover_main_color); 
-    transform: scale(1.06);
-}
-
-
-.login-logo {
-    width: 400px; 
-    height: auto; 
-    margin-bottom: 20px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 10px;
-}
-.login-logo-mobile {
-    width: 150px;
-}
-
-
-.login-container {
-    text-align: center;
-}
-
-/* MOBILE DEVICES */
-@media (max-width: 768px) {
-    .login-container {
-        width: 250px;
-        padding: 10px;
-    }
-    .input-group {
-        width: 200px;
-    }
-    .login-logo {
-        display:none;
-    }
-    .login-button {
-        height: auto;
-    }
-    .login-form {
-        padding-bottom: 12px;
-    }
-}
-
-/* DESKTOP DEVICES*/
-@media (min-width: 768px) {
-    .login-logo-mobile {
-        display: none;
-    }
-}

core/accounts/templates/accounts/base.html

@@ -1,16 +0,0 @@
-{% load static %}
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{% block title %}{% endblock %}</title>
-    <link rel="stylesheet" href="{% static 'homepage/t-style.css' %}">
-</head>
-<body>
-    {% include 'homepage/partials/_nav.html' %}
-    {% block content %}
-    {% endblock %}
-    {% include 'homepage/partials/_footer.html' %}
-</body>
-</html>

core/accounts/templates/accounts/home.html

@@ -1,11 +0,0 @@
-{% extends 'accounts/base.html'%}
-{% block title %}Home{% endblock %}
-{% block content %}
-<div class="grid place-content-center h-120">
-<h1 class="text-center m-4 text-6xl">Moin moin!</h1>
-<form action="{% url 'accounts:logout' %}" method="post">
-    {% csrf_token %}
-    <button class="bg-red-600 text-white p-3 rounded-full font-black" type="submit">Abmelden</button>
-</form>
-</div>
-{% endblock %}

core/accounts/templates/core/partials/_nav.html

@@ -1,12 +0,0 @@
-<nav class="flex justify-between bg-blue-600 h-12 px-4 sm:px-6 lg:px-8 rounded-lg m-2 shadow-md">
-    <div class="flex items-center">
-        <h2 class="text-xl font-bold text-white hover:scale-110 transition duration-200"><a href="#">qivip</a></h2>
-    </div>
-    <div class="flex items-center">
-        <ul class="flex space-x-4 qp-nav-list">
-            <li><a href="#">Start</a></li>
-            <li><a href="#">Bibliothek</a></li>
-            <li><a href="{% url 'login' %}">Konto</a></li> <!--Hier ist der Link erstmal auf das alte Login-Formular gesetzt! Zum Testen!--> 
-        </ul>
-    </div>
-</nav>

core/chat/consumers.py

@@ -0,0 +1,40 @@
+import json
+
+from asgiref.sync import async_to_sync
+from channels.generic.websocket import WebsocketConsumer
+
+
+class ChatConsumer(WebsocketConsumer):
+    def connect(self):
+        self.room_name = self.scope["url_route"]["kwargs"]["room_name"]
+        self.room_group_name = f"chat_{self.room_name}"
+
+        # Join room group
+        async_to_sync(self.channel_layer.group_add)(
+            self.room_group_name, self.channel_name
+        )
+
+        self.accept()
+
+    def disconnect(self, close_code):
+        # Leave room group
+        async_to_sync(self.channel_layer.group_discard)(
+            self.room_group_name, self.channel_name
+        )
+
+    # Receive message from WebSocket
+    def receive(self, text_data):
+        text_data_json = json.loads(text_data)
+        message = text_data_json["message"]
+
+        # Send message to room group
+        async_to_sync(self.channel_layer.group_send)(
+            self.room_group_name, {"type": "chat.message", "message": message}
+        )
+
+    # Receive message from room group
+    def chat_message(self, event):
+        message = event["message"]
+
+        # Send message to WebSocket
+        self.send(text_data=json.dumps({"message": message}))

core/chat/routing.py

@@ -0,0 +1,8 @@
+# chat/routing.py
+from django.urls import re_path
+
+from . import consumers
+
+websocket_urlpatterns = [
+    re_path(r"ws/chat/(?P<room_name>\w+)/$", consumers.ChatConsumer.as_asgi()),
+]

core/chat/urls.py

@@ -0,0 +1,9 @@
+# chat/urls.py
+from django.urls import path
+
+from . import views
+
+urlpatterns = [
+    path("", views.index, name="index"),
+    path("<str:room_name>/", views.room, name="room"),
+]

core/chat/views.py

@@ -0,0 +1,8 @@
+# chat/views.py
+from django.shortcuts import render
+
+def index(request):
+    return render(request, "chat/index.html")
+
+def room(request, room_name):
+    return render(request, "chat/room.html", {"room_name": room_name})

core/core/asgi.py

@@ -9,8 +9,26 @@ https://docs.djangoproject.com/en/5.1/howto/deployment/asgi/
 
 import os
 
+from channels.auth import AuthMiddlewareStack
+from channels.routing import ProtocolTypeRouter, URLRouter
+from channels.security.websocket import AllowedHostsOriginValidator
 from django.core.asgi import get_asgi_application
+from django.core.asgi import get_asgi_application
+from channels.routing import ProtocolTypeRouter
 
 os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'core.settings')
 
-application = get_asgi_application()
+#application = get_asgi_application()
+
+django_asgi_app = get_asgi_application()
+
+from chat.routing import websocket_urlpatterns
+
+application = ProtocolTypeRouter(
+    {
+        "http": django_asgi_app,
+        "websocket": AllowedHostsOriginValidator(
+            AuthMiddlewareStack(URLRouter(websocket_urlpatterns))
+        ),
+    }
+)

core/core/settings.py

@@ -25,16 +25,19 @@ SECRET_KEY = 'django-insecure-#+s307$rxkts=8@+_^i)8)n1b4*y4za1xz!mvv(h@!+n9!mp9)
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True
 
-ALLOWED_HOSTS = ['127.0.0.1', 'localhost', '*']
+ALLOWED_HOSTS = ['127.0.0.1', 'localhost', '*', '172.22.10.111']
 
 
 # Application definition
 
 INSTALLED_APPS = [
+    'daphne',
+    'chat',
     'library.apps.LibraryConfig',
     'homepage.apps.HomepageConfig',
     'components.apps.ComponentsConfig',
     'accounts.apps.AccountsConfig',
+    'play.apps.PlayConfig',
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
@@ -58,7 +61,7 @@ ROOT_URLCONF = 'core.urls'
 TEMPLATES = [
     {
         'BACKEND': 'django.template.backends.django.DjangoTemplates',
-        'DIRS': [],
+        'DIRS': [BASE_DIR / 'templates'],
         'APP_DIRS': True,
         'OPTIONS': {
             'context_processors': [
@@ -120,7 +123,7 @@ USE_TZ = True
 # https://docs.djangoproject.com/en/5.1/howto/static-files/
 
 STATIC_URL = '/static/'
-BASE_DIR='static'  #von ben8 hinzugefügt
+STATICFILES_DIRS = [BASE_DIR / 'static']
 
 # Default primary key field type
 # https://docs.djangoproject.com/en/5.1/ref/settings/#default-auto-field
@@ -128,3 +131,17 @@ BASE_DIR='static'  #von ben8 hinzugefügt
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
 
 LOGIN_URL = '/account/login/'
+
+# Daphne
+ASGI_APPLICATION = "core.asgi.application"
+
+# Channels
+ASGI_APPLICATION = "core.asgi.application"
+CHANNEL_LAYERS = {
+    "default": {
+        "BACKEND": "channels_redis.core.RedisChannelLayer",
+        "CONFIG": {
+            "hosts": [("127.0.0.1", 8000)],
+        },
+    },
+}

core/core/urls.py

@@ -16,12 +16,12 @@ Including another URLconf
 """
 from django.contrib import admin # type: ignore
 from django.urls import path, include
-from django.contrib.auth import login
 
 urlpatterns = [
     path('admin/', admin.site.urls),
     path('account/', include('accounts.urls')),
     path('', include('homepage.urls')),
-    path('play/', include('components.urls')),
+    path('play/', include('play.urls')),
-    path('library/', include('library.urls'),),
+    path('library/', include('library.urls')),
+    path('chat/', include('chat.urls')),
 ]

core/homepage/static/homepage/t-style.css

@@ -1,997 +0,0 @@
-/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
-@layer theme, base, components, utilities;
-@layer theme {
-  :root, :host {
-    --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-    'Noto Color Emoji';
-    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
-    monospace;
-    --color-red-500: oklch(0.637 0.237 25.331);
-    --color-red-600: oklch(0.577 0.245 27.325);
-    --color-yellow-500: oklch(0.795 0.184 86.047);
-    --color-green-500: oklch(0.723 0.219 149.579);
-    --color-blue-100: oklch(0.932 0.032 255.585);
-    --color-blue-400: oklch(0.707 0.165 254.624);
-    --color-blue-500: oklch(0.623 0.214 259.815);
-    --color-blue-600: oklch(0.546 0.245 262.881);
-    --color-indigo-500: oklch(0.585 0.233 277.117);
-    --color-indigo-600: oklch(0.511 0.262 276.966);
-    --color-purple-500: oklch(0.627 0.265 303.9);
-    --color-gray-200: oklch(0.928 0.006 264.531);
-    --color-gray-500: oklch(0.551 0.027 264.364);
-    --color-gray-600: oklch(0.446 0.03 256.802);
-    --color-gray-900: oklch(0.21 0.034 264.665);
-    --color-stone-900: oklch(0.216 0.006 56.043);
-    --color-white: #fff;
-    --spacing: 0.25rem;
-    --breakpoint-lg: 64rem;
-    --container-md: 28rem;
-    --text-sm: 0.875rem;
-    --text-sm--line-height: calc(1.25 / 0.875);
-    --text-lg: 1.125rem;
-    --text-lg--line-height: calc(1.75 / 1.125);
-    --text-xl: 1.25rem;
-    --text-xl--line-height: calc(1.75 / 1.25);
-    --text-2xl: 1.5rem;
-    --text-2xl--line-height: calc(2 / 1.5);
-    --text-6xl: 3.75rem;
-    --text-6xl--line-height: 1;
-    --text-8xl: 6rem;
-    --text-8xl--line-height: 1;
-    --font-weight-extralight: 200;
-    --font-weight-light: 300;
-    --font-weight-semibold: 600;
-    --font-weight-bold: 700;
-    --font-weight-extrabold: 800;
-    --font-weight-black: 900;
-    --radius-sm: 0.25rem;
-    --radius-md: 0.375rem;
-    --radius-lg: 0.5rem;
-    --radius-xl: 0.75rem;
-    --default-transition-duration: 150ms;
-    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    --default-font-family: var(--font-sans);
-    --default-font-feature-settings: var(--font-sans--font-feature-settings);
-    --default-font-variation-settings: var(--font-sans--font-variation-settings);
-    --default-mono-font-family: var(--font-mono);
-    --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
-    --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
-  }
-}
-@layer base {
-  *, ::after, ::before, ::backdrop, ::file-selector-button {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    border: 0 solid;
-  }
-  html, :host {
-    line-height: 1.5;
-    -webkit-text-size-adjust: 100%;
-    tab-size: 4;
-    font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' );
-    font-feature-settings: var(--default-font-feature-settings, normal);
-    font-variation-settings: var(--default-font-variation-settings, normal);
-    -webkit-tap-highlight-color: transparent;
-  }
-  body {
-    line-height: inherit;
-  }
-  hr {
-    height: 0;
-    color: inherit;
-    border-top-width: 1px;
-  }
-  abbr:where([title]) {
-    -webkit-text-decoration: underline dotted;
-    text-decoration: underline dotted;
-  }
-  h1, h2, h3, h4, h5, h6 {
-    font-size: inherit;
-    font-weight: inherit;
-  }
-  a {
-    color: inherit;
-    -webkit-text-decoration: inherit;
-    text-decoration: inherit;
-  }
-  b, strong {
-    font-weight: bolder;
-  }
-  code, kbd, samp, pre {
-    font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace );
-    font-feature-settings: var(--default-mono-font-feature-settings, normal);
-    font-variation-settings: var(--default-mono-font-variation-settings, normal);
-    font-size: 1em;
-  }
-  small {
-    font-size: 80%;
-  }
-  sub, sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-  sub {
-    bottom: -0.25em;
-  }
-  sup {
-    top: -0.5em;
-  }
-  table {
-    text-indent: 0;
-    border-color: inherit;
-    border-collapse: collapse;
-  }
-  :-moz-focusring {
-    outline: auto;
-  }
-  progress {
-    vertical-align: baseline;
-  }
-  summary {
-    display: list-item;
-  }
-  ol, ul, menu {
-    list-style: none;
-  }
-  img, svg, video, canvas, audio, iframe, embed, object {
-    display: block;
-    vertical-align: middle;
-  }
-  img, video {
-    max-width: 100%;
-    height: auto;
-  }
-  button, input, select, optgroup, textarea, ::file-selector-button {
-    font: inherit;
-    font-feature-settings: inherit;
-    font-variation-settings: inherit;
-    letter-spacing: inherit;
-    color: inherit;
-    border-radius: 0;
-    background-color: transparent;
-    opacity: 1;
-  }
-  :where(select:is([multiple], [size])) optgroup {
-    font-weight: bolder;
-  }
-  :where(select:is([multiple], [size])) optgroup option {
-    padding-inline-start: 20px;
-  }
-  ::file-selector-button {
-    margin-inline-end: 4px;
-  }
-  ::placeholder {
-    opacity: 1;
-    color: color-mix(in oklab, currentColor 50%, transparent);
-  }
-  textarea {
-    resize: vertical;
-  }
-  ::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-  ::-webkit-date-and-time-value {
-    min-height: 1lh;
-    text-align: inherit;
-  }
-  ::-webkit-datetime-edit {
-    display: inline-flex;
-  }
-  ::-webkit-datetime-edit-fields-wrapper {
-    padding: 0;
-  }
-  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
-    padding-block: 0;
-  }
-  :-moz-ui-invalid {
-    box-shadow: none;
-  }
-  button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
-    appearance: button;
-  }
-  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
-    height: auto;
-  }
-  [hidden]:where(:not([hidden='until-found'])) {
-    display: none !important;
-  }
-}
-@layer utilities {
-  .absolute {
-    position: absolute;
-  }
-  .static {
-    position: static;
-  }
-  .top-0 {
-    top: calc(var(--spacing) * 0);
-  }
-  .right-0 {
-    right: calc(var(--spacing) * 0);
-  }
-  .bottom-0 {
-    bottom: calc(var(--spacing) * 0);
-  }
-  .-z-1 {
-    z-index: calc(1 * -1);
-  }
-  .-z-50 {
-    z-index: calc(50 * -1);
-  }
-  .z-40 {
-    z-index: 40;
-  }
-  .m-0 {
-    margin: calc(var(--spacing) * 0);
-  }
-  .m-0\.75 {
-    margin: calc(var(--spacing) * 0.75);
-  }
-  .m-2 {
-    margin: calc(var(--spacing) * 2);
-  }
-  .m-4 {
-    margin: calc(var(--spacing) * 4);
-  }
-  .mx-auto {
-    margin-inline: auto;
-  }
-  .mt-1 {
-    margin-top: calc(var(--spacing) * 1);
-  }
-  .mt-2 {
-    margin-top: calc(var(--spacing) * 2);
-  }
-  .mt-3 {
-    margin-top: calc(var(--spacing) * 3);
-  }
-  .mt-4 {
-    margin-top: calc(var(--spacing) * 4);
-  }
-  .mt-8 {
-    margin-top: calc(var(--spacing) * 8);
-  }
-  .mr-0\.75 {
-    margin-right: calc(var(--spacing) * 0.75);
-  }
-  .mb-6 {
-    margin-bottom: calc(var(--spacing) * 6);
-  }
-  .ml-0\.75 {
-    margin-left: calc(var(--spacing) * 0.75);
-  }
-  .block {
-    display: block;
-  }
-  .flex {
-    display: flex;
-  }
-  .grid {
-    display: grid;
-  }
-  .hidden {
-    display: none;
-  }
-  .h-12 {
-    height: calc(var(--spacing) * 12);
-  }
-  .h-20 {
-    height: calc(var(--spacing) * 20);
-  }
-  .h-120 {
-    height: calc(var(--spacing) * 120);
-  }
-  .h-150 {
-    height: calc(var(--spacing) * 150);
-  }
-  .h-full {
-    height: 100%;
-  }
-  .w-full {
-    width: 100%;
-  }
-  .max-w-screen-lg {
-    max-width: var(--breakpoint-lg);
-  }
-  .grid-cols-1 {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-  }
-  .grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-  .place-content-center {
-    place-content: center;
-  }
-  .place-items-stretch {
-    place-items: stretch;
-  }
-  .items-center {
-    align-items: center;
-  }
-  .justify-around {
-    justify-content: space-around;
-  }
-  .justify-between {
-    justify-content: space-between;
-  }
-  .justify-center {
-    justify-content: center;
-  }
-  .justify-end {
-    justify-content: flex-end;
-  }
-  .gap-2 {
-    gap: calc(var(--spacing) * 2);
-  }
-  .gap-4 {
-    gap: calc(var(--spacing) * 4);
-  }
-  .space-y-4 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
-  .space-x-2 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
-  .space-x-4 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
-  .overflow-hidden {
-    overflow: hidden;
-  }
-  .overflow-x-auto {
-    overflow-x: auto;
-  }
-  .rounded-full {
-    border-radius: calc(infinity * 1px);
-  }
-  .rounded-lg {
-    border-radius: var(--radius-lg);
-  }
-  .rounded-md {
-    border-radius: var(--radius-md);
-  }
-  .rounded-sm {
-    border-radius: var(--radius-sm);
-  }
-  .rounded-xl {
-    border-radius: var(--radius-xl);
-  }
-  .border-2 {
-    border-style: var(--tw-border-style);
-    border-width: 2px;
-  }
-  .border-3 {
-    border-style: var(--tw-border-style);
-    border-width: 3px;
-  }
-  .border-4 {
-    border-style: var(--tw-border-style);
-    border-width: 4px;
-  }
-  .border-blue-100 {
-    border-color: var(--color-blue-100);
-  }
-  .border-blue-600 {
-    border-color: var(--color-blue-600);
-  }
-  .border-gray-500 {
-    border-color: var(--color-gray-500);
-  }
-  .bg-blue-100 {
-    background-color: var(--color-blue-100);
-  }
-  .bg-blue-400 {
-    background-color: var(--color-blue-400);
-  }
-  .bg-blue-500 {
-    background-color: var(--color-blue-500);
-  }
-  .bg-blue-600 {
-    background-color: var(--color-blue-600);
-  }
-  .bg-gray-200 {
-    background-color: var(--color-gray-200);
-  }
-  .bg-gray-500 {
-    background-color: var(--color-gray-500);
-  }
-  .bg-green-500 {
-    background-color: var(--color-green-500);
-  }
-  .bg-indigo-500 {
-    background-color: var(--color-indigo-500);
-  }
-  .bg-purple-500 {
-    background-color: var(--color-purple-500);
-  }
-  .bg-red-500 {
-    background-color: var(--color-red-500);
-  }
-  .bg-red-600 {
-    background-color: var(--color-red-600);
-  }
-  .bg-white {
-    background-color: var(--color-white);
-  }
-  .bg-yellow-500 {
-    background-color: var(--color-yellow-500);
-  }
-  .object-cover {
-    object-fit: cover;
-  }
-  .p-0\.75 {
-    padding: calc(var(--spacing) * 0.75);
-  }
-  .p-2 {
-    padding: calc(var(--spacing) * 2);
-  }
-  .p-3 {
-    padding: calc(var(--spacing) * 3);
-  }
-  .p-4 {
-    padding: calc(var(--spacing) * 4);
-  }
-  .px-1 {
-    padding-inline: calc(var(--spacing) * 1);
-  }
-  .px-4 {
-    padding-inline: calc(var(--spacing) * 4);
-  }
-  .py-2 {
-    padding-block: calc(var(--spacing) * 2);
-  }
-  .pb-4 {
-    padding-bottom: calc(var(--spacing) * 4);
-  }
-  .text-center {
-    text-align: center;
-  }
-  .text-2xl {
-    font-size: var(--text-2xl);
-    line-height: var(--tw-leading, var(--text-2xl--line-height));
-  }
-  .text-6xl {
-    font-size: var(--text-6xl);
-    line-height: var(--tw-leading, var(--text-6xl--line-height));
-  }
-  .text-lg {
-    font-size: var(--text-lg);
-    line-height: var(--tw-leading, var(--text-lg--line-height));
-  }
-  .text-sm {
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-  }
-  .text-xl {
-    font-size: var(--text-xl);
-    line-height: var(--tw-leading, var(--text-xl--line-height));
-  }
-  .text-\[clamp\(0\.3rem\,5vw\,1rem\)\] {
-    font-size: clamp(0.3rem, 5vw, 1rem);
-  }
-  .text-\[clamp\(0\.6rem\,5vw\,1rem\)\] {
-    font-size: clamp(0.6rem, 5vw, 1rem);
-  }
-  .text-\[clamp\(0\.55rem\,5vw\,1\.5rem\)\] {
-    font-size: clamp(0.55rem, 5vw, 1.5rem);
-  }
-  .text-\[clamp\(0\.75rem\,5vw\,1\.5rem\)\] {
-    font-size: clamp(0.75rem, 5vw, 1.5rem);
-  }
-  .text-\[clamp\(0\.75rem\,5vw\,1\.25rem\)\] {
-    font-size: clamp(0.75rem, 5vw, 1.25rem);
-  }
-  .font-black {
-    --tw-font-weight: var(--font-weight-black);
-    font-weight: var(--font-weight-black);
-  }
-  .font-bold {
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
-  }
-  .font-extralight {
-    --tw-font-weight: var(--font-weight-extralight);
-    font-weight: var(--font-weight-extralight);
-  }
-  .font-light {
-    --tw-font-weight: var(--font-weight-light);
-    font-weight: var(--font-weight-light);
-  }
-  .font-semibold {
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-  }
-  .break-words {
-    overflow-wrap: break-word;
-  }
-  .text-blue-600 {
-    color: var(--color-blue-600);
-  }
-  .text-gray-600 {
-    color: var(--color-gray-600);
-  }
-  .text-red-600 {
-    color: var(--color-red-600);
-  }
-  .text-stone-900 {
-    color: var(--color-stone-900);
-  }
-  .text-white {
-    color: var(--color-white);
-  }
-  .italic {
-    font-style: italic;
-  }
-  .shadow-\[0_2px_2px_rgba\(0\,0\,0\,0\.1\)\] {
-    --tw-shadow: 0 2px 2px var(--tw-shadow-color, rgba(0,0,0,0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .shadow-md {
-    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .filter {
-    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-  }
-  .transition {
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-  .duration-200 {
-    --tw-duration: 200ms;
-    transition-duration: 200ms;
-  }
-  .hover\:scale-105 {
-    &:hover {
-      @media (hover: hover) {
-        --tw-scale-x: 105%;
-        --tw-scale-y: 105%;
-        --tw-scale-z: 105%;
-        scale: var(--tw-scale-x) var(--tw-scale-y);
-      }
-    }
-  }
-  .hover\:scale-110 {
-    &:hover {
-      @media (hover: hover) {
-        --tw-scale-x: 110%;
-        --tw-scale-y: 110%;
-        --tw-scale-z: 110%;
-        scale: var(--tw-scale-x) var(--tw-scale-y);
-      }
-    }
-  }
-  .focus\:scale-105 {
-    &:focus {
-      --tw-scale-x: 105%;
-      --tw-scale-y: 105%;
-      --tw-scale-z: 105%;
-      scale: var(--tw-scale-x) var(--tw-scale-y);
-    }
-  }
-  .sm\:grid-cols-3 {
-    @media (width >= 40rem) {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-  }
-  .sm\:px-6 {
-    @media (width >= 40rem) {
-      padding-inline: calc(var(--spacing) * 6);
-    }
-  }
-  .sm\:text-2xl {
-    @media (width >= 40rem) {
-      font-size: var(--text-2xl);
-      line-height: var(--tw-leading, var(--text-2xl--line-height));
-    }
-  }
-  .md\:mb-8 {
-    @media (width >= 48rem) {
-      margin-bottom: calc(var(--spacing) * 8);
-    }
-  }
-  .md\:h-screen {
-    @media (width >= 48rem) {
-      height: 100vh;
-    }
-  }
-  .md\:grid-cols-2 {
-    @media (width >= 48rem) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
-  .md\:text-8xl {
-    @media (width >= 48rem) {
-      font-size: var(--text-8xl);
-      line-height: var(--tw-leading, var(--text-8xl--line-height));
-    }
-  }
-  .lg\:grid-cols-3 {
-    @media (width >= 64rem) {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-  }
-  .lg\:px-8 {
-    @media (width >= 64rem) {
-      padding-inline: calc(var(--spacing) * 8);
-    }
-  }
-  .dark\:bg-gray-900 {
-    @media (prefers-color-scheme: dark) {
-      background-color: var(--color-gray-900);
-    }
-  }
-}
-nav div ul.qp-nav-list li {
-  color: var(--color-white);
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
-  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-  transition-duration: var(--tw-duration, var(--default-transition-duration));
-  --tw-duration: 200ms;
-  transition-duration: 200ms;
-  &:hover {
-    @media (hover: hover) {
-      --tw-scale-x: 110%;
-      --tw-scale-y: 110%;
-      --tw-scale-z: 110%;
-      scale: var(--tw-scale-x) var(--tw-scale-y);
-    }
-  }
-  &:hover {
-    @media (hover: hover) {
-      border-bottom-style: var(--tw-border-style);
-      border-bottom-width: 2px;
-    }
-  }
-  &:hover {
-    @media (hover: hover) {
-      border-color: var(--color-white);
-    }
-  }
-}
-a.qp-a-button {
-  border-radius: var(--radius-md);
-  padding: calc(var(--spacing) * 6);
-  --tw-font-weight: var(--font-weight-extrabold);
-  font-weight: var(--font-weight-extrabold);
-  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
-  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-  transition-duration: var(--tw-duration, var(--default-transition-duration));
-  --tw-duration: 300ms;
-  transition-duration: 300ms;
-  &:hover {
-    @media (hover: hover) {
-      --tw-scale-x: 105%;
-      --tw-scale-y: 105%;
-      --tw-scale-z: 105%;
-      scale: var(--tw-scale-x) var(--tw-scale-y);
-    }
-  }
-}
-.register input {
-  border-radius: calc(infinity * 1px);
-  background-color: var(--color-gray-200);
-  padding: calc(var(--spacing) * 3);
-  --tw-font-weight: var(--font-weight-black);
-  font-weight: var(--font-weight-black);
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
-  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-  transition-duration: var(--tw-duration, var(--default-transition-duration));
-  --tw-duration: 200ms;
-  transition-duration: 200ms;
-  &:focus {
-    --tw-scale-x: 105%;
-    --tw-scale-y: 105%;
-    --tw-scale-z: 105%;
-    scale: var(--tw-scale-x) var(--tw-scale-y);
-  }
-}
-.input-group {
-  margin-inline: auto;
-  display: flex;
-  max-width: var(--container-md);
-  flex-direction: column;
-  gap: calc(var(--spacing) * 4);
-  border-radius: var(--radius-xl);
-  background-color: var(--color-white);
-  padding: calc(var(--spacing) * 6);
-  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-}
-.input-group form {
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--spacing) * 4);
-}
-.input-group form p {
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--spacing) * 2);
-}
-.input-group form p label {
-  font-size: var(--text-sm);
-  line-height: var(--tw-leading, var(--text-sm--line-height));
-  --tw-font-weight: var(--font-weight-semibold);
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-gray-900);
-}
-.input-group form p input {
-  border-radius: calc(infinity * 1px);
-  background-color: var(--color-gray-200);
-  padding: calc(var(--spacing) * 3);
-  --tw-font-weight: var(--font-weight-black);
-  font-weight: var(--font-weight-black);
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
-  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-  transition-duration: var(--tw-duration, var(--default-transition-duration));
-  --tw-duration: 200ms;
-  transition-duration: 200ms;
-  &:focus {
-    --tw-scale-x: 105%;
-    --tw-scale-y: 105%;
-    --tw-scale-z: 105%;
-    scale: var(--tw-scale-x) var(--tw-scale-y);
-  }
-  &:focus {
-    background-color: var(--color-blue-100);
-  }
-  &:focus {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  &:focus {
-    --tw-ring-color: var(--color-blue-400);
-  }
-  &:focus {
-    --tw-outline-style: none;
-    outline-style: none;
-  }
-}
-.input-group form p select {
-  border-radius: var(--radius-md);
-  background-color: var(--color-gray-200);
-  padding: calc(var(--spacing) * 3);
-  --tw-font-weight: var(--font-weight-black);
-  font-weight: var(--font-weight-black);
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
-  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-  transition-duration: var(--tw-duration, var(--default-transition-duration));
-  --tw-duration: 200ms;
-  transition-duration: 200ms;
-  &:focus {
-    --tw-scale-x: 105%;
-    --tw-scale-y: 105%;
-    --tw-scale-z: 105%;
-    scale: var(--tw-scale-x) var(--tw-scale-y);
-  }
-  &:focus {
-    background-color: var(--color-blue-100);
-  }
-  &:focus {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  &:focus {
-    --tw-ring-color: var(--color-blue-400);
-  }
-  &:focus {
-    --tw-outline-style: none;
-    outline-style: none;
-  }
-}
-.input-group form p textarea {
-  min-height: 100px;
-  border-radius: var(--radius-xl);
-  background-color: var(--color-gray-200);
-  padding: calc(var(--spacing) * 3);
-  --tw-font-weight: var(--font-weight-black);
-  font-weight: var(--font-weight-black);
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
-  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-  transition-duration: var(--tw-duration, var(--default-transition-duration));
-  --tw-duration: 200ms;
-  transition-duration: 200ms;
-  &:focus {
-    --tw-scale-x: 105%;
-    --tw-scale-y: 105%;
-    --tw-scale-z: 105%;
-    scale: var(--tw-scale-x) var(--tw-scale-y);
-  }
-  &:focus {
-    background-color: var(--color-blue-100);
-  }
-  &:focus {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  &:focus {
-    --tw-ring-color: var(--color-blue-400);
-  }
-  &:focus {
-    --tw-outline-style: none;
-    outline-style: none;
-  }
-}
-.input-group form p button {
-  border-radius: calc(infinity * 1px);
-  background-color: var(--color-indigo-500);
-  padding: calc(var(--spacing) * 3);
-  --tw-font-weight: var(--font-weight-black);
-  font-weight: var(--font-weight-black);
-  color: var(--color-white);
-  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
-  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-  transition-duration: var(--tw-duration, var(--default-transition-duration));
-  --tw-duration: 200ms;
-  transition-duration: 200ms;
-  &:hover {
-    @media (hover: hover) {
-      background-color: var(--color-indigo-600);
-    }
-  }
-  &:hover {
-    @media (hover: hover) {
-      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
-  &:focus {
-    --tw-scale-x: 105%;
-    --tw-scale-y: 105%;
-    --tw-scale-z: 105%;
-    scale: var(--tw-scale-x) var(--tw-scale-y);
-  }
-}
-@property --tw-space-y-reverse {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-space-x-reverse {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-inset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-inset-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ring-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-inset-ring-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-inset-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-ring-inset {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ring-offset-width {
-  syntax: "<length>";
-  inherits: false;
-  initial-value: 0px;
-}
-@property --tw-ring-offset-color {
-  syntax: "*";
-  inherits: false;
-  initial-value: #fff;
-}
-@property --tw-ring-offset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-blur {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-brightness {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-contrast {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-grayscale {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-hue-rotate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-invert {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-opacity {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-saturate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-sepia {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-drop-shadow {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-duration {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-scale-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-@property --tw-scale-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-@property --tw-scale-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}

core/homepage/templates/homepage/base.html

@@ -1,15 +0,0 @@
-{% load static %}
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="{% static 'homepage/t-style.css' %}">
-    <title>qivip</title>
-</head>
-<body>
-    {% include 'homepage/partials/_nav.html' %}
-    {% block content%}{% endblock %}
-    {% include 'homepage/partials/_footer.html' %}
-</body>
-</html>

core/homepage/templates/homepage/partials/_footer.html

@@ -1,7 +0,0 @@
-<div class="grid place-content-center gap-2 w-full mt-4">
-    <div class="flex space-x-2 pb-4">
-        <p class="text-sm font-extralight"><a href="#">Impressum</a></p>
-        <p class="text-sm font-extralight"><a href="#">Datenschutz</a></p>
-        <p class="text-sm font-extralight"><a href="#">Repository</a></p>
-    </div>
-</div>

core/homepage/urls.py

@@ -5,4 +5,6 @@ app_name = 'homepage' # Verhindert Konflikt mit anderen Apps
 
 urlpatterns = [
     path('', views.home, name="home"),
+    path('impress', views.impress, name="impress"),
+    path('privacy', views.privacy, name="privacy"),
 ]

core/homepage/views.py

@@ -2,3 +2,8 @@ from django.shortcuts import render, redirect
 
 def home(request):
     return render(request, 'homepage/home.html')
+
+def impress(request):
+    return render(request, 'homepage/impress.html')
+def privacy(request):
+    return render(request, 'homepage/privacy.html')

core/library/forms.py

@@ -4,7 +4,7 @@ from .models import QivipQuiz, QivipQuestion
 class QuizForm(forms.ModelForm):
     class Meta:
         model = QivipQuiz
-        fields = ['name', 'description', 'status', 'category', 'tags']
+        fields = ['name', 'description', 'status', 'category', 'tags',"difficulty"]
 
 class QuestionForm(forms.ModelForm):
     class Meta:

core/library/migrations/0002_alter_qivipquiz_status.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.3 on 2025-03-08 13:14
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='qivipquiz',
+            name='status',
+            field=models.CharField(choices=[('public', 'Öffentlich'), ('hidden', 'Versteckt'), ('private', 'Privat')], default='private', max_length=10),
+        ),
+    ]

core/library/migrations/0003_alter_qivipquiz_status.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.3 on 2025-03-08 13:16
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0002_alter_qivipquiz_status'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='qivipquiz',
+            name='status',
+            field=models.CharField(choices=[('public', 'Öffentlich'), ('hidden', 'Versteckt'), ('private', 'Privat')], default='Privat', max_length=10),
+        ),
+    ]

core/library/migrations/0004_alter_qivipquiz_status.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.3 on 2025-03-08 13:18
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0003_alter_qivipquiz_status'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='qivipquiz',
+            name='status',
+            field=models.CharField(choices=[('public', 'Öffentlich'), ('hidden', 'Versteckt'), ('private', 'Privat')], default='private', max_length=10),
+        ),
+    ]

core/library/migrations/0005_alter_qivipquiz_status.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.3 on 2025-03-08 13:23
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0004_alter_qivipquiz_status'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='qivipquiz',
+            name='status',
+            field=models.CharField(choices=[('public', 'Öffentlich'), ('hidden', 'Versteckt'), ('private', 'Privat')], default='public', max_length=10),
+        ),
+    ]

core/library/migrations/0006_alter_qivipquiz_description.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.3 on 2025-03-08 13:30
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0005_alter_qivipquiz_status'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='qivipquiz',
+            name='description',
+            field=models.TextField(blank=True, default='In dem Quiz geht es um ...', null=True),
+        ),
+    ]

core/library/migrations/0007_alter_qivipquiz_description.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.3 on 2025-03-08 13:31
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0006_alter_qivipquiz_description'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='qivipquiz',
+            name='description',
+            field=models.TextField(blank=True, default='Das Quiz ist ein ... Quiz. In dem Quiz geht es um ...', null=True),
+        ),
+    ]

core/library/migrations/0008_alter_qivipquiz_description.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.3 on 2025-03-08 13:32
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0007_alter_qivipquiz_description'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='qivipquiz',
+            name='description',
+            field=models.TextField(blank=True, default='Das Quiz ist ein ... Quiz. \n In dem Quiz geht es um ...', null=True),
+        ),
+    ]

core/library/migrations/0009_alter_qivipquiz_description.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.3 on 2025-03-08 13:32
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0008_alter_qivipquiz_description'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='qivipquiz',
+            name='description',
+            field=models.TextField(blank=True, default='Das Quiz ist ein ... Quiz. \nIn dem Quiz geht es um ...', null=True),
+        ),
+    ]

core/library/migrations/0010_alter_qivipquiz_description.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.3 on 2025-03-08 13:33
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0009_alter_qivipquiz_description'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='qivipquiz',
+            name='description',
+            field=models.TextField(blank=True, default='In dem Quiz geht es um ...', null=True),
+        ),
+    ]

core/library/migrations/0011_qivipquiz_difficulty.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.3 on 2025-03-08 13:37
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0010_alter_qivipquiz_description'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='qivipquiz',
+            name='difficulty',
+            field=models.CharField(choices=[('public', 'Öffentlich'), ('hidden', 'Versteckt'), ('private', 'Privat')], default='public', max_length=10),
+        ),
+    ]

core/library/migrations/0012_alter_qivipquiz_difficulty.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.3 on 2025-03-08 13:39
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0011_qivipquiz_difficulty'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='qivipquiz',
+            name='difficulty',
+            field=models.CharField(choices=[('public', 'Öffentlich'), ('hidden', 'Versteckt'), ('private', 'Privat')], default='not defined', max_length=10),
+        ),
+    ]

core/library/migrations/0013_alter_qivipquiz_difficulty.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.3 on 2025-03-08 13:40
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0012_alter_qivipquiz_difficulty'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='qivipquiz',
+            name='difficulty',
+            field=models.CharField(choices=[('1', '1'), ('2', '2'), ('3', '3'), ('4', '4'), ('5', '5'), ('not defined', 'nicht gesetzt')], default='not defined', max_length=11),
+        ),
+    ]

core/library/migrations/0014_alter_qivipquiz_difficulty.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.3 on 2025-03-08 13:43
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0013_alter_qivipquiz_difficulty'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='qivipquiz',
+            name='difficulty',
+            field=models.CharField(choices=[('1', '1'), ('2', '2'), ('3', '3'), ('4', '4'), ('5', '5'), ('not defined', 'nicht gesetzt')], default='not defined', help_text='1: niedrigste Schwierigkeit, 2: höchste Schwierigkeit', max_length=11),
+        ),
+    ]

core/library/migrations/0015_alter_qivipquiz_difficulty.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.3 on 2025-03-08 13:44
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0014_alter_qivipquiz_difficulty'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='qivipquiz',
+            name='difficulty',
+            field=models.CharField(choices=[('1', '1'), ('2', '2'), ('3', '3'), ('4', '4'), ('5', '5'), ('not defined', 'nicht gesetzt')], default='not defined', help_text='1: niedrigste Schwierigkeit und 5: höchste Schwierigkeit', max_length=11),
+        ),
+    ]

core/library/models.py

@@ -9,16 +9,26 @@ class QivipQuiz(models.Model):
         "hidden": "Versteckt",
         "private": "Privat",
     }
+    DIFFICULTY_VALUES = {
+        "1": "1",
+        "2": "2",
+        "3": "3",
+        "4": "4",
+        "5": "5",
+        "not defined":"nicht gesetzt",
+
+    }
 
     uuid = models.UUIDField(default=uuid.uuid4, editable=False, unique=True)
     user_id = models.ForeignKey(User, on_delete=models.CASCADE, related_name='quiz')
     creation_date = models.DateTimeField(auto_now_add=True)
     update_date = models.DateTimeField(auto_now=True)
-    status = models.CharField(max_length=10, choices=STATUS_VALUES.items())
+    status = models.CharField(max_length=10, choices=list(STATUS_VALUES.items()), default="public")
     category = models.ForeignKey('QuizCategory', related_name='quiz', on_delete=models.CASCADE)
     tags = models.ManyToManyField('Tag', blank=True)
     name = models.CharField(max_length=255)
-    description = models.TextField(blank=True, null=True)
+    description = models.TextField(blank=True, null=True, default="In dem Quiz geht es um ...")
+    difficulty= models.CharField(max_length=11, choices=list(DIFFICULTY_VALUES.items()), default="not defined", help_text="1: niedrigste Schwierigkeit und 5: höchste Schwierigkeit")
 
     def __str__(self):
         return self.name

core/library/templates/library/base.html

@@ -1,17 +0,0 @@
-{% load static %}
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="{% static 'homepage/t-style.css' %}">
-    <title>qivip</title>
-</head>
-<body>
-    {% include 'homepage/partials/_nav.html' %}
-    <div class="max-w-screen-lg mx-auto">
-        {% block content%}{% endblock %}
-    </div>
-    {% include 'homepage/partials/_footer.html' %}
-</body>
-</html>

core/library/templates/library/delete_confirmation.html

@@ -1,11 +0,0 @@
-{% extends 'library/base.html' %}
-
-{% block content %}
-<h1>Löschen</h1>
-<p>Soll das Quiz "{{ object.name }}" wirklich gelöscht werden?</p>
-<form method="post">
-    {% csrf_token %}
-    <button type="submit">Löschen</button>
-    <a href="{% url 'library:overview_quiz' %}">Abbrechen</a>
-</form>
-{% endblock %}

core/library/templates/library/detail_quiz.html

@@ -1,19 +0,0 @@
-{% extends 'library/base.html' %}
-
-{% block content %}
-<h1>{{ quiz.name }}</h1>
-<p>{{ quiz.description }}</p>
-<a href="{% url 'library:edit_quiz' quiz.id %}">Bearbeiten</a>
-<a href="{% url 'library:delete_quiz' quiz.id %}">Löschen</a>
-
-<h2>Fragen</h2>
-<ul>
-    <a href="{% url 'library:new_question' %}">Neue Frage erstellen</a>
-    {% for question in questions %}
-    <li>{{ question.data }}</li>
-    <a href="{% url 'library:edit_question' question.id %}">Bearbeiten</a>
-    <a href="{% url 'library:delete_question' question.id %}">Löschen</a>
-    {% endfor %}
-</ul>
-
-{% endblock %}

core/library/templates/library/overview_quiz.html

@@ -1,19 +0,0 @@
-{% extends 'library/base.html' %}
-
-{% block content %}
-<h1>Übersicht</h1>
-<div class="flex justify-end">
-    <a href="{% url 'library:new_quiz' %}" class="bg-blue-500 text-white px-4 py-2 rounded-md">Neues Quiz erstellen</a>
-</div>
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-    {% for quiz in quizzes %}
-    <div class="bg-white rounded-lg p-4 shadow-md">
-        <h2 class="text-lg font-bold"><a href="{% url 'library:detail_quiz' quiz.id %}">{{ quiz.name }}</a></h2>
-        <p class="text-sm text-gray-600">{{ quiz.description }}</p>
-        <a href="#">Spiel starten</a>
-        <a href="{% url 'library:edit_quiz' quiz.id %}">Bearbeiten</a>
-        <a href="{% url 'library:delete_quiz' quiz.id %}">Löschen</a>
-    </div>
-    {% endfor %}
-</div>
-{% endblock %}

core/library/views.py

@@ -1,8 +1,11 @@
 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
+from django.urls import reverse
+from django.contrib import messages
 from .models import QivipQuiz, QivipQuestion
 from .forms import QuizForm, QuestionForm
+import json
 
 # Übersicht aller Quizze
 @login_required
@@ -52,47 +55,240 @@ def delete_quiz(request, pk):
 def detail_quiz(request, pk):
     quiz = get_object_or_404(QivipQuiz, pk=pk, user_id=request.user)
     questions = QivipQuestion.objects.filter(quiz_id=quiz)
-    return render(request, 'library/detail_quiz.html', {'quiz': quiz, 'questions': questions})
+    
+    # Parse JSON data for each question
+    for question in questions:
+        if question.data:
+            question.data = json.loads(question.data)
+    
+    context = {
+        'quiz': quiz,
+        'questions': questions
+    }
+    return render(request, 'library/detail_quiz.html', context)
 
 # Übersicht aller Fragen
 @login_required
 def question_list(request):
     questions = QivipQuestion.objects.filter(quiz_id__user_id=request.user)
+    
+    # Parse JSON data for each question
+    for question in questions:
+        if question.data:
+            question.data = json.loads(question.data)
+    
     return render(request, 'library/question_list.html', {'questions': questions})
 
 # Neue Frage erstellen
 @login_required 
 def new_question(request):
+    question_type = request.GET.get('type')
+    quiz_id = request.GET.get('quiz_id')
+    
+    if not quiz_id:
+        messages.error(request, 'Quiz ID muss angegeben werden.')
+        return redirect('library:overview_quiz')
+        
+    try:
+        quiz = QivipQuiz.objects.get(pk=quiz_id, user_id=request.user)
+    except QivipQuiz.DoesNotExist:
+        messages.error(request, 'Quiz nicht gefunden oder keine Berechtigung.')
+        return redirect('library:overview_quiz')
+    
+    if question_type not in ['multiple_choice', 'true_false']:
+        base_url = reverse('library:new_question')
+        return redirect(f'{base_url}?type=multiple_choice&quiz_id={quiz_id}')
+        
     if request.method == 'POST':
-        form = QuestionForm(request.POST)
+        question_text = request.POST.get('question', '')
-        if form.is_valid():
+        
-            question = form.save(commit=False)
+        # Handle different question types
-            # Prüfe ob der User Zugriff auf das Quiz hat
+        if question_type == 'true_false':
-            if question.quiz_id.user_id != request.user:
+            correct_answer = request.POST.get('correct_answer') == 'true'
-                return redirect('library:question_list')
+            json_data = {
+                'type': question_type,
+                'question': question_text,
+                'options': [
+                    {'value': 'Wahr', 'is_correct': correct_answer},
+                    {'value': 'Falsch', 'is_correct': not correct_answer}
+                ]
+            }
+        elif question_type == 'multiple_choice':
+            options = []
+            i = 1
+            # Limit to maximum 6 options
+            while request.POST.get(f'option_{i}') and i <= 6:
+                is_correct = request.POST.get(f'correct_{i}') == '1'
+                options.append({
+                    'order': i,
+                    'value': request.POST.get(f'option_{i}'),
+                    'is_correct': is_correct
+                })
+                i += 1
+                
+            # Validate minimum 2 options
+            if len(options) < 2:
+                messages.error(request, 'Mindestens zwei Optionen müssen angegeben werden.')
+                return redirect(request.get_full_path())
+                
+            json_data = {
+                'type': question_type,
+                'question': question_text,
+                'options': options
+            }
+        
+        question = QivipQuestion()
+        question.data = json.dumps(json_data)
+        question.quiz_id = quiz
         question.save()
-            return redirect('library:edit_question', pk=question.pk)
+        return redirect('library:detail_quiz', pk=quiz.pk)
     else:
-        form = QuestionForm()
+        # Initialize empty question data for new questions
-    return render(request, 'library/form.html', {'form': form})
+        if question_type == 'true_false':
+            question_data = {
+                'type': question_type,
+                'question': '',
+                'options': [
+                    {'value': 'Wahr', 'is_correct': True},
+                    {'value': 'Falsch', 'is_correct': False}
+                ]
+            }
+        elif question_type == 'multiple_choice':
+            question_data = {
+                'type': question_type,
+                'question': '',
+                'options': [
+                    {'value': '', 'is_correct': False},
+                    {'value': '', 'is_correct': False}
+                ]
+            }
+    
+    template_name = f'library/question/question_{question_type}.html'
+    context = {
+        'question': question_data,
+        'quiz_id': quiz_id,
+        'quiz': quiz
+    }
+    
+    return render(request, template_name, context)
 
 # Frage bearbeiten
 @login_required
 def edit_question(request, pk):
     question = get_object_or_404(QivipQuestion, pk=pk, quiz_id__user_id=request.user)
-    if request.method == 'POST':
+    if question.quiz_id.user_id != request.user:
-        form = QuestionForm(request.POST, instance=question)
+        return redirect('library:question_list')
-        if form.is_valid():
+    
-            form.save()
+    # Parse the existing JSON data
-            return redirect('library:edit_question', pk=pk)
+    try:
+        question_data = json.loads(question.data) if question.data else {}
+        question_type = question_data.get('type', 'multiple_choice')
+        
+        # For true/false questions, get the correct answer from the options
+        if question_type == 'true_false':
+            # Default to true if no options exist
+            correct_answer = True
+            if question_data.get('options'):
+                correct_answer = question_data['options'][0].get('is_correct', True)
+            question_data = {
+                'type': question_type,
+                'question': question_data.get('question', ''),
+                'correct_answer': correct_answer,  # Add this for template compatibility
+                'options': [
+                    {'value': 'Wahr', 'is_correct': correct_answer},
+                    {'value': 'Falsch', 'is_correct': not correct_answer}
+                ]
+            }
         else:
-        form = QuestionForm(instance=question)
+            # For multiple choice questions
-    return render(request, 'library/form.html', {'form': form})
+            question_data.setdefault('type', question_type)
+            question_data.setdefault('question', '')
+            question_data.setdefault('options', [])
+            
+    except (json.JSONDecodeError, AttributeError):
+        # Handle invalid JSON or None data
+        question_type = question_data.get('type', 'multiple_choice')
+        if question_type == 'true_false':
+            question_data = {
+                'type': question_type,
+                'question': '',
+                'correct_answer': True,  # Default to true for new questions
+                'options': [
+                    {'value': 'Wahr', 'is_correct': True},
+                    {'value': 'Falsch', 'is_correct': False}
+                ]
+            }
+        else:
+            question_data = {
+                'type': question_type,
+                'question': '',
+                'options': []
+            }
+        
+    if request.method == 'POST':
+        question_text = request.POST.get('question', '')
+        
+        # Handle different question types
+        if question_type == 'true_false':
+            correct_answer = request.POST.get('correct_answer') == 'true'
+            json_data = {
+                'type': question_type,
+                'question': question_text,
+                'options': [
+                    {'value': 'Wahr', 'is_correct': correct_answer},
+                    {'value': 'Falsch', 'is_correct': not correct_answer}
+                ]
+            }
+        elif question_type == 'multiple_choice':
+            options = []
+            i = 1
+            # Limit to maximum 6 options
+            while request.POST.get(f'option_{i}') and i <= 6:
+                options.append({
+                    'order': i,
+                    'value': request.POST.get(f'option_{i}'),
+                    'is_correct': request.POST.get(f'correct_{i}') == '1'
+                })
+                i += 1
+                
+            # Validate minimum 2 options
+            if len(options) < 2:
+                messages.error(request, 'Mindestens zwei Optionen müssen angegeben werden.')
+                return redirect(request.get_full_path())
+
+            # Validate maximum 6 options
+            if len(options) > 6:
+                messages.error(request, 'Maximal 6 Optionen sind erlaubt.')
+                return redirect(request.get_full_path())
+                
+            json_data = {
+                'type': question_type,
+                'question': question_text,
+                'options': options
+            }
+            
+        question.data = json.dumps(json_data)
+        question.save()
+        return redirect('library:detail_quiz', pk=question.quiz_id.pk)
+    else:
+        template_name = f'library/question/question_{question_type}.html'
+        context = {
+            'question': {'data': question_data},  # Wrap in data structure expected by template
+            'quiz_id': question.quiz_id.pk,
+            'quiz': question.quiz_id
+        }
+        
+        return render(request, template_name, context)
 
 # Frage löschen
 @login_required
 def delete_question(request, pk):
     question = get_object_or_404(QivipQuestion, pk=pk, quiz_id__user_id=request.user)
+    
+    # Parse JSON data for question
+    if question.data:
+        question.data = json.loads(question.data)
+    
     if request.method == 'POST':
         question.delete()
         return redirect('library:detail_quiz', pk=question.quiz_id.pk)

core/play/admin.py

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

core/play/apps.py

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

core/play/models.py

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

core/play/tests.py

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

core/play/urls.py

@@ -0,0 +1,9 @@
+from django.urls import path
+from . import views
+
+app_name = 'play'
+
+urlpatterns = [
+    path('lobby', views.lobby, name='lobby'),
+    path('join', views.join_game, name='join_game'),
+]

core/play/views.py

@@ -0,0 +1,8 @@
+from django.shortcuts import render
+
+# Create your views here.
+def lobby(request):
+    return render(request, 'play/lobby.html')
+
+def join_game(request):
+    return render(request, 'play/join_game.html')

core/static/css/t-input.css

@@ -1,5 +1,9 @@
 @import 'tailwindcss';
 
+qp-container {
+    @apply max-w-xl w-full mx-auto;
+}
+
 nav div ul.qp-nav-list li {
     @apply text-white hover:scale-110 hover:border-b-2 hover:border-white transition duration-200;
 }
@@ -7,7 +11,10 @@ nav div ul.qp-nav-list li {
 a.qp-a-button {
     @apply p-6 rounded-md font-extrabold hover:scale-105 transition duration-300 shadow-md;
 }
-.register input{@apply p-3 rounded-full bg-gray-200 focus:scale-105 transition duration-200 font-black;}
+a.qp-a-button-small {
+    @apply p-1 rounded-md hover:scale-105 transition duration-300 shadow-md;
+}
+.register input{@apply p-3 rounded-full bg-gray-200 focus:scale-105 transition duration-200 font-black w-full;}
 
 .input-group {
     @apply flex flex-col gap-4 max-w-md mx-auto p-6 bg-white rounded-xl shadow-lg;

core/templates/accounts/home.html

@@ -0,0 +1,25 @@
+{% extends 'base.html'%}
+{% block title %}Home{% endblock %}
+{% block content %}
+
+
+<div class="flex justify-center  items-center mt-12 ">
+<div class="input-group p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md">
+    <div class="grid place-content-center h-120">
+      
+        <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="bg-blue-600 text-white p-3 rounded-full font-black" type="submit">Abmelden</button>
+            </form>
+        </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>
+            </div>
+</div>
+</div>
+
+
+{% endblock %}

core/templates/accounts/login.html

@@ -1,13 +1,13 @@
-{% extends 'accounts/base.html' %}
+{% extends 'base.html' %}
 {% load static %}
 {% block title %}Anmeldung{% endblock %}
 {% block content %}
-    <div class="grid place-content-center h-120">
+    <div class="grid place-content-center h-120 mt-12 mb-12 ">
-    <div class="p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md">
+    <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">Anmeldung</h2>
         <form class="space-y-4" method="post">
             {% if form.errors %}
-            <div class="text-red-600 font-black overflow-x-auto break-words text-center">
+            <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 %}
@@ -18,11 +18,11 @@
             </div>
             {% endif %}
             {% csrf_token %}
-            <div class="">
+            <div class="items-center w-full">
-                <input class="p-3 rounded-full bg-gray-200 focus:scale-105 transition duration-200 font-black" type="text" name="username" id="username" required placeholder="BENUTZERNAME">
+                <input class=" w-full p-3 rounded-full bg-gray-200 focus:scale-105 transition duration-200 font-black" type="text" name="username" id="username" required placeholder="BENUTZERNAME">
             </div>
-            <div class="">
+            <div class="items-center w-full">
-                <input class="p-3 rounded-full bg-gray-200 focus:scale-105 transition duration-200 font-black" type="password" name="password" id="password" required placeholder="PASSWORT">
+                <input class=" w-full p-3 rounded-full bg-gray-200 focus:scale-105 transition duration-200 font-black" type="password" name="password" id="password" required placeholder="PASSWORT">
             </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">Anmelden</button>
         </form>

core/templates/accounts/register.html

@@ -1,8 +1,9 @@
-{% extends 'accounts/base.html' %}
+{% extends 'base.html' %}
 {% block title %}Registrierung{% endblock %}
 {% block content %}
-<div class="grid place-content-center h-120">
+<div class="grid place-content-center h-120 mt-12 mb-12">
-    <div class=" p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md">
+
+        <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">Registrieren</h2>
 
         <form class=" space-y-4" method="post">

core/templates/base.html

@@ -0,0 +1,17 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <link rel="icon" type="image/png" href="{% static 'icons/favicon.png' %}">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="{% static 'css/t-style.css' %}">
+    <title>qivip</title>
+</head>
+<body>
+    {% include 'partials/_nav.html' %}
+    {% block content%}{% endblock %}
+    {% include 'partials/_footer.html' %}
+    {% block extra_js %}{% endblock %}
+</body>
+</html>

core/templates/chat/index.html

@@ -0,0 +1,27 @@
+<!-- chat/templates/chat/index.html -->
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>Chat Rooms</title>
+</head>
+<body>
+    What chat room would you like to enter?<br>
+    <input id="room-name-input" type="text" size="100"><br>
+    <input id="room-name-submit" type="button" value="Enter">
+
+    <script>
+        document.querySelector('#room-name-input').focus();
+        document.querySelector('#room-name-input').onkeyup = function(e) {
+            if (e.key === 'Enter') {  // enter, return
+                document.querySelector('#room-name-submit').click();
+            }
+        };
+
+        document.querySelector('#room-name-submit').onclick = function(e) {
+            var roomName = document.querySelector('#room-name-input').value;
+            window.location.pathname = '/chat/' + roomName + '/';
+        };
+    </script>
+</body>
+</html>

core/templates/chat/room.html

@@ -0,0 +1,50 @@
+<!-- chat/templates/chat/room.html -->
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>Chat Room</title>
+</head>
+<body>
+    <textarea id="chat-log" cols="100" rows="20"></textarea><br>
+    <input id="chat-message-input" type="text" size="100"><br>
+    <input id="chat-message-submit" type="button" value="Send">
+    {{ room_name|json_script:"room-name" }}
+    <script>
+        const roomName = JSON.parse(document.getElementById('room-name').textContent);
+
+        const chatSocket = new WebSocket(
+            'ws://'
+            + window.location.host
+            + '/ws/chat/'
+            + roomName
+            + '/'
+        );
+
+        chatSocket.onmessage = function(e) {
+            const data = JSON.parse(e.data);
+            document.querySelector('#chat-log').value += (data.message + '\n');
+        };
+
+        chatSocket.onclose = function(e) {
+            console.error('Chat socket closed unexpectedly');
+        };
+
+        document.querySelector('#chat-message-input').focus();
+        document.querySelector('#chat-message-input').onkeyup = function(e) {
+            if (e.key === 'Enter') {  // enter, return
+                document.querySelector('#chat-message-submit').click();
+            }
+        };
+
+        document.querySelector('#chat-message-submit').onclick = function(e) {
+            const messageInputDom = document.querySelector('#chat-message-input');
+            const message = messageInputDom.value;
+            chatSocket.send(JSON.stringify({
+                'message': message
+            }));
+            messageInputDom.value = '';
+        };
+    </script>
+</body>
+</html>

core/templates/homepage/home.html

@@ -1,4 +1,4 @@
-{% extends 'homepage/base.html' %}
+{% extends 'base.html' %}
 
 {% block content %}
 <div class="grid place-content-center md:h-screen h-150 w-full -z-50 top-0 p-4">

core/templates/homepage/impress.html

@@ -0,0 +1,22 @@
+{% extends 'base.html' %}
+    {% block content%}
+        <div>
+            <div>
+                <h1>Impressum</h1>
+            </div>
+            <div>
+                <div>
+                    <p>
+                        Katharineum zu Lübeck
+                    </p>
+                    <p>
+                        Königsstraße 27-31
+                    </p>
+                    <p>
+                        23552 Lübeck
+                    </p>
+                </div>
+        </div>
+    {% endblock %}
+</body>
+</html>

core/templates/homepage/privacy.html

@@ -0,0 +1,13 @@
+{% extends 'base.html' %}
+
+        {% block content%}
+            <div>
+                <p>
+                    Hallo, ich bin die Datenschutzerklärung!
+                </p>
+            </div
+        {% endblock %}
+>
+    </div>
+</body>
+</html>

core/templates/library/delete_confirmation.html

@@ -0,0 +1,39 @@
+{% 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">
+                    {% if object.quiz_id %}
+                        Möchten Sie die Frage "{{ object.data.question }}" wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.
+                    {% else %}
+                        Möchten Sie das Quiz "{{ object.name }}" wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.
+                    {% endif %}
+                </p>
+            </div>
+
+            <form method="post" class="mt-6">
+                {% csrf_token %}
+                <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 %}" 
+                       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 %}

core/templates/library/detail_quiz.html

@@ -0,0 +1,114 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<div class="container mx-auto px-4">
+    <div class="flex justify-between items-center mb-6">
+        <h1 class="text-2xl font-bold">{{ quiz.name }}</h1>
+        <div class="flex space-x-2">
+            <a href="{% url 'library:edit_quiz' quiz.id %}" class="bg-green-500 text-white px-4 py-2 rounded-md text-sm lg:text-lg hover:bg-green-600 transition-colors">Quiz bearbeiten</a>
+            <a href="{% url 'library:delete_quiz' quiz.id %}" class="bg-red-500 text-white px-4 py-2 rounded-md text-sm lg:text-lg hover:bg-red-600 transition-colors">Quiz löschen</a>
+        </div>
+    </div>
+
+    {% if quiz.description %}
+    <p class="text-gray-600 mb-8">{{ quiz.description }}</p>
+    {% endif %}
+
+    <div class="bg-white rounded-lg shadow-md border-blue-600 border-2 rounded-xl shadow-md">
+        <div class="border-b border-gray-200 p-4">
+            <div class="flex justify-between items-center">
+                <h2 class="text-xl font-semibold">Fragen</h2>
+                <div class="flex space-x-2">
+                    <a href="{% url 'library:new_question' %}?type=multiple_choice&quiz_id={{ quiz.id }}" 
+                       class="bg-blue-100 text-blue-800 px-4 py-2 rounded-md text-xs lg:text-lg hover:border-blue-600 border-2">
+                        Multiple Choice
+                    </a>
+                    <a href="{% url 'library:new_question' %}?type=true_false&quiz_id={{ quiz.id }}" 
+                       class="bg-purple-100 text-purple-800 px-4 py-2 rounded-md text-xs lg:text-lg  hover:border-blue-600 border-2">
+                        Wahr/Falsch
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        {% if questions %}
+       
+            <div class="divide-y divide-gray-200">
+                {% for question in questions %}
+                
+                    <div class="w-full rounded-xl p-4 hover:bg-gray-50">
+                        <a class="block flex h-full w-full" href="{% url 'library:edit_question' question.id %}" >
+                        <div class="flex justify-between items-start">
+                            
+                            <div class="flex-grow">
+                                <p class="font-medium">{{ question.data.question }}</p>
+                                <div class="mt-1">
+                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {% if question.data.type == 'multiple_choice' %}bg-blue-100 text-blue-800{% else %}bg-purple-100 text-purple-800{% endif %}">
+                                        {% if question.data.type == 'multiple_choice' %}Multiple Choice{% else %}Wahr/Falsch{% endif %}
+                                    </span>
+                                </div>
+                                <div class="mt-2">
+                                    {% if question.data.type == 'multiple_choice' %}
+                                        <ul class="space-y-1">
+                                            {% for option in question.data.options %}
+                                                <li class="flex items-center text-sm">
+                                                    {% if option.is_correct %}
+                                                        <svg class="h-4 w-4 text-green-500 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+                                                        </svg>
+                                                        <span class="font-medium text-green-700">{{ option.value }}</span>
+                                                    {% else %}
+                                                        <svg class="h-4 w-4 text-gray-400 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6"/>
+                                                        </svg>
+                                                        <span class="text-gray-600">{{ option.value }}</span>
+                                                    {% endif %}
+                                                </li>
+                                            {% endfor %}
+                                        </ul>
+                                    {% else %}
+                                    {% for option in question.data.options %}
+                                        {% if option.is_correct %}
+                                        <p class="text-sm">
+                                        <span class="text-gray-500">Richtige Antwort:</span>
+                                        <span class="ml-1 font-medium {% if option.value == "Wahr" %} text-green-700 {% else %}text-red-700{% endif %}">{{ option.value }}</span>
+                                    </p>
+                                        {% endif %}
+                                {% endfor %}
+                                    {% endif %}
+                                </div>
+                            </div>
+                            
+                            <div class="flex h-full space-x-2 ml-4 items-center">
+                                <!--
+                                <a href="{% url 'library:edit_question' question.id %}" 
+                                   class="bg-gray-100 text-gray-700 px-3 py-1 rounded hover:bg-gray-200 transition-colors">
+                                    Bearbeiten
+                                </a>
+                                -->
+                                
+                                <a href=" {% url 'library:delete_question' question.id %}" 
+                class="  text-red-700 px-4 py-1 rounded hover:scale-110 ">
+                &#x1F5D1
+             </a>
+                            
+                            </div>
+                        </div>
+                    </div>
+                </a>
+             
+                {% endfor %}
+            </div>
+      
+        {% else %}
+   
+            <div class="p-8 text-center">
+                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
+                </svg>
+                <p class="mt-2 text-sm text-gray-500">Noch keine Fragen vorhanden. Erstellen Sie eine neue Frage, um loszulegen!</p>
+            </div>
+        {% endif %}
+    </div>
+</div>
+{% endblock %}

core/templates/library/form.html

@@ -1,9 +1,9 @@
-{% extends 'library/base.html' %}
+{% extends 'base.html' %}
 
 {% block content %}
 <h1>Formular</h1>
 <h2>{{ form.name.value }}</h2>
-<div class="input-group">
+<div class="input-group  border-blue-600 border-2 rounded-xl shadow-md">
     <form method="post">
         {% csrf_token %}
         {{ form.as_p }}

core/templates/library/overview_quiz.html

@@ -0,0 +1,28 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<h1>Übersicht</h1>
+<div class="flex justify-end">
+    <a href="{% url 'library:new_quiz' %}" class="text-white bg-blue-500 px-4 py-2 rounded-md mb-12">Neues Quiz erstellen</a>
+</div>
+
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 px-4 place-items-center">
+    {% for quiz in quizzes %}
+    <div class="bg-white w-full max-w-md rounded-lg p-4 shadow-md border-blue-600 border-2 rounded-xl">
+        <h2 class="text-lg font-bold"><a href="{% url 'library:edit_quiz' quiz.id %}">{{ quiz.name }}</a></h2>
+        <p class="text-sm text-gray-600 py-12">{{ quiz.description }}</p>
+
+        <div>
+            <div class="flex justify-between items-center gap-2">
+                <a href="#" class="qp-a-button-small border-2 border-blue-600 text-black">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">&#x270F;</a>
+                    <a href="{% url 'library:delete_quiz' quiz.id %}" class="qp-a-button-small border-2 border-blue-600 text-white">&#x1F5D1;</a>
+                </div>
+            </div>
+        </div>
+    </div>
+    {% endfor %}
+</div>
+{% endblock %}

core/templates/library/question/question_multiple_choice.html

@@ -0,0 +1,164 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<div class="container mx-auto px-4">
+    <div class="flex justify-between items-center mb-6">
+        <h1 class="text-2xl font-bold">{% if question %}Frage bearbeiten{% else %}Neue Multiple Choice Frage{% endif %}</h1>
+        <a href="{% url 'library:detail_quiz' quiz.id %}" 
+           class="bg-gray-100 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-200 transition-colors">
+            Zurück zum Quiz
+        </a>
+    </div>
+
+    <div class="bg-white rounded-lg shadow-md p-6">
+        <form method="post" class="space-y-6">
+            {% csrf_token %}
+            
+            <!-- Question Text -->
+            <div>
+                <label for="question" class="block text-sm font-medium text-gray-700">Frage</label>
+                <div class="mt-1">
+                    <textarea name="question" id="question" rows="4"
+                           class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                           required>{{ question.data.question|default:'' }}</textarea>
+                </div>
+            </div>
+
+            <!-- Options -->
+            <div>
+                <label class="block text-sm font-medium text-gray-700 mb-2">Antwortmöglichkeiten</label>
+                <div id="options-container" class="space-y-3">
+                    {% if question and question.data.options %}
+                        {% for option in question.data.options %}
+                            <div class="flex items-center space-x-3">
+                                <textarea name="option_{{ forloop.counter }}" rows="2"
+                                       class="shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                                       required>{{ option.value }}</textarea>
+                                <label class="inline-flex items-center">
+                                    <input type="checkbox" name="correct_{{ forloop.counter }}" value="1"
+                                           class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"
+                                           {% if option.is_correct %}checked{% endif %}>
+                                    <span class="ml-2 text-sm text-gray-600">Richtig</span>
+                                </label>
+                                <button type="button" onclick="removeOption(this)"
+                                        class="text-red-600 hover:text-red-800 transition-colors">
+                                    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+                                    </svg>
+                                </button>
+                            </div>
+                        {% endfor %}
+                    {% else %}
+                        <div class="flex items-center space-x-3">
+                            <textarea name="option_1" rows="2"
+                                   class="shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                                   required></textarea>
+                            <label class="inline-flex items-center">
+                                <input type="checkbox" name="correct_1" value="1"
+                                       class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
+                                <span class="ml-2 text-sm text-gray-600">Richtig</span>
+                            </label>
+                            <button type="button" onclick="removeOption(this)"
+                                    class="text-red-600 hover:text-red-800 transition-colors">
+                                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+                                </svg>
+                            </button>
+                        </div>
+                        <div class="flex items-center space-x-3">
+                            <textarea name="option_2" rows="2"
+                                   class="shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                                   required></textarea>
+                            <label class="inline-flex items-center">
+                                <input type="checkbox" name="correct_2" value="1"
+                                       class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
+                                <span class="ml-2 text-sm text-gray-600">Richtig</span>
+                            </label>
+                            <button type="button" onclick="removeOption(this)"
+                                    class="text-red-600 hover:text-red-800 transition-colors">
+                                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+                                </svg>
+                            </button>
+                        </div>
+                    {% endif %}
+                </div>
+                <button type="button" onclick="addOption()" 
+                        class="mt-3 inline-flex items-center px-3 py-1.5 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">
+                    <svg class="h-4 w-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
+                    </svg>
+                    Option hinzufügen
+                </button>
+            </div>
+
+            <div class="flex justify-end space-x-3">
+                <a href="{% url 'library:detail_quiz' quiz.id %}" 
+                   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-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                    {% if question %}Speichern{% else %}Erstellen{% endif %}
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<script>
+function addOption() {
+    const container = document.getElementById('options-container');
+    const optionCount = container.children.length + 1;
+    
+    if (optionCount > 6) {
+        alert('Maximal 6 Optionen sind erlaubt.');
+        return;
+    }
+    
+    const div = document.createElement('div');
+    div.className = 'flex items-center space-x-3';
+    div.innerHTML = `
+        <textarea name="option_${optionCount}" rows="2"
+               class="shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+               required></textarea>
+        <label class="inline-flex items-center">
+            <input type="checkbox" name="correct_${optionCount}" value="1"
+                   class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
+            <span class="ml-2 text-sm text-gray-600">Richtig</span>
+        </label>
+        <button type="button" onclick="removeOption(this)"
+                class="text-red-600 hover:text-red-800 transition-colors">
+            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+            </svg>
+        </button>
+    `;
+    
+    container.appendChild(div);
+}
+
+function removeOption(button) {
+    const container = document.getElementById('options-container');
+    if (container.children.length > 2) {
+        button.parentElement.remove();
+        updateOptionNumbers();
+    } else {
+        alert('Mindestens zwei Optionen müssen vorhanden sein.');
+    }
+}
+
+function updateOptionNumbers() {
+    const container = document.getElementById('options-container');
+    const options = container.children;
+    Array.from(options).forEach((option, index) => {
+        const number = index + 1;
+        const textInput = option.querySelector('textarea');
+        const checkbox = option.querySelector('input[type="checkbox"]');
+        
+        textInput.name = `option_${number}`;
+        checkbox.name = `correct_${number}`;
+    });
+}
+</script>
+{% endblock %}

core/templates/library/question/question_true_false.html

@@ -0,0 +1,59 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<div class="container mx-auto px-4">
+    <div class="flex justify-between items-center mb-6">
+        <h1 class="text-2xl font-bold">{% if question %}Frage bearbeiten{% else %}Neue Wahr/Falsch Frage{% endif %}</h1>
+        <a href="{% url 'library:detail_quiz' quiz.id %}" 
+           class="bg-gray-100 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-200 transition-colors">
+            Zurück zum Quiz
+        </a>
+    </div>
+
+    <div class="bg-white rounded-lg shadow-md p-6">
+        <form method="post" class="space-y-6">
+            {% csrf_token %}
+            
+            <!-- Question Text -->
+            <div>
+                <label for="question" class="block text-sm font-medium text-gray-700">Frage</label>
+                <div class="mt-1">
+                    <textarea name="question" id="question" rows="4"
+                           class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                           required>{{ question.data.question }}</textarea>
+                </div>
+            </div>
+
+            <!-- True/False Selection -->
+            <div>
+                <label class="block text-sm font-medium text-gray-700 mb-2">Richtige Antwort</label>
+                <div class="flex space-x-4">
+                    <label class="inline-flex items-center">
+                        <input type="radio" name="correct_answer" value="true"
+                               class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300"
+                               {% if question.data.correct_answer %}checked{% endif %}>
+                        <span class="ml-2 text-sm text-gray-600">Wahr</span>
+                    </label>
+                    <label class="inline-flex items-center">
+                        <input type="radio" name="correct_answer" value="false"
+                               class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300"
+                               {% if not question.data.correct_answer %}checked{% endif %}>
+                        <span class="ml-2 text-sm text-gray-600">Falsch</span>
+                    </label>
+                </div>
+            </div>
+
+            <div class="flex justify-end space-x-3">
+                <a href="{% url 'library:detail_quiz' quiz.id %}" 
+                   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-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                    {% if question %}Speichern{% else %}Erstellen{% endif %}
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+{% endblock %}

core/templates/partials/_footer.html

@@ -0,0 +1,7 @@
+<div class="grid place-content-center gap-2 w-full mt-4">
+    <div class="flex space-x-2 pb-4">
+        <p class="text-sm font-extralight"><a href="/impress">Impressum</a></p>
+        <p class="text-sm font-extralight"><a href="/privacy">Datenschutz</a></p>
+        <p class="text-sm font-extralight"><a href="https://edugit.org/enrichment-2024/qivip">Repository</a></p>
+    </div>
+</div>

core/templates/play/join_game.html

@@ -0,0 +1,35 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<div class="grid place-items-center min-h-[calc(100vh-5rem)] py-6 m-2">
+    <div class="max-w-md w-full p-8 rounded-2xl border-2 border-blue-400 bg-white">
+        <h1 class="text-2xl text-center font-bold mb-4">Spiel beitreten</h1>
+        <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="XXX-XXX" maxlength="7" pattern="[A-Za-z0-9]{3}-[A-Za-z0-9]{3}" 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 uppercase tracking-wider" oninput="let v = this.value.replace(/[^A-Za-z0-9]/g, '').slice(0,6).toUpperCase(); this.value = v.length > 3 ? v.slice(0,3) + '-' + v.slice(3) : v;" 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">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
+                    </svg>
+                </button>
+            </div>
+        </form>
+        <script>
+            const input = document.querySelector('input[name="game_code"]');
+            const button = document.querySelector('button[type="submit"]');
+            
+            input.addEventListener('input', function(e) {
+                button.disabled = !this.value.match(/^[A-Z0-9]{3}-[A-Z0-9]{3}$/);
+            });
+
+            input.addEventListener('keypress', function(e) {
+                if (e.key === 'Enter' && !button.disabled) {
+                    button.click();
+                }
+            });
+        </script>
+    </div>
+</div>
+{% endblock %}

core/templates/play/lobby.html

@@ -0,0 +1,15 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<div class="container mx-auto px-4">
+    <h1>Bundeslaender Deutschland Quiz</h1>
+    <div id="player-list">
+        <ul>
+            <li>Spieler 1</li>
+            <li>Spieler 2</li>
+            <li>Spieler 3</li>
+        </ul>
+    </div>
+    <button class="w-full p-3 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200" type="submit">Starten</button>
+</div>
+{% endblock %}

requirements.txt

@@ -1 +1,4 @@
 django~=5.1.4
+channels~=4.2.0
+daphne~=4.1.2
+channels_redis