61 lines
3.1 KiB
HTML
61 lines
3.1 KiB
HTML
{% load static %}
|
|
{% block content %}
|
|
<!DOCTYPE html>
|
|
<head>
|
|
<link href="{% static 'css/tailwind.css' %}" rel="stylesheet">
|
|
</head>
|
|
<div class="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4">
|
|
<div class="max-w-md w-full space-y-8">
|
|
<div class="text-center">
|
|
<div class="text-6xl mb-4">🔐</div>
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-2">Anmelden</h2>
|
|
<p class="text-gray-600 mb-8">Melde dich in deinem Ticketsystem an</p>
|
|
</div>
|
|
<div class="bg-white rounded-lg shadow-md p-8">
|
|
<form method="post" class="space-y-6">
|
|
{% csrf_token %}
|
|
<!-- Form Errors -->
|
|
{% if form.non_field_errors %}
|
|
<div class="bg-red-100 border border-red-200 rounded p-3">
|
|
{% for error in form.non_field_errors %}<div class="text-red-700 text-sm">{{ error }}</div>{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
<div>
|
|
<label for="id_username"
|
|
class="block text-sm font-medium text-gray-700 mb-1">Benutzername:</label>
|
|
<input type="text"
|
|
name="username"
|
|
id="id_username"
|
|
value="{{ form.username.value|default:'' }}"
|
|
required
|
|
class="w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
placeholder="Gib deinen Benutzernamen ein">
|
|
</div>
|
|
<div>
|
|
<label for="id_password"
|
|
class="block text-sm font-medium text-gray-700 mb-1">Passwort:</label>
|
|
<input type="password"
|
|
name="password"
|
|
id="id_password"
|
|
required
|
|
class="w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
placeholder="Gib dein Passwort ein">
|
|
</div>
|
|
<div>
|
|
<button type="submit"
|
|
class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
|
🚀 Anmelden
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<div class="mt-6 text-center">
|
|
<p class="text-sm text-gray-600">
|
|
Noch keinen Account?
|
|
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Kontaktiere uns</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|