доделал

assets/js/gp-main.js

@@ -152,118 +152,6 @@ checkbox.forEach(e => {
 // checkbox 
 
 
-
-
-// slider gallery modal
-const gallery = new Swiper('.gallery__slider', {
-    spaceBetween: 100,
-  
-    pagination: {
-      el: '.swiper-pagination',
-    },
-  
-    navigation: {
-      nextEl: '.swiper-button-next',
-      prevEl: '.swiper-button-prev',
-    },
-  
-    scrollbar: {
-      el: '.swiper-scrollbar',
-    },
-});
-
-let paginationButtons = document.querySelectorAll('.gallery-pagination__item');
-
-paginationButtons.forEach(button => {
-    let index = button.dataset.countImg;
-
-    button.onclick = function () {
-        gallery.slideTo(index);
-    }
-})
-
-// open gallery
-let detailImage= document.querySelectorAll('.detail__image');
-detailImage.forEach(button => {
-    let index = button.dataset.countImg;
-
-    button.onclick = function () {
-        gallery.slideTo(index);
-        
-        document.querySelector('.gallery').classList.add('active');
-    }
-})
-
-// close gallery
-
-document.querySelector('.gallery__close').onclick = function () {
-    document.querySelector('.gallery').classList.remove('active');
-}
-// slider gallery modal
-
-// slider gallery main phone
-
-// createGalleryPhone('.detail__images', '.detail-images__wrapper', '.detail__image', 980);
-
-const detailPhone = new Swiper('.detail__images-phone', {
-    spaceBetween: 100,
-  
-    pagination: {
-      el: '.swiper-pagination',
-    },
-  
-    navigation: {
-      nextEl: '.swiper-button-next',
-      prevEl: '.swiper-button-prev',
-    },
-  
-    scrollbar: {
-      el: '.swiper-scrollbar',
-    },
-});
-
-let detailImagesPhones = document.querySelectorAll('.detail-images-phone__image-block');
-
-detailImagesPhones.forEach(button => {
-    button.onclick = function (e) {
-        let index = button.dataset.countImg;
-
-        gallery.slideTo(index);
-        
-        document.querySelector('.gallery').classList.add('active');
-    }
-})
-
-// slider gallery main phone
-
-// detail catalog
-const detailCatalot = new Swiper('.detail__catalot', {
-    // Navigation arrows
-    navigation: {
-      nextEl: '.detail-catalot-control__button.next',
-      prevEl: '.detail-catalot-control__button.prev',
-    },
-    breakpoints: {
-        1600: {
-            slidesPerView: 4,
-        },
-        1200: {
-            slidesPerView: 3,
-        },
-        780: {
-            slidesPerView: 2.2,
-        },
-        100: {
-            slidesPerView: 1.3,
-            spaceBetween: 20
-        },
-    }
-
-
-});
-// detail catalog
-
-
 // function
 function modalOpen(buttonElement, contentElement){
     let modal = document.querySelector('.modal'),
@@ -416,11 +304,19 @@ window.addEventListener('resize', (e) => {
     modalOpen('.button--filter', '.modal__filter');
     modalOpen('.basket-open', '.modal__basket');
     modalClose('.modal__close');
-    // media
-    // gallery
-    // if (!document.querySelector('.detail__images').classList.contains('swiper')) {
-    //     createGalleryPhone('.detail__images', '.detail-images__wrapper', '.detail__image', 980);
-    // }
-    // gallery
 });
-// resize
+// resize
+
+// scroll
+window.addEventListener("scroll", function (e) {
+    let header = document.querySelector('.header');
+    let scroll = window.scrollY;
+    
+    if (scroll >= 75) {
+        header.classList.remove('white')
+    }else{
+        header.classList.add('white')
+    }
+    
+});
+// scroll

assets/js/gp-product.js

@@ -0,0 +1,110 @@
+'use strict';
+
+// slider gallery modal
+const gallery = new Swiper('.gallery__slider', {
+    spaceBetween: 100,
+  
+    pagination: {
+      el: '.swiper-pagination',
+    },
+  
+    navigation: {
+      nextEl: '.swiper-button-next',
+      prevEl: '.swiper-button-prev',
+    },
+  
+    scrollbar: {
+      el: '.swiper-scrollbar',
+    },
+});
+
+let paginationButtons = document.querySelectorAll('.gallery-pagination__item');
+
+paginationButtons.forEach(button => {
+    let index = button.dataset.countImg;
+
+    button.onclick = function () {
+        gallery.slideTo(index);
+    }
+})
+
+// open gallery
+let detailImage= document.querySelectorAll('.detail__image');
+detailImage.forEach(button => {
+    let index = button.dataset.countImg;
+
+    button.onclick = function () {
+        gallery.slideTo(index);
+        
+        document.querySelector('.gallery').classList.add('active');
+    }
+})
+
+// close gallery
+
+document.querySelector('.gallery__close').onclick = function () {
+    document.querySelector('.gallery').classList.remove('active');
+}
+// slider gallery modal
+
+// slider gallery main phone
+
+// createGalleryPhone('.detail__images', '.detail-images__wrapper', '.detail__image', 980);
+
+const detailPhone = new Swiper('.detail__images-phone', {
+    spaceBetween: 100,
+  
+    pagination: {
+      el: '.swiper-pagination',
+    },
+  
+    navigation: {
+      nextEl: '.swiper-button-next',
+      prevEl: '.swiper-button-prev',
+    },
+  
+    scrollbar: {
+      el: '.swiper-scrollbar',
+    },
+});
+
+let detailImagesPhones = document.querySelectorAll('.detail-images-phone__image-block');
+
+detailImagesPhones.forEach(button => {
+    button.onclick = function (e) {
+        let index = button.dataset.countImg;
+
+        gallery.slideTo(index);
+        
+        document.querySelector('.gallery').classList.add('active');
+    }
+})
+
+// slider gallery main phone
+
+// detail catalog
+const detailCatalot = new Swiper('.detail__catalot', {
+    // Navigation arrows
+    navigation: {
+      nextEl: '.detail-catalot-control__button.next',
+      prevEl: '.detail-catalot-control__button.prev',
+    },
+    breakpoints: {
+        1600: {
+            slidesPerView: 4,
+        },
+        1200: {
+            slidesPerView: 3,
+        },
+        780: {
+            slidesPerView: 2.2,
+        },
+        100: {
+            slidesPerView: 1.3,
+            spaceBetween: 20
+        },
+    }
+
+
+});
+// detail catalog