fix inputTabs

сделал правки для subscription-order
удалил toggle на стрицых подписки
2025-05-05 14:26:59 +03:00 · 2025-05-03 20:53:17 +03:00 · 2025-05-03 20:24:53 +03:00 · 2025-05-02 16:56:48 +03:00 · 2025-05-02 16:41:59 +03:00 · 2025-05-02 16:32:34 +03:00
21 changed files with 5012 additions and 175 deletions
--- a/assets/css/gp-style-core.css
+++ b/assets/css/gp-style-core.css
--- a/assets/css/gp-style-desktop.css
+++ b/assets/css/gp-style-desktop.css
@@ -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: '₽';
@@ -1291,6 +1289,9 @@ main{

  transition: opacity .2s ease-out;
 }
+.cabinet-control__button:first-child{
+  margin-left: 0;
+}
 .cabinet-control__button.active{
  background: var(--background-black);
  color: var(--text-white);
@@ -1711,6 +1712,9 @@ main{
  margin-left: 5px;
  content: '₽';
 }
+.cabinet-card-order-payment__price--add::after{
+  display: none;
+}
 .cabinet-card-order__content{
  margin-top: 24px;
 }
@@ -1908,7 +1912,23 @@ 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{
+}
+.cabinet__subscription-mobile{
+  display: none;
+}
 /* cabinet */

@media only screen and (max-width: 1600px) {
@@ -1939,13 +1959,50 @@ main{
  
 }

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

-
-
-
-
-
-/* Стили для лептопов  */
-/* @media only screen and (min-width: 992px) and (max-width: 1400px) {
-
-} */
+}
+.subscription__add-title{
+  font-size: 24px;
+}
+.subscription__add-content{
+  padding: 24px 0 12px 0;
+}
+.subscription__add-product{
+  align-items: start;
+}
+.subscription__add-product > *:nth-child(3){
+ margin-left: auto;
+ align-items: center;
+}
+.subscription__add .cabinet-card-order-detail-main-product-description__what {
+  font-size: 16px;
+  line-height: 125%;
+}
+.subscription__add .cabinet-card-order-detail-main-product-description__with-what {
+  font-weight: 500;
+  font-size: 16px;
+}
+.subscription__add .cabinet-card-order-detail-main-product__count{
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 100%;
+}
+.subscription__add .cabinet-card-order-detail-main-product__price{
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 120%;
+}
--- a/assets/css/gp-style-mobile.css
+++ b/assets/css/gp-style-mobile.css
@@ -68,6 +68,43 @@
 .notification__title{
    padding-right: 96px;
 }
+.modal-form__buttons--two{
+    flex-wrap: wrap;
+}
+.modal-form__buttons--two button, .modal-form__buttons--two input{
+    margin-top: 24px;
+    width: 100%;
+}
+.modal-form__buttons--two button:first-child, .modal-form__buttons--two input:first-child{
+    margin-top: 0;
+}
+.modal-map__control{
+    flex-wrap: wrap;
+}
+.modal-map-control__item{
+    width: calc(100% - 24px);
+}
+.form__full-mobile{
+    width: 100%;
+    border-radius: 0;
+    border: none;
+}
+
+.modal-form-content__line--three .modal-form-content-line__element:nth-child(1){
+    width: 69px;
+}
+.modal-form-content__line--three .modal-form-content-line__element:nth-child(2){
+
+}
+.modal-form-content__line--three .modal-form-content-line__element:nth-child(3){
+    width: 82px;
+}
+.form__input{
+    padding: 12px 14px;
+}
+.modal-form--height-100-phone{
+    min-height: 100%;
+}
 /* modal */

 /* footer */
@@ -164,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 */
@@ -189,6 +231,15 @@
 .modal__aside{
    left: 0;
 }
+.form-input-radio__title span{
+    display: block;
+    width: 100%;
+
+    color: var(--text-grey);
+}
+.modal-form__title{
+    font-size: 20px;
+}
 /* modal */

 /* detail */
@@ -219,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;
+    }
+}
+
--- a/assets/css/gp-style-order.css
+++ b/assets/css/gp-style-order.css
@@ -0,0 +1,241 @@
+.order{
+    display: flex;
+}
+.order__title{
+    font-family: var(--font-family);
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 117%;
+    text-transform: uppercase;
+    color: var(--text-black);
+}
+.order__contacts{
+    width: calc(50% - 0.5px);
+
+    padding: 24px;
+
+    border-right: 1px solid #121212;
+}
+.order-contacts__header{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.order-contacts__form{
+    margin-top: 24px;
+}
+.order-contacts__delivery{
+    margin-top: 47.5px;
+
+    padding-top: 48px;
+
+    border-top: 1px solid var(--background-grey);
+}
+
+.order-contacts-deliver__item{
+    margin-top: 24px;
+}
+.order-contacts-deliver__date{
+    padding: 8px;
+
+    border-radius: 24px;
+
+    background: var(--background-grey);
+}
+.order-contacts-deliver__date .form-input-radio__item{
+    margin-top: 24px;
+}
+.order-contacts-deliver__date .form-input-radio__item:first-child{
+    margin-top: 0;
+}
+.order__your{  
+    width: calc(50% - 0.5px);
+
+    padding: 24px 24px 24px 48px;
+
+    background: var(--background-grey);
+}
+.order-your__products{
+    margin-top: 48px;
+}
+.order-your-products__item{
+    margin-top: 16px;
+
+    display: flex;
+    justify-content: space-between;
+}
+.order-your-products__left{
+    display: flex;
+}
+.order-your-products__img{
+    width: 40px;
+    aspect-ratio: 1;
+
+    border-radius: 16px;
+}
+.order-your-products__content{
+    margin-left: 16px;
+}
+.order-your-products__name{
+    font-family: var(--font-family);
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 133%;
+    color: var(--text-black);
+
+    text-decoration: none;
+}
+.order-your-products__description{
+    margin-top: 8px;
+
+    font-family: var(--font-family);
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 133%;
+    color: var(--text-6);
+}
+.order-your-products__description span{
+    font-weight: 700;
+}
+.order-your-products__description span::before{
+    margin-left: 3px;
+
+    content: 'x ';
+}
+.order-your-products__right{
+    display: flex;
+}
+.order-your-products__count{
+    font-family: var(--font-family);
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 133%;
+    text-align: right;
+    color: var(--text-6);
+}
+.order-your-products__count::before{
+    content: 'x';
+}
+.order-your-products__price{
+    margin-left: 16px;
+
+    font-family: var(--font-family);
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 133%;
+    text-align: right;
+    color: var(--text-black);
+}
+.order-your-products__price::after{
+    content: 'Р';
+}
+.order-your__calculation{
+    margin-top: 48px;
+}
+.order-your__promo{
+    display: flex;
+}
+.order-your-promo__button{
+    margin-left: 8px;
+}
+.order-your-calculation__item{
+    margin-top: 24px;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.order-your-calculation__title{
+    font-family: var(--font-family);
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 120%;
+    color: var(--text-black);
+}
+.order-your-calculation__value{
+    font-family: var(--font-family);
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 200%;
+    text-transform: uppercase;
+    text-align: right;
+    color: var(--text-black);
+}
+.order-your-calculation__value--price::after{
+    content: ' ₽';
+}
+.order-your-calculation__value--discount{
+    background: var(--gradient-red);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+.order-your-calculation__value--discount::before{
+    content: '- ';
+}
+.order-your-calculation__description{
+    font-family: var(--font-family);
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 133%;
+    text-align: right;
+    color: var(--text-9);
+}
+.order-your-calculation__line{
+    margin-top: 23px;
+    border: 1px solid var(--background-9);
+}
+.order-your-calculation__result{
+    font-family: var(--font-family);
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 117%;
+    text-transform: uppercase;
+    color: var(--text-black);
+}
+.order-your-calculation__submit{
+    margin-top: 48px;
+}
+
+@media only screen and (max-width: 1200px) {
+.order{
+    display: block;
+}
+.order__contacts, .order__your{
+    border: none;
+    width: 100%;
+}
+}
+
+@media only screen and (max-width: 720px) {
+.order__title{
+    max-width: 181px;
+
+    font-size: 20px;
+    line-height: 120%;
+}
+.order__your{
+    margin-top: 16px;
+}
+.order__contacts{
+    padding: 24px 16px;
+}
+.order__your{
+    padding: 40px 16px 9px 16px;
+}
+.order-your__promo{
+    display: block;
+}
+.order-your-promo__button{
+    margin-left: 0;
+    margin-top: 24px;
+
+    width: 100%;
+}
+.order-your-products__content{
+    max-width: 164px;
+}
+.order-your-products__count, .order-your-products__price{
+    flex-shrink: 0;
+}
+}
--- a/assets/css/gp-style-tablet.css
+++ b/assets/css/gp-style-tablet.css
@@ -102,23 +102,116 @@ main{
 /* product */

 /* modal */
+.modal{
+    padding: 0;
+}
 .modal__text{
    padding-right: 0;
 }
+.form__button-pc{
+    display: none;
+}
+.form__button-mobile{
+    display: block;
+}
+.modal-form{
+    /* min-height: 100%;
+    width: 100%;
+
+    border-radius: 0;
+    border: none; */
+}
+.modal__notification{
+    margin: 24px;
+}
+.form-input-phone__list{
+    left: 0;
+}
+
+.modal-form-content__line--two{
+    flex-wrap: wrap;
+}
+.modal-form-content__line--two .modal-form-content-line__element{
+    margin-top: 24px;
+
+    width: 100%;
+}
+.modal-form-content__line--two .modal-form-content-line__element:first-child{
+    margin-top: 0;
+}
+.modal-map{
+    width: 100%;
+
+    flex-direction: column;
+
+    border-radius: 0;
+}
+.modal-map__left, .modal-map__right{
+    width: 100%;
+}
+.modal-map__map iframe {
+    width: 100%;
+    height: 528px;
+}
+.modal-map-form__button{
+    display: none;
+}
+.modal-map-form__sub-button{
+    margin-top: 64px;
+
+    padding: 0 24px;
+
+    display: flex;
+  }
 /* modal */

 /* cabinet */
 .cabinet{
    flex-direction: column;
+
+    position: relative;
 }
 .cabinet__control{
    display: flex;
-    align-items: center;
+
+    position: relative;
 }
 .cabinet__orders, .cabinet__profile{
+    width: calc(100% - 48px);
+}
+.cabinet__orders, .cabinet__profile{
+    position: absolute;
+    opacity: 0;
+
+    transition: opacity .2s ease-out;
+}
+.cabinet-content{
+    pointer-events:none;
+}
+.cabinet__orders.active, .cabinet__profile.active{
+    opacity: 1;
+}
+.cabinet__orders.hide, .cabinet__profile.hide{
+    position: static;
+    display: block;
+    pointer-events:auto;
+
    width: 100%;
 }
+.cabinet__subscription-pc{
+    display: none;
+}
+.cabinet__subscription-mobile{
+  display: block;

+  margin: 24px 24px 0 24px;
+}
+.cabinet__orders .cabinet-card:nth-child(2){
+    margin-top: 0;
+  }
+  .cabinet__orders--no-cab .cabinet-card:nth-child(2){
+    margin-top: 32px;
+  }
 /* cabinet */
 }

@@ -248,5 +341,8 @@ main{
 .cabinet-card__order.active .cabinet-card-order__open-detail{
    margin-top: 24px;
 }
+.cabinet-card-order__link{
+    margin-top: 144px;
+}
 /* cabinet */
 }
--- a/assets/img/svg/country/ar.svg
+++ b/assets/img/svg/country/ar.svg
@@ -0,0 +1,13 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_230_9775)">
+<path d="M0 0H16V5.33437H0V0Z" fill="#D90012"/>
+<path d="M0 5.33447H16V10.6657H0V5.33447Z" fill="#0033A0"/>
+<path d="M0 10.6655H16V15.9999H0V10.6655Z" fill="#F2A800"/>
+</g>
+<rect x="0.1" y="0.1" width="15.8" height="15.8" stroke="#999999" stroke-width="0.2"/>
+<defs>
+<clipPath id="clip0_230_9775">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/assets/img/svg/country/ru.svg
+++ b/assets/img/svg/country/ru.svg
@@ -0,0 +1,13 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_230_9627)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H16V16H0V0Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 5.33447H16V16.0001H0V5.33447Z" fill="#0039A6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 10.6655H16V15.9999H0V10.6655Z" fill="#D52B1E"/>
+</g>
+<rect x="0.1" y="0.1" width="15.8" height="15.8" stroke="#999999" stroke-width="0.2"/>
+<defs>
+<clipPath id="clip0_230_9627">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/assets/img/svg/main/arrow-right-input.svg
+++ b/assets/img/svg/main/arrow-right-input.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 8.24268H3" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 8.24268L9.75736 12.4853" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 8.24268L9.75736 4.00003" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/assets/img/svg/main/triangle-grey.svg
+++ b/assets/img/svg/main/triangle-grey.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.75 5.25L1.25 2.75L6.25 2.75L3.75 5.25Z" fill="#999999"/>
+</svg>
--- a/assets/js/gp-cabinet.js
+++ b/assets/js/gp-cabinet.js
@@ -2,4 +2,66 @@

 import * as fun from './_gp-function.js';

+let widthPhoneCabinet = 1200;
+
 fun.toggleOpenX('.cabinet-card__order', '.cabinet-card-order__open-detail', '.cabinet-card-order__detail', '.cabinet-card-order__block-detail');
+fun.modalFormOpen('.form-open');
+
+fun.closeModalForm('.modal-form__close');
+fun.closeModalForm('.modal-form__button-close');
+
+controlCabinet('.cabinet-control__button', '.cabinet', widthPhoneCabinet);
+
+function controlCabinet(buttons, main, minWidth){
+    let thisWidth = window.innerWidth;
+    let thisMain = document.querySelector(main);
+
+    let thisButtons = document.querySelectorAll(buttons);
+
+    thisButtons.forEach(e => {
+        e.onclick = function (element){
+            let thisContent = document.querySelector(`.cabinet__${e.dataset.cabinet}`);
+            let newHeight = thisContent.clientHeight + 48;
+            let thisButton = element.target;
+
+            thisMain.style.height = `${newHeight}px`
+
+            if (!thisContent.classList.contains('active')) {
+                thisMain.querySelector('.active').classList.remove('active');
+                thisContent.classList.add('active');
+
+                setTimeout(() => {
+                    thisMain.style.height = 'auto';
+
+                    if (thisMain.querySelector('.hide')) {
+                        thisMain.querySelector('.hide').classList.remove('hide');
+                    }
+
+                    thisMain.querySelector('.active').classList.add('hide');
+                }, 200);
+            }
+
+            thisButtons.forEach(e => {
+                e.classList.remove('active');
+            })
+            thisButton.classList.add('active');
+        }
+    })
+
+}
+
+let modal = document.querySelector('.modal');
+modal.onclick = function (eventModal) {
+    let thisTarget = eventModal.target;
+
+    if (thisTarget.classList.contains('modal')) {
+        thisTarget.classList.remove('active');
+
+        if (!thisTarget.querySelector('.modal-map.active')) {
+            thisTarget.querySelector('.modal-form.active').classList.remove('active');
+        }else{
+            thisTarget.querySelector('.modal-map.active').classList.remove('active');
+        }
+    }
+}
+
--- a/assets/js/gp-form.js
+++ b/assets/js/gp-form.js
@@ -0,0 +1,286 @@
+'use strict';
+
+
+inputPhone('.form-input__phone', '.form-input-phone__icon', '.form-input-phone__code', '.form-input-phone__input', '.form-input-phone__list', 'form-input-phone-list__item', '.form-input-phone-list-item__icon', '.form-input-phone-list-item__code', 'form-input-phone-list__search');
+
+function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon, selectCode, searchInput) {
+    let inputs = document.querySelectorAll(main);
+
+    inputs.forEach(e => {
+        let thisMainFlag = e.querySelector(mainFlag), 
+            thisMainCode  = e.querySelector(mainCode),
+            thisInput  = e.querySelector(input),
+            thisList  = e.querySelector(list),
+            thisSelects  = e.querySelectorAll(`.${selects}`),
+            thisSearchInput = e.querySelector(`.${searchInput}`);
+
+        thisInput.onblur = function (input) {
+            if (!(input.relatedTarget != null && (input.relatedTarget.classList.contains(searchInput) || input.relatedTarget.classList.contains(selects)))) {
+                thisList.classList.remove('active');                 
+            }
+        }
+
+        e.onclick = function (event) {
+            if (!event.target.classList.contains(searchInput)) {
+                if (thisList.classList.contains('active')) {
+                    thisList.classList.remove('active');
+                }
+
+                thisInput.focus();
+                thisList.classList.add('active');
+            }
+        }
+
+        thisSelects.forEach(e => {
+            let newIcon = e.querySelector(selectIcon),
+                newCode = e.querySelector(selectCode);
+
+            e.onclick = function (event) {
+                event.preventDefault();
+                thisMainFlag.style.cssText = `background-image:url("${newIcon.src}");`;
+                thisMainCode.textContent = newCode.textContent;
+                
+
+                setTimeout(() => {
+                    thisList.classList.remove('active');
+                }, 0);
+            }
+            
+        })
+    })
+}
+
+if (document.querySelector('.form-input-phone__input')) {
+    checkPhone('.form-input-phone__input');
+}
+
+function checkPhone(input) {
+    document.querySelector(input).addEventListener('input', function(event) {
+        let text = event.target.value;
+        let length = text.length;
+        let newSymbol = event.data;
+
+        if (!(/^\d+$/.test(text.replaceAll(' ', '')))) {
+            event.target.value = text.slice(0, -1);
+            return;
+        }
+
+        if (length == 4 || length == 8) {
+            if (newSymbol != null) {
+                event.target.value = text.slice(0, -1) + ' ' + newSymbol;
+            }
+        }
+    })
+}
+
+inputTabs('.form-input__tabs', '.form-input-tabs__button');
+inputTabs('.modal-map__control', '.modal-map-control__item');
+
+function inputTabs(main, button) {
+    let mains = document.querySelectorAll(main);
+
+    mains.forEach(main => {
+        let buttons = main.querySelectorAll(button);
+
+        buttons.forEach(button => {
+            button.onclick = function () {
+                if (button.classList.contains('active')) {
+                    return ;
+                }
+
+                main.querySelector('.active').classList.remove('active');
+
+                button.classList.add('active');
+
+                if (button.querySelector('input')){
+                    button.querySelector('input').click();
+                } 
+            }
+        })
+        
+    })
+}
+
+
+inputRadio('.form-input__radio', '.form-input-radio__item', '.form-input-radio__title', '.form-input-radio__input')
+
+function inputRadio(main ,item, textClass, input) {
+    let inputRadios = document.querySelectorAll(main);
+
+    inputRadios.forEach(inputRadio => {
+        let items = inputRadio.querySelectorAll(item),
+            thisInput = inputRadio.querySelector(input);
+
+        items.forEach(radio => {
+            let thisText = radio.querySelector(textClass).textContent;
+
+            radio.onclick = function (event) {
+                event.preventDefault();
+
+                if (inputRadio.querySelector(`${item}.active`)) {
+                    inputRadio.querySelector(`${item}.active`).classList.remove('active');
+                }
+                thisInput.value = thisText;
+                radio.classList.add('active');
+            }
+        })
+    })
+}
+
+listInputRadio('.form-input__list' ,'.form-input-list__item', '.form-input-list-item__text', '.form-input-list__input', '.form-input-list__content', '.form-input-list__block-content');
+
+function listInputRadio(main ,item, textClass, input, content, block) {
+    let listInputRadios = document.querySelectorAll(main);
+
+    listInputRadios.forEach(listInputRadio => {
+        let thisInput = listInputRadio.querySelector(input),
+            items = listInputRadio.querySelectorAll(item),
+            thisContent = listInputRadio.querySelector(content),
+            thisBlock = listInputRadio.querySelector(block);
+
+        thisInput.onclick = function () {
+            thisBlock.classList.add('active');
+            thisBlock.style.height = '192px';
+        }
+
+
+        thisInput.onblur = function(){
+            thisBlock.classList.remove('active');
+            thisBlock.style.height = '0px';
+        };
+
+        items.forEach(item => {
+            item.onclick = function (event) {
+                event.preventDefault();
+                let newText = item.querySelector(textClass).textContent;
+
+                thisInput.value = newText;
+                
+                if (thisContent.querySelector('.active')) {
+                    thisContent.querySelector('.active').classList.remove('active');
+                }
+
+                item.classList.add('active');
+            }
+        })
+    })
+}
+
+remoteControl('.form-input__remote-control', '.form-input-tabs__button');
+remoteControl('.modal-map__control', '.modal-map-control__item');
+
+function remoteControl(main, button) {
+    let mains = document.querySelectorAll(main);
+
+    mains.forEach(main => {
+        let subjectClass = main.dataset.content,
+            subject  = document.querySelector(`.${subjectClass}`),
+            buttons = Array.from(main.querySelectorAll(button));
+
+        main.addEventListener('click', function (eventMain) {
+            setTimeout(() => {
+                let indexActive = buttons.findIndex((button, index) => {
+                    if (button.classList.contains('active')) {
+                        return true;
+                    }
+                });
+                if(subject.children[indexActive].classList.contains('active')){
+                    return ;
+                }
+                
+                subject.querySelector('.remote-control__item.active').classList.remove('active');
+                subject.children[indexActive].classList.add('active');
+
+                let mandatorys = subject.querySelectorAll('.mandatory');
+
+                mandatorys.forEach(mandatory => {
+                    if (mandatory.required) {
+                        mandatory.required = false;
+                    }else{
+                        mandatory.required = true;
+                    }
+                })
+            }, 0);
+        })
+    })
+}
+
+formCheck('.modal-form__content', 'input[type=submit]');
+formCheck('.modal-map__form', 'input[type=submit]');
+
+function formCheck(form, submit) {
+    let forms = document.querySelectorAll(form);
+
+    forms.forEach(form => {
+        let thisSubmit = form.querySelector(submit);
+
+        thisSubmit.onclick = function () {
+            form.classList.add('check')
+        }
+        
+    })
+}
+
+inputPhoneNoFlag('.no-flag');
+
+function inputPhoneNoFlag(input){
+    let inputs = document.querySelectorAll(input);
+
+    inputs.forEach(input => {
+        let code = '+' + input.dataset.code;
+        
+        input.onfocus = function () {
+            if (input.value == '') {
+                input.value = code;
+            }
+        }
+
+        input.addEventListener('input', function(event) {
+            let text = event.target.value;
+            let length = text.length;
+            let newSymbol = event.data;
+
+            if (isNaN(event.data) || event.data == ' ') {
+                event.target.value = text.slice(0, -1);
+                return;
+            }
+
+            if (length == 3 || length == 7 || length == 11) {
+                if (newSymbol != null) {
+                    event.target.value = text.slice(0, -1) + ' ' + newSymbol;
+                }
+            }
+            
+        })
+    })
+}
+
+
+inputCheck('.form-agreement__check');
+
+function inputCheck(className) {
+    let checks = document.querySelectorAll(className);
+
+    checks.forEach(check => {
+        let square = check.querySelector('.form-agreement__square'),
+            input = check.querySelector('input');
+
+        square.onclick = function () {
+            input.click();   
+        }
+    })
+}
+
+
+inputRead('.input-read');
+function inputRead(className) {
+    let inputs = document.querySelectorAll(className);
+
+    inputs.forEach(input => {
+        input.addEventListener("input", function (event) {
+            let text = event.target.value;
+
+            event.target.value = text.slice(0, -1);            
+        })
+    })
+}
--- a/assets/js/_gp-function.js
+++ b/assets/js/_gp-function.js
@@ -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);

@@ -121,4 +138,19 @@ 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
--- a/assets/js/tabs.js
+++ b/assets/js/tabs.js
@@ -0,0 +1,67 @@
+const rootSelectorTabs = '[data-js-tabs]';
+
+class Tabs{
+    // элементы для поиска
+    selectors = {
+        root: rootSelectorTabs,
+        button: '[data-js-tabs-button]',
+        content: '[data-js-tabs-content]',
+    }
+    // класс отображения состояния
+    stateClasses = {
+        isActive: 'active',
+    }
+
+    constructor(rootElement){
+        this.rootElement = rootElement;
+        this.buttonElements = this.rootElement.querySelectorAll(this.selectors.button);
+        this.contentElements = this.rootElement.querySelectorAll(this.selectors.content);
+        this.state = {
+            activeMenuIndex: [...this.buttonElements]
+                .findIndex((buttonElement) => buttonElement.classList.contains(this.stateClasses.isActive)),
+        };
+        this.limitTabsIndex = this.buttonElements.length - 1;
+        this.bindEvents();
+    }
+
+    updateUI(){
+        const { activeMenuIndex } = this.state;
+
+        this.buttonElements.forEach((buttonElement, index) => {
+            const isActive = index === activeMenuIndex;
+
+            buttonElement.classList.toggle(this.stateClasses.isActive, isActive);
+        })
+
+        this.contentElements.forEach((contentElement, index) => {
+            const isActive = index === activeMenuIndex;
+
+            contentElement.classList.toggle(this.stateClasses.isActive, isActive);
+        })
+    }
+
+    onButtonClick(buttonIndex){
+        this.state.activeMenuIndex = buttonIndex;
+        this.updateUI();
+    }
+
+    bindEvents(){
+        this.buttonElements.forEach((buttonElement, index) => {
+            buttonElement.addEventListener('click', () => this.onButtonClick(index))
+        })
+    }
+}
+
+class TabsCollection {
+    constructor(){
+        this.init();
+    }
+
+    init(){
+        document.querySelectorAll(rootSelectorTabs).forEach((element) => {
+            new Tabs(element);
+        });
+    }
+}
+
+export default TabsCollection;
--- a/assets/js/toggle.js
+++ b/assets/js/toggle.js
@@ -0,0 +1,89 @@
+const rootSelectorToggles = '[data-js-toggle]';
+
+class Toggle{
+    // элементы для поиска
+    selectors = {
+        root: rootSelectorToggles,
+        button: '[data-js-toggle-button]',
+        wrapper: '[data-js-toggle-wrapper]',
+        content: '[data-js-toggle-content]',
+    }
+    // класс отображения состояния
+    stateClasses = {
+        isActive: 'active',
+    }
+
+    constructor(rootElement){
+        this.rootElement = rootElement;
+        this.buttonElements = this.rootElement.querySelectorAll(this.selectors.button);
+        this.wrapperElements = this.rootElement.querySelectorAll(this.selectors.wrapper);
+        this.contentElements = this.rootElement.querySelectorAll(this.selectors.content);
+        this.state = {
+            activeToggleIndex: [...this.buttonElements]
+                .findIndex((buttonElement) => buttonElement.classList.contains(this.stateClasses.isActive)),
+        };
+        this.bindEvents();
+    }
+
+    updateUI(newHeight){
+        const { activeToggleIndex } = this.state;
+
+        this.buttonElements.forEach((buttonElement, index) => {
+            const isActive = index === activeToggleIndex;
+
+            buttonElement.classList.toggle(this.stateClasses.isActive, isActive);
+        })
+
+        this.wrapperElements.forEach((wrapperElement, index) => {
+            const isActive = index === activeToggleIndex,
+                  newHeight = this.contentElements[index].offsetHeight;
+
+            wrapperElement.classList.toggle(this.stateClasses.isActive, isActive);
+
+            if (isActive) {
+                wrapperElement.style.height = `${newHeight}px`;
+
+                setTimeout(() => {
+                    if (wrapperElement.classList.contains('active')) {
+                        wrapperElement.style.height = `auto`;
+                    }
+                }, 300);
+            }else{
+                wrapperElement.style.height = `${newHeight}px`;
+
+                setTimeout(() => {
+                    if (!wrapperElement.classList.contains('active')) {
+                        wrapperElement.style.height = `${0}px`;
+                    }
+                }, 10);
+            }
+        })
+
+    }
+
+    onButtonClick(buttonIndex){
+        this.state.activeToggleIndex = (buttonIndex === this.state.activeToggleIndex) ? -1 : buttonIndex;
+
+        this.updateUI();
+    }
+
+    bindEvents(){
+        this.buttonElements.forEach((buttonElement, index) => {
+            buttonElement.addEventListener('click', () => this.onButtonClick(index))
+        })
+    }
+}
+
+class TogglesCollection{    
+    constructor(){
+        this.init();
+    }
+
+    init(){
+        document.querySelectorAll(rootSelectorToggles).forEach((element) => {
+            new Toggle(element);
+        });
+    }
+}
+
+export default TogglesCollection;
--- a/new.html
+++ b/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">
--- a/notification.html
+++ b/notification.html
@@ -225,99 +225,8 @@
        </header>

        
-
-        <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 active">
+        </div>


        <!-- <script src="assets/js/gp-main.js"></script> -->
--- a/notification-sub.html
+++ b/notification-sub.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,27 +225,419 @@
            </div>
        </header>
        
-        <div class="modal active">
-            <div class="notification notification--green-gradient notification--width-584">
-                <button class="notification__close notification__close--white"></button>
+        <main class="wrapper">
+            <div class="order">
+                <form action="" id="recipient" class="order__contacts">
+                    <div class="order-contacts__header">    
+                        <p class="order__title">
+                            Контакты получателя
+                        </p>

-                <p class="notification__title notification__title--white">Подписка на корм</p>
+                        <button class="cabinet-card__button">
+                            Выйти
+                        </button>
+                    </div>

-                <div class="notification__element notification__element--top-40">
-                    <p class="notification__text notification__text--white">
-                        Спасибо за интерес к нашему новому виду услуг, данная функция находится в разработке, если вы хотите узнать первыми о запуске подпишитесь на рассылку. 
-                    </p>
+                    <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="notification__element notification__element--top-40">
-                    <button class="button button--white button--100-perc open-overlay button--high">
-                        Хочу быть первым!
-                    </button>
+                <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>
+
+                <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>
+
+            <div class="modal-form form__full-mobile modal-form--white modal-form--height-100-phone form-address">
+                <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__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 modal-form-content__line--two-mobile">
+                        <div class="modal-form-content-line__element">
+                            <label for="apartment" class="label-name">Квартира</label>
+                            <input id="apartment" class="form__input" type="text" placeholder="Квартира" required="">
+                            <span class="form-input__error form-input__error--absolute">Квартира введено неверно</span>
+                        </div>
+
+                        <div class="modal-form-content-line__element">
+                            <label for="floor" class="label-name">Этаж</label>
+                            <input id="floor" 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 modal-form-content__line--two-mobile">
+                        <div class="modal-form-content-line__element">
+                            <label for="entrance" class="label-name">Подъезд</label>
+                            <input id="entrance" class="form__input" type="text" placeholder="Подъезд" required="">
+                            <span class="form-input__error form-input__error--absolute">Подъезд введен неверно</span>
+                        </div>
+
+                        <div class="modal-form-content-line__element">
+                            <label for="number-phone" class="label-name">Домофон</label>
+                            <input id="number-phone" class="form__input" type="text" placeholder="Код домофона" required="">
+                            <span class="form-input__error form-input__error--absolute">Код домофона введен неверно</span>
+                        </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 src="assets/js/gp-main.js"></script> -->
+        <script type="module" src="assets/js/gp-cabinet.js"></script>
+        <script src="assets/js/gp-form.js"></script>
    </body>
 </html>
--- a/registration.html
+++ b/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">
@@ -225,12 +226,28 @@
        </header>
        
        <main class="wrapper">
+            <div class="cabinet-card cabinet-card--green-white cabinet__subscription-mobile">
+                <div class="cabinet-card__content">
+                    <p class="cabinet-card__title">
+                        Подписка на корм
+                    </p>
+                    <div class="cabinet-card__element">
+                        <p class="cabinet-card__text">Еженедельная доставка корма для вашего питомца</p>
+                    </div>
+
+                    <div class="cabinet-card__element">
+                        <button class="button button--gradient button--high-46 form-open" data-form="form-sub">
+                            Узнать подробности
+                        </button>
+                    </div>
+                </div>
+            </div>
            <div class="cabinet__control">
-                <button class="cabinet-control__button active">Заказы</button>
-                <button class="cabinet-control__button">Профиль</button>
+                <button class="cabinet-control__button active start" data-cabinet="orders">Заказы</button>
+                <button class="cabinet-control__button" data-cabinet="profile">Профиль</button>
            </div>
            <div class="cabinet">
-                <div class="cabinet__profile">
+                <div class="cabinet__profile cabinet-content">
                    <div class="cabinet-card cabinet-card--green">
                        <div class="cabinet-card__content">
                            <div class="cabinet-card__element">
@@ -269,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>

@@ -293,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>
@@ -338,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>
@@ -350,8 +367,8 @@
                        </div>
                    </div>
                </div>
-                <div class="cabinet__orders">
-                    <div class="cabinet-card cabinet-card--green-white">
+                <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">
                                Подписка на корм
@@ -361,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>
@@ -549,17 +566,17 @@
                            <p class="cabinet-card-no-orders__title">Пока нет заказов</p>
                        </div>
                        <div class="cabinet-card-no-orders__element">
-                            <button class="to-know button--100-perc to-know--background-none">
+                            <a href="#" class="to-know button--100-perc to-know--background-none">
                                <p>Перейти в каталог</p>
-                            </button>
+                            </a>
                        </div>
                    </div>

-                    <div class="cabinet-card__download">
+                    <!-- <div class="cabinet-card__download">
                        <button class="cabinet-card__button">
                            Показать ещё
                        </button>
-                    </div>
+                    </div> -->
                </div>
            </div>
        </main>
@@ -657,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>
--- a/subscription-first.html
+++ b/subscription-first.html
--- a/subscription-last.html
+++ b/subscription-last.html
--- a/notification-decorated.html
+++ b/notification-decorated.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,31 +224,450 @@
            </div>
        </header>
        
-        <div class="modal active">
-            <div class="notification notification--white notification--width-584">
-                <button class="notification__close"></button>
+        <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>

-                <p class="notification__title notification__text--center-pc notification__title--green-gradient">Ваш заказ оформлен</p>
+                <div class="form-input__tabs form-input__tabs--control form-input__tabs--white">
+                    <a class="form-input-tabs__button active">
+                        Заказы
+                    </a>
        
-                <div class="notification__element">
-                    <p class="notification__text notification__text--weight-500 notification__text--center">
-                        Подтвердите вашу почту
-                    </p>
+                    <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="notification__element">
-                    <img src="assets/img/modal/about_slider.png" alt="" class="notification__img">
+                <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="notification__element notification__element--center">
-                    <button class="button button--gradient button--high-46">
-                        Подтвердить почту
-                    </button>
+                <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 TogglesCollection from './assets/js/toggle.js';
+            import TabsCollection from './assets/js/tabs.js'

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