From dec1a3b62adcaff9b30e16280800835a7dce0cbb Mon Sep 17 00:00:00 2001 From: Kirill Pet Date: Thu, 19 Dec 2024 18:29:57 +0300 Subject: [PATCH] =?UTF-8?q?=D1=81=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=20js=20sea?= =?UTF-8?q?rch?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/gp-style-desktop.css | 98 +++++++++++ assets/css/gp-style-tablet.css | 109 +++++++++++++ assets/img/photo/header-menu-search.png | Bin 0 -> 4831 bytes assets/js/main.js | 50 +++++- index.html | 208 ++++++++++-------------- 5 files changed, 339 insertions(+), 126 deletions(-) create mode 100644 assets/img/photo/header-menu-search.png diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css index a080943..d487e15 100644 --- a/assets/css/gp-style-desktop.css +++ b/assets/css/gp-style-desktop.css @@ -115,8 +115,106 @@ background-position: center right; } .header-menu__search{ + display: flex; + align-items: center; + + position: relative; +} +.header-menu-search__open{ + width: 32px; + aspect-ratio: 1; + + background: none; + overflow: hidden; + + border: none; +} +.header-menu__search.active .header-menu-search__open img:first-child{ + display: none; +} +.header-menu-search__block{ + position: absolute; + top: 58px; + right: 0; + + width: 400px; + + transition: all .3s; + + pointer-events: none; + + opacity: 0; +} +.header-menu__search.active .header-menu-search__block{ + pointer-events: auto; + + opacity: 1; +} +.header-menu-search__input{ + padding: 14px 64px 14px 24px; + + width: 100%; + + font-weight: 400; + font-size: 16px; + text-transform: uppercase; + color: var(--text-white); + + border: 1px solid var(--text-white); + border-radius: 4px; + + background-color: var(--background-grey-hover); +} +.header-menu-search__input::placeholder{ + color: var(--link); +} +.header-menu-search__btn{ + position: absolute; + top: 8px; + right: 24px; + width: 32px; aspect-ratio: 1; + + background: none; + border: none; + + background-image: url(/assets/img/icon/search.svg); + /* background-image: url(/assets/img/icon/close.svg); */ +} +.header-menu-search__found{ + margin-top: 24px; + + padding: 24px; + + background-color: var(--background-grey-hover); + border-radius: 4px; +} +.header-menu-search__error{} +.header-menu-search__item{ + margin-top: 24px; + + display: flex; +} +.header-menu-search__item:first-child{ + margin-top: 0; +} +.header-menu-search-item__img{ + width: 72px; + aspect-ratio: 1; + + border-radius: 8px; +} +.header-menu-search-item__content{ + margin-left: 16px; +} +.header-menu-search-item__art{ + margin-top: 8px; + + color: var(--link); +} +.phone-search{ + display: none; } /* header */ diff --git a/assets/css/gp-style-tablet.css b/assets/css/gp-style-tablet.css index 64dd3b3..78db8a1 100644 --- a/assets/css/gp-style-tablet.css +++ b/assets/css/gp-style-tablet.css @@ -130,10 +130,17 @@ width: 100%; transition: all .3s; + height: 100vh; + background-color: var(--background-main); } .phone-menu__sub.active{ left: 0; + + overflow-y: auto; +} +.phone-menu__sub .title-1{ + margin-bottom: 32px; } .phone-menu-content__close{ position: absolute; @@ -217,6 +224,108 @@ .phone-menu{ display: block; } +.phone-search{ + position: absolute; + top: 112px; + left: 0; + + width: 100%; + height: 0; + + display: block; + + transition: all .3s; + overflow: hidden; +} +.phone-search.active{ + height: 79px; +} +.phone-search.hidden{ + overflow: visible; +} +.phone-search__content{ + padding: 16px; + + background-color: var(--background-grey-hover); +} +.phone-search__input{ + width: 100%; + + padding: 14.5px 23px; + + font-weight: 400; + font-size: 14px; + text-transform: uppercase; + color: var(--text-white); + + border: 1px solid var(--text-white); + border-radius: 4px; + + background-color: rgba(0, 0, 0, 0); + + outline: none; +} +.phone-search__input::placeholder{ + color: var(--link); +} +.phone-search__found{ + position: absolute; + top: 95px; + left: 16px; + right: 16px; + + max-height: 256px; + width: calc(100% - 32px); + + padding: 16px; + + background-color: var(--background-grey-hover); + border-radius: 4px; + + overflow-y: auto; + display: none; +} +.phone-search__found.active{ + display: block; +} +.phone-search__item{ + +} + +.phone-search__item{ + margin-top: 24px; + + display: flex; +} +.phone-search__item:first-child{ + margin-top: 0; +} +.phone-search-item__img{ + width: 64px; + aspect-ratio: 1; + + border-radius: 8px; +} +.phone-search-item__content{ + margin-left: 16px; +} +.phone-search-item__art{ + margin-top: 8px; + + color: var(--link); +} +.phone__open-search{ + width: 32px; + aspect-ratio: 1; + + overflow: hidden; + + border: none; + background-color: rgba(0, 0, 0, 0); +} +.phone__open-search.active img:first-child{ + display: none; +} /* header */ /* footer */ diff --git a/assets/img/photo/header-menu-search.png b/assets/img/photo/header-menu-search.png new file mode 100644 index 0000000000000000000000000000000000000000..1c85cd74090ccc4c2264023c95ad0f52b1c258ba GIT binary patch literal 4831 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 { @@ -165,8 +178,43 @@ nextPhoneMenu.forEach(next => { blockSub.classList.add('active'); } }) -// phone menu +let subPhone = document.querySelectorAll('.phone-menu__sub'); + +subPhone.forEach(menu => { + let close = menu.querySelector('.phone-menu-content__close'); + + close.onclick = function () { + menu.classList.remove('active'); + } +}) +// phone menu end + +// search +let openBtnSearch = document.querySelector('.header-menu-search__open'), + blockSearchPc = document.querySelector('.header-menu__search'); + +openBtnSearch.onclick = function () { + blockSearchPc.classList.toggle('active'); +} + +let btnOpenSearchPhone = document.querySelector('.phone__open-search'), + searchPhone = document.querySelector('.phone-search'); + +btnOpenSearchPhone.onclick = function () { + if (!searchPhone.classList.contains('hidden')) { + setTimeout(() => { + searchPhone.classList.add('hidden'); + }, 300); + }else{ + searchPhone.classList.remove('hidden'); + } + + btnOpenSearchPhone.classList.toggle('active'); + searchPhone.classList.toggle('active'); +} + +// search end // resize window.addEventListener('resize', () => { diff --git a/index.html b/index.html index f860bc5..61bea6b 100644 --- a/index.html +++ b/index.html @@ -91,7 +91,10 @@
- search +
@@ -128,16 +131,49 @@ - -
- +
+ + +
+ + + +
+
+ + +
+

Беговая дорожка механическая DRAXFIT+

+

Артикул: STP1000C

+
+
+
+ +
+

Беговая дорожка механическая DRAXFIT+

+

Артикул: STP1000C

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

- Работаем с гос.заказчиками по
- 44-ФЗ/223-ФЗ -

- - +7 (495) 798-80-81 - - sales@bestinfitness.ru - -
- - - - - - - -
-
- -
- - Заказать звонок - -
- + +

+ Кардио +

+
    -
  • - спецификация -
    • -
  • О компании
    • -
  • - каталог -
    • -
  • - бренды -
    • -
  • зонирование
    • -
  • проекты
    • -
  • интересное
    • -
  • контакты
    • +
  • Беговые дорожки
    • +
  • Беговые дорожки
    • +
  • Беговые дорожки
    • +
  • Беговые дорожки
- -
-

- Работаем с гос.заказчиками по
- 44-ФЗ/223-ФЗ -

- - +7 (495) 798-80-81 - - sales@bestinfitness.ru - -
- - - - - - - +
+
+ +
+ +
+
+ + +
+ + +
+ + +
+

Беговая дорожка механическая DRAXFIT+

+

Артикул: STP1000C

- -
- - Заказать звонок - -
-