Редизайн home.html: современная форма входа с карточкой и центрированием

myproject/templates/home.html

@@ -1,21 +1,51 @@
 {% extends 'base.html' %}
 
-{% block title %}Главная страница{% endblock %}
+{% block title %}Вход{% endblock %}
 
 {% block content %}
-<div class="container">
+<div class="container d-flex align-items-center justify-content-center" style="min-height: 70vh;">
-    <div class="text-center">
+    <div class="card shadow-sm" style="max-width: 420px; width: 100%;">
-        <h1 class="display-4">Добро пожаловать!</h1>
+        <div class="card-body p-4">
-        <p class="lead">Система аутентификации с подтверждением email</p>
+            <!-- Заголовок -->
+            <div class="text-center mb-4">
+                <h3 class="fw-bold mb-2">Добро пожаловать</h3>
+                <p class="text-muted mb-0">Войдите в систему</p>
+            </div>
 
-        {% if user.is_authenticated %}
+            <!-- Сообщения об ошибках -->
-            <p>Рады видеть вас снова, {{ user.name|default:user.email }}!</p>
+            {% if messages %}
-            <a href="{% url 'index' %}" class="btn btn-primary">Перейти в панель управления</a>
+                {% for message in messages %}
-        {% else %}
+                    {% if 'danger' in message.tags or 'error' in message.tags %}
-            <div class="mt-4">
+                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <a href="{% url 'accounts:login' %}" class="btn btn-primary">Войти</a>
+                            {{ message }}
+                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                         </div>
                     {% endif %}
+                {% endfor %}
+            {% endif %}
+
+            <!-- Форма входа -->
+            <form method="post" action="{% url 'accounts:login' %}">
+                {% csrf_token %}
+                <div class="mb-3">
+                    <label for="email" class="form-label">Email</label>
+                    <input type="email" class="form-control" id="email" name="email" required autofocus>
+                </div>
+                <div class="mb-3">
+                    <label for="password" class="form-label">Пароль</label>
+                    <input type="password" class="form-control" id="password" name="password" required>
+                </div>
+                
+                <button type="submit" class="btn btn-primary w-100 py-2 mb-3">Войти</button>
+                
+                <!-- Ссылка "Забыли пароль?" -->
+                <div class="text-center">
+                    <a href="{% url 'accounts:password_reset' %}" class="text-decoration-none text-muted">
+                        <small>Забыли пароль?</small>
+                    </a>
+                </div>
+            </form>
+        </div>
     </div>
 </div>
 {% endblock %}