Редизайн главной страницы входа: современная карточка с тенью и центрированием

myproject/templates/index.html

@@ -3,41 +3,46 @@
 {% block title %}Вход{% endblock %}
 
 {% block content %}
-<!-- Контейнер для сообщений об ошибках - фиксированное место -->
+<div class="container d-flex align-items-center justify-content-center" style="min-height: 70vh;">
-<!-- ВАЖНО: На главной странице (регистрация/вход) показываем только ошибки -->
+    <div class="card shadow-sm" style="max-width: 420px; width: 100%;">
-<div id="messages-container" style="min-height: 60px;">
+        <div class="card-body p-4">
-    {% if messages %}
+            <!-- Заголовок -->
-        {% for message in messages %}
+            <div class="text-center mb-4">
-            {% if 'danger' in message.tags or 'error' in message.tags %}
+                <h3 class="fw-bold mb-2">Добро пожаловать</h3>
-                <div class="alert alert-danger alert-dismissible fade show" role="alert">
+                <p class="text-muted mb-0">Войдите в систему</p>
-                    {{ message }}
+            </div>
-                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+
-                </div>
+            <!-- Сообщения об ошибках -->
+            {% if messages %}
+                {% for message in messages %}
+                    {% if 'danger' in message.tags or 'error' in message.tags %}
+                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
+                            {{ message }}
+                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+                        </div>
+                    {% endif %}
+                {% endfor %}
             {% endif %}
-        {% endfor %}
-    {% endif %}
-</div>
 
-<h2 class="text-center mb-4">Добро пожаловать</h2>
+            <!-- Форма входа -->
-
+            <form method="post">
-<!-- Содержимое вкладок -->
+                {% csrf_token %}
-<div class="tab-content">
+                <div class="mb-3">
-    <!-- Вкладка входа -->
+                    <label for="email" class="form-label">Email</label>
-    <div class="tab-pane fade show active" id="login">
+                    <input type="email" class="form-control" id="email" name="email" required autofocus>
-        <form method="post">
+                </div>
-            {% csrf_token %}
+                {% include 'accounts/password_input.html' with field_name='password' field_label='Пароль' required=True %}
-            <div class="mb-3">
+                
-                <label for="email" class="form-label">Email</label>
+                <button type="submit" class="btn btn-primary w-100 py-2 mb-3">Войти</button>
-                <input type="email" class="form-control" id="email" name="email" required>
+                
-            </div>
+                <!-- Ссылка "Забыли пароль?" -->
-            {% include 'accounts/password_input.html' with field_name='password' field_label='Пароль' required=True %}
+                <div class="text-center">
-            <button type="submit" class="btn btn-primary w-100">Войти</button>
+                    <a href="#" class="text-decoration-none text-muted" data-bs-toggle="modal" data-bs-target="#passwordResetModal">
-            
+                        <small>Забыли пароль?</small>
-            <!-- Ссылка "Забыли пароль?" -->
+                    </a>
-            <div class="text-center mt-3">
+                </div>
-                <a href="#" class="text-decoration-none" data-bs-toggle="modal" data-bs-target="#passwordResetModal">Забыли пароль?</a>
+            </form>
-            </div>
+        </div>
-        </form>
     </div>
 </div>
 
@@ -68,7 +73,6 @@
 </div>
 
 <script>
-// Управление вкладками
 document.addEventListener('DOMContentLoaded', function() {
     // Добавляем обработчик для показа/скрытия пароля
     document.querySelectorAll('.show-password-btn').forEach(button => {