4 Commits

Author SHA1 Message Date
Kirill Pet
d04ff5db02 fisx "/assets" > "assets" 2024-12-21 16:25:24 +03:00
Kirill Pet
9422a0c347 сделал открытие меню при наведении 2024-12-21 16:24:40 +03:00
Kirill Pet
ae087de19f сделал уникальные swiper-reviews-img 2024-12-21 16:18:59 +03:00
Kirill Pet
29021ee1e5 fix маски телефона 2024-12-21 15:03:49 +03:00
2 changed files with 188 additions and 88 deletions

View File

@@ -40,11 +40,13 @@ const reviewsSwiper = new Swiper('.reviews-swiper', {
}
})
let reviewsSwiperImg = new Swiper(".swiper-reviews-img", {
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
let swiperReviews = document.querySelectorAll('.swiper-reviews-img');
let reviewsSwiperImgs = {};
swiperReviews.forEach((review, index) => {
let newClass = `swiper-reviews-img-${index}`;
review.classList.add(newClass);
reviewsSwiperImgs[index] = new Swiper(`.${newClass}`, {
pagination: {
el: ".swiper-pagination",
clickable: true,
@@ -52,7 +54,10 @@ let reviewsSwiperImg = new Swiper(".swiper-reviews-img", {
return '<span class="' + className + '">' + "</span>";
},
},
});
});
})
const projectsSwiper = new Swiper('.projects-swiper', {
direction: 'horizontal',
@@ -274,7 +279,7 @@ phoneInputs.forEach(phoneInput => {
let value = phoneInput.value;
if (value.length == 0) {
phoneInput.value += '+7 '
phoneInput.value = '+7 '
}
}
@@ -286,13 +291,22 @@ phoneInputs.forEach(phoneInput => {
if (value.charAt(0) == '+' && length == 1) return;
if (isNaN(data)) {
phoneInput.value = data.slice(0, -1)
phoneInput.value = value.slice(0, -1);
}
if (typeof data != 'object') {
if (length == 6 || length == 10) {
if (length == 2 || length == 6 || length == 10) {
phoneInput.value = value + ' ';
}
if (length == 3 || length == 7 || length == 11) {
if (data != ' ') {
phoneInput.value = value.slice(0, -1) + ' ' + data;
}
}
}
if (length <= 3) {
phoneInput.value = '+7 '
}
});
@@ -308,9 +322,12 @@ blocksMenu.forEach(block =>{
let button = block.querySelector('.header-menu-list__next'),
content = block.querySelector('.header-menu-list-next__content');
button.onclick = function () {
content.classList.add('active');
button.addEventListener('mouseover', function (event) {
if (document.querySelector('.header-menu-list-next__content.active')) {
document.querySelector('.header-menu-list-next__content.active').classList.remove('active');
}
content.classList.add('active');
})
let nextButtons = block.querySelectorAll('.header-menu-list-next-content__item');
@@ -319,7 +336,7 @@ blocksMenu.forEach(block =>{
if (typeof className == 'undefined') return;
button.onclick = function () {
button.addEventListener('mouseover', function (event) {
if (block.querySelector('.header-menu-list-next-content__item.active')) {
block.querySelector('.header-menu-list-next-content__item.active').classList.toggle('active');
block.querySelector('.header-menu-list-next__content-next.active').classList.toggle('active');
@@ -328,8 +345,7 @@ blocksMenu.forEach(block =>{
button.classList.toggle('active');
document.querySelector(`.header-menu-list-next__content-next.${className}`).classList.toggle('active');
}
})
})
content.addEventListener('mouseout', function (event) {

View File

@@ -6,17 +6,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SEO title</title>
<meta name="description" content="SEO Description">
<link rel="shortcut icon" href="/assets/img/favicon.ico?v=1.0">
<link rel="shortcut icon" href="assets/img/favicon.ico?v=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<!-- Базовые стили -->
<link rel="stylesheet" href="/assets/css/gp-style-core.css?v=1.0">
<link rel="stylesheet" href="/assets/css/gp-style-desktop.css?v=1.0">
<link rel="stylesheet" href="assets/css/gp-style-core.css?v=1.0">
<link rel="stylesheet" href="assets/css/gp-style-desktop.css?v=1.0">
<!-- Адаптив -->
<link rel="stylesheet" media="screen and (min-width: 1400px)" href="/assets/css/gp-style-ultra.css?v=1.0">
<link rel="stylesheet" media="screen and (max-width: 992px)" href="/assets/css/gp-style-tablet.css?v=1.0">
<link rel="stylesheet" media="screen and (max-width: 576px)" href="/assets/css/gp-style-mobile.css?v=1.0">
<link rel="stylesheet" media="screen and (min-width: 1400px)" href="assets/css/gp-style-ultra.css?v=1.0">
<link rel="stylesheet" media="screen and (max-width: 992px)" href="assets/css/gp-style-tablet.css?v=1.0">
<link rel="stylesheet" media="screen and (max-width: 576px)" href="assets/css/gp-style-mobile.css?v=1.0">
<!-- Яндекс.Вебмастер + Google Search Console -->
@@ -68,11 +68,11 @@
</div>
<div class="header-main__item">
<a href="#" class="btn-social">
<img src="/assets/img/social/telegram.svg" alt="">
<img src="assets/img/social/telegram.svg" alt="">
</a>
<a href="#" class="btn-social">
<img src="/assets/img/social/whatsapp.svg" alt="">
<img src="assets/img/social/whatsapp.svg" alt="">
</a>
</div>
<div class="header-main__item">
@@ -87,19 +87,19 @@
<div class="header__phone">
<div class="header-phone__item open-modal" data-modal="modal-call">
<img src="/assets/img/icon/device-phone.svg" alt="phone">
<img src="assets/img/icon/device-phone.svg" alt="phone">
</div>
<div class="header-phone__item">
<button class="phone__open-search">
<img src="/assets/img/icon/search.svg" alt="search">
<img src="/assets/img/icon/close.svg" alt="search">
<img src="assets/img/icon/search.svg" alt="search">
<img src="assets/img/icon/close.svg" alt="search">
</button>
</div>
<div class="header-phone__item">
<div class="button-menu">
<img src="/assets/img/icon/menu-hamburger.svg" class="button-menu__open" alt="open">
<img src="assets/img/icon/menu-hamburger.svg" class="button-menu__open" alt="open">
</div>
</div>
</div>
@@ -169,8 +169,8 @@
<div class="header-menu__search">
<button class="header-menu-search__open">
<img src="/assets/img/icon/search.svg" alt="" >
<img src="/assets/img/icon/close.svg" alt="" >
<img src="assets/img/icon/search.svg" alt="" >
<img src="assets/img/icon/close.svg" alt="" >
</button>
<div class="header-menu-search__block">
@@ -179,7 +179,7 @@
<div class="header-menu-search__found">
<div class="header-menu-search__item">
<img src="/assets/img/photo/header-menu-search.png" alt="" class="header-menu-search-item__img">
<img src="assets/img/photo/header-menu-search.png" alt="" class="header-menu-search-item__img">
<div class="header-menu-search-item__content">
<p class="text-2">Беговая дорожка механическая DRAXFIT+</p>
@@ -188,7 +188,7 @@
</div>
<div class="header-menu-search__item">
<img src="/assets/img/photo/header-menu-search.png" alt="" class="header-menu-search-item__img">
<img src="assets/img/photo/header-menu-search.png" alt="" class="header-menu-search-item__img">
<div class="header-menu-search-item__content">
<p class="text-2">Беговая дорожка механическая DRAXFIT+</p>
@@ -240,11 +240,11 @@
<div class="phone-social">
<a href="#" class="btn-social">
<img src="/assets/img/social/telegram.svg" alt="">
<img src="assets/img/social/telegram.svg" alt="">
</a>
<a href="#" class="btn-social">
<img src="/assets/img/social/whatsapp.svg" alt="">
<img src="assets/img/social/whatsapp.svg" alt="">
</a>
</div>
</div>
@@ -320,7 +320,7 @@
</p> -->
<div class="phone-search__item">
<img src="/assets/img/photo/header-menu-search.png" alt="" class="phone-search-item__img">
<img src="assets/img/photo/header-menu-search.png" alt="" class="phone-search-item__img">
<div class="phone-search-item__content">
<p class="text-2">Беговая дорожка механическая DRAXFIT+</p>
@@ -340,7 +340,7 @@
<div class="space__content">
<div class="space__statistics">
<img src="/assets/img/photo/space.png" alt="" class="space-statistics__img">
<img src="assets/img/photo/space.png" alt="" class="space-statistics__img">
<div class="space-statistics__item">
<p class="title-3">
@@ -380,7 +380,7 @@
<article class="gym gym-swiper">
<div class="swiper-wrapper">
<div class="gym__item swiper-slide">
<img src="/assets/img/photo/gym-1.png" alt="" class="gym-item__img gym-item-img--padding">
<img src="assets/img/photo/gym-1.png" alt="" class="gym-item__img gym-item-img--padding">
<div class="gym-item__text gym-item-text--padding">
<div class="gym-item-text__header">
@@ -399,7 +399,7 @@
</div>
</div>
<div class="gym__item swiper-slide">
<img src="/assets/img/photo/gym-2.png" alt="" class="gym-item__img gym-item-img--padding">
<img src="assets/img/photo/gym-2.png" alt="" class="gym-item__img gym-item-img--padding">
<div class="gym-item__text gym-item-text--padding">
<div class="gym-item-text__header">
@@ -420,7 +420,7 @@
<div class="swiper-slide">
<div class="gym__item">
<img src="/assets/img/photo/gym-3.png" alt="" class="gym-item__img">
<img src="assets/img/photo/gym-3.png" alt="" class="gym-item__img">
</div>
<div class="gym__item">
@@ -453,18 +453,18 @@
<article class="projects projects-swiper">
<div class="swiper-wrapper">
<div class="projects__item swiper-slide">
<img src="/assets/img/photo/projects-1.png" alt="" class="projects-item__img">
<img src="assets/img/photo/projects-1.png" alt="" class="projects-item__img">
<div class="projects-item__content">
<div class="projects-item__tags">
<div class="projects-item__tag">
<img src="/assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon">
<img src="assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon">
<p class="projects-item-tag__name text-2">Локация</p>
</div>
<div class="projects-item__tag">
<img src="/assets/img/icon/square.svg" alt="" class="projects-item-tag__icon">
<img src="assets/img/icon/square.svg" alt="" class="projects-item-tag__icon">
<p class="projects-item-tag__name text-2">Площадь</p>
</div>
@@ -480,18 +480,18 @@
</div>
<div class="projects__item swiper-slide">
<img src="/assets/img/photo/projects-2.png" alt="" class="projects-item__img">
<img src="assets/img/photo/projects-2.png" alt="" class="projects-item__img">
<div class="projects-item__content">
<div class="projects-item__tags">
<div class="projects-item__tag">
<img src="/assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon">
<img src="assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon">
<p class="projects-item-tag__name text-2">Локация</p>
</div>
<div class="projects-item__tag">
<img src="/assets/img/icon/square.svg" alt="" class="projects-item-tag__icon">
<img src="assets/img/icon/square.svg" alt="" class="projects-item-tag__icon">
<p class="projects-item-tag__name text-2">Площадь</p>
</div>
@@ -507,18 +507,18 @@
</div>
<div class="projects__item swiper-slide">
<img src="/assets/img/photo/projects-3.png" alt="" class="projects-item__img">
<img src="assets/img/photo/projects-3.png" alt="" class="projects-item__img">
<div class="projects-item__content">
<div class="projects-item__tags">
<div class="projects-item__tag">
<img src="/assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon">
<img src="assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon">
<p class="projects-item-tag__name text-2">Локация</p>
</div>
<div class="projects-item__tag">
<img src="/assets/img/icon/square.svg" alt="" class="projects-item-tag__icon">
<img src="assets/img/icon/square.svg" alt="" class="projects-item-tag__icon">
<p class="projects-item-tag__name text-2">Площадь</p>
</div>
@@ -534,18 +534,18 @@
</div>
<div class="projects__item swiper-slide">
<img src="/assets/img/photo/projects-4.png" alt="" class="projects-item__img">
<img src="assets/img/photo/projects-4.png" alt="" class="projects-item__img">
<div class="projects-item__content">
<div class="projects-item__tags">
<div class="projects-item__tag">
<img src="/assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon">
<img src="assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon">
<p class="projects-item-tag__name text-2">Локация</p>
</div>
<div class="projects-item__tag">
<img src="/assets/img/icon/square.svg" alt="" class="projects-item-tag__icon">
<img src="assets/img/icon/square.svg" alt="" class="projects-item-tag__icon">
<p class="projects-item-tag__name text-2">Площадь</p>
</div>
@@ -635,7 +635,7 @@
</p>
</div>
<img src="/assets/img/photo/how-1.png" alt="" class="how-content-item__img how-content-item__img--1">
<img src="assets/img/photo/how-1.png" alt="" class="how-content-item__img how-content-item__img--1">
</div>
</div>
</div>
@@ -665,7 +665,7 @@
</p>
</div>
<img src="/assets/img/photo/how-2.png" alt="" class="how-content-item__img how-content-item__img--2">
<img src="assets/img/photo/how-2.png" alt="" class="how-content-item__img how-content-item__img--2">
</div>
</div>
</div>
@@ -689,7 +689,7 @@
</p>
</div>
<img src="/assets/img/photo/how-3.png" alt="" class="how-content-item__img how-content-item__img--3">
<img src="assets/img/photo/how-3.png" alt="" class="how-content-item__img how-content-item__img--3">
</div>
</div>
</div>
@@ -730,7 +730,7 @@
<input type="file" id="free__file">
<label for="free__file" class="form__file">
<div href="#" class="btn-social form__mini-btn">
<img src="/assets/img/icon/paper-clip.svg" alt="">
<img src="assets/img/icon/paper-clip.svg" alt="">
</div>
<p class="form-additional__text text-3">Загрузить свой проект на просчет</p>
</label>
@@ -765,7 +765,7 @@
<div class="reviews__item swiper-slide">
<div class="reviews-item__content">
<div class="reviews-item-content__header">
<img src="/assets/img/photo/reviews-person.png" alt="" class="reviews-item-content-header__img">
<img src="assets/img/photo/reviews-person.png" alt="" class="reviews-item-content-header__img">
<div class="reviews-item-content-header__block">
<div class="reviews-item-content-header__item">
@@ -791,19 +791,19 @@
<div class="swiper swiper-reviews-img">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="/assets/img/photo/reviews.png" alt="">
<img src="assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="/assets/img/photo/reviews.png" alt="">
<img src="assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="/assets/img/photo/reviews.png" alt="">
<img src="assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="/assets/img/photo/reviews.png" alt="">
<img src="assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="/assets/img/photo/reviews.png" alt="">
<img src="assets/img/photo/reviews.png" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
@@ -814,7 +814,7 @@
<div class="reviews__item swiper-slide">
<div class="reviews-item__content">
<div class="reviews-item-content__header">
<img src="/assets/img/photo/reviews-person.png" alt="" class="reviews-item-content-header__img">
<img src="assets/img/photo/reviews-person.png" alt="" class="reviews-item-content-header__img">
<div class="reviews-item-content-header__block">
<div class="reviews-item-content-header__item">
@@ -837,13 +837,34 @@
</div>
</div>
<img src="/assets/img/photo/reviews.png" alt="" class="reviews-item__img">
<div class="reviews-item__img-block">
<div class="swiper swiper-reviews-img">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="assets/img/photo/reviews.png" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="reviews__item swiper-slide">
<div class="reviews-item__content">
<div class="reviews-item-content__header">
<img src="/assets/img/photo/reviews-person.png" alt="" class="reviews-item-content-header__img">
<img src="assets/img/photo/reviews-person.png" alt="" class="reviews-item-content-header__img">
<div class="reviews-item-content-header__block">
<div class="reviews-item-content-header__item">
@@ -866,13 +887,34 @@
</div>
</div>
<img src="/assets/img/photo/reviews.png" alt="" class="reviews-item__img">
<div class="reviews-item__img-block">
<div class="swiper swiper-reviews-img">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="assets/img/photo/reviews.png" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="reviews__item swiper-slide">
<div class="reviews-item__content">
<div class="reviews-item-content__header">
<img src="/assets/img/photo/reviews-person.png" alt="" class="reviews-item-content-header__img">
<img src="assets/img/photo/reviews-person.png" alt="" class="reviews-item-content-header__img">
<div class="reviews-item-content-header__block">
<div class="reviews-item-content-header__item">
@@ -895,13 +937,34 @@
</div>
</div>
<img src="/assets/img/photo/reviews.png" alt="" class="reviews-item__img">
<div class="reviews-item__img-block">
<div class="swiper swiper-reviews-img">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="assets/img/photo/reviews.png" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="reviews__item swiper-slide">
<div class="reviews-item__content">
<div class="reviews-item-content__header">
<img src="/assets/img/photo/reviews-person.png" alt="" class="reviews-item-content-header__img">
<img src="assets/img/photo/reviews-person.png" alt="" class="reviews-item-content-header__img">
<div class="reviews-item-content-header__block">
<div class="reviews-item-content-header__item">
@@ -924,7 +987,28 @@
</div>
</div>
<img src="/assets/img/photo/reviews.png" alt="" class="reviews-item__img">
<div class="reviews-item__img-block">
<div class="swiper swiper-reviews-img">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="assets/img/photo/reviews.png" alt="">
</div>
<div class="swiper-slide">
<img src="assets/img/photo/reviews.png" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
@@ -979,7 +1063,7 @@
<input type="file" id="text-form__file">
<label for="text-form__file" class="form__file">
<div href="#" class="btn-social form__mini-btn">
<img src="/assets/img/icon/paper-clip.svg" alt="">
<img src="assets/img/icon/paper-clip.svg" alt="">
</div>
<p class="form-additional__text text-3">Загрузить свой проект на просчет</p>
</label>
@@ -1007,7 +1091,7 @@
<article class="services">
<div class="services__item">
<img src="/assets/img/icon/services-1.svg" alt="" class="services__img">
<img src="assets/img/icon/services-1.svg" alt="" class="services__img">
<div class="services__content">
<p class="title-4">Доставка</p>
@@ -1015,7 +1099,7 @@
</div>
</div>
<div class="services__item">
<img src="/assets/img/icon/services-2.svg" alt="" class="services__img">
<img src="assets/img/icon/services-2.svg" alt="" class="services__img">
<div class="services__content">
<p class="title-4">Сервис и запчасти</p>
@@ -1023,7 +1107,7 @@
</div>
</div>
<div class="services__item">
<img src="/assets/img/icon/services-3.svg" alt="" class="services__img">
<img src="assets/img/icon/services-3.svg" alt="" class="services__img">
<div class="services__content">
<p class="title-4">Трейд-Ин</p>
@@ -1031,7 +1115,7 @@
</div>
</div>
<div class="services__item">
<img src="/assets/img/icon/services-4.svg" alt="" class="services__img">
<img src="assets/img/icon/services-4.svg" alt="" class="services__img">
<div class="services__content">
<p class="title-4">Обучение персонала</p>
@@ -1039,7 +1123,7 @@
</div>
</div>
<div class="services__item">
<img src="/assets/img/icon/services-5.svg" alt="" class="services__img">
<img src="assets/img/icon/services-5.svg" alt="" class="services__img">
<div class="services__content">
<p class="title-4">Лизинг</p>
@@ -1077,7 +1161,7 @@
<footer class="footer">
<div class="wrapper footer__wrapper">
<img src="/assets/img/main/logo.svg" alt="" class="footer__logo">
<img src="assets/img/main/logo.svg" alt="" class="footer__logo">
<div class="footer__item">
<div class="footer__menu">
@@ -1113,29 +1197,29 @@
<div class="footer__media">
<a href="#" class="btn-social">
<img src="/assets/img/social/telegram.svg" alt="">
<img src="assets/img/social/telegram.svg" alt="">
</a>
<a href="#" class="btn-social">
<img src="/assets/img/social/whatsapp.svg" alt="">
<img src="assets/img/social/whatsapp.svg" alt="">
</a>
<a href="#" class="btn-social">
<img src="/assets/img/social/YouTube.svg" alt="">
<img src="assets/img/social/YouTube.svg" alt="">
</a>
<a href="#" class="btn-social">
<img src="/assets/img/social/Вконтакте.svg" alt="">
<img src="assets/img/social/Вконтакте.svg" alt="">
</a>
<a href="#" class="btn-social">
<img src="/assets/img/social/yandex-zen.svg" alt="">
<img src="assets/img/social/yandex-zen.svg" alt="">
</a>
</div>
</div>
<div class="footer__item">
<img src="/assets/img/photo/review.png" alt="" class="footer__review">
<img src="assets/img/photo/review.png" alt="" class="footer__review">
</div>
</div>
@@ -1181,7 +1265,7 @@
<input type="file" id="free__file">
<label for="free__file" class="form__file">
<div href="#" class="btn-social form__mini-btn">
<img src="/assets/img/icon/paper-clip.svg" alt="">
<img src="assets/img/icon/paper-clip.svg" alt="">
</div>
<p class="form-additional__text text-3">Загрузить свой проект на просчет</p>
</label>
@@ -1255,6 +1339,6 @@
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="/assets/js/main.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>