472 lines
30 KiB
HTML
472 lines
30 KiB
HTML
{% extends "base.html" %}
|
||
{% import "/components/header.html" as header %}
|
||
{% import "/components/footer.html" as footer %}
|
||
{% import "components/profile_card.html" as profile_card %}
|
||
{% import "components/profile_nav.html" as profile_nav %}
|
||
|
||
{% block title %}Анкета{% endblock %}
|
||
|
||
|
||
|
||
{% block content %}
|
||
{{ header.section(user) }}
|
||
<section class="c_dg3k4">
|
||
<div class="c_gtoe9">
|
||
{{ profile_card.profile_card(user) }}
|
||
<div class="c_ru432">
|
||
{{ profile_nav.profile_nav(user, 'form') }}
|
||
<div class="c_tihtk" id="main">
|
||
<div class="c_aihm6 floating-group">
|
||
<label for="female_name_lastname" class="c_z3ybu floating-label">ФИО<span style="color:red">*</span></label>
|
||
<input name="female_name_lastname" id="female_name_lastname" class="c_xhd5k" required />
|
||
<span></span>
|
||
</div>
|
||
|
||
|
||
<label for="birthday" class="c_z3ybu floating-label">Дата рождения<span style="color:red">*</span></label>
|
||
|
||
<div class="c_aihm6 floating-group birthday">
|
||
<select id="day">
|
||
<option>1</option>
|
||
<option>2</option>
|
||
</select>
|
||
<select id="month">
|
||
<option>Январь</option>
|
||
<option>Февраль</option>
|
||
</select>
|
||
<select id="year">
|
||
<option>2000</option>
|
||
<option>2001</option>
|
||
</select>
|
||
<input type="date" id="birthday" name="birthday" class="c_xhd5k" required data-toast="Поле Дата рождения должно быть заполнено">
|
||
</div>
|
||
|
||
<div class="c_aihm6 floating-group">
|
||
<label for="living_place" class="c_z3ybu floating-label">Место проживания<span style="color:red">*</span></label>
|
||
<input name="living_place" id="living_place" class="c_xhd5k" required />
|
||
<span>Указать город</span>
|
||
</div>
|
||
|
||
<div class="c_nb6gy floating-group">
|
||
<label for="social_media" class="c_z3ybu floating-label">Социальные сети</label>
|
||
<textarea type="text" id="social_media" name="social_media" class="c_4ykpn" ></textarea>
|
||
<span>Вписать ссылки на аккаунт через запятую</span>
|
||
</div>
|
||
|
||
<div class="c_nb6gy floating-group">
|
||
<label for="marketplaces" class="c_z3ybu floating-label">Маркетплейсы</label>
|
||
<textarea type="text" id="marketplaces" name="marketplaces" class="c_4ykpn" ></textarea>
|
||
<span>Озон, Культмост, Яндекс и т.д.</span>
|
||
</div>
|
||
|
||
<div class="c_aihm6 floating-group">
|
||
<label for="email" class="c_z3ybu floating-label">Электронная почта<span style="color:red">*</span></label>
|
||
<input name="email" id="email" class="c_xhd5k" required />
|
||
<span></span>
|
||
</div>
|
||
|
||
<div class="c_aihm6 floating-group">
|
||
<label for="phone" class="c_z3ybu floating-label">Телефон<span style="color:red">*</span></label>
|
||
<input name="phone" id="phone" class="c_xhd5k" required />
|
||
<span></span>
|
||
</div>
|
||
|
||
<div class="c_nb6gy floating-group">
|
||
<label for="messengers" class="c_z3ybu floating-label">Мессенджеры<span style="color:red">*</span></label>
|
||
<textarea type="text" id="messengers" name="messengers" class="c_4ykpn" ></textarea>
|
||
<span>Перечислить через запятую</span>
|
||
</div>
|
||
|
||
<div class="c_nb6gy floating-group">
|
||
<label for="specialization" class="c_z3ybu floating-label">Специализация<span style="color:red">*</span></label>
|
||
<textarea type="text" id="specialization" name="specialization" class="c_4ykpn" required ></textarea>
|
||
<span>Например, графика, живопись, фотография скульптура, иллюстрация и т.д.</span>
|
||
</div>
|
||
|
||
<div class="c_aihm6 floating-group">
|
||
<label for="grade" class="c_z3ybu floating-label">Звание<span style="color:red">*</span></label>
|
||
<input name="grade" id="grade" class="c_xhd5k" required />
|
||
<span>Например, Член РСХ, ТСХ, МСХ</span>
|
||
</div>
|
||
|
||
<div class="c_nb6gy floating-group">
|
||
<label for="style" class="c_z3ybu floating-label">Стиль<span style="color:red">*</span></label>
|
||
<textarea type="text" id="style" name="style" class="c_4ykpn" required ></textarea>
|
||
<span>Например, реализм, натурализм, импрессионизм, символизм</span>
|
||
</div>
|
||
|
||
<div class="c_nb6gy floating-group">
|
||
<label for="art_types" class="c_z3ybu floating-label">Виды искусства<span style="color:red">*</span></label>
|
||
<textarea type="text" id="art_types" name="art_types" class="c_4ykpn" required ></textarea>
|
||
<span>Например, графика, живопись, фотография скульптура, иллюстрация и т.д.</span>
|
||
</div>
|
||
|
||
<div class="c_nb6gy floating-group">
|
||
<label for="genres" class="c_z3ybu floating-label">Жанры<span style="color:red">*</span></label>
|
||
<textarea type="text" id="genres" name="genres" class="c_4ykpn" required ></textarea>
|
||
<span>Например, пейзаж, иллюстрации, пейзаж природы, каллиграфия, натюрморт овощной, пейзаж архитектурный, пейзаж лесной, пейзаж парковый и т.д.</span>
|
||
</div>
|
||
|
||
<div class="c_nb6gy floating-group">
|
||
<label for="education" class="c_z3ybu floating-label">Образование<span style="color:red">*</span></label>
|
||
<textarea type="text" id="education" name="education" class="c_4ykpn" required ></textarea>
|
||
<span>Последовательно указывать художественную школу, училище, академию, творческую мастерскую , факультет и т.д., годы учебы и название заведения</span>
|
||
</div>
|
||
|
||
<div class="c_nb6gy floating-group">
|
||
<label for="unions" class="c_z3ybu floating-label">Творческие союзы и объединения<span style="color:red">*</span></label>
|
||
<textarea type="text" id="unions" name="unions" class="c_4ykpn" ></textarea>
|
||
<span>В каких союзах и творческих обществах состоите (перечислить)</span>
|
||
</div>
|
||
|
||
<div class="c_nb6gy floating-group">
|
||
<label for="rewards" class="c_z3ybu floating-label">Звания и награды</label>
|
||
<textarea type="text" id="rewards" name="rewards" class="c_4ykpn" ></textarea>
|
||
<span>Призы, грамоты, гранты и годы получения</span>
|
||
</div>
|
||
|
||
<div class="c_nb6gy floating-group">
|
||
<label for="projects" class="c_z3ybu floating-label">Участие в проектах, выставках и событиях</label>
|
||
<textarea type="text" id="projects" name="projects" class="c_4ykpn" ></textarea>
|
||
<span>Персональные, групповые, совместные: указать персональные выставки и участие в групповых выставках, совместных - указать жанр, год, место -город, название выставки или события, организатор, куратор - вверху последние выставки, внизу первые</span>
|
||
</div>
|
||
|
||
<div class="c_nb6gy floating-group">
|
||
<label for="publications" class="c_z3ybu floating-label">Публикации о художнике в СМИ</label>
|
||
<textarea type="text" id="publications" name="publications" class="c_4ykpn" ></textarea>
|
||
<span>Название издания публикации, год, на какой странице, социальная сеть в группах, интернет ресурсах, изданиях, сообществах, можно указывать ссылки на публикации</span>
|
||
</div>
|
||
|
||
<div class="c_aihm6 floating-group">
|
||
<label for="site" class="c_z3ybu floating-label">Сайт (если есть)</label>
|
||
<input name="site" id="site" class="c_xhd5k"/>
|
||
<span></span>
|
||
</div>
|
||
|
||
<div class="c_nb6gy floating-group">
|
||
<label for="material_manufacturer" class="c_z3ybu floating-label">Каких производителями материалов пользуетесь?<span style="color:red">*</span></label>
|
||
<textarea type="text" id="material_manufacturer" name="material_manufacturer" class="c_4ykpn" required ></textarea>
|
||
<span>Указать производителей материалов… Гамма, Луч, Невская палитра и т.д.</span>
|
||
</div>
|
||
|
||
<div class="c_nb6gy floating-group">
|
||
<label for="material_use" class="c_z3ybu floating-label">Какими материалами пользуетесь?<span style="color:red">*</span></label>
|
||
<textarea type="text" id="material_use" name="material_use" class="c_4ykpn" required ></textarea>
|
||
<span>Масло, акрил, гуашь, пастель, акварель, маркеры, линеры, карандаши, тушь и т.д.</span>
|
||
</div>
|
||
|
||
<div class="c_nb6gy floating-group">
|
||
<label for="buying_materials" class="c_z3ybu floating-label">Где в основном Вы покупаете художественные материалы?</label>
|
||
<textarea type="text" id="buying_materials" name="buying_materials" class="c_4ykpn" required ></textarea>
|
||
<span>Розничные магазины (указать названия), интернет магазины, сайты производителей худ. материалов, маркетплейсы( указать названия)</span>
|
||
</div>
|
||
|
||
<div class="c_nb6gy floating-group">
|
||
<label for="collaborate" class="c_z3ybu floating-label">С какими сотрудничаете галереями? если сотрудничаете</label>
|
||
<textarea type="text" id="collaborate" name="collaborate" class="c_4ykpn" ></textarea>
|
||
<span>Указать названия галерей или ничего не писать</span>
|
||
</div>
|
||
|
||
<div class="c_nb6gy floating-group">
|
||
<label for="meta_data.wishes" class="c_z3ybu floating-label">Чтобы Вы еще хотели видеть в нашем сервисе?</label>
|
||
<textarea type="text" id="meta_data.wishes" name="meta_data.wishes" class="c_4ykpn" required ></textarea>
|
||
<span>Указать пожелания или проблемы, которые беспокоят художника</span>
|
||
</div>
|
||
|
||
<div class="c_nb6gy floating-group">
|
||
<label for="master_classes" class="c_z3ybu floating-label">Проводите ли Вы мастер-классы и в каком направлении?<span style="color:red">*</span></label>
|
||
<textarea type="text" id="master_classes" name="master_classes" class="c_4ykpn" ></textarea>
|
||
<span>Указать перечень в каком направлении проводите мастер-классы</span>
|
||
</div>
|
||
|
||
<div class="c_nb6gy floating-group">
|
||
<label for="materials_use_in_master_classes" class="c_z3ybu floating-label">Какие материалы используете на мастер-классах?</label>
|
||
<textarea type="text" id="materials_use_in_master_classes" name="materials_use_in_master_classes" class="c_4ykpn" ></textarea>
|
||
<span>Указать список названий материалов на мастер-классы</span>
|
||
</div>
|
||
|
||
<div class="c_aihm6 floating-group">
|
||
<label for="print_merch" class="c_z3ybu floating-label">Готовы ли Вы печатать мерч на свои произведения с подписанием договора о сотрудничестве с отчислением авторского вознаграждения?</label>
|
||
<input name="print_merch" id="print_merch" class="c_xhd5k" required />
|
||
<span>Указать Да или Нет или если нет, то по какой причине</span>
|
||
</div>
|
||
|
||
<div class="c_aihm6 floating-group">
|
||
<label for="own_workshop" class="c_z3ybu floating-label">Имеете ли Вы собственную мастерскую в своем городе?</label>
|
||
<input name="own_workshop" id="own_workshop" class="c_xhd5k" required />
|
||
<span>Указать да или нет и площадь</span>
|
||
</div>
|
||
|
||
<div class="c_aihm6 floating-group">
|
||
<label for="workshop_tour" class="c_z3ybu floating-label">Готовы ли Вы принимать экскурсии туристов в свою мастерскую, как потенциальных покупателей?<span style="color:red">*</span></label>
|
||
<input name="workshop_tour" id="workshop_tour" class="c_xhd5k" required />
|
||
<span>Указать Да или Нет</span>
|
||
</div>
|
||
|
||
<div class="c_nb6gy floating-group">
|
||
<label for="biography" class="c_z3ybu floating-label">Биография<span style="color:red">*</span></label>
|
||
<textarea type="text" id="biography" name="biography" class="c_4ykpn" ></textarea>
|
||
<span></span>
|
||
</div>
|
||
|
||
<button class="c_aq9et" id="createBtn">
|
||
<span class="c_som9s">{% if notify %}Продолжить{% else %}Сохранить{% endif %}</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<script>
|
||
document.getElementById('female_name_lastname').value = `{% if user.get('female_name_lastname') is not none %}{{user.get('female_name_lastname','') }}{% endif %}`
|
||
document.getElementById('birthday').value = `{% if user.get('birthday') is not none %}{{user.get('birthday','') }}{% endif %}`
|
||
document.getElementById('living_place').value = `{% if user.get('living_place') is not none %}{{user.get('living_place','') }}{% endif %}`
|
||
document.getElementById('social_media').value = `{% if user.get('social_media') is not none %}{{user.get('social_media','') }}{% endif %}`
|
||
document.getElementById('marketplaces').value = `{% if user.get('marketplaces') is not none %}{{user.get('marketplaces','') }}{% endif %}`
|
||
document.getElementById('email').value = `{% if user.get('email') is not none %}{{user.get('email','') }}{% endif %}`
|
||
document.getElementById('phone').value = `{% if user.get('phone') is not none %}{{user.get('phone','') }}{% endif %}`
|
||
document.getElementById('messengers').value = `{% if user.get('messengers') is not none %}{{user.get('messengers','') }}{% endif %}`
|
||
document.getElementById('specialization').value = `{% if user.get('specialization') is not none %}{{user.get('specialization','') }}{% endif %}`
|
||
document.getElementById('grade').value = `{% if user.get('grade') is not none %}{{user.get('grade','') }}{% endif %}`
|
||
document.getElementById('style').value = `{% if user.get('style') is not none %}{{user.get('style','') }}{% endif %}`
|
||
document.getElementById('art_types').value = `{% if user.get('art_types') is not none %}{{user.get('art_types','') }}{% endif %}`
|
||
document.getElementById('genres').value = `{% if user.get('genres') is not none %}{{user.get('genres','') }}{% endif %}`
|
||
document.getElementById('education').value = `{% if user.get('education') is not none %}{{user.get('education','') }}{% endif %}`
|
||
document.getElementById('unions').value = `{% if user.get('unions') is not none %}{{user.get('unions','') }}{% endif %}`
|
||
document.getElementById('rewards').value = `{% if user.get('rewards') is not none %}{{user.get('rewards','') }}{% endif %}`
|
||
document.getElementById('projects').value = `{% if user.get('projects') is not none %}{{user.get('projects','') }}{% endif %}`
|
||
document.getElementById('publications').value = `{% if user.get('publications') is not none %}{{user.get('publications','') }}{% endif %}`
|
||
document.getElementById('site').value = `{% if user.get('site') is not none %}{{user.get('site','') }}{% endif %}`
|
||
document.getElementById('material_manufacturer').value = `{% if user.get('material_manufacturer') is not none %}{{user.get('material_manufacturer','') }}{% endif %}`
|
||
document.getElementById('material_use').value = `{% if user.get('material_use') is not none %}{{user.get('material_use','') }}{% endif %}`
|
||
document.getElementById('buying_materials').value = `{% if user.get('buying_materials') is not none %}{{user.get('buying_materials','') }}{% endif %}`
|
||
document.getElementById('collaborate').value = `{% if user.get('collaborate') is not none %}{{user.get('collaborate','') }}{% endif %}`
|
||
document.getElementById('meta_data.wishes').value = `{% if user.get('meta_data.wishes') is not none %}{{user.get('meta_data.wishes','') }}{% endif %}`
|
||
document.getElementById('master_classes').value = `{% if user.get('master_classes') is not none %}{{user.get('master_classes','') }}{% endif %}`
|
||
document.getElementById('materials_use_in_master_classes').value = `{% if user.get('materials_use_in_master_classes') is not none %}{{user.get('materials_use_in_master_classes','') }}{% endif %}`
|
||
document.getElementById('print_merch').value = `{% if user.get('print_merch') is not none %}{{user.get('print_merch','') }}{% endif %}`
|
||
document.getElementById('own_workshop').value = `{% if user.get('own_workshop') is not none %}{{user.get('own_workshop','') }}{% endif %}`
|
||
document.getElementById('workshop_tour').value = `{% if user.get('workshop_tour') is not none %}{{user.get('workshop_tour','') }}{% endif %}`
|
||
document.getElementById('biography').value = `{% if user.get('biography') is not none %}{{user.get('biography','') }}{% endif %}`
|
||
|
||
</script>
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded",()=>{let e=document.getElementById("day"),t=document.getElementById("month"),l=document.getElementById("year"),n=document.getElementById("birthday"),a=new Date().getFullYear(),u=["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"];function i(t=31){e.innerHTML="";for(let l=1;l<=t;l++){let n=document.createElement("option");n.value=String(l),n.text=String(l),e.appendChild(n)}}function o(){t.innerHTML="",u.forEach((e,l)=>{let n=document.createElement("option");n.value=String(l+1),n.text=e,t.appendChild(n)})}function v(e=1900,t=a){l.innerHTML="";for(let n=t;n>=e;n--){let u=document.createElement("option");u.value=String(n),u.text=String(n),l.appendChild(u)}}let d=e=>String(e).padStart(2,"0");function p(e){if(!e)return;let n=e.split("-");if(3!==n.length)return;let[a,u,i]=n.map(Number);g(l,String(a)),g(t,String(u)),s(a,u,i)}function r(){let a=Number(l.value)||1900,u=Number(t.value)||1,o=Number(e.value)||1,v=new Date(a,u,0).getDate();e.options.length!==v&&i(v),o>v&&(o=v);let p=`${a}-${d(u)}-${d(o)}`;n.value=p,g(e,String(o))}function s(t,l,n){let a=new Date(Number(t),Number(l),0).getDate(),u=Number(e.value)||1;i(a),g(e,String(Math.min(n||u,a)))}function g(e,t){let l=Array.from(e.options).find(e=>e.value===t||e.text===t);if(l)e.value=l.value;else{let n=document.createElement("option");n.text=t,n.value=t,e.appendChild(n),e.value=t}}o(),v();let h=n.value?Number(n.value.split("-")[0]):l.options.length?Number(l.options[0].value):a,c=n.value?Number(n.value.split("-")[1]):1;n.value&&n.value.split("-")[2];let f=new Date(h,c,0).getDate();i(f),n.value?p(n.value):(!l.value&&l.options.length&&(l.value=l.options[0].value),!t.value&&t.options.length&&(t.value=t.options[0].value),!e.value&&e.options.length&&(e.value=e.options[0].value),r()),n.addEventListener("change",()=>{p(n.value)}),l.addEventListener("change",()=>{let e=Number(l.value),n=Number(t.value);s(e,n),r()}),t.addEventListener("change",()=>{let e=Number(l.value),n=Number(t.value);s(e,n),r()}),e.addEventListener("change",r)});
|
||
</script>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const createBtn = document.getElementById('createBtn');
|
||
|
||
createBtn.addEventListener('click', async (e) => {
|
||
e.preventDefault();
|
||
|
||
payload = {
|
||
'female_name_lastname': document.getElementById('female_name_lastname').value,
|
||
'birthday': document.getElementById('birthday').value,
|
||
'living_place': document.getElementById('living_place').value,
|
||
'social_media': document.getElementById('social_media').value,
|
||
'marketplaces': document.getElementById('marketplaces').value,
|
||
'email': document.getElementById('email').value,
|
||
'phone': document.getElementById('phone').value,
|
||
'messengers': document.getElementById('messengers').value,
|
||
'specialization': document.getElementById('specialization').value,
|
||
'grade': document.getElementById('grade').value,
|
||
'style': document.getElementById('style').value,
|
||
'art_types': document.getElementById('art_types').value,
|
||
'genres': document.getElementById('genres').value,
|
||
'education': document.getElementById('education').value,
|
||
'unions': document.getElementById('unions').value,
|
||
'rewards': document.getElementById('rewards').value,
|
||
'projects': document.getElementById('projects').value,
|
||
'publications': document.getElementById('publications').value,
|
||
'site': document.getElementById('site').value,
|
||
'material_manufacturer': document.getElementById('material_manufacturer').value,
|
||
'material_use': document.getElementById('material_use').value,
|
||
'buying_materials': document.getElementById('buying_materials').value,
|
||
'collaborate': document.getElementById('collaborate').value,
|
||
'meta_data.wishes': document.getElementById('meta_data.wishes').value,
|
||
'master_classes': document.getElementById('master_classes').value,
|
||
'materials_use_in_master_classes': document.getElementById('materials_use_in_master_classes').value,
|
||
'print_merch': document.getElementById('print_merch').value,
|
||
'own_workshop': document.getElementById('own_workshop').value,
|
||
'workshop_tour': document.getElementById('workshop_tour').value,
|
||
'biography': document.getElementById('biography').value}
|
||
|
||
|
||
|
||
try {
|
||
const res = await fetch(`/api/user/form`, {
|
||
method: 'PUT',
|
||
// headers:{
|
||
|
||
// }
|
||
body: JSON.stringify(payload)
|
||
});
|
||
|
||
if (res.ok) {
|
||
showToast({message: 'Анкета сохранена!', duration:2500});
|
||
{% if notify %}
|
||
const targetHash = window.location.hash;
|
||
if (targetHash) {
|
||
const el = document.querySelector(targetHash);
|
||
if (el) {
|
||
el.scrollIntoView({ behavior: 'smooth' });
|
||
}
|
||
}
|
||
window.location.reload();
|
||
{% endif %}
|
||
} else {
|
||
showToast({message: 'Ошибка при сохранение!', status: 'error', duration:2500});
|
||
}
|
||
} catch (err) {
|
||
console.error(err);
|
||
showToast({message: 'Ошибка соединения с сервером!', status: 'error', duration:2500});
|
||
}
|
||
});
|
||
|
||
|
||
});
|
||
|
||
|
||
</script>
|
||
{{ footer.section(user) }}
|
||
{% endblock %}
|
||
|
||
{% block head %}
|
||
{{ header.style() }}
|
||
{{ profile_nav.style() }}
|
||
<style>
|
||
.birthday{position: relative;}
|
||
.birthday>svg{position: absolute; right: 12px;}
|
||
.birthday>input{padding-left: 22px;}
|
||
.birthday>select{all:unset;position: absolute;
|
||
background: white;}
|
||
.birthday>#day{left: 22px;
|
||
width: 25%;
|
||
text-align: center;}
|
||
.birthday>#month{left: calc(22px + 25%);
|
||
width: 25%;
|
||
text-align: center;}
|
||
.birthday>#year{left: calc(22px + 50%);
|
||
width: 25%;
|
||
text-align: center;}
|
||
</style>
|
||
<style>
|
||
.c_aq9et { position: sticky;
|
||
bottom: 115px;
|
||
z-index: 5;display: flex; padding: 19px 33px; justify-content: center; align-items: center; align-self: stretch; border-radius: 5px; background: #5F1798; }
|
||
.c_som9s { color: #FFF; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
|
||
.poster-group {position: relative;}
|
||
|
||
.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;}
|
||
|
||
|
||
/* Красная ошибка */
|
||
.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 {margin-bottom: 1.5rem;}
|
||
|
||
.floating-label {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_aihm6 { display: flex; justify-content: center; align-items: baseline; border-radius: 5px; background: #FFF; }
|
||
.c_aihm6{display: flex; flex-direction: column;flex-wrap: nowrap;}
|
||
.floating-group{width: 100%;
|
||
gap: 7px;
|
||
display: flex;
|
||
flex-direction: column;}
|
||
.floating-group>input{box-sizing: border-box;}
|
||
/* Mobile */
|
||
@media (max-width: 699px) {
|
||
.c_mrl59 { align-items: center; background: #5F1798; border-radius: 25px; bottom: -15px; display: flex; height: 50px; justify-content: center; position: absolute; right: -15px; width: 50px; }
|
||
|
||
|
||
.c_iiehk { align-items: flex-end; align-self: stretch; border-radius: 5px; display: flex; flex-direction: column; gap: 20px; }
|
||
.c_nnsh6 { align-content: center; align-items: baseline; display: flex; flex-shrink: 0; justify-content: space-around; padding: 3px 0; row-gap: 8px; width: 315px; flex-direction: column;}.c_3ihvi { align-items: center; background: #FFF; display: flex; flex-direction: column; flex-shrink: 0; gap: 15px; justify-content: center; padding: 15px 10px; width: 335px; }
|
||
.c_nnsh6>a, .c_nnsh6>a>span{width: 100%;box-shadow: none;}
|
||
.c_nnsh6>a:hover{background: #f7f7f7;border-radius: 8px;}
|
||
.c_nnsh6>a:active{background: #f7f7f7;border-radius: 8px;}
|
||
.c_tihtk { padding: 10px; display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 12px; flex-shrink: 0; }
|
||
|
||
.c_ru432 { align-content: flex-start; align-items: flex-start; background: #FFF; border-radius: 5px; display: flex; flex-wrap: wrap; justify-content: center; padding: 15px 0; width: 335px; }
|
||
.c_gtoe9 { align-items: center; display: flex; flex-direction: column; gap: 30px; width: 335px; }
|
||
.c_dg3k4 { align-items: center; background: #F6EBFF; display: flex; flex-direction: column; padding: 50px 0; }
|
||
}
|
||
|
||
/* Tablet */
|
||
@media (min-width: 700px) and (max-width: 900px) {
|
||
.c_iiehk { align-items: center; border-radius: 5px; display: flex; flex-direction: column; gap: 20px; width: 335px; }
|
||
.c_nnsh6>a>img{display: none;}
|
||
.c_nnsh6 { align-content: center; align-items: center; align-self: stretch; display: flex; flex-wrap: wrap; gap: 0 5px; justify-content: center; padding: 3px 0; }
|
||
.c_3ihvi { align-items: flex-start; align-self: stretch; display: flex; flex-direction: column; gap: 15px; justify-content: center; padding: 15px 85px; }
|
||
.c_tihtk { padding: 10px 30px; display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 12px; flex-shrink: 0; }
|
||
.c_ru432 { align-items: center; align-self: stretch; background: #FFF; border-radius: 5px; display: flex; flex-direction: column; padding: 15px 0; }
|
||
.c_gtoe9 { align-items: center; align-self: stretch; display: flex; flex-direction: column; gap: 30px; padding: 0 49px; }
|
||
.c_dg3k4 { align-items: center; background: #F6EBFF; display: flex; flex-direction: column; padding: 50px 0; }
|
||
}
|
||
.floating-label{font-weight: 700; color: #111;}
|
||
.floating-group>span{color: #666; font-style: italic;}
|
||
/* Desktop */
|
||
@media (min-width: 901px) {
|
||
.c_iiehk { align-items: flex-end; border-radius: 5px; display: flex; flex-direction: column; gap: 20px; width: 310px; }
|
||
.c_nnsh6>a>img{display: none;}
|
||
.c_nnsh6 { align-content: center; align-items: center; align-self: stretch; display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; padding-bottom: 5px; }
|
||
.c_3ihvi { align-items: flex-start; display: flex; flex-direction: column; gap: 15px; justify-content: center; padding: 20px 0; width: 1045px; }
|
||
.c_tihtk { padding: 10px 100px; display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 12px; flex-shrink: 0; }
|
||
|
||
}</style>
|
||
{{ footer.style() }}
|
||
{% endblock %} |