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

assets/css/gp-style-desktop.css

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

assets/css/gp-style-mobile.css

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

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

@@ -92,8 +92,10 @@ function inputTabs(main, button) {
 
                 button.classList.add('active');
 
+                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;

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