From 08f2f904f95b7692188dd7b33bdfe20d43721e00d9d39d92116108092df29c71 Mon Sep 17 00:00:00 2001
From: Vladislav <ozerow.vlad2018@yandex.ru>
Date: Tue, 30 Jun 2026 19:13:52 -0400
Subject: [PATCH] =?UTF-8?q?Bot=20commit:=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BD=20=D1=84=D0=B0=D0=B9=D0=BB=20templates/news/?=
 =?UTF-8?q?index.html?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/news/index.html | 391 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 391 insertions(+)
 create mode 100644 templates/news/index.html

diff --git a/templates/news/index.html b/templates/news/index.html
new file mode 100644
index 0000000..a8683ff
--- /dev/null
+++ b/templates/news/index.html
@@ -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 %}
\ No newline at end of file