внесение правок

10 months ago · ee5a3d5a7e
parent 863ed65646
commit ee5a3d5a7e
14 changed files with 1329 additions and 1697 deletions
--- 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 */

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

--- 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;
 }
--- 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) {
--- a/assets/img/svg/main/arrow-back.svg
+++ b/assets/img/svg/main/arrow-back.svg
@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.5 12.3643H21" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.5 12.3643L10.864 18.7282" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.5 12.3643L10.864 6.0003" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/assets/img/svg/main/question.svg
+++ b/assets/img/svg/main/question.svg
@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.00005 1.2498C4.27213 1.2498 1.25005 4.27188 1.25005 7.9998C1.25005 11.7277 4.27213 14.7498 8.00005 14.7498C11.728 14.7498 14.75 11.7277 14.75 7.9998C14.75 4.27188 11.728 1.2498 8.00005 1.2498ZM0.0500488 7.9998C0.0500488 3.60914 3.60939 0.0498047 8.00005 0.0498047C12.3907 0.0498047 15.9501 3.60914 15.9501 7.9998C15.9501 12.3905 12.3907 15.9498 8.00005 15.9498C3.60938 15.9498 0.0500488 12.3905 0.0500488 7.9998ZM8.75664 11.8914C8.75664 12.3056 8.42085 12.6414 8.00664 12.6414C7.59243 12.6414 7.25664 12.3056 7.25664 11.8914C7.25664 11.4772 7.59243 11.1414 8.00664 11.1414C8.42085 11.1414 8.75664 11.4772 8.75664 11.8914ZM6.35884 6.22749C6.35879 5.76088 6.51651 5.31995 6.80394 5.00253C7.08243 4.69497 7.51419 4.46749 8.14659 4.46748C9.28878 4.46747 10.0031 5.57665 9.44696 6.64451C9.21979 7.08066 8.93274 7.37811 8.60211 7.7207L8.60206 7.72075C8.49777 7.82881 8.38915 7.94137 8.27671 8.06418C7.82078 8.56216 7.37999 9.17405 7.37999 10.1425C7.37999 10.4738 7.64862 10.7425 7.97999 10.7425C8.31136 10.7425 8.57999 10.4738 8.57999 10.1425C8.57999 9.61088 8.79169 9.27875 9.16178 8.87452C9.23347 8.79622 9.31482 8.71242 9.40228 8.62233C9.75046 8.26368 10.1953 7.80545 10.5113 7.19883C11.4927 5.31454 10.1697 3.26746 8.14658 3.26748C7.19634 3.26749 6.43417 3.62308 5.91442 4.19707C5.4036 4.7612 5.15877 5.5003 5.15884 6.22761C5.15887 6.55898 5.42753 6.82758 5.7589 6.82755C6.09027 6.82752 6.35887 6.55886 6.35884 6.22749Z" fill="#121212"/>
+</svg>
--- 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
--- 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
        },
    }
--- a/catalog-error.html
+++ b/catalog-error.html
--- a/catalog.html
+++ b/catalog.html
--- a/del.html
+++ b/del.html
@ -1,12 +0,0 @@
-<!-- Пример формы для отправки в Телеграмм (обработчик send-telegram.php) -->
-<form class="form" method="post" action="/send-telegram.php">
-    <div class="form__item">
-        <input class="form__input" type="text" name="name" required>
-        <label class="form__label">Ваше имя</label>
-    </div>
-    <div class="form__item">
-        <input class="form__input" type="text" name="phone" required>
-        <label class="form__label">Номер телефона</label>
-    </div>
-    <input class="form__input btn" type="submit" value="Отправить">
-</form>
--- a/index.html
+++ b/index.html
--- a/modal-basket.html
+++ b/modal-basket.html
--- a/product.html
+++ b/product.html
@ -228,6 +228,10 @@
            </a>
        </div>

+        <a href="#" class="back back-detail">
+            к каталогу
+        </a>
+
        <div class="detail">
            <div class="detail__images">
                <div class="detail__image detail__image--width-perc-100" data-count-img="0">
@ -477,7 +481,8 @@
                </div>
            </div>

-            <div class="detail__catalot">
+            <div class="detail__wrapper-catalot">
+                <div class="detail__catalot">
                    <div class="detail-catalot__header">
                        <p class="detail-catalot__title">
                            вашему питомцу может понравиться
@ -635,6 +640,7 @@
                        </div>
                    </div>
                </div>
+            </div>
        </div>
    </main>