From 05ef15bea03fd4f2ea98f8dbbaae07dd1cf25afe Mon Sep 17 00:00:00 2001 From: VividTruthKeeper Date: Wed, 29 Mar 2023 18:02:07 +0500 Subject: [PATCH 1/5] service section 1 --- .../publishable/assets/styles/service.css | 192 +- .../TPS/Shop/publishable/pages/service.html | 3602 ++++++++++++----- 2 files changed, 2565 insertions(+), 1229 deletions(-) diff --git a/packages/TPS/Shop/publishable/assets/styles/service.css b/packages/TPS/Shop/publishable/assets/styles/service.css index 0cacb7309..19c4c5339 100644 --- a/packages/TPS/Shop/publishable/assets/styles/service.css +++ b/packages/TPS/Shop/publishable/assets/styles/service.css @@ -1,145 +1,89 @@ -.spaced { - display: block; - margin: 1rem 0; +.service { + padding: 5rem 0; } -.input-required { - color: red; -} - -.input-block-1 { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - gap: 4rem; +.service h2 { + font-size: 3.2rem; padding-bottom: 3rem; + border-bottom: 0.1rem solid rgba(206, 206, 206, 1); } -.part-1 { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - gap: 4rem; - padding-bottom: 3rem; +.service_1 .service-inner { + display: flex; + flex-direction: column; + gap: 5rem; } -.input-block-2 { +.description, +.cards { + display: flex; + flex-direction: column; + gap: 3.2rem; +} + +.description h3 { + font-size: 1.8rem; + font-weight: bold; +} + +.red { + font-size: inherit; + color: red !important; +} + +.description p { + font-size: 1.8rem; +} + +.cards h3 { + font-size: 1.8rem; + font-weight: bold; +} + +.cards-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; - padding-bottom: 3rem; } -.part-2 { - width: 100%; - padding-bottom: 3rem; -} - -.part-3 { - display: -webkit-flex; - display: -ms-flexbox; +.card { + border: 0.1rem solid rgba(206, 206, 206, 1); + border-radius: 0.8rem; + background: white; + padding: 4rem 4.5rem; display: flex; - align-items: flex-end; - justify-content: space-between; - padding-bottom: 10rem; + align-items: center; + justify-content: flex-start; + gap: 4rem; } -.part-3 span { - font-size: 1.2rem; - grid-area: text; +.card span { + display: flex; + align-items: center; + justify-content: center; + width: 4.8rem; + height: 4.8rem; + border-radius: 2.4rem; + background: #c3000e; + font-size: 1.8rem; + color: white; + font-weight: bold; } -.input-textarea { +.card p { + font-size: 1.8rem; + font-weight: bold; +} + +.buttons button { width: 100%; - min-height: 15rem; - resize: none; - padding: 1rem; -} - -.input-name { - display: inline-block; - font-size: 1.2rem; - font-weight: normal; - padding: 0rem 0 1rem 1rem; -} - -.input-input { - width: 100%; - height: 5rem; - padding: 1rem; - cursor: pointer; -} - -.input-block-outer { - width: 100%; - min-height: 15rem; -} - -.submit-button { - max-width: 24rem; - width: 100%; - height: 4.4rem; - background: #c50003; - border: none; + max-width: 28rem; + padding: 1.25rem 2rem; border-radius: 0.5rem; - color: #fff; + background: #c3000e; + color: white; + font-size: 1.8rem; + font-weight: bold; + border: none; cursor: pointer; - grid-area: butt; -} - -.submit-button:hover { - background: #a50008; -} - -.part-hidden { - overflow: hidden; - max-height: 0rem; - /* padding-bottom: 5rem; - padding-top: 2rem; */ - transition: all 0.3s ease-out; -} -.part-hidden.active { - max-height: 20rem; - padding-bottom: 5rem; - padding-top: 2rem; - transition: all 0.3s ease-in; -} - -@media screen and (max-width: 700px) { - .input-block-1 { - grid-template-columns: 1fr 1fr; - } - .part-1 { - grid-template-columns: 1fr 1fr; - } -} - -@media screen and (max-width: 660px) { - .part-3 { - display: -ms-grid; - display: grid; - grid-template-areas: - 'text text' - 'butt butt'; - } - .submit-button { - max-width: unset; - } - - .part-3 span { - margin-bottom: 3rem; - align-self: center; - text-align: center; - } - - @media screen and (max-width: 450px) { - .input-block-1, - .input-block-2 { - grid-template-columns: 1fr; - } - .part-1 { - grid-template-columns: 1fr; - } - .submit-button { - max-width: unset; - } - } } diff --git a/packages/TPS/Shop/publishable/pages/service.html b/packages/TPS/Shop/publishable/pages/service.html index 4cd68b76a..aad52bd6d 100644 --- a/packages/TPS/Shop/publishable/pages/service.html +++ b/packages/TPS/Shop/publishable/pages/service.html @@ -1,1134 +1,2526 @@ - - - - - - - - - - ElektronikaTM - - - -
-
- - -
-
-
-
-
- clock -
-
- Пн - Пт: 09:00 - 18:00 - Суб: 09:00 - 13:00 -
-
-
-
- telephone -
-
- +(993) 60142251 -
-
-
- Flag of Russia -
-
- РУС - -
-
-
-
-
-
-
-
-
-

Добро пожаловать !

-
- exit -
-
-
-
- -
- -
- -
-
-
- - - ElektronikaTM - -
-
- - -
-
-
- - -
- -
- favorite -
- Избранное - -
-
- -
- cart -
- Корзина - -
-
- -
- user -
-

- -
- -
- pen -
-

История заказов

- -
- -
-
-
-
-
- -
- favorite -
- -
- ElektronikaTM -
- -
- cart -
- -
-
-
- - - -
-
-
- - -
-
-
-
- -
-
-
- - - - +
+
+ +
+ +
+
- -
-
-
-
-
- -
- -
-
-

Контакты

-
- arrow +
+ + + ElektronikaTM + +
+
+ + +
-
- -
-
-
-
-
-
- Адрес: -

183, Проспект Битарап
Туркменистан, Ашхабад. -

-
-
- Мобильный номер : -

+99360142251

-
-
-
-
-
-

Скоро будет

-
- arrow -
-
- -
-
-
-
-
-
-
- appstore +
+ -
- Download on the -

App Store

+ -
-
-
- googleplay +
+ +
+ favorite +
+ Избранное +
-
- Download on the -

Google Play

+
+ +
+ cart +
+ Корзина + +
+
+ +
+ user +
+

+ +
+ +
+ pen +
+

История заказов

+ +
+
-
- -
- - -
-
-
- © All rights reserved. Made by TPS Digital + + + +
-
- + + - - + + + +
+
+
+

Сервисный центр

+
+

+ Сервисный центр + Tehnika dünýäsi - «Ваш + комфорт – наша забота!» +

+

+ Наш сервисный центр предоставляет качественные + услуги по ремонту любой бытовой техники и + электроники. А наши мастера – настоящие эксперты + своего профиля! +

+
+
+

Оставьте заявку у нас на сайте, и мы

+
+
+ 01 +

+ Продиагностируем и установим причины поломки +

+
+
+ 02 +

+ Продиагностируем и установим причины поломки +

+
+
+ 03 +

+ Продиагностируем и установим причины поломки +

+
+
+ 04 +

+ Продиагностируем и установим причины поломки +

+
+
+
+
+ +
+
+
+
+ + + + +
+
+
+ © All rights reserved. Made by + TPS Digital +
+
+
+ + + + - From 3be2ad599f84d9db8f603027a3666d5230e93233 Mon Sep 17 00:00:00 2001 From: VividTruthKeeper Date: Wed, 29 Mar 2023 18:26:27 +0500 Subject: [PATCH 2/5] service 2 --- .../publishable/assets/scripts/service.js | 26 ++--- .../publishable/assets/styles/service.css | 25 +++- .../TPS/Shop/publishable/pages/service.html | 107 ++++++++++-------- 3 files changed, 92 insertions(+), 66 deletions(-) diff --git a/packages/TPS/Shop/publishable/assets/scripts/service.js b/packages/TPS/Shop/publishable/assets/scripts/service.js index 3045980c1..57b6209de 100644 --- a/packages/TPS/Shop/publishable/assets/scripts/service.js +++ b/packages/TPS/Shop/publishable/assets/scripts/service.js @@ -188,22 +188,6 @@ for (let i = 0; i < accordionTrigger.length; i++) { // ACCORDION SCRIPT end ========================== -// ITEM SELECT ADDITIONAL INPUT ========================== -let sBox = document.querySelector('.item-select'); -let addedInputBlock = document.querySelector('.part-hidden'); -let addedInput = document.querySelector('.focused'); - -sBox.addEventListener('change', (e) => { - if (e.target.selectedIndex === 10) { - addedInputBlock.classList.add('active'); - addedInput.focus(); - } else { - addedInputBlock.classList.remove('active'); - } -}); - -// ITEM SELECT ADDITIONAL INPUT end ====================== - // CAT DROPDOWN const catParent = document.querySelector('.service-li.active'); @@ -268,3 +252,13 @@ lis.forEach((el) => { el.classList.add('active'); }); }); + +// NEW SCRIPT + +const button_1 = document.querySelector('.buttons_1 button'); +const service_1 = document.querySelector('.service_1'); +const service_2 = document.querySelector('.service_2'); +button_1.addEventListener('click', () => { + service_1.classList.remove('active'); + service_2.classList.add('active'); +}); diff --git a/packages/TPS/Shop/publishable/assets/styles/service.css b/packages/TPS/Shop/publishable/assets/styles/service.css index 19c4c5339..417ac1bd5 100644 --- a/packages/TPS/Shop/publishable/assets/styles/service.css +++ b/packages/TPS/Shop/publishable/assets/styles/service.css @@ -1,5 +1,24 @@ -.service { +.service-main { padding: 5rem 0; + display: flex; + flex-direction: column; + gap: 5rem; +} + +.service { + padding: 0; + pointer-events: none; + overflow: hidden; + opacity: 0; + height: 0; + transition: 0.3s all ease; +} + +.service.active { + pointer-events: all; + opacity: 1; + height: 100%; + transition: 0.3s all ease; } .service h2 { @@ -8,7 +27,7 @@ border-bottom: 0.1rem solid rgba(206, 206, 206, 1); } -.service_1 .service-inner { +.service-inner { display: flex; flex-direction: column; gap: 5rem; @@ -63,7 +82,7 @@ justify-content: center; width: 4.8rem; height: 4.8rem; - border-radius: 2.4rem; + border-radius: 50%; background: #c3000e; font-size: 1.8rem; color: white; diff --git a/packages/TPS/Shop/publishable/pages/service.html b/packages/TPS/Shop/publishable/pages/service.html index aad52bd6d..daca6f825 100644 --- a/packages/TPS/Shop/publishable/pages/service.html +++ b/packages/TPS/Shop/publishable/pages/service.html @@ -2278,58 +2278,71 @@
--> -
+
-
-

Сервисный центр

-
-

- Сервисный центр - Tehnika dünýäsi - «Ваш - комфорт – наша забота!» -

-

- Наш сервисный центр предоставляет качественные - услуги по ремонту любой бытовой техники и - электроники. А наши мастера – настоящие эксперты - своего профиля! -

-
-
-

Оставьте заявку у нас на сайте, и мы

-
-
- 01 -

- Продиагностируем и установим причины поломки -

-
-
- 02 -

- Продиагностируем и установим причины поломки -

-
-
- 03 -

- Продиагностируем и установим причины поломки -

-
-
- 04 -

- Продиагностируем и установим причины поломки -

+

Сервисный центр

+
+
+
+
+
+

+ Сервисный центр + Tehnika dünýäsi - «Ваш + комфорт – наша забота!» +

+

+ Наш сервисный центр предоставляет качественные + услуги по ремонту любой бытовой техники и + электроники. А наши мастера – настоящие эксперты + своего профиля! +

+
+
+

Оставьте заявку у нас на сайте, и мы

+
+
+ 01 +

+ Продиагностируем и установим причины + поломки +

+
+
+ 02 +

+ Продиагностируем и установим причины + поломки +

+
+
+ 03 +

+ Продиагностируем и установим причины + поломки +

+
+
+ 04 +

+ Продиагностируем и установим причины + поломки +

+
-
-
- +
+ +
-
-
+ +
+
+
+
+
+