63 lines
2.2 KiB
HTML
63 lines
2.2 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block content %}
|
|
<div class="container mx-auto px-4 py-8">
|
|
<div class="max-w-md mx-auto bg-white rounded-lg shadow-lg p-6">
|
|
<h1 class="text-2xl font-bold mb-6 text-center text-blue-600">Spieler einrichten</h1>
|
|
|
|
<div class="text-center mb-6">
|
|
<div class="inline-block bg-blue-100 rounded-lg px-4 py-2">
|
|
<span class="text-sm text-blue-800">Spiel-Code:</span>
|
|
<span class="font-mono font-bold text-blue-900">{{ join_code }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<form method="post" class="space-y-4">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="join_code" value="{{join_code}}">
|
|
|
|
<div class="bg-gray-50 p-4 rounded-lg mb-4">
|
|
<p class="text-sm text-gray-600 mb-2">Wähle einen Anzeigenamen für das Spiel:</p>
|
|
<input type="text"
|
|
name="display_name"
|
|
required
|
|
maxlength="20"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
placeholder="Dein Spielername">
|
|
<p class="text-xs text-gray-500 mt-2">Maximal 20 Zeichen</p>
|
|
</div>
|
|
|
|
<div class="flex justify-center space-x-4">
|
|
<a href="/"
|
|
class="px-6 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg transition-colors duration-200">
|
|
Abbrechen
|
|
</a>
|
|
<button type="submit"
|
|
class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors duration-200">
|
|
Spiel beitreten
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
{% if error %}
|
|
<div class="mt-4 p-4 bg-red-100 border-l-4 border-red-500 text-red-700">
|
|
<p class="font-medium">Fehler</p>
|
|
<p class="text-sm">{{ error }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
input:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.container {
|
|
min-height: calc(100vh - 4rem);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style>
|
|
{% endblock %} |