Templates hinzufuegen; Spiel beitreten seite stylen

core/core/urls.py

@@ -21,6 +21,6 @@ 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')),
 ]

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

@@ -1,3 +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;
 }

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 %}