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

72
myproject/templates/index.html
View File

@@ -3,41 +3,46 @@
{% block title %}Вход{% endblock %}
{% block content %}
<!-- Контейнер для сообщений об ошибках - фиксированное место -->
<!-- ВАЖНО: На главной странице (регистрация/вход) показываем только ошибки -->
<div id="messages-container" style="min-height: 60px;">
{% 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>
<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 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 %}
<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>
<!-- Содержимое вкладок -->
<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>
</div>
{% include 'accounts/password_input.html' with field_name='password' field_label='Пароль' required=True %}
<button type="submit" class="btn btn-primary w-100">Войти</button>
<!-- Ссылка "Забыли пароль?" -->
<div class="text-center mt-3">
<a href="#" class="text-decoration-none" data-bs-toggle="modal" data-bs-target="#passwordResetModal">Забыли пароль?</a>
</div>
</form>
<!-- Форма входа -->
<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 autofocus>
</div>
{% include 'accounts/password_input.html' with field_name='password' field_label='Пароль' required=True %}
<button type="submit" class="btn btn-primary w-100 py-2 mb-3">Войти</button>
<!-- Ссылка "Забыли пароль?" -->
<div class="text-center">
<a href="#" class="text-decoration-none text-muted" data-bs-toggle="modal" data-bs-target="#passwordResetModal">
<small>Забыли пароль?</small>
</a>
</div>
</form>
</div>
</div>
</div>
@@ -68,7 +73,6 @@
</div>
<script>
// Управление вкладками
document.addEventListener('DOMContentLoaded', function() {
// Добавляем обработчик для показа/скрытия пароля
document.querySelectorAll('.show-password-btn').forEach(button => {