From ee5a3d5a7ece161b82896c22c456df403346a979 Mon Sep 17 00:00:00 2001 From: Kirill Pet Date: Wed, 9 Oct 2024 23:24:11 +0300 Subject: [PATCH] =?UTF-8?q?=D0=B2=D0=BD=D0=B5=D1=81=D0=B5=D0=BD=D0=B8?= =?UTF-8?q?=D0=B5=20=D0=BF=D1=80=D0=B0=D0=B2=D0=BE=D0=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/gp-style-core.css | 191 +++- assets/css/gp-style-desktop.css | 38 +- assets/css/gp-style-mobile.css | 9 + assets/css/gp-style-tablet.css | 51 +- assets/img/svg/main/arrow-back.svg | 5 + assets/img/svg/main/question.svg | 3 + assets/js/gp-main.js | 57 +- assets/js/gp-product.js | 4 +- modal-filter.html => catalog-error.html | 332 +----- catalog.html | 1362 +++++++++++++++-------- del.html | 12 - index.html | 98 +- modal-basket.html | 856 -------------- product.html | 8 +- 14 files changed, 1329 insertions(+), 1697 deletions(-) create mode 100644 assets/img/svg/main/arrow-back.svg create mode 100644 assets/img/svg/main/question.svg rename modal-filter.html => catalog-error.html (71%) delete mode 100644 del.html delete mode 100644 modal-basket.html diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css index ccaa0fe..46c1300 100644 --- a/assets/css/gp-style-core.css +++ b/assets/css/gp-style-core.css @@ -418,6 +418,54 @@ button{ .form__button:hover{ opacity: .8; } + +.label{ + padding-bottom: 4px; + + display: inline-block; + + position: relative; +} +.label::after{ + content: ''; + + position: absolute; + top: 2px; + right: -20px; + + width: 16px; + height: 16px; + + background-image: url(../img/svg/main/question.svg); + + cursor: pointer; +} +.label__title{ + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-3); +} +.label__question{ + position: absolute; + + padding: 8px; + + border-radius: 6px; + transition: height .2s ease-out; + box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.2); + overflow: hidden; + background-color: var(--background-white); + + opacity: 0; + transition: opacity .2s ease-out; + pointer-events: none; +} +.label:hover .label__question{ + opacity: 1; + pointer-events: auto; +} /* form */ @@ -446,7 +494,7 @@ button{ /* breadcrumbs */ .breadcrumbs{ - margin: 96px 24px 24px; + margin: 24px; display: flex; align-items: center; @@ -638,6 +686,53 @@ button{ .to-know--background-none{ background: none; } +.back{ + margin-top: 16px; + margin-left: 16px; + + padding: 8px; + padding-left: 32px; + + background: none; + border: none; + + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + text-decoration: none; + + position: relative; +} +.back::before{ + content: ''; + + position: absolute; + top: 8px; + left: 0; + + margin-right: 8px; + + width: 24px; + height: 24px; + + background-image: url(../img/svg/main/arrow-back.svg); +} + +.back::after{ + content: ''; + + position: absolute; + bottom: 6px; + left: 0; + + width: calc(100% - 8px); + height: 1px; + + background: var(--text-black); +} /* button */ /* select */ @@ -848,6 +943,9 @@ button{ filter: blur(10px); transition: filter .2s ease-out; } +.modal__item--no-title{ + padding-top: 72px; +} .modal__item.active{ display: flex; flex-direction: column; @@ -875,6 +973,29 @@ button{ text-transform: uppercase; color: var(--text-black); } +.modal__small-title{ + font-family: var(--font-family); + font-weight: 700; + font-size: 24px; + line-height: 100%; + text-transform: uppercase; + color: var(--text-black); +} +.modal__text{ + margin-top: 16px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-0); +} +.modal__form-sub{ + margin-top: 48px; +} +.modal-form-sub__submit{ + margin-top: 64px; +} .modal__block-button{ margin-top: 24px; } @@ -921,6 +1042,10 @@ button{ .modal__basket{ width: 600px; } +.modal__to-know, +.modal__to-know-submit{ + width: 412px; +} .modal-basket__item{ padding-top: 23px; padding-bottom: 24px; @@ -952,6 +1077,33 @@ button{ .modal-basket__item:hover .modal-basket__item::before{ opacity: .8; } +.modal-basket__item--return{ + padding-right: 5px; + + display: flex; + justify-content: space-between; + align-items: center; +} +.modal-basket__item--return .modal-basket-item__title{ + padding-right: 10px; +} +.modal-basket__item--return::before{ + display: none; +} +.modal-basket-item__return{ + border-radius: 20px; + padding: 4px 24px; + + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + color: var(--text-white); + + background: var(--background-black); + + border: none; +} .modal-basket-item__block-image{ width: 128px; aspect-ratio: 1; @@ -1014,6 +1166,15 @@ button{ .modal__basket .modal__content{ height: calc(100% - 100px); overflow-x: hidden; + +} +.modal__basket .modal__content::-webkit-scrollbar { + width: 7px; + background-color: #f9f9fd; +} +.modal__basket .modal__content::-webkit-scrollbar-thumb { + background-color: var(--background-black); + border-radius: 2px; } /* modal */ @@ -1039,11 +1200,14 @@ button{ background-image: url(../img/svg/main/black-x.svg); transform: rotate(45deg); transition: transform .2s; + pointer-events: none; } .toggle.active::after{ transform: rotate(0deg); } .toggle__title{ + padding-right: 30px; + font-family: var(--font-family); font-weight: 700; font-size: 16px; @@ -1093,6 +1257,8 @@ button{ .checkbox{ display: flex; align-items: center; + + cursor: pointer; } .checkbox__state{ border-radius: 4px; @@ -1102,6 +1268,8 @@ button{ border: 2px solid var(--background-black); background: var(--background-white); + + flex-shrink: 0; } .checkbox.active .checkbox__state{ background-color: var(--background-black); @@ -1121,6 +1289,23 @@ button{ font-size: 20px; line-height: 120%; color: var(--text-dark); + + cursor: pointer; +} +.checkbox__label a{ + color: #76ce75; + + text-decoration: none; +} +.checkbox--small{ + margin-top: 24px; +} +.checkbox--small .checkbox__label{ + padding-left: 24px; + + font-weight: 500; + font-size: 12px; + line-height: 133%; } /* checkbox */ @@ -1134,6 +1319,8 @@ button{ aspect-ratio: 1; accent-color: var(--background-black); + + cursor: pointer; } .radio__label{ padding-left: 8px; @@ -1143,6 +1330,8 @@ button{ font-size: 20px; line-height: 120%; color: var(--text-dark); + + cursor: pointer; } /* radio */ diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css index a10d465..fdf7e71 100644 --- a/assets/css/gp-style-desktop.css +++ b/assets/css/gp-style-desktop.css @@ -248,7 +248,7 @@ text-decoration: none; } .header.white{ - /* background-color: thistle; */ + background: none; } .header.white .header__logo-black{ display: none; @@ -284,6 +284,10 @@ .header.white .header__open-menu::after{ background: var(--background-white); } + +main{ + padding-top: 72px; +} /* header end */ /* product */ @@ -310,6 +314,7 @@ border-radius: 16px; background: var(--gradient-blue); + border: none; } .product-tag-item__content{ padding: 3px 11px; @@ -344,6 +349,16 @@ background-repeat: no-repeat; background-position: center; } + .product__error{ + margin: auto; + + font-family: var(--font-family); + font-weight: 700; + font-size: 24px; + line-height: 100%; + text-transform: uppercase; + color: var(--text-0); + } .product__title{ font-family: var(--font-family); font-weight: 700; @@ -651,9 +666,9 @@ /* product */ /* modal */ -.modal__button .to-know{ +/* .modal__button .to-know{ display: none; -} +} */ /* modal */ /* footer */ @@ -704,6 +719,9 @@ .footer-list__item:nth-child(even){ width: 322px; } +.footer-list__item .button{ + border-radius: 24px; +} .footer-list__title{ font-family: var(--font-family); font-weight: 700; @@ -941,14 +959,21 @@ margin-top: 48px; margin-bottom: 48px; } -.detail__catalot{ +.detail__wrapper-catalot{ margin-top: 64px; - width: 100%; + width: calc(100% + 16px); overflow: hidden; + + position: relative; +} +.detail__catalot{ + } .detail-catalot__header{ + padding-right: 16px; + display: flex; justify-content: space-between; align-items: center; @@ -993,6 +1018,9 @@ .detail__images-phone{ display: none; } +.back-detail{ + display: none; +} .toggle__table{ margin-top: 32px; diff --git a/assets/css/gp-style-mobile.css b/assets/css/gp-style-mobile.css index f8e5940..4544d72 100644 --- a/assets/css/gp-style-mobile.css +++ b/assets/css/gp-style-mobile.css @@ -13,6 +13,10 @@ .modal__filter{ width: 100%; } +.modal__to-know, +.modal__to-know-submit{ + width: 100%; +} .modal__button .to-know{ display: flex; @@ -65,6 +69,11 @@ margin-top: 24px; } +.footer-about__text{ + padding-top: 35px; + display: block; + text-align: left; +} .footer__list{ margin-top: 20px; } diff --git a/assets/css/gp-style-tablet.css b/assets/css/gp-style-tablet.css index d857742..27d1e33 100644 --- a/assets/css/gp-style-tablet.css +++ b/assets/css/gp-style-tablet.css @@ -1,6 +1,9 @@ /* Стили для планшетов */ @media only screen and (max-width: 1200px) { /* header */ +main{ + padding-top: 64px; +} .main-menu{ display: none; } @@ -12,7 +15,7 @@ } .header__logo{ width: 136px; - height: 24px; + height: 29px; } .header__content{ height: auto; @@ -41,16 +44,50 @@ /* footer */ .footer{ margin-top: 0; -} -.footer__about{ - justify-content: center; -} -.footer-about__text{ - display: none; + + padding: 24px 16px; } /* footer */ +/* breadcrumbs */ +.breadcrumbs{ + display: none; +} +/* breadcrumbs */ +/* product */ +.product{ + padding: 12px; +} +.product__title{ + font-weight: 400; + font-size: 26px; + line-height: 123%; + text-transform: uppercase; +} +.to-know p { + font-size: 18px; +} +.toggle-table__title{ + font-weight: 700; + font-size: 12px; + line-height: 133%; +} +.toggle-table__item p{ + font-weight: 500; + font-size: 12px; + line-height: 133%; +} +.detail{ + margin: 24px 16px; +} +.back-detail{ + display: inline; +} +.detail-catalot__title{ + font-size: 22px; +} +/* product */ } @media only screen and (max-width: 980px) { diff --git a/assets/img/svg/main/arrow-back.svg b/assets/img/svg/main/arrow-back.svg new file mode 100644 index 0000000..a977e53 --- /dev/null +++ b/assets/img/svg/main/arrow-back.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/img/svg/main/question.svg b/assets/img/svg/main/question.svg new file mode 100644 index 0000000..2e21e7b --- /dev/null +++ b/assets/img/svg/main/question.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/js/gp-main.js b/assets/js/gp-main.js index f4be755..827f0dd 100644 --- a/assets/js/gp-main.js +++ b/assets/js/gp-main.js @@ -10,6 +10,7 @@ singleToggleOpenX('#phone-menu','.header__menu-block','.header__phone-menu'); modalOpen('.button--filter', '.modal__filter'); modalOpen('.basket-open', '.modal__basket'); modalClose('.modal__close'); +modalOpen('.open-to-know', '.modal__to-know'); // media // toggle @@ -79,9 +80,10 @@ toggleOpenX('.select', '.select__state' , '.state__content', '.state__block', tr let selects = document.querySelectorAll('.select'); -selects.forEach(e => { - let state = e.querySelector('.select__state'), - buttons = e.querySelectorAll('.state__button'); +selects.forEach(select => { + let state = select.querySelector('.select__state'), + content = select.querySelector('.state__block'), + buttons = select.querySelectorAll('.state__button'); buttons.forEach(e => { let button = e; @@ -99,6 +101,8 @@ selects.forEach(e => { state.value = text; button.classList.add('active'); + content.style.height = 0; + select.classList.remove('active'); } }) }) @@ -300,23 +304,48 @@ function createGalleryPhone(swiper, wrapper, slide, width) { // resize window.addEventListener('resize', (e) => { + let width = window.screen.width; + // media modalOpen('.button--filter', '.modal__filter'); modalOpen('.basket-open', '.modal__basket'); modalClose('.modal__close'); + + let modalItem = document.querySelectorAll('.modal__item'); + + // if (width <= 720) { + modalItem.forEach(modal => { + if (modal.classList.contains('active')) { + let aside = document.querySelector('.modal__aside'); + + if (width <= 720) { + aside.style.width = `${width}px` + }else{ + let openAside = document.querySelector('.modal__item.active'), + newWidth = openAside.clientWidth; + + aside.style.width = `${newWidth}px` + } + } + }) + // } }); // resize // scroll -window.addEventListener("scroll", function (e) { - let header = document.querySelector('.header'); - let scroll = window.scrollY; - - if (scroll >= 75) { - header.classList.remove('white') - }else{ - header.classList.add('white') - } - -}); + + +if (document.querySelector('.header').classList.contains('white')) { + window.addEventListener("scroll", function (e) { + let header = document.querySelector('.header'); + let scroll = window.scrollY; + + if (scroll >= 25) { + header.classList.remove('white') + }else{ + header.classList.add('white') + } + + }); +} // scroll diff --git a/assets/js/gp-product.js b/assets/js/gp-product.js index fc85f55..2508270 100644 --- a/assets/js/gp-product.js +++ b/assets/js/gp-product.js @@ -97,10 +97,10 @@ const detailCatalot = new Swiper('.detail__catalot', { slidesPerView: 3, }, 780: { - slidesPerView: 2.2, + slidesPerView: 2, }, 100: { - slidesPerView: 1.3, + slidesPerView: 1.1, spaceBetween: 20 }, } diff --git a/modal-filter.html b/catalog-error.html similarity index 71% rename from modal-filter.html rename to catalog-error.html index 405aa50..10cb13c 100644 --- a/modal-filter.html +++ b/catalog-error.html @@ -54,12 +54,17 @@ -