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

myproject/templates/index.html

@@ -3,9 +3,16 @@
 {% 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">
+            <!-- Заголовок -->
+            <div class="text-center mb-4">
+                <h3 class="fw-bold mb-2">Добро пожаловать</h3>
+                <p class="text-muted mb-0">Войдите в систему</p>
+            </div>
+
+            <!-- Сообщения об ошибках -->
             {% if messages %}
                 {% for message in messages %}
                     {% if 'danger' in message.tags or 'error' in message.tags %}
@@ -16,30 +23,28 @@
                     {% endif %}
                 {% endfor %}
             {% endif %}
-</div>
 
-<h2 class="text-center mb-4">Добро пожаловать</h2>
+            <!-- Форма входа -->
-
-<!-- Содержимое вкладок -->
-<div class="tab-content">
-    <!-- Вкладка входа -->
-    <div class="tab-pane fade show active" id="login">
             <form method="post">
                 {% 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>
+                    <input type="email" class="form-control" id="email" name="email" required autofocus>
                 </div>
                 {% include 'accounts/password_input.html' with field_name='password' field_label='Пароль' required=True %}
-            <button type="submit" class="btn btn-primary w-100">Войти</button>
+                
+                <button type="submit" class="btn btn-primary w-100 py-2 mb-3">Войти</button>
                 
                 <!-- Ссылка "Забыли пароль?" -->
-            <div class="text-center mt-3">
+                <div class="text-center">
-                <a href="#" class="text-decoration-none" data-bs-toggle="modal" data-bs-target="#passwordResetModal">Забыли пароль?</a>
+                    <a href="#" class="text-decoration-none text-muted" data-bs-toggle="modal" data-bs-target="#passwordResetModal">
+                        <small>Забыли пароль?</small>
+                    </a>
                 </div>
             </form>
         </div>
     </div>
+</div>
 
 <!-- Модальное окно для восстановления пароля -->
 <div class="modal fade" id="passwordResetModal" tabindex="-1" aria-labelledby="passwordResetModalLabel" aria-hidden="true">
@@ -68,7 +73,6 @@
 </div>
 
 <script>
-// Управление вкладками
 document.addEventListener('DOMContentLoaded', function() {
     // Добавляем обработчик для показа/скрытия пароля
     document.querySelectorAll('.show-password-btn').forEach(button => {