899 lines
50 KiB
HTML
899 lines
50 KiB
HTML
{% import "competition/list.html" as competition %}
|
||
{% import "components/checkbox.html" as checkbox %}
|
||
|
||
{% macro section(user, competition) -%}
|
||
<form class="c_sbrxk">
|
||
<div class="c_dtjoh">
|
||
<h3>Выбор</h3>
|
||
|
||
<label class="offer-label">
|
||
<input type="checkbox"
|
||
id="artistCheck"
|
||
class="offer-checkbox"
|
||
onchange="toggleType('artistCheck')">
|
||
<span class="offer-text">Художников</span>
|
||
</label>
|
||
|
||
<label class="offer-label">
|
||
<input type="checkbox"
|
||
id="paintCheck"
|
||
class="offer-checkbox"
|
||
onchange="toggleType('paintCheck')">
|
||
<span class="offer-text">Картин</span>
|
||
</label>
|
||
<br>
|
||
<!-- <label class="offer-label">
|
||
<input type="checkbox" id="competitionCheck" class="offer-checkbox" checked>
|
||
<span class="offer-text">Конкурс</span>
|
||
</label>
|
||
<label class="offer-label">
|
||
<input type="checkbox" id="exhibitionCheck" class="offer-checkbox" disabled>
|
||
<span class="offer-text">Выставка</span>
|
||
</label>
|
||
<label class="offer-label">
|
||
<input type="checkbox" id="check_3" class="offer-checkbox" disabled>
|
||
<span class="offer-text">Фестиваль ...</span>
|
||
</label>
|
||
<label class="offer-label">
|
||
<input type="checkbox" id="check_4" class="offer-checkbox" disabled>
|
||
<span class="offer-text">Пленэр ...</span>
|
||
</label>
|
||
<br> -->
|
||
<!-- Афиша (файл) -->
|
||
<div class="c_aihm6 floating-group file-group poster-group">
|
||
<!-- Отображение имени файла с обрезкой -->
|
||
<div class="file-name-display" id="poster_name">
|
||
Выберите изображение
|
||
</div>
|
||
|
||
<!-- Скрытый input -->
|
||
<input type="file" id="poster" name="poster" class="c_xhd5k hidden-file" accept="image/*">
|
||
|
||
<!-- Плавающий лейбл -->
|
||
<label for="poster" class="c_z3ybu floating-label">Афиша</label>
|
||
|
||
<!-- Иконка справа -->
|
||
<svg class="file-icon" width="2237" height="24" viewBox="0 0 2237 24" fill="none"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19ZM6 17H18L14.25 12L11.25 16L9 13L6 17Z"
|
||
fill="#5F1798" />
|
||
<path
|
||
d="M1344 21C1343.45 21 1342.98 20.8042 1342.59 20.4125C1342.2 20.0208 1342 19.55 1342 19V5C1342 4.45 1342.2 3.97917 1342.59 3.5875C1342.98 3.19583 1343.45 3 1344 3H1358C1358.55 3 1359.02 3.19583 1359.41 3.5875C1359.8 3.97917 1360 4.45 1360 5V19C1360 19.55 1359.8 20.0208 1359.41 20.4125C1359.02 20.8042 1358.55 21 1358 21H1344ZM1344 19H1358V5H1344V19ZM1345 17H1357L1353.25 12L1350.25 16L1348 13L1345 17Z"
|
||
fill="#5F1798" />
|
||
<path
|
||
d="M2217.5 21C2216.95 21 2216.48 20.8042 2216.09 20.4125C2215.7 20.0208 2215.5 19.55 2215.5 19V5C2215.5 4.45 2215.7 3.97917 2216.09 3.5875C2216.48 3.19583 2216.95 3 2217.5 3H2231.5C2232.05 3 2232.52 3.19583 2232.91 3.5875C2233.3 3.97917 2233.5 4.45 2233.5 5V19C2233.5 19.55 2233.3 20.0208 2232.91 20.4125C2232.52 20.8042 2232.05 21 2231.5 21H2217.5ZM2217.5 19H2231.5V5H2217.5V19ZM2218.5 17H2230.5L2226.75 12L2223.75 16L2221.5 13L2218.5 17Z"
|
||
fill="#5F1798" />
|
||
</svg>
|
||
|
||
</div>
|
||
<!-- Название -->
|
||
<div class="c_aihm6 floating-group">
|
||
<input type="text" id="title" name="title" class="c_xhd5k">
|
||
<label for="title" class="c_z3ybu floating-label">Название конкурса</label>
|
||
</div>
|
||
|
||
<!-- Тема -->
|
||
<div class="c_aihm6 floating-group">
|
||
<input type="text" id="topic" name="topic" class="c_xhd5k">
|
||
<label for="topic" class="c_z3ybu floating-label">Тема конкурса</label>
|
||
</div>
|
||
<div class="c_aihm6 floating-group">
|
||
<input readonly name="nominations" id="nominations" class="c_xhd5k" data-value="[]" data-select="1" data-radio="0" data-label="Сохранить" data-custom_placeholder="..." data-custom="1" data-title="Добавить новые номинации">
|
||
<label for="nominations" class="c_z3ybu floating-label">Номинации</label>
|
||
</div>
|
||
|
||
<div class="c_aihm6 floating-group">
|
||
<input type="datetime-local" id="datetime_start" name="datetime_start" class="c_xhd5k">
|
||
<label for="datetime_start" class="c_z3ybu floating-label">Начало конкурса (дата и время)</label>
|
||
</div>
|
||
|
||
<div class="c_aihm6 floating-group">
|
||
<input type="date" id="date_finish" name="date_finish" class="c_xhd5k">
|
||
<label for="date_finish" class="c_z3ybu floating-label">Дата окончания конкурса</label>
|
||
</div>
|
||
|
||
|
||
<!-- Короткое описание -->
|
||
<div class="c_nb6gy floating-group">
|
||
<textarea type="text" id="short_desc" name="short_desc" class="c_4ykpn"></textarea>
|
||
<label for="short_desc" class="c_z3ybu floating-label">Короткое описание</label>
|
||
</div>
|
||
|
||
<div class="c_aihm6 floating-group">
|
||
<input type="text" id="address" name="address" class="c_xhd5k">
|
||
<label for="address" class="c_z3ybu floating-label">Адресс для отправки картин</label>
|
||
</div>
|
||
|
||
|
||
<!-- Переключатель -->
|
||
<div class="toggle-group">
|
||
<label class="toggle-option active" data-type="file">
|
||
<input type="radio" name="rules_type" value="file" checked>
|
||
Файл
|
||
</label>
|
||
<label class="toggle-option" data-type="link">
|
||
<input type="radio" name="rules_type" value="link">
|
||
Ссылка
|
||
</label>
|
||
</div>
|
||
|
||
<!-- Блок файла -->
|
||
<div class="c_nb6gy floating-group file-group poster-group" id="file-block">
|
||
<div class="file-name-display" id="doc_name">Выберите файл</div>
|
||
<input type="file" id="rules" name="rules" class="c_4ykpn hidden-file" accept=".pdf,.doc,.docx">
|
||
<label for="rules" class="c_z3ybu floating-label">Условия конкурса (PDF, DOC)</label>
|
||
|
||
<svg class="file-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M14 2H6C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V8L14 2Z" stroke="#5F1798" stroke-width="2" stroke-linejoin="round"/>
|
||
<path d="M14 2V8H20" stroke="#5F1798" stroke-width="2" stroke-linejoin="round"/>
|
||
<path d="M12 18V12" stroke="#5F1798" stroke-width="2" stroke-linecap="round"/>
|
||
<path d="M9 15H15" stroke="#5F1798" stroke-width="2" stroke-linecap="round"/>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- Блок ссылки -->
|
||
<div class="c_aihm6 floating-group" id="link-block" style="display: none;">
|
||
<input type="url" id="rules_link" name="rules_link" class="c_xhd5k" placeholder="https://">
|
||
<label for="rules_link" class="c_z3ybu floating-label">Условия конкурса (ссылка)</label>
|
||
<div id="link-error" class="error-message" style="display:none; color:#e74c3c; font-size:0.85em; margin-top:4px;"></div>
|
||
</div>
|
||
|
||
<!-- Количество картин -->
|
||
<div class="c_jups4">
|
||
<span class="c_q00x6" id="past_select_val">Количество картин для конкурса</span>
|
||
<label class="c_mkcow">Минимум</label>
|
||
<input type="number" id="min_val" name="min_paintings" class="c_l8kil" value="1" min="1">
|
||
<label class="c_mkcow">Максимум</label>
|
||
<input type="number" id="max_val" name="max_paintings" class="c_l8kil" value="10" min="1" max="99">
|
||
<!-- <input type="range" id="select_val" name="selected_count" class="c_5qh93" min="1" max="10" value="3"> -->
|
||
</div>
|
||
<!--
|
||
<div class="fl">
|
||
<span class="c_2fr39 b_tfnz2">Публикация запланирована на</span>
|
||
</div>
|
||
|
||
<label class="offer-label">
|
||
<input type="checkbox" id="emailsNotify" class="offer-checkbox">
|
||
<span class="offer-text">Рассылка художникам приглашения на почту</span>
|
||
</label>
|
||
<label class="offer-label">
|
||
<input type="checkbox" id="serviceSocial" class="offer-checkbox">
|
||
<span class="offer-text">Публикация в соц. сетях сервиса</span>
|
||
</label>
|
||
<label class="offer-label">
|
||
<input type="checkbox" id="userSocial" class="offer-checkbox">
|
||
<span class="offer-text">Публикация в личных соц. сетях</span>
|
||
</label>
|
||
-->
|
||
<button class="c_aq9et" id="createBtn">
|
||
<span class="c_som9s">Сохранить изменения</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Превью остаётся без изменений -->
|
||
<div class="c_rtopc">
|
||
<h2 class="c_1gai0">Карточка конкурса</h2>
|
||
<article class="c_9fgdh b_ax8vz">
|
||
<div class="b_ornr9">
|
||
<div id="preview_poster_back"
|
||
style="position:absolute;inset:0;filter:blur(3px)">
|
||
</div>
|
||
<picture>
|
||
<img id="preview_poster" crossorigin="anonymous" fetchpriority="high" loading="eager" alt="Загрузите афишу" class="b_ornr9">
|
||
</picture>
|
||
</div>
|
||
<div class="c_z3dpx b_73p10">
|
||
<div class="c_c4wam b_vabj9">
|
||
<span class="c_95csi b_0jst1">Формируется</span>
|
||
</div>
|
||
<header class="c_m876y b_9xtz9">
|
||
<h3 class="c_hysjg b_8f3uh" id="preview_title"></h3>
|
||
</header>
|
||
<p class="c_2fr39 b_tfnz2" id="preview_topic"></p>
|
||
<div class="c_dbbe4 b_otttb">
|
||
{% if user %}
|
||
<img crossorigin="anonymous" fetchpriority="high" loading="eager" class="c_pm80w b_a68fq" src="/a/{{user._id}}" alt="{{ user.username | e }}">
|
||
<div class="c_4402p b_ntazj">
|
||
<p class="c_kvah4 b_ghosy">{{ user.username }}</p>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
<p class="c_sihck b_s6ool" id="preview_desc"></p>
|
||
<p class="c_2fr39 b_tfnz2">Подробнее</p>
|
||
<p class="c_drpqj b_mp1wb">Дата создания</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</form>
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
/* ---------- Utility helpers (removed) ---------- */
|
||
|
||
/* Toggle visibility of a block (flex / none) */
|
||
function toggleBlock(id, show) {
|
||
document.querySelector(id).style.display = show ? 'flex' : 'none';
|
||
}
|
||
|
||
/* Reset an input field and hide its error */
|
||
function resetInput(inputId, errorId) {
|
||
document.querySelector(inputId).value = '';
|
||
document.querySelector(errorId).style.display = 'none';
|
||
}
|
||
|
||
/* Show an error message */
|
||
function showError(errorId, msg) {
|
||
const el = document.querySelector(errorId);
|
||
el.textContent = msg;
|
||
el.style.display = 'flex';
|
||
el.style.position = 'absolute';
|
||
el.style.bottom = '-1.6em';
|
||
}
|
||
|
||
/* ---------- Toggle between file / link ---------- */
|
||
function setupToggle(toggleClass, fileBlockId, linkBlockId, fileInputId, linkInputId, linkErrorId) {
|
||
const buttons = document.querySelectorAll(toggleClass);
|
||
buttons.forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
// clear previous active state
|
||
buttons.forEach(b => b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
|
||
const isFile = btn.dataset.type === 'file';
|
||
toggleBlock(fileBlockId, isFile);
|
||
toggleBlock(linkBlockId, !isFile);
|
||
|
||
if (isFile) {
|
||
resetInput(linkInputId, linkErrorId);
|
||
} else {
|
||
resetInput(fileInputId, linkErrorId); // same error element is used
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
/* ---------- File‑name display ---------- */
|
||
function setupFileNameDisplay(inputId, outputId) {
|
||
const input = document.querySelector(inputId);
|
||
input.addEventListener('change', () => {
|
||
const name = input.files[0] ? input.files[0].name : 'Выберите файл';
|
||
document.querySelector(outputId).textContent = name;
|
||
});
|
||
}
|
||
|
||
/* ---------- Link validation ---------- */
|
||
function validateHttpsLink(inputId, errorId) {
|
||
const value = document.querySelector(inputId).value.trim();
|
||
if (!value) return true; // empty is allowed (handled elsewhere)
|
||
|
||
if (!value.startsWith('https://')) {
|
||
showError(errorId, 'Ссылка должна начинаться с https://');
|
||
return false;
|
||
}
|
||
|
||
try {
|
||
new URL(value);
|
||
document.querySelector(errorId).style.display = 'none';
|
||
return true;
|
||
} catch {
|
||
showError(errorId, 'Некорректная ссылка');
|
||
return false;
|
||
}
|
||
}
|
||
|
||
/* ---------- Initialization ---------- */
|
||
|
||
|
||
setupToggle(
|
||
'.toggle-option',
|
||
'#file-block',
|
||
'#link-block',
|
||
'#rules',
|
||
'#rules_link',
|
||
'#link-error'
|
||
);
|
||
|
||
setupFileNameDisplay('#rules', '#doc_name');
|
||
|
||
/* -------------------------------------------------
|
||
Attach link‑field validation & form‑submit handling
|
||
for an arbitrary toggle group.
|
||
------------------------------------------------- */
|
||
function bindLinkValidation({
|
||
linkInputSelector, // selector for the <input type="url">
|
||
linkErrorSelector, // selector for the error <div/span>
|
||
formSelector = 'form'// form to listen on (default = first form)
|
||
}) {
|
||
const linkInput = document.querySelector(linkInputSelector);
|
||
const linkError = document.querySelector(linkErrorSelector);
|
||
const form = document.querySelector(formSelector);
|
||
|
||
if (!linkInput || !linkError || !form) return; // safety guard
|
||
|
||
// --- live feedback -------------------------------------------------
|
||
linkInput.addEventListener('blur', () =>
|
||
validateHttpsLink(linkInputSelector, linkErrorSelector)
|
||
);
|
||
|
||
linkInput.addEventListener('input', () => {
|
||
linkError.style.display = 'none';
|
||
});
|
||
|
||
// --- submit validation ---------------------------------------------
|
||
form.addEventListener('submit', e => {
|
||
const activeBtn = document.querySelector('.toggle-option.active');
|
||
const active = activeBtn ? activeBtn.dataset.type : null;
|
||
|
||
// only run validation when the *current* active option is a link
|
||
if (active === 'link') {
|
||
const valid = validateHttpsLink(linkInputSelector, linkErrorSelector);
|
||
if (!valid) e.preventDefault();
|
||
}
|
||
// extra file‑validation could be added here
|
||
});
|
||
}
|
||
|
||
/* -------------------------------------------------
|
||
Initialise both toggle groups (tizer & rules)
|
||
------------------------------------------------- */
|
||
bindLinkValidation({
|
||
linkInputSelector: '#rules_link',
|
||
linkErrorSelector: '#link-error'
|
||
});
|
||
|
||
});
|
||
</script>
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const competition = JSON.parse({{competition|tojson}})
|
||
const competitionId = competition._id
|
||
|
||
document.getElementById('title').value = competition.title;
|
||
document.getElementById('preview_title').textContent = competition.title;
|
||
|
||
function setDateOrDateTimeLocal(elId, isoString) {
|
||
if (!isoString) return;
|
||
|
||
const s = isoString.replace(/^"|"$/g, ""); // на случай двойных кавычек
|
||
const [datePart, timePart = "00:00:00"] = s.split("T");
|
||
|
||
const [y, m, d] = datePart.split("-").map(Number);
|
||
const [hh, mm, ss = "0"] = timePart.split(":");
|
||
|
||
// Date constructor: month is 0-based
|
||
const dt = new Date(y, m - 1, d, Number(hh), Number(mm), Number(ss));
|
||
|
||
// Подготовим строку для input (локальное время)
|
||
const pad = (n) => String(n).padStart(2, "0");
|
||
const value = `${dt.getFullYear()}-${pad(dt.getMonth() + 1)}-${pad(dt.getDate())}` +
|
||
`T${pad(dt.getHours())}:${pad(dt.getMinutes())}:${pad(dt.getSeconds())}`;
|
||
|
||
document.getElementById(elId).value = value;
|
||
}
|
||
|
||
function setDateOnly(elId, isoString) {
|
||
if (!isoString) return;
|
||
const s = isoString.replace(/^"|"$/g, "");
|
||
const datePart = s.split("T")[0];
|
||
document.getElementById(elId).value = datePart; // YYYY-MM-DD
|
||
}
|
||
|
||
setDateOnly("date_finish", competition.date_finish);
|
||
setDateOrDateTimeLocal("datetime_start", competition.datetime_start);
|
||
|
||
document.getElementById('short_desc').value = competition.short_desc ;
|
||
document.getElementById('preview_desc').textContent = competition.short_desc ;
|
||
|
||
document.getElementById('address').value = competition.address;
|
||
document.getElementById('topic').value = competition.topic;
|
||
document.getElementById('preview_topic').textContent = competition.topic;
|
||
|
||
if (competition.rules_link){
|
||
document.getElementById('rules_link').value = competition.rules_link;
|
||
document.getElementById('file-block').style.display = 'none';
|
||
document.getElementById('link-block').style.display = 'flex';
|
||
const select = document.querySelectorAll('.toggle-option')
|
||
select.forEach(opt => opt.classList.remove('active'));
|
||
select[1].classList.add('active');
|
||
select[0].querySelector('input').checked=false
|
||
select[1].querySelector('input').checked=true
|
||
}
|
||
if (competition.type_ == 'artist'){
|
||
document.getElementById('artistCheck').checked = true
|
||
}
|
||
if (competition.type_ == 'paint'){
|
||
document.getElementById('paintCheck').checked = true
|
||
}
|
||
|
||
|
||
const inputEl = document.getElementById('nominations');
|
||
|
||
const list = competition.nominations;
|
||
|
||
inputEl.dataset.list = list
|
||
inputEl.dataset.value = list
|
||
|
||
document.getElementById('nominations').value = list.join(', ');
|
||
|
||
document.getElementById('min_val').value = competition.min_paintings;
|
||
document.getElementById('max_val').value = competition.max_paintings;
|
||
|
||
|
||
document.getElementById('preview_poster').src = `/b/competition/${competition.poster_file_id}`
|
||
|
||
// const input = document.getElementById('datetime_start');
|
||
// const date_finish = document.getElementById('date_finish');
|
||
// const date_finish_date = new Date(competition.date_finish);
|
||
// const datetime_start_date = new Date(competition.datetime_start);
|
||
// const MOSCOW_OFFSET_MS = 3 * 60 * 60 * 1000;
|
||
// const moscowInstant = new Date(datetime_start_date.getTime() + MOSCOW_OFFSET_MS);
|
||
|
||
// input.value = moscowInstant.toISOString().slice(0, 16);
|
||
|
||
// date_finish.value = date_finish_date.toISOString().slice(0, 10);
|
||
});
|
||
</script>
|
||
<script>
|
||
var type = competition.type_;
|
||
|
||
function toggleType(clickedId) {
|
||
const artist = document.getElementById('artistCheck');
|
||
const paint = document.getElementById('paintCheck');
|
||
if (clickedId === 'artistCheck') {
|
||
artist.checked = clickedId === 'artistCheck';
|
||
paint.checked = clickedId === 'paintCheck';
|
||
type = 'artist';
|
||
} else if (clickedId === 'paintCheck') {
|
||
artist.checked = clickedId === 'artistCheck';
|
||
paint.checked = clickedId === 'paintCheck';
|
||
type = 'paint';
|
||
}
|
||
}
|
||
</script>
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const minInput = document.getElementById('min_val');
|
||
const maxInput = document.getElementById('max_val');
|
||
|
||
const titleInput = document.getElementById('title');
|
||
const topicInput = document.getElementById('topic');
|
||
const addressInput = document.getElementById('address');
|
||
|
||
const descInput = document.getElementById('short_desc');
|
||
const posterInput = document.getElementById('poster');
|
||
const rulesInput = document.getElementById('rules');
|
||
const rulesLink = document.getElementById('rules_link');
|
||
|
||
const nominationsInput = document.getElementById('nominations');
|
||
|
||
const previewTitle = document.getElementById('preview_title');
|
||
const previewTopic = document.getElementById('preview_topic');
|
||
|
||
const previewDesc = document.getElementById('preview_desc');
|
||
const previewPosterBack = document.getElementById('preview_poster_back');
|
||
const previewPoster = document.getElementById('preview_poster');
|
||
|
||
titleInput.addEventListener('input', () => {
|
||
previewTitle.textContent = titleInput.value || 'Название';
|
||
});
|
||
|
||
topicInput.addEventListener('input', () => {
|
||
previewTopic.textContent = topicInput.value || 'Тема';
|
||
});
|
||
|
||
|
||
descInput.addEventListener('input', () => {
|
||
previewDesc.textContent = descInput.value || 'Короткое описание';
|
||
});
|
||
|
||
posterInput.addEventListener('change', () => {
|
||
|
||
if (posterInput.files && posterInput.files.length > 0) {
|
||
const file = posterInput.files[0];
|
||
const fileName = file.name;
|
||
|
||
poster_name.textContent = fileName;
|
||
|
||
|
||
const imageUrl = URL.createObjectURL(file);
|
||
|
||
previewPoster.src = imageUrl
|
||
previewPosterBack.style.background = `url(${imageUrl}) no-repeat center/cover`;
|
||
|
||
|
||
previewPoster.style.transition = 'background 0.4s ease';
|
||
} else {
|
||
poster_name.textContent = "Выберите изображение";
|
||
|
||
previewPosterBack.style.background = '';
|
||
}
|
||
});
|
||
|
||
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');
|
||
|
||
let isEmpty = false;
|
||
|
||
if (field.type === 'file') {
|
||
isEmpty = !field.files || field.files.length === 0;
|
||
} else {
|
||
isEmpty = !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);
|
||
}
|
||
else if (!hasError) {
|
||
console.log('✅ Все поля заполнены — можно отправлять форму');
|
||
const formData = new FormData();
|
||
if (posterInput.files.length>0){
|
||
formData.append('poster', posterInput.files[0]);
|
||
}
|
||
formData.append('title', titleInput.value);
|
||
formData.append('topic', topicInput.value);
|
||
formData.append('nominations', nominationsInput.dataset.value);
|
||
|
||
formData.append('address', addressInput.value);
|
||
formData.append('type_', type);
|
||
|
||
formData.append('short_desc', descInput.value);
|
||
if (rulesInput.files.length>0){
|
||
formData.append('rules', rulesInput.files[0]);
|
||
}
|
||
formData.append('rules_link', rulesLink.value);
|
||
|
||
formData.append('min_paintings', minInput.value);
|
||
formData.append('max_paintings', maxInput.value);
|
||
const datetimeStart = document.getElementById('datetime_start').value;
|
||
const dateFinish = document.getElementById('date_finish').value;
|
||
formData.append('datetime_start', datetimeStart);
|
||
formData.append('date_finish', dateFinish);
|
||
|
||
const acceptemailsNotify = document.getElementById('emailsNotify');
|
||
const emailsNotifyAccepted = acceptemailsNotify ? (acceptemailsNotify.type === 'checkbox' || acceptemailsNotify.type === 'radio' ? acceptemailsNotify.checked : acceptemailsNotify.value) : false;
|
||
formData.append('emailsNotify', emailsNotifyAccepted ? 'true' : 'false');
|
||
|
||
const serviceSocialEl = document.getElementById('serviceSocial');
|
||
const serviceSocialAccepted = serviceSocialEl ? (serviceSocialEl.type === 'checkbox' || serviceSocialEl.type === 'radio' ? serviceSocialEl.checked : serviceSocialEl.value) : false;
|
||
formData.append('serviceSocial', serviceSocialAccepted ? 'true' : 'false');
|
||
|
||
const userSocialEl = document.getElementById('userSocial');
|
||
const userSocialAccepted = userSocialEl ? (userSocialEl.type === 'checkbox' || userSocialEl.type === 'radio' ? userSocialEl.checked : userSocialEl.value) : false;
|
||
formData.append('userSocial', userSocialAccepted ? 'true' : 'false');
|
||
|
||
|
||
console.log('Отправка формы...');
|
||
try {
|
||
const res = await fetch(`/api/competition/${competitionId}`, {
|
||
method: 'PUT',
|
||
body: formData
|
||
});
|
||
if (res.ok) {
|
||
window.location.href = '/profile/partner/competitions';
|
||
} else {
|
||
const allFields = document.querySelectorAll('.floating-group');
|
||
allFields.forEach(g => g.classList.add('error'));
|
||
|
||
const errorText = await res.json();
|
||
showToast({message: errorText.detail, status: 'error'});
|
||
}
|
||
} catch (err) {
|
||
const allFields = document.querySelectorAll('.floating-group');
|
||
allFields.forEach(g => g.classList.add('error'));
|
||
console.error('Request failed', err);
|
||
// showToast({message: err, status: 'error'});
|
||
}
|
||
}
|
||
});
|
||
|
||
// Убираем красную подсветку сразу при исправлении пользователем
|
||
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');
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
});
|
||
</script>
|
||
{%- endmacro %}
|
||
|
||
{% macro style() -%}
|
||
{{ competition.style() }}
|
||
{{ checkbox.style() }}
|
||
<style>
|
||
.toggle-group {
|
||
display: flex;
|
||
margin-bottom: 15px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
width: fit-content;
|
||
}
|
||
|
||
.toggle-option {
|
||
padding: 10px 20px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.toggle-option.active {
|
||
background: #5F1798;
|
||
color: white;
|
||
}
|
||
|
||
.error-message {
|
||
animation: shake 0.3s;
|
||
}
|
||
|
||
@keyframes shake {
|
||
0%, 100% { transform: translateX(0); }
|
||
25% { transform: translateX(-5px); }
|
||
75% { transform: translateX(5px); }
|
||
}
|
||
.poster-group {position: relative;}
|
||
.b_ornr9{justify-content: center;
|
||
display: flex;
|
||
align-items: center;}
|
||
.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: 16px; }
|
||
.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: 16px; }
|
||
.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: 16px; }
|
||
.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: 284px; 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: 284px; 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: 284px; 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: 284px; 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; 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: 284px; 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: 284px; 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: 284px; 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: 284px; 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; 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; }
|
||
}
|
||
.c_z3ybu{top: -8px;
|
||
font-size: 15px;
|
||
color: #5F1798;}
|
||
@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; 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;}
|
||
</style>
|
||
|
||
{%- endmacro %} |