diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css
index 7ce062a..1ffaa3c 100644
--- a/assets/css/gp-style-core.css
+++ b/assets/css/gp-style-core.css
@@ -293,6 +293,12 @@ button{
}
.main-menu__item:hover{
opacity: .8;
+
+ background: #f2f2f2;
+ border-radius: 24px;
+}
+.main-menu__item:active{
+ opacity: 1;
}
.main-menu__link{
display: block;
diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css
index 4366900..2baf10a 100644
--- a/assets/css/gp-style-desktop.css
+++ b/assets/css/gp-style-desktop.css
@@ -387,9 +387,17 @@
.product-item-label__tag--new{
background: var(--gradient-blue);
}
+ .product-item-label__tag--new-green{
+ background: #d9ffcc;
+ color: #4e7623;
+ }
.product-item-label__tag--sale{
background: var(--gradient-red);
}
+ .product-item-label__tag--sale-red{
+ color: #fa0505;
+ background: #ffe5e5;
+ }
.product-item-label__tag--black{
background: var(--background-black);
color: var(--text-white);
@@ -433,6 +441,10 @@
.product-item__price{
margin-top: 8px;
+ display: flex;
+ align-items: center;
+ }
+ .product-item__price p{
font-family: var(--font-family);
font-weight: 700;
font-size: 20px;
@@ -440,9 +452,37 @@
text-transform: uppercase;
color: var(--text-black);
}
- .product-item__price::after{
+ .product-item__price p::after{
content: '₽';
}
+ .product-item__price span{
+ margin-left: 9px;
+ font-family: var(--font-family);
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 133%;
+ color: var(--text-red);
+ }
+ .product-item__price del{
+ margin-left: 24px;
+
+ font-family: var(--font-family);
+ font-weight: 700;
+ font-size: 18px;
+ line-height: 133%;
+ text-transform: uppercase;
+ text-decoration: line-through;
+ color: var(--text-6);
+ }
+ .product-item__price del::after{
+ content: '₽';
+ }
+ .product-item__price span::before{
+ content: '-';
+ }
+ .product-item__price span::after{
+ content: '%';
+ }
.product-item__bye{
margin-top: 8px;
}
@@ -804,6 +844,7 @@
display: flex;
align-items: center;
+ flex-wrap: wrap;
}
.detail-block-form__item--radio{
margin: 16px -8px -8px -8px;
@@ -854,6 +895,10 @@
}
.detail__catalot{
margin-top: 64px;
+
+ width: 100%;
+
+ overflow: hidden;
}
.detail-catalot__header{
display: flex;
@@ -884,7 +929,7 @@
font-size: 24px;
line-height: 100%;
text-transform: uppercase;
- text-align: center;
+ text-align: start;
color: var(--text-0);
}
.detail-catalot__content{
@@ -894,6 +939,12 @@
display: flex;
}
+.detail__catalot .product__item{
+ width: calc(100% - 24px);
+}
+.detail__images-phone{
+ display: none;
+}
.toggle__table{
margin-top: 32px;
@@ -974,8 +1025,132 @@
opacity: .6;
}
+.radio-button{
+}
+.radio-button__input{
+ display: none;
+}
/* detail */
+/* gallery */
+.gallery{
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+
+ padding: 24px;
+
+ display: flex;
+ align-items: center;
+
+ background: var(--background-white);
+
+ pointer-events: none;
+ opacity: 0;
+ transition: opacity .2s ease-out;
+
+ z-index: 300;
+}
+.gallery.active{
+ opacity: 1;
+ pointer-events: auto;
+}
+.gallery__close{
+ position: absolute;
+ top: 24px;
+ right: 24px;
+
+ z-index: 10;
+}
+.gallery__pagination{
+ margin: -12px;
+}
+.gallery-pagination__item{
+ margin: 12px;
+
+ width: 134px;
+ height: 136px;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ border: none;
+ border-radius: 16px;
+ background: var(--background-grey);
+}
+.gallery-pagination__item img{
+ width: 90%;
+ max-height: 90%;
+
+ object-fit: contain;
+}
+.gallery__slider{
+ margin-left: 48px;
+
+ padding: 100px;
+}
+.gallery__slider{
+ width: 100%;
+}
+.gallery__slider .swiper-pagination{
+ display: none;
+}
+.gallery__slider .swiper-button-next::after,
+.gallery__slider .swiper-button-prev::after{
+ display: none;
+}
+.gallery-button{
+ width: 48px;
+ height: 48px;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ border: 1px solid var(--background-black);
+ border-radius: 20px;
+
+ background: none;
+}
+.gallery__slider .swiper-slide{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.gallery__block{
+ width: 600px;
+ height: 774px;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ background: var(--background-grey);
+ border-radius: 24px;
+}
+.gallery__block img{
+ width: 90%;
+ max-height: 90%;
+
+ object-fit: contain;
+}
+.gallery__wrapper{
+ margin: 0 auto;
+ max-width: 1600px;
+
+ display: flex;
+ align-items: center;
+}
+/* .swiper {
+ width: 600px;
+ height: 300px;
+} */
+
+/* gallery */
+
@media only screen and (max-width: 1600px) {
.wrapper{
@@ -987,8 +1162,17 @@
width: calc(33.3% - 24px);
}
+
+.gallery__wrapper{
+ max-width: 1280px;
+}
}
+@media only screen and (max-width: 1365px) {
+ .gallery__wrapper{
+ max-width: 100%;
+ }
+}
diff --git a/assets/css/gp-style-mobile.css b/assets/css/gp-style-mobile.css
index 1fd806b..65649c7 100644
--- a/assets/css/gp-style-mobile.css
+++ b/assets/css/gp-style-mobile.css
@@ -10,6 +10,9 @@
.modal__basket{
width: 100%;
}
+.modal__filter{
+ width: 100%;
+}
.modal__button .to-know{
display: flex;
@@ -97,8 +100,11 @@
.modal__aside{
left: 0;
}
-.modal__filter{
- width: 100%;
-}
/* modal */
+
+/* detail */
+.detail-block-form__item,
+.detail-block-form__submit{
+ min-width: 100%;
+}
}
\ No newline at end of file
diff --git a/assets/css/gp-style-tablet.css b/assets/css/gp-style-tablet.css
index 8396d2f..d857742 100644
--- a/assets/css/gp-style-tablet.css
+++ b/assets/css/gp-style-tablet.css
@@ -49,6 +49,8 @@
display: none;
}
/* footer */
+
+
}
@media only screen and (max-width: 980px) {
@@ -63,14 +65,97 @@
.detail{
flex-direction: column;
}
-
-.detail__images,
+.detail__images{
+ display: none;
+}
.detail__content{
width: 100%;
}
.detail__content{
- margin-top: 48px;
margin-left: 0;
}
+
+.detail__images-phone{
+ display: block;
+
+ margin-top: 48px;
+ margin-bottom: 48px;
+
+ position: relative;
+
+ overflow: hidden;
+}
+.detail__images-phone .swiper-slide{
+ display: flex;
+ justify-content: center;
+}
+.detail-images-phone__image-block{
+ width: 100%;
+ aspect-ratio: 1;
+ max-width: 500px;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ background: var(--background-grey);
+ border-radius: 16px;
+}
+
+.detail__images-phone .swiper-pagination-bullet{
+ width: 8px;
+ height: 8px;
+
+ border-radius: 50%;
+
+ border: 1px solid #666;
+ background-color: #666;
+
+ opacity: 1;
+}
+.detail__images-phone .swiper-pagination-bullet.swiper-pagination-bullet-active{
+ background-color: var(--background-white);
+}
+
+.detail__images-phone .swiper-pagination{
+ margin-bottom: 19px;
+}
+.detail__title{
+ font-size: 26px;
+ line-height: 123%;
+}
+.gallery__slider .swiper-pagination {
+ display: block;
+}
+.gallery__pagination{
+ display: none;
+}
+
+.gallery__slider .swiper-pagination-bullet{
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ border: 1px solid #666;
+ background-color: #666;
+ opacity: 1;
+}
+.gallery__wrapper .gallery-button{
+ display: none;
+}
+
+.gallery__slider .swiper-pagination-bullet.swiper-pagination-bullet-active{
+ background-color: var(--background-white);
+}
+
+.gallery__slider{
+ margin-left:0;
+ padding: 0px 0px 50px 0px;
+ /* padding: 40px; */
+}
+.gallery__block {
+ width: 100%;
+ aspect-ratio: 1;
+ height: auto;
+}
/* detail */
}
\ No newline at end of file
diff --git a/assets/js/gp-main.js b/assets/js/gp-main.js
index dfd3fcf..698e72b 100644
--- a/assets/js/gp-main.js
+++ b/assets/js/gp-main.js
@@ -16,6 +16,34 @@ modalClose('.modal__close');
toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true);
// toggle
+// radio-button
+let radioButtons = document.querySelectorAll('.radio-button');
+
+radioButtons.forEach(radioBlock => {
+ let buttons = radioBlock.querySelectorAll('.button');
+
+ buttons.forEach(button => {
+ let input = radioBlock.querySelector('.radio-button__input');
+
+ button.onclick = function (e) {
+ e.preventDefault();
+
+ buttons.forEach(thisButton => {
+ if (thisButton.classList.contains('active')) {
+ thisButton.classList.remove('active')
+ }
+ })
+
+ let text = button.textContent.trim();
+
+ button.classList.toggle('active');
+
+ input.value = text;
+ }
+ })
+})
+// radio-button
+
// overlay
let products = document.querySelectorAll('.product__item');
@@ -123,6 +151,120 @@ 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'),
aside = document.querySelector('.modal__aside'),
@@ -139,7 +281,7 @@ function modalOpen(buttonElement, contentElement){
let width = thisContentElement.clientWidth;
setTimeout(() => {
- if (device <= 576) {
+ if (device <= 720) {
aside.style.width = `${device}px`;
thisContentElement.style.opacity = 1;
thisContentElement.style.filter = 'blur(0px)';
@@ -231,4 +373,54 @@ function singleToggleOpenX(button, content, blockheight) {
thisContent.classList .remove('open');
}
}
-}
\ No newline at end of file
+}
+
+function createGalleryPhone(swiper, wrapper, slide, width) {
+ if (window.screen.width <= width) {
+ let thisSwiper = document.querySelector(swiper),
+ thisWrapper = document.querySelector(wrapper),
+ thisSlides = document.querySelectorAll(slide);
+
+
+
+ thisSwiper.classList.add('swiper');
+ thisWrapper.classList.add('swiper-wrapper');
+ thisSlides.forEach(e => {
+ e.classList.add('swiper-slide');
+ })
+
+ const t = new Swiper('.detail__images', {
+ spaceBetween: 100,
+
+ pagination: {
+ el: '.swiper-pagination',
+ },
+
+ navigation: {
+ nextEl: '.swiper-button-next',
+ prevEl: '.swiper-button-prev',
+ },
+
+ scrollbar: {
+ el: '.swiper-scrollbar',
+ },
+ });
+
+ }
+}
+
+
+// resize
+window.addEventListener('resize', (e) => {
+ // media
+ 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
\ No newline at end of file
diff --git a/catalog.html b/catalog.html
index 414220e..98cab38 100644
--- a/catalog.html
+++ b/catalog.html
@@ -1,582 +1,592 @@
-
-
-
-
- SEO title
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
- 
+