Add contact kit

src/contact.html

+//= template/common/header.html
+
+//= template/breadcrumb/index.html
+
+//= template/contact-main/index.html
+
+//= template/contact-map/index.html
+
+//= template/contact-bottom/index.html
+
+//= template/common/footer.html
\ No newline at end of file

src/form.html

+//= template/common/header.html
+<button id="test" class="check-price">Show</button>
+<button id="test2" class="check-price">Show</button>
+<br>
+<h1 class="h2-line product__title-h1">Bobcat T590</h1>
+<div class="form__overlay hidden">
+    <div style="max-width: 500px; margin: 0 auto">
+        <div class="form__wrap">
+            <div class="form__logo">
+                <img src="img/logo-main.png" class="form__logo-img">
+                <div class="form__hr"></div>
+                <button class="close">X</button>
+            </div>
+            <form id="form-send" action="" class="form__body">
+                <h2 class="form__title">Узнать цену на </h2>
+                <div class="form__input-wrap">
+                    <label class="form__label" for="name">Ваше Имя (Обязательно)</label>
+                    <input class="form__input" id="name" type="text">
+                </div>
+                <div class="form__input-wrap">
+                    <label class="form__label" for="tel">Телефон (Обязательно)</label>
+                    <input class="form__input" value="+7(___)___-____" id="tel" type="text">
+                </div>
+                <label class="form__label" for="comment">Комментарий</label>
+                <textarea class="form__input form__textarea" id="comment"></textarea>
+                <div class="form__sogl">
+                    <input id="checkbox" type="checkbox" checked="checked">
+                    <label for="checkbox"><p class="form__sogl-text">я подтверждаю свое согласие на обработку
+                        персональных данных</p></label>
+                </div>
+                <button class="form__submit" type="submit">Отправить</button>
+            </form>
+        </div>
+    </div>
+</div>
+//= template/common/footer.html
\ No newline at end of file

src/js/catalog-menu.js

@@ -6,7 +6,7 @@
         var getOtherItem = document.querySelectorAll('.menu-list__catalog .menu-list__link:not(.active)');
         menuItemAc.addEventListener('click', function (evt) {
             //TODO: desctop
-            evt.preventDefault();
+            //evt.preventDefault();
             menuItemAc.classList.toggle('open');
             if(menuItemAc.classList.contains('open')){
                 getOtherItem.forEach(function (item) {

src/js/form.js

+'use strict';
+
+(function () {
+    var Backend = function () {
+        this.xhr2 = new XMLHttpRequest();
+    };
+    Backend.prototype.saveData = function (URL_SEND, data, onSuccess, onError) {
+        this.xhr2.addEventListener('load', function () {
+            if (this.status === 200) {
+                onSuccess(this.response);
+            } else {
+                onError('Статус ответа: ' + this.status + ' ' + this.statusText);
+            }
+
+        });
+        this.xhr2.open('POST', URL_SEND, true);
+        this.xhr2.responseType = 'json';
+        this.xhr2.setRequestHeader('Content-Type', 'application/json');
+        this.xhr2.send(data);
+    };
+
+    function onSuccess(data) {
+        console.log(data);
+        var form = document.querySelector('#form-send');
+        var temp = form.innerHTML;
+        form.innerHTML = '<h2 style="padding: 0 5px">Ваше сообщение успешно отправлено!</h2>';
+        setTimeout(function () {
+            document.querySelector('.form__overlay').classList.add('hidden');
+            form.innerHTML = temp;
+        }, 1500);
+
+
+    }
+
+    function onError(data) {
+        console.log(data)
+    }
+
+
+    function sendForm() {
+        var model = document.querySelector('.product__title-h1');
+        document.querySelector('.form__title').innerText = document.querySelector('.form__title').innerText + model.textContent;
+        document.querySelector('.form__textarea').innerHTML = model.textContent;
+        var err = [];
+        var formSend = document.querySelector('#form-send');
+        formSend.addEventListener('submit', function (evt) {
+            evt.preventDefault();
+            var name = formSend.querySelector('#name');
+            if (!name.value) {
+                if (!name.parentElement.querySelector('.input-err')) {
+                    name.insertAdjacentHTML("beforeBegin", '<p class="input-err">Имя не заполненно  </p>');
+                    err.push('Имя');
+                    setTimeout(function () {
+                        name.parentElement.removeChild(name.parentElement.querySelector('.input-err'));
+                    }, 1500)
+                }
+            } else {
+                if (err.includes('Имя')) {
+                    err.splice('Имя');
+                }
+            }
+            var phone = formSend.querySelector('#tel');
+            if (phone.value === '+7(___)___-____' || phone.value === '' || phone.value.indexOf("_") > 0) {
+                if (!phone.parentElement.querySelector('.input-err')) {
+                    var temp = '<p class="input-err">Не верный телефон </p>';
+                    phone.insertAdjacentHTML("beforeBegin", temp);
+                    err.push('Телефон');
+
+                    setTimeout(function () {
+                        phone.parentElement.removeChild(phone.parentElement.querySelector('.input-err'));
+                    }, 1500)
+                }
+            } else {
+                if (err.includes('Телефон')) {
+                    err.splice('Телефон');
+                }
+            }
+            var check = document.querySelector('.form__sogl input');
+            if (!check.checked) {
+                if (!check.parentElement.querySelector('.input-err')) {
+                    check.insertAdjacentHTML("beforeBegin", '<p class="input-err check">Подтвердите согласие на обработку персоральных данных</p>');
+                    err.push('Согласие');
+
+                    setTimeout(function () {
+                        check.parentElement.removeChild(check.parentElement.querySelector('.input-err'));
+                    }, 1500)
+                }
+            } else {
+                if (err.includes('Согласие')) {
+                    err.splice('Согласие');
+                }
+            }
+
+            if (!err.length > 0) {
+                var xhr = new Backend();
+                var tempObj = {};
+                tempObj.name = name.value;
+                tempObj.phone = phone.value;
+                tempObj.message = document.querySelector('#comment').value;
+                tempObj.url = location.pathname;
+                xhr.saveData('/local/ajax/feedback.php', JSON.stringify(tempObj), onSuccess, onError);
+                console.log(tempObj);
+            } else {
+                console.log('есть ошибки');
+            }
+        });
+
+    }
+    if(document.querySelector('#form-send')) {
+        sendForm();
+    }
+
+    window.addEventListener("DOMContentLoaded", function () {
+        function setCursorPosition(pos, elem) {
+            elem.focus();
+            if (elem.setSelectionRange) elem.setSelectionRange(pos, pos);
+            else if (elem.createTextRange) {
+                var range = elem.createTextRange();
+                range.collapse(true);
+                range.moveEnd("character", pos);
+                range.moveStart("character", pos);
+                range.select()
+            }
+        }
+
+        function mask(event) {
+            var matrix = this.defaultValue,
+                i = 0,
+                def = matrix.replace(/\D/g, ""),
+                val = this.value.replace(/\D/g, "");
+            def.length >= val.length && (val = def);
+            matrix = matrix.replace(/[_\d]/g, function (a) {
+                return val.charAt(i++) || "_"
+            });
+            this.value = matrix;
+            i = matrix.lastIndexOf(val.substr(-1));
+            i < matrix.length && matrix != this.defaultValue ? i++ : i = matrix.indexOf("_");
+            setCursorPosition(i, this)
+        }
+        if(document.querySelector('#form-send')){
+            var input = document.querySelector("#tel");
+            input.addEventListener("input", mask, false)
+        }
+
+    });
+
+    function showPopup() {
+        document.querySelector('.form__overlay.hidden').classList.remove('hidden');
+        document.addEventListener('keydown', function (evt) {
+            if (evt.keyCode === 27) {
+                document.querySelector('.form__overlay').classList.add('hidden');
+            }
+        });
+        document.querySelector('.close').addEventListener('click', function () {
+            document.querySelector('.form__overlay').classList.add('hidden');
+        });
+    }
+
+    var btnShow = document.querySelectorAll('.check-price');
+    if (btnShow.length) {
+        btnShow.forEach(function (itemBtn) {
+            itemBtn.addEventListener('click', function () {
+                showPopup();
+            })
+        });
+    }
+})();
\ No newline at end of file

src/js/gallery-slider.js

@@ -31,6 +31,16 @@
             pagination: {
                 el: '.swiper-pagination-gallery',
                 clickable: true
+            },
+            breakpoints: {
+                470: {
+                    slidesPerView: 3,
+                    spaceBetween: 10
+                },
+                640: {
+                    slidesPerView: 4,
+                    spaceBetween: 10
+                },
             }
         });
     });

src/js/hint-dop.js

-'use strict';
-
-(function () {
-    var dopU = document.querySelector('.product__dop-list');
-    if(dopU){
-        var dopItem = dopU.querySelectorAll('.product__dop-bl');
-        dopItem.forEach(function (dopHint) {
-            if(dopHint.querySelector('.product__dop-hint')){
-                dopHint.addEventListener('mouseover', function (evt) {
-                    dopHint.querySelector('.product__dop-hint').classList.add('active');
-                });
-                dopHint.addEventListener('mouseout', function () {
-                    dopHint.querySelector('.product__dop-hint').classList.remove('active');
-                })
-            }
-        })
-    }
-})();
\ No newline at end of file

src/js/main-slider.js

@@ -25,10 +25,10 @@
                     spaceBetween: 10
                 },
                 // when window width is <= 640px
-                640: {
-                    slidesPerView: 3,
-                    spaceBetween: 30
-                }
+                // 640: {
+                //     slidesPerView: 3,
+                //     spaceBetween: 30
+                // }
             }
         });
     });

src/js/product-tabs.js

@@ -9,6 +9,14 @@
         })
     }
 
+    function accordionLogic(item, index) {
+        item.parentElement.classList.add('active');
+        checkTab(document.querySelectorAll('.product__info-item'), item.parentElement);
+        checkTab(document.querySelectorAll('.product__tabs-item'),index);
+        document.querySelectorAll('.product__tabs-item')[index].classList.add('active');
+        document.documentElement.scrollTop = item.offsetTop;
+    }
+
     var tabsList = document.querySelector('.product__tabs-list');
     if(tabsList){
         var tabs = tabsList.querySelectorAll('.product__tabs-item');
@@ -24,11 +32,9 @@
     }
     var accordion = document.querySelectorAll('.product__info-tit');
     if(accordion.length){
-        accordion.forEach(function (itemAccordion) {
+        accordion.forEach(function (itemAccordion, index) {
             itemAccordion.addEventListener('click', function () {
-                itemAccordion.parentElement.classList.toggle('active');
-                console.log(itemAccordion.parentElement);
-                checkTab(tabs, itemAccordion.parentElement);
+                accordionLogic(itemAccordion, index);
             })
         })
     }

src/scss/about-main/about-main.scss

@@ -23,6 +23,7 @@
 .about-main__img{
   margin-right: 30px;
   max-width: 390px;
+  flex-shrink: 0;
 }
 .about-main__text{
   color: $grey-text;

src/scss/catalog-products-list/catalog-products-list.scss

@@ -57,8 +57,8 @@
   font-weight: bold;
   color: #fefefe;
   line-height: 1;
-  margin: 0;
-  padding-top: 15px;
+  margin: 0 0 0 4px;
+  padding-top: 5px;
 }
 
 .product-item:hover{

src/scss/form/form-main.scss

+@import "../settings/color";
+.form__overlay{
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-height: 100%;
+  background: #000000b5;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.form__wrap{
+  background: white;
+  border: 1px solid rgba($grey-text, .6);
+  padding: 15px 0;
+  margin-bottom: 20px;
+  border-radius: 5px;
+}
+.form__logo{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  position: relative;
+}
+
+.form__logo-img{
+  width: 32px;
+}
+
+.form__body{
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  align-items: center;
+}
+
+.form__input{
+  border-radius: 5px;
+  padding: 10px;
+  border: 1px solid rgba($grey-text, .6);
+  resize: none;
+  width: 100%;
+}
+
+.form__label {
+  padding: 6px 0;
+  width: 100%;
+}
+
+.form__submit{
+  text-transform: uppercase;
+  font-size: 20px;
+  font-family: 'PT Sans', 'PT Sans local', sans-serif;
+  color: white;
+  text-decoration: none;
+  background: #fe321f;
+  padding: 5px 20px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  border: 1px solid white;
+  cursor: pointer;
+}
+
+.form__sogl{
+  padding-top: 10px;
+  position: relative;
+}
+
+.form__hr{
+  height: 1px;
+  width: 60%;
+  border-radius: 20px;
+  background: rgba($grey-text, .6);
+  margin-top: 10px;
+}
+.form__sogl{
+  display: flex;
+  width: 100%;
+  align-items: center;
+  padding-bottom: 15px;
+}
+.form__sogl-text{
+  font-size: 12px;
+  margin: 0;
+}
+
+.form__input-wrap{
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.input-err{
+  position: absolute;
+  top: 0;
+  left: 50%;
+  display: flex;
+  padding: 2px 7px;
+  border-radius: 5px;
+  font-size: 13px;
+  background: rgba(black, .7);
+  color: white;
+  transform: translate(-50%, -50%);
+  &:after{
+    content: "";
+    position: absolute;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-top: 10px solid rgba(black, .7);
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 100%);
+  }
+}
+.input-err.check{
+  transform: translate(-50%, -100%);
+  margin-top: -5px;
+}
+
+.form__overlay .close{
+  position: absolute;
+  top: 0;
+  right: 0;
+  border: none;
+  font-weight: bold;
+  background: transparent;
+  margin-right: 10px;
+}
+
+.form__overlay.hidden{
+  display: none;
+}
+

src/scss/product-info/product-info.scss

@@ -155,5 +155,6 @@
 @media screen and (max-width: 810px){
   .characteristic__item{
     width: 100%;
+    padding: 10px;
   }
 }
\ No newline at end of file

src/scss/product-main/product-main.scss

@@ -2,6 +2,7 @@
 .product__main{
   display: flex;
   justify-content: space-between;
+  /*position: fixed;*/
 }
 
 .product__main-bl{
@@ -36,6 +37,8 @@
   overflow: hidden;
   cursor: pointer;
   border: 1px solid white;
+  display: flex;
+  align-items: center;
   img{
     width: 100%;
   }
@@ -63,7 +66,6 @@
   display: flex;
   list-style-type: none;
   padding-left: 0;
-  justify-content: space-between;
 }
 
 .product__dop-item{
@@ -93,29 +95,9 @@
   transform: translate(-50%, -50%);
 }
 
-/*.product__dop-hint.active{
-  visibility: visible;
-  z-index: 10;
-  font-size: 12px;
-  white-space: pre;
-  background: rgba(black, .7);
-  color: white;
-  width: auto;
-  height: auto;
-  padding: 2px 3px;
-  border-radius: 5px;
-  &:after{
-    content: "";
-    display: block;
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    border: 20px solid transparent;
-    border-top: 20px solid green;
-
-  }
+.btn-mob{
+  display: none;
 }
-*/
 
 .product__dop-bl-link{
   display: flex;
@@ -132,3 +114,41 @@
     transform: translate(0, -50%);
   }
 }
+@media screen and (max-width: 1020px) {
+  .product__main{
+    flex-wrap: wrap;
+  }
+  .product__main-bl{
+    width: 50%;
+  }
+  .product__main-image{
+    order: -1;
+    width: 100%;
+    text-align: center;
+    img{
+      max-width: 550px;
+    }
+  }
+}
+@media screen and (max-width: 705px) {
+  .btn-mob {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    .check-price{
+      margin: 20px 0;
+      padding: 0 30px;
+    }
+  }
+}
+@media screen and (max-width: 640px) {
+  .product__main-bl{
+    width: 100%;
+  }
+  .btn-mob{
+    order: 1;
+  }
+  .product__dop{
+    order: 2;
+  }
+}

src/scss/product-slider/product-slider.scss

@@ -58,8 +58,8 @@
   font-weight: bold;
   color: $white-text;
   line-height: 1;
-  margin: 0;
-  padding-top: 15px;
+  margin: 0 0 0 4px;
+  padding-top: 5px;
 }
 
 .product-slider__img{
@@ -95,13 +95,4 @@
   .product-slider{
     display: none;
   }
-  /*.product-slider__wrapper, .product-slider__wrapper.active{
-    width: 100%;
-  }
-  .product-slider__content{
-    width: 100%;
-  }
-  .product-slider__content .swiper-slide{
-    flex-shrink: 1;
-  }*/
 }
\ No newline at end of file

src/template/product-main/index.html

@@ -28,7 +28,7 @@
     <div class="product__main-bl product__main-image">
         <img src="img/product-main.png" alt="Товар">
     </div>
-    <div class="product__main-bl">
+    <div class="product__main-bl product__dop">
         <div class="product__dop-title product__grey-title">Навесное оборудование</div>
         <div class="product__dop">
             <ul class="product__dop-list swiper-wrapper">
@@ -132,4 +132,7 @@
             <div class="swiper-pagination-gallery"></div>
         </div>
     </div>
+    <div class="product__main-bl btn-mob">
+        <button class="check-price">Узнать цену</button>
+    </div>
 </div>
\ No newline at end of file