diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css index a2b08c5..67bf96d 100644 --- a/assets/css/gp-style-core.css +++ b/assets/css/gp-style-core.css @@ -2253,4 +2253,75 @@ 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__toggle{ + width: 100%; +} +.subscription__toggle-header{ + +} +.subscription__toggle-product{ + align-items: start; +} +.subscription__toggle-product > *:not(:first-child){ + padding-top: 14px; +} +.subscription__toggle-title{ + font-family: var(--font-family); + font-weight: 600; + line-height: 133%; +} +.subscription__toggle-wrapper{ + height: 0; + overflow: hidden; + transition: all .3s; +} +.subscription__toggle-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; } \ No newline at end of file diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css index 28ab323..56534ff 100644 --- a/assets/css/gp-style-desktop.css +++ b/assets/css/gp-style-desktop.css @@ -248,7 +248,6 @@ font-weight: 500; font-size: 16px; line-height: 125%; - color: #121212; color: var(--text-black); text-decoration: none; @@ -892,7 +891,6 @@ main{ font-size: 36px; line-height: 111%; text-transform: uppercase; - color: #121212; } .detail-block-price__price::after{ content: '₽'; @@ -1947,13 +1945,53 @@ main{ } +.subscription{ + margin-top: 12px; +} +.subscription__item{ + padding: 12px 0; + justify-content: space-between; +} +.subscription__item{ + font-size: 20px; +} +.subscription__toggle{ + color: var(--text-black); +} +.subscription__toggle-header{ +} +.subscription__toggle-title{ + font-size: 24px; +} +.subscription__toggle-wrapper{ - - - - -/* Стили для лептопов */ -/* @media only screen and (min-width: 992px) and (max-width: 1400px) { - -} */ \ No newline at end of file +} +.subscription__toggle-content{ + padding: 24px 0 12px 0; +} +.subscription__toggle-product{ + align-items: start; +} +.subscription__toggle-product > *:nth-child(3){ + margin-left: auto; + align-items: center; +} +.subscription__toggle .cabinet-card-order-detail-main-product-description__what { + font-size: 16px; + line-height: 125%; +} +.subscription__toggle .cabinet-card-order-detail-main-product-description__with-what { + font-weight: 500; + font-size: 16px; +} +.subscription__toggle .cabinet-card-order-detail-main-product__count{ + font-weight: 700; + font-size: 16px; + line-height: 100%; +} +.subscription__toggle .cabinet-card-order-detail-main-product__price{ + font-weight: 500; + font-size: 20px; + line-height: 120%; +} \ No newline at end of file diff --git a/assets/js/tabs.js b/assets/js/tabs.js new file mode 100644 index 0000000..10c8130 --- /dev/null +++ b/assets/js/tabs.js @@ -0,0 +1,67 @@ +const rootSelectorTabs = '[data-js-tabs]'; + +class Tabs{ + // элементы для поиска + selectors = { + root: rootSelectorTabs, + button: '[data-js-tabs-button]', + content: '[data-js-tabs-content]', + } + // класс отображения состояния + stateClasses = { + isActive: 'active', + } + + constructor(rootElement){ + this.rootElement = rootElement; + this.buttonElements = this.rootElement.querySelectorAll(this.selectors.button); + this.contentElements = this.rootElement.querySelectorAll(this.selectors.content); + this.state = { + activeMenuIndex: [...this.buttonElements] + .findIndex((buttonElement) => buttonElement.classList.contains(this.stateClasses.isActive)), + }; + this.limitTabsIndex = this.buttonElements.length - 1; + this.bindEvents(); + } + + updateUI(){ + const { activeMenuIndex } = this.state; + + this.buttonElements.forEach((buttonElement, index) => { + const isActive = index === activeMenuIndex; + + buttonElement.classList.toggle(this.stateClasses.isActive, isActive); + }) + + this.contentElements.forEach((contentElement, index) => { + const isActive = index === activeMenuIndex; + + contentElement.classList.toggle(this.stateClasses.isActive, isActive); + }) + } + + onButtonClick(buttonIndex){ + this.state.activeMenuIndex = buttonIndex; + this.updateUI(); + } + + bindEvents(){ + this.buttonElements.forEach((buttonElement, index) => { + buttonElement.addEventListener('click', () => this.onButtonClick(index)) + }) + } +} + +class TabsCollection { + constructor(){ + this.init(); + } + + init(){ + document.querySelectorAll(rootSelectorTabs).forEach((element) => { + new Tabs(element); + }); + } +} + +export default TabsCollection; \ No newline at end of file diff --git a/assets/js/toggle.js b/assets/js/toggle.js new file mode 100644 index 0000000..e28d6cb --- /dev/null +++ b/assets/js/toggle.js @@ -0,0 +1,91 @@ +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) { + console.log(this.contentElements[index]); + + 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; \ No newline at end of file diff --git a/subscription-2.html b/subscription-2.html new file mode 100644 index 0000000..83ae388 --- /dev/null +++ b/subscription-2.html @@ -0,0 +1,735 @@ + + + + + + + SEO title + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + +
+
+
+ +
+ +
+ +
+
+
+ + + + +
+
+ +
+
+
+
+
+
+
+ Кошкам + +
+
+ Собакам + +
+
+
+ +
+
+ + ГЛАВНАЯ + +
+
+ + ПРОДУКЦИЯ + + Кошкам + + Собакам + +
+
+ + О COSMOPET + +
+
+ + ПРОИЗВОДСТВО + +
+
+ + БЛОГ + +
+
+
+
+ +
+
+ + +
+
+
+
+
+ + + +
+
+ +
+
+
+

Имя и фамилия не указано

+
+ +
+

Телефон:

+

Не заполнено

+
+ +
+

Почта:

+

example@example.com

+ +

Почта не подтверждена

+ +
+ +
+

Связанные аккаунты:

+
+ + + +
+
+ +
+
+ + + +
+
+
+
+ +
+
+
+
+
+ +
+
+ +

Барон

+
+ +
+

Порода:

+

Немецкая овчарка

+
+
+

Вес:

+

от 25 до 40 кг

+
+
+

Возраст:

+

3 года

+
+
+

Активность:

+

Активный

+
+
+ +
+
+
+ +
+
+
+
+
+ +
+
+ +

Барон

+
+ +
+

Порода:

+

Немецкая овчарка

+
+
+

Вес:

+

от 25 до 40 кг

+
+
+

Возраст:

+

3 года

+
+
+

Активность:

+

Активный

+
+
+ +
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+

Подписка № 7632

+
+
+
+ +
+
+

Статус

+ + +

Ожидание

+
+
+

Дата подписки

+

06.09.2024

+
+
+

Дата последнего заказа

+

16.10.2024

+
+
+

Следующий платеж

+

21.10.2024

+
+
+

Способ оплаты

+

СБП

+
+
+
+
+

Товары:

+
+ +
+
+
+ + +
+

Сухой корм, для крупных и средних пород

+

Индейка, 2 кг

+
+ +
+

3

+ +

10280

+
+
+ +
+ + +
+

Сухой корм, для крупных и средних пород

+

Индейка, 2 кг

+
+ +
+

3

+ +

10280

+
+
+ +
+ + +
+

Сухой корм, для крупных и средних пород

+

Индейка, 2 кг

+
+ +
+

3

+ +

10280

+
+
+
+
+
+
+
+

Сумма

+

16420 ₽ / месяц

+
+
+

Доставка

+

Бесплатно

+
+
+

Итого

+

16420 ₽ / месяц

+
+
+
+
+

Доставка:

+
+ +
+
+
+ + + +
+ +
+
+
+
+
+ + + Имя введено неверно +
+
+ +
+
+ + + Имя введено неверно +
+
+
+
+ +
+
+
+
+ + + Имя введено неверно +
+
+
+
+
+
+
+
+
+
+ + + + +

Отменить подписку

+ +
+
+ + +
+ +
+
+
+
+ + + +
+
+ +

АДРЕСС

+ +
+
+
+ + + Имя введено неверно +
+
+ +
+
+ + + Введен неверно +
+ +
+ + + Введен неверно +
+
+ +
+
+ + +
+ +
+ + +
+
+ +
+ +
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/subscription.html b/subscription-order.html similarity index 100% rename from subscription.html rename to subscription-order.html