35 lines
2.2 KiB
HTML
35 lines
2.2 KiB
HTML
{% 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 %} |