fix inputTabs

assets/css/gp-style-core.css

@@ -13,6 +13,10 @@
 400 - Regular
 */
 
+a{
+  cursor: pointer;
+}
+
 /* Craftwork Grotesk */
 @font-face {
     font-family: "Craftwork Grotesk";
@@ -714,6 +718,14 @@ button{
 
   position: relative;
 }
+.form-input__tabs--white{
+  padding: 3px;
+  border: 1px solid var(--text-3);
+  background: var(--white);
+}
+.form-input__tabs--white .form-input-tabs__button.active{
+  background: var(--gradient-turquoise);
+}
 .form-input-tabs__button{
   width: 100%;
 
@@ -796,6 +808,9 @@ button{
   line-height: 120%;
   color: var(--text-dark);
 }
+.form-input-radio__title.form-input-radio__title--no-span span{
+  color: var(--text-dark);
+}
 .form-input-radio__price{
   margin-left: auto;
 
@@ -966,6 +981,29 @@ button{
   line-height: 120%;
   color: var(--text-black);
 }
+.form-agreement__input{
+  display: none;
+}
+.form-agreement__input:checked + .form-agreement__square{
+  border: none;
+  background: var(--gradient-blue);
+
+  position: relative;
+}
+.form-agreement__input:checked + .form-agreement__square::after{
+  content: '';
+
+  position: absolute;
+  top: 1px;
+  left: 1px;
+
+  width: 16px;
+  aspect-ratio: 1;
+
+  background-image: url(../img/svg/main/arrow-selected-white.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+}
 /* form */
 
 
@@ -1184,6 +1222,12 @@ button{
   transition: opacity .2s ease-out;
   text-decoration: none;
 }
+
+.to-know--start{
+  justify-content: start;
+  padding-left: 0;
+}
+
 .to-know:hover{
   opacity: .8;
 }
@@ -1736,6 +1780,9 @@ button{
 .modal-form--width-584{
   width: 584px;
 }
+.modal-form--cdek{
+  width: 836px;
+}
 .modal-form__close{
   position: absolute;
   top: 24px;
@@ -1752,6 +1799,8 @@ button{
   background-position: center;
 
   transition: opacity .2s ease-out;
+
+  z-index: 10;
 }
 .modal-form__close--white{
   background-image: url(../img/svg/main/white-x.svg);
@@ -1827,6 +1876,13 @@ button{
   display: flex;
   justify-content: space-between;
 }
+.modal-form-content__line--two-mobile{
+  display: flex;
+  justify-content: space-between;
+}
+.modal-form-content__line--two-mobile .modal-form-content-line__element{
+  width: calc(50% - 12px);
+}
 .modal-form-content-line__element{
   position: relative;
 }
@@ -1841,6 +1897,8 @@ button{
   height: 16px;
 
   background-image: url(../img/svg/main/arrow-right-input.svg);
+
+  pointer-events: none;
 }
 .modal-form-content__line--two .modal-form-content-line__element{
   width: calc(50% - 12px);
@@ -1952,6 +2010,9 @@ button{
   background: var(--background-9);
   position: relative;
 }
+.modal-map-control-item__input{
+  display: none;
+}
 .modal-map-control-item-circle__content{
   width: 16px;
   aspect-ratio: 1;
@@ -2204,4 +2265,97 @@ button{
   to {
     opacity: 1;
   }
+}
+
+.subscription{
+  
+}
+.subscription__item{
+  display: flex;
+
+  color: var(--text-black);
+  font-family: var(--font-family);
+  font-weight: 500;
+  line-height: 120%;
+}
+.subscription__item:nth-last-child(n + 2){
+  border-bottom: 1px solid var(--background-9);
+}
+.subscription__item span{
+  font-weight: 700;
+}
+.subscription__item span small{
+  font-size: 16px;
+}
+.subscription__status{
+  color: var(--text-black);
+}
+.subscription__status--close{
+  color: var(--text-red);
+}
+.subscription__status--end{
+  color: var(--text-green);
+}
+.subscription__add{
+  width: 100%;
+}
+.subscription__add-header{
+}
+.subscription__add-product{
+  align-items: start;
+}
+.subscription__add-product > *:not(:first-child){
+  padding-top: 14px;
+}
+.subscription__add-title{
+  font-family: var(--font-family);
+  font-weight: 600;
+  line-height: 133%;
+}
+.subscription__add-content{
+
+}
+
+.tabs__buttons{
+  margin: -12px;
+
+  display: flex;
+  flex-wrap: wrap;
+}
+.tabs__content-wrap{
+  margin-top: 24px;
+}
+.tabs__content{
+  display: none;
+}
+.tabs__content.active{
+  display: block;
+}
+
+.cabinet__control--column{
+  flex-direction: column;
+}
+
+.cabinet__control--column > *:not(:first-child){
+  margin-top: 16px
+}
+
+.cabinet-card-order__payment{
+
+}
+.cabinet-card-order__sub-title{
+  font-family: var(--font-family);
+  font-weight: 600;
+  line-height: 143%;
+  color: var(--text-3);
+}
+.cabinet-card-order__date{
+  font-family: var(--font-family);
+  font-weight: 700;
+  line-height: 125%;
+  color: var(--text-3);
+}
+
+.cabinet-card-order-payment__price span{
+  font-size: 12px;
 }

assets/css/gp-style-desktop.css

@@ -248,7 +248,6 @@
     font-weight: 500;
     font-size: 16px;
     line-height: 125%;
-    color: #121212;
     color: var(--text-black);
 
     text-decoration: none;
@@ -892,7 +891,6 @@ main{
   font-size: 36px;
   line-height: 111%;
   text-transform: uppercase;
-  color: #121212;
 }
 .detail-block-price__price::after{
   content: '₽';
@@ -1714,6 +1712,9 @@ main{
   margin-left: 5px;
   content: '₽';
 }
+.cabinet-card-order-payment__price--add::after{
+  display: none;
+}
 .cabinet-card-order__content{
   margin-top: 24px;
 }
@@ -1911,6 +1912,17 @@ main{
 .cabinet-card__order.active .cabinet-card-order__open-detail::after{
   transform: rotate(180deg);
 }
+.cabinet-card-order__payment-add{
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+}
+.cabinet-card-order__sub-title{
+  font-size: 14px;
+}
+.cabinet-card-order__date{
+  font-size: 16px;
+}
 /* .cabinet-card-no-orders__ */
 .cabinet__subscription-pc{
 }
@@ -1947,13 +1959,50 @@ main{
   
 }
 
+.subscription{
+  margin-top: 12px;
+}
+.subscription__item{
+  padding: 12px 0;
+  justify-content: space-between;
+}
+.subscription__item{
+  font-size: 20px;
+}
+.subscription__add{
+  color: var(--text-black);
+}
+.subscription__add-header{
 
-
-
-
-
-
-/* Стили для лептопов  */
-/* @media only screen and (min-width: 992px) and (max-width: 1400px) {
-
-} */
+}
+.subscription__add-title{
+  font-size: 24px;
+}
+.subscription__add-content{
+  padding: 24px 0 12px 0;
+}
+.subscription__add-product{
+  align-items: start;
+}
+.subscription__add-product > *:nth-child(3){
+ margin-left: auto;
+ align-items: center;
+}
+.subscription__add .cabinet-card-order-detail-main-product-description__what {
+  font-size: 16px;
+  line-height: 125%;
+}
+.subscription__add .cabinet-card-order-detail-main-product-description__with-what {
+  font-weight: 500;
+  font-size: 16px;
+}
+.subscription__add .cabinet-card-order-detail-main-product__count{
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 100%;
+}
+.subscription__add .cabinet-card-order-detail-main-product__price{
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 120%;
+}

assets/css/gp-style-mobile.css

@@ -204,6 +204,9 @@
 .cabinet-card__content{
     padding-right: 19px;
 }
+.cabinet-card-order-main__date{
+    font-size: 20px;
+}
 /* .cabinet-card__order.active */
 /* .cabinet-card__order.active */
 /* cabinet */
@@ -266,4 +269,68 @@
     transition-duration: 0;
 }
 /* cabinet */
-}
+}
+
+@media only screen and (max-width: 720px) {
+    .subscription__item{
+        flex-direction: column;
+    }
+
+    .subscription__item > p:first-child{
+        font-size: 16px;
+        color: var(--text-6);
+    }
+    .subscription__item > p:last-child{
+        margin-top: 6px;
+    }
+
+    .subscription__add-title {
+        font-size: 20px;
+    }
+
+    .subscription__add-product{
+        flex-wrap: wrap;
+    }
+
+    .subscription__add-product > *:not(:first-child){
+        padding-top: 0;
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product__img{
+        width: 73px;
+        height: 66px;
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product-description__what{
+        font-size: 12px;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product-description__with-what{
+        margin-top: 8px;
+
+        font-size: 12px;
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product__description {
+        width: calc(100% - 73px);
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product__content{
+        position: static;
+        margin-top: -10px;
+        margin-left: auto;
+        width: calc(100% - 73px);
+
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product__count{
+        position: static;
+        font-size: 12px;
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product__price{
+        position: static;
+        font-size: 16px;
+    }
+}
+

assets/css/gp-style-order.css

@@ -82,6 +82,8 @@
     font-size: 12px;
     line-height: 133%;
     color: var(--text-black);
+
+    text-decoration: none;
 }
 .order-your-products__description{
     margin-top: 8px;
@@ -92,6 +94,14 @@
     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;
 }
@@ -133,6 +143,7 @@
 
     display: flex;
     justify-content: space-between;
+    align-items: center;
 }
 .order-your-calculation__title{
     font-family: var(--font-family);
@@ -184,4 +195,47 @@
 }
 .order-your-calculation__submit{
     margin-top: 48px;
+}
+
+@media only screen and (max-width: 1200px) {
+.order{
+    display: block;
+}
+.order__contacts, .order__your{
+    border: none;
+    width: 100%;
+}
+}
+
+@media only screen and (max-width: 720px) {
+.order__title{
+    max-width: 181px;
+
+    font-size: 20px;
+    line-height: 120%;
+}
+.order__your{
+    margin-top: 16px;
+}
+.order__contacts{
+    padding: 24px 16px;
+}
+.order__your{
+    padding: 40px 16px 9px 16px;
+}
+.order-your__promo{
+    display: block;
+}
+.order-your-promo__button{
+    margin-left: 0;
+    margin-top: 24px;
+
+    width: 100%;
+}
+.order-your-products__content{
+    max-width: 164px;
+}
+.order-your-products__count, .order-your-products__price{
+    flex-shrink: 0;
+}
 }

assets/css/gp-style-tablet.css

@@ -209,6 +209,9 @@ main{
 .cabinet__orders .cabinet-card:nth-child(2){
     margin-top: 0;
   }
+  .cabinet__orders--no-cab .cabinet-card:nth-child(2){
+    margin-top: 32px;
+  }
 /* cabinet */
 }
 
@@ -338,5 +341,8 @@ main{
 .cabinet-card__order.active .cabinet-card-order__open-detail{
     margin-top: 24px;
 }
+.cabinet-card-order__link{
+    margin-top: 144px;
+}
 /* cabinet */
 }

assets/js/gp-form.js

@@ -91,6 +91,10 @@ function inputTabs(main, button) {
                 main.querySelector('.active').classList.remove('active');
 
                 button.classList.add('active');
+
+                if (button.querySelector('input')){
+                    button.querySelector('input').click();
+                } 
             }
         })
         
@@ -173,9 +177,6 @@ function remoteControl(main, button) {
             subject  = document.querySelector(`.${subjectClass}`),
             buttons = Array.from(main.querySelectorAll(button));
 
-            console.log(main);
-            
-
         main.addEventListener('click', function (eventMain) {
             setTimeout(() => {
                 let indexActive = buttons.findIndex((button, index) => {
@@ -189,23 +190,97 @@ function remoteControl(main, button) {
                 
                 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]');
+formCheck('.modal-form__content', 'input[type=submit]');
+formCheck('.modal-map__form', 'input[type=submit]');
 
-// function formCheck(form, submit) {
-//     let forms = document.querySelectorAll(form);
+function formCheck(form, submit) {
+    let forms = document.querySelectorAll(form);
 
-//     forms.forEach(form => {
-//         let thisSubmit = form.querySelector(submit);
+    forms.forEach(form => {
+        let thisSubmit = form.querySelector(submit);
 
-//         thisSubmit.onclick = function () {
-//             form.classList.add('check')
-//         }
+        thisSubmit.onclick = function () {
+            form.classList.add('check')
+        }
         
-//     })
-// }
+    })
+}
+
+inputPhoneNoFlag('.no-flag');
+
+function inputPhoneNoFlag(input){
+    let inputs = document.querySelectorAll(input);
+
+    inputs.forEach(input => {
+        let code = '+' + input.dataset.code;
+        
+        input.onfocus = function () {
+            if (input.value == '') {
+                input.value = code;
+            }
+        }
+
+        input.addEventListener('input', function(event) {
+            let text = event.target.value;
+            let length = text.length;
+            let newSymbol = event.data;
+
+            if (isNaN(event.data) || event.data == ' ') {
+                event.target.value = text.slice(0, -1);
+                return;
+            }
+
+            if (length == 3 || length == 7 || length == 11) {
+                if (newSymbol != null) {
+                    event.target.value = text.slice(0, -1) + ' ' + newSymbol;
+                }
+            }
+            
+        })
+    })
+}
+
+
+inputCheck('.form-agreement__check');
+
+function inputCheck(className) {
+    let checks = document.querySelectorAll(className);
+
+    checks.forEach(check => {
+        let square = check.querySelector('.form-agreement__square'),
+            input = check.querySelector('input');
+
+        square.onclick = function () {
+            input.click();   
+        }
+    })
+}
+
+
+inputRead('.input-read');
+function inputRead(className) {
+    let inputs = document.querySelectorAll(className);
+
+    inputs.forEach(input => {
+        input.addEventListener("input", function (event) {
+            let text = event.target.value;
+
+            event.target.value = text.slice(0, -1);            
+        })
+    })
+}

assets/js/tabs.js

@@ -0,0 +1,67 @@
+const rootSelectorTabs = '[data-js-tabs]';
+
+class Tabs{
+    // элементы для поиска
+    selectors = {
+        root: rootSelectorTabs,
+        button: '[data-js-tabs-button]',
+        content: '[data-js-tabs-content]',
+    }
+    // класс отображения состояния
+    stateClasses = {
+        isActive: 'active',
+    }
+
+    constructor(rootElement){
+        this.rootElement = rootElement;
+        this.buttonElements = this.rootElement.querySelectorAll(this.selectors.button);
+        this.contentElements = this.rootElement.querySelectorAll(this.selectors.content);
+        this.state = {
+            activeMenuIndex: [...this.buttonElements]
+                .findIndex((buttonElement) => buttonElement.classList.contains(this.stateClasses.isActive)),
+        };
+        this.limitTabsIndex = this.buttonElements.length - 1;
+        this.bindEvents();
+    }
+
+    updateUI(){
+        const { activeMenuIndex } = this.state;
+
+        this.buttonElements.forEach((buttonElement, index) => {
+            const isActive = index === activeMenuIndex;
+
+            buttonElement.classList.toggle(this.stateClasses.isActive, isActive);
+        })
+
+        this.contentElements.forEach((contentElement, index) => {
+            const isActive = index === activeMenuIndex;
+
+            contentElement.classList.toggle(this.stateClasses.isActive, isActive);
+        })
+    }
+
+    onButtonClick(buttonIndex){
+        this.state.activeMenuIndex = buttonIndex;
+        this.updateUI();
+    }
+
+    bindEvents(){
+        this.buttonElements.forEach((buttonElement, index) => {
+            buttonElement.addEventListener('click', () => this.onButtonClick(index))
+        })
+    }
+}
+
+class TabsCollection {
+    constructor(){
+        this.init();
+    }
+
+    init(){
+        document.querySelectorAll(rootSelectorTabs).forEach((element) => {
+            new Tabs(element);
+        });
+    }
+}
+
+export default TabsCollection;

assets/js/toggle.js

@@ -0,0 +1,89 @@
+const rootSelectorToggles = '[data-js-toggle]';
+
+class Toggle{
+    // элементы для поиска
+    selectors = {
+        root: rootSelectorToggles,
+        button: '[data-js-toggle-button]',
+        wrapper: '[data-js-toggle-wrapper]',
+        content: '[data-js-toggle-content]',
+    }
+    // класс отображения состояния
+    stateClasses = {
+        isActive: 'active',
+    }
+
+    constructor(rootElement){
+        this.rootElement = rootElement;
+        this.buttonElements = this.rootElement.querySelectorAll(this.selectors.button);
+        this.wrapperElements = this.rootElement.querySelectorAll(this.selectors.wrapper);
+        this.contentElements = this.rootElement.querySelectorAll(this.selectors.content);
+        this.state = {
+            activeToggleIndex: [...this.buttonElements]
+                .findIndex((buttonElement) => buttonElement.classList.contains(this.stateClasses.isActive)),
+        };
+        this.bindEvents();
+    }
+
+    updateUI(newHeight){
+        const { activeToggleIndex } = this.state;
+
+        this.buttonElements.forEach((buttonElement, index) => {
+            const isActive = index === activeToggleIndex;
+
+            buttonElement.classList.toggle(this.stateClasses.isActive, isActive);
+        })
+
+        this.wrapperElements.forEach((wrapperElement, index) => {
+            const isActive = index === activeToggleIndex,
+                  newHeight = this.contentElements[index].offsetHeight;
+
+            wrapperElement.classList.toggle(this.stateClasses.isActive, isActive);
+
+            if (isActive) {
+                wrapperElement.style.height = `${newHeight}px`;
+
+                setTimeout(() => {
+                    if (wrapperElement.classList.contains('active')) {
+                        wrapperElement.style.height = `auto`;
+                    }
+                }, 300);
+            }else{
+                wrapperElement.style.height = `${newHeight}px`;
+
+                setTimeout(() => {
+                    if (!wrapperElement.classList.contains('active')) {
+                        wrapperElement.style.height = `${0}px`;
+                    }
+                }, 10);
+            }
+        })
+
+    }
+
+    onButtonClick(buttonIndex){
+        this.state.activeToggleIndex = (buttonIndex === this.state.activeToggleIndex) ? -1 : buttonIndex;
+
+        this.updateUI();
+    }
+
+    bindEvents(){
+        this.buttonElements.forEach((buttonElement, index) => {
+            buttonElement.addEventListener('click', () => this.onButtonClick(index))
+        })
+    }
+}
+
+class TogglesCollection{    
+    constructor(){
+        this.init();
+    }
+
+    init(){
+        document.querySelectorAll(rootSelectorToggles).forEach((element) => {
+            new Toggle(element);
+        });
+    }
+}
+
+export default TogglesCollection;

new.html

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

order.html

@@ -227,7 +227,7 @@
         
         <main class="wrapper">
             <div class="order">
-                <div class="order__contacts">
+                <form action="" id="recipient" class="order__contacts">
                     <div class="order-contacts__header">    
                         <p class="order__title">
                             Контакты получателя
@@ -238,11 +238,11 @@
                         </button>
                     </div>
 
-                    <form action="" class="order-contacts__form modal-form__content check">
+                    <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 id="firstname" class="form__input" type="text" name="name" placeholder="Ваше имя" required="">
+                                <input class="form__input" type="text" placeholder="Ваше имя" required="">
                                 <span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
                             </div>                    
                         </div>
@@ -259,71 +259,28 @@
                                         re
                                     </div>
                                 </div>
-                                <input id="firstname" class="form__input" type="text" name="name" placeholder="Начните вводить ваш email" required="">
+                                <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">
+                            <div class="modal-form-content-line__element">
                                 <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>                 
+                                <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>
-                                <p class="form-agreement__label">Запомнить меня</p>
+                                <label for="remember" class="form-agreement__label">Запомнить меня</label>
                             </div>
                         </div>
-                    </form>
+                    </div>
 
                     <div class="order-contacts__delivery">
                         <p class="order__title">Доставка</p>
@@ -342,6 +299,7 @@
                                         <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 ">
@@ -357,6 +315,7 @@
                                         <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>
 
@@ -365,7 +324,7 @@
                                 <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" type="text" name="name" placeholder="Выберите пункт выдачи" required="" readonly>
+                                        <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>
@@ -373,7 +332,7 @@
                                 <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" type="text" name="name" placeholder="Выберите адрес доставки" required="" readonly>
+                                        <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>
 
@@ -385,7 +344,7 @@
                                                     <div class="form-input-radio-circle__content"></div>
                                                 </div>
                     
-                                                <p class="form-input-radio__title">2 марта с 10-18 часов</p>
+                                                <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
@@ -396,7 +355,7 @@
                                                     <div class="form-input-radio-circle__content"></div>
                                                 </div>
                     
-                                                <p class="form-input-radio__title">2 марта с 18-22 часов</p>
+                                                <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
@@ -407,7 +366,7 @@
                                                     <div class="form-input-radio-circle__content"></div>
                                                 </div>
                     
-                                                <p class="form-input-radio__title">3 марта с 10-18 часов</p>
+                                                <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
@@ -421,13 +380,13 @@
                                 <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="Для служьы доставки" required="" ></textarea>
+                                        <textarea id="firstname" class="form__input form__input--textarea-72 form__input--grey" type="text" name="name" placeholder="Для службы доставки"></textarea>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                </div>
+                </form>
 
                 <div class="order__your">
                     <p class="order__title">Ваш заказ</p>
@@ -438,7 +397,7 @@
                                 <img src="/assets/img/product/mini-card.png" alt="" class="order-your-products__img">
 
                                 <div class="order-your-products__content">
-                                    <p class="order-your-products__name">Сухой корм, для крупных и средних пород </p>
+                                    <a href="#" class="order-your-products__name">Сухой корм, для крупных и средних пород </a>
                                     <p class="order-your-products__description">Индейка, 2 кг </p>
                                 </div>
                             </div>
@@ -458,7 +417,7 @@
                                 <img src="/assets/img/product/mini-card.png" alt="" class="order-your-products__img">
 
                                 <div class="order-your-products__content">
-                                    <p class="order-your-products__name">Сухой корм, для крупных и средних пород </p>
+                                    <a href="#" class="order-your-products__name">Сухой корм, для крупных и средних пород </a>
                                     <p class="order-your-products__description">Индейка, 2 кг </p>
                                 </div>
                             </div>
@@ -478,8 +437,8 @@
                                 <img src="/assets/img/product/mini-card.png" alt="" class="order-your-products__img">
 
                                 <div class="order-your-products__content">
-                                    <p class="order-your-products__name">Сухой корм, для крупных и средних пород </p>
-                                    <p class="order-your-products__description">Индейка, 2 кг </p>
+                                    <a href="#" class="order-your-products__name">Сухой корм, для крупных и средних пород </a>
+                                    <p class="order-your-products__description">Индейка, 2 кг<span>1</span></p>
                                 </div>
                             </div>
 
@@ -496,7 +455,7 @@
 
                     <div class="order-your__calculation">
                         <form action="" class="order-your__promo">
-                            <input id="firstname" class="form__input form__input--grey" type="text" name="name" placeholder="Промокод" required="">
+                            <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>
@@ -524,9 +483,7 @@
                         </div>
 
                         <div class="order-your-calculation__submit">
-                            <button class="button button--gradient button--high button--100-perc">
-                                Оплатить
-                            </button>
+                            <input type="submit" form="recipient" class="button button--gradient button--high button--100-perc" value="Оплатить">
                         </div>
                     </div>
                 </div>
@@ -627,7 +584,56 @@
         </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>