Bot commit: Добавлен файл templates/news/index.html
This commit is contained in:
parent
fcbde87020
commit
08f2f904f9
391
templates/news/index.html
Normal file
391
templates/news/index.html
Normal file
@ -0,0 +1,391 @@
|
||||
{% 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 %}
|
||||
Loading…
Reference in New Issue
Block a user