fix inputTabs

сделал правки для subscription-order
удалил toggle на стрицых подписки
2025-05-05 14:26:59 +03:00 · 2025-05-03 20:53:17 +03:00 · 2025-05-03 20:24:53 +03:00 · 2025-05-02 16:56:48 +03:00 · 2025-05-02 16:41:59 +03:00 · 2025-05-02 16:32:34 +03:00
44 changed files with 9329 additions and 1885 deletions
--- a/assets/css/gp-style-core.css
+++ b/assets/css/gp-style-core.css
--- a/assets/css/gp-style-desktop.css
+++ b/assets/css/gp-style-desktop.css
@@ -14,14 +14,16 @@

    z-index: 200;
 }
-.header::after{
+.header__content::after{
    content: '';

    position: absolute;
-    left: 24px;
+    left: auto;
+    right: auto;
    bottom: 0;
    
    width: calc(100% - 48px);
+    max-width: 1552px;
    height: 1px;

    background:  var(--text-3);
@@ -182,6 +184,10 @@
    display: none;

    padding: 24px 16px;
+
+    height: calc(100vh - 56px);
+
+    overflow-x: auto;
 }
 .header-phone-menu__item{
    padding: 16px 0;
@@ -242,13 +248,12 @@
    font-weight: 500;
    font-size: 16px;
    line-height: 125%;
-    color: #121212;
    color: var(--text-black);

    text-decoration: none;
 }
 .header.white{
-  /* background-color: thistle; */
+  background: none;
 }
 .header.white .header__logo-black{
  display: none;
@@ -265,7 +270,7 @@
 .header.white .lang__open{
  color: var(--text-white);
 }
-.header.white::after{
+.header.white .header__content::after{
  background: var(--background-white);
 }
 .header.white .lang-open__black{
@@ -284,6 +289,13 @@
 .header.white .header__open-menu::after{
  background: var(--background-white);
 }
+.header__phone-menu::-webkit-scrollbar {
+  width: 0px;
+}
+
+main{
+  padding-top: 72px;
+}
 /* header end */

 /* product */
@@ -310,6 +322,7 @@
    border-radius: 16px;
  
    background: var(--gradient-blue);
+    border: none;
  }
  .product-tag-item__content{
    padding: 3px 11px;
@@ -344,6 +357,33 @@
    background-repeat: no-repeat;
    background-position: center;
  }
+  .product__error{
+    margin: auto;
+
+    padding: 0 16px;
+
+    font-family: var(--font-family);
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 100%;
+    text-transform: uppercase;
+    color: var(--text-0);
+    text-align: center;
+  }
+  .product__error-button{
+    border-radius: 20px;
+    padding: 4px 24px;
+
+    font-family: var(--font-family);
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 120%;
+    color: var(--text-black);
+
+    border: 1px solid var(--text-0);
+    background: var(--background-white);
+    text-decoration: none;
+  }
  .product__title{
    font-family: var(--font-family);
    font-weight: 700;
@@ -431,6 +471,9 @@
    color: #f4f1f0;

    border-radius: 16px;
+    display: block;
+
+    text-decoration: none;
  }
  .product-item-label__tag--new{
    background: var(--gradient-blue);
@@ -482,6 +525,9 @@
    font-size: 20px;
    line-height: 120%;
    color: var(--text-black);
+
+    text-decoration: none;
+    display: block;
  }
  .product-item__title:first-child{
    margin-top: 0;
@@ -502,6 +548,7 @@
  }
  .product-item__price p::after{
    content: '₽';
+    padding-left: 5px;
  }
  .product-item__price span{
    margin-left: 9px;
@@ -651,9 +698,9 @@
 /* product */

 /* modal */
-.modal__button .to-know{
+/* .modal__button .to-know{
  display: none;
-}
+} */
 /* modal */

 /* footer */
@@ -704,6 +751,9 @@
 .footer-list__item:nth-child(even){
  width: 322px;
 }
+.footer-list__item .button{
+  border-radius: 24px;
+}
 .footer-list__title{
  font-family: var(--font-family);
  font-weight: 700;
@@ -841,7 +891,6 @@
  font-size: 36px;
  line-height: 111%;
  text-transform: uppercase;
-  color: #121212;
 }
 .detail-block-price__price::after{
  content: '₽';
@@ -941,14 +990,21 @@
  margin-top: 48px;
  margin-bottom: 48px;
 }
-.detail__catalot{
+.detail__wrapper-catalot{
  margin-top: 64px;

-  width: 100%;
+  width: calc(100% + 16px);

  overflow: hidden;
+
+  position: relative;
+}
+.detail__catalot{
+
 }
 .detail-catalot__header{
+  padding-right: 16px;
+
  display: flex;
  justify-content: space-between;
  align-items: center;
@@ -993,6 +1049,9 @@
 .detail__images-phone{
  display: none;
 }
+.back-detail{
+  display: none;
+}
 .toggle__table{
  margin-top: 32px;

@@ -1199,6 +1258,679 @@

 /* gallery */

+
+/* cabinet */
+.cabinet{
+  padding: 24px;
+
+  display: flex;
+  justify-content: space-between;
+}
+.cabinet__control{
+  margin: 24px;
+  margin-bottom: 0;
+
+  display: none;
+}
+.cabinet-control__button{
+  margin-left: 8px;
+
+  padding: 12px 16px;
+  
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-black);
+
+  background: var(--background-white);
+  border: 2px solid var(--text-black);
+  border-radius: 48px;
+
+  transition: opacity .2s ease-out;
+}
+.cabinet-control__button:first-child{
+  margin-left: 0;
+}
+.cabinet-control__button.active{
+  background: var(--background-black);
+  color: var(--text-white);
+}
+.cabinet-control__button:hover{
+  opacity: .8;
+}
+.cabinet__orders{
+  width: calc(((100% - 48px) / 3) * 2);
+}
+.cabinet__profile{
+  width: calc((100% - 48px) / 3);
+}
+
+.cabinet-card{
+  margin-top: 32px;
+
+  padding: 1px;
+
+  border-radius: 20px;
+}
+.cabinet-card:first-child{
+  margin-top: 0;
+}
+.cabinet-card--green{
+  background: var(--background-green);
+}
+.cabinet-card--green-white{
+  background: var(--background-green-white);
+}
+.cabinet-card--green-white .cabinet-card__content{
+  background: none;
+}
+.cabinet-card--red-blue{
+  background: var(--gradient-red);
+}
+.cabinet-card--grey{
+  background: var(--background-9);
+}
+.cabinet-card__content{
+  padding: 23px;
+
+  border-radius: 19px;
+
+  background-color: var(--background-white);
+}
+.cabinet-card__element{
+  margin-top: 24px;
+
+  position: relative;
+}
+.cabinet-card__element--margin-top-32{
+  margin-top: 32px;
+}
+.cabinet-card__element:first-child,
+.cabinet-card__element--margin-top-32:first-child{
+  margin-top: 0
+}
+.cabinet-card__element-change{
+  position: absolute;
+  top: 14px;
+  right: 0;
+
+  width: 24px;
+  aspect-ratio: 1;
+
+  background-image: url(../img/svg/main/change-dot.svg);
+  border: none;
+  background-color: var(--background-white);
+
+  transition: opacity .2s ease-out;
+}
+.cabinet-card__element-change:hover{
+  opacity: .8;
+}
+.cabinet-card__title{
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 26px;
+  line-height: 123%;
+  text-transform: uppercase;
+  background: var(--gradient-blue);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.cabinet-card__text{
+  font-family: var(--font-family);
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 120%;
+
+  color: var(--text-black);
+}
+.cabinet-card__text--grey{
+  color: var(--text-grey);
+}
+.cabinet-card__label{
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 125%;
+
+  color: var(--text-3);
+}
+.cabinet-card__status{
+  padding-left: 20px;
+
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 133%;
+
+  position: relative;
+}
+.cabinet-card__status--chek{
+  color: var(--text-green);
+}
+.cabinet-card__status--chek::before{
+  content: '';
+
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: 16px;
+  height: 16px;
+
+  background-image: url(../img/svg/main/status-chek.svg);
+  object-fit: contain;
+}
+.cabinet-card__status--cancelled{
+  color: var(--text-red);
+}
+.cabinet-card__status--cancelled::before{
+  content: '';
+
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: 16px;
+  height: 16px;
+
+  background-image: url(../img/svg/main/status-cancelled.svg);
+  object-fit: contain;
+}
+.cabinet-card__block-accounts{
+  display: flex;
+}
+.cabinet-card__account{
+  margin-left: 16px;
+
+  width: 40px;
+  aspect-ratio: 1;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background: var(--background-9);
+  border-radius: 50%;
+}
+.cabinet-card__account:first-child{
+  margin-left: 0;
+}
+.cabinet-card__block-buttons{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.cabinet-card__button{
+  padding: 8px 8px 6px 0;
+
+  font-family: var(--font-family);
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-black);
+
+  background: none;
+  border: none;
+
+  position: relative;
+
+  text-decoration: none;
+}
+.cabinet-card__button::before{
+  content: '';
+
+  position: absolute;
+  bottom: 6px;
+
+  width: calc(100% - 8px);
+  height: 1px;
+
+  background: var(--text-black);
+
+  transition: opacity .2s ease-out;
+}
+.cabinet-card__button:hover{
+  opacity: .8;
+}
+.cabinet-card__confirm{
+  margin-top: 16px;
+
+  border-radius: 20px;
+  padding: 4px 24px;
+
+  font-family: var(--font-family);
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 120%;
+
+
+  background: var(--background-black);
+  color: var(--text-white);
+  border: none;
+
+  transition: opacity .2s ease-out;
+}
+.cabinet-card__confirm:hover{
+  opacity: .8;
+}
+.cabinet-card__text, .cabinet-card__label, .cabinet-card__status, .cabinet-card__block-accounts, .cabinet-card__block-buttons{
+  margin-top: 8px;
+}
+.cabinet-card__text:first-child, .cabinet-card__label:first-child, .cabinet-card__status:first-child, .cabinet-card__block-accounts:first-child, .cabinet-card__block-buttons:first-child{
+  margin-top: 0px;
+}
+.cabinet-card__block-add-pets{
+  width: 100%;
+
+  display: flex;
+  align-items: center;
+
+  background: none;
+  border: none;
+}
+.cabinet-card-add-pets__circle{
+  width: 48px;
+  aspect-ratio: 1;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border: 1px solid var(--text-6);
+  border-radius: 50%;
+}
+.cabinet-card-add-pets__text{
+  margin-left: 16px;
+
+  font-family: var(--font-family);
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 120%;
+
+  color: var(--text-6);
+
+  position: relative;
+}
+.cabinet-card-add-pets__text::after{
+  content: '';
+
+  position: absolute;
+  left: 0;
+  bottom: -4px;
+
+  width: 100%;
+  height: 1px;
+
+  background: var(--text-6);
+}
+.cabinet-card__discount{
+  display: flex;
+  align-items: center;
+}
+.cabinet-card-discount__title{
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 125%;
+  color: var(--text-black);
+}
+.cabinet-card-discount__percent{
+  margin-left: 16px;
+
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 125%;
+  color: var(--text-black);
+}
+.cabinet-card-discount__percent::after{
+  content: '%';
+}
+.cabinet-card-discount__arrow{
+  display: inline-block;
+
+  margin-left: 6px;
+
+  width: 20px;
+  aspect-ratio: 1;
+
+  background-image: url(../img/svg/main/arrow-breadcrumbs-black.svg);
+  background-position: center;
+}
+.cabinet-card__no-orders{
+  margin-top: 32px;
+
+  padding: 48px 24px;
+}
+.cabinet-card-no-orders__element{
+  margin-top: 26px;
+}
+.cabinet-card-no-orders__element:first-child{
+  margin-top: 0;
+}
+.cabinet-card-no-orders__title{
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 133%;
+  text-align: center;
+  color: var(--text-black);
+}
+.cabinet-card__pet{
+  display: flex;
+  align-items: center;
+}
+.cabinet-card-pet__icon{
+  width: 48px;
+  aspect-ratio: 1;
+
+  border-radius: 50%;
+  background: var(--gradient-blue);
+}
+.cabinet-card-pet-icon__content{
+  margin: 1px;
+  
+  width: calc(100% - 2px);
+  aspect-ratio: 1;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border-radius: 50%;
+  background: var(--background-white);
+}
+.cabinet-card-pet-icon__content img{
+  width: 32px;
+  aspect-ratio: 1;
+
+  object-fit: contain;
+}
+.cabinet-card-pet__name{
+  margin-left: 24px;
+
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 125%;
+  color: var(--text-black);
+}
+.cabinet-card__order{
+  position: relative;
+}
+.cabinet-card-order__header{
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+.cabinet-card-order__main{}
+.cabinet-card-order-main__date{
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 133%;
+  color: var(--text-black);
+}
+.cabinet-card-order-main__number{
+  margin-top: 8px;
+
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 133%;
+  color: var(--text-black);
+}
+.cabinet-card-order-main__number::before{
+  content: '№';
+}
+.cabinet-card-order__payment{
+  display: flex;
+  align-items: flex-end;
+
+  transition: margin .2s ease-out;
+}
+.cabinet-card-order-payment__title{
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 133%;
+  color: var(--text-black);
+}
+.cabinet-card-order-payment__price{
+  margin-left: 8px;
+
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 125%;
+  color: var(--text-black);
+}
+.cabinet-card-order-payment__price::after{
+  margin-left: 5px;
+  content: '₽';
+}
+.cabinet-card-order-payment__price--add::after{
+  display: none;
+}
+.cabinet-card-order__content{
+  margin-top: 24px;
+}
+.cabinet-card-order__content
+.cabinet-card-order__status{
+  display: flex;
+  align-items: center;
+}
+.cabinet-card-order-status__title{
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-black);  
+}
+.cabinet-card-order-status__pointer{
+  margin-left: 12px;
+
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-black); 
+}
+.cabinet-card-order-status__pointer--grey{
+  color: var(--text-6);
+}
+.cabinet-card-order-status__pointer--green{
+  color: var(--text-green);
+}
+.cabinet-card-order-status__pointer--red{
+  color: var(--text-red);
+}
+.cabinet-card-order__block-detail{
+  height: 0;
+  overflow: hidden;
+
+  transition: height .2s ease-out;
+}
+.cabinet-card-order__detail{
+  padding-top: 24px;
+}
+.cabinet-card-order-detail__address{}
+.cabinet-card-order-detail-address__title{
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-black); 
+}
+.cabinet-card-order-detail-address__text{
+  margin-top: 16px;
+
+  font-family: var(--font-family);
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-black); 
+}
+.cabinet-card-order-detail__main{
+  margin-top: 24px;
+
+  display: flex;
+  justify-content: space-between;
+}
+.cabinet-card-order-detail-main__products{}
+.cabinet-card-order-detail-main__product{
+  margin-top: 4px;
+
+  display: flex;
+  align-items: center;
+}
+.cabinet-card-order-detail-main__product:first-child{
+  margin-top: 0;
+}
+.cabinet-card-order-detail-main-product__img{
+  width: 106px;
+  height: 96px;
+}
+.cabinet-card-order-detail-main-product__content{
+  display: flex;
+}
+.cabinet-card-order-detail-main-product__description{
+  width: 212px;
+}
+.cabinet-card-order-detail-main-product-description__what{
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 133%;
+  color: var(--text-black);
+}
+.cabinet-card-order-detail-main-product-description__with-what{
+  margin-top: 8px;
+
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 133%;
+  color: var(--text-6);
+}
+.cabinet-card-order-detail-main-product__count{
+  margin-left: 8px;
+
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 133%;
+  text-align: right;
+  color: var(--text-6);
+}
+.cabinet-card-order-detail-main-product__count::before{
+  margin-right: 4px;
+
+  content: 'x';
+}
+.cabinet-card-order-detail-main-product__price{
+  margin-left: 16px;
+
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 133%;
+  text-align: right;
+  color: var(--text-black);
+}
+.cabinet-card-order-detail-main-product__price::after{
+  content: ' Р';
+}
+.cabinet-card-order-detail-main__links{
+  display: flex;
+  flex-direction: column;
+}
+.cabinet-card-order-detail-main__link{
+  margin-top: 16px;
+}
+.cabinet-card-order-detail-main__link:first-child{
+  margin-top: 0;
+}
+.cabinet-card-order__open-detail{
+  margin-top: 24px;
+
+  padding-right: 24px;
+
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-black);
+
+  border: none;
+  background: none;
+
+  position: relative;
+}
+.cabinet-card-order__open-detail::after{
+  content: '';
+
+  position: absolute;
+  top: 6.75px;
+  right: 0;
+
+  width: 12.5px;
+  height: 10.5px;
+
+  background-image: url(../img/svg/main/arrow-black.svg);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+
+  transition: transform .2s;
+  /* transform: rotate(180deg); */
+}
+.cabinet-card-order__detail-short{
+  position: absolute;
+  right: 0;
+  bottom: 0;
+
+  display: flex;
+  align-items: center;
+
+  transition: opacity .2s .1s ease-out;
+}
+.cabinet-card-order-detail-short__item{
+  border-radius: 16px;
+  width: 106px;
+  height: 96px;
+}
+.cabinet-card__download{
+  margin-top: 32px;
+}
+.cabinet-card__order.active .cabinet-card-order__detail-short{
+  opacity: 0;
+}
+.cabinet-card__order.active .cabinet-card-order__open-detail::after{
+  transform: rotate(180deg);
+}
+.cabinet-card-order__payment-add{
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+}
+.cabinet-card-order__sub-title{
+  font-size: 14px;
+}
+.cabinet-card-order__date{
+  font-size: 16px;
+}
+/* .cabinet-card-no-orders__ */
+.cabinet__subscription-pc{
+}
+.cabinet__subscription-mobile{
+  display: none;
+}
+/* cabinet */
+
@media only screen and (max-width: 1600px) {

 .wrapper{
@@ -1214,21 +1946,63 @@
 .gallery__wrapper{
  max-width: 1280px;
 }
+
+.header__content::after{
+  max-width: 1232px;
+}
 }

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

+.subscription{
+  margin-top: 12px;
+}
+.subscription__item{
+  padding: 12px 0;
+  justify-content: space-between;
+}
+.subscription__item{
+  font-size: 20px;
+}
+.subscription__add{
+  color: var(--text-black);
+}
+.subscription__add-header{

-
-
-
-
-
-/* Стили для лептопов  */
-/* @media only screen and (min-width: 992px) and (max-width: 1400px) {
-
-} */
+}
+.subscription__add-title{
+  font-size: 24px;
+}
+.subscription__add-content{
+  padding: 24px 0 12px 0;
+}
+.subscription__add-product{
+  align-items: start;
+}
+.subscription__add-product > *:nth-child(3){
+ margin-left: auto;
+ align-items: center;
+}
+.subscription__add .cabinet-card-order-detail-main-product-description__what {
+  font-size: 16px;
+  line-height: 125%;
+}
+.subscription__add .cabinet-card-order-detail-main-product-description__with-what {
+  font-weight: 500;
+  font-size: 16px;
+}
+.subscription__add .cabinet-card-order-detail-main-product__count{
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 100%;
+}
+.subscription__add .cabinet-card-order-detail-main-product__price{
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 120%;
+}
--- a/assets/css/gp-style-mobile.css
+++ b/assets/css/gp-style-mobile.css
@@ -13,13 +13,17 @@
 .modal__filter{
    width: 100%;
 }
+.modal__to-know,
+.modal__to-know-submit{
+    width: 100%;
+}
 .modal__button .to-know{
    display: flex;

    background: none;
 }
 .modal__basket .modal__header {
-    height: calc(100% - 92px);
+    height: calc(100% - 156px);
    margin-bottom: -36px;
 }
 .modal-basket-item__block-image{
@@ -42,6 +46,65 @@
    
    font-size: 16px;
 }
+.modal-basket__item--return{
+    flex-direction: column;
+    align-items: start;
+}
+.modal-basket__item--return .modal-basket-item__title{
+    margin-right: auto;
+}
+.notification--width-584{
+    width: 100%;
+}
+.notification__title{
+    font-size: 20px;
+}
+.notification__text--center-pc{
+    text-align: start;
+}
+.notification__img{
+    height: 360px;
+}
+.notification__title{
+    padding-right: 96px;
+}
+.modal-form__buttons--two{
+    flex-wrap: wrap;
+}
+.modal-form__buttons--two button, .modal-form__buttons--two input{
+    margin-top: 24px;
+    width: 100%;
+}
+.modal-form__buttons--two button:first-child, .modal-form__buttons--two input:first-child{
+    margin-top: 0;
+}
+.modal-map__control{
+    flex-wrap: wrap;
+}
+.modal-map-control__item{
+    width: calc(100% - 24px);
+}
+.form__full-mobile{
+    width: 100%;
+    border-radius: 0;
+    border: none;
+}
+
+.modal-form-content__line--three .modal-form-content-line__element:nth-child(1){
+    width: 69px;
+}
+.modal-form-content__line--three .modal-form-content-line__element:nth-child(2){
+
+}
+.modal-form-content__line--three .modal-form-content-line__element:nth-child(3){
+    width: 82px;
+}
+.form__input{
+    padding: 12px 14px;
+}
+.modal-form--height-100-phone{
+    min-height: 100%;
+}
 /* modal */

 /* footer */
@@ -65,6 +128,11 @@

    margin-top: 24px;
 }
+.footer-about__text{
+    padding-top: 35px;
+    display: block;
+    text-align: left;
+}
 .footer__list{
    margin-top: 20px;
 }
@@ -78,7 +146,70 @@
    margin-top: 32px;
    margin-left: 0;
 }
+.toggle__table--three .toggle-table__block:nth-child(1){
+    width: 31%;
+}
 /* detail */
+
+/* cabinet */
+.cabinet-card__title{
+    font-size: 20px;
+}
+.cabinet-card__no-orders{
+    margin-top: 16px;
+}
+.cabinet-card-order__header{
+    flex-direction: column;
+}
+.cabinet-card-order__payment{
+    margin-top: 16px;
+}
+.cabinet-card-order-detail__main{
+    flex-direction: column;
+}
+.cabinet-card-order-detail-main__links{
+    margin-top: 24px;
+
+    align-items: start;
+}
+.cabinet-card-order-detail-main-product__img{
+    width: 70px;
+    height: 70px;
+}
+.cabinet-card-order-detail-main__product{
+    margin-top: 16px;
+
+    align-items: start;
+}
+.cabinet-card-order-detail-main-product__content{
+    margin-left: 16px;
+
+    flex-wrap: wrap;
+
+    position: relative;
+}
+.cabinet-card-order-detail-main-product__description{
+    width: 100%;
+}
+.cabinet-card-order-detail-main-product__count{
+    position: absolute;
+    left: 116px;
+    bottom: 0;
+}
+.cabinet-card-order-detail-main-product__price{
+    position: absolute;
+    left: 153px;
+    bottom: 0;
+}
+.cabinet-card__content{
+    padding-right: 19px;
+}
+.cabinet-card-order-main__date{
+    font-size: 20px;
+}
+/* .cabinet-card__order.active */
+/* .cabinet-card__order.active */
+/* cabinet */
 }

@media only screen and (max-width: 576px) {
@@ -100,6 +231,15 @@
 .modal__aside{
    left: 0;
 }
+.form-input-radio__title span{
+    display: block;
+    width: 100%;
+
+    color: var(--text-grey);
+}
+.modal-form__title{
+    font-size: 20px;
+}
 /* modal */

 /* detail */
@@ -107,4 +247,90 @@
 .detail-block-form__submit{
    min-width: 100%;
 }
-}
+/* detail */
+
+/* cabinet */
+
+.cabinet-card-order-detail-main-product__img{
+    width: 40px;
+    height: 40px;
+}
+
+.cabinet-card-order-detail-main-product__count{
+    left: auto;
+    right: 71px;
+}
+.cabinet-card-order-detail-main-product__price{
+    left: auto;
+    right: 0;
+}
+.cabinet-card-order__detail-short{
+    transition-delay: 0;
+    transition-duration: 0;
+}
+/* cabinet */
+}
+
+@media only screen and (max-width: 720px) {
+    .subscription__item{
+        flex-direction: column;
+    }
+
+    .subscription__item > p:first-child{
+        font-size: 16px;
+        color: var(--text-6);
+    }
+    .subscription__item > p:last-child{
+        margin-top: 6px;
+    }
+
+    .subscription__add-title {
+        font-size: 20px;
+    }
+
+    .subscription__add-product{
+        flex-wrap: wrap;
+    }
+
+    .subscription__add-product > *:not(:first-child){
+        padding-top: 0;
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product__img{
+        width: 73px;
+        height: 66px;
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product-description__what{
+        font-size: 12px;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product-description__with-what{
+        margin-top: 8px;
+
+        font-size: 12px;
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product__description {
+        width: calc(100% - 73px);
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product__content{
+        position: static;
+        margin-top: -10px;
+        margin-left: auto;
+        width: calc(100% - 73px);
+
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product__count{
+        position: static;
+        font-size: 12px;
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product__price{
+        position: static;
+        font-size: 16px;
+    }
+}
+
--- a/assets/css/gp-style-order.css
+++ b/assets/css/gp-style-order.css
@@ -0,0 +1,241 @@
+.order{
+    display: flex;
+}
+.order__title{
+    font-family: var(--font-family);
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 117%;
+    text-transform: uppercase;
+    color: var(--text-black);
+}
+.order__contacts{
+    width: calc(50% - 0.5px);
+
+    padding: 24px;
+
+    border-right: 1px solid #121212;
+}
+.order-contacts__header{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.order-contacts__form{
+    margin-top: 24px;
+}
+.order-contacts__delivery{
+    margin-top: 47.5px;
+
+    padding-top: 48px;
+
+    border-top: 1px solid var(--background-grey);
+}
+
+.order-contacts-deliver__item{
+    margin-top: 24px;
+}
+.order-contacts-deliver__date{
+    padding: 8px;
+
+    border-radius: 24px;
+
+    background: var(--background-grey);
+}
+.order-contacts-deliver__date .form-input-radio__item{
+    margin-top: 24px;
+}
+.order-contacts-deliver__date .form-input-radio__item:first-child{
+    margin-top: 0;
+}
+.order__your{  
+    width: calc(50% - 0.5px);
+
+    padding: 24px 24px 24px 48px;
+
+    background: var(--background-grey);
+}
+.order-your__products{
+    margin-top: 48px;
+}
+.order-your-products__item{
+    margin-top: 16px;
+
+    display: flex;
+    justify-content: space-between;
+}
+.order-your-products__left{
+    display: flex;
+}
+.order-your-products__img{
+    width: 40px;
+    aspect-ratio: 1;
+
+    border-radius: 16px;
+}
+.order-your-products__content{
+    margin-left: 16px;
+}
+.order-your-products__name{
+    font-family: var(--font-family);
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 133%;
+    color: var(--text-black);
+
+    text-decoration: none;
+}
+.order-your-products__description{
+    margin-top: 8px;
+
+    font-family: var(--font-family);
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 133%;
+    color: var(--text-6);
+}
+.order-your-products__description span{
+    font-weight: 700;
+}
+.order-your-products__description span::before{
+    margin-left: 3px;
+
+    content: 'x ';
+}
+.order-your-products__right{
+    display: flex;
+}
+.order-your-products__count{
+    font-family: var(--font-family);
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 133%;
+    text-align: right;
+    color: var(--text-6);
+}
+.order-your-products__count::before{
+    content: 'x';
+}
+.order-your-products__price{
+    margin-left: 16px;
+
+    font-family: var(--font-family);
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 133%;
+    text-align: right;
+    color: var(--text-black);
+}
+.order-your-products__price::after{
+    content: 'Р';
+}
+.order-your__calculation{
+    margin-top: 48px;
+}
+.order-your__promo{
+    display: flex;
+}
+.order-your-promo__button{
+    margin-left: 8px;
+}
+.order-your-calculation__item{
+    margin-top: 24px;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.order-your-calculation__title{
+    font-family: var(--font-family);
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 120%;
+    color: var(--text-black);
+}
+.order-your-calculation__value{
+    font-family: var(--font-family);
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 200%;
+    text-transform: uppercase;
+    text-align: right;
+    color: var(--text-black);
+}
+.order-your-calculation__value--price::after{
+    content: ' ₽';
+}
+.order-your-calculation__value--discount{
+    background: var(--gradient-red);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+.order-your-calculation__value--discount::before{
+    content: '- ';
+}
+.order-your-calculation__description{
+    font-family: var(--font-family);
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 133%;
+    text-align: right;
+    color: var(--text-9);
+}
+.order-your-calculation__line{
+    margin-top: 23px;
+    border: 1px solid var(--background-9);
+}
+.order-your-calculation__result{
+    font-family: var(--font-family);
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 117%;
+    text-transform: uppercase;
+    color: var(--text-black);
+}
+.order-your-calculation__submit{
+    margin-top: 48px;
+}
+
+@media only screen and (max-width: 1200px) {
+.order{
+    display: block;
+}
+.order__contacts, .order__your{
+    border: none;
+    width: 100%;
+}
+}
+
+@media only screen and (max-width: 720px) {
+.order__title{
+    max-width: 181px;
+
+    font-size: 20px;
+    line-height: 120%;
+}
+.order__your{
+    margin-top: 16px;
+}
+.order__contacts{
+    padding: 24px 16px;
+}
+.order__your{
+    padding: 40px 16px 9px 16px;
+}
+.order-your__promo{
+    display: block;
+}
+.order-your-promo__button{
+    margin-left: 0;
+    margin-top: 24px;
+
+    width: 100%;
+}
+.order-your-products__content{
+    max-width: 164px;
+}
+.order-your-products__count, .order-your-products__price{
+    flex-shrink: 0;
+}
+}
--- a/assets/css/gp-style-tablet.css
+++ b/assets/css/gp-style-tablet.css
@@ -1,6 +1,9 @@
 /* Стили для планшетов  */
@media only screen and (max-width: 1200px) {
 /* header */
+main{
+    padding-top: 64px;
+}
 .main-menu{
    display: none;
 }
@@ -12,7 +15,7 @@
 }
 .header__logo{
    width: 136px;
-    height: 24px;
+    height: 29px;
 }
 .header__content{
    height: auto;
@@ -36,21 +39,180 @@
 .header__menu-block{
    top: 56px;
 }
+.header__content::after{
+    left: 0;
+    right: 0;
+    width: 100%;
+}
 /* header */

 /* footer */
 .footer{
    margin-top: 0;
-}
-.footer__about{
-    justify-content: center;
-}
-.footer-about__text{
-    display: none;
+
+    padding: 24px 16px;
 }
 /* footer */

+/* breadcrumbs */
+.breadcrumbs{
+    display: none;
+}
+/* breadcrumbs */

+/* product */
+.product{
+    padding: 12px;
+    padding-top: 20px;
+}
+.product__title{
+    font-weight: 700;
+    font-size: 26px;
+    line-height: 123%;
+    text-transform: uppercase;
+}
+.to-know p {
+    font-size: 18px;
+}
+.toggle-table__title{
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 133%;
+}
+.toggle-table__item p{
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 133%;
+}
+.toggle-table-item__line{
+    margin-top: 12px;
+}
+.detail{
+    margin: 24px 16px;
+}
+.back-detail{
+    display: inline;
+}
+.detail-catalot__title{
+    font-size: 22px;
+}
+.product__footer--error{
+    margin: 48px 0px 24px;
+}
+/* product */
+
+/* modal */
+.modal{
+    padding: 0;
+}
+.modal__text{
+    padding-right: 0;
+}
+.form__button-pc{
+    display: none;
+}
+.form__button-mobile{
+    display: block;
+}
+.modal-form{
+    /* min-height: 100%;
+    width: 100%;
+
+    border-radius: 0;
+    border: none; */
+}
+.modal__notification{
+    margin: 24px;
+}
+.form-input-phone__list{
+    left: 0;
+}
+
+.modal-form-content__line--two{
+    flex-wrap: wrap;
+}
+.modal-form-content__line--two .modal-form-content-line__element{
+    margin-top: 24px;
+
+    width: 100%;
+}
+.modal-form-content__line--two .modal-form-content-line__element:first-child{
+    margin-top: 0;
+}
+.modal-map{
+    width: 100%;
+
+    flex-direction: column;
+
+    border-radius: 0;
+}
+.modal-map__left, .modal-map__right{
+    width: 100%;
+}
+.modal-map__map iframe {
+    width: 100%;
+    height: 528px;
+}
+.modal-map-form__button{
+    display: none;
+}
+.modal-map-form__sub-button{
+    margin-top: 64px;
+
+    padding: 0 24px;
+
+    display: flex;
+  }
+/* modal */
+
+/* cabinet */
+.cabinet{
+    flex-direction: column;
+
+    position: relative;
+}
+.cabinet__control{
+    display: flex;
+
+    position: relative;
+}
+.cabinet__orders, .cabinet__profile{
+    width: calc(100% - 48px);
+}
+.cabinet__orders, .cabinet__profile{
+    position: absolute;
+    opacity: 0;
+
+    transition: opacity .2s ease-out;
+}
+.cabinet-content{
+    pointer-events:none;
+}
+.cabinet__orders.active, .cabinet__profile.active{
+    opacity: 1;
+}
+.cabinet__orders.hide, .cabinet__profile.hide{
+    position: static;
+    display: block;
+    pointer-events:auto;
+
+    width: 100%;
+}
+.cabinet__subscription-pc{
+    display: none;
+}
+.cabinet__subscription-mobile{
+  display: block;
+
+  margin: 24px 24px 0 24px;
+}
+.cabinet__orders .cabinet-card:nth-child(2){
+    margin-top: 0;
+  }
+  .cabinet__orders--no-cab .cabinet-card:nth-child(2){
+    margin-top: 32px;
+  }
+/* cabinet */
 }

@media only screen and (max-width: 980px) {
@@ -158,4 +320,29 @@
    height: auto;
 }
 /* detail */
+}
+
+@media only screen and (max-width: 750px) {
+/* cabinet */
+.cabinet-card-order__open-detail{
+    margin-top: 144px;
+}
+.cabinet-card-order__detail-short{
+    right: auto;
+    left: 0;
+    bottom: 48px;
+}
+.cabinet-card-order-detail-short__item{
+    margin-left: -27px;
+}
+.cabinet-card-order-detail-short__item:first-child{
+    margin-left: 0;
+}
+.cabinet-card__order.active .cabinet-card-order__open-detail{
+    margin-top: 24px;
+}
+.cabinet-card-order__link{
+    margin-top: 144px;
+}
+/* cabinet */
 }
--- a/assets/img/modal/about_slider.png
+++ b/assets/img/modal/about_slider.png
--- a/assets/img/pet/mini-dog.png
+++ b/assets/img/pet/mini-dog.png
--- a/assets/img/product/mini-card.png
+++ b/assets/img/product/mini-card.png
--- a/assets/img/svg/country/ar.svg
+++ b/assets/img/svg/country/ar.svg
@@ -0,0 +1,13 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_230_9775)">
+<path d="M0 0H16V5.33437H0V0Z" fill="#D90012"/>
+<path d="M0 5.33447H16V10.6657H0V5.33447Z" fill="#0033A0"/>
+<path d="M0 10.6655H16V15.9999H0V10.6655Z" fill="#F2A800"/>
+</g>
+<rect x="0.1" y="0.1" width="15.8" height="15.8" stroke="#999999" stroke-width="0.2"/>
+<defs>
+<clipPath id="clip0_230_9775">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/assets/img/svg/country/ru.svg
+++ b/assets/img/svg/country/ru.svg
@@ -0,0 +1,13 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_230_9627)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H16V16H0V0Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 5.33447H16V16.0001H0V5.33447Z" fill="#0039A6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 10.6655H16V15.9999H0V10.6655Z" fill="#D52B1E"/>
+</g>
+<rect x="0.1" y="0.1" width="15.8" height="15.8" stroke="#999999" stroke-width="0.2"/>
+<defs>
+<clipPath id="clip0_230_9627">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/assets/img/svg/main/arrow-back.svg
+++ b/assets/img/svg/main/arrow-back.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.5 12.3643H21" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.5 12.3643L10.864 18.7282" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.5 12.3643L10.864 6.0003" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/assets/img/svg/main/arrow-breadcrumbs-black.svg
+++ b/assets/img/svg/main/arrow-breadcrumbs-black.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.94673 2.74797C9.26993 2.62677 9.63019 2.79052 9.75139 3.11373L12.2514 9.78039C12.3045 9.92188 12.3045 10.0778 12.2514 10.2193L9.75139 16.886C9.63019 17.2092 9.26993 17.3729 8.94673 17.2517C8.62353 17.1305 8.45978 16.7703 8.58098 16.4471L10.9987 9.99984L8.58098 3.55263C8.45978 3.22943 8.62353 2.86917 8.94673 2.74797Z" fill="#333333"/>
+</svg>
--- a/assets/img/svg/main/arrow-right-input.svg
+++ b/assets/img/svg/main/arrow-right-input.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 8.24268H3" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 8.24268L9.75736 12.4853" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 8.24268L9.75736 4.00003" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/assets/img/svg/main/change-dot.svg
+++ b/assets/img/svg/main/change-dot.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.2929 5.70711C11.1054 5.51957 11 5.26522 11 5C11 4.73478 11.1054 4.48043 11.2929 4.29289C11.4804 4.10536 11.7348 4 12 4C12.2652 4 12.5196 4.10536 12.7071 4.29289C12.8946 4.48043 13 4.73478 13 5C13 5.26522 12.8946 5.51957 12.7071 5.70711C12.5196 5.89464 12.2652 6 12 6C11.7348 6 11.4804 5.89464 11.2929 5.70711ZM11 12C11 12.2652 11.1054 12.5196 11.2929 12.7071C11.4804 12.8946 11.7348 13 12 13C12.2652 13 12.5196 12.8946 12.7071 12.7071C12.8946 12.5196 13 12.2652 13 12C13 11.7348 12.8946 11.4804 12.7071 11.2929C12.5196 11.1054 12.2652 11 12 11C11.7348 11 11.4804 11.1054 11.2929 11.2929C11.1054 11.4804 11 11.7348 11 12ZM11 19C11 19.2652 11.1054 19.5196 11.2929 19.7071C11.4804 19.8946 11.7348 20 12 20C12.2652 20 12.5196 19.8946 12.7071 19.7071C12.8946 19.5196 13 19.2652 13 19C13 18.7348 12.8946 18.4804 12.7071 18.2929C12.5196 18.1054 12.2652 18 12 18C11.7348 18 11.4804 18.1054 11.2929 18.2929C11.1054 18.4804 11 18.7348 11 19Z" fill="#121212"/>
+</svg>
--- a/assets/img/svg/main/google-white.svg
+++ b/assets/img/svg/main/google-white.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.7875 10.2271C19.7875 9.51801 19.7239 8.83619 19.6057 8.18164H10.1875V12.0498H15.5693C15.3375 13.2998 14.633 14.3589 13.5739 15.068V17.5771H16.8057C18.6966 15.8362 19.7875 13.2726 19.7875 10.2271Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1864 20.0004C12.8864 20.0004 15.15 19.105 16.8046 17.5777L13.5728 15.0686C12.6773 15.6686 11.5318 16.0231 10.1864 16.0231C7.58183 16.0231 5.37728 14.264 4.59092 11.9004H1.25V14.4913C2.89546 17.7595 6.27728 20.0004 10.1864 20.0004Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.59205 11.8997C4.39205 11.2997 4.27842 10.6588 4.27842 9.99971C4.27842 9.34062 4.39205 8.6997 4.59205 8.0997V5.50879H1.25114C0.573864 6.85879 0.1875 8.38607 0.1875 9.99971C0.1875 11.6133 0.573864 13.1406 1.25114 14.4906L4.59205 11.8997Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1864 3.97728C11.6546 3.97728 12.9728 4.48183 14.0091 5.47274L16.8773 2.60455C15.1455 0.990911 12.8818 0 10.1864 0C6.27728 0 2.89546 2.24091 1.25 5.5091L4.59092 8.10002C5.37728 5.73638 7.58183 3.97728 10.1864 3.97728Z" fill="white"/>
+</svg>
--- a/assets/img/svg/main/plus-grey.svg
+++ b/assets/img/svg/main/plus-grey.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_178_5112)">
+<path d="M12 5V19" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 12H19" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_178_5112">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/assets/img/svg/main/question.svg
+++ b/assets/img/svg/main/question.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.00005 1.2498C4.27213 1.2498 1.25005 4.27188 1.25005 7.9998C1.25005 11.7277 4.27213 14.7498 8.00005 14.7498C11.728 14.7498 14.75 11.7277 14.75 7.9998C14.75 4.27188 11.728 1.2498 8.00005 1.2498ZM0.0500488 7.9998C0.0500488 3.60914 3.60939 0.0498047 8.00005 0.0498047C12.3907 0.0498047 15.9501 3.60914 15.9501 7.9998C15.9501 12.3905 12.3907 15.9498 8.00005 15.9498C3.60938 15.9498 0.0500488 12.3905 0.0500488 7.9998ZM8.75664 11.8914C8.75664 12.3056 8.42085 12.6414 8.00664 12.6414C7.59243 12.6414 7.25664 12.3056 7.25664 11.8914C7.25664 11.4772 7.59243 11.1414 8.00664 11.1414C8.42085 11.1414 8.75664 11.4772 8.75664 11.8914ZM6.35884 6.22749C6.35879 5.76088 6.51651 5.31995 6.80394 5.00253C7.08243 4.69497 7.51419 4.46749 8.14659 4.46748C9.28878 4.46747 10.0031 5.57665 9.44696 6.64451C9.21979 7.08066 8.93274 7.37811 8.60211 7.7207L8.60206 7.72075C8.49777 7.82881 8.38915 7.94137 8.27671 8.06418C7.82078 8.56216 7.37999 9.17405 7.37999 10.1425C7.37999 10.4738 7.64862 10.7425 7.97999 10.7425C8.31136 10.7425 8.57999 10.4738 8.57999 10.1425C8.57999 9.61088 8.79169 9.27875 9.16178 8.87452C9.23347 8.79622 9.31482 8.71242 9.40228 8.62233C9.75046 8.26368 10.1953 7.80545 10.5113 7.19883C11.4927 5.31454 10.1697 3.26746 8.14658 3.26748C7.19634 3.26749 6.43417 3.62308 5.91442 4.19707C5.4036 4.7612 5.15877 5.5003 5.15884 6.22761C5.15887 6.55898 5.42753 6.82758 5.7589 6.82755C6.09027 6.82752 6.35887 6.55886 6.35884 6.22749Z" fill="#121212"/>
+</svg>
--- a/assets/img/svg/main/status-cancelled.svg
+++ b/assets/img/svg/main/status-cancelled.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 1.5C7.64641 1.5 6.80117 1.66813 6.01256 1.99478C5.22394 2.32144 4.50739 2.80023 3.90381 3.40381C3.30023 4.00739 2.82144 4.72394 2.49478 5.51256C2.16813 6.30117 2 7.14641 2 8C2 8.85359 2.16813 9.69883 2.49478 10.4874C2.82144 11.2761 3.30023 11.9926 3.90381 12.5962C4.50739 13.1998 5.22394 13.6786 6.01256 14.0052C6.80117 14.3319 7.64641 14.5 8.5 14.5C9.35359 14.5 10.1988 14.3319 10.9874 14.0052C11.7761 13.6786 12.4926 13.1998 13.0962 12.5962C13.6998 11.9926 14.1786 11.2761 14.5052 10.4874C14.8319 9.69883 15 8.85359 15 8C15 7.14641 14.8319 6.30117 14.5052 5.51256C14.1786 4.72394 13.6998 4.00739 13.0962 3.40381C12.4926 2.80023 11.7761 2.32144 10.9874 1.99478C10.1988 1.66813 9.35359 1.5 8.5 1.5ZM6.39524 2.91866C7.06253 2.64226 7.77773 2.5 8.5 2.5C9.22227 2.5 9.93747 2.64226 10.6048 2.91866C11.272 3.19506 11.8784 3.60019 12.3891 4.11091C12.8998 4.62164 13.3049 5.22795 13.5813 5.89524C13.8577 6.56253 14 7.27773 14 8C14 8.72227 13.8577 9.43747 13.5813 10.1048C13.3049 10.772 12.8998 11.3784 12.3891 11.8891C11.8784 12.3998 11.272 12.8049 10.6048 13.0813C9.93747 13.3577 9.22227 13.5 8.5 13.5C7.77773 13.5 7.06253 13.3577 6.39524 13.0813C5.72795 12.8049 5.12164 12.3998 4.61091 11.8891C4.10019 11.3784 3.69506 10.772 3.41866 10.1048C3.14226 9.43747 3 8.72227 3 8C3 7.27773 3.14226 6.56253 3.41866 5.89524C3.69506 5.22795 4.10019 4.62163 4.61091 4.11091C5.12163 3.60019 5.72795 3.19506 6.39524 2.91866ZM7.52022 6.31311C7.32496 6.11785 7.00838 6.11785 6.81311 6.31311C6.61785 6.50838 6.61785 6.82496 6.81311 7.02022L7.79289 8L6.81311 8.97978C6.61785 9.17504 6.61785 9.49162 6.81311 9.68689C7.00838 9.88215 7.32496 9.88215 7.52022 9.68689L8.5 8.70711L9.47978 9.68689C9.67504 9.88215 9.99162 9.88215 10.1869 9.68689C10.3821 9.49162 10.3821 9.17504 10.1869 8.97978L9.20711 8L10.1869 7.02022C10.3821 6.82496 10.3821 6.50838 10.1869 6.31311C9.99162 6.11785 9.67504 6.11785 9.47978 6.31311L8.5 7.29289L7.52022 6.31311Z" fill="#F60909"/>
+</svg>
--- a/assets/img/svg/main/status-chek.svg
+++ b/assets/img/svg/main/status-chek.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 1.5C7.64641 1.5 6.80117 1.66813 6.01256 1.99478C5.22394 2.32144 4.50739 2.80023 3.90381 3.40381C3.30023 4.00739 2.82144 4.72394 2.49478 5.51256C2.16813 6.30117 2 7.14641 2 8C2 8.85359 2.16813 9.69883 2.49478 10.4874C2.82144 11.2761 3.30023 11.9926 3.90381 12.5962C4.50739 13.1998 5.22394 13.6786 6.01256 14.0052C6.80117 14.3319 7.64641 14.5 8.5 14.5C9.35359 14.5 10.1988 14.3319 10.9874 14.0052C11.7761 13.6786 12.4926 13.1998 13.0962 12.5962C13.6998 11.9926 14.1786 11.2761 14.5052 10.4874C14.8319 9.69883 15 8.85359 15 8C15 7.14641 14.8319 6.30117 14.5052 5.51256C14.1786 4.72394 13.6998 4.00739 13.0962 3.40381C12.4926 2.80023 11.7761 2.32144 10.9874 1.99478C10.1988 1.66813 9.35359 1.5 8.5 1.5ZM6.39524 2.91866C7.06253 2.64226 7.77773 2.5 8.5 2.5C9.22227 2.5 9.93747 2.64226 10.6048 2.91866C11.272 3.19506 11.8784 3.60019 12.3891 4.11091C12.8998 4.62164 13.3049 5.22795 13.5813 5.89524C13.8577 6.56253 14 7.27773 14 8C14 8.72227 13.8577 9.43747 13.5813 10.1048C13.3049 10.772 12.8998 11.3784 12.3891 11.8891C11.8784 12.3998 11.272 12.8049 10.6048 13.0813C9.93747 13.3577 9.22227 13.5 8.5 13.5C7.77773 13.5 7.06253 13.3577 6.39524 13.0813C5.72795 12.8049 5.12164 12.3998 4.61091 11.8891C4.10019 11.3784 3.69506 10.772 3.41866 10.1048C3.14226 9.43747 3 8.72227 3 8C3 7.27773 3.14226 6.56253 3.41866 5.89524C3.69506 5.22795 4.10019 4.62163 4.61091 4.11091C5.12163 3.60019 5.72795 3.19506 6.39524 2.91866ZM10.8536 7.02022C11.0488 6.82496 11.0488 6.50838 10.8536 6.31311C10.6583 6.11785 10.3417 6.11785 10.1464 6.31311L7.83333 8.62623L6.85355 7.64645C6.65829 7.45118 6.34171 7.45118 6.14645 7.64645C5.95118 7.84171 5.95118 8.15829 6.14645 8.35355L7.47978 9.68689C7.67504 9.88215 7.99162 9.88215 8.18689 9.68689L10.8536 7.02022Z" fill="#2ED15D"/>
+</svg>
--- a/assets/img/svg/main/triangle-grey.svg
+++ b/assets/img/svg/main/triangle-grey.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.75 5.25L1.25 2.75L6.25 2.75L3.75 5.25Z" fill="#999999"/>
+</svg>
--- a/assets/img/svg/main/vk-white.svg
+++ b/assets/img/svg/main/vk-white.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="14" viewBox="0 0 22 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9825 14C4.46596 14 0.178638 8.74474 0 0H3.76515C3.88882 6.41842 6.66459 9.13714 8.86321 9.6977V0H12.4085V5.53553C14.5796 5.2973 16.8607 2.77477 17.6302 0H21.1755C20.8855 1.43908 20.3075 2.80165 19.4776 4.0025C18.6477 5.20335 17.5837 6.21663 16.3523 6.97898C17.7269 7.67555 18.941 8.6615 19.9145 9.87175C20.888 11.082 21.5988 12.489 22 14H18.0974C17.7373 12.6876 17.0054 11.5128 15.9934 10.6228C14.9814 9.73284 13.7343 9.16727 12.4085 8.997V14H11.9825Z" fill="white"/>
+</svg>
--- a/assets/img/svg/main/white-x.svg
+++ b/assets/img/svg/main/white-x.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.62404 2.77566C3.38807 2.54301 3.00683 2.54436 2.77252 2.77867C2.53821 3.01299 2.53954 3.39154 2.77551 3.62419L6.90259 7.6933L2.77551 11.7624C2.53954 11.9951 2.53821 12.3736 2.77252 12.6079C3.00684 12.8422 3.38807 12.8436 3.62404 12.6109L7.75716 8.53587L11.8903 12.6109C12.1262 12.8436 12.5075 12.8422 12.7418 12.6079C12.9761 12.3736 12.9748 11.995 12.7388 11.7624L8.61173 7.6933L12.7388 3.62421C12.9748 3.39156 12.9761 3.01301 12.7418 2.77869C12.5075 2.54438 12.1262 2.54303 11.8903 2.77568L7.75716 6.85073L3.62404 2.77566Z" fill="white"/>
+</svg>
--- a/assets/img/svg/main/ya-white.svg
+++ b/assets/img/svg/main/ya-white.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="20" viewBox="0 0 14 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.1991 2.77628H8.65909C5.83576 2.77628 4.35076 4.20628 4.35076 6.31461C4.35076 8.69794 5.37742 9.81461 7.48576 11.2463L9.22742 12.4196L4.22242 19.8979H0.482422L4.97409 13.2079C2.39076 11.3563 0.940755 9.55794 0.940755 6.51628C0.940755 2.70294 3.59909 0.0996094 8.64076 0.0996094H13.6458V19.8796H10.1991V2.77628Z" fill="white"/>
+</svg>
--- a/assets/js/gp-cabinet.js
+++ b/assets/js/gp-cabinet.js
@@ -0,0 +1,67 @@
+'use strict';
+
+import * as fun from './_gp-function.js';
+
+let widthPhoneCabinet = 1200;
+
+fun.toggleOpenX('.cabinet-card__order', '.cabinet-card-order__open-detail', '.cabinet-card-order__detail', '.cabinet-card-order__block-detail');
+fun.modalFormOpen('.form-open');
+
+fun.closeModalForm('.modal-form__close');
+fun.closeModalForm('.modal-form__button-close');
+
+controlCabinet('.cabinet-control__button', '.cabinet', widthPhoneCabinet);
+
+function controlCabinet(buttons, main, minWidth){
+    let thisWidth = window.innerWidth;
+    let thisMain = document.querySelector(main);
+
+    let thisButtons = document.querySelectorAll(buttons);
+
+    thisButtons.forEach(e => {
+        e.onclick = function (element){
+            let thisContent = document.querySelector(`.cabinet__${e.dataset.cabinet}`);
+            let newHeight = thisContent.clientHeight + 48;
+            let thisButton = element.target;
+
+            thisMain.style.height = `${newHeight}px`
+
+            if (!thisContent.classList.contains('active')) {
+                thisMain.querySelector('.active').classList.remove('active');
+                thisContent.classList.add('active');
+
+                setTimeout(() => {
+                    thisMain.style.height = 'auto';
+
+                    if (thisMain.querySelector('.hide')) {
+                        thisMain.querySelector('.hide').classList.remove('hide');
+                    }
+
+                    thisMain.querySelector('.active').classList.add('hide');
+                }, 200);
+            }
+
+            thisButtons.forEach(e => {
+                e.classList.remove('active');
+            })
+            thisButton.classList.add('active');
+        }
+    })
+
+}
+
+let modal = document.querySelector('.modal');
+modal.onclick = function (eventModal) {
+    let thisTarget = eventModal.target;
+
+    if (thisTarget.classList.contains('modal')) {
+        thisTarget.classList.remove('active');
+
+        if (!thisTarget.querySelector('.modal-map.active')) {
+            thisTarget.querySelector('.modal-form.active').classList.remove('active');
+        }else{
+            thisTarget.querySelector('.modal-map.active').classList.remove('active');
+        }
+    }
+}
+
--- a/assets/js/gp-form.js
+++ b/assets/js/gp-form.js
@@ -0,0 +1,286 @@
+'use strict';
+
+
+inputPhone('.form-input__phone', '.form-input-phone__icon', '.form-input-phone__code', '.form-input-phone__input', '.form-input-phone__list', 'form-input-phone-list__item', '.form-input-phone-list-item__icon', '.form-input-phone-list-item__code', 'form-input-phone-list__search');
+
+function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon, selectCode, searchInput) {
+    let inputs = document.querySelectorAll(main);
+
+    inputs.forEach(e => {
+        let thisMainFlag = e.querySelector(mainFlag), 
+            thisMainCode  = e.querySelector(mainCode),
+            thisInput  = e.querySelector(input),
+            thisList  = e.querySelector(list),
+            thisSelects  = e.querySelectorAll(`.${selects}`),
+            thisSearchInput = e.querySelector(`.${searchInput}`);
+
+        thisInput.onblur = function (input) {
+            if (!(input.relatedTarget != null && (input.relatedTarget.classList.contains(searchInput) || input.relatedTarget.classList.contains(selects)))) {
+                thisList.classList.remove('active');                 
+            }
+        }
+
+        e.onclick = function (event) {
+            if (!event.target.classList.contains(searchInput)) {
+                if (thisList.classList.contains('active')) {
+                    thisList.classList.remove('active');
+                }
+
+                thisInput.focus();
+                thisList.classList.add('active');
+            }
+        }
+
+        thisSelects.forEach(e => {
+            let newIcon = e.querySelector(selectIcon),
+                newCode = e.querySelector(selectCode);
+
+            e.onclick = function (event) {
+                event.preventDefault();
+                thisMainFlag.style.cssText = `background-image:url("${newIcon.src}");`;
+                thisMainCode.textContent = newCode.textContent;
+                
+
+                setTimeout(() => {
+                    thisList.classList.remove('active');
+                }, 0);
+            }
+            
+        })
+    })
+}
+
+if (document.querySelector('.form-input-phone__input')) {
+    checkPhone('.form-input-phone__input');
+}
+
+function checkPhone(input) {
+    document.querySelector(input).addEventListener('input', function(event) {
+        let text = event.target.value;
+        let length = text.length;
+        let newSymbol = event.data;
+
+        if (!(/^\d+$/.test(text.replaceAll(' ', '')))) {
+            event.target.value = text.slice(0, -1);
+            return;
+        }
+
+        if (length == 4 || length == 8) {
+            if (newSymbol != null) {
+                event.target.value = text.slice(0, -1) + ' ' + newSymbol;
+            }
+        }
+    })
+}
+
+inputTabs('.form-input__tabs', '.form-input-tabs__button');
+inputTabs('.modal-map__control', '.modal-map-control__item');
+
+function inputTabs(main, button) {
+    let mains = document.querySelectorAll(main);
+
+    mains.forEach(main => {
+        let buttons = main.querySelectorAll(button);
+
+        buttons.forEach(button => {
+            button.onclick = function () {
+                if (button.classList.contains('active')) {
+                    return ;
+                }
+
+                main.querySelector('.active').classList.remove('active');
+
+                button.classList.add('active');
+
+                if (button.querySelector('input')){
+                    button.querySelector('input').click();
+                } 
+            }
+        })
+        
+    })
+}
+
+
+inputRadio('.form-input__radio', '.form-input-radio__item', '.form-input-radio__title', '.form-input-radio__input')
+
+function inputRadio(main ,item, textClass, input) {
+    let inputRadios = document.querySelectorAll(main);
+
+    inputRadios.forEach(inputRadio => {
+        let items = inputRadio.querySelectorAll(item),
+            thisInput = inputRadio.querySelector(input);
+
+        items.forEach(radio => {
+            let thisText = radio.querySelector(textClass).textContent;
+
+            radio.onclick = function (event) {
+                event.preventDefault();
+
+                if (inputRadio.querySelector(`${item}.active`)) {
+                    inputRadio.querySelector(`${item}.active`).classList.remove('active');
+                }
+                thisInput.value = thisText;
+                radio.classList.add('active');
+            }
+        })
+    })
+}
+
+listInputRadio('.form-input__list' ,'.form-input-list__item', '.form-input-list-item__text', '.form-input-list__input', '.form-input-list__content', '.form-input-list__block-content');
+
+function listInputRadio(main ,item, textClass, input, content, block) {
+    let listInputRadios = document.querySelectorAll(main);
+
+    listInputRadios.forEach(listInputRadio => {
+        let thisInput = listInputRadio.querySelector(input),
+            items = listInputRadio.querySelectorAll(item),
+            thisContent = listInputRadio.querySelector(content),
+            thisBlock = listInputRadio.querySelector(block);
+
+        thisInput.onclick = function () {
+            thisBlock.classList.add('active');
+            thisBlock.style.height = '192px';
+        }
+
+
+        thisInput.onblur = function(){
+            thisBlock.classList.remove('active');
+            thisBlock.style.height = '0px';
+        };
+
+        items.forEach(item => {
+            item.onclick = function (event) {
+                event.preventDefault();
+                let newText = item.querySelector(textClass).textContent;
+
+                thisInput.value = newText;
+                
+                if (thisContent.querySelector('.active')) {
+                    thisContent.querySelector('.active').classList.remove('active');
+                }
+
+                item.classList.add('active');
+            }
+        })
+    })
+}
+
+remoteControl('.form-input__remote-control', '.form-input-tabs__button');
+remoteControl('.modal-map__control', '.modal-map-control__item');
+
+function remoteControl(main, button) {
+    let mains = document.querySelectorAll(main);
+
+    mains.forEach(main => {
+        let subjectClass = main.dataset.content,
+            subject  = document.querySelector(`.${subjectClass}`),
+            buttons = Array.from(main.querySelectorAll(button));
+
+        main.addEventListener('click', function (eventMain) {
+            setTimeout(() => {
+                let indexActive = buttons.findIndex((button, index) => {
+                    if (button.classList.contains('active')) {
+                        return true;
+                    }
+                });
+                if(subject.children[indexActive].classList.contains('active')){
+                    return ;
+                }
+                
+                subject.querySelector('.remote-control__item.active').classList.remove('active');
+                subject.children[indexActive].classList.add('active');
+
+                let mandatorys = subject.querySelectorAll('.mandatory');
+
+                mandatorys.forEach(mandatory => {
+                    if (mandatory.required) {
+                        mandatory.required = false;
+                    }else{
+                        mandatory.required = true;
+                    }
+                })
+            }, 0);
+        })
+    })
+}
+
+formCheck('.modal-form__content', 'input[type=submit]');
+formCheck('.modal-map__form', 'input[type=submit]');
+
+function formCheck(form, submit) {
+    let forms = document.querySelectorAll(form);
+
+    forms.forEach(form => {
+        let thisSubmit = form.querySelector(submit);
+
+        thisSubmit.onclick = function () {
+            form.classList.add('check')
+        }
+        
+    })
+}
+
+inputPhoneNoFlag('.no-flag');
+
+function inputPhoneNoFlag(input){
+    let inputs = document.querySelectorAll(input);
+
+    inputs.forEach(input => {
+        let code = '+' + input.dataset.code;
+        
+        input.onfocus = function () {
+            if (input.value == '') {
+                input.value = code;
+            }
+        }
+
+        input.addEventListener('input', function(event) {
+            let text = event.target.value;
+            let length = text.length;
+            let newSymbol = event.data;
+
+            if (isNaN(event.data) || event.data == ' ') {
+                event.target.value = text.slice(0, -1);
+                return;
+            }
+
+            if (length == 3 || length == 7 || length == 11) {
+                if (newSymbol != null) {
+                    event.target.value = text.slice(0, -1) + ' ' + newSymbol;
+                }
+            }
+            
+        })
+    })
+}
+
+
+inputCheck('.form-agreement__check');
+
+function inputCheck(className) {
+    let checks = document.querySelectorAll(className);
+
+    checks.forEach(check => {
+        let square = check.querySelector('.form-agreement__square'),
+            input = check.querySelector('input');
+
+        square.onclick = function () {
+            input.click();   
+        }
+    })
+}
+
+
+inputRead('.input-read');
+function inputRead(className) {
+    let inputs = document.querySelectorAll(className);
+
+    inputs.forEach(input => {
+        input.addEventListener("input", function (event) {
+            let text = event.target.value;
+
+            event.target.value = text.slice(0, -1);            
+        })
+    })
+}
--- a/assets/js/gp-function.js
+++ b/assets/js/gp-function.js
@@ -0,0 +1,156 @@
+'use strict';
+
+// function
+export 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);
+        }
+    })
+}
+
+export 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);
+        }
+    })
+}
+
+export function closeModalForm(close){
+    let buttons = document.querySelectorAll(close),
+        modal = document.querySelector('.modal');
+
+    buttons.forEach(button => {
+        button.onclick = function (buttonEvent) {
+            modal.classList.remove('active');
+            
+            if (!modal.querySelector('.modal-map.active')) {
+                modal.querySelector('.modal-form.active').classList.remove('active');
+            }else{
+                modal.querySelector('.modal-map.active').classList.remove('active');
+            }
+        }
+    })
+}
+
+export 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');
+            }
+        }
+        
+    });
+}
+
+export function toggleHeader(button, content, blockheight, removeBlock, removeClass) {
+    let thisButton = document.querySelector(button), 
+        thisContent = document.querySelector(content),
+        thisRemoveBlock = document.querySelector(removeBlock) || '',
+        thisBlockheight = document.querySelector(blockheight);
+
+    thisButton.onclick = function () {
+        let height = thisBlockheight.clientHeight;
+
+        if (!thisContent.classList .contains('open')) {
+            thisContent.style.height = `${height}px`;
+            thisContent.classList .add('open');
+
+            if (removeBlock) {
+                thisRemoveBlock.classList.remove(removeClass);
+            }
+        }else{
+            thisContent.style.height = null;
+            thisContent.classList .remove('open');
+
+            if (removeBlock) {
+                if (window.scrollY <= 25) {
+                    thisRemoveBlock.classList.add(removeClass);
+                }
+            }
+        }
+    }
+}
+
+export function modalFormOpen(formOrNotification) {
+    let buttons = document.querySelectorAll(formOrNotification),
+        modal = document.querySelector('.modal');
+
+    buttons.forEach(button => {
+        button.onclick = function (eventButton) {
+            let classOpenForm = button.dataset.form,
+                form = modal.querySelector(`.${classOpenForm}`);                
+
+            form.classList.add('active');
+            modal.classList.add('active');
+        }
+    })
+}
+// function
--- a/assets/js/gp-main.js
+++ b/assets/js/gp-main.js
@@ -2,15 +2,35 @@

 // 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');
+toggleHeader('#pc-menu','.header__menu-block','.header__pc-menu', '.white', 'white');
+toggleHeader('#phone-menu','.header__menu-block','.header__phone-menu', '.white', 'white');
 // header 

-// media
+// modal
 modalOpen('.button--filter', '.modal__filter');
 modalOpen('.basket-open', '.modal__basket');
+modalOpen('.open-to-know', '.modal__to-know');
 modalClose('.modal__close');
-// media
+
+let modal = document.querySelector('.modal');
+
+modal.onclick = function (event) {
+    let target = event.target;
+
+    if (target.classList.contains('modal')) {
+        let aside = target.querySelector('.modal__aside'),
+            modalItem = target.querySelector('.modal__item.active');
+
+            aside.style.width = '0px';
+            setTimeout(() => {
+                modalItem.style.cssText = '';
+                modalItem.classList.remove('active');
+                target.classList.remove('active');
+            }, 300);
+    }
+}
+
+// modal

 // toggle
 toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true);
@@ -79,9 +99,10 @@ toggleOpenX('.select', '.select__state' , '.state__content', '.state__block', tr

 let selects = document.querySelectorAll('.select');

-selects.forEach(e => {
-    let state = e.querySelector('.select__state'),
-        buttons = e.querySelectorAll('.state__button');
+selects.forEach(select => {
+    let state = select.querySelector('.select__state'),
+        content = select.querySelector('.state__block'),
+        buttons = select.querySelectorAll('.state__button');
        
    buttons.forEach(e => {
        let button = e;
@@ -99,6 +120,8 @@ selects.forEach(e => {
            state.value = text;

            button.classList.add('active');
+            content.style.height = 0;
+            select.classList.remove('active');
        }        
    })
 })
@@ -245,9 +268,10 @@ function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement,
    });
 }

-function singleToggleOpenX(button, content, blockheight) {
+function toggleHeader(button, content, blockheight, removeBlock, removeClass) {
    let thisButton = document.querySelector(button), 
        thisContent = document.querySelector(content),
+        thisRemoveBlock = document.querySelector(removeBlock) || '',
        thisBlockheight = document.querySelector(blockheight);

    thisButton.onclick = function () {
@@ -256,67 +280,69 @@ function singleToggleOpenX(button, content, blockheight) {
        if (!thisContent.classList .contains('open')) {
            thisContent.style.height = `${height}px`;
            thisContent.classList .add('open');
+
+            if (removeBlock) {
+                thisRemoveBlock.classList.remove(removeClass);
+            }
        }else{
            thisContent.style.height = null;
            thisContent.classList .remove('open');
+
+            if (removeBlock) {
+                if (window.scrollY <= 25) {
+                    thisRemoveBlock.classList.add(removeClass);
+                }
+            }
        }
    }
 }
-
-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',
-            },
-        });
-         
-    }
-}
-
+// function

 // resize
 window.addEventListener('resize', (e) => {
+    let width = window.screen.width;
+
    // media
    modalOpen('.button--filter', '.modal__filter');
    modalOpen('.basket-open', '.modal__basket');
+    modalOpen('.open-to-know', '.modal__to-know');
    modalClose('.modal__close');
+    
+    let modalItem = document.querySelectorAll('.modal__item');
+
+    // if (width <= 720) {
+        modalItem.forEach(modal => {
+            if (modal.classList.contains('active')) {
+                let aside = document.querySelector('.modal__aside');
+
+                if (width <= 720) {
+                    aside.style.width = `${width}px`
+                }else{
+                    let openAside = document.querySelector('.modal__item.active'),
+                        newWidth = openAside.clientWidth;
+
+                    aside.style.width = `${newWidth}px`
+                }
+            }
+        })
+    // }
 });
 // 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')
-    }
-    
-});
+
+
+if (document.querySelector('.header').classList.contains('white')) {
+    window.addEventListener("scroll", function (e) {
+        let header = document.querySelector('.header');
+        let scroll = window.scrollY;
+        
+        if (scroll >= 25) {
+            header.classList.remove('white')
+        }else{
+            header.classList.add('white')
+        }
+        
+    });
+}
 // scroll
--- a/assets/js/gp-product.js
+++ b/assets/js/gp-product.js
@@ -97,10 +97,10 @@ const detailCatalot = new Swiper('.detail__catalot', {
            slidesPerView: 3,
        },
        780: {
-            slidesPerView: 2.2,
+            slidesPerView: 2,
        },
        100: {
-            slidesPerView: 1.3,
+            slidesPerView: 1.1,
            spaceBetween: 20
        },
    }
--- a/assets/js/tabs.js
+++ b/assets/js/tabs.js
@@ -0,0 +1,67 @@
+const rootSelectorTabs = '[data-js-tabs]';
+
+class Tabs{
+    // элементы для поиска
+    selectors = {
+        root: rootSelectorTabs,
+        button: '[data-js-tabs-button]',
+        content: '[data-js-tabs-content]',
+    }
+    // класс отображения состояния
+    stateClasses = {
+        isActive: 'active',
+    }
+
+    constructor(rootElement){
+        this.rootElement = rootElement;
+        this.buttonElements = this.rootElement.querySelectorAll(this.selectors.button);
+        this.contentElements = this.rootElement.querySelectorAll(this.selectors.content);
+        this.state = {
+            activeMenuIndex: [...this.buttonElements]
+                .findIndex((buttonElement) => buttonElement.classList.contains(this.stateClasses.isActive)),
+        };
+        this.limitTabsIndex = this.buttonElements.length - 1;
+        this.bindEvents();
+    }
+
+    updateUI(){
+        const { activeMenuIndex } = this.state;
+
+        this.buttonElements.forEach((buttonElement, index) => {
+            const isActive = index === activeMenuIndex;
+
+            buttonElement.classList.toggle(this.stateClasses.isActive, isActive);
+        })
+
+        this.contentElements.forEach((contentElement, index) => {
+            const isActive = index === activeMenuIndex;
+
+            contentElement.classList.toggle(this.stateClasses.isActive, isActive);
+        })
+    }
+
+    onButtonClick(buttonIndex){
+        this.state.activeMenuIndex = buttonIndex;
+        this.updateUI();
+    }
+
+    bindEvents(){
+        this.buttonElements.forEach((buttonElement, index) => {
+            buttonElement.addEventListener('click', () => this.onButtonClick(index))
+        })
+    }
+}
+
+class TabsCollection {
+    constructor(){
+        this.init();
+    }
+
+    init(){
+        document.querySelectorAll(rootSelectorTabs).forEach((element) => {
+            new Tabs(element);
+        });
+    }
+}
+
+export default TabsCollection;
--- a/assets/js/toggle.js
+++ b/assets/js/toggle.js
@@ -0,0 +1,89 @@
+const rootSelectorToggles = '[data-js-toggle]';
+
+class Toggle{
+    // элементы для поиска
+    selectors = {
+        root: rootSelectorToggles,
+        button: '[data-js-toggle-button]',
+        wrapper: '[data-js-toggle-wrapper]',
+        content: '[data-js-toggle-content]',
+    }
+    // класс отображения состояния
+    stateClasses = {
+        isActive: 'active',
+    }
+
+    constructor(rootElement){
+        this.rootElement = rootElement;
+        this.buttonElements = this.rootElement.querySelectorAll(this.selectors.button);
+        this.wrapperElements = this.rootElement.querySelectorAll(this.selectors.wrapper);
+        this.contentElements = this.rootElement.querySelectorAll(this.selectors.content);
+        this.state = {
+            activeToggleIndex: [...this.buttonElements]
+                .findIndex((buttonElement) => buttonElement.classList.contains(this.stateClasses.isActive)),
+        };
+        this.bindEvents();
+    }
+
+    updateUI(newHeight){
+        const { activeToggleIndex } = this.state;
+
+        this.buttonElements.forEach((buttonElement, index) => {
+            const isActive = index === activeToggleIndex;
+
+            buttonElement.classList.toggle(this.stateClasses.isActive, isActive);
+        })
+
+        this.wrapperElements.forEach((wrapperElement, index) => {
+            const isActive = index === activeToggleIndex,
+                  newHeight = this.contentElements[index].offsetHeight;
+
+            wrapperElement.classList.toggle(this.stateClasses.isActive, isActive);
+
+            if (isActive) {
+                wrapperElement.style.height = `${newHeight}px`;
+
+                setTimeout(() => {
+                    if (wrapperElement.classList.contains('active')) {
+                        wrapperElement.style.height = `auto`;
+                    }
+                }, 300);
+            }else{
+                wrapperElement.style.height = `${newHeight}px`;
+
+                setTimeout(() => {
+                    if (!wrapperElement.classList.contains('active')) {
+                        wrapperElement.style.height = `${0}px`;
+                    }
+                }, 10);
+            }
+        })
+
+    }
+
+    onButtonClick(buttonIndex){
+        this.state.activeToggleIndex = (buttonIndex === this.state.activeToggleIndex) ? -1 : buttonIndex;
+
+        this.updateUI();
+    }
+
+    bindEvents(){
+        this.buttonElements.forEach((buttonElement, index) => {
+            buttonElement.addEventListener('click', () => this.onButtonClick(index))
+        })
+    }
+}
+
+class TogglesCollection{    
+    constructor(){
+        this.init();
+    }
+
+    init(){
+        document.querySelectorAll(rootSelectorToggles).forEach((element) => {
+            new Toggle(element);
+        });
+    }
+}
+
+export default TogglesCollection;
--- a/catalog-error.html
+++ b/catalog-error.html
--- a/catalog.html
+++ b/catalog.html
--- a/del.html
+++ b/del.html
@@ -1,12 +0,0 @@
-<!-- Пример формы для отправки в Телеграмм (обработчик send-telegram.php) -->
-<form class="form" method="post" action="/send-telegram.php">
-    <div class="form__item">
-        <input class="form__input" type="text" name="name" required>
-        <label class="form__label">Ваше имя</label>
-    </div>
-    <div class="form__item">
-        <input class="form__input" type="text" name="phone" required>
-        <label class="form__label">Номер телефона</label>
-    </div>
-    <input class="form__input btn" type="submit" value="Отправить">
-</form>
--- a/index.html
+++ b/index.html
--- a/modal-basket.html
+++ b/modal-basket.html
--- a/new.html
+++ b/new.html
--- a/notification.html
+++ b/notification.html
--- a/order.html
+++ b/order.html
--- a/product.html
+++ b/product.html
--- a/registration.html
+++ b/registration.html
--- a/subscription-first.html
+++ b/subscription-first.html
--- a/subscription-last.html
+++ b/subscription-last.html
--- a/subscription-order.html
+++ b/subscription-order.html
--- a/ui_kit.html
+++ b/ui_kit.html
@@ -5,7 +5,7 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UI kit</title>
-    <link rel="stylesheet" type="text/css" href="/assets/css/gp-style-core.css">
+    <link rel="stylesheet" type="text/css" href="assets/css/gp-style-core.css">
 </head>
 <style>
    /* Стили для выравнивания UI-элеметнов для данной страницы */
@@ -172,6 +172,6 @@
        </div>
    </div> -->

-    <script src="/assets/js/gp-main.js"></script>
+    <script src="assets/js/gp-main.js"></script>
 </body>
 </html>
Author	SHA1	Message	Date
Kirill Pet	f6f7f585e1	fix inputTabs	2025-05-05 14:26:59 +03:00
Kirill Pet	ac54f2e381	сделал правки для subscription-order	2025-05-03 20:53:17 +03:00
Kirill Pet	6ead69e180	удалил toggle на стрицых подписки	2025-05-03 20:24:53 +03:00
Kirill Pet	f3eedee26f	добавил js	2025-05-02 16:56:48 +03:00
Kirill Pet	ec60360db1	сделал основу	2025-05-02 16:41:59 +03:00
Kirill Pet	459a7ca86e	добавил ссылки управления	2025-05-02 16:32:34 +03:00
Kirill Pet	be438d43d2	сделал адаптивность подписок	2025-05-02 16:12:15 +03:00
Kirill Pet	e3e8e3a187	добавление маркера для toggle	2025-05-02 15:02:08 +03:00
Kirill Pet	27167fbec2	сделал подписку + js	2025-05-02 14:56:37 +03:00
Kirill Pet	44d75a05e3	обновил форму	2025-05-01 18:49:44 +03:00
Kirill Pet	288265bca3	собрал форму	2025-05-01 18:45:09 +03:00
Kirill Pet	4047de51bf	собрал первую страницу	2025-05-01 18:36:28 +03:00
Kirill Pet	224c9254e8	fix 19.11	2024-11-19 18:55:44 +03:00
Kirill Pet	767d40f248	fix 18.11	2024-11-18 17:26:46 +03:00
Kirill Pet	01e6e988e5	fix 17.11	2024-11-17 22:44:34 +03:00
Kirill Pet	c344dbcd43	fix 16.11	2024-11-16 17:50:55 +03:00
Kirill Pet	fe7909e9cc	сделал адаптивность order	2024-11-15 23:31:45 +03:00
Kirill Pet	4a3e166d19	fix js remoteControl	2024-11-15 21:38:10 +03:00
Kirill Pet	a69899b2be	сверстал две вариации order	2024-11-15 21:01:36 +03:00
Kirill Pet	2c3f548e83	save order	2024-11-14 19:15:48 +03:00
Kirill Pet	c48ab5bc5f	fix багов	2024-10-31 15:27:16 +03:00
Kirill Pet	38a8eb5f1f	переделал переключение в "Возраст питомца"	2024-10-31 14:37:05 +03:00
Kirill Pet	615ec2ff91	переделал логику на tabs	2024-10-31 13:42:31 +03:00
Kirill Pet	f662641ca8	fix всего кроме кнопок с label	2024-10-31 13:08:03 +03:00
Kirill Pet	fa143ef289	fix js	2024-10-29 12:48:54 +03:00
Kirill Pet	3add6ebc02	fix modal	2024-10-28 19:55:42 +03:00
Kirill Pet	c9611bf3d2	fix открытие/закрытие form/notification	2024-10-28 19:49:06 +03:00
Kirill Pet	19cd9dfc68	fix открытие cabinet__orders	2024-10-28 16:09:02 +03:00
Kirill Pet	f42d7d486c	save	2024-10-28 15:54:24 +03:00
Kirill Pet	d9907a0ccd	save	2024-10-28 15:52:23 +03:00
Kirill Pet	928d5c1ffa	fix закрытие input с выподающими списками	2024-10-28 14:34:52 +03:00
Kirill Pet	e6bccc904f	fix registration	2024-10-28 13:05:11 +03:00
Kirill Pet	003bff1fbb	fox уведомлений, сделал по центру	2024-10-28 11:40:42 +03:00
Kirill Pet	0911744f6f	сделал map	2024-10-25 12:51:06 +03:00
Kirill Pet	b5879bd12e	доделал формы	2024-10-25 05:32:05 +03:00
Kirill Pet	148d2c12cb	собрал две формы	2024-10-25 05:18:05 +03:00
Kirill Pet	7ca7790b8f	закончил inputs	2024-10-25 04:17:25 +03:00
Kirill Pet	d5ea9b0a34	сделал переключение в кабинете	2024-10-24 17:42:32 +03:00
Kirill Pet	e0cc1b1e0c	сделал адаптив для регистрации, осталось сделать переключение заказы/профиль	2024-10-24 00:48:05 +03:00
Kirill Pet	469a231256	адаптивность кабинета	2024-10-24 00:20:41 +03:00
Kirill Pet	bc0c849ccd	сделал модальные окна без форм	2024-10-23 22:53:45 +03:00
Kirill Pet	7979a4da6c	сделал верстку карточки товара для пк	2024-10-23 19:33:21 +03:00
Kirill Pet	094e94ad7d	сделал кабинент зарегистрированного пользователя	2024-10-23 18:44:16 +03:00
Kirill Pet	2e065c9e45	сделал левую часть в регистрации (для пк)	2024-10-22 20:16:26 +03:00
Kirill Pet	468bcd8f9e	fix 11	2024-10-11 11:38:00 +03:00
Kirill Pet	cb965a5877	правки 11	2024-10-11 11:24:44 +03:00
Kirill Pet	d66bfc0c97	fix 10.2	2024-10-10 20:56:41 +03:00
Kirill Pet	06da7083bc	fix header js	2024-10-10 19:56:49 +03:00
Kirill Pet	375c82ddce	fix header white при открытии меню	2024-10-10 19:51:48 +03:00
Kirill Pet	93c2f012f1	внесение правок 10	2024-10-10 18:18:36 +03:00
Kirill Pet	62a3e97a7b	fix modal__to-know	2024-10-09 23:45:53 +03:00
Kirill Pet	0b118946f8	save	2024-10-09 23:36:35 +03:00
Kirill Pet	ee5a3d5a7e	внесение правок	2024-10-09 23:24:11 +03:00
Anton.AE	863ed65646	change sassets include url	2024-10-09 09:31:19 +00:00