fix inputTabs

assets/css/gp-style-core.css

@@ -13,6 +13,10 @@
 400 - Regular
 */
 
+a{
+  cursor: pointer;
+}
+
 /* Craftwork Grotesk */
 @font-face {
     font-family: "Craftwork Grotesk";
@@ -105,6 +109,7 @@
     --text-0: #000;
     --text-3: #333;
     --text-6: #666;
+    --text-9: #999;
 
     /* background */
     --background-white: #fff;
@@ -304,7 +309,7 @@ button{
 .main-menu__item:hover{
   opacity: .8;
 
-  background: #f2f2f2;
+  background: var(--background-grey);
   border-radius: 24px;
 }
 .header.white .main-menu__item:hover .main-menu__link{
@@ -402,10 +407,19 @@ button{
 .form__input::placeholder{
   color: var(--text-grey);
 }
+.form__input--grey{
+  border-color: var(--background-9);
+}
 .form__input--textarea{
   height: 96px;
   resize: none;
 }
+.form__input--textarea-72{
+  height: 72px;
+  resize: none;
+
+  overflow: hidden;
+}
 .form__input--center{
   text-align: center;
 }
@@ -704,6 +718,14 @@ button{
 
   position: relative;
 }
+.form-input__tabs--white{
+  padding: 3px;
+  border: 1px solid var(--text-3);
+  background: var(--white);
+}
+.form-input__tabs--white .form-input-tabs__button.active{
+  background: var(--gradient-turquoise);
+}
 .form-input-tabs__button{
   width: 100%;
 
@@ -786,6 +808,21 @@ button{
   line-height: 120%;
   color: var(--text-dark);
 }
+.form-input-radio__title.form-input-radio__title--no-span span{
+  color: var(--text-dark);
+}
+.form-input-radio__price{
+  margin-left: auto;
+
+  font-family: var(--font-family);
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-black);
+}
+.form-input-radio__price::after{
+  content: ' ₽';
+}
 .form-input-radio__input{
   display: none;
 }
@@ -912,8 +949,61 @@ button{
 .form-input-list__item.active .form-input-list-item-box__content{
   background: var(--gradient-blue);
 }
-
+.remote-control__item{
+  display: none;
+}
+.remote-control__item.active{
+  display: block;
+}
 /* .form-input-radio__ */
+
+.form-agreement{
+  display: flex;
+}
+.form-agreement__check{
+  display: flex;
+  align-items: center;
+}
+.form-agreement__square{
+  width: 18px;
+  aspect-ratio: 1;
+
+  border-radius: 4px;
+
+  border: 2px solid var(--background-black);
+}
+.form-agreement__label{
+  margin-left: 8px;
+
+  font-family: var(--font-family);
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-black);
+}
+.form-agreement__input{
+  display: none;
+}
+.form-agreement__input:checked + .form-agreement__square{
+  border: none;
+  background: var(--gradient-blue);
+
+  position: relative;
+}
+.form-agreement__input:checked + .form-agreement__square::after{
+  content: '';
+
+  position: absolute;
+  top: 1px;
+  left: 1px;
+
+  width: 16px;
+  aspect-ratio: 1;
+
+  background-image: url(../img/svg/main/arrow-selected-white.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+}
 /* form */
 
 
@@ -1120,7 +1210,7 @@ button{
   border-radius: 48px;
 }
 .to-know{
-  width: 100%;
+  /* width: 100%; */
 
   padding: 12px 24px 7px 24px;
 
@@ -1132,6 +1222,12 @@ button{
   transition: opacity .2s ease-out;
   text-decoration: none;
 }
+
+.to-know--start{
+  justify-content: start;
+  padding-left: 0;
+}
+
 .to-know:hover{
   opacity: .8;
 }
@@ -1533,7 +1629,7 @@ button{
 
   display: flex;
 
-  border-top: 1px solid #f2f2f2;
+  border-top: 1px solid var(--background-grey);
 
   position: relative;
 }
@@ -1684,6 +1780,9 @@ button{
 .modal-form--width-584{
   width: 584px;
 }
+.modal-form--cdek{
+  width: 836px;
+}
 .modal-form__close{
   position: absolute;
   top: 24px;
@@ -1700,6 +1799,8 @@ button{
   background-position: center;
 
   transition: opacity .2s ease-out;
+
+  z-index: 10;
 }
 .modal-form__close--white{
   background-image: url(../img/svg/main/white-x.svg);
@@ -1775,9 +1876,30 @@ button{
   display: flex;
   justify-content: space-between;
 }
+.modal-form-content__line--two-mobile{
+  display: flex;
+  justify-content: space-between;
+}
+.modal-form-content__line--two-mobile .modal-form-content-line__element{
+  width: calc(50% - 12px);
+}
 .modal-form-content-line__element{
   position: relative;
 }
+.modal-form-content-line__element--arrow::after{
+  content: '';
+
+  position: absolute;
+  right: 16px;
+  bottom: 16px;
+
+  width: 16px;
+  height: 16px;
+
+  background-image: url(../img/svg/main/arrow-right-input.svg);
+
+  pointer-events: none;
+}
 .modal-form-content__line--two .modal-form-content-line__element{
   width: calc(50% - 12px);
 }
@@ -1842,6 +1964,9 @@ button{
 
   display: flex;
 }
+.modal-map__control--delivery{
+  margin-top: 12px;
+}
 .modal-map-control__item{
   margin: 12px;
 
@@ -1885,6 +2010,9 @@ button{
   background: var(--background-9);
   position: relative;
 }
+.modal-map-control-item__input{
+  display: none;
+}
 .modal-map-control-item-circle__content{
   width: 16px;
   aspect-ratio: 1;
@@ -1943,7 +2071,7 @@ button{
   
 }
 .modal-map-form__button{
-  margin-top: 88px;
+  margin-top: 83px;
 }
 .modal-map-form__sub-button{
   display: none;
@@ -2138,3 +2266,96 @@ button{
     opacity: 1;
   }
 }
+
+.subscription{
+  
+}
+.subscription__item{
+  display: flex;
+
+  color: var(--text-black);
+  font-family: var(--font-family);
+  font-weight: 500;
+  line-height: 120%;
+}
+.subscription__item:nth-last-child(n + 2){
+  border-bottom: 1px solid var(--background-9);
+}
+.subscription__item span{
+  font-weight: 700;
+}
+.subscription__item span small{
+  font-size: 16px;
+}
+.subscription__status{
+  color: var(--text-black);
+}
+.subscription__status--close{
+  color: var(--text-red);
+}
+.subscription__status--end{
+  color: var(--text-green);
+}
+.subscription__add{
+  width: 100%;
+}
+.subscription__add-header{
+}
+.subscription__add-product{
+  align-items: start;
+}
+.subscription__add-product > *:not(:first-child){
+  padding-top: 14px;
+}
+.subscription__add-title{
+  font-family: var(--font-family);
+  font-weight: 600;
+  line-height: 133%;
+}
+.subscription__add-content{
+
+}
+
+.tabs__buttons{
+  margin: -12px;
+
+  display: flex;
+  flex-wrap: wrap;
+}
+.tabs__content-wrap{
+  margin-top: 24px;
+}
+.tabs__content{
+  display: none;
+}
+.tabs__content.active{
+  display: block;
+}
+
+.cabinet__control--column{
+  flex-direction: column;
+}
+
+.cabinet__control--column > *:not(:first-child){
+  margin-top: 16px
+}
+
+.cabinet-card-order__payment{
+
+}
+.cabinet-card-order__sub-title{
+  font-family: var(--font-family);
+  font-weight: 600;
+  line-height: 143%;
+  color: var(--text-3);
+}
+.cabinet-card-order__date{
+  font-family: var(--font-family);
+  font-weight: 700;
+  line-height: 125%;
+  color: var(--text-3);
+}
+
+.cabinet-card-order-payment__price span{
+  font-size: 12px;
+}

assets/css/gp-style-desktop.css

@@ -248,7 +248,6 @@
     font-weight: 500;
     font-size: 16px;
     line-height: 125%;
-    color: #121212;
     color: var(--text-black);
 
     text-decoration: none;
@@ -892,7 +891,6 @@ main{
   font-size: 36px;
   line-height: 111%;
   text-transform: uppercase;
-  color: #121212;
 }
 .detail-block-price__price::after{
   content: '₽';
@@ -1714,6 +1712,9 @@ main{
   margin-left: 5px;
   content: '₽';
 }
+.cabinet-card-order-payment__price--add::after{
+  display: none;
+}
 .cabinet-card-order__content{
   margin-top: 24px;
 }
@@ -1911,6 +1912,17 @@ main{
 .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{
 }
@@ -1947,13 +1959,50 @@ main{
   
 }
 
+.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%;
+}

assets/css/gp-style-mobile.css

@@ -204,6 +204,9 @@
 .cabinet-card__content{
     padding-right: 19px;
 }
+.cabinet-card-order-main__date{
+    font-size: 20px;
+}
 /* .cabinet-card__order.active */
 /* .cabinet-card__order.active */
 /* cabinet */
@@ -267,3 +270,67 @@
 }
 /* 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;
+    }
+}
+

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;
+}
+}

assets/css/gp-style-tablet.css

@@ -190,13 +190,13 @@ main{
 }
 .cabinet__orders.active, .cabinet__profile.active{
     opacity: 1;
-
-    width: 100%;
 }
 .cabinet__orders.hide, .cabinet__profile.hide{
     position: static;
     display: block;
     pointer-events:auto;
+
+    width: 100%;
 }
 .cabinet__subscription-pc{
     display: none;
@@ -209,6 +209,9 @@ main{
 .cabinet__orders .cabinet-card:nth-child(2){
     margin-top: 0;
   }
+  .cabinet__orders--no-cab .cabinet-card:nth-child(2){
+    margin-top: 32px;
+  }
 /* cabinet */
 }
 
@@ -338,5 +341,8 @@ main{
 .cabinet-card__order.active .cabinet-card-order__open-detail{
     margin-top: 24px;
 }
+.cabinet-card-order__link{
+    margin-top: 144px;
+}
 /* cabinet */
 }

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>

assets/js/gp-form.js

@@ -74,6 +74,7 @@ function checkPhone(input) {
 }
 
 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);
@@ -83,9 +84,17 @@ function inputTabs(main, 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();
+                } 
             }
         })
         
@@ -158,6 +167,7 @@ function listInputRadio(main ,item, textClass, input, content, block) {
 }
 
 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);
@@ -167,19 +177,110 @@ function remoteControl(main, button) {
             subject  = document.querySelector(`.${subjectClass}`),
             buttons = Array.from(main.querySelectorAll(button));
 
-            
-
-        main.addEventListener('mousedown', function (eventMain) {
+        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('.active').classList.remove('active');
+                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);            
+        })
+    })
+}

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;

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;

new.html

@@ -224,7 +224,204 @@
             </div>
         </header>
 
+        <main>
+            <div class="form-input__tabs">
+                <label for="boy" class="form-input-tabs__button">
+                    Мальчик
+                    <input type="radio" ed="" name="floor" id="boy" class="form-input-tabs__input">
+                </label>
     
+                <label for="girl" class="form-input-tabs__button active">
+                    Девочка
+                    <input type="radio" name="floor" id="girl" class="form-input-tabs__input">
+                </label>
+            </div>
+
+            <div class="cabinet__profile cabinet-content">
+                <div class="cabinet-card cabinet-card--green">
+                    <div class="cabinet-card__content">
+                        <div class="cabinet-card__element">
+                            <p class="cabinet-card__text cabinet-card__text--grey">Имя и фамилия  не указано</p>
+                        </div>
+
+                        <div class="cabinet-card__element">
+                            <p class="cabinet-card__label">Телефон:</p>
+                            <p class="cabinet-card__text cabinet-card__text--grey">Не заполнено</p>
+                        </div>
+
+                        <div class="cabinet-card__element">
+                            <p class="cabinet-card__label">Почта:</p>
+                            <p class="cabinet-card__text">example@example.com</p>
+                            <!-- <p class="cabinet-card__status cabinet-card__status--chek">Почта подтверждена</p> -->
+                            <p class="cabinet-card__status cabinet-card__status--cancelled">Почта не подтверждена</p>
+                            <button class="cabinet-card__confirm">
+                                Подтвердить
+                            </button>
+                        </div>
+
+                        <div class="cabinet-card__element">
+                            <p class="cabinet-card__label">Связанные аккаунты:</p>
+                            <div class="cabinet-card__block-accounts">
+                                <div class="cabinet-card__account">
+                                    <img src="assets/img/svg/main/google-white.svg" alt="">
+                                </div>
+                                <div class="cabinet-card__account">
+                                    <img src="assets/img/svg/main/vk-white.svg" alt="">
+                                </div>
+                                <div class="cabinet-card__account">
+                                    <img src="assets/img/svg/main/ya-white.svg" alt="">
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="cabinet-card__element">
+                            <div class="cabinet-card__block-buttons">
+                                <button class="cabinet-card__button form-open" data-form="form-data">
+                                    Изменить
+                                </button>
+
+                                <button class="cabinet-card__button">
+                                    Выйти
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="cabinet-card cabinet-card--green">
+                    <div class="cabinet-card__content">
+                        <div class="cabinet-card__pet">
+                             <div class="cabinet-card-pet__icon">
+                                <div class="cabinet-card-pet-icon__content">
+                                    <img src="assets/img/pet/mini-dog.png" alt="">
+                                </div>
+                             </div>
+
+                             <p class="cabinet-card-pet__name">Барон</p>
+                        </div>
+
+                        <div class="cabinet-card__element">
+                            <p class="cabinet-card__label">Порода:</p>
+                            <p class="cabinet-card__text">Немецкая овчарка</p>
+                        </div>
+                        <div class="cabinet-card__element">
+                            <p class="cabinet-card__label">Вес:</p>
+                            <p class="cabinet-card__text">от 25 до 40 кг</p>
+                        </div>
+                        <div class="cabinet-card__element">
+                            <p class="cabinet-card__label">Возраст:</p>
+                            <p class="cabinet-card__text">3 года</p>
+                        </div>
+                        <div class="cabinet-card__element">
+                            <p class="cabinet-card__label">Активность:</p>
+                            <p class="cabinet-card__text">Активный</p>
+                        </div>
+                        <div class="cabinet-card__element">
+                            <button class="cabinet-card__button">
+                                Изменить
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="cabinet-card cabinet-card--green">
+                    <div class="cabinet-card__content">
+                        <button class="cabinet-card__block-add-pets form-open" data-form="form-pet">
+                            <div class="cabinet-card-add-pets__circle">
+                                <img src="assets/img/svg/main/plus-grey.svg" alt="">
+                            </div>
+
+                            <p class="cabinet-card-add-pets__text">
+                                Добавить питомца
+                            </p>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div class="cabinet-card cabinet-card--grey">
+                <div class="cabinet-card__content">
+                    <div class="cabinet-card__order">
+                        <div class="cabinet-card-order__header">
+                            <div class="cabinet-card-order__main">
+                                <p class="cabinet-card-order-main__date">Заказ от 06.09.2024</p>
+                                <p class="cabinet-card-order-main__number">763276427364</p>
+                            </div>
+                            <div class="cabinet-card-order__payment">
+                                <p class="cabinet-card-order-payment__title">Оплачено:</p>
+                                <p class="cabinet-card-order-payment__price">8960</p>
+                            </div>
+                        </div>
+
+                        <div class="cabinet-card-order__content">
+                            <div class="cabinet-card-order__status">
+                                <p class="cabinet-card-order-status__title">Статус:</p>
+                                <p class="cabinet-card-order-status__pointer cabinet-card-order-status__pointer--grey">Доставлен</p>
+                            </div>
+
+                            <div class="cabinet-card-order__block-detail">
+                                <div class="cabinet-card-order__detail">
+                                    <div class="cabinet-card-order-detail__address">
+                                        <p class="cabinet-card-order-detail-address__title">Адрес доставки: </p>
+                                        <p class="cabinet-card-order-detail-address__text">Постомат: г.Москва, Каланчевская набережная, д.16</p>
+                                    </div>
+
+                                    <div class="cabinet-card-order-detail__main">
+                                        <div class="cabinet-card-order-detail-main__products">
+                                            <div class="cabinet-card-order-detail-main__product">
+                                                <img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-main-product__img">
+
+                                                <div class="cabinet-card-order-detail-main-product__content">
+                                                    <div class="cabinet-card-order-detail-main-product__description">
+                                                        <p class="cabinet-card-order-detail-main-product-description__what">Сухой корм, для крупных и средних пород </p>
+                                                        <p class="cabinet-card-order-detail-main-product-description__with-what">Индейка, 2 кг</p>
+                                                    </div>
+
+                                                    <p class="cabinet-card-order-detail-main-product__count">3</p>
+
+                                                    <p class="cabinet-card-order-detail-main-product__price">10280</p>
+                                                </div>
+                                            </div>
+                                            <div class="cabinet-card-order-detail-main__product">
+                                                <img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-main-product__img">
+
+                                                <div class="cabinet-card-order-detail-main-product__content">
+                                                    <div class="cabinet-card-order-detail-main-product__description">
+                                                        <p class="cabinet-card-order-detail-main-product-description__what">Сухой корм, для крупных и средних пород </p>
+                                                        <p class="cabinet-card-order-detail-main-product-description__with-what">Индейка, 2 кг</p>
+                                                    </div>
+
+                                                    <p class="cabinet-card-order-detail-main-product__count">3</p>
+
+                                                    <p class="cabinet-card-order-detail-main-product__price">10280</p>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <div class="cabinet-card-order-detail-main__links">
+                                            <a href="#" class="cabinet-card__button cabinet-card-order-detail-main__link">
+                                                Электронный чек
+                                            </a>
+                                            <button class="cabinet-card__button cabinet-card-order-detail-main__link">
+                                                Отследить заказ
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <button class="cabinet-card-order__open-detail">Детали заказа</button>
+                        </div>
+
+                        <div class="cabinet-card-order__detail-short">
+                            <img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-short__item">
+                            <img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-short__item">
+                            <img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-short__item">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
 
         <footer class="footer">
             <div class="footer__wrapper wrapper">

registration.html

@@ -11,6 +11,7 @@
         <!-- Базовые стили -->
         <link rel="stylesheet" href="assets/css/gp-style-core.css?v=1.0">
         <link rel="stylesheet" href="assets/css/gp-style-desktop.css?v=1.0">
+        <link rel="stylesheet" href="assets/css/gp-style-order.css?v=1.0">
         <!-- Адаптив -->
         <link rel="stylesheet" media="screen and (min-width: 1400px)" href="assets/css/gp-style-ultra.css?v=1.0">
         <link rel="stylesheet" media="screen and (max-width: 1200px)" href="assets/css/gp-style-tablet.css">
@@ -571,11 +572,11 @@
                         </div>
                     </div>
 
-                    <div class="cabinet-card__download">
+                    <!-- <div class="cabinet-card__download">
                         <button class="cabinet-card__button">
                             Показать ещё
                         </button>
-                    </div>
+                    </div> -->
                 </div>
             </div>
         </main>
@@ -721,7 +722,7 @@
                 <button class="modal-form__close"></button>
                 <p class="modal-form__title">Изменить мои данные</p>
 
-                <form class="modal-form__content check" method="post" action="/send-telegram.php">
+                <form class="modal-form__content " method="post" action="/send-telegram.php">
                     <div class="modal-form-content__line modal-form-content__line--two">
                         <div class="modal-form-content-line__element">
                             <label for="firstname" class="label-name">Имя</label>
@@ -798,13 +799,13 @@
                 <button class="modal-form__close"></button>
                 <p class="modal-form__title">Добавить питомца</p>
 
-                <form class="modal-form__content check" method="post" action="/send-telegram.php">
+                <form class="modal-form__content " method="post" action="/send-telegram.php">
                     <div class="modal-form-content__line">
                         <label for="" class="label-name">Вид животного</label>
                         <div class="form-input__tabs">
                             <label for="cat" class="form-input-tabs__button active">
                                 Кошка
-                                <input type="radio" checked name="pet" id="cat" class="form-input-tabs__input">
+                                <input type="radio" ed name="pet" id="cat" class="form-input-tabs__input">
                             </label>
 
                             <label for="dog" class="form-input-tabs__button">
@@ -836,7 +837,7 @@
                         <div class="form-input__tabs">
                             <label for="boy" class="form-input-tabs__button active">
                                 Мальчик
-                                <input type="radio" checked name="floor" id="boy" class="form-input-tabs__input">
+                                <input type="radio" ed name="floor" id="boy" class="form-input-tabs__input">
                             </label>
 
                             <label for="girl" class="form-input-tabs__button">
@@ -955,7 +956,7 @@
                         <div class="form-input__tabs form-input__remote-control" data-content="modal__age">
                             <label for="exemplary" class="form-input-tabs__button active">
                                 Примерный
-                                <input type="radio" checked name="weight" id="exemplary" class="form-input-tabs__input">
+                                <input type="radio" ed name="weight" id="exemplary" class="form-input-tabs__input">
                             </label>
 
                             <label for="accurate" class="form-input-tabs__button">
@@ -966,7 +967,7 @@
                     </div>
 
                     <div class="modal__age">
-                        <div class="form-input__radio active">
+                        <div class="form-input__radio remote-control__item active">
                             <div class="form-input-radio__item active">
                                 <div class="form-input-radio__circle">
                                     <div class="form-input-radio-circle__content"></div>
@@ -998,7 +999,7 @@
                             <input type="text" value="Малыш (от 0 до 1 года)" class="form-input-radio__input">
                         </div>
     
-                        <div class="modal-form-content__line modal-form-content__line--three modal-form-content__line--margin-top-16">
+                        <div class="modal-form-content__line remote-control__item modal-form-content__line--three modal-form-content__line--margin-top-16">
                             <div class="modal-form-content-line__element">
                                 <label for="firstname" class="label-name">День</label>
                                 <input id="firstname" class="form__input form__input--center" pattern="[0-9]{2}" maxlength="2" type="text" name="name" placeholder="ДД" >
@@ -1057,7 +1058,7 @@
                     <p class="modal-form__title">Добавить адрес</p>
                     <button class="modal-form__close"></button>
 
-                    <div class="modal-map__control">
+                    <div class="modal-map__control"data-content="modal-map__address">
                         <button class="modal-map-control__item">
                             <div class="modal-map-control-item__content">
                                 <div class="modal-map-control-item__header">
@@ -1089,51 +1090,55 @@
                         </button>
                     </div>
 
-                    <form action="/send-telegram.php" method="post" class="modal-map__form">
-                        <div class="modal-map-form__hidden">
-                            <div class="modal-form-content__line">
-                                <div class="modal-form-content-line__element">
-                                    <label for="firstname" class="label-name">Адрес</label>
-                                    <input id="firstname" class="form__input" type="text" name="name" placeholder="Начните вводить ваш адрес" required="">
-                                    <span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
-                                </div>                    
-                            </div>
-
-                            <div class="modal-form-content__line modal-form-content__line--two">
-                                <div class="modal-form-content-line__element">
-                                    <label for="firstname" class="label-name">Квартира</label>
-                                    <input id="firstname" class="form__input" type="text" name="name" placeholder="Квартира" required="">
-                                    <span class="form-input__error">Имя введено неверно</span>
-                                </div>
-        
-                                <div class="modal-form-content-line__element">
-                                    <label for="lastname" class="label-name">Этаж</label>
-                                    <input id="lastname" class="form__input" type="text" name="name" placeholder="Этаж" required="">
-                                    <span class="form-input__error">Фамилия введена неверно</span>
-                                </div>                        
-                            </div>
-
-                            <div class="modal-form-content__line modal-form-content__line--two">
-                                <div class="modal-form-content-line__element">
-                                    <label for="firstname" class="label-name">Подъезд</label>
-                                    <input id="firstname" class="form__input" type="text" name="name" placeholder="Подъезд" required="">
-                                    <span class="form-input__error">Имя введено неверно</span>
-                                </div>
-        
-                                <div class="modal-form-content-line__element">
-                                    <label for="lastname" class="label-name">Домофон</label>
-                                    <input id="lastname" class="form__input" type="text" name="name" placeholder="Код домофона" required="">
-                                    <span class="form-input__error">Фамилия введена неверно</span>
-                                </div>                        
-                            </div>
+                    <div class="modal-map__address">
+                        <div class="remote-control__item">
                         </div>
+                        <form action="/send-telegram.php" method="post" class="modal-map__form remote-control__item active">
+                            <div class="modal-map-form__hidden">
+                                <div class="modal-form-content__line">
+                                    <div class="modal-form-content-line__element">
+                                        <label for="firstname" class="label-name">Адрес</label>
+                                        <input id="firstname" class="form__input" type="text" name="name" placeholder="Начните вводить ваш адрес" required="">
+                                        <span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
+                                    </div>                    
+                                </div>
     
-                        <div class="modal-form__buttons modal-form__buttons--two modal-map-form__button">
-                            <input class="button button--gradient button--high button--filter " type="submit" value="Сохранить">
+                                <div class="modal-form-content__line modal-form-content__line--two">
+                                    <div class="modal-form-content-line__element">
+                                        <label for="firstname" class="label-name">Квартира</label>
+                                        <input id="firstname" class="form__input" type="text" name="name" placeholder="Квартира" required="">
+                                        <span class="form-input__error">Имя введено неверно</span>
+                                    </div>
             
-                            <input type="reset" class="button button--white open-overlay button--high Добавить адрес" value="Отмена">
-                        </div>
-                    </form>
+                                    <div class="modal-form-content-line__element">
+                                        <label for="lastname" class="label-name">Этаж</label>
+                                        <input id="lastname" class="form__input" type="text" name="name" placeholder="Этаж" required="">
+                                        <span class="form-input__error">Фамилия введена неверно</span>
+                                    </div>                        
+                                </div>
+    
+                                <div class="modal-form-content__line modal-form-content__line--two">
+                                    <div class="modal-form-content-line__element">
+                                        <label for="firstname" class="label-name">Подъезд</label>
+                                        <input id="firstname" class="form__input" type="text" name="name" placeholder="Подъезд" required="">
+                                        <span class="form-input__error">Имя введено неверно</span>
+                                    </div>
+            
+                                    <div class="modal-form-content-line__element">
+                                        <label for="lastname" class="label-name">Домофон</label>
+                                        <input id="lastname" class="form__input" type="text" name="name" placeholder="Код домофона" required="">
+                                        <span class="form-input__error">Фамилия введена неверно</span>
+                                    </div>                        
+                                </div>
+                            </div>
+    
+                            <div class="modal-form__buttons modal-form__buttons--two modal-map-form__button">
+                                <input class="button button--gradient button--high button--filter " type="submit" value="Сохранить">
+        
+                                <input type="reset" class="button button--white open-overlay button--high modal-form__button-close" value="Отмена">
+                            </div>
+                        </form>
+                    </div>
                 </div>
                 
                 <div class="modal-map__right">