586 lines
34 KiB
HTML
586 lines
34 KiB
HTML
{% macro section(user,news=False) -%}
|
||
<form class="c_sbrxk" id="postForm">
|
||
<div class="c_dtjoh">
|
||
<div class="c_aihm6 floating-group">
|
||
<input name="title" id="title" class="c_xhd5k" required />
|
||
<label for="title" class="c_z3ybu floating-label">Название</label>
|
||
</div>
|
||
<div class="c_nb6gy floating-group">
|
||
<textarea type="text" id="description" name="description" class="c_4ykpn"></textarea>
|
||
<label for="description" class="c_z3ybu floating-label">Описание</label>
|
||
</div>
|
||
<div class="c_nb6gy floating-group">
|
||
<textarea type="text" id="short_description" name="short_description" class="c_4ykpn"></textarea>
|
||
<label for="short_description" class="c_z3ybu floating-label">Анотация</label>
|
||
</div>
|
||
<button class="c_aq9et" id="createBtn" type="button">
|
||
<span class="c_som9s">Сохранить</span>
|
||
</button>
|
||
</div>
|
||
{% if news%}
|
||
<script>
|
||
// @license magnet:?xt=urn:btih:c80d50af7d3db9be66a4d0a86db0286e4fd33292&dn=bsd-3-clause.txt BSD-3-Clause
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
|
||
document.getElementById('title').value = '{{news.title or ""}}';
|
||
document.getElementById('description').value = `{{news.description or ""}}`;
|
||
document.getElementById('short_description').value = `{{news.short_description or ""}}`;
|
||
});
|
||
// @license-end
|
||
</script>
|
||
{% endif %}
|
||
<div class="c_rtopc">
|
||
<label class="c_aq9et ba" for="fileInput">
|
||
<span class="c_som9s">Добавить фото</span>
|
||
</label>
|
||
<input class="c_1gai0" id="fileInput" type="file" multiple accept="image/*" style="display: none;"/>
|
||
<div class="preview" id="preview"></div>
|
||
</div>
|
||
|
||
</form>
|
||
|
||
<script>
|
||
// @license magnet:?xt=urn:btih:c80d50af7d3db9be66a4d0a86db0286e4fd33292&dn=bsd-3-clause.txt BSD-3-Clause
|
||
const fileInput = document.getElementById('fileInput');
|
||
const preview = document.getElementById('preview');
|
||
|
||
let filesOrdered = []; // теперь храним строки (имена файлов) + существующие медиа
|
||
|
||
const existingMedias = [
|
||
{% if news %}
|
||
{% for media in news.orig_media %}
|
||
{
|
||
url: "/b/news/{{ media }}",
|
||
name: "{{ media }}",
|
||
isExisting: true,
|
||
type: "image"
|
||
}{% if not loop.last %},{% endif %}
|
||
{% endfor %}
|
||
{% endif %}
|
||
];
|
||
|
||
async function uploadMediaFiles(files) {
|
||
if (!files || files.length === 0) return [];
|
||
|
||
const formData = new FormData();
|
||
for (let file of files) {
|
||
formData.append('medias', file);
|
||
}
|
||
|
||
const res = await fetch('/api/news/media', {
|
||
method: 'POST',
|
||
body: formData
|
||
});
|
||
|
||
if (!res.ok) throw new Error('Ошибка загрузки медиа');
|
||
return await res.json(); // ожидается массив имён файлов
|
||
}
|
||
|
||
function loadExistingMedias() {
|
||
existingMedias.forEach(media => {
|
||
filesOrdered.push({
|
||
name: media.name,
|
||
url: media.url,
|
||
isExisting: true,
|
||
type: media.type
|
||
});
|
||
});
|
||
renderPreviews();
|
||
}
|
||
|
||
function createObjectURLSafe(item) {
|
||
if (item.isExisting || !item.file) return item.url;
|
||
if (!item.previewURL) {
|
||
item.previewURL = URL.createObjectURL(item.file);
|
||
}
|
||
return item.previewURL;
|
||
}
|
||
|
||
function revokeObjectURLSafe(item) {
|
||
if (item.previewURL) {
|
||
URL.revokeObjectURL(item.previewURL);
|
||
item.previewURL = null;
|
||
}
|
||
}
|
||
|
||
function renderPreviews() {
|
||
preview.innerHTML = '';
|
||
|
||
filesOrdered.forEach((item, idx) => {
|
||
const div = document.createElement('div');
|
||
div.className = 'item';
|
||
div.draggable = true;
|
||
div.dataset.index = idx;
|
||
|
||
const title = document.createElement('div');
|
||
title.className = 'title';
|
||
title.textContent = idx === 0 ? 'Титульная' : `${idx + 1}`;
|
||
|
||
const isImage = item.type && item.type.startsWith('image');
|
||
|
||
const mediaEl = document.createElement(isImage ? 'img' : 'video');
|
||
mediaEl.className = 'thumb';
|
||
mediaEl.src = createObjectURLSafe(item);
|
||
if (!isImage) mediaEl.controls = true;
|
||
|
||
// Контролы
|
||
const controls = document.createElement('div');
|
||
controls.className = 'controls';
|
||
|
||
const makeFirstBtn = document.createElement('button');
|
||
makeFirstBtn.textContent = 'Титульная';
|
||
makeFirstBtn.title = 'Сделать титульной';
|
||
makeFirstBtn.disabled = idx === 0;
|
||
makeFirstBtn.addEventListener('click', () => moveFile(idx, 0));
|
||
|
||
const leftBtn = document.createElement('button');
|
||
|
||
leftBtn.textContent = idx;
|
||
leftBtn.disabled = idx === 0;
|
||
leftBtn.addEventListener('click', () => moveFile(idx, idx - 1));
|
||
|
||
const rightBtn = document.createElement('button');
|
||
rightBtn.textContent = idx + 2;
|
||
rightBtn.disabled = idx === filesOrdered.length - 1;
|
||
rightBtn.addEventListener('click', () => moveFile(idx, idx + 1));
|
||
|
||
const removeBtn = document.createElement('button');
|
||
removeBtn.textContent = '✖';
|
||
removeBtn.addEventListener('click', () => removeFile(idx));
|
||
|
||
controls.append(idx>0?makeFirstBtn:'', idx>0?leftBtn:'', idx < filesOrdered.length - 1?rightBtn:'', removeBtn);
|
||
|
||
div.append(mediaEl, title, controls);
|
||
preview.appendChild(div);
|
||
|
||
// Drag & Drop
|
||
div.addEventListener('dragstart', (e) => {
|
||
e.dataTransfer.setData('text/plain', idx.toString());
|
||
div.classList.add('dragging');
|
||
});
|
||
|
||
div.addEventListener('dragend', () => {
|
||
div.classList.remove('dragging');
|
||
document.querySelectorAll('.item').forEach(el => el.classList.remove('drag-over'));
|
||
});
|
||
|
||
div.addEventListener('dragover', (e) => {
|
||
e.preventDefault();
|
||
div.classList.add('drag-over');
|
||
});
|
||
|
||
div.addEventListener('dragleave', () => div.classList.remove('drag-over'));
|
||
|
||
div.addEventListener('drop', (e) => {
|
||
e.preventDefault();
|
||
div.classList.remove('drag-over');
|
||
const from = parseInt(e.dataTransfer.getData('text/plain'));
|
||
const to = parseInt(div.dataset.index);
|
||
if (from !== to) moveFile(from, to);
|
||
});
|
||
});
|
||
}
|
||
|
||
function moveFile(from, to) {
|
||
if (to < 0 || to >= filesOrdered.length || from === to) return;
|
||
const [moved] = filesOrdered.splice(from, 1);
|
||
filesOrdered.splice(to, 0, moved);
|
||
renderPreviews();
|
||
}
|
||
|
||
function removeFile(index) {
|
||
const item = filesOrdered[index];
|
||
revokeObjectURLSafe(item);
|
||
filesOrdered.splice(index, 1);
|
||
renderPreviews();
|
||
}
|
||
|
||
// === Основная загрузка новых файлов ===
|
||
fileInput.addEventListener('change', async (e) => {
|
||
const newFiles = Array.from(e.target.files);
|
||
if (newFiles.length === 0) return;
|
||
|
||
try {
|
||
const uploadedNames = await uploadMediaFiles(newFiles);
|
||
|
||
// Добавляем загруженные файлы в массив
|
||
newFiles.forEach((file, i) => {
|
||
filesOrdered.push({
|
||
name: uploadedNames['media'][i], // имя с сервера
|
||
url: `/b/news/${uploadedNames['media'][i]}`,
|
||
file: file, // для превью
|
||
type: file.type,
|
||
isExisting: false
|
||
});
|
||
});
|
||
|
||
renderPreviews();
|
||
} catch (err) {
|
||
console.error('Ошибка загрузки фото:', err);
|
||
alert('Не удалось загрузить фото. Попробуйте ещё раз.');
|
||
}
|
||
|
||
fileInput.value = '';
|
||
});
|
||
|
||
window.addEventListener('load', () => {
|
||
loadExistingMedias();
|
||
});
|
||
|
||
window.addEventListener('beforeunload', () => {
|
||
filesOrdered.forEach(revokeObjectURLSafe);
|
||
});
|
||
|
||
// === Отправка формы ===
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
|
||
const form = document.getElementById('postForm');
|
||
const createBtn = document.getElementById('createBtn');
|
||
const newsId= '{{news._id}}'
|
||
|
||
createBtn.addEventListener('click', async (e) => {
|
||
e.preventDefault();
|
||
|
||
// ... (проверка обязательных полей остаётся без изменений)
|
||
|
||
const requiredFields = [...document.querySelectorAll('input[required]'), ...document.querySelectorAll('textarea[required]')];
|
||
let hasError = false;
|
||
|
||
requiredFields.forEach(field => {
|
||
const group = field.closest('.floating-group');
|
||
const isEmpty = field.type === 'file'
|
||
? !field.files || field.files.length === 0
|
||
: !field.value.trim();
|
||
|
||
if (isEmpty) {
|
||
group.classList.add('error');
|
||
hasError = true;
|
||
} else {
|
||
group.classList.remove('error');
|
||
}
|
||
});
|
||
|
||
if (hasError) return;
|
||
|
||
// === Подготовка данных ===
|
||
const data = new FormData(form);
|
||
|
||
filesOrdered.forEach(f => data.append('post_medias', f.name));
|
||
|
||
try {
|
||
const res = await fetch(`/api/news/${newsId}`, {
|
||
method: 'PUT',
|
||
body: data
|
||
});
|
||
|
||
if (res.ok) {
|
||
const params = new URLSearchParams(window.location.search);
|
||
const next = params.get('next') || '/profile/news';
|
||
window.location.href = next;
|
||
} else {
|
||
alert('Ошибка при создании поста');
|
||
}
|
||
} catch (err) {
|
||
console.error(err);
|
||
alert('Ошибка соединения');
|
||
}
|
||
});
|
||
|
||
// Удаление ошибки при вводе
|
||
document.querySelectorAll('.floating-group input, .floating-group textarea').forEach(input => {
|
||
input.addEventListener('input', () => {
|
||
input.closest('.floating-group').classList.remove('error');
|
||
});
|
||
});
|
||
});
|
||
// @license-end
|
||
</script>
|
||
|
||
|
||
{%- endmacro %}
|
||
|
||
{% macro style() -%}
|
||
|
||
<style>
|
||
.preview {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
margin-top: 8px;
|
||
}
|
||
.item {
|
||
border: 1px solid #ddd;
|
||
padding: 8px;
|
||
width: 335px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
background: white;
|
||
border-radius: 4px;
|
||
transition: all 0.2s;
|
||
}
|
||
.item.dragging {
|
||
opacity: 0.4;
|
||
border-style: dashed;
|
||
transform: scale(0.95);
|
||
}
|
||
.item.drag-over {
|
||
border-color: #a200ff;
|
||
background: #f9f0ff;
|
||
transform: scale(1.05);
|
||
}
|
||
.thumb {
|
||
width: 335px;
|
||
object-fit: cover;
|
||
background: #f6f6f6;
|
||
border-radius: 4px;
|
||
}
|
||
.controls {
|
||
margin-top: 6px;
|
||
display: flex;
|
||
gap: 4px;
|
||
}
|
||
.title {
|
||
color: #5f1798;
|
||
font-size: 24px;
|
||
text-align: center;
|
||
margin: 4px 0;
|
||
word-break: break-all;
|
||
}
|
||
.controls>button {
|
||
display: flex;
|
||
padding: 16px 23px;
|
||
justify-content: center;
|
||
align-items: center;
|
||
align-self: stretch;
|
||
border-radius: 5px;
|
||
font-size: 16px;
|
||
background: #5F1798;
|
||
color: white;
|
||
}
|
||
</style>
|
||
<style>
|
||
.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;}
|
||
|
||
/* Иконка справа */
|
||
.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;}
|
||
.c_rtopc{width: 335px;}
|
||
.c_z3ybu{top: -8px;
|
||
font-size: 15px;
|
||
color: #5F1798;}
|
||
@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) {
|
||
.item,.thumb{width: 100%;}
|
||
.c_dtjoh{order: 2;} .c_rtopc{order: 1;}
|
||
.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; 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; 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; 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; 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; 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: center; 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 %} |