From 2bfae5248bf6cf0bf63c12bba348dfcd09f731ef Mon Sep 17 00:00:00 2001 From: Alena Date: Thu, 30 Oct 2025 21:40:53 +0300 Subject: [PATCH] figma_apd_mob_05 --- main.js | 97 ++++++++++++++++++++++++++++++++++++++++++++----------- style.css | 34 ++++++++++++++++++- 2 files changed, 111 insertions(+), 20 deletions(-) diff --git a/main.js b/main.js index 3ee6872..f90bc66 100644 --- a/main.js +++ b/main.js @@ -22,7 +22,12 @@ document.addEventListener('DOMContentLoaded', () => { accordion.after(dotsContainer); let dots = []; - let isMobile = false; // флаг режима + let isMobile = false; + let currentIndex = 0; + + // Свайп + let startX = 0; + let endX = 0; // === СОЗДАНИЕ ТОЧЕК === function createDots() { @@ -47,15 +52,15 @@ document.addEventListener('DOMContentLoaded', () => { }); dots.forEach(dot => dot.classList.remove('active')); - dots[index].classList.add('active'); + if (dots[index]) dots[index].classList.add('active'); } // === АКТИВАЦИЯ СЛАЙДЕРА НА МОБИЛЬНОМ === function enableSlider() { isMobile = true; - items.forEach(item => item.classList.add('active')); // все раскрыты + items.forEach(item => item.classList.add('active')); createDots(); - let currentIndex = 0; + currentIndex = 0; showSlide(currentIndex); dots.forEach((dot, i) => { @@ -65,6 +70,28 @@ document.addEventListener('DOMContentLoaded', () => { }); }); + // свайпы + accordion.addEventListener('touchstart', (e) => { + startX = e.touches[0].clientX; + }); + + accordion.addEventListener('touchmove', (e) => { + endX = e.touches[0].clientX; + }); + + accordion.addEventListener('touchend', () => { + if (!isMobile) return; + const diff = endX - startX; + if (Math.abs(diff) > 50) { + if (diff > 0) { + currentIndex = (currentIndex - 1 + items.length) % items.length; + } else { + currentIndex = (currentIndex + 1) % items.length; + } + showSlide(currentIndex); + } + }); + dotsContainer.style.display = 'flex'; } @@ -73,16 +100,13 @@ document.addEventListener('DOMContentLoaded', () => { isMobile = false; dotsContainer.style.display = 'none'; - // Убираем все active items.forEach(item => { item.classList.remove('active'); item.style.display = 'flex'; }); - // Первая вкладка активна по умолчанию if (items.length > 0) items[0].classList.add('active'); - // Поведение аккордеона items.forEach(item => { item.onclick = () => { if (!isMobile) { @@ -104,7 +128,6 @@ document.addEventListener('DOMContentLoaded', () => { } } - // Инициализация checkWidth(); window.addEventListener('resize', checkWidth); }); @@ -115,11 +138,9 @@ document.addEventListener('DOMContentLoaded', () => { cards.forEach(card => { card.addEventListener('click', () => { - // если уже активна — просто закрываем if (card.classList.contains('active')) { card.classList.remove('active'); } else { - // иначе закрываем все остальные и открываем текущую cards.forEach(c => c.classList.remove('active')); card.classList.add('active'); } @@ -135,14 +156,12 @@ document.addEventListener('DOMContentLoaded', () => { let dotsContainer, dots; function initSlider() { - // если ширина > 900 — отключаем слайдер if (window.innerWidth > 900) { slider.style.transform = ''; if (dotsContainer) dotsContainer.remove(); return; } - // создаём точки только если их ещё нет if (!dotsContainer) { dotsContainer = document.createElement('div'); dotsContainer.classList.add('slider_dots'); @@ -157,15 +176,15 @@ document.addEventListener('DOMContentLoaded', () => { dots = dotsContainer.querySelectorAll('.slider_dot'); } - moveToSlide(0); // начальная позиция + moveToSlide(0); } function moveToSlide(index) { - if (window.innerWidth > 900) return; // не сдвигать если десктоп + if (window.innerWidth > 900) return; if (index < 0) index = slides.length - 1; if (index >= slides.length) index = 0; currentIndex = index; - const slideWidth = slides[0].offsetWidth + 28; // с учётом gap + const slideWidth = slides[0].offsetWidth + 28; slider.style.transform = `translateX(-${index * slideWidth}px)`; updateDots(); } @@ -175,12 +194,31 @@ document.addEventListener('DOMContentLoaded', () => { dots.forEach((dot, i) => dot.classList.toggle('active', i === currentIndex)); } - // пересоздаём слайдер при изменении ширины - window.addEventListener('resize', initSlider); + // === свайп === + let touchStartX = 0; + let touchEndX = 0; - initSlider(); // запустить при загрузке + sliderContainer.addEventListener('touchstart', e => { + touchStartX = e.changedTouches[0].screenX; + }); + + sliderContainer.addEventListener('touchend', e => { + touchEndX = e.changedTouches[0].screenX; + handleSwipe(); + }); + + function handleSwipe() { + const diff = touchEndX - touchStartX; + if (Math.abs(diff) < 50) return; // минимальная дистанция свайпа + if (diff > 0) moveToSlide(currentIndex - 1); // свайп вправо → предыдущий + else moveToSlide(currentIndex + 1); // свайп влево → следующий + } + + window.addEventListener('resize', initSlider); + initSlider(); }); + // ----------------------------------------------------------ВЫПАДАЮЩЕЕ-МЕНЮ-------------------------------------------------------- document.querySelector('.header_nav_link-reverse').addEventListener('click', function() { @@ -282,9 +320,30 @@ document.addEventListener('DOMContentLoaded', () => { } function updateDots() { + if (!dots) return; dots.forEach((dot, i) => dot.classList.toggle('active', i === currentIndex)); } + // === свайп === + let touchStartX = 0; + let touchEndX = 0; + + slider.addEventListener('touchstart', e => { + touchStartX = e.changedTouches[0].screenX; + }); + + slider.addEventListener('touchend', e => { + touchEndX = e.changedTouches[0].screenX; + handleSwipe(); + }); + + function handleSwipe() { + const diff = touchEndX - touchStartX; + if (Math.abs(diff) < 50) return; // минимальная длина свайпа + if (diff > 0) moveToSlide(currentIndex - 1); // свайп вправо → предыдущий + else moveToSlide(currentIndex + 1); // свайп влево → следующий + } + window.addEventListener('resize', initServicesSlider); initServicesSlider(); -}); \ No newline at end of file +}); diff --git a/style.css b/style.css index fb01afe..54ca23b 100644 --- a/style.css +++ b/style.css @@ -737,7 +737,7 @@ html, body, * { width:418px; height:637px; border-radius:30px; - overflow:hidden; + overflow: hidden; cursor:pointer; } /* Слой CLOSE */ @@ -2824,6 +2824,38 @@ body.lock { .info_list_item { font-size: 8px; } +.footer_cont_heading { + font-size: 24px; + } +.item_index_color { + font-size: 24px; + } + .footer_cont_info { + font-size: 14px; + } +.footer_cont_text { + font-size: 14px; +} +.time_item_interval { + font-size: 12px; + } +.footer_cont_btn { + padding: 8px; + font-size: 12px; +} +.chart_cont_title { + font-size: 16px; + } +.chart_cont_text02, +.chart_cont_text02 span { + font-size: 10px; +} +.footer_chart { + padding: 20px; + } +.footer_chart_img { + right: 10px; + } }