Files
website/templates/login.html

55 lines
3.2 KiB
HTML

{% extends "base.html" %}
{% block title %}Anmelden{% endblock %}
{% block content %}
<div class="flex justify-center items-center min-h-screen px-4 py-12">
<div class="w-full max-w-md">
<div class="bg-white bg-opacity-20 backdrop-blur-lg rounded-xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl">
<div class="p-6 sm:p-8">
<h2 class="text-center text-2xl font-bold text-gray-800 mb-6">
<i class="fas fa-sign-in-alt mr-2"></i>
Anmelden
</h2>
<form method="POST" action="{{ url_for('login') }}" class="space-y-6">
<div class="space-y-2">
<label for="username" class="block text-sm font-medium text-gray-700">Benutzername</label>
<div class="relative rounded-md shadow-sm">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-user text-gray-400"></i>
</div>
<input type="text" id="username" name="username" required
class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
placeholder="Benutzername eingeben">
</div>
</div>
<div class="space-y-2">
<label for="password" class="block text-sm font-medium text-gray-700">Passwort</label>
<div class="relative rounded-md shadow-sm">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-lock text-gray-400"></i>
</div>
<input type="password" id="password" name="password" required
class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
placeholder="Passwort eingeben">
</div>
</div>
<div>
<button type="submit"
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200">
<i class="fas fa-sign-in-alt mr-2"></i> Anmelden
</button>
</div>
<div class="text-center text-sm text-gray-600">
<p>Noch kein Konto? <a href="{{ url_for('register') }}" class="font-medium text-blue-600 hover:text-blue-500 transition-colors">Registrieren</a></p>
</div>
</form>
</div>
</div>
</div>
</div>
{% endblock %}