515 lines
36 KiB
HTML
515 lines
36 KiB
HTML
{% extends "base.html" %}
|
||
{% import "/components/header.html" as header %}
|
||
{% import "/components/footer.html" as footer %}
|
||
|
||
|
||
{% block title %}Вход{% endblock %}
|
||
|
||
|
||
{% block content %}
|
||
{{ header.section(user) }}
|
||
<form class="c_sbrxk">
|
||
<img class="login-illustration" src="/static/login-art.png" alt="" aria-hidden="true">
|
||
<div class="c_dtjoh">
|
||
<div class="c_aihm6 floating-group">
|
||
<input type="text" id="email" name="email" class="c_xhd5k" autocomplete="username" required>
|
||
<label for="email" class="c_z3ybu floating-label">Логин</label>
|
||
</div>
|
||
<span class="login-hint">Можно указать телефон или email от аккаунта</span>
|
||
<div class="c_aihm6 floating-group file-group poster-group password-group" style="margin-bottom: 0;">
|
||
<input type="password" id="password" name="password" class="c_xhd5k" required>
|
||
<label for="password" class="c_z3ybu floating-label">Пароль</label>
|
||
|
||
<button type="button" class="password-toggle" aria-label="Переключатель видимости пароля">
|
||
<svg class="eye eye-open" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M15.1875 14.6875C16.0625 13.8125 16.5 12.75 16.5 11.5C16.5 10.25 16.0625 9.1875 15.1875 8.3125C14.3125 7.4375 13.25 7 12 7C10.75 7 9.6875 7.4375 8.8125 8.3125C7.9375 9.1875 7.5 10.25 7.5 11.5C7.5 12.75 7.9375 13.8125 8.8125 14.6875C9.6875 15.5625 10.75 16 12 16C13.25 16 14.3125 15.5625 15.1875 14.6875ZM10.0875 13.4125C9.5625 12.8875 9.3 12.25 9.3 11.5C9.3 10.75 9.5625 10.1125 10.0875 9.5875C10.6125 9.0625 11.25 8.8 12 8.8C12.75 8.8 13.3875 9.0625 13.9125 9.5875C14.4375 10.1125 14.7 10.75 14.7 11.5C14.7 12.25 14.4375 12.8875 13.9125 13.4125C13.3875 13.9375 12.75 14.2 12 14.2C11.25 14.2 10.6125 13.9375 10.0875 13.4125ZM5.35 16.9625C3.35 15.6042 1.9 13.7833 1 11.5C1.9 9.21667 3.35 7.39583 5.35 6.0375C7.35 4.67917 9.56667 4 12 4C14.4333 4 16.65 4.67917 18.65 6.0375C20.65 7.39583 22.1 9.21667 23 11.5C22.1 13.7833 20.65 15.6042 18.65 16.9625C16.65 18.3208 14.4333 19 12 19C9.56667 19 7.35 18.3208 5.35 16.9625ZM17.1875 15.5125C18.7625 14.5208 19.9667 13.1833 20.8 11.5C19.9667 9.81667 18.7625 8.47917 17.1875 7.4875C15.6125 6.49583 13.8833 6 12 6C10.1167 6 8.3875 6.49583 6.8125 7.4875C5.2375 8.47917 4.03333 9.81667 3.2 11.5C4.03333 13.1833 5.2375 14.5208 6.8125 15.5125C8.3875 16.5042 10.1167 17 12 17C13.8833 17 15.6125 16.5042 17.1875 15.5125Z"
|
||
fill="#5F1798" />
|
||
</svg>
|
||
|
||
<svg class="eye eye-closed" style="display:none" xmlns="http://www.w3.org/2000/svg" height="24px"
|
||
viewBox="0 -960 960 960" width="24px" fill="#5F1798">
|
||
<path
|
||
d="m644-428-58-58q9-47-27-88t-93-32l-58-58q17-8 34.5-12t37.5-4q75 0 127.5 52.5T660-500q0 20-4 37.5T644-428Zm128 126-58-56q38-29 67.5-63.5T832-500q-50-101-143.5-160.5T480-720q-29 0-57 4t-55 12l-62-62q41-17 84-25.5t90-8.5q151 0 269 83.5T920-500q-23 59-60.5 109.5T772-302Zm20 246L624-222q-35 11-70.5 16.5T480-200q-151 0-269-83.5T40-500q21-53 53-98.5t73-81.5L56-792l56-56 736 736-56 56ZM222-624q-29 26-53 57t-41 67q50 101 143.5 160.5T480-280q20 0 39-2.5t39-5.5l-36-38q-11 3-21 4.5t-21 1.5q-75 0-127.5-52.5T300-500q0-11 1.5-21t4.5-21l-84-82Zm319 93Zm-151 75Z" />
|
||
</svg>
|
||
</button>
|
||
|
||
</div>
|
||
<span class="login-hint">Минимум 8 символов</span>
|
||
<a href="/restore{% if next %}?next={{next}}{% endif %}" onclick="sendToNextPage(event)" class="login-forgot" style="margin-bottom: 1rem;">Забыли пароль ?</a>
|
||
|
||
<button class="c_aq9et" id="createBtn" type="button">
|
||
<span class="c_som9s">Войти</span>
|
||
</button>
|
||
<div style="display: flex; gap:15px">
|
||
<span>Нет аккаунта?</span><a href="/registration{% if next %}?next={{next}}{% endif %}">Регистрация</a>
|
||
</div>
|
||
|
||
<div class="login-social">
|
||
<div class="login-social__or"><span>или войдите через</span></div>
|
||
<div class="login-social__row">
|
||
<a class="login-social__btn login-social__btn--vk" href="/api/v1/social/vk/register{% if next %}?next={{next}}{% endif %}">
|
||
<svg class="login-social__logo" width="22" height="22" viewBox="0 0 24 24" fill="#0077FF" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||
<path d="M13.162 18.994c-6.13 0-9.625-4.203-9.77-11.196h3.07c.101 5.132 2.366 7.307 4.16 7.755V7.798h2.89v4.427c1.77-.19 3.63-2.208 4.256-4.427h2.89c-.48 2.734-2.498 4.752-3.933 5.581 1.435.673 3.733 2.432 4.61 5.614h-3.182c-.682-2.125-2.384-3.767-4.64-3.99v3.99h-.34z"/>
|
||
</svg>
|
||
<span>VK</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
<script>
|
||
function sendToNextPage(e) {
|
||
e.preventDefault();
|
||
|
||
const email = document.getElementById('email').value.trim();
|
||
|
||
if (email) {
|
||
localStorage.setItem('restoreEmail', email);
|
||
}
|
||
|
||
window.location.href = "/restore{% if next %}?next={{next}}{% endif %}";
|
||
}
|
||
</script>
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const emailInput = document.getElementById('email');
|
||
const passwordInput = document.getElementById('password');
|
||
const createBtn = document.getElementById('createBtn');
|
||
|
||
createBtn.addEventListener('click', async (e) => {
|
||
e.preventDefault();
|
||
|
||
const requiredInputs = document.querySelectorAll('input[required]');
|
||
const requiredTextareas = document.querySelectorAll('textarea[required]');
|
||
const requiredFields = [...requiredInputs, ...requiredTextareas];
|
||
|
||
let firstErrorField = null;
|
||
let hasError = false;
|
||
|
||
requiredFields.forEach(field => {
|
||
const group = field.closest('.floating-group');
|
||
if (!group) return; // skip if no group wrapper
|
||
|
||
let isEmpty = false;
|
||
if (field.type === 'file') {
|
||
isEmpty = !field.files || field.files.length === 0;
|
||
} else {
|
||
isEmpty = !field.value || !field.value.trim();
|
||
}
|
||
|
||
if (isEmpty) {
|
||
group.classList.add('error');
|
||
hasError = true;
|
||
if (!firstErrorField) firstErrorField = field;
|
||
} else {
|
||
group.classList.remove('error');
|
||
}
|
||
});
|
||
|
||
if (hasError && firstErrorField) {
|
||
firstErrorField.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||
setTimeout(() => firstErrorField.focus(), 600);
|
||
return;
|
||
}
|
||
|
||
// No client-side validation errors — send request
|
||
try {
|
||
const payload = {
|
||
identifier: emailInput ? emailInput.value : '',
|
||
password: passwordInput ? passwordInput.value : '',
|
||
client_id: 'web'
|
||
};
|
||
|
||
const res = await fetch('/api/login', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(payload)
|
||
});
|
||
|
||
if (res.ok) {
|
||
// success (HTTP 2xx). Redirect to /form
|
||
const params = new URLSearchParams(window.location.search);
|
||
const next = params.get('next') || '/profile';
|
||
window.location.href = next;
|
||
|
||
} else {
|
||
const allFields = document.querySelectorAll('.floating-group');
|
||
let msg;
|
||
if (res.status === 403) {
|
||
// Аккаунт заблокирован — поля ввода ни при чём, показываем причину
|
||
msg = 'Ваш аккаунт заблокирован администратором.';
|
||
try { const d = await res.json(); if (d && typeof d.detail === 'string') msg = d.detail; } catch (e) {}
|
||
allFields.forEach(g => g.classList.remove('error'));
|
||
} else {
|
||
msg = 'Неверный логин или пароль';
|
||
allFields.forEach(g => g.classList.add('error'));
|
||
}
|
||
if (typeof showToast === 'function') showToast({ message: msg, status: 'error', duration: 9000 });
|
||
}
|
||
} catch (err) {
|
||
// Network or other unexpected error — mark fields as error
|
||
const allFields = document.querySelectorAll('.floating-group');
|
||
allFields.forEach(g => g.classList.add('error'));
|
||
console.error('Request failed', err);
|
||
}
|
||
});
|
||
|
||
// Убираем красную подсветку сразу при исправлении пользователем
|
||
document.querySelectorAll('.floating-group input').forEach(input => {
|
||
input.addEventListener('input', function() {
|
||
const group = this.closest('.floating-group');
|
||
if (group) {
|
||
group.classList.remove('error');
|
||
}
|
||
});
|
||
|
||
// Для файлов
|
||
if (input.type === 'file') {
|
||
input.addEventListener('change', function() {
|
||
const group = this.closest('.floating-group');
|
||
if (group && this.files.length > 0) {
|
||
group.classList.remove('error');
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
// Инициализация
|
||
// updateRange();
|
||
const pwd = document.getElementById('password');
|
||
const toggle = document.querySelector('.password-toggle');
|
||
const eyeOpen = toggle.querySelector('.eye-open');
|
||
const eyeClosed = toggle.querySelector('.eye-closed');
|
||
|
||
toggle.addEventListener('click', () => {
|
||
const isPassword = pwd.type === 'password';
|
||
pwd.type = isPassword ? 'text' : 'password';
|
||
|
||
if (isPassword) {
|
||
eyeOpen.style.display = 'none';
|
||
eyeClosed.style.display = 'block';
|
||
} else {
|
||
eyeOpen.style.display = 'block';
|
||
eyeClosed.style.display = 'none';
|
||
}
|
||
|
||
// keep focus on input for better UX
|
||
pwd.focus();
|
||
});
|
||
|
||
// Вход через Макс — бэкенд ещё не готов: уведомление, без перехода
|
||
var maxLoginBtn = document.querySelector('.login-social__btn--max');
|
||
if (maxLoginBtn) {
|
||
maxLoginBtn.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
if (typeof showToast === 'function') {
|
||
showToast({ message: 'Вход через Макс — в процессе реализации', status: 'info', duration: 2800 });
|
||
}
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
{{ footer.section() }}
|
||
<script>
|
||
fetch('/api/me')
|
||
.then(response => {
|
||
if (response.ok) {
|
||
return response.json();
|
||
} else {
|
||
throw new Error('Network response was not ok');
|
||
}
|
||
})
|
||
.then(data => {
|
||
if (data.username){
|
||
window.location.href = '/'
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('There was a problem with the fetch operation:', error);
|
||
});
|
||
</script>
|
||
{% endblock %}
|
||
|
||
{% block head %}
|
||
{{ header.style() }}
|
||
<style>
|
||
.poster-group {position: relative;}
|
||
.password-group { position: relative; }
|
||
a{color: #5F1798;}
|
||
.password-toggle {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
height: 100%;
|
||
padding: 0 10px;
|
||
border: none;
|
||
background: transparent;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* remove default button outline but keep focus visible */
|
||
.password-toggle:focus { outline: 2px solid rgba(95,23,152,0.25); outline-offset: 2px; }
|
||
|
||
/* ensure svg size fits */
|
||
.password-toggle .eye { width: 24px; height: 24px; display: block; }
|
||
|
||
.file-name-display {width: 100%;padding: 16px 50px 16px 16px;border: 2px solid #ddd;border-radius: 8px;font-size: 16px;color: #555;background: #fff;min-height: 56px;display: flex;align-items: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;transition: all 0.3s ease;cursor: pointer;}
|
||
|
||
/* Hover эффект */
|
||
.c_aihm6:hover input, .c_nb6gy:hover textarea, .poster-group:hover .file-name-display {border-color: #5F1798;}
|
||
|
||
/* Когда файл выбран — делаем текст чуть темнее */
|
||
.poster-group.has-file .file-name-display {color: #222;font-weight: 500;}
|
||
|
||
/* Скрытый input file */
|
||
.hidden-file {position: absolute;inset: 0;opacity: 0;cursor: pointer;z-index: 2;}
|
||
|
||
/* Плавающий лейбл */
|
||
.poster-group .floating-label {position: absolute;left: 16px;top: 16px;font-size: 16px;color: #666;background: #fff;padding: 0 6px;z-index: 3;transition: all 0.3s ease;pointer-events: none;}
|
||
|
||
/* Когда лейбл должен подняться */
|
||
.poster-group input:focus + .floating-label,
|
||
.poster-group.has-file .floating-label {top: -8px;font-size: 13px;color: #5F1798;}
|
||
|
||
/* Иконка справа */
|
||
.file-icon {position: absolute;right: 16px;top: 50%;transform: translateY(-50%);z-index: 3;pointer-events: none;}
|
||
|
||
/* Красная ошибка */
|
||
.poster-group.error .file-name-display {border-color: #e74c3c !important;box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15);}
|
||
|
||
.poster-group.error .floating-label {color: #e74c3c !important;}
|
||
/* ====================== FLOATING LABELS ====================== */
|
||
.floating-group {position: relative;margin-bottom: 1.5rem;}
|
||
|
||
.floating-label {position: absolute;left: 16px;top: 16px;font-size: 16px;color: #666;transition: all 0.3s ease;pointer-events: none;background: #fff;padding: 0 6px;z-index: 2;}
|
||
|
||
/* Плавающий лейбл */
|
||
.floating-group input:focus + .floating-label, .floating-group textarea:focus + .floating-label,
|
||
.floating-group input:not(:placeholder-shown) + .floating-label, .floating-group textarea:not(:placeholder-shown) + .floating-label {top: -8px;font-size: 15px;color: #5F1798;}
|
||
|
||
/* Красная подсветка — ТОЛЬКО после попытки отправки */
|
||
.floating-group.error input, .floating-group.error textarea,
|
||
.floating-group.error input[type="file"] {border-color: #e74c3c !important;box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.38);}
|
||
|
||
.floating-group.error .floating-label {color: #e74c3c !important;}
|
||
|
||
/* Основные стили полей */
|
||
.c_xhd5k, .c_4ykpn {width: 100%;padding: 16px 16px;border: 2px solid #ddd;border-radius: 8px;font-size: 16px;transition: all 0.3s ease;background: #fff;}
|
||
|
||
.c_xhd5k:focus, .c_4ykpn:focus {border-color: #5F1798;outline: none;box-shadow: 0 0 0 3px rgba(95, 23, 152, 0.15);}
|
||
|
||
/* Файловые поля */
|
||
.file-group input[type="file"] {height: 43px;}
|
||
|
||
|
||
.file-group .floating-label {top: 12px;}
|
||
/* ====================== СКРЫТЬ СТРЕЛОЧКИ У INPUT TYPE=NUMBER ====================== */
|
||
|
||
/* Chrome, Edge, Safari, Opera */
|
||
input[type="number"]::-webkit-outer-spin-button,
|
||
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;display: none;}
|
||
|
||
/* Firefox */
|
||
input[type="number"] {-moz-appearance: textfield;}
|
||
|
||
/* Дополнительно: чтобы стрелочки не появлялись при фокусе (на всякий случай) */
|
||
input[type="number"]:hover::-webkit-outer-spin-button,
|
||
input[type="number"]:focus::-webkit-outer-spin-button,
|
||
input[type="number"]:hover::-webkit-inner-spin-button,
|
||
input[type="number"]:focus::-webkit-inner-spin-button {display: none;}
|
||
.c_xc07u {white-space: pre;}
|
||
.c_5qh93{cursor: pointer;}
|
||
.c_965ia{object-fit: cover;}
|
||
@media (min-width: 901px) {
|
||
.c_abq53 { color: #0ED646; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
|
||
.c_ydot9 { display: flex; padding: 1.5px 10px; justify-content: center; align-items: center; border-radius: 30px; background: rgba(14, 214, 70, 0.20); }
|
||
.c_w5koo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; flex: 1 0 0; overflow: hidden; color: #000; text-overflow: ellipsis; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
|
||
.c_fudgr { display: flex; justify-content: center; align-items: center; align-self: stretch; }
|
||
.c_n5lj4 { align-self: stretch; color: #5F1798; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_bffhf { width: 50px; height: 50px; aspect-ratio: 1/1; border-radius: 50px; }
|
||
.c_sya8w { align-self: stretch; color: #000; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_o5cc2 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; flex: 1 0 0; }
|
||
.c_zxyme { display: flex; height: 50px; align-items: center; gap: 13px; align-self: stretch; }
|
||
.c_rq5iq { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; overflow: hidden; color: rgba(58, 58, 58, 0.75); text-overflow: ellipsis; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_sa311 { align-self: stretch; color: rgba(58, 58, 58, 0.75); text-align: right; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_yhst8 { display: flex; padding: 10px 20px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; align-self: stretch; border-radius: 10px; background: #FFF; }
|
||
.c_jz1u6 { display: flex; width: 335px; height: 418px; padding: 120px 20px 20px 20px; flex-direction: column; align-items: flex-start; border-radius: 5px; border: 1px solid #5F1798; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 4px 20px 0 rgba(0, 0, 0, 0.20); }
|
||
}
|
||
|
||
@media (min-width: 700px) and (max-width: 900px) {
|
||
.c_abq53 { color: #0ED646; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
|
||
.c_ydot9 { display: flex; padding: 1.5px 10px; justify-content: center; align-items: center; border-radius: 30px; background: rgba(14, 214, 70, 0.20); }
|
||
.c_w5koo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; flex: 1 0 0; overflow: hidden; color: #000; text-overflow: ellipsis; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
|
||
.c_fudgr { display: flex; justify-content: center; align-items: center; align-self: stretch; }
|
||
.c_n5lj4 { align-self: stretch; color: #5F1798; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_bffhf { width: 50px; height: 50px; aspect-ratio: 1/1; border-radius: 50px; }
|
||
.c_sya8w { align-self: stretch; color: #000; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_o5cc2 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; flex: 1 0 0; }
|
||
.c_zxyme { display: flex; height: 50px; align-items: center; gap: 13px; align-self: stretch; }
|
||
.c_rq5iq { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; overflow: hidden; color: rgba(58, 58, 58, 0.75); text-overflow: ellipsis; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_sa311 { align-self: stretch; color: rgba(58, 58, 58, 0.75); text-align: right; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_yhst8 { display: flex; padding: 10px 20px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; align-self: stretch; border-radius: 10px; background: #FFF; }
|
||
.c_jz1u6 { display: flex; width: calc(50% - 10px); height: 418px; padding: 120px 20px 20px 20px; flex-direction: column; align-items: flex-start; flex-shrink: 0; border-radius: 5px; border: 1px solid #5F1798; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 4px 20px 0 rgba(0, 0, 0, 0.20); }
|
||
}
|
||
|
||
@media (max-width: 699px) {
|
||
.c_abq53 { color: #0ED646; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
|
||
.c_ydot9 { display: flex; padding: 1.5px 10px; justify-content: center; align-items: center; border-radius: 30px; background: rgba(14, 214, 70, 0.20); }
|
||
.c_w5koo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; flex: 1 0 0; overflow: hidden; color: #000; text-overflow: ellipsis; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
|
||
.c_fudgr { display: flex; justify-content: center; align-items: center; align-self: stretch; }
|
||
.c_n5lj4 { align-self: stretch; color: #5F1798; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_bffhf { width: 50px; height: 50px; aspect-ratio: 1/1; border-radius: 50px; }
|
||
.c_sya8w { align-self: stretch; color: #000; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_o5cc2 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; flex: 1 0 0; }
|
||
.c_zxyme { display: flex; height: 50px; align-items: center; gap: 13px; align-self: stretch; }
|
||
.c_rq5iq { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; overflow: hidden; color: rgba(58, 58, 58, 0.75); text-overflow: ellipsis; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_sa311 { align-self: stretch; color: rgba(58, 58, 58, 0.75); text-align: right; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_yhst8 { display: flex; padding: 10px 20px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; align-self: stretch; border-radius: 10px; background: #FFF; }
|
||
.c_jz1u6 { display: flex; width: 335px; padding: 120px 20px 20px 20px; flex-direction: column; align-items: flex-start; border-radius: 5px; border: 1px solid #5F1798; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 4px 20px 0 rgba(0, 0, 0, 0.20); }
|
||
}
|
||
@media (min-width: 901px) {
|
||
.c_xhd5k { display: flex; height: 42px; padding: 5px 10px; align-items: center; flex: 1 0 0; }
|
||
.c_z3ybu { position: absolute; left: 13px; top: 12px; color: #000; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_vphtp { width: 18px; height: 18px; fill: #5F1798; }
|
||
.c_ffjwp { width: 24px; height: 24px; flex-shrink: 0; }
|
||
.c_aihm6 { display: flex; width: 323px; justify-content: center; align-items: center; border-radius: 5px; background: #FFF; }
|
||
.c_4ykpn { display: flex; height: 104px; padding: 10px 10px; align-items: center; flex: 1 0 0; }
|
||
.c_nb6gy { display: flex; width: 323px; justify-content: center; align-items: center; border-radius: 5px; background: #FFF; }
|
||
.c_q00x6 { min-width: 230px; flex: 1 0 0; color: #000; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_mkcow { color: #000; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_uklyi { width: 20px; color: #000; text-align: center; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_l8kil {display: flex;padding: 5px 00px;align-items: center;border-radius: 5px;border: 1px solid rgba(95, 23, 152, 0.20);background: #FDFAFF;width: 35px;text-align: center;}
|
||
.c_5qh93 { display: flex; height: 7px; justify-content: center; align-items: center; flex: 1 0 0; border-radius: 5px; background: rgba(95, 23, 152, 0.20); }
|
||
.c_jups4 { display: flex; width: 323px; padding: 10px; align-items: center; align-content: center; gap: 10px; flex-wrap: wrap; border-radius: 5px; background: #FFF; border: 1px solid #5F1798; }
|
||
.c_som9s { color: #FFF; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_aq9et { display: flex; padding: 19px 33px; justify-content: center; align-items: center; align-self: stretch; border-radius: 5px; background: #5F1798; }
|
||
.c_dtjoh { display: flex; width: 323px; flex-direction: column; align-items: flex-start; gap: 12px; flex-shrink: 0; }
|
||
.c_1gai0 { align-self: stretch; color: #000; text-align: center; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
|
||
.c_med8n { color: #5F1798; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
|
||
.c_g8o3y { display: flex; padding: 1.5px 10px; justify-content: center; align-items: center; border-radius: 30px; background: rgba(95, 23, 152, 0.20); }
|
||
.c_1pdx0 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; flex: 1 0 0; overflow: hidden; color: #000; text-overflow: ellipsis; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
|
||
.c_r5tzr { display: flex; justify-content: center; align-items: center; align-self: stretch; }
|
||
.c_965ia { width: 50px; height: 50px; aspect-ratio: 1/1; border-radius: 50px; }
|
||
.c_t9q2z { width: 189px; color: #000; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_zruk7 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
|
||
.c_k3nyf { display: flex; height: 50px; align-items: center; gap: 13px; align-self: stretch; }
|
||
.c_xc07u { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; overflow: hidden; color: rgba(58, 58, 58, 0.75); text-overflow: ellipsis; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_hni7n { align-self: stretch; color: #5F1798; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_qfcvm { align-self: stretch; color: rgba(58, 58, 58, 0.75); text-align: right; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_rtopc { display: flex; width: 355px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; flex-shrink: 0; }
|
||
.c_sbrxk { padding: 50px 0px 100px; display: flex; box-sizing: unset; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 200px; flex-wrap: wrap; background: #FFF; }
|
||
}
|
||
|
||
@media (min-width: 700px) and (max-width: 900px) {
|
||
.c_xhd5k { display: flex; height: 42px; padding: 5px 10px; align-items: center; flex: 1 0 0; }
|
||
.c_z3ybu { position: absolute; left: 13px; top: 12px; color: #000; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_vphtp { width: 18px; height: 18px; fill: #5F1798; }
|
||
.c_ffjwp { width: 24px; height: 24px; flex-shrink: 0; }
|
||
.c_aihm6 { display: flex; width: 323px; justify-content: center; align-items: center; border-radius: 5px; background: #FFF; }
|
||
.c_4ykpn { display: flex; height: 104px; padding: 10px 10px; align-items: center; flex: 1 0 0; }
|
||
.c_nb6gy { display: flex; width: 323px; justify-content: center; align-items: center; border-radius: 5px; background: #FFF; }
|
||
.c_q00x6 { min-width: 230px; flex: 1 0 0; color: #000; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_mkcow { color: #000; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_uklyi { width: 20px; color: #000; text-align: center; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_l8kil {display: flex;padding: 5px 00px;align-items: center;border-radius: 5px;border: 1px solid rgba(95, 23, 152, 0.20);background: #FDFAFF;width: 35px;text-align: center;}
|
||
.c_5qh93 { display: flex; height: 7px; justify-content: center; align-items: center; flex: 1 0 0; border-radius: 5px; background: rgba(95, 23, 152, 0.20); }
|
||
.c_jups4 { display: flex; width: 323px; padding: 10px; align-items: center; align-content: center; gap: 10px; flex-wrap: wrap; border-radius: 5px; background: #FFF; border: 1px solid #5F1798; }
|
||
.c_som9s { color: #FFF; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_aq9et { display: flex; padding: 19px 33px; justify-content: center; align-items: center; align-self: stretch; border-radius: 5px; background: #5F1798; }
|
||
.c_dtjoh { display: flex; width: 323px; flex-direction: column; align-items: flex-start; gap: 12px; flex-shrink: 0; }
|
||
.c_1gai0 { align-self: stretch; color: #000; text-align: center; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
|
||
.c_med8n { color: #5F1798; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
|
||
.c_g8o3y { display: flex; padding: 1.5px 10px; justify-content: center; align-items: center; border-radius: 30px; background: rgba(95, 23, 152, 0.20); }
|
||
.c_1pdx0 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; flex: 1 0 0; overflow: hidden; color: #000; text-overflow: ellipsis; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
|
||
.c_r5tzr { display: flex; justify-content: center; align-items: center; align-self: stretch; }
|
||
.c_965ia { width: 50px; height: 50px; aspect-ratio: 1/1; border-radius: 50px; }
|
||
.c_t9q2z { width: 189px; color: #000; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_zruk7 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
|
||
.c_k3nyf { display: flex; height: 50px; align-items: center; gap: 13px; align-self: stretch; }
|
||
.c_xc07u { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; overflow: hidden; color: rgba(58, 58, 58, 0.75); text-overflow: ellipsis; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_hni7n { align-self: stretch; color: #5F1798; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_qfcvm { align-self: stretch; color: rgba(58, 58, 58, 0.75); text-align: right; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_rtopc { display: flex; width: 355px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; flex-shrink: 0; }
|
||
.c_sbrxk { padding: 50px 0px 100px; display: flex; box-sizing: unset; justify-content: center; align-items: flex-start; gap: 50px; background: #FFF; }
|
||
}
|
||
|
||
@media (max-width: 699px) {
|
||
.c_xhd5k { display: flex; height: 42px; padding: 5px 10px; align-items: center; flex: 1 0 0; }
|
||
.c_z3ybu { position: absolute; left: 13px; top: 12px; color: #000; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_vphtp { width: 18px; height: 18px; fill: #5F1798; }
|
||
.c_ffjwp { width: 24px; height: 24px; }
|
||
.c_aihm6 { display: flex; justify-content: center; align-items: center; align-self: stretch; border-radius: 5px; background: #FFF; }
|
||
.c_4ykpn { display: flex; height: 104px; padding: 10px 10px; align-items: center; flex: 1 0 0; }
|
||
.c_nb6gy { display: flex; justify-content: center; align-items: center; align-self: stretch; border-radius: 5px; background: #FFF; }
|
||
.c_q00x6 { min-width: 230px; flex: 1 0 0; color: #000; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_mkcow { color: #000; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_uklyi { width: 20px; color: #000; text-align: center; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_l8kil {display: flex;padding: 5px 00px;align-items: center;border-radius: 5px;border: 1px solid rgba(95, 23, 152, 0.20);background: #FDFAFF;width: 35px;text-align: center;}
|
||
.c_5qh93 { height: 7px; flex: 1 0 0; fill: rgba(95, 23, 152, 0.20); background: rgba(95, 23, 152, 0.20);}
|
||
.c_jups4 { display: flex; padding: 10px; align-items: center; align-content: center; gap: 10px; align-self: stretch; flex-wrap: wrap; border-radius: 5px; background: #FFF; border: 1px solid #5F1798; }
|
||
.c_som9s { color: #FFF; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_aq9et { display: flex; padding: 19px 33px; justify-content: center; align-items: center; align-self: stretch; border-radius: 5px; background: #5F1798; }
|
||
.c_dtjoh { display: flex; width: 323px; flex-direction: column; align-items: flex-start; gap: 12px; flex-shrink: 0; }
|
||
.c_1gai0 { align-self: stretch; color: #000; text-align: center; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
|
||
.c_med8n { color: #5F1798; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
|
||
.c_g8o3y { display: flex; padding: 1.5px 10px; justify-content: center; align-items: center; border-radius: 30px; background: rgba(95, 23, 152, 0.20); }
|
||
.c_1pdx0 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; flex: 1 0 0; overflow: hidden; color: #000; text-overflow: ellipsis; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
|
||
.c_r5tzr { display: flex; justify-content: center; align-items: center; align-self: stretch; }
|
||
.c_965ia { width: 50px; height: 50px; aspect-ratio: 1/1; border-radius: 50px; }
|
||
.c_t9q2z { width: 189px; color: #000; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_zruk7 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
|
||
.c_k3nyf { display: flex; height: 50px; align-items: center; gap: 13px; align-self: stretch; }
|
||
.c_xc07u { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; overflow: hidden; color: rgba(58, 58, 58, 0.75); text-overflow: ellipsis; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_hni7n { align-self: stretch; color: #5F1798; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_qfcvm { align-self: stretch; color: rgba(58, 58, 58, 0.75); text-align: right; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_rtopc { display: flex; width: 335px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; flex-shrink: 0; }
|
||
.c_sbrxk { padding: 50px 0px 100px; display: flex; box-sizing: unset; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 50px 0; flex-wrap: wrap; background: #FFF; }
|
||
}
|
||
.c_sbrxk{z-index: 1000;}
|
||
#preview_poster{width: 335px;}
|
||
|
||
/* «Забыли пароль?» — второстепенная ссылка */
|
||
.login-forgot { font-size: 13px; color: #888; align-self: flex-start; }
|
||
.login-forgot:hover { color: #5F1798; text-decoration: underline; }
|
||
|
||
/* Подписи-подсказки под полями */
|
||
.login-hint { font-size: 12px; color: #888; align-self: flex-start; line-height: 1.3; margin-top: -6px; }
|
||
/* убираем большой нижний отступ у группы, за которой идёт подсказка */
|
||
.floating-group:has(+ .login-hint) { margin-bottom: 0; }
|
||
|
||
/* Микроанимация кнопки «Войти» */
|
||
.c_aq9et { cursor: pointer; box-shadow: 0 4px 14px -4px rgba(95,23,152,.5); transition: transform .18s, box-shadow .18s, background .18s; }
|
||
.c_aq9et:hover { background: #6d1ba9; transform: translateY(-2px); box-shadow: 0 10px 24px -6px rgba(95,23,152,.6); }
|
||
.c_aq9et:active { transform: translateY(0); box-shadow: 0 4px 12px -4px rgba(95,23,152,.5); }
|
||
@media (prefers-reduced-motion: reduce) { .c_aq9et:hover, .c_aq9et:active { transform: none; } }
|
||
|
||
/* Картинка слева от формы (только десктоп) */
|
||
.login-illustration { display: none; }
|
||
@media (min-width: 901px) {
|
||
.login-illustration { display: block; width: 340px; max-width: 38vw; height: auto; align-self: center; }
|
||
.c_sbrxk { gap: 80px; }
|
||
}
|
||
|
||
/* Вход через VK / Макс */
|
||
.login-social { display: flex; flex-direction: column; gap: 10px; align-self: stretch; margin-top: 4px; }
|
||
.login-social__or { display: flex; align-items: center; gap: 10px; color: #999; font-size: 13px; }
|
||
.login-social__or::before, .login-social__or::after { content: ''; flex: 1; height: 1px; background: #e5e5e5; }
|
||
.login-social__row { display: flex; gap: 10px; }
|
||
.login-social__btn { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 8px; background: #fff; border: 2px solid #ddd; color: #111; text-decoration: none; font-size: 15px; font-weight: 600; transition: border-color .18s, box-shadow .18s, transform .18s; }
|
||
.login-social__btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(0,0,0,.28); }
|
||
.login-social__btn:active { transform: translateY(0); }
|
||
.login-social__btn--vk:hover { border-color: #0077FF; }
|
||
.login-social__btn--max:hover { border-color: #7a3ff2; }
|
||
.login-social__logo { flex: 0 0 auto; display: block; width: 22px; height: 22px; }
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.login-social__btn:hover, .login-social__btn:active { transform: none; }
|
||
}
|
||
</style>
|
||
{{ footer.style() }}
|
||
{% endblock %}
|