smaa/octopus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

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

Browse Source
This commit is contained in:
Andrey Smakotin
2025-12-01 23:54:23 +03:00
parent c0aebde11c
commit 86585f3d6a
1 changed files with 38 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
myproject/templates/index.html
View File

@@ -3,9 +3,16 @@
{% block title %}Вход{% endblock %} {% block title %}Вход{% endblock %}
{% block content %} {% 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 %} {% if messages %}
{% for message in messages %} {% for message in messages %}
{% if 'danger' in message.tags or 'error' in message.tags %} {% if 'danger' in message.tags or 'error' in message.tags %}
@@ -16,29 +23,27 @@
{% endif %} {% endif %}
{% endfor %} {% endfor %}
{% endif %} {% 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"> <form method="post">
{% csrf_token %} {% csrf_token %}
<div class="mb-3"> <div class="mb-3">
<label for="email" class="form-label">Email</label> <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> </div>
{% include 'accounts/password_input.html' with field_name='password' field_label='Пароль' required=True %} {% 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> </div>
</form> </form>
</div> </div>
</div>
</div> </div>
<!-- Модальное окно для восстановления пароля --> <!-- Модальное окно для восстановления пароля -->
@@ -68,7 +73,6 @@
</div> </div>
<script> <script>
// Управление вкладками
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
// Добавляем обработчик для показа/скрытия пароля // Добавляем обработчик для показа/скрытия пароля
document.querySelectorAll('.show-password-btn').forEach(button => { document.querySelectorAll('.show-password-btn').forEach(button => {