/
Simka
/
agatech
Обзор
Документация
Войти
/
Simka
/
agatech
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
index.html
474 строки
22 KB
Simka
upload files
20 сен 2025, 10:33
20 сен 2025, 10:33
b08f074
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="yandex-verification" content="6d51054b2dbf594c" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="./css/styles.css"> <title>AgaTech</title> </head> <body> <header class="header"> <div class="header-left"> <img src="./assets/LOGO.png" alt=""> <nav> <a href="index.html#about">О НАС</a> <a href="index.html#services">УСЛУГИ</a> <a href="index.html#audit">СОТРУДНИЧЕСТВО</a> <a href="index.html#case">КЕЙСЫ</a> </nav> </div> <div class="header-right"> <button class="buttons">Экспресс-айдит</button> </div> </header> <main class="main"> <div class="main-play"> <div class="main-play-words"> <h1 class="headline1"> Упорядочим ваш хаус </h1> <p class="main-minitext"> Запишитесь на бесплатный аудит и получите готовую систему масштабирования ваших услуг от специалистов с опытом продвижения в более чем 250 нишах </p> <button class="buttons">Получить стратегию</button> </div> <div class="main-play-img"> <img src="./assets/CUBE.png" alt=""> </div> </div> <div class="main-mission"> <h5 class="headline2">Наша миссия</h5> <p class="main-text"> Помогать бизнесам достигать высот через инновационные решения, обеспечивая эффективное развитие и устойчивый рост в цифровом пространстве </p> </div> <div class="main-about" id="about"> <div class="main-about-left"> <h5 class="headline2">О нас</h5> </div> <div class="main-about-right"> <div class="main-about-right-block"> <div class="main-about-right-block-z"> <b>>16 лет</b> <p class="main-text"> на рынке</p> </div> <div class="main-about-right-block-z"> <span class="main-minitext">Отточенные процессы и понимания бизнес-задач</span> </div> </div> <div class="main-about-right-block"> <div class="main-about-right-block-z"> <b>>300</b> <p class="main-text"> проектов</p> </div> <div class="main-about-right-block-z"> <span class="main-minitext">Для малого и среднего бизнеса - знаем, как делать результат</span> </div> </div> <div class="main-about-right-block"> <div class="main-about-right-block-z"> <b>>90%</b> <p class="main-text"> клиентов</p> </div> <div class="main-about-right-block-z"> <span class="main-minitext">Возвращаются к нам с новыми задачами</span> </div> </div> </div> </div> <div class="main-services" id="services"> <h5 class="headline2">Услуги</h5> <div class="main-services-grid"> <div class="all-first"> <div class="main-services-card"> <h3 class="main-services-title">Разработка сайтов</h3> <p class="main-services-description">Сайты - визитки, интернет магазины, сайты гос. учреждений, корпоративные сайты</p> </div> <div class="all-second"> <div class="main-services-card"> <h3 class="main-services-title">API интеграции с сервисами</h3> <p class="main-services-description">Сайты - визитки, интернет магазины, сайты гос. учреждений, корпоративные сайты</p> </div> <div class="each-50 "> <div class="main-services-card"> <h3 class="main-services-title">SMM</h3> <p class="main-services-description">Сайты - визитки, интернет магазины, сайты гос. учреждений, корпоративные сайты</p> </div> <div class="main-services-card"> <h3 class="main-services-title">Аналитика и мониторинг</h3> <p class="main-services-description">Сайты - визитки, интернет магазины, сайты гос. учреждений, корпоративные сайты</p> </div> </div> </div> <div class="main-services-card"> <h3 class="main-services-title">Продвижение сайтов</h3> <p class="main-services-description">Сайты - визитки, интернет магазины, сайты гос. учреждений, корпоративные сайты</p> </div> </div> <div class="each-501"> <div class="main-services-card"> <h3 class="main-services-title">Веб-хостинг и домены</h3> <p class="main-services-description">Сайты - визитки, интернет магазины, сайты гос. учреждений, корпоративные сайты</p> </div> <div class="main-services-card"> <h3 class="main-services-title">Поддержка и обслуживание</h3> <p class="main-services-description">Сайты - визитки, интернет магазины, сайты гос. учреждений, корпоративные сайты</p> </div> </div> </div> </div> <div class="main-mission"> <p class="main-text"> Мы объединили все необходимые направления для качественной разработки и продвижения </p> </div> <div class="slider-wrapper"> <div class="slider"> <div class="slide"> <div class="slide-content"> <h1 class="headline1">Сбор аналитики</h1> <ul> <li> Определяем ТОП - 10 прибыльных товаров </li> <li> Сравниваем цены конкурентов </li> <li> Оцениваем покупательский спрос </li> <li> Анализируем текущие показатели сайта </li> <li> Прогнозируем продажи на основе данных </li> </ul> <button class="buttons">Начать</button> </div> </div> <div class="slide"> <div class="slide-content"> <h1 class="headline1">Разработка рекламной компании</h1> <ul> <li> Определяем ТОП - 10 прибыльных товаров </li> <li> Сравниваем цены конкурентов </li> <li> Оцениваем покупательский спрос </li> <li> Анализируем текущие показатели сайта </li> <li> Прогнозируем продажи на основе данных </li> </ul> <button class="buttons">Начать</button> </div> </div> <div class="slide"> <div class="slide-content"> <h1 class="headline1">Модернизация для создания интернет-ресурса</h1> <ul> <li> Определяем ТОП - 10 прибыльных товаров </li> <li> Сравниваем цены конкурентов </li> <li> Оцениваем покупательский спрос </li> <li> Анализируем текущие показатели сайта </li> <li> Прогнозируем продажи на основе данных </li> </ul> <button class="buttons">Начать</button> </div> </div> <div class="slide"> <div class="slide-content"> <h1 class="headline1">Поддержка развития</h1> <ul> <li> Определяем ТОП - 10 прибыльных товаров </li> <li> Сравниваем цены конкурентов </li> <li> Оцениваем покупательский спрос </li> <li> Анализируем текущие показатели сайта </li> <li> Прогнозируем продажи на основе данных </li> </ul> <button class="buttons">Начать</button> </div> </div> </div> <div class="progress-container"> <div class="progress-bar" id="progressBar"></div> </div> <div class="dots-container" id="dotsContainer"></div> <div class="nav-buttons"> <button class="nav-btn" id="prevBtn">Назад</button> <button class="nav-btn" id="nextBtn">Вперед</button> </div> </div> <div class="main-case" id="case"> <div class="main-case-title"> <h5 class="headline2">Кейсы</h5> <div class="filters"> <button class="filter-btn">Производственные предприятия</button> <button class="filter-btn">Медицинские клиники</button> <button class="filter-btn">Сферы услуг</button> <button class="filter-btn">Недвижимость и строительство</button> <button class="filter-btn">E-commerce</button> <button class="filter-btn">Государственные учреждения</button> </div> </div> <div class="main-case-gallery"> <div class="main-case-gallery-item"> <img src="./assets/CASE1.png" alt="Бутылка минеральной воды Аш-Тау"> </div> <div class="main-case-gallery-item"> <img src="./assets/CASE2.png" alt="Умные часы"> </div> <div class="main-case-gallery-item"> <img src="./assets/CASE3.png" alt="Ветряная электростанция"> </div> <div class="main-case-gallery-item"> <img src="./assets/CASE4.png" alt="SIBUR"> </div> </div> </div> <div class="main-audit" id="audit"> <div class="main-audit-headline"> <h5 class="headline2">Экспресс-аудит</h5> </div> <div class="main-audit-info"> <p class="main-text">Запишитесь на экспресс-аудит</p> <span class="main-minitext">Ответьте на 4 вопроса и мы подготовим персональные коммерческое предложение под ваш проект. Взамен подарим гарантированную скидку 30% на одну из услуг! </span> <button class="buttons">Начать</button> </div> </div> </main> <footer class="footer"> <div class="footer-left"> <img src="./assets/LOGO.png" alt="Agatech Logo" class="logo"> </div> <div class="footer-right"> <div class="footer-center"> <ul class="nav-links"> <li><a href="#">О НАС</a></li> <li><a href="#">УСЛУГИ</a></li> <li><a href="#">СОТРУДНИЧЕСТВО</a></li> <li><a href="#">КЕЙСЫ</a></li> <li><a href="#">ЭКСПРЕСС-АУДИТ</a></li> </ul> </div> <div class="contact-info"> <p><strong>Контакты:</strong></p> <p>ул. Ленина, д. 89, 4 этаж, 432017</p> <p>support@agatech.ru</p> <p><strong>Контакты:</strong></p> <div class="social-icons"> <img src="./assets/SS1.png" alt=""> <img src="./assets/SS2.png" alt=""> <img src="./assets/SS3.png" alt=""> </div> </div> </div> </footer> <script> document.addEventListener('DOMContentLoaded', function () { const sliderWrapper = document.querySelector('.slider-wrapper'); const slider = document.querySelector('.slider'); const slides = document.querySelectorAll('.slide'); const progressBar = document.getElementById('progressBar'); const prevBtn = document.getElementById('prevBtn'); const nextBtn = document.getElementById('nextBtn'); const dotsContainer = document.getElementById('dotsContainer'); const progressContainer = document.querySelector('.progress-container'); const navButtons = document.querySelector('.nav-buttons'); const dotsContainerEl = document.querySelector('.dots-container'); let currentSlide = 0; const totalSlides = slides.length; let isSliderActive = false; let isScrolling = false; // Создаем точки навигации for (let i = 0; i < totalSlides; i++) { const dot = document.createElement('div'); dot.classList.add('dot'); if (i === 0) dot.classList.add('active'); dot.addEventListener('click', () => goToSlide(i)); dotsContainer.appendChild(dot); } const dots = document.querySelectorAll('.dot'); // Функция для перехода к слайду function goToSlide(slideIndex) { if (slideIndex < 0) slideIndex = 0; if (slideIndex >= totalSlides) slideIndex = totalSlides - 1; currentSlide = slideIndex; slider.style.transform = `translateY(-${currentSlide * 100}vh)`; // Обновляем прогресс-бар const progress = ((currentSlide + 1) / totalSlides) * 100; progressBar.style.height = `${progress}%`; // Обновляем активную точку dots.forEach((dot, index) => { if (index === currentSlide) { dot.classList.add('active'); } else { dot.classList.remove('active'); } }); } // Активация слайдера при появлении в viewport function checkSliderVisibility() { const rect = sliderWrapper.getBoundingClientRect(); const windowHeight = window.innerHeight; // Слайдер активен, когда он хотя бы на 90% виден if (rect.top < windowHeight * 0.7 && rect.bottom > windowHeight * 0.9) { if (!isSliderActive) { isSliderActive = true; progressContainer.style.opacity = '1'; navButtons.style.opacity = '1'; dotsContainerEl.style.opacity = '1'; } } else { if (isSliderActive) { isSliderActive = false; progressContainer.style.opacity = '0'; navButtons.style.opacity = '0'; dotsContainerEl.style.opacity = '0'; } } } // Обработчики кнопок prevBtn.addEventListener('click', () => { if (isSliderActive) { goToSlide(currentSlide - 1); } }); nextBtn.addEventListener('click', () => { if (isSliderActive) { goToSlide(currentSlide + 1); } }); // Обработка колесика мыши window.addEventListener('wheel', function (e) { if (!isSliderActive || isScrolling) return; isScrolling = true; setTimeout(() => { isScrolling = false; }, 400); if (e.deltaY > 0) { // Прокрутка вниз goToSlide(currentSlide + 1); } else { // Прокрутка вверх goToSlide(currentSlide - 1); } // Предотвращаем стандартную прокрутку страницы e.preventDefault(); }, { passive: false }); // Обработка свайпов на тач-устройствах let startY = 0; sliderWrapper.addEventListener('touchstart', function (e) { if (!isSliderActive) return; startY = e.touches[0].clientY; }, { passive: true }); sliderWrapper.addEventListener('touchend', function (e) { if (!isSliderActive) return; const endY = e.changedTouches[0].clientY; const diff = startY - endY; if (Math.abs(diff) > 50) { // Минимальное расстояние для свайпа if (diff > 0) { // Свайп вверх goToSlide(currentSlide + 1); } else { // Свайп вниз goToSlide(currentSlide - 1); } } }, { passive: true }); // Проверка видимости слайдера при скролле window.addEventListener('scroll', function () { checkSliderVisibility(); }); // Инициализация checkSliderVisibility(); goToSlide(0); // Проверка видимости при изменении размера окна window.addEventListener('resize', function () { checkSliderVisibility(); }); }); </script> </body> </html>