доделал

save
доделал product
2024-10-09 03:46:14 +03:00 · 2024-10-09 03:25:54 +03:00 · 2024-10-09 02:59:06 +03:00 · 2024-10-08 23:17:45 +03:00 · 2024-10-08 22:02:13 +03:00 · 2024-10-08 21:08:03 +03:00
14 changed files with 2538 additions and 1134 deletions
--- a/assets/css/gp-style-core.css
+++ b/assets/css/gp-style-core.css
@@ -142,6 +142,15 @@ button{
  background: none;
  border: none;

+  display: flex;
+  align-items: center;
+
+  transition: opacity .2s ease-out;
+}
+.lang__open:hover{
+  opacity: .8;
+}
+.lang-open p{
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 16px;
@@ -150,26 +159,19 @@ button{
  text-align: start;
  
  color: var(--text-black);
-
-  position: relative;
-
-  transition: opacity .2s ease-out;
 }
-.lang__open::before{
-  content: '';
+.lang-open__arrow{
+  margin-left: 7.25px;

-  position: absolute;
-  top: 19.25px;
-  right: 18.25px;
-
-  width: 10px;
-  height: 6px;
-
-  background-image: url(../img/svg/main/arrow-black.svg);
-  background-repeat: no-repeat;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-.lang__open:hover{
-  opacity: .8;
+.lang-open__black{
+
+}
+.lang-open__white{
+  display: none;
 }
 .lang__content{
  position: absolute;
@@ -273,6 +275,9 @@ button{
  width: 24px;
  aspect-ratio: 1;
 }
+.mini-profile__icon.white{
+  display: none;
+}
 /* mini-profile */


@@ -293,6 +298,12 @@ button{
 }
 .main-menu__item:hover{
  opacity: .8;
+
+  background: #f2f2f2;
+  border-radius: 24px;
+}
+.main-menu__item:active{
+  opacity: 1;
 }
 .main-menu__link{
  display: block;
@@ -435,7 +446,7 @@ button{

 /* breadcrumbs */
 .breadcrumbs{
-  margin: 24px;
+  margin: 96px 24px 24px;

  display: flex;
  align-items: center;
@@ -640,7 +651,7 @@ button{

  padding: 11px 47px 11px 13px;

-  pointer-events:none;
+  /* pointer-events:none; */

  border: 1px solid var(--background-black);
  border-radius: 20px;
@@ -651,6 +662,8 @@ button{
  line-height: 120%;
  color: var(--text-black);

+  cursor: pointer;
+
  position: relative;

  transition: opacity .2s ease-out;
@@ -671,6 +684,8 @@ button{
  background-image: url(../img/svg/main/arrow-black.svg);
  background-repeat: no-repeat;
  background-size: contain;
+
+  pointer-events: none;
 }
 .state__block{
  position: absolute;
@@ -681,6 +696,8 @@ button{

  height: 0;
  overflow: hidden;
+
+  transition: height .2s ease-out;
 }
 .state__content{
  padding: 8px;
@@ -797,29 +814,44 @@ button{
  background: rgba(0, 0, 0, 0.25);

  z-index: 200;
+
+  opacity: 0;
+  transition: opacity .2s ease-out;
+  pointer-events: none;
+}
+.modal.active{
+  opacity: 1;
+  pointer-events: auto;
 }
 .modal__aside{
  position: fixed;
  top: 0;
  right: 0;

-  width: auto;
+  width: 0;
  height: 100%;

  overflow: hidden;
+  transition: width .4s ease-out;
 }
 .modal__item{
  height: 100%;

  padding: 24px;

-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-
  background: var(--background-white);

  position: relative;
+
+  display: none;
+  
+  filter: blur(10px);
+  transition: filter .2s ease-out;
+}
+.modal__item.active{
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 .modal__close{
  position: absolute;
@@ -1021,7 +1053,7 @@ button{
  cursor: pointer;
 }
 .toggle__block-content{
-  /* height: 0; */
+  height: 0;
  overflow: hidden;

  transition: height .2s ease-out;
@@ -1113,3 +1145,14 @@ button{
  color: var(--text-dark);
 }
 /* radio */
+
+
+@keyframes slidein {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
--- a/assets/css/gp-style-desktop.css
+++ b/assets/css/gp-style-desktop.css
@@ -6,6 +6,13 @@
    position: relative;

    background-color: var(--background-white);
+
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+
+    z-index: 200;
 }
 .header::after{
    content: '';
@@ -73,10 +80,14 @@
    width: 182px;
    height: 40px;
 }
-.header__logo-black{
+.header__logo-black,
+.header__logo-white{
    width: 100%;
    height: 100%;
 }
+.header__logo-white{
+  display: none;
+}

 .header__menu-block{
    position: absolute;
@@ -236,6 +247,43 @@

    text-decoration: none;
 }
+.header.white{
+  /* background-color: thistle; */
+}
+.header.white .header__logo-black{
+  display: none;
+}
+.header.white .header__logo-white{
+  display: block;
+}
+.header.white .main-menu__link{
+  color: var(--text-white);
+}
+.header.white .main-menu__button{
+  background: var(--background-white);
+}
+.header.white .lang__open{
+  color: var(--text-white);
+}
+.header.white::after{
+  background: var(--background-white);
+}
+.header.white .lang-open__black{
+  display: none;
+}
+.header.white .lang-open__white{
+  display: block;
+}
+.header.white .mini-profile__icon.white{
+  display: block;
+}
+.header.white .mini-profile__icon.black{
+  display: none;
+}
+.header.white .header__open-menu::before,
+.header.white .header__open-menu::after{
+  background: var(--background-white);
+}
 /* header end */

 /* product */
@@ -326,6 +374,8 @@
    background-color: var(--background-grey);
    border-radius: 24px;

+    overflow: hidden;
+
    position: relative;
  }
  .product__item::before{
@@ -349,6 +399,9 @@
  .product__item:hover::before{
    opacity: 1;
  }
+  .product__item.active::before{
+    opacity: 0;
+  }
  .product-item__block-label{
    position: absolute;
    top: 16px;
@@ -382,9 +435,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);
@@ -428,6 +489,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;
@@ -435,9 +500,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;
  }
@@ -449,7 +542,7 @@
  }
  .product-item__overlay{
    position: absolute;
-    top: 0;
+    top: 100%;
    left: 0;

    width: 100%;
@@ -466,6 +559,11 @@
    background-color: rgba(242, 242, 242, 0.8);

    z-index: 10;
+
+    transition: top .4s ease-out;
+  }
+  .product-item__overlay.active{
+    top: 0;
  }
  .product-item-overlay__header{}
  .product-item-overlay__tags{
@@ -487,20 +585,7 @@

    position: relative;
  }
-  .product-item-overlay__tags li:nth-child(n+2)::before{
-    content: '';
-
-    position: absolute;
-    top: 6px;
-    left: -8px;
-
-    width: 4px;
-    aspect-ratio: 1;
-
-    background-color: var(--text-3);
-    border-radius: 50%;
-  }
-  .product-item-overlay__tags li:nth-child(n+2)::after{
+  .product-item-overlay__tags li:nth-child(n+1)::after{
    content: '';

    position: absolute;
@@ -674,6 +759,7 @@
  margin: 48px 24px 24px 24px;

  display: flex;
+  align-items: start;
  flex-wrap: wrap;
 }
 .detail__images{
@@ -806,6 +892,7 @@

  display: flex;
  align-items: center;
+  flex-wrap: wrap;
 }
 .detail-block-form__item--radio{
  margin: 16px -8px -8px -8px;
@@ -855,12 +942,57 @@
  margin-bottom: 48px;
 }
 .detail__catalot{
+  margin-top: 64px;
+
+  width: 100%;
+
+  overflow: hidden;
+}
+.detail-catalot__header{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.detail-catalot__control{
+  display: flex;
+  align-items: center;
+}
+.detail-catalot-control__button{
+  margin-left: 24px;
+
+  width: 48px;
+  aspect-ratio: 1;
+
+  border-radius: 50%;
+  border: 1px solid var(--background-black);
+  background: none;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.detail-catalot__title{
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 100%;
+  text-transform: uppercase;
+  text-align: start;
+  color: var(--text-0);
+}
+.detail-catalot__content{
  margin: 12px -12px -12px -12px;

  width: 100%;

  display: flex;
 }
+.detail__catalot .product__item{
+  width: calc(100% - 24px);
+}
+.detail__images-phone{
+  display: none;
+}
 .toggle__table{
  margin-top: 32px;

@@ -941,8 +1073,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{
@@ -954,8 +1210,17 @@
  
    width: calc(33.3% - 24px);
 }
+
+.gallery__wrapper{
+  max-width: 1280px;
+}
 }

+@media only screen and (max-width: 1365px) {
+  .gallery__wrapper{
+    max-width: 100%;
+  }
+}



--- a/assets/css/gp-style-mobile.css
+++ b/assets/css/gp-style-mobile.css
@@ -10,13 +10,16 @@
 .modal__basket{
    width: 100%;
 }
+.modal__filter{
+    width: 100%;
+}
 .modal__button .to-know{
    display: flex;

    background: none;
 }
 .modal__basket .modal__header {
-    height: calc(100% - 158px);
+    height: calc(100% - 92px);
    margin-bottom: -36px;
 }
 .modal-basket-item__block-image{
@@ -66,6 +69,16 @@
    margin-top: 20px;
 }
 /* footer */
+
+/* detail */
+.toggle__table--two .toggle-table__block{
+    width: 100%;
+}
+.toggle__table--two .toggle-table__block:nth-child(even){
+    margin-top: 32px;
+    margin-left: 0;
+}
+/* detail */
 }

@media only screen and (max-width: 576px) {
@@ -87,8 +100,11 @@
 .modal__aside{
    left: 0;
 }
-.modal__filter{
-    width: 100%;
-}
 /* modal */
+
+/* detail */
+.detail-block-form__item,
+.detail-block-form__submit{
+    min-width: 100%;
+}
 }
--- 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) {
@@ -57,4 +59,103 @@
    width: calc(50% - 24px);
 }
 /* product */
+
+
+/* detail */
+.detail{
+    flex-direction: column;
+}
+.detail__images{
+    display: none;
+}
+.detail__content{
+    width: 100%;
+}
+.detail__content{
+    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 */
 }
--- a/assets/img/svg/main/arrow-left.svg
+++ b/assets/img/svg/main/arrow-left.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 16.4854H28" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 16.4854L14.4853 24.9706" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 16.4854L14.4853 8.00007" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/assets/img/svg/main/arrow-right.svg
+++ b/assets/img/svg/main/arrow-right.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26 16.4854H4" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26 16.4854L17.5147 24.9706" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26 16.4854L17.5147 8.00007" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/assets/img/svg/mini-profile/basket-w.svg
+++ b/assets/img/svg/mini-profile/basket-w.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9995 3.53846C11.3616 3.53846 10.7499 3.78159 10.2988 4.21437C9.84778 4.64715 9.59439 5.23412 9.59439 5.84615V7.12821H14.4045V5.84615C14.4045 5.23412 14.1511 4.64715 13.7001 4.21437C13.2491 3.78159 12.6373 3.53846 11.9995 3.53846ZM16.0079 7.12821V5.84615C16.0079 4.82609 15.5856 3.84781 14.8339 3.12651C14.0821 2.40522 13.0626 2 11.9995 2C10.9364 2 9.91679 2.40522 9.16506 3.12651C8.41333 3.84781 7.99102 4.82609 7.99102 5.84615V7.12821H5.93986M7.99102 8.66667H5.93976C5.74711 8.66665 5.55664 8.7066 5.38159 8.78378C5.20654 8.86097 5.05095 8.97356 4.9255 9.11385C4.80004 9.25413 4.70769 9.41879 4.65477 9.59653C4.60186 9.77423 4.58961 9.9608 4.61887 10.1435C4.61886 10.1434 4.61888 10.1435 4.61887 10.1435L5.96036 18.5045C6.04768 19.0493 6.33539 19.5463 6.77139 19.9052C7.20738 20.2642 7.76287 20.4615 8.33735 20.4615C8.33734 20.4615 8.33736 20.4615 8.33735 20.4615H15.6616C16.2362 20.4617 16.7921 20.2644 17.2283 19.9055C17.6645 19.5465 17.9523 19.0496 18.0396 18.5046L19.3811 10.1436C19.3811 10.1436 19.3811 10.1435 19.3811 10.1436C19.4104 9.96093 19.3981 9.77423 19.3452 9.59653C19.2923 9.41879 19.1999 9.25413 19.0745 9.11385C18.949 8.97356 18.7935 8.86097 18.6184 8.78378C18.4433 8.7066 18.253 8.66665 18.0603 8.66667H16.0079V10.9744C16.0079 11.3992 15.649 11.7436 15.2062 11.7436C14.7635 11.7436 14.4045 11.3992 14.4045 10.9744V8.66667H9.59439V10.9744C9.59439 11.3992 9.23547 11.7436 8.79271 11.7436C8.34995 11.7436 7.99102 11.3992 7.99102 10.9744V8.66667ZM16.0079 7.12821H18.0601C18.0601 7.12821 18.0602 7.12821 18.0601 7.12821C18.4839 7.12817 18.9028 7.21606 19.2879 7.38586C19.673 7.55567 20.0153 7.80338 20.2913 8.11201C20.5673 8.42063 20.7705 8.78288 20.8869 9.1739C21.0033 9.56493 21.0303 9.97549 20.9658 10.3774L19.6244 18.7385C19.6243 18.7385 19.6244 18.7384 19.6244 18.7385C19.4788 19.6467 18.9991 20.475 18.2722 21.0732C17.5453 21.6715 16.6192 22.0002 15.6616 22C15.6615 22 15.6616 22 15.6616 22H8.33735C7.37986 22 6.45398 21.6711 5.72732 21.0728C5.00069 20.4746 4.52121 19.6466 4.37565 18.7386C4.37565 18.7385 4.37566 18.7386 4.37565 18.7386L3.03416 10.3776C2.96974 9.97561 2.99665 9.56493 3.11308 9.1739C3.22951 8.78288 3.43268 8.42063 3.70868 8.11201C3.98468 7.80338 4.32697 7.55567 4.71208 7.38586C5.09717 7.21606 5.51606 7.12817 5.93986 7.12821" fill="white"/>
+</svg>
--- a/assets/img/svg/mini-profile/profile-w.svg
+++ b/assets/img/svg/mini-profile/profile-w.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.64124 3.64124C9.53204 2.75044 10.7402 2.25 12 2.25C13.2598 2.25 14.468 2.75044 15.3588 3.64124C16.2496 4.53204 16.75 5.74022 16.75 7C16.75 8.25978 16.2496 9.46796 15.3588 10.3588C14.468 11.2496 13.2598 11.75 12 11.75C10.7402 11.75 9.53204 11.2496 8.64124 10.3588C7.75044 9.46796 7.25 8.25978 7.25 7C7.25 5.74022 7.75044 4.53204 8.64124 3.64124ZM12 3.75C11.138 3.75 10.3114 4.09241 9.7019 4.7019C9.09241 5.3114 8.75 6.13805 8.75 7C8.75 7.86195 9.09241 8.6886 9.7019 9.2981C10.3114 9.90759 11.138 10.25 12 10.25C12.862 10.25 13.6886 9.90759 14.2981 9.2981C14.9076 8.6886 15.25 7.86195 15.25 7C15.25 6.13805 14.9076 5.3114 14.2981 4.7019C13.6886 4.09241 12.862 3.75 12 3.75Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 15.75C9.13805 15.75 8.3114 16.0924 7.7019 16.7019C7.09241 17.3114 6.75 18.138 6.75 19V21C6.75 21.4142 6.41421 21.75 6 21.75C5.58579 21.75 5.25 21.4142 5.25 21V19C5.25 17.7402 5.75044 16.532 6.64124 15.6412C7.53204 14.7504 8.74022 14.25 10 14.25H14C15.2598 14.25 16.468 14.7504 17.3588 15.6412C18.2496 16.532 18.75 17.7402 18.75 19V21C18.75 21.4142 18.4142 21.75 18 21.75C17.5858 21.75 17.25 21.4142 17.25 21V19C17.25 18.138 16.9076 17.3114 16.2981 16.7019C15.6886 16.0924 14.862 15.75 14 15.75H10Z" fill="white"/>
+</svg>
--- a/assets/js/gp-main.js
+++ b/assets/js/gp-main.js
@@ -1,6 +1,251 @@
 'use strict';

-function toggleOpenX(button, content, blockheight) {
+// header
+toggleOpenX('.lang', '.lang__open', '.lang__list', '.lang__content', false);
+singleToggleOpenX('#pc-menu','.header__menu-block','.header__pc-menu');
+singleToggleOpenX('#phone-menu','.header__menu-block','.header__phone-menu');
+// header 
+
+// media
+modalOpen('.button--filter', '.modal__filter');
+modalOpen('.basket-open', '.modal__basket');
+modalClose('.modal__close');
+// media
+
+// toggle
+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');
+
+products.forEach(productItem => {
+    let button = productItem.querySelector('.open-overlay'),
+        overlay = productItem.querySelector('.product-item__overlay');
+
+    
+    if (button) {
+        button.onclick = function (e) {
+            document.querySelectorAll('.product__item').forEach(e => {
+                if (e.classList.contains('active')) {
+                    e.classList.remove('active');
+                }
+            });
+            document.querySelectorAll('.product-item__overlay').forEach(e => {
+                if (e.classList.contains('active')) {
+                    e.classList.remove('active');
+                }
+            });
+
+            productItem.classList.toggle('active'); 
+            overlay.classList.toggle('active');            
+        }
+    }
+    
+})
+// overlay
+
+
+// select
+toggleOpenX('.select', '.select__state' , '.state__content', '.state__block', true);
+
+let selects = document.querySelectorAll('.select');
+
+selects.forEach(e => {
+    let state = e.querySelector('.select__state'),
+        buttons = e.querySelectorAll('.state__button');
+        
+    buttons.forEach(e => {
+        let button = e;
+
+        e.onclick = function (event) {
+            event.preventDefault();
+
+            buttons.forEach(element => {
+                if (element.classList.contains('active')) {
+                    element.classList.remove('active');
+                }
+            })          
+            
+            let text = e.textContent.trim();
+            state.value = text;
+
+            button.classList.add('active');
+        }        
+    })
+})
+// select
+
+// counter
+let counters = document.querySelectorAll('.counter');
+
+counters.forEach(e => {
+    let minus = e.querySelector('.minus'),
+        plus  = e.querySelector('.plus'),
+        input = e.querySelector('.counter__input');
+
+        minus.onclick = function (e) {
+            e.preventDefault();
+            
+            let number = input.value;
+            
+            if (number >= 2){
+                input.value = Number(number) - 1;
+            }
+        }
+
+        plus.onclick = function (e) {
+            e.preventDefault();
+            
+            let number = input.value;
+            
+            if (number <= 99) {
+                input.value = Number(number) + 1;
+            }
+        }
+})
+// counter
+
+// checkbox 
+let checkbox = document.querySelectorAll('.checkbox');
+
+checkbox.forEach(e => {
+    e.onclick = function (event) {
+        let input = e.querySelector('.checkbox__input');
+
+        if (!e.classList.contains('active')) {
+            input.checked = 1;
+        }else{
+            input.checked = 0;
+        }
+        e.classList.toggle('active');
+    }
+})
+// checkbox 
+
+
+// function
+function modalOpen(buttonElement, contentElement){
+    let modal = document.querySelector('.modal'),
+        aside = document.querySelector('.modal__aside'),
+        elements = document.querySelectorAll(buttonElement),
+        device = window.screen.width;
+
+    elements.forEach(e => {
+        let thisContentElement = document.querySelector(contentElement);
+
+        e.onclick = function () {
+            modal.classList.add('active');
+            thisContentElement.classList.add('active');
+            
+            let width = thisContentElement.clientWidth;
+
+            setTimeout(() => {
+                if (device <= 720) {
+                    aside.style.width = `${device}px`;
+                    thisContentElement.style.opacity = 1;
+                    thisContentElement.style.filter = 'blur(0px)';
+                }else{
+                    aside.style.width = `${width}px`;
+                    thisContentElement.style.opacity = 1;
+                    thisContentElement.style.filter = 'blur(0px)';
+                }
+            }, 10);
+        }
+    })
+}
+
+function modalClose(buttonElement) {
+    let modal = document.querySelector('.modal'),
+        aside = document.querySelector('.modal__aside'),
+        asideItems = document.querySelectorAll('.modal__item'),
+        elements = document.querySelectorAll(buttonElement);
+
+    elements.forEach(e => {
+        e.onclick = function () {            
+            aside.style.width = '0px';
+            
+            asideItems.forEach(e => {
+                if (e.classList.contains('active')) {
+                    e.style.filter  = 'blur(10px)';
+                }
+            });
+
+            setTimeout(() => {
+                asideItems.forEach(e => {
+                    if (e.classList.contains('active')) {
+                        e.classList.remove('active');
+                    }
+                });
+
+                modal.classList.remove('active');
+            }, 300);
+        }
+    })
+}
+
+function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) {
+    let elements = document.querySelectorAll(mainElement);
+
+    elements.forEach(e => {
+        let thisMainElement = e,
+            thisButtonElement = e.querySelector(buttonElement),
+            thisHeightElement = e.querySelector(heightElement),
+            thisContentElement = e.querySelector(contentElement);        
+
+        thisButtonElement.onclick = function (e) {
+            let height = thisHeightElement.clientHeight;
+
+            if (close == true && !thisMainElement.classList.contains('active')) {
+                elements.forEach(e => {
+                    if (e.classList.contains('active')) {
+                        e.classList.remove('active');
+                        e.querySelector(contentElement).style.height = null
+                    }                    
+                })
+            }
+
+            if (!thisMainElement.classList.contains('active')) {
+                thisContentElement.style.height = `${height}px`;
+                thisMainElement.classList.add('active');
+            }else{
+                thisContentElement.style.height = null;
+                thisMainElement.classList.remove('active');
+            }
+        }
+        
+    });
+}
+
+function singleToggleOpenX(button, content, blockheight) {
    let thisButton = document.querySelector(button), 
        thisContent = document.querySelector(content),
        thisBlockheight = document.querySelector(blockheight);
@@ -18,12 +263,60 @@ function toggleOpenX(button, content, blockheight) {
    }
 }

-// header start
-toggleOpenX('#pc-menu','.header__menu-block','.header__pc-menu');
-toggleOpenX('#phone-menu','.header__menu-block','.header__phone-menu');
+function createGalleryPhone(swiper, wrapper, slide, width) {
+    if (window.screen.width <= width) {
+        let thisSwiper = document.querySelector(swiper),
+            thisWrapper = document.querySelector(wrapper),
+            thisSlides = document.querySelectorAll(slide);

-// header end
        
-// lang start
-toggleOpenX('.lang__open','.lang__content','.lang__list');
-// lang end
+        
+        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');
+});
+// 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
--- a/assets/js/gp-product.js
+++ b/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
--- a/catalog.html
+++ b/catalog.html
--- a/index.html
+++ b/index.html
--- a/modal-filter.html
+++ b/modal-filter.html
@@ -500,7 +500,7 @@
                    <div class="modal__header">
                        <p class="modal__title">Фильтры</p>
                        <div class="modal__content">
-                            <div class="toggle active">
+                            <div class="toggle">
                                <p class="toggle__title">
                                    ДЛЯ КОГО
                                </p>
@@ -525,7 +525,7 @@
                                    </div>
                                </div>
                            </div>
-                            <div class="toggle active">
+                            <div class="toggle">
                                <p class="toggle__title">
                                    ТИП ПРОДУКЦИИ
                                </p>
@@ -557,7 +557,7 @@
                                    </div>
                                </div>
                            </div>
-                            <div class="toggle active">
+                            <div class="toggle">
                                <p class="toggle__title">
                                    ВКУС
                                </p>
--- a/product.html
+++ b/product.html
Author	SHA1	Message	Date
Kirill Pet	9703ff5569	доделал	2024-10-09 03:46:14 +03:00
Kirill Pet	36ea891f36	save	2024-10-09 03:25:54 +03:00
Kirill Pet	44fee90f1a	доделал product	2024-10-09 02:59:06 +03:00
Kirill Pet	db58f5c463	overlay js + css правки	2024-10-08 23:17:45 +03:00
Kirill Pet	7beff60d00	selects js	2024-10-08 22:02:13 +03:00
Kirill Pet	284a32c6c9	сделал анимацию aside	2024-10-08 21:08:03 +03:00
Kirill Pet	46df883cfd	js modal	2024-10-08 20:11:11 +03:00
Kirill Pet	9c3d0d0be9	js checkbox	2024-10-08 16:08:18 +03:00
Kirill Pet	6a2375f26b	toggle js	2024-10-08 15:37:31 +03:00