614 lines
38 KiB
HTML
614 lines
38 KiB
HTML
{% macro section(user,post=False) -%}
|
||
<form class="c_sbrxk" id="postForm">
|
||
<div class="c_dtjoh">
|
||
<div class="c_aihm6 floating-group">
|
||
<input name="author" id="author" placeholder="{{user.username}}" class="c_xhd5k" />
|
||
<label for="author" class="c_z3ybu floating-label">Автор</label>
|
||
</div>
|
||
{% if user.get('grade') is none or 'galerist' in user.get('roles') %}
|
||
<div class="c_aihm6 floating-group">
|
||
<input readonly name="grade" id="grade" class="c_xhd5k" required data-toast="Поле Звание должно быть заполнено" data-select="1" data-radio="0" data-list="['Без звания', 'Заслуженный художник Российской федерации', 'Народный художник Российской федерации', 'Академик Российской академии художеств', 'Почетный член Российской академии художеств', 'Действительный член Российской Академии художеств', 'Член-корреспондент Российской академии художеств', 'Член Союза художников России', 'Член творческого союза художников России', 'Член Московского союза художников', 'Член Подмосковного союза художников', 'Член Союза русских художников', 'Творческий союз профессиональных художников', 'Евразийский союз художников', 'Международный художественный фонд', 'Творческое объединение женщин-художников']" data-label="Сохранить" data-custom_placeholder="Напишите свой вариант" data-custom="1" data-title="Выберите звание из списка">
|
||
<label for="grade" class="c_z3ybu floating-label">Звание</label>
|
||
</div>
|
||
{% endif %}
|
||
<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_aihm6 floating-group">
|
||
<input name="city" id="city" class="c_xhd5k" />
|
||
<label for="city" class="c_z3ybu floating-label">Город</label>
|
||
</div>
|
||
<div class="c_aihm6 floating-group">
|
||
<input name="size" id="size" class="c_xhd5k" />
|
||
<label for="size" class="c_z3ybu floating-label">Размер</label>
|
||
</div>
|
||
<div class="c_aihm6 floating-group">
|
||
<input name="material" id="material" class="c_xhd5k" />
|
||
<label for="material" class="c_z3ybu floating-label">Материал</label>
|
||
</div>
|
||
<div class="c_aihm6 floating-group">
|
||
<input name="genre" id="genre" class="c_xhd5k" />
|
||
<label for="genre" class="c_z3ybu floating-label">Жанр</label>
|
||
</div>
|
||
<div class="c_aihm6 floating-group">
|
||
<input name="price" id="price" class="c_xhd5k" />
|
||
<label for="price" 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>
|
||
<button class="c_aq9et" id="createBtn" type="button">
|
||
<span class="c_som9s">Сохранить</span>
|
||
</button>
|
||
</div>
|
||
<div class="c_rtopc">
|
||
<label class="c_aq9et" 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 defer>
|
||
const post = JSON.parse({{post|tojson}})
|
||
const postId = post._id
|
||
const fileInput = document.getElementById('fileInput');
|
||
const preview = document.getElementById('preview');
|
||
document.getElementById('author').value = post.author;
|
||
if (document.getElementById('grade')){
|
||
document.getElementById('grade').value = post.grade;
|
||
|
||
const inputEl = document.getElementById('grade');
|
||
|
||
let list = inputEl.dataset.list;
|
||
list = JSON.parse(list.replace(/'/g, '"'));
|
||
|
||
list.push(post.grade);
|
||
list = [...new Set(list)];
|
||
|
||
inputEl.dataset.list = JSON.stringify(list);
|
||
inputEl.dataset.value = post.grade;
|
||
|
||
}
|
||
|
||
document.getElementById('title').value = post.title;
|
||
document.getElementById('city').value = post.city;
|
||
document.getElementById('size').value = post.size;
|
||
document.getElementById('material').value = post.material;
|
||
document.getElementById('genre').value = post.genre;
|
||
document.getElementById('price').value = post.price;
|
||
document.getElementById('description').value = post.description;
|
||
let filesOrdered = [];
|
||
console.log(post.medias_original)
|
||
const existingMedias = (post?.medias_original ?? []).map((media) => ({ url: `/b/posts/${media}`, name: `${media}`, isExisting: true, type: "image",}));
|
||
|
||
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/posts/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['post_medias'][i],
|
||
url: `/b/posts/${uploadedNames['post_medias'][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 author = '{{user.username}}';
|
||
const grade = '{{user.grade}}';
|
||
const form = document.getElementById('postForm');
|
||
const createBtn = document.getElementById('createBtn');
|
||
|
||
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);
|
||
|
||
if (document.querySelector('#author').value === '') {
|
||
data.set('author', author);
|
||
}
|
||
{% if 'user' in user.get('roles') and user.get('grade') is not none %}
|
||
data.set('grade', grade);
|
||
{% endif %}
|
||
filesOrdered.forEach(f => data.append('post_medias', f.name));
|
||
|
||
try {
|
||
const res = await fetch(`/api/post/${postId}`, {
|
||
method: 'PUT',
|
||
body: data
|
||
});
|
||
|
||
if (res.ok) {
|
||
const params = new URLSearchParams(window.location.search);
|
||
const next = params.get('next') || '/profile/posts';
|
||
window.location.href = next;
|
||
} else {
|
||
showToast({message: 'Ошибка при сохранение поста', status: "error", duration:2500});
|
||
}
|
||
} catch (err) {
|
||
console.error(err);
|
||
showToast({message: 'Ошибка соединения', status: "error", duration:2500});
|
||
}
|
||
});
|
||
|
||
// Удаление ошибки при вводе
|
||
document.querySelectorAll('.floating-group input, .floating-group textarea').forEach(input => {
|
||
input.addEventListener('input', () => {
|
||
input.closest('.floating-group').classList.remove('error');
|
||
});
|
||
});
|
||
});
|
||
</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 type="text/css">
|
||
.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 %} |