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,22 @@ 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;
+}
 .form__button{
   width: 100%;
 
@@ -691,7 +708,7 @@ button{
 .form-input-phone-list-item__code::before{
   content: '+';
 }
-.form-input__two{
+.form-input__tabs{
   padding: 2px;
 
   display: flex;
@@ -701,21 +718,16 @@ button{
 
   position: relative;
 }
-.form-input-two__oval{
+.form-input__tabs--white{
-  position: absolute;
+  padding: 3px;
-  top: 2px;
+  border: 1px solid var(--text-3);
-  left: 2px;
+  background: var(--white);
-
-  width: 50%;
-  height: calc(100% - 4px);
-
-  border-radius: 18px;
-
-  background: var(--background-white);
-  transition: left .2s ease-out;
 }
-.form-input-two__button{
+.form-input__tabs--white .form-input-tabs__button.active{
-  width: 50%;
+  background: var(--gradient-turquoise);
+}
+.form-input-tabs__button{
+  width: 100%;
 
   padding: 10px;
 
@@ -724,17 +736,25 @@ button{
   font-size: 20px;
   line-height: 120%;
   color: var(--text-black);
+  text-align: center;
 
-  background: none;
+  border-radius: 18px;
-  border: none;
 
   z-index: 2;
+
+  transition: background-color .2s ease-out;
 }
-.form-input-two__input{
+.form-input-tabs__button.active{
+  background-color: var(--background-white);
+}
+.form-input-tabs__input{
   display: none;
 }
 .form-input__radio{
   padding: 16px;
+
+  display: flex;
+  flex-direction: column;
 }
 .form-input-radio__item{
   margin-top: 14px;
@@ -788,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;
 }
@@ -914,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 */
 
 
@@ -1122,7 +1210,7 @@ button{
   border-radius: 48px;
 }
 .to-know{
-  width: 100%;
+  /* width: 100%; */
 
   padding: 12px 24px 7px 24px;
 
@@ -1134,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;
 }
@@ -1535,7 +1629,7 @@ button{
 
   display: flex;
 
-  border-top: 1px solid #f2f2f2;
+  border-top: 1px solid var(--background-grey);
 
   position: relative;
 }
@@ -1670,6 +1764,11 @@ button{
   border-radius: 20px;
 
   position: relative;
+
+  display: none;
+}
+.modal-form.active{
+  display: block;
 }
 .modal-form--white{
   border: 1px solid var(--background-black);
@@ -1681,6 +1780,9 @@ button{
 .modal-form--width-584{
   width: 584px;
 }
+.modal-form--cdek{
+  width: 836px;
+}
 .modal-form__close{
   position: absolute;
   top: 24px;
@@ -1697,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);
@@ -1704,6 +1808,7 @@ button{
 .modal-form__close:hover{
   opacity: .8;
 }
+.modal-form__button-close{}
 .modal-form__title{
   padding-right: 50px;
 
@@ -1771,12 +1876,56 @@ 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);
 }
+.modal-form-content__line--three{
+  display: flex;
+}
+.modal-form-content__line--three .modal-form-content-line__element:nth-child(1){
+  width: 85px;
+
+  flex-shrink: 0;
+}
+.modal-form-content__line--three .modal-form-content-line__element:nth-child(2){
+  margin-left: 8px;
+
+  width: 100%;
+}
+.modal-form-content__line--three .modal-form-content-line__element:nth-child(3){
+  margin-left: 8px;
+
+  width: 85px;
+  
+  flex-shrink: 0;
+}
+.modal-form-content__line--margin-top-16{
+  margin-top: 16px;
+}
 .modal-form__buttons{
   margin-top: 32px;
 }
@@ -1795,11 +1944,14 @@ button{
 
   width: 1105px;
 
-  display: flex;
+  display: none;
 
   border-radius: 24px;
   border: none;
 }
+.modal-map.active{
+  display: flex;
+}
 .modal-map__left{
   width: 600px;
 
@@ -1812,6 +1964,9 @@ button{
 
   display: flex;
 }
+.modal-map__control--delivery{
+  margin-top: 12px;
+}
 .modal-map-control__item{
   margin: 12px;
 
@@ -1855,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;
@@ -1913,7 +2071,7 @@ button{
   
 }
 .modal-map-form__button{
-  margin-top: 88px;
+  margin-top: 83px;
 }
 .modal-map-form__sub-button{
   display: none;
@@ -1930,6 +2088,15 @@ button{
 .modal-map__map iframe{
   height: 650px;
 }
+.modal__age{
+
+}
+.modal__age > div{
+  display: none;
+}
+.modal__age > div.active{
+  display: flex;
+}
 /* modal */
 
 /* toggle */
@@ -2099,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{
 
-
+}
-
+.subscription__add-title{
-
+  font-size: 24px;
-
+}
-
+.subscription__add-content{
-/* Стили для лептопов  */
+  padding: 24px 0 12px 0;
-/* @media only screen and (min-width: 992px) and (max-width: 1400px) {
+}
-
+.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

@@ -89,6 +89,22 @@
     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 */
@@ -185,7 +201,12 @@
     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 */
@@ -249,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

@@ -170,7 +170,6 @@ main{
     flex-direction: column;
 
     position: relative;
-
 }
 .cabinet__control{
     display: flex;
@@ -186,9 +185,19 @@ main{
 
     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;
 }
@@ -197,6 +206,12 @@ main{
 
   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 */
 }
 
@@ -326,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-cabinet.js

@@ -5,85 +5,63 @@ 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');
 
-
-startHeight('.cabinet__orders', '.cabinet', widthPhoneCabinet, '.cabinet__profile', '.cabinet-control__button');
 controlCabinet('.cabinet-control__button', '.cabinet', widthPhoneCabinet);
 
-window.addEventListener('resize', (e) => {
-    startHeight('.cabinet__orders', '.cabinet', widthPhoneCabinet, '.cabinet__profile', '.cabinet-control__button');
-});
-
-
-// function
-function startHeight(heightElement, contentElement, minWidth, removeActive, buttons) {
-    let thisWidth = window.innerWidth;
-    let thisHeightElement = document.querySelector(heightElement);
-    let thisContentElement = document.querySelector(contentElement);
-    let thisRemoveActive = document.querySelector(removeActive);
-    let thisButtons = document.querySelectorAll(buttons);
-
-    if (thisWidth <= minWidth) {
-        let newHeight =  thisHeightElement.clientHeight + 48;
-        
-        thisContentElement.style.height = `${newHeight}px`;
-        thisHeightElement.classList.add('active');
-        thisRemoveActive.classList.remove('active');
-
-        thisButtons.forEach(e => {
-            let thisClassList = e.classList;
-
-            if (!thisClassList.contains('start')) {
-                thisClassList.remove('active');                
-            }else{
-                thisClassList.add('active')
-            }
-        })
-    }else{
-        thisContentElement.style.height = 'auto';
-        thisHeightElement.classList.remove('active');
-
-        thisButtons.forEach(e => {
-            let thisClassList = e.classList;
-
-            if (!thisClassList.contains('start')) {
-                thisClassList.remove('active');                
-            }else{
-                thisClassList.add('active')
-            }
-        })
-    }
-}
-
 function controlCabinet(buttons, main, minWidth){
     let thisWidth = window.innerWidth;
     let thisMain = document.querySelector(main);
 
+    let thisButtons = document.querySelectorAll(buttons);
 
-    if (thisWidth <= minWidth) {
+    thisButtons.forEach(e => {
-        let thisButtons = document.querySelectorAll(buttons);
+        e.onclick = function (element){
-        // let thisContents = document.querySelectorAll(contents);
+            let thisContent = document.querySelector(`.cabinet__${e.dataset.cabinet}`);
+            let newHeight = thisContent.clientHeight + 48;
+            let thisButton = element.target;
 
-        thisButtons.forEach(e => {
+            thisMain.style.height = `${newHeight}px`
-            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');
 
-                if (!thisContent.classList.contains('active')) {
+                setTimeout(() => {
-                    thisMain.querySelector('.active').classList.remove('active');
+                    thisMain.style.height = 'auto';
-                    thisContent.classList.add('active');
-                }
 
-                thisButtons.forEach(e => {
+                    if (thisMain.querySelector('.hide')) {
-                    e.classList.remove('active');
+                        thisMain.querySelector('.hide').classList.remove('hide');
-                })
+                    }
-                thisButton.classList.add('active');
+
+                    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');
+        }
     }
 }
+

assets/js/gp-form.js

@@ -1,9 +1,9 @@
 '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');
+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) {
+function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon, selectCode, searchInput) {
     let inputs = document.querySelectorAll(main);
 
     inputs.forEach(e => {
@@ -11,12 +11,24 @@ function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon,
             thisMainCode  = e.querySelector(mainCode),
             thisInput  = e.querySelector(input),
             thisList  = e.querySelector(list),
-            thisSelects  = e.querySelectorAll(selects);
+            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) {
-            thisInput.focus();
+            if (!event.target.classList.contains(searchInput)) {
+                if (thisList.classList.contains('active')) {
+                    thisList.classList.remove('active');
+                }
 
-            thisList.classList.add('active');            
+                thisInput.focus();
+                thisList.classList.add('active');
+            }
         }
 
         thisSelects.forEach(e => {
@@ -61,38 +73,35 @@ function checkPhone(input) {
     })
 }
 
-inputTwo('.form-input__two', '.form-input-two__button', '.form-input-two__oval', '.form-input-two__input')
+inputTabs('.form-input__tabs', '.form-input-tabs__button');
+inputTabs('.modal-map__control', '.modal-map-control__item');
 
-function inputTwo(inputTwo, button, oval, input) {
+function inputTabs(main, button) {
-    let inputTwos = document.querySelectorAll(inputTwo);
+    let mains = document.querySelectorAll(main);
 
-    inputTwos.forEach(e => {
+    mains.forEach(main => {
-        let thisButtons = e.querySelectorAll(button),
+        let buttons = main.querySelectorAll(button);
-            thisOval = e.querySelector(oval),
-            thisInput = e.querySelector(input),
-            thisMain = e;
 
-        thisButtons.forEach(button => {
+        buttons.forEach(button => {
-            button.onclick = function (event) {
+            button.onclick = function () {
-                event.preventDefault();
+                if (button.classList.contains('active')) {
+                    return ;
+                }
 
-                let newLeft = button.clientWidth;
+                main.querySelector('.active').classList.remove('active');
-                let newValue = button.textContent;
 
-                if (button.classList.contains('alternative')) {
+                button.classList.add('active');
-                    thisMain.classList.add('alternative');
+
-                    thisInput.value = newValue;
+                if (button.querySelector('input')){
-                    thisOval.style.left = `${newLeft}px`;
+                    button.querySelector('input').click();
-                }else{
-                    thisMain.classList.remove('alternative');
-                    thisInput.value = newValue;
-                    thisOval.style.left = `2px`;
                 } 
             }
         })
+        
     })
 }
 
+
 inputRadio('.form-input__radio', '.form-input-radio__item', '.form-input-radio__title', '.form-input-radio__input')
 
 function inputRadio(main ,item, textClass, input) {
@@ -134,6 +143,12 @@ function listInputRadio(main ,item, textClass, input, content, block) {
             thisBlock.style.height = '192px';
         }
 
+
+        thisInput.onblur = function(){
+            thisBlock.classList.remove('active');
+            thisBlock.style.height = '0px';
+        };
+
         items.forEach(item => {
             item.onclick = function (event) {
                 event.preventDefault();
@@ -146,10 +161,126 @@ function listInputRadio(main ,item, textClass, input, content, block) {
                 }
 
                 item.classList.add('active');
-
-                thisBlock.classList.remove('active');
-                thisBlock.style.height = '0px';
             }
         })
     })
 }
+
+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);            
+        })
+    })
+}

assets/js/gp-function.js

@@ -60,6 +60,23 @@ export function modalClose(buttonElement) {
     })
 }
 
+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);
 
@@ -122,4 +139,18 @@ export function toggleHeader(button, content, blockheight, removeBlock, removeCl
     }
 }
 
+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

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">

order.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">
@@ -224,210 +225,419 @@
             </div>
         </header>
         
+        <main class="wrapper">
+            <div class="order">
+                <form action="" id="recipient" class="order__contacts">
+                    <div class="order-contacts__header">    
+                        <p class="order__title">
+                            Контакты получателя
+                        </p>
 
-        <div class="modal active">
+                        <button class="cabinet-card__button">
-            <div class="modal-form form__full-mobile modal-form--white">
+                            Выйти
+                        </button>
+                    </div>
+
+                    <div class="order-contacts__form">
+                        <div class="modal-form-content__line">
+                            <div class="modal-form-content-line__element">
+                                <label for="firstname" class="label-name">Имя и фамилия</label>
+                                <input class="form__input" type="text" placeholder="Ваше имя" required="">
+                                <span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
+                            </div>                    
+                        </div>
+
+                        <div class="modal-form-content__line">
+                            <div class="modal-form-content-line__element">
+                                <div class="label">
+                                    <label for="mail" class="label__title">
+                                        Email 
+                                    </label>
+    
+                                    <div class="label__question">
+                                        text <br>
+                                        re
+                                    </div>
+                                </div>
+                                <input id="firstname" class="form__input" type="email" name="name" placeholder="Начните вводить ваш email" required="">
+                                <span class="form-input__error form-input__error--absolute">Email введен неверно</span>
+                            </div>                    
+                        </div>
+
+                        <div class="modal-form-content__line">
+                            <div class="modal-form-content-line__element">
+                                <label for="firstname" class="label-name">Телефон</label>
+                                <input class="form__input no-flag" type="text" maxlength="15" minlength="15" pattern="+7\s[0-9]{3}\s[0-9]{3}\s[0-9]{4}" placeholder="+7 ___ ___ ____" required="" data-code="7">
+                                <span class="form-input__error form-input__error--absolute">Номер телефона введен неверно</span>
+                            </div>                    
+                        </div>
+
+                        <div class="modal-form-content__line">
+                            <div class="form-agreement__check">
+                                <input type="checkbox" name="" id="remember" class="form-agreement__input">
+                                <div class="form-agreement__square">
+                                </div>
+                                <label for="remember" class="form-agreement__label">Запомнить меня</label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="order-contacts__delivery">
+                        <p class="order__title">Доставка</p>
+
+                        <div class="modal-map__control modal-map__control--delivery" data-content="modal-map__address">
+                            <button class="modal-map-control__item active">
+                                <div class="modal-map-control-item__content">
+                                    <div class="modal-map-control-item__header">
+                                        <div class="modal-map-control-item__circle"><div class="modal-map-control-item-circle__content"></div></div>
+                                        <p class="modal-map-control-item__title">
+                                            Пункт выдачи
+                                        </p>
+                                    </div>
+                                    <div class="modal-map-control-item__description">
+                                        <p class="modal-map-control-item__time">До 2-х дней</p>
+                                        <p class="modal-map-control-item__price">Бесплатно</p>
+                                    </div>
+                                </div>
+                                <input type="radio" name="delivery" id="paragraph" class="modal-map-control-item__input" checked>
+                            </button>
+    
+                            <button class="modal-map-control__item ">
+                                <div class="modal-map-control-item__content">
+                                    <div class="modal-map-control-item__header">
+                                        <div class="modal-map-control-item__circle"><div class="modal-map-control-item-circle__content"></div></div>
+                                        <p class="modal-map-control-item__title">
+                                            Курьером
+                                        </p>
+                                    </div>
+                                    <div class="modal-map-control-item__description">
+                                        <p class="modal-map-control-item__time">До 3-х дней</p>
+                                        <p class="modal-map-control-item__price">От 159 рублей</p>
+                                    </div>
+                                </div>
+                                <input type="radio" name="delivery" id="courier" class="modal-map-control-item__input">
+                            </button>
+                        </div>
+
+                        <div class="modal-map__address">
+                            <div class="remote-control__item active">
+                                <div class="order-contacts-deliver__item">
+                                    <div class="modal-form-content-line__element modal-form-content-line__element--arrow">
+                                        <label for="firstname" class="label-name">Пункт выдачи</label>
+                                        <input id="firstname" class="form__input form__input--grey form-open mandatory input-read" type="text" name="name" placeholder="Выберите пункт выдачи" required="" data-form="form-point" autocomplete="none">
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="remote-control__item">
+                                <div class="order-contacts-deliver__item">
+                                    <div class="modal-form-content-line__element modal-form-content-line__element--arrow">
+                                        <label for="firstname" class="label-name">Адрес доставки</label>
+                                        <input id="firstname" class="form__input form__input--grey form-open mandatory input-read" type="text" name="name" placeholder="Выберите адрес доставки" data-form="form-address" autocomplete="none">
+                                    </div>
+                                </div>
+
+                                <div class="order-contacts-deliver__item">
+                                    <div class="order-contacts-deliver__date">
+                                        <div class="form-input__radio remote-control__item active">
+                                            <div class="form-input-radio__item">
+                                                <div class="form-input-radio__circle">
+                                                    <div class="form-input-radio-circle__content"></div>
+                                                </div>
+                    
+                                                <p class="form-input-radio__title form-input-radio__title--no-span">2 марта <span>с 10-18 часов</span></p>
+
+                                                <p class="form-input-radio__price">
+                                                    350
+                                                </p>
+                                            </div>
+                                            <div class="form-input-radio__item">
+                                                <div class="form-input-radio__circle">
+                                                    <div class="form-input-radio-circle__content"></div>
+                                                </div>
+                    
+                                                <p class="form-input-radio__title form-input-radio__title--no-span">2 марта <span>с 10-18 часов</span></p>
+
+                                                <p class="form-input-radio__price">
+                                                    350
+                                                </p>
+                                            </div>
+                                            <div class="form-input-radio__item">
+                                                <div class="form-input-radio__circle">
+                                                    <div class="form-input-radio-circle__content"></div>
+                                                </div>
+                    
+                                                <p class="form-input-radio__title form-input-radio__title--no-span">2 марта <span>с 10-18 часов</span></p>
+
+                                                <p class="form-input-radio__price">
+                                                    350
+                                                </p>
+                                            </div>
+                                            <input type="text" value="Малыш (от 0 до 1 года)" class="form-input-radio__input">
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="order-contacts-deliver__item">
+                                    <div class="modal-form-content-line__element">
+                                        <label for="firstname" class="label-name">Комментарий для доставки</label>
+                                        <textarea id="firstname" class="form__input form__input--textarea-72 form__input--grey" type="text" name="name" placeholder="Для службы доставки"></textarea>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </form>
+
+                <div class="order__your">
+                    <p class="order__title">Ваш заказ</p>
+
+                    <div class="order-your__products">
+                        <div class="order-your-products__item">
+                            <div class="order-your-products__left">
+                                <img src="/assets/img/product/mini-card.png" alt="" class="order-your-products__img">
+
+                                <div class="order-your-products__content">
+                                    <a href="#" class="order-your-products__name">Сухой корм, для крупных и средних пород </a>
+                                    <p class="order-your-products__description">Индейка, 2 кг </p>
+                                </div>
+                            </div>
+
+                            <div class="order-your-products__right">
+                                <p class="order-your-products__count">
+                                    3
+                                </p>
+                                <p class="order-your-products__price">
+                                    10290
+                                </p>
+                            </div>
+                        </div>
+
+                        <div class="order-your-products__item">
+                            <div class="order-your-products__left">
+                                <img src="/assets/img/product/mini-card.png" alt="" class="order-your-products__img">
+
+                                <div class="order-your-products__content">
+                                    <a href="#" class="order-your-products__name">Сухой корм, для крупных и средних пород </a>
+                                    <p class="order-your-products__description">Индейка, 2 кг </p>
+                                </div>
+                            </div>
+
+                            <div class="order-your-products__right">
+                                <p class="order-your-products__count">
+                                    3
+                                </p>
+                                <p class="order-your-products__price">
+                                    10290
+                                </p>
+                            </div>
+                        </div>
+
+                        <div class="order-your-products__item">
+                            <div class="order-your-products__left">
+                                <img src="/assets/img/product/mini-card.png" alt="" class="order-your-products__img">
+
+                                <div class="order-your-products__content">
+                                    <a href="#" class="order-your-products__name">Сухой корм, для крупных и средних пород </a>
+                                    <p class="order-your-products__description">Индейка, 2 кг<span>1</span></p>
+                                </div>
+                            </div>
+
+                            <div class="order-your-products__right">
+                                <p class="order-your-products__count">
+                                    3
+                                </p>
+                                <p class="order-your-products__price">
+                                    10290
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="order-your__calculation">
+                        <form action="" class="order-your__promo">
+                            <input class="form__input form__input--grey" type="text" minlength="1" placeholder="Промокод">
+    
+                            <input type="submit" value="Применить" class="button button--white button--red-48-px active order-your-promo__button">
+                        </form>
+
+                        <div class="order-your-calculation__item">
+                            <p class="order-your-calculation__title">Товары</p>
+                            <p class="order-your-calculation__value order-your-calculation__value--price">10560</p>
+                        </div>
+
+                        <div class="order-your-calculation__item">
+                            <p class="order-your-calculation__title">Скидка</p>
+                            <p class="order-your-calculation__value order-your-calculation__value--price order-your-calculation__value--discount">1280</p>
+                        </div>
+
+                        <div class="order-your-calculation__item">
+                            <p class="order-your-calculation__title">Доставка</p>
+                            <p class="order-your-calculation__description">Введите адрес доставки</p>
+                        </div>
+
+                        <hr class="order-your-calculation__line">
+
+                        <div class="order-your-calculation__item">
+                            <p class="order-your-calculation__result">Итого</p>
+                            <p class="order-your-calculation__result order-your-calculation__value--price">8960</p>
+                        </div>
+
+                        <div class="order-your-calculation__submit">
+                            <input type="submit" form="recipient" class="button button--gradient button--high button--100-perc" value="Оплатить">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <footer class="footer">
+            <div class="footer__wrapper wrapper">
+                <div class="footer__content">
+                    <img src="assets/img/svg/logo/logo-gradient.svg" alt="" class="footer__logo">
+
+                    <address class="footer__address">
+                        123182 г. Москва, <br>
+                        4-й Красногорский пр., <br> 
+                        д. 2/4, стр. 1, этаж/ком. 3/1
+                    </address>
+
+                    <div class="footer__list">
+                        <div class="footer-list__item">
+                            <p class="footer-list__title">Отзывы и предложения</p>
+                            <a href="mailto:pro@cosmopet.shop" class="footer-list__link">
+                                pro@cosmopet.shop
+                            </a>
+                        </div>
+                        <div class="footer-list__item">
+                            <p class="footer-list__title">Связь с ветеринаром</p>
+                            <a href="mailto:vetvopros@cosmopet.shop" class="footer-list__link">
+                                vetvopros@cosmopet.shop
+                            </a>
+                        </div>
+                        <div class="footer-list__item">
+                            <p class="footer-list__title">Заявки для оптовых покупателей</p>
+                            <a href="mailto:pro@cosmopet.shop" class="footer-list__link">
+                                pro@cosmopet.shop
+                            </a>
+                        </div>
+                        <div class="footer-list__item">
+                            <a href="#" class="button button--black button--100-perc button--link">
+                                Чат бот с ветеринаром
+                            </a>
+                        </div>
+                    </div>
+
+                    <div class="footer__about">
+                        <div class="social-media">
+                            <a href="#" class="social-media__item">
+                                <img src="assets/img/svg/social-media/vk.svg" alt="" class="social-media__icon">
+                            </a>
+                            <a href="#" class="social-media__item">
+                                <img src="assets/img/svg/social-media/tg.svg" alt="" class="social-media__icon">
+                            </a>
+                            <a href="#" class="social-media__item">
+                                <img src="assets/img/svg/social-media/ya.svg" alt="" class="social-media__icon">
+                            </a>
+                        </div>
+
+                        <a href="#" class="footer-about__text">Соглашение о конфиденциальности</a>
+                    </div>
+                </div>
+    
+                <div class="footer__form">
+                    <form class="form" method="post" action="/send-telegram.php">
+                        <p class="form__title">
+                            Форма обратной связи
+                        </p>
+                        <div class="form__item">
+                            <input class="form__input" type="text" name="name" placeholder="Ваше имя" required>
+                        </div>
+                        <div class="form__item">
+                            <input class="form__input" type="text" name="name" placeholder="Эл.почта" required>
+                        </div>
+                        <div class="form__item">
+                            <textarea class="form__input form__input--textarea" name="" id="" placeholder="Текст обращения"></textarea>
+                        </div>
+                        <div class="form__item">
+                            <input class="form__button" type="submit" value="Отправить">
+                        </div>
+                    </form>
+                </div>
+
+                <div class="footer__social-media">
+                    <div class="social-media">
+                        <a href="#" class="social-media__item">
+                            <img src="assets/img/svg/social-media/vk.svg" alt="" class="social-media__icon">
+                        </a>
+                        <a href="#" class="social-media__item">
+                            <img src="assets/img/svg/social-media/tg.svg" alt="" class="social-media__icon">
+                        </a>
+                        <a href="#" class="social-media__item">
+                            <img src="assets/img/svg/social-media/ya.svg" alt="" class="social-media__icon">
+                        </a>
+                    </div>
+
+                    <a href="#" class="footer-about__text">Соглашение о конфиденциальности</a>
+                </div>
+                
+            </div>
+        </footer>
+
+        <div class="modal">
+            <div class="modal-form modal-form--cdek form__full-mobile modal-form--white modal-form--height-100-phone form-point">
                 <button class="modal-form__close"></button>
-                <p class="modal-form__title">Добавить питомца</p>
 
-                <form class="modal-form__content check" method="post" action="/send-telegram.php">
+                <div style="position:relative;overflow:hidden;"><a href="https://yandex.ru/maps/213/moscow/?utm_medium=mapframe&amp;utm_source=maps" style="color:#eee;font-size:12px;position:absolute;top:0px;">Москва</a><a href="https://yandex.ru/maps/213/moscow/?ll=37.710230%2C55.812249&amp;mode=whatshere&amp;utm_medium=mapframe&amp;utm_source=maps&amp;whatshere%5Bpoint%5D=37.622787%2C55.774846&amp;whatshere%5Bzoom%5D=6.31&amp;z=12.54" style="color:#eee;font-size:12px;position:absolute;top:14px;">Яндекс&nbsp;Карты — транспорт, навигация, поиск мест</a><iframe src="https://yandex.ru/map-widget/v1/?ll=37.710230%2C55.812249&amp;mode=whatshere&amp;whatshere%5Bpoint%5D=37.622787%2C55.774846&amp;whatshere%5Bzoom%5D=6.31&amp;z=12.54" width="560" height="400" frameborder="1" allowfullscreen="true" style="position:relative;"></iframe></div>
-                    <div class="modal-form-content__line">
+            </div>
-                        <label for="" class="label-name">Вид животного</label>
-                        <div class="form-input__two">
-                            <div class="form-input-two__oval"></div>
 
-                            <button class="form-input-two__button">Кошка</button>
+            <div class="modal-form form__full-mobile modal-form--white modal-form--height-100-phone form-address">
-                            <button class="form-input-two__button alternative">Собака</button>
+                <button class="modal-form__close"></button>
+                <p class="modal-form__title">АДРЕС</p>
 
-                            <input type="text" value="Кошка" class="form-input-two__input">
+                <form class="modal-form__content " method="post" action="/send-telegram.php">
-                        </div>
+                    <div class="modal-form-content-line__element">
+                        <label for="address" class="label-name">Адрес</label>
+                        <input id="address" class="form__input" type="text" placeholder="Начните вводить ваш адрес" required="">
+                        <span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
                     </div>
 
-                    <div class="modal-form-content__line">
+                    <div class="modal-form-content__line modal-form-content__line--two-mobile">
                         <div class="modal-form-content-line__element">
-                            <label for="firstname" class="label-name">Имя</label>
+                            <label for="apartment" class="label-name">Квартира</label>
-                            <input id="firstname" class="form__input" type="text" name="name" placeholder="Имя питомца" required="">
+                            <input id="apartment" class="form__input" type="text" placeholder="Квартира" required="">
-                            <span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
+                            <span class="form-input__error form-input__error--absolute">Квартира введено неверно</span>
-                        </div>                    
-                    </div>
-
-                    <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">
-                        <label for="" class="label-name">Пол вашего питомца</label>
-                        <div class="form-input__two">
-                            <div class="form-input-two__oval"></div>
-
-                            <button class="form-input-two__button">Мальчик</button>
-                            <button class="form-input-two__button alternative">Девочка</button>
-
-                            <input type="text" value="Кошка" class="form-input-two__input">
-                        </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>
-                            <div class="form-input__list">
-                                <input type="text" placeholder="Выберите из списка" class="form-input-list__input" readonly="">
-                                <div class="form-input-list__block-content">
-                                    <div class="form-input-list__content">
-                                        <button class="form-input-list__item">
-                                            <p class="form-input-list-item__text">Высокая</p>
-                                            <div class="form-input-list-item__box">
-                                                <div class="form-input-list-item-box__content">
-                                                    <img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
-                                                </div>
-                                            </div>
-                                        </button>
-                                        <button class="form-input-list__item">
-                                            <p class="form-input-list-item__text">Высокая</p>
-                                            <div class="form-input-list-item__box">
-                                                <div class="form-input-list-item-box__content">
-                                                    <img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
-                                                </div>
-                                            </div>
-                                        </button>
-                                        <button class="form-input-list__item">
-                                            <p class="form-input-list-item__text">Высокая 2</p>
-                                            <div class="form-input-list-item__box">
-                                                <div class="form-input-list-item-box__content">
-                                                    <img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
-                                                </div>
-                                            </div>
-                                        </button>
-                                        <button class="form-input-list__item">
-                                            <p class="form-input-list-item__text">Высокая</p>
-                                            <div class="form-input-list-item__box">
-                                                <div class="form-input-list-item-box__content">
-                                                    <img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
-                                                </div>
-                                            </div>
-                                        </button>
-                                        <button class="form-input-list__item">
-                                            <p class="form-input-list-item__text">Высокая</p>
-                                            <div class="form-input-list-item__box">
-                                                <div class="form-input-list-item-box__content">
-                                                    <img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
-                                                </div>
-                                            </div>
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
                         </div>
 
                         <div class="modal-form-content-line__element">
-                            <label for="firstname" class="label-name">Вес</label>
+                            <label for="floor" class="label-name">Этаж</label>
-                            <div class="form-input__list">
+                            <input id="floor" class="form__input" type="text" placeholder="Этаж" required="">
-                                <input type="text" placeholder="Выберите из списка" class="form-input-list__input" readonly="">
+                            <span class="form-input__error form-input__error--absolute">Этаж введен неверно</span>
-                                <div class="form-input-list__block-content">
-                                    <div class="form-input-list__content">
-                                        <button class="form-input-list__item">
-                                            <p class="form-input-list-item__text">Высокая</p>
-                                            <div class="form-input-list-item__box">
-                                                <div class="form-input-list-item-box__content">
-                                                    <img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
-                                                </div>
-                                            </div>
-                                        </button>
-                                        <button class="form-input-list__item">
-                                            <p class="form-input-list-item__text">Высокая</p>
-                                            <div class="form-input-list-item__box">
-                                                <div class="form-input-list-item-box__content">
-                                                    <img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
-                                                </div>
-                                            </div>
-                                        </button>
-                                        <button class="form-input-list__item">
-                                            <p class="form-input-list-item__text">Высокая 2</p>
-                                            <div class="form-input-list-item__box">
-                                                <div class="form-input-list-item-box__content">
-                                                    <img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
-                                                </div>
-                                            </div>
-                                        </button>
-                                        <button class="form-input-list__item">
-                                            <p class="form-input-list-item__text">Высокая</p>
-                                            <div class="form-input-list-item__box">
-                                                <div class="form-input-list-item-box__content">
-                                                    <img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
-                                                </div>
-                                            </div>
-                                        </button>
-                                        <button class="form-input-list__item">
-                                            <p class="form-input-list-item__text">Высокая</p>
-                                            <div class="form-input-list-item__box">
-                                                <div class="form-input-list-item-box__content">
-                                                    <img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
-                                                </div>
-                                            </div>
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
                         </div>                        
                     </div>
 
-                    <div class="modal-form-content__line">
+                    <div class="modal-form-content__line modal-form-content__line--two-mobile">
-                        <label for="" class="label-name">Возраст питомца</label>
+                        <div class="modal-form-content-line__element">
-                        <div class="form-input__two">
+                            <label for="entrance" class="label-name">Подъезд</label>
-                            <div class="form-input-two__oval"></div>
+                            <input id="entrance" class="form__input" type="text" placeholder="Подъезд" required="">
-
+                            <span class="form-input__error form-input__error--absolute">Подъезд введен неверно</span>
-                            <button class="form-input-two__button">Примерный</button>
-                            <button class="form-input-two__button alternative">Точный</button>
-
-                            <input type="text" value="Кошка" class="form-input-two__input">
                         </div>
-                    </div>
 
-                    <div class="form-input__radio">
+                        <div class="modal-form-content-line__element">
-                        <div class="form-input-radio__item active">
+                            <label for="number-phone" class="label-name">Домофон</label>
-                            <div class="form-input-radio__circle">
+                            <input id="number-phone" class="form__input" type="text" placeholder="Код домофона" required="">
-                                <div class="form-input-radio-circle__content"></div>
+                            <span class="form-input__error form-input__error--absolute">Код домофона введен неверно</span>
-                            </div>
-
-                            <p class="form-input-radio__title">Малыш <span>(от 0 до 1 года)</span></p>
                         </div>                        
-                        <div class="form-input-radio__item">
-                            <div class="form-input-radio__circle">
-                                <div class="form-input-radio-circle__content"></div>
-                            </div>
-
-                            <p class="form-input-radio__title">Взрослый <span>(от 1 года до 7 лет)</span></p>
-                        </div>
-                        <div class="form-input-radio__item">
-                            <div class="form-input-radio__circle">
-                                <div class="form-input-radio-circle__content"></div>
-                            </div>
-
-                            <p class="form-input-radio__title">Пожилой <span>(от 7 до 12 лет)</span></p>
-                        </div>
-                        <div class="form-input-radio__item">
-                            <div class="form-input-radio__circle">
-                                <div class="form-input-radio-circle__content"></div>
-                            </div>
-
-                            <p class="form-input-radio__title">Стареющий <span>(от 12 лет и старше)</span></p>
-                        </div>
-                        <input type="text" class="form-input-radio__input">
                     </div>
 
                     <div class="modal-form__buttons">
-                        <input class="button button--gradient button--high button--filter button--100-perc" type="submit" value="Добавить">
+                        <input class="button button--gradient button--high button--filter button--100-perc" type="submit" value="Доставить сюда">
                     </div>
                 </form>
             </div>
         </div>
 
 
-        <!-- <script type="module" src="assets/js/gp-cabinet.js"></script> -->
+        <script type="module" src="assets/js/gp-cabinet.js"></script>
-        <script type="module" src="assets/js/gp-form.js"></script>
+        <script src="assets/js/gp-form.js"></script>
     </body>
 </html>

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">
@@ -235,7 +236,7 @@
                     </div>
 
                     <div class="cabinet-card__element">
-                        <button class="button button--gradient button--high-46">
+                        <button class="button button--gradient button--high-46 form-open" data-form="form-sub">
                             Узнать подробности
                         </button>
                     </div>
@@ -285,7 +286,7 @@
 
                             <div class="cabinet-card__element">
                                 <div class="cabinet-card__block-buttons">
-                                    <button class="cabinet-card__button">
+                                    <button class="cabinet-card__button form-open" data-form="form-data">
                                         Изменить
                                     </button>
 
@@ -309,7 +310,7 @@
                             </div>
 
                             <div class="cabinet-card__element cabinet-card__element--margin-top-32">
-                                <button class="button button--white button--100-perc">
+                                <button class="button button--white button--100-perc form-open" data-form="modal-map">
                                     Добавить адрес
                                 </button>
                             </div>
@@ -354,7 +355,7 @@
 
                     <div class="cabinet-card cabinet-card--green">
                         <div class="cabinet-card__content">
-                            <button class="cabinet-card__block-add-pets">
+                            <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>
@@ -366,7 +367,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="cabinet__orders cabinet-content">
+                <div class="cabinet__orders cabinet-content active hide">
                     <div class="cabinet-card cabinet-card--green-white cabinet__subscription-pc">
                         <div class="cabinet-card__content">
                             <p class="cabinet-card__title">
@@ -377,7 +378,7 @@
                             </div>
 
                             <div class="cabinet-card__element">
-                                <button  class="button button--gradient button--high-46">
+                                <button  class="button button--gradient button--high-46 form-open" data-form="form-sub">
                                     Узнать подробности
                                 </button>
                             </div>
@@ -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>
@@ -673,7 +674,487 @@
             </div>
         </footer>
 
+        <div class="modal">
+            <div class="modal-form modal__notification modal-form--green-gradient modal-form--width-584 form-sub">
+                <button class="modal-form__close modal-form__close--white"></button>
+
+                <p class="modal-form__title modal-form__title--white">Подписка на корм</p>
+
+                <div class="modal-form__element modal-form__element--top-40">
+                    <p class="modal-form__text modal-form__text--white">
+                        Спасибо за интерес к нашему новому виду услуг, данная функция находится в разработке, если вы хотите узнать первыми о запуске подпишитесь на рассылку. 
+                    </p>
+                </div>
+
+                <div class="modal-form__element modal-form__element--top-40">
+                    <button class="button form__button-pc button--white button--100-perc open-overlay button--high">
+                        Хочу попробовать первым!
+                    </button>
+                    <button class="button form__button-mobile button--white button--100-perc open-overlay button--high">
+                        Хочу быть первым!
+                    </button>
+                </div>
+            </div>
+
+            <div class="modal-form modal__notification modal-form--white modal-form--width-584">
+                <button class="modal-form__close"></button>
+
+                <p class="modal-form__title modal-form__text--center-pc modal-form__title--green-gradient">Ваш заказ оформлен</p>
+
+                <div class="modal-form__element">
+                    <p class="modal-form__text modal-form__text--weight-500 modal-form__text--center">
+                        Подтвердите вашу почту
+                    </p>
+                </div>
+                
+                <div class="modal-form__element">
+                    <img src="assets/img/modal/about_slider.png" alt="" class="modal-form__img">
+                </div>
+
+                <div class="modal-form__element modal-form__element--center">
+                    <button class="button button--gradient button--high-46">
+                        Подтвердить почту
+                    </button>
+                </div>
+            </div>
+
+            <div class="modal-form form__full-mobile modal-form--white modal-form--height-100-phone form-data">
+                <button class="modal-form__close"></button>
+                <p class="modal-form__title">Изменить мои данные</p>
+
+                <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>
+                            <input id="firstname" class="form__input" type="text" name="name" placeholder="Ваше имя" required="">
+                            <span class="form-input__error form-input__error--absolute">Имя введено неверно</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 form-input__error--absolute">Фамилия введена неверно</span>
+                        </div>                        
+                    </div>
+
+                    <div class="modal-form-content__line">
+                        <label for="firstname" class="label-name">Телефон</label>
+                        <div class="form-input__phone">
+                            <div class="form-input-phone__icon" style="background-image: url(assets/img/svg/country/ru.svg);"></div>
+                            <p class="form-input-phone__code">7</p>
+                            <input type="text" placeholder="___ ___ ____" pattern="[0-9]{3}\s[0-9]{3}\s[0-9]{4}" minlength="12" maxlength="12" class="form-input-phone__input" required>
+                            <div class="form-input__error form-input__error--absolute">Номер введён неверно</div>
+                            <div class="form-input-phone__list">
+                                <input type="text" placeholder="Поиск" class="form-input-phone-list__search">
+                                <div class="form-input-phone-list__content">
+                                    <button class="form-input-phone-list__item">
+                                        <img src="assets/img/svg/country/ru.svg" alt="" class="form-input-phone-list-item__icon">
+                                        <p class="form-input-phone-list-item__name">Россия</p>
+                                        <p class="form-input-phone-list-item__code">7</p>
+                                    </button>
+
+                                    <button class="form-input-phone-list__item">
+                                        <img src="assets/img/svg/country/ar.svg" alt="" class="form-input-phone-list-item__icon">
+                                        <p class="form-input-phone-list-item__name">Армения</p>
+                                        <p class="form-input-phone-list-item__code">374</p>
+                                    </button>
+
+                                    <button class="form-input-phone-list__item">
+                                        <img src="assets/img/svg/country/ar.svg" alt="" class="form-input-phone-list-item__icon">
+                                        <p class="form-input-phone-list-item__name">Армения</p>
+                                        <p class="form-input-phone-list-item__code">374</p>
+                                    </button>
+
+                                    <button class="form-input-phone-list__item">
+                                        <img src="assets/img/svg/country/ar.svg" alt="" class="form-input-phone-list-item__icon">
+                                        <p class="form-input-phone-list-item__name">Армения</p>
+                                        <p class="form-input-phone-list-item__code">374</p>
+                                    </button>
+
+                                    <button class="form-input-phone-list__item">
+                                        <img src="assets/img/svg/country/ar.svg" alt="" class="form-input-phone-list-item__icon">
+                                        <p class="form-input-phone-list-item__name">Армения</p>
+                                        <p class="form-input-phone-list-item__code">374</p>
+                                    </button>
+
+                                    <button class="form-input-phone-list__item">
+                                        <img src="assets/img/svg/country/ar.svg" alt="" class="form-input-phone-list-item__icon">
+                                        <p class="form-input-phone-list-item__name">Армения</p>
+                                        <p class="form-input-phone-list-item__code">374</p>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="modal-form__buttons modal-form__buttons--two">
+                        <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 class="modal-form form__full-mobile modal-form--white modal-form--height-100-phone form-pet">
+                <button class="modal-form__close"></button>
+                <p class="modal-form__title">Добавить питомца</p>
+
+                <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" ed name="pet" id="cat" class="form-input-tabs__input">
+                            </label>
+
+                            <label for="dog" class="form-input-tabs__button">
+                                Собака
+                                <input type="radio" name="pet" id="dog" class="form-input-tabs__input">
+                            </label>
+                        </div>
+                    </div>
+
+                    <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">
+                        <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">
+                        <label for="" class="label-name">Пол вашего питомца</label>
+
+                        <div class="form-input__tabs">
+                            <label for="boy" class="form-input-tabs__button active">
+                                Мальчик
+                                <input type="radio" ed name="floor" id="boy" class="form-input-tabs__input">
+                            </label>
+
+                            <label for="girl" class="form-input-tabs__button">
+                                Девочка
+                                <input type="radio" name="floor" id="girl" class="form-input-tabs__input">
+                            </label>
+                        </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>
+                            <div class="form-input__list">
+                                <input type="text" placeholder="Выберите из списка" class="form-input-list__input" readonly="">
+                                <div class="form-input-list__block-content">
+                                    <div class="form-input-list__content">
+                                        <button class="form-input-list__item">
+                                            <p class="form-input-list-item__text">Высокая</p>
+                                            <div class="form-input-list-item__box">
+                                                <div class="form-input-list-item-box__content">
+                                                    <img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
+                                                </div>
+                                            </div>
+                                        </button>
+                                        <button class="form-input-list__item">
+                                            <p class="form-input-list-item__text">Высокая</p>
+                                            <div class="form-input-list-item__box">
+                                                <div class="form-input-list-item-box__content">
+                                                    <img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
+                                                </div>
+                                            </div>
+                                        </button>
+                                        <button class="form-input-list__item">
+                                            <p class="form-input-list-item__text">Высокая 2</p>
+                                            <div class="form-input-list-item__box">
+                                                <div class="form-input-list-item-box__content">
+                                                    <img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
+                                                </div>
+                                            </div>
+                                        </button>
+                                        <button class="form-input-list__item">
+                                            <p class="form-input-list-item__text">Высокая</p>
+                                            <div class="form-input-list-item__box">
+                                                <div class="form-input-list-item-box__content">
+                                                    <img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
+                                                </div>
+                                            </div>
+                                        </button>
+                                        <button class="form-input-list__item">
+                                            <p class="form-input-list-item__text">Высокая</p>
+                                            <div class="form-input-list-item__box">
+                                                <div class="form-input-list-item-box__content">
+                                                    <img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
+                                                </div>
+                                            </div>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>  
+
+                        <div class="modal-form-content-line__element">
+                            <label for="firstname" class="label-name">Вес</label>
+                            <div class="form-input__list">
+                                <input type="text" placeholder="Выберите из списка" class="form-input-list__input" readonly="">
+                                <div class="form-input-list__block-content">
+                                    <div class="form-input-list__content">
+                                        <button class="form-input-list__item">
+                                            <p class="form-input-list-item__text">Высокая</p>
+                                            <div class="form-input-list-item__box">
+                                                <div class="form-input-list-item-box__content">
+                                                    <img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
+                                                </div>
+                                            </div>
+                                        </button>
+                                        <button class="form-input-list__item">
+                                            <p class="form-input-list-item__text">Высокая</p>
+                                            <div class="form-input-list-item__box">
+                                                <div class="form-input-list-item-box__content">
+                                                    <img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
+                                                </div>
+                                            </div>
+                                        </button>
+                                        <button class="form-input-list__item">
+                                            <p class="form-input-list-item__text">Высокая 2</p>
+                                            <div class="form-input-list-item__box">
+                                                <div class="form-input-list-item-box__content">
+                                                    <img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
+                                                </div>
+                                            </div>
+                                        </button>
+                                        <button class="form-input-list__item">
+                                            <p class="form-input-list-item__text">Высокая</p>
+                                            <div class="form-input-list-item__box">
+                                                <div class="form-input-list-item-box__content">
+                                                    <img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
+                                                </div>
+                                            </div>
+                                        </button>
+                                        <button class="form-input-list__item">
+                                            <p class="form-input-list-item__text">Высокая</p>
+                                            <div class="form-input-list-item__box">
+                                                <div class="form-input-list-item-box__content">
+                                                    <img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
+                                                </div>
+                                            </div>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>                        
+                    </div>
+
+                    <div class="modal-form-content__line">
+                        <label for="" class="label-name">Возраст питомца</label>
+                        <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" ed name="weight" id="exemplary" class="form-input-tabs__input">
+                            </label>
+
+                            <label for="accurate" class="form-input-tabs__button">
+                                Точный
+                                <input type="radio" name="weight" id="accurate" class="form-input-tabs__input">
+                            </label>
+                        </div>
+                    </div>
+
+                    <div class="modal__age">
+                        <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>
+                                </div>
+    
+                                <p class="form-input-radio__title">Малыш <span>(от 0 до 1 года)</span></p>
+                            </div>
+                            <div class="form-input-radio__item">
+                                <div class="form-input-radio__circle">
+                                    <div class="form-input-radio-circle__content"></div>
+                                </div>
+    
+                                <p class="form-input-radio__title">Взрослый <span>(от 1 года до 7 лет)</span></p>
+                            </div>
+                            <div class="form-input-radio__item">
+                                <div class="form-input-radio__circle">
+                                    <div class="form-input-radio-circle__content"></div>
+                                </div>
+    
+                                <p class="form-input-radio__title">Пожилой <span>(от 7 до 12 лет)</span></p>
+                            </div>
+                            <div class="form-input-radio__item">
+                                <div class="form-input-radio__circle">
+                                    <div class="form-input-radio-circle__content"></div>
+                                </div>
+    
+                                <p class="form-input-radio__title">Стареющий <span>(от 12 лет и старше)</span></p>
+                            </div>
+                            <input type="text" value="Малыш (от 0 до 1 года)" class="form-input-radio__input">
+                        </div>
+    
+                        <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="ДД" >
+                            </div>
+    
+                            <div class="modal-form-content-line__element">
+                                <label for="firstname" class="label-name">Месяц</label>
+                                <div class="form-input__list">
+                                    <input type="text" placeholder="Месяц" class="form-input-list__input" readonly="">
+                                    <div class="form-input-list__block-content">
+                                        <div class="form-input-list__content">
+                                            <button class="form-input-list__item">
+                                                <p class="form-input-list-item__text">Июнь</p>
+                                                <div class="form-input-list-item__box">
+                                                    <div class="form-input-list-item-box__content">
+                                                        <img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
+                                                    </div>
+                                                </div>
+                                            </button>
+                                            <button class="form-input-list__item">
+                                                <p class="form-input-list-item__text">Июль</p>
+                                                <div class="form-input-list-item__box">
+                                                    <div class="form-input-list-item-box__content">
+                                                        <img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
+                                                    </div>
+                                                </div>
+                                            </button>
+                                            <button class="form-input-list__item">
+                                                <p class="form-input-list-item__text">Август</p>
+                                                <div class="form-input-list-item__box">
+                                                    <div class="form-input-list-item-box__content">
+                                                        <img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
+                                                    </div>
+                                                </div>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+    
+                            <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]{4}" maxlength="4" type="text" name="name" placeholder="ГГГГ" >
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="modal-form__buttons">
+                        <input class="button button--gradient button--high button--filter button--100-perc" type="submit" value="Добавить">
+                    </div>
+                </form>
+            </div>
+
+            <div class="modal-map form__full-mobile modal-form--white">
+                <div class="modal-map__left">
+                    <p class="modal-form__title">Добавить адрес</p>
+                    <button class="modal-form__close"></button>
+
+                    <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">
+                                    <div class="modal-map-control-item__circle"><div class="modal-map-control-item-circle__content"></div></div>
+                                    <p class="modal-map-control-item__title">
+                                        Пункт выдачи
+                                    </p>
+                                </div>
+                                <div class="modal-map-control-item__description">
+                                    <p class="modal-map-control-item__time">До 2-х дней</p>
+                                    <p class="modal-map-control-item__price">Бесплатно</p>
+                                </div>
+                            </div>
+                        </button>
+
+                        <button class="modal-map-control__item active">
+                            <div class="modal-map-control-item__content">
+                                <div class="modal-map-control-item__header">
+                                    <div class="modal-map-control-item__circle"><div class="modal-map-control-item-circle__content"></div></div>
+                                    <p class="modal-map-control-item__title">
+                                        Курьером
+                                    </p>
+                                </div>
+                                <div class="modal-map-control-item__description">
+                                    <p class="modal-map-control-item__time">До 3-х дней</p>
+                                    <p class="modal-map-control-item__price">От 159 рублей</p>
+                                </div>
+                            </div>
+                        </button>
+                    </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-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>
+    
+                            <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">
+                    <div class="modal-map__map" style="position:relative;overflow:hidden;"><a href="https://yandex.ru/maps/213/moscow/?utm_medium=mapframe&utm_source=maps" style="color:#eee;font-size:12px;position:absolute;top:0px;">Москва</a><a href="https://yandex.ru/maps/213/moscow/?ll=37.710230%2C55.812249&mode=whatshere&utm_medium=mapframe&utm_source=maps&whatshere%5Bpoint%5D=37.622787%2C55.774846&whatshere%5Bzoom%5D=6.31&z=12.54" style="color:#eee;font-size:12px;position:absolute;top:14px;">Яндекс Карты — транспорт, навигация, поиск мест</a><iframe src="https://yandex.ru/map-widget/v1/?ll=37.710230%2C55.812249&mode=whatshere&whatshere%5Bpoint%5D=37.622787%2C55.774846&whatshere%5Bzoom%5D=6.31&z=12.54" width="560" height="400" frameborder="1" allowfullscreen="true" style="position:relative;"></iframe></div>
+                </div>
+
+                <div class="modal-form__buttons modal-form__buttons--two modal-map-form__sub-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>
+            </div>
+        </div>
+
 
         <script type="module" src="assets/js/gp-cabinet.js"></script>
+        <script src="assets/js/gp-form.js"></script>
     </body>
 </html>

subscription-first.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">
@@ -48,7 +49,6 @@
     
     </head>
     <body>
-
         <header class="header">
             <div class="header__content wrapper">
                 <button class="header__open-menu" id="phone-menu">
@@ -224,88 +224,480 @@
             </div>
         </header>
         
+        <main class="wrapper">
+            <div class="cabinet__control cabinet__control--column">
+                <a href="#" class="to-know to-know--start button--100-perc to-know--background-none">
+                    <p>Перейти в профиль</p>
+                </a>
 
-        <div class="modal active">
+                <div class="form-input__tabs form-input__tabs--control form-input__tabs--white">
-            <div class="modal-form form__full-mobile modal-form--white">
+                    <a class="form-input-tabs__button active">
-                <button class="modal-form__close"></button>
+                        Заказы
-                <p class="modal-form__title">Изменить мои данные</p>
+                    </a>
         
-                <form class="modal-form__content check" method="post" action="/send-telegram.php">
+                    <a class="form-input-tabs__button">
-                    <div class="modal-form-content__line modal-form-content__line--two">
+                        Подписки
-                        <div class="modal-form-content-line__element">
+                    </a>
-                            <label for="firstname" class="label-name">Имя</label>
+                </div>
-                            <input id="firstname" class="form__input" type="text" name="name" placeholder="Ваше имя" required="">
+            </div>
-                            <span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
+            <div class="cabinet">
-                        </div>
+                <div class="cabinet__profile cabinet-content">
+                    <div class="form-input__tabs form-input__tabs--control form-input__tabs--white">
+                        <a class="form-input-tabs__button active">
+                            Заказы
+                        </a>
             
-                        <div class="modal-form-content-line__element">
+                        <a class="form-input-tabs__button">
-                            <label for="lastname" class="label-name">Фамилия</label>
+                            Подписки
-                            <input id="lastname" class="form__input" type="text" name="name" placeholder="Ваша фамилия" required="">
+                        </a>
-                            <span class="form-input__error form-input__error--absolute">Фамилия введена неверно</span>
-                        </div>                        
                     </div>
                     
-                    <div class="modal-form-content__line">
+                    <div class="cabinet-card cabinet-card--green">
-                        <label for="firstname" class="label-name">Телефон</label>
+                        <div class="cabinet-card__content">
-                        <div class="form-input__phone">
+                            <div class="cabinet-card__element">
-                            <div class="form-input-phone__icon" style="background-image: url(assets/img/svg/country/ru.svg);"></div>
+                                <p class="cabinet-card__text cabinet-card__text--grey">Имя и фамилия  не указано</p>
-                            <p class="form-input-phone__code">7</p>
+                            </div>
-                            <input type="text" placeholder="___ ___ ____" pattern="[0-9]{3}\s[0-9]{3}\s[0-9]{4}" minlength="12" maxlength="12" class="form-input-phone__input" required>
+
-                            <div class="form-input__error form-input__error--absolute">Номер введён неверно</div>
+                            <div class="cabinet-card__element">
-                            <div class="form-input-phone__list">
+                                <p class="cabinet-card__label">Телефон:</p>
-                                <input type="text" placeholder="Поиск" class="form-input-phone-list__search">
+                                <p class="cabinet-card__text cabinet-card__text--grey">Не заполнено</p>
-                                <div class="form-input-phone-list__content">
+                            </div>
-                                    <button class="form-input-phone-list__item">
+
-                                        <img src="assets/img/svg/country/ru.svg" alt="" class="form-input-phone-list-item__icon">
+                            <div class="cabinet-card__element">
-                                        <p class="form-input-phone-list-item__name">Россия</p>
+                                <p class="cabinet-card__label">Почта:</p>
-                                        <p class="form-input-phone-list-item__code">7</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="form-input-phone-list__item">
+                                    <button class="cabinet-card__button">
-                                        <img src="assets/img/svg/country/ar.svg" alt="" class="form-input-phone-list-item__icon">
+                                        Выйти
-                                        <p class="form-input-phone-list-item__name">Армения</p>
-                                        <p class="form-input-phone-list-item__code">374</p>
-                                    </button>
-
-                                    <button class="form-input-phone-list__item">
-                                        <img src="assets/img/svg/country/ar.svg" alt="" class="form-input-phone-list-item__icon">
-                                        <p class="form-input-phone-list-item__name">Армения</p>
-                                        <p class="form-input-phone-list-item__code">374</p>
-                                    </button>
-
-                                    <button class="form-input-phone-list__item">
-                                        <img src="assets/img/svg/country/ar.svg" alt="" class="form-input-phone-list-item__icon">
-                                        <p class="form-input-phone-list-item__name">Армения</p>
-                                        <p class="form-input-phone-list-item__code">374</p>
-                                    </button>
-
-                                    <button class="form-input-phone-list__item">
-                                        <img src="assets/img/svg/country/ar.svg" alt="" class="form-input-phone-list-item__icon">
-                                        <p class="form-input-phone-list-item__name">Армения</p>
-                                        <p class="form-input-phone-list-item__code">374</p>
-                                    </button>
-
-                                    <button class="form-input-phone-list__item">
-                                        <img src="assets/img/svg/country/ar.svg" alt="" class="form-input-phone-list-item__icon">
-                                        <p class="form-input-phone-list-item__name">Армения</p>
-                                        <p class="form-input-phone-list-item__code">374</p>
                                     </button>
                                 </div>
                             </div>
                         </div>
                     </div>
 
-                    <div class="modal-form__buttons modal-form__buttons--two">
+                    <div class="cabinet-card cabinet-card--green">
-                        <input class="button button--gradient button--high button--filter " type="submit" value="Сохранить">
+                        <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>
 
-                        <input type="reset" class="button button--white open-overlay button--high" value="Отмена">
+                                 <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">
+                            <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__orders cabinet__orders--no-cab cabinet-content active hide">
+                    <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">Подписка № 7632</p>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="subscription">
+                                <div class="subscription__item">
+                                    <p>Статус</p>
+
+                                    <!-- <p class="subscription__status">Едет</p>
+                                    <p class="subscription__status--close">Отменен</p> -->
+                                    <p class="subscription__status--end">Ожидание</p>
+                                </div>
+                                <div class="subscription__item">
+                                    <p>Дата подписки</p>
+                                    <p>06.09.2024</p>
+                                </div>
+                                <div class="subscription__item">
+                                    <p>Дата последнего заказа</p>
+                                    <p>16.10.2024</p>
+                                </div>
+                                <div class="subscription__item">
+                                    <p>Следующий платеж</p>
+                                    <p>21.10.2024</p>
+                                </div>
+                                <div class="subscription__item">
+                                    <p>Способ оплаты</p>
+                                    <p>СБП</p>
+                                </div>
+                                <div class="subscription__item">
+                                    <div class="subscription__add">
+                                        <div class="subscription__add-header">
+                                            <p class="subscription__add-title">Товары:</p>
+                                        </div>
+
+                                        <div class="subscription__add-content">
+                                            <div class="cabinet-card-order-detail-main__product subscription__add-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__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>
+
+                                                <div class="cabinet-card-order-detail-main-product__content">
+                                                    <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 subscription__add-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__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>
+
+                                                <div class="cabinet-card-order-detail-main-product__content">
+                                                    <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 subscription__add-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__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>
+
+                                                <div class="cabinet-card-order-detail-main-product__content">
+                                                    <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>
+                                </div>
+                                <div class="subscription__item">
+                                    <p>Сумма</p>
+                                    <p><span>16420 ₽ <small>/ месяц</small></span></p>
+                                </div>
+                                <div class="subscription__item">
+                                    <p>Доставка</p>
+                                    <p>Бесплатно</p>
+                                </div>
+                                <div class="subscription__item">
+                                    <p>Итого</p>
+                                    <p><span>16420 ₽ <small>/ месяц</small></span></p>
+                                </div>
+                                <div class="subscription__item">
+                                    <div class="subscription__add" >
+                                        <div class="subscription__add-header">
+                                            <p class="subscription__add-title">Доставка:</p>
+                                        </div>
+
+                                        <div class="subscription__add-content" data-js-tabs>
+                                            <form action="">
+                                                <div class="modal-form-content__line">
+                                                    <div class="modal-form-content-line__element">
+                                                        <label for="firstname" class="label-name modal-form-content-line__element--arrow">Адрес доставки</label>
+                                                        <input id="firstname" class="form__input form-open" type="text" name="address" placeholder="Начните вводить адрес" required="" data-form="form-data">
+                                                        <span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
+                                                    </div>                    
+                                                </div>
+
+                                                <div class="modal-form-content__line">
+                                                    <div class="modal-form-content-line__element">
+                                                        <label for="firstname" class="label-name">Комментарий для доставки</label>
+                                                        <textarea  id="firstname" class="form__input form__input--textarea-72" type="text" name="name" placeholder="Для служьы доставки"></textarea>
+                                                        <span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
+                                                    </div>                    
+                                                </div>
+                                            </form>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+
+
+                            <a href="#" class="to-know to-know--start button--100-perc to-know--background-none">
+                                <p>Отменить подписку</p>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <footer class="footer">
+            <div class="footer__wrapper wrapper">
+                <div class="footer__content">
+                    <img src="assets/img/svg/logo/logo-gradient.svg" alt="" class="footer__logo">
+
+                    <address class="footer__address">
+                        123182 г. Москва, <br>
+                        4-й Красногорский пр., <br> 
+                        д. 2/4, стр. 1, этаж/ком. 3/1
+                    </address>
+
+                    <div class="footer__list">
+                        <div class="footer-list__item">
+                            <p class="footer-list__title">Отзывы и предложения</p>
+                            <a href="mailto:pro@cosmopet.shop" class="footer-list__link">
+                                pro@cosmopet.shop
+                            </a>
+                        </div>
+                        <div class="footer-list__item">
+                            <p class="footer-list__title">Связь с ветеринаром</p>
+                            <a href="mailto:vetvopros@cosmopet.shop" class="footer-list__link">
+                                vetvopros@cosmopet.shop
+                            </a>
+                        </div>
+                        <div class="footer-list__item">
+                            <p class="footer-list__title">Заявки для оптовых покупателей</p>
+                            <a href="mailto:pro@cosmopet.shop" class="footer-list__link">
+                                pro@cosmopet.shop
+                            </a>
+                        </div>
+                        <div class="footer-list__item">
+                            <a href="#" class="button button--black button--100-perc button--link">
+                                Чат бот с ветеринаром
+                            </a>
+                        </div>
+                    </div>
+
+                    <div class="footer__about">
+                        <div class="social-media">
+                            <a href="#" class="social-media__item">
+                                <img src="assets/img/svg/social-media/vk.svg" alt="" class="social-media__icon">
+                            </a>
+                            <a href="#" class="social-media__item">
+                                <img src="assets/img/svg/social-media/tg.svg" alt="" class="social-media__icon">
+                            </a>
+                            <a href="#" class="social-media__item">
+                                <img src="assets/img/svg/social-media/ya.svg" alt="" class="social-media__icon">
+                            </a>
+                        </div>
+
+                        <a href="#" class="footer-about__text">Соглашение о конфиденциальности</a>
+                    </div>
+                </div>
+    
+                <div class="footer__form">
+                    <form class="form" method="post" action="/send-telegram.php">
+                        <p class="form__title">
+                            Форма обратной связи
+                        </p>
+                        <div class="form__item">
+                            <input class="form__input" type="text" name="name" placeholder="Ваше имя" required>
+                        </div>
+                        <div class="form__item">
+                            <input class="form__input" type="text" name="name" placeholder="Эл.почта" required>
+                        </div>
+                        <div class="form__item">
+                            <textarea class="form__input form__input--textarea" name="" id="" placeholder="Текст обращения"></textarea>
+                        </div>
+                        <div class="form__item">
+                            <input class="form__button" type="submit" value="Отправить">
+                        </div>
+                    </form>
+                </div>
+
+                <div class="footer__social-media">
+                    <div class="social-media">
+                        <a href="#" class="social-media__item">
+                            <img src="assets/img/svg/social-media/vk.svg" alt="" class="social-media__icon">
+                        </a>
+                        <a href="#" class="social-media__item">
+                            <img src="assets/img/svg/social-media/tg.svg" alt="" class="social-media__icon">
+                        </a>
+                        <a href="#" class="social-media__item">
+                            <img src="assets/img/svg/social-media/ya.svg" alt="" class="social-media__icon">
+                        </a>
+                    </div>
+
+                    <a href="#" class="footer-about__text">Соглашение о конфиденциальности</a>
+                </div>
+                
+            </div>
+        </footer>
+
+        <div class="modal">
+            <div class="modal-form form__full-mobile modal-form--white modal-form--height-100-phone form-data">
+                <button class="modal-form__close"></button>
+                <p class="modal-form__title">АДРЕСС</p>
+
+                <form class="modal-form__content " method="post" action="/send-telegram.php">
+                    <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="apartment" placeholder="Номер квартиры" required="">
+                            <span class="form-input__error form-input__error--absolute">Введен неверно</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="floor" 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="entrance" placeholder="Номер подъезда">
+                        </div>
+
+                        <div class="modal-form-content-line__element">
+                            <label for="lastname" class="label-name">Домофон</label>
+                            <input id="lastname" class="form__input" type="text" name="intercom" placeholder="Код домофона">
+                        </div>                        
+                    </div>
+
+                    <div class="modal-form__buttons">
+                        <input class="button button--gradient button--high button--filter button--100-perc" type="submit" value="Доставить сюда">
                     </div>
                 </form>
             </div>
         </div>
 
+        <script type="module">
+            import * as fun from './assets/js/gp-function.js';
+            import TogglesCollection from './assets/js/toggle.js';
+            import TabsCollection from './assets/js/tabs.js'
+
+            new TogglesCollection();
+            new TabsCollection();
+
+            fun.modalFormOpen('.form-open');
+            fun.closeModalForm('.modal-form__close');
+            fun.closeModalForm('.modal-form__button-close');
+
+            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');
+                    }
+                }
+            }
+        </script>
 
         <!-- <script type="module" src="assets/js/gp-cabinet.js"></script> -->
-        <script type="module" src="assets/js/gp-form.js"></script>
+        <script src="assets/js/gp-form.js"></script>
     </body>
 </html>

subscription-order.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">
@@ -48,7 +49,6 @@
     
     </head>
     <body>
-
         <header class="header">
             <div class="header__content wrapper">
                 <button class="header__open-menu" id="phone-menu">
@@ -224,165 +224,450 @@
             </div>
         </header>
         
+        <main class="wrapper">
+            <div class="cabinet__control cabinet__control--column">
+                <a href="#" class="to-know to-know--start button--100-perc to-know--background-none">
+                    <p>Перейти в профиль</p>
+                </a>
 
-        <div class="modal active">
+                <div class="form-input__tabs form-input__tabs--control form-input__tabs--white">
-            <div class="modal-form modal-form--white">
+                    <a class="form-input-tabs__button active">
+                        Заказы
+                    </a>
+        
+                    <a class="form-input-tabs__button">
+                        Подписки
+                    </a>
+                </div>
+            </div>
+            <div class="cabinet">
+                <div class="cabinet__profile cabinet-content">
+                    <div class="form-input__tabs form-input__tabs--control form-input__tabs--white">
+                        <a class="form-input-tabs__button active">
+                            Заказы
+                        </a>
+            
+                        <a class="form-input-tabs__button">
+                            Подписки
+                        </a>
+                    </div>
+                    
+                    <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">
+                            <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__orders cabinet__orders--no-cab cabinet-content active hide">
+                    <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">7632</p>
+                                    </div>
+                                    <div class="cabinet-card-order__payment">
+                                        <p class="cabinet-card-order-payment__title">Сумма:</p>
+                                        <p class="cabinet-card-order-payment__price cabinet-card-order-payment__price--add">16420 ₽ <span>/ месяц</span></p>
+                                    </div>
+                                </div>
+
+                                <div class="cabinet-card-order__content">
+                                    <div class="cabinet-card-order__payment-add">
+                                        <p class="cabinet-card-order__sub-title">
+                                            Следующий платеж:
+                                        </p>
+                                        <p class="cabinet-card-order__date">
+                                            21.10.2024
+                                        </p>
+                                    </div>
+
+                                    <div class="cabinet-card-order__link">
+                                        <a href="#" class="to-know to-know--start button--100-perc to-know--background-none">
+                                            <p>Детали подписки</p>
+                                        </a>
+                                    </div>
+                                </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>
+
+                    <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">7632</p>
+                                    </div>
+                                    <div class="cabinet-card-order__payment">
+                                        <p class="cabinet-card-order-payment__title">Сумма:</p>
+                                        <p class="cabinet-card-order-payment__price cabinet-card-order-payment__price--add">16420 ₽ <span>/ месяц</span></p>
+                                    </div>
+                                </div>
+
+                                <div class="cabinet-card-order__content">
+                                    <div class="cabinet-card-order__payment-add">
+                                        <p class="cabinet-card-order__sub-title">
+                                            Следующий платеж:
+                                        </p>
+                                        <p class="cabinet-card-order__date">
+                                            21.10.2024
+                                        </p>
+                                    </div>
+
+                                    <div class="cabinet-card-order__link">
+                                        <a href="#" class="to-know to-know--start button--100-perc to-know--background-none">
+                                            <p>Детали подписки</p>
+                                        </a>
+                                    </div>
+                                </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>
+
+                    <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">7632</p>
+                                    </div>
+                                    <div class="cabinet-card-order__payment">
+                                        <p class="cabinet-card-order-payment__title">Сумма:</p>
+                                        <p class="cabinet-card-order-payment__price cabinet-card-order-payment__price--add">16420 ₽ <span>/ месяц</span></p>
+                                    </div>
+                                </div>
+
+                                <div class="cabinet-card-order__content">
+                                    <div class="cabinet-card-order__payment-add">
+                                        <p class="cabinet-card-order__sub-title">
+                                            Следующий платеж:
+                                        </p>
+                                        <p class="cabinet-card-order__date">
+                                            21.10.2024
+                                        </p>
+                                    </div>
+
+                                    <div class="cabinet-card-order__link">
+                                        <a href="#" class="to-know to-know--start button--100-perc to-know--background-none">
+                                            <p>Детали подписки</p>
+                                        </a>
+                                    </div>
+                                </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>
+
+                    <div class="cabinet-card-no-orders__element">
+                        <a href="#" class="to-know to-know--start button--100-perc to-know--background-none">
+                            <p>Показать ещё</p>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <footer class="footer">
+            <div class="footer__wrapper wrapper">
+                <div class="footer__content">
+                    <img src="assets/img/svg/logo/logo-gradient.svg" alt="" class="footer__logo">
+
+                    <address class="footer__address">
+                        123182 г. Москва, <br>
+                        4-й Красногорский пр., <br> 
+                        д. 2/4, стр. 1, этаж/ком. 3/1
+                    </address>
+
+                    <div class="footer__list">
+                        <div class="footer-list__item">
+                            <p class="footer-list__title">Отзывы и предложения</p>
+                            <a href="mailto:pro@cosmopet.shop" class="footer-list__link">
+                                pro@cosmopet.shop
+                            </a>
+                        </div>
+                        <div class="footer-list__item">
+                            <p class="footer-list__title">Связь с ветеринаром</p>
+                            <a href="mailto:vetvopros@cosmopet.shop" class="footer-list__link">
+                                vetvopros@cosmopet.shop
+                            </a>
+                        </div>
+                        <div class="footer-list__item">
+                            <p class="footer-list__title">Заявки для оптовых покупателей</p>
+                            <a href="mailto:pro@cosmopet.shop" class="footer-list__link">
+                                pro@cosmopet.shop
+                            </a>
+                        </div>
+                        <div class="footer-list__item">
+                            <a href="#" class="button button--black button--100-perc button--link">
+                                Чат бот с ветеринаром
+                            </a>
+                        </div>
+                    </div>
+
+                    <div class="footer__about">
+                        <div class="social-media">
+                            <a href="#" class="social-media__item">
+                                <img src="assets/img/svg/social-media/vk.svg" alt="" class="social-media__icon">
+                            </a>
+                            <a href="#" class="social-media__item">
+                                <img src="assets/img/svg/social-media/tg.svg" alt="" class="social-media__icon">
+                            </a>
+                            <a href="#" class="social-media__item">
+                                <img src="assets/img/svg/social-media/ya.svg" alt="" class="social-media__icon">
+                            </a>
+                        </div>
+
+                        <a href="#" class="footer-about__text">Соглашение о конфиденциальности</a>
+                    </div>
+                </div>
+    
+                <div class="footer__form">
+                    <form class="form" method="post" action="/send-telegram.php">
+                        <p class="form__title">
+                            Форма обратной связи
+                        </p>
+                        <div class="form__item">
+                            <input class="form__input" type="text" name="name" placeholder="Ваше имя" required>
+                        </div>
+                        <div class="form__item">
+                            <input class="form__input" type="text" name="name" placeholder="Эл.почта" required>
+                        </div>
+                        <div class="form__item">
+                            <textarea class="form__input form__input--textarea" name="" id="" placeholder="Текст обращения"></textarea>
+                        </div>
+                        <div class="form__item">
+                            <input class="form__button" type="submit" value="Отправить">
+                        </div>
+                    </form>
+                </div>
+
+                <div class="footer__social-media">
+                    <div class="social-media">
+                        <a href="#" class="social-media__item">
+                            <img src="assets/img/svg/social-media/vk.svg" alt="" class="social-media__icon">
+                        </a>
+                        <a href="#" class="social-media__item">
+                            <img src="assets/img/svg/social-media/tg.svg" alt="" class="social-media__icon">
+                        </a>
+                        <a href="#" class="social-media__item">
+                            <img src="assets/img/svg/social-media/ya.svg" alt="" class="social-media__icon">
+                        </a>
+                    </div>
+
+                    <a href="#" class="footer-about__text">Соглашение о конфиденциальности</a>
+                </div>
+                
+            </div>
+        </footer>
+
+        <div class="modal">
+            <div class="modal-form form__full-mobile modal-form--white modal-form--height-100-phone form-data">
                 <button class="modal-form__close"></button>
-                <p class="modal-form__title">Изменить мои данные</p>
+                <p class="modal-form__title">АДРЕСС</p>
+
+                <form class="modal-form__content " method="post" action="/send-telegram.php">
+                    <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>
 
-                <form class="modal-form__content check" 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>
+                            <label for="firstname" class="label-name">Квартира</label>
-                            <input id="firstname" class="form__input" type="text" name="name" placeholder="Ваше имя" required="">
+                            <input id="firstname" class="form__input" type="text" name="apartment" placeholder="Номер квартиры" required="">
-                            <span class="form-input__error">Имя введено неверно</span>
+                            <span class="form-input__error form-input__error--absolute">Введен неверно</span>
                         </div>
 
                         <div class="modal-form-content-line__element">
-                            <label for="lastname" class="label-name">Фамилия</label>
+                            <label for="lastname" class="label-name">Этаж</label>
-                            <input id="lastname" class="form__input" type="text" name="name" placeholder="Ваша фамилия" required="">
+                            <input id="lastname" class="form__input" type="text" name="floor" placeholder="Введите этаж" required="">
-                            <span class="form-input__error">Фамилия введена неверно</span>
+                            <span class="form-input__error form-input__error--absolute">Введен неверно</span>
                         </div>                        
                     </div>
 
-                    <div class="modal-form-content__line">
+                    <div class="modal-form-content__line modal-form-content__line--two">
-                        <div class="form-input__phone">
+                        <div class="modal-form-content-line__element">
-                            <div class="form-input-phone__icon" style="background-image: url(assets/img/svg/country/ru.svg);"></div>
+                            <label for="firstname" class="label-name">Подъезд</label>
-                            <p class="form-input-phone__code">7</p>
+                            <input id="firstname" class="form__input" type="text" name="entrance" placeholder="Номер подъезда">
-                            <input type="text" placeholder="___ ___ ____" minlength="12" maxlength="12" class="form-input-phone__input" required>
-                            <span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
-                            <div class="form-input-phone__list">
-                                <input type="text" placeholder="Поиск" class="form-input-phone-list__search">
-                                <div class="form-input-phone-list__content">
-                                    <button class="form-input-phone-list__item">
-                                        <img src="assets/img/svg/country/ru.svg" alt="" class="form-input-phone-list-item__icon">
-                                        <p class="form-input-phone-list-item__name">Россия</p>
-                                        <p class="form-input-phone-list-item__code">7</p>
-                                    </button>
-
-                                    <button class="form-input-phone-list__item">
-                                        <img src="assets/img/svg/country/ar.svg" alt="" class="form-input-phone-list-item__icon">
-                                        <p class="form-input-phone-list-item__name">Армения</p>
-                                        <p class="form-input-phone-list-item__code">374</p>
-                                    </button>
-
-                                    <button class="form-input-phone-list__item">
-                                        <img src="assets/img/svg/country/ar.svg" alt="" class="form-input-phone-list-item__icon">
-                                        <p class="form-input-phone-list-item__name">Армения</p>
-                                        <p class="form-input-phone-list-item__code">374</p>
-                                    </button>
-
-                                    <button class="form-input-phone-list__item">
-                                        <img src="assets/img/svg/country/ar.svg" alt="" class="form-input-phone-list-item__icon">
-                                        <p class="form-input-phone-list-item__name">Армения</p>
-                                        <p class="form-input-phone-list-item__code">374</p>
-                                    </button>
-
-                                    <button class="form-input-phone-list__item">
-                                        <img src="assets/img/svg/country/ar.svg" alt="" class="form-input-phone-list-item__icon">
-                                        <p class="form-input-phone-list-item__name">Армения</p>
-                                        <p class="form-input-phone-list-item__code">374</p>
-                                    </button>
-
-                                    <button class="form-input-phone-list__item">
-                                        <img src="assets/img/svg/country/ar.svg" alt="" class="form-input-phone-list-item__icon">
-                                        <p class="form-input-phone-list-item__name">Армения</p>
-                                        <p class="form-input-phone-list-item__code">374</p>
-                                    </button>
-                                </div>
-                            </div>
                         </div>
-                    </div>
 
-                    <div class="modal-form-content__line">
+                        <div class="modal-form-content-line__element">
-                        <div class="form-input__two">
+                            <label for="lastname" class="label-name">Домофон</label>
-                            <div class="form-input-two__oval"></div>
+                            <input id="lastname" class="form__input" type="text" name="intercom" placeholder="Код домофона">
-
-                            <button class="form-input-two__button">Кошка</button>
-                            <button class="form-input-two__button alternative">Собака</button>
-
-                            <input type="text" value="Кошка" class="form-input-two__input">
-                        </div>
-                    </div>
-
-                    <div class="form-input__radio">
-                        <div class="form-input-radio__item active">
-                            <div class="form-input-radio__circle">
-                                <div class="form-input-radio-circle__content"></div>
-                            </div>
-
-                            <p class="form-input-radio__title">Малыш (от 0 до 1 года)</p>
-                        </div>
-                        <div class="form-input-radio__item">
-                            <div class="form-input-radio__circle">
-                                <div class="form-input-radio-circle__content"></div>
-                            </div>
-
-                            <p class="form-input-radio__title">Взрослый (от 1 года до 7 лет)</p>
-                        </div>
-                        <input type="text" class="form-input-radio__input">
-                    </div>
-
-                    <div class="modal-form-content__line">
-                        <label for="firstname" class="label-name">Вид активности</label>
-                        <div class="form-input__list">
-                            <input type="text" placeholder="Выберите из списка" class="form-input-list__input" readonly>
-                            <div class="form-input-list__block-content">
-                                <div class="form-input-list__content">
-                                    <button class="form-input-list__item">
-                                        <p class="form-input-list-item__text">Высокая</p>
-                                        <div class="form-input-list-item__box">
-                                            <div class="form-input-list-item-box__content">
-                                                <img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
-                                            </div>
-                                        </div>
-                                    </button>
-                                    <button class="form-input-list__item">
-                                        <p class="form-input-list-item__text">Высокая</p>
-                                        <div class="form-input-list-item__box">
-                                            <div class="form-input-list-item-box__content">
-                                                <img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
-                                            </div>
-                                        </div>
-                                    </button>
-                                    <button class="form-input-list__item">
-                                        <p class="form-input-list-item__text">Высокая 2</p>
-                                        <div class="form-input-list-item__box">
-                                            <div class="form-input-list-item-box__content">
-                                                <img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
-                                            </div>
-                                        </div>
-                                    </button>
-                                    <button class="form-input-list__item">
-                                        <p class="form-input-list-item__text">Высокая</p>
-                                        <div class="form-input-list-item__box">
-                                            <div class="form-input-list-item-box__content">
-                                                <img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
-                                            </div>
-                                        </div>
-                                    </button>
-                                    <button class="form-input-list__item">
-                                        <p class="form-input-list-item__text">Высокая</p>
-                                        <div class="form-input-list-item__box">
-                                            <div class="form-input-list-item-box__content">
-                                                <img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
-                                            </div>
-                                        </div>
-                                    </button>
-                                </div>
-                            </div>
                         </div>                        
                     </div>
 
                     <div class="modal-form__buttons">
-                        <input class="form__button" type="submit" value="Отправить">
+                        <input class="button button--gradient button--high button--filter button--100-perc" type="submit" value="Доставить сюда">
                     </div>
                 </form>
             </div>
         </div>
 
+        <script type="module">
+            import TogglesCollection from './assets/js/toggle.js';
+            import TabsCollection from './assets/js/tabs.js'
+
+            new TogglesCollection();
+            new TabsCollection();
+        </script>
+        <script type="module" src="assets/js/gp-cabinet.js"></script>
 
         <!-- <script type="module" src="assets/js/gp-cabinet.js"></script> -->
-        <script type="module" src="assets/js/gp-form.js"></script>
+        <script src="assets/js/gp-form.js"></script>
     </body>
 </html>