391 lines
12 KiB
HTML
391 lines
12 KiB
HTML
{% extends "base.html" %}
|
||
{% import "/components/header.html" as header %}
|
||
{% import "/components/footer.html" as footer %}
|
||
|
||
{% block title %}Сервис Автопостинга{% endblock %}
|
||
|
||
{% block head %}
|
||
<!-- <meta hid="og:title" property="og:title" content="Сервис Автопостинга">
|
||
<meta hid="og:description" property="og:description" content="Сервис создан для художников, скульпторов, искусствоведов, журналистов, галеристов, музеев и разных выставочных пространств с возможностью выложить пост картины, скульптуры, новостей, анонсов выставок или любую другую информацию, разместив сразу в нескольких Ваших социальных сетях интернета, арт-маркетплейсах и сообществах партнёров сервиса одним нажатием!">
|
||
<meta hid="og:image" property="og:image" content="https://avtopost.kultmost.ru/favicon.ico">
|
||
<meta name="facebook-domain-verification" content="uwjj4p3kr1xlxvcux4ujv7b6qujhl8">
|
||
<meta hid="og:url" property="og:url" content="https://avtopost.kultmost.ru/">
|
||
<meta hid="description" name="description" content="Сервис создан для художников, скульпторов, искусствоведов, журналистов, галеристов, музеев и разных выставочных пространств с возможностью выложить пост картины, скульптуры, новостей, анонсов выставок или любую другую информацию, разместив сразу в нескольких Ваших социальных сетях интернета, арт-маркетплейсах и сообществах партнёров сервиса одним нажатием!">
|
||
<meta hid="og:site_name" property="og:site_name" content="KULTMOST.АВТОПОСТ"> -->
|
||
{{ header.style() }}
|
||
<style type="text/css">
|
||
/* Base (common) styles */
|
||
.b_0a7ub {
|
||
-webkit-box-orient: vertical;
|
||
color: #000;
|
||
display: -webkit-box;
|
||
flex: 1 0 0;
|
||
font-size: 24px;
|
||
font-style: normal;
|
||
font-weight: 700;
|
||
line-height: normal;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
padding: 10px 16px;
|
||
}
|
||
|
||
.b_pozuu {
|
||
-webkit-box-orient: vertical;
|
||
align-self: stretch;
|
||
color: rgba(58, 58, 58, 0.75);
|
||
display: -webkit-box;
|
||
font-size: 16px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
line-height: normal;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: pre-line;
|
||
}
|
||
|
||
.b_r81yh {
|
||
align-items: center;
|
||
align-self: stretch;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 30px;
|
||
}
|
||
.c_383ex{margin-bottom: 100px;}
|
||
/* Mobile */
|
||
@media (max-width: 699px) {
|
||
.c_70z5u {
|
||
align-items: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
width: 335px;
|
||
}
|
||
|
||
.c_catap {
|
||
height: 400px;
|
||
width: 355px;
|
||
}
|
||
|
||
.c_15oiq {
|
||
align-items: flex-start;
|
||
align-self: stretch;
|
||
background: #FFF;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
justify-content: center;
|
||
min-width: 335px;
|
||
padding: 10px 30px;
|
||
}
|
||
|
||
.c_383ex {
|
||
align-items: flex-start;
|
||
background: #FFF;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 30px;
|
||
margin: auto;
|
||
width: 375px;
|
||
}
|
||
}
|
||
|
||
/* Tablet */
|
||
@media (min-width: 700px) and (max-width: 900px) {
|
||
.c_70z5u {
|
||
align-items: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
width: 760px;
|
||
}
|
||
|
||
.c_catap {
|
||
height: 400px;
|
||
width: 668px;
|
||
}
|
||
|
||
.c_15oiq {
|
||
align-items: flex-start;
|
||
align-self: stretch;
|
||
background: #FFF;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
justify-content: center;
|
||
min-width: 335px;
|
||
padding: 10px 50px;
|
||
}
|
||
|
||
.c_383ex {
|
||
align-items: flex-start;
|
||
background: #FFF;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 30px;
|
||
width: 800px;
|
||
}
|
||
}
|
||
|
||
/* Desktop */
|
||
@media (min-width: 901px) {
|
||
.c_70z5u {
|
||
align-items: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 0 100px;
|
||
}
|
||
|
||
.c_catap {
|
||
flex: 1 0 0;
|
||
height: 400px;
|
||
}
|
||
|
||
.c_15oiq {
|
||
align-items: flex-start;
|
||
background: #FFF;
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1 0 0;
|
||
gap: 10px;
|
||
justify-content: center;
|
||
min-width: 335px;
|
||
padding: 10px 60px;
|
||
}
|
||
|
||
.c_0a6al {
|
||
align-items: flex-start;
|
||
align-self: stretch;
|
||
display: flex;
|
||
gap: 30px;
|
||
flex-direction: row;
|
||
padding: 0 100px;
|
||
}
|
||
|
||
.c_383ex {
|
||
align-items: flex-start;
|
||
background: #FFF;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 30px;
|
||
width: 1600px;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style>
|
||
.swiper {
|
||
position: relative;
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.swiper-wrapper {
|
||
display: flex;
|
||
max-height: 520px;
|
||
transition: transform 0.75s cubic-bezier(0.32, 0.72, 0, 1);
|
||
will-change: transform;
|
||
align-items: center;
|
||
}
|
||
|
||
.swiper-slide {
|
||
flex: 0 0 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
transition: background-color 0.8s ease;
|
||
overflow: hidden;
|
||
display: flex;
|
||
}
|
||
|
||
.swiper-slide img {
|
||
max-height: 520px;
|
||
width: 100%;
|
||
object-fit: scale-down;
|
||
|
||
}
|
||
|
||
.caption {
|
||
position: absolute;
|
||
bottom: 40px;
|
||
left: 40px;
|
||
color: white;
|
||
font-size: 2.1rem;
|
||
font-weight: 700;
|
||
text-shadow: 0 4px 15px rgba(0,0,0,0.8);
|
||
z-index: 5;
|
||
}
|
||
|
||
.swiper-button {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
background: rgba(255, 255, 255, 0);
|
||
color: #683185;
|
||
border: 1px solid #683185;
|
||
width: 58px;
|
||
height: 58px;
|
||
font-size: 2.2rem;
|
||
cursor: pointer;
|
||
border-radius: 50%;
|
||
z-index: 10;
|
||
text-align: center;
|
||
}
|
||
|
||
.swiper-button:hover { background: rgba(0,0,0,0.9); }
|
||
|
||
.swiper-button.prev { left: 25px; }
|
||
.swiper-button.next { right: 25px; }
|
||
|
||
.swiper-pagination {
|
||
position: absolute;
|
||
bottom: 25px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
gap: 12px;
|
||
z-index: 10;
|
||
}
|
||
|
||
.swiper-pagination-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
background: rgba(95,23,152,.4);
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.swiper-pagination-dot.active {
|
||
background: #683185;
|
||
transform: scale(1.35);
|
||
}
|
||
</style>
|
||
{{ footer.style() }}
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
{{ header.section(user) }}
|
||
<section class="c_383ex">
|
||
<header class="c_70z5u">
|
||
<h3 class="c_kz6u4 b_0a7ub">{{news.title}}</h3>
|
||
</header>
|
||
<div class="c_0a6al b_r81yh">
|
||
<div class="swiper" id="swiper">
|
||
<div class="swiper-wrapper" id="wrapper"></div>
|
||
{% if news.orig_media|length > 1%}
|
||
<button class="swiper-button prev" id="prev">‹</button>
|
||
<button class="swiper-button next" id="next">›</button>
|
||
{% endif %}
|
||
<div class="swiper-pagination" id="pagination" {% if news.orig_media|length == 1%}style="display: none;"{% endif %}></div>
|
||
</div>
|
||
<div class="c_15oiq">
|
||
<p class="c_r2zvv b_pozuu">{{news.description}}</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<script>
|
||
const images = [
|
||
{% for media in news.orig_media %}
|
||
{ src: "/b/news/{{media}}" },
|
||
{% endfor %}
|
||
];
|
||
|
||
const wrapper = document.getElementById('wrapper');
|
||
const swiper = document.getElementById('swiper');
|
||
const prevBtn = document.getElementById('prev');
|
||
const nextBtn = document.getElementById('next');
|
||
const pagination = document.getElementById('pagination');
|
||
|
||
let currentIndex = 0;
|
||
let isDragging = false;
|
||
let startX = 0;
|
||
|
||
|
||
function createSlides() {
|
||
wrapper.innerHTML = '';
|
||
pagination.innerHTML = '';
|
||
|
||
images.forEach((item, i) => {
|
||
const slide = document.createElement('div');
|
||
slide.className = 'swiper-slide';
|
||
|
||
const img = document.createElement('img');
|
||
img.crossOrigin = "anonymous";
|
||
img.src = item.src;
|
||
img.loading = "lazy";
|
||
|
||
|
||
slide.append(img);
|
||
wrapper.appendChild(slide);
|
||
|
||
// Пагинация
|
||
const dot = document.createElement('div');
|
||
dot.className = `swiper-pagination-dot ${i === 0 ? 'active' : ''}`;
|
||
dot.onclick = () => goToSlide(i);
|
||
pagination.appendChild(dot);
|
||
});
|
||
|
||
wrapper.style.width = `${100}%`;
|
||
}
|
||
|
||
function updateTransform() {
|
||
wrapper.style.transform = `translate3d(-${currentIndex * 100}%, 0, 0)`;
|
||
|
||
document.querySelectorAll('.swiper-pagination-dot').forEach((dot, i) => {
|
||
dot.classList.toggle('active', i === currentIndex);
|
||
});
|
||
}
|
||
|
||
function goToSlide(index) {
|
||
currentIndex = Math.max(0, Math.min(index, images.length - 1));
|
||
updateTransform();
|
||
}
|
||
|
||
function nextSlide() { currentIndex = (currentIndex + 1) % images.length; updateTransform(); }
|
||
function prevSlide() { currentIndex = (currentIndex - 1 + images.length) % images.length; updateTransform(); }
|
||
|
||
// Drag
|
||
function touchStart(e) {
|
||
isDragging = true;
|
||
startX = e.type.includes('mouse') ? e.pageX : e.touches[0].clientX;
|
||
wrapper.style.transition = 'none';
|
||
}
|
||
|
||
function touchMove(e) {
|
||
if (!isDragging) return;
|
||
const x = e.type.includes('mouse') ? e.pageX : e.touches[0].clientX;
|
||
const percentMoved = ((x - startX) / swiper.clientWidth) * 100;
|
||
wrapper.style.transform = `translate3d(${-currentIndex * 100 + percentMoved}%, 0, 0)`;
|
||
}
|
||
|
||
function touchEnd(e) {
|
||
if (!isDragging) return;
|
||
isDragging = false;
|
||
wrapper.style.transition = 'transform 0.75s cubic-bezier(0.32, 0.72, 0, 1)';
|
||
|
||
const movedPercent = ((e.type.includes('mouse') ? e.pageX : e.changedTouches[0].clientX) - startX) / swiper.clientWidth * 100;
|
||
|
||
if (movedPercent < -25) nextSlide();
|
||
else if (movedPercent > 25) prevSlide();
|
||
else updateTransform();
|
||
}
|
||
|
||
function init() {
|
||
prevBtn.onclick = prevSlide;
|
||
nextBtn.onclick = nextSlide;
|
||
|
||
swiper.addEventListener('touchstart', touchStart, { passive: true });
|
||
swiper.addEventListener('touchmove', touchMove, { passive: true });
|
||
swiper.addEventListener('touchend', touchEnd);
|
||
|
||
swiper.addEventListener('mousedown', touchStart);
|
||
window.addEventListener('mousemove', touchMove);
|
||
window.addEventListener('mouseup', touchEnd);
|
||
|
||
window.addEventListener('resize', updateTransform);
|
||
}
|
||
|
||
// Запуск
|
||
createSlides();
|
||
init();
|
||
setTimeout(updateTransform, 100); // даём браузеру время на рендер
|
||
</script>
|
||
{{ footer.section(user) }}
|
||
{% endblock %} |