fix log

assets/css/gp-style-core.css

@@ -204,6 +204,7 @@ body{
     background-color: rgba(17, 17, 20, 0);
 
     cursor: pointer;
+    border: none;
 }
 .btn-big--border{
     padding: 21px 32px;

assets/css/gp-style-desktop.css

@@ -26,6 +26,17 @@
 .text-3{
     font-size: 16px;
 }
+@media only screen and (min-width: 992px) and (max-width: 1500px) {
+.wrapper{
+    max-width: 100%;
+    width: 100%;
+
+    padding: 0 20px;
+}
+.header__wrapper{
+    padding: 20px;
+}
+}
 /* text */
 
 /* header */
@@ -103,6 +114,7 @@
 .header-menu__list li:first-child{
     margin-left: 0;
 }
+
 .header-menu__list a{
     color: var(--text-white);
     text-decoration: none;
@@ -113,6 +125,72 @@
     background-image: url(/assets/img/icon/arrow-bottom.svg);
     background-repeat: no-repeat;
     background-position: center right;
+
+    display: block;
+}
+.header-menu-list__sub{
+    margin-top: 30px;
+
+    position: absolute;
+
+    width: 300px;
+
+    padding: 14px 0;
+
+    list-style-type: none;
+    background-color: var(--background-grey);
+
+    opacity: 0;
+    pointer-events: none;
+
+    transition: all .3s;
+}
+.header-menu-list__sub.open{
+    opacity: 1;
+    pointer-events: auto;
+}
+.header-menu-list__sub li{
+    margin-left: 0;
+}
+.header-menu-list__sub li > a{
+    padding: 14px 24px;
+
+    transition: all .3s;
+
+    display: block;
+}
+.header-menu-list__sub > li:hover{
+    padding-right: 23px;
+
+    background-color: var(--background-grey-hover);
+    border-right: 1px solid var(--text-white);
+}
+.header-menu-list__sub > li > ul{
+    transition: all .3s;
+}
+.header-menu-list__sub > li:hover > ul{
+    opacity: 1;
+    pointer-events: auto;
+}
+.header-menu-list__sub ul{
+    position: absolute;
+    top: 0;
+    left: 100%;
+
+    width: 100%;
+    height: 100%;
+
+    display: block;
+
+    background-color: var(--background-grey-hover);
+    list-style-type: none;
+
+    opacity: 0;
+    pointer-events: none;
+}
+.header-menu-list__sub ul.open{
+    opacity: 1;
+    pointer-events: auto;
 }
 .header-menu__search{
     display: flex;
@@ -191,6 +269,11 @@
 
     background-color: var(--background-grey-hover);
     border-radius: 4px;
+
+    display: none;
+}
+.header-menu-search__found.active{
+    display: block;
 }
 .header-menu-search__error{}
 .header-menu-search__item{
@@ -274,13 +357,18 @@
 /* footer */
 
 /* Стили для лептопов  */
-@media only screen and (min-width: 992px) and (max-width: 1400px) {
+@media only screen and (min-width: 992px) and (max-width: 1500px) {
 .wrapper{
     width: 100%;
 
     padding: 20px;
 }
-
+.header-menu-list-next__content {
+    top: 72px;
+}
+.header-menu-search__block {
+    top: 78px;
+}
 /* header */
 .header__wrapper{
     flex-wrap: wrap;
@@ -455,7 +543,7 @@
 
 @media only screen and (min-width: 992px) {
 .gym__item{
-    width: calc(50% - 40px) !important;
+    width: calc(50% - 44px) !important;
 }
 .gym .swiper-slide:nth-child(3){
     width: 100% !important;
@@ -473,7 +561,7 @@
 .projects__item{
     margin: 20px;
 
-    width: calc(50% - 40px) !important;
+    width: calc(50% - 44px) !important;
 
     display: flex;
     flex-direction: column;
@@ -762,6 +850,26 @@
 
     flex-shrink: 0;
 }
+.reviews-item__img-block{
+    margin-left: 164px;
+
+    width: 577px;
+    height: 600px;
+    border-radius: 4px;
+
+    object-fit: cover;
+
+    flex-shrink: 0;
+
+    position: relative;
+}
+.reviews .reviews-item__img-block .swiper-pagination{
+    bottom: 16px;
+
+    padding-right: 0px;
+
+    text-align: center;
+}
 .reviews .swiper-pagination{
     position: absolute;
     right: 32px;
@@ -954,16 +1062,38 @@
 
 /* modal */
 .modal__item{
-    width: 1000px;;
+    width: 1000px;
+
+    position: relative;
 }
 .modal__item > .title-1{
     text-align: center;
 }
+.modal__item > .text-1{
+    text-align: center;
+}
 .modal__item > .text-1{
     margin-top: 24px;
 }
 .modal__item > .form{
     padding: 56px 36px 0 36px;
 }
+.modal-item__close{
+    position: absolute;
+    top: 40px;
+    right: 40px;
+
+    width: 24px;
+    aspect-ratio: 1;
+
+    background-image: url(/assets/img/icon/close.svg);
+    background-repeat: no-repeat;
+    background-position: center;
+
+    background-color: rgba(42, 42, 45, 0);
+    border: none;
+
+    cursor: pointer;
+}
 /* modal */
 @media only screen and (min-width: 992px) and (max-width: 1032px) {}

assets/css/gp-style-tablet.css

@@ -110,14 +110,14 @@
     height: 100vh;
     overflow-y: auto;
 }
-.phone-menu__block-content{
+/* .phone-menu__block-content{
     height: 0;
     overflow: hidden;
 
     z-index: 10;
 
     transition: all .5s;
-}
+} */
 .phone-menu__content{
     padding: 104px 16px 40px 16px;
 
@@ -127,20 +127,24 @@
     position: absolute;
     top: 0;
     left: 100%;
-    width: 100%;
-    transition: all .3s;
 
-    height: 100vh;
+    width: 100%;
+    height: 100%;
+
+    padding: 104px 16px 40px 16px;
 
     background-color: var(--background-main);
-}
-.phone-menu__sub.active{
-    left: 0;
+
+    transition: all .5s;
 
     overflow-y: auto;
 }
-.phone-menu__sub .title-1{
-    margin-bottom: 32px;
+.phone-menu__sub.open{
+    left: 0;
+}
+.phone-menu__sub > li:nth-child(2) a{
+    font-weight: 700;
+    font-size: 32px;
 }
 .phone-menu-content__close{
     position: absolute;
@@ -213,14 +217,12 @@
 .phone-menu__text--no-line{
     text-decoration: none;
 }
-
 .phone-social{
     margin-top: 24px;
 
     display: flex;
     align-items: center;
 }
-
 .phone-menu{
     display: block;
 }
@@ -625,6 +627,9 @@ main{
 .form__checkbox-block{
     align-items: start;
 }
+.free .title-1{
+    text-align: center;
+}
 }
 
 /* reviews */
@@ -661,6 +666,26 @@ main{
     height: 300px;
     width: 100%;
 }
+.reviews-item__img-block{
+    margin-top: 24px;
+    margin-left: 0;
+
+    height: 300px;
+    width: 100%;
+}
+.swiper-reviews-img{
+    height: 100%;
+}
+.reviews-item__img-block .swiper-slide{
+    width: 100%;
+    height: 100%;
+}
+.reviews-item__img-block .swiper-slide img{    
+    width: 100%;
+    height: 100%;
+
+    object-fit: cover;
+}
 .reviews .swiper-pagination{
     bottom: 87px;
 
@@ -751,5 +776,21 @@ main{
 }
 /* call */
 
+/* modal */
+.modal__item{
+    padding: 64px 16px;
+}
+.modal__item > .form{
+    padding: 40px 0 0 0;
+}
+.modal-item__close{
+    top: 20px;
+    right: 20px;
+}
+.modal__item .text--bo-line.form__link{
+    margin-top: 6px;
+    margin-left: 0;
+}
+/* modal */
 
 @media only screen and (max-width: 992px) {}

assets/js/main.js

@@ -15,6 +15,7 @@ const gymSwiper = new Swiper('.gym-swiper', {
 
 const reviewsSwiper = new Swiper('.reviews-swiper', {
     spaceBetween: 24,
+    allowTouchMove: false,
     // If we need pagination
     pagination: {
         el: '.swiper-pagination',
@@ -40,6 +41,25 @@ const reviewsSwiper = new Swiper('.reviews-swiper', {
     }
 })
 
+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,
+            renderBullet: function (index, className) {
+                return '<span class="' + className + '">' + "</span>";
+            },
+        },
+    });
+})
+
+
+
 const projectsSwiper = new Swiper('.projects-swiper', {
     direction: 'horizontal',
     breakpoints: {
@@ -48,7 +68,7 @@ const projectsSwiper = new Swiper('.projects-swiper', {
             spaceBetween: 24,
         },
         996: {
-            slidesPerView: 1
+            slidesPerView: 10
         },
     },
     // Navigation arrows
@@ -143,51 +163,58 @@ function howPhone() {
 // how end
 
 // phone menu
+addClosePhoneMenu('.phone-menu__content');
+addClosePhoneMenu('.phone-menu__sub');
+
 let btnOpenMenu = document.querySelector('.button-menu__open');
-
 btnOpenMenu.onclick = function () {
-    let phoneMenu = document.querySelector('.phone-menu'),
-        block = document.querySelector('.phone-menu__block-content.main'),
-        content = document.querySelector('.phone-menu__content.main'),
-        newHeigh = content.offsetHeight + 'px';
+    let block = document.querySelector('.phone-menu'),
+        content = document.querySelector('.phone-menu__content'),
+        contentHeight = content.offsetHeight + 'px';
 
-    phoneMenu.classList.add('active');
-    // block.classList.add('active');
-    block.style.height = newHeigh;
+    block.style.height = contentHeight;
 }
 
-let closeMainMenu = document.querySelector('.phone-menu-content__close.main');
+let closeMenu = document.querySelector('.phone-menu-content__close');
+closeMenu.onclick = function () {
+    let block = document.querySelector('.phone-menu');
 
-closeMainMenu.onclick = function () {
-    let phoneMenu = document.querySelector('.phone-menu'),
-        block = document.querySelector('.phone-menu__block-content.main'),
-        content = document.querySelector('.phone-menu__content.main');
-
-    phoneMenu.classList.remove('active');
-    block.style.height = 0;
+    block.style.height = '0px';
 }
 
+let phoneList = document.querySelectorAll('.phone-menu__list');
+phoneList.forEach(list => {
+    let elementList = list.querySelectorAll('li');
 
-let nextPhoneMenu = document.querySelectorAll('.phone-menu--next');
+    elementList.forEach(element => {
+        let nextList = element.querySelector('.phone-menu__sub');
 
-nextPhoneMenu.forEach(next => {
-    next.onclick = function () {
-        let subName = next.dataset.menu,
-            blockSub = document.querySelector(`.phone-menu__sub.${subName}`);
+        if (nextList) {
+            let button = element.querySelector('a');
+
+            button.onclick = function () {
+                nextList.classList.add('open')           
+            }
+            
+            nextList.querySelector('.phone-menu-content__close').onclick = function () {
+                nextList.classList.remove('open')           
+            }
             
-        blockSub.classList.add('active');
         }
     })
-
-let subPhone = document.querySelectorAll('.phone-menu__sub');
-
-subPhone.forEach(menu => {
-    let close = menu.querySelector('.phone-menu-content__close');
-
-    close.onclick = function () {
-        menu.classList.remove('active');
-    }
 })
+
+function addClosePhoneMenu(classAdd) {
+    document.querySelectorAll(classAdd).forEach(element => {
+        let button = document.createElement('button');
+        button.className = "phone-menu-content__close";
+
+        let referenceElement = element.firstElementChild;
+
+        element.insertBefore(button, referenceElement);
+    })
+    
+}
 // phone menu end
 
 // search
@@ -214,8 +241,202 @@ btnOpenSearchPhone.onclick = function () {
     searchPhone.classList.toggle('active');
 }
 
+// pc
+let inputSearchPc = document.querySelector('.header-menu-search__input'),
+    btnSearchPc = document.querySelector('.header-menu-search__btn');
+
+btnSearchPc.onclick = function () {
+    let value = inputSearchPc.value,
+        newPost = {
+            value: value,
+        };
+
+    postSearch(newPost, 'pc');
+}
+
+// phone
+let inputSearchPhone = document.querySelector('.phone-search__input');
+
+inputSearchPhone.addEventListener('input', function(event) {
+    let value = event.target.value,
+        newPost = {
+            value: value,
+        };
+
+    postSearch(newPost, 'phone');
+});
+
+function postSearch(newPost, device) {
+    let contentPc = document.querySelector('.header-menu-search__found'),
+        contentPhone = document.querySelector('.phone-search__found');
+
+    fetch('http://jsonplaceholder.typicode.com/posts', {
+        method: 'POST',
+        // body: JSON.stringify(newPost),
+        headers: {
+          'Content-type': 'application/json; charset=UTF-8',
+        },
+      })
+        .then((data) => {
+            if (device == 'pc') {
+                contentPc.innerHTML = '';
+
+                contentPc.innerHTML = `<div class="header-menu-search__item">
+                                    <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>
+                                        <p class="header-menu-search-item__art text-2">Артикул:&nbsp;STP1000C</p>
+                                    </div>
+                                </div>`;
+
+                contentPc.classList.add('active');
+            }else{
+                contentPhone.innerHTML = '';
+
+                contentPhone.innerHTML = `<div class="phone-search__item">
+                            <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>
+                                <p class="phone-search-item__art text-2">Артикул:&nbsp;STP1000C</p>
+                            </div>
+                        </div>`;
+
+                contentPhone.classList.add('active');
+            }
+        }).catch(
+            () => {
+              if (device == 'pc') {
+                postError(contentPc);
+              }else{
+                postError(contentPhone);
+              }
+            }
+        )
+}
+
+function postError(divContent) {
+    divContent.innerHTML = ''
+                
+    let p = document.createElement("p");
+    p.textContent = "Произошла ошибка"
+    p.className = "header-menu-search__error text-2";
+
+    divContent.appendChild(p);
+}
+
+
 // search end
 
+// open-modal
+
+let openModals = document.querySelectorAll('.open-modal'),
+    modal = document.querySelector('.modal');
+
+openModals.forEach(openModal => {
+    let modalName = openModal.dataset.modal;
+
+    openModal.onclick = function () {
+        let modalItem = document.querySelector(`.modal__item.${modalName}`);
+
+        modalItem.classList.add('active');
+        modal.classList.add('active');
+    }
+})
+
+modal.onclick = function (event) {
+    if (event.srcElement.classList.contains('modal')) {
+        document.querySelector(`.modal__item.active`).classList.remove('active');
+        modal.classList.remove('active');
+    }
+}
+
+let itemModels = document.querySelectorAll('.modal__item');
+
+itemModels.forEach(item => {
+    let btnClose = item.querySelector('.modal-item__close');
+
+    btnClose.onclick = function () {
+        item.classList.remove('active');
+        modal.classList.remove('active');
+    }
+})
+// open-modal end
+
+// masks
+
+let phoneInputs = document.querySelectorAll('.input__field[type=phone]');
+
+phoneInputs.forEach(phoneInput => {
+    phoneInput.onfocus = function (event) {
+        let value = phoneInput.value;
+
+        if (value.length == 0) {
+            phoneInput.value = '+7 '
+        }
+    }
+
+    phoneInput.addEventListener('input', function(event) {
+        let value = phoneInput.value,
+            data = event.data,
+            length = value.length;
+
+        if (value.charAt(0) == '+' && length == 1) return;
+
+        if (isNaN(data)) {
+            phoneInput.value = value.slice(0, -1);
+        }
+    
+        if (typeof data != 'object') {
+            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 '
+        }
+                
+    });
+})
+
+// masks end
+
+// pc menu
+
+let listMenu = document.querySelectorAll('.header-menu__list > li');
+
+listMenu.forEach(li => {
+    if (li.querySelector('.header-menu-list__next')) {
+        let nextButton = li.querySelector('.header-menu-list__next'),
+            sub = li.querySelector('.header-menu-list__sub');
+
+        nextButton.addEventListener('mouseover', function (event) {
+            let openSubMenu = document.querySelector('.header-menu-list__sub.open');
+
+            if (openSubMenu) {
+                openSubMenu.classList.remove('open');
+            }
+
+            sub.classList.add('open');
+        })
+
+        sub.addEventListener('mouseout', function (event) {
+            if (event.relatedTarget.offsetParent.tagName != 'UL') {
+                sub.classList.remove('open');
+            }
+        })
+    };
+})
+
+// pc menu end
+
 // resize
 window.addEventListener('resize', () => {
     let screenWidth = window.screen.width;