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%;
 
@@ -2254,3 +2266,96 @@ button{
     opacity: 1;
   }
 }
+
+.subscription{
+  
+}
+.subscription__item{
+  display: flex;
+
+  color: var(--text-black);
+  font-family: var(--font-family);
+  font-weight: 500;
+  line-height: 120%;
+}
+.subscription__item:nth-last-child(n + 2){
+  border-bottom: 1px solid var(--background-9);
+}
+.subscription__item span{
+  font-weight: 700;
+}
+.subscription__item span small{
+  font-size: 16px;
+}
+.subscription__status{
+  color: var(--text-black);
+}
+.subscription__status--close{
+  color: var(--text-red);
+}
+.subscription__status--end{
+  color: var(--text-green);
+}
+.subscription__add{
+  width: 100%;
+}
+.subscription__add-header{
+}
+.subscription__add-product{
+  align-items: start;
+}
+.subscription__add-product > *:not(:first-child){
+  padding-top: 14px;
+}
+.subscription__add-title{
+  font-family: var(--font-family);
+  font-weight: 600;
+  line-height: 133%;
+}
+.subscription__add-content{
+
+}
+
+.tabs__buttons{
+  margin: -12px;
+
+  display: flex;
+  flex-wrap: wrap;
+}
+.tabs__content-wrap{
+  margin-top: 24px;
+}
+.tabs__content{
+  display: none;
+}
+.tabs__content.active{
+  display: block;
+}
+
+.cabinet__control--column{
+  flex-direction: column;
+}
+
+.cabinet__control--column > *:not(:first-child){
+  margin-top: 16px
+}
+
+.cabinet-card-order__payment{
+
+}
+.cabinet-card-order__sub-title{
+  font-family: var(--font-family);
+  font-weight: 600;
+  line-height: 143%;
+  color: var(--text-3);
+}
+.cabinet-card-order__date{
+  font-family: var(--font-family);
+  font-weight: 700;
+  line-height: 125%;
+  color: var(--text-3);
+}
+
+.cabinet-card-order-payment__price span{
+  font-size: 12px;
+}

assets/css/gp-style-desktop.css

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

assets/css/gp-style-mobile.css

@@ -204,7 +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 */
@@ -268,3 +270,67 @@
 }
 /* cabinet */
 }
+
+@media only screen and (max-width: 720px) {
+    .subscription__item{
+        flex-direction: column;
+    }
+
+    .subscription__item > p:first-child{
+        font-size: 16px;
+        color: var(--text-6);
+    }
+    .subscription__item > p:last-child{
+        margin-top: 6px;
+    }
+
+    .subscription__add-title {
+        font-size: 20px;
+    }
+
+    .subscription__add-product{
+        flex-wrap: wrap;
+    }
+
+    .subscription__add-product > *:not(:first-child){
+        padding-top: 0;
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product__img{
+        width: 73px;
+        height: 66px;
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product-description__what{
+        font-size: 12px;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product-description__with-what{
+        margin-top: 8px;
+
+        font-size: 12px;
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product__description {
+        width: calc(100% - 73px);
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product__content{
+        position: static;
+        margin-top: -10px;
+        margin-left: auto;
+        width: calc(100% - 73px);
+
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product__count{
+        position: static;
+        font-size: 12px;
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product__price{
+        position: static;
+        font-size: 16px;
+    }
+}
+

assets/css/gp-style-tablet.css

@@ -341,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

@@ -92,7 +92,9 @@ function inputTabs(main, button) {
 
                 button.classList.add('active');
 
-                button.querySelector('input').click();
+                if (button.querySelector('input')){
+                    button.querySelector('input').click();
+                } 
             }
         })
         

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;

subscription-order.html

@@ -49,7 +49,6 @@
     
     </head>
     <body>
-
         <header class="header">
             <div class="header__content wrapper">
                 <button class="header__open-menu" id="phone-menu">
@@ -226,24 +225,31 @@
         </header>
         
         <main class="wrapper">
-            <div class="cabinet__control">
-                <button class="cabinet-control__button active start" data-cabinet="orders">Заказы</button>
-                <button class="cabinet-control__button" data-cabinet="profile">Профиль</button>
+            <div class="cabinet__control cabinet__control--column">
+                <a href="#" class="to-know to-know--start button--100-perc to-know--background-none">
+                    <p>Перейти в профиль</p>
+                </a>
+
+                <div class="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>
             <div class="cabinet">
                 <div class="cabinet__profile cabinet-content">
-                    <div>
-                        <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>
+                    <div class="form-input__tabs form-input__tabs--control form-input__tabs--white">
+                        <a class="form-input-tabs__button active">
+                            Заказы
+                        </a>
             
-                            <label for="girl" class="form-input-tabs__button active">
-                                Подписки
-                                <input type="radio" name="floor" id="girl" class="form-input-tabs__input">
-                            </label>
-                        </div>
+                        <a class="form-input-tabs__button">
+                            Подписки
+                        </a>
                     </div>
                     
                     <div class="cabinet-card cabinet-card--green">
@@ -298,18 +304,35 @@
 
                     <div class="cabinet-card cabinet-card--green">
                         <div class="cabinet-card__content">
-                            <p class="cabinet-card__text">Мои адреса</p>
+                            <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>
 
-                            <div class="cabinet-card__element cabinet-card__element--margin-top-32">
-                                <p class="cabinet-card__label">Курьер</p>
-                                <p class="cabinet-card__text cabinet-card__text--grey">Не заполнено</p>
-
-                                <button class="cabinet-card__element-change"></button>
+                                 <p class="cabinet-card-pet__name">Барон</p>
                             </div>
 
-                            <div class="cabinet-card__element cabinet-card__element--margin-top-32">
-                                <button class="button button--white button--100-perc form-open" data-form="modal-map">
-                                    Добавить адрес
+                            <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>
@@ -371,73 +394,30 @@
                             <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>
+                                        <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">8960</p>
+                                        <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__status">
-                                        <p class="cabinet-card-order-status__title">Статус:</p>
-                                        <p class="cabinet-card-order-status__pointer cabinet-card-order-status__pointer--grey">Доставлен</p>
+                                    <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__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 class="cabinet-card-order__link">
+                                        <a href="#" class="to-know to-know--start button--100-perc to-know--background-none">
+                                            <p>Детали подписки</p>
+                                        </a>
                                     </div>
-
-                                    <button class="cabinet-card-order__open-detail">Детали заказа</button>
                                 </div>
 
                                 <div class="cabinet-card-order__detail-short">
@@ -454,73 +434,30 @@
                             <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>
+                                        <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">8960</p>
+                                        <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__status">
-                                        <p class="cabinet-card-order-status__title">Статус:</p>
-                                        <p class="cabinet-card-order-status__pointer cabinet-card-order-status__pointer--grey">Доставлен</p>
+                                    <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__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 class="cabinet-card-order__link">
+                                        <a href="#" class="to-know to-know--start button--100-perc to-know--background-none">
+                                            <p>Детали подписки</p>
+                                        </a>
                                     </div>
-
-                                    <button class="cabinet-card-order__open-detail">Детали заказа</button>
                                 </div>
 
                                 <div class="cabinet-card-order__detail-short">
@@ -537,156 +474,30 @@
                             <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>
+                                        <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">8960</p>
+                                        <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__status">
-                                        <p class="cabinet-card-order-status__title">Статус:</p>
-                                        <p class="cabinet-card-order-status__pointer cabinet-card-order-status__pointer--grey">Доставлен</p>
+                                    <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__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 class="cabinet-card-order__link">
+                                        <a href="#" class="to-know to-know--start button--100-perc to-know--background-none">
+                                            <p>Детали подписки</p>
+                                        </a>
                                     </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>
-
-                    <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">
@@ -817,13 +628,13 @@
                     <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="">
+                            <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="name" placeholder="Введите этаж" required="">
+                            <input id="lastname" class="form__input" type="text" name="floor" placeholder="Введите этаж" required="">
                             <span class="form-input__error form-input__error--absolute">Введен неверно</span>
                         </div>                        
                     </div>
@@ -831,12 +642,12 @@
                     <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="Номер подъезда">
+                            <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="name" placeholder="Код домофона">
+                            <input id="lastname" class="form__input" type="text" name="intercom" placeholder="Код домофона">
                         </div>                        
                     </div>
 
@@ -847,8 +658,16 @@
             </div>
         </div>
 
+        <script type="module">
+            import TogglesCollection from './assets/js/toggle.js';
+            import TabsCollection from './assets/js/tabs.js'
 
+            new TogglesCollection();
+            new TabsCollection();
+        </script>
         <script type="module" src="assets/js/gp-cabinet.js"></script>
+
+        <!-- <script type="module" src="assets/js/gp-cabinet.js"></script> -->
         <script src="assets/js/gp-form.js"></script>
     </body>
 </html>