feat: added callback click listeners

assets/css/index.css

@@ -462,6 +462,9 @@ h3 {
     line-height: 140%;
   }
 }
+.input:focus {
+  background-color: #609eff;
+}
 .input::-moz-placeholder {
   color: #ffffff;
 }
@@ -2692,7 +2695,6 @@ h3 {
   max-height: calc(100vh - 180px);
   padding-right: 4px;
   overflow: auto;
-  /* Handle */
 }
 @media (max-width: 768px) {
   .team__modal-content {
@@ -2936,3 +2938,129 @@ h3 {
   text-align: center;
   color: rgba(255, 255, 255, 0.4);
 }
+
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9000;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(45, 45, 45, 0.25);
+  -webkit-backdrop-filter: blur(10px);
+          backdrop-filter: blur(10px);
+}
+.modal.active {
+  display: flex;
+}
+.modal__body {
+  position: relative;
+  max-width: calc(100% - 30px);
+  width: 550px;
+  padding: 40px 60px;
+  box-sizing: border-box;
+  border-radius: 60px 10px;
+  background-color: #609eff;
+}
+@media (max-width: 768px) {
+  .modal__body {
+    padding: 24px 20px;
+    box-sizing: border-box;
+    border-radius: 30px 8px;
+    background-color: #609eff;
+  }
+}
+.modal__body::before {
+  content: "";
+  position: absolute;
+  top: -26px;
+  right: -26px;
+  z-index: 1001;
+  display: block;
+  width: 28px;
+  height: 28px;
+  background: url(../img/icons/close.svg) center no-repeat;
+  cursor: pointer;
+}
+@media (max-width: 768px) {
+  .modal__body::before {
+    top: -34px;
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+  }
+}
+.modal__content {
+  overflow: auto;
+}
+.modal__content--thanks {
+  padding-top: 164px;
+  background: url(../img/icons/thanks.svg) center top no-repeat;
+}
+.modal__title {
+  margin: 0 0 25px;
+  font-weight: 500;
+  font-size: 37px;
+  line-height: 122%;
+  letter-spacing: 0.01em;
+  text-align: center;
+  color: #ffffff;
+}
+@media (max-width: 768px) {
+  .modal__title {
+    font-size: 30px;
+  }
+}
+.modal__title--thanks {
+  margin: 0 0 8px;
+  font-weight: 700;
+  font-size: 56px;
+}
+@media (max-width: 768px) {
+  .modal__title--thanks {
+    font-size: 42px;
+  }
+}
+.modal__title span {
+  font-weight: 700;
+}
+.modal__description {
+  font-weight: 400;
+  font-size: 28px;
+  line-height: 122%;
+  letter-spacing: 0.01em;
+  text-align: center;
+  color: #ffffff;
+}
+.modal__form {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+}
+@media (max-width: 768px) {
+  .modal__form {
+    gap: 12px;
+  }
+}
+.modal__form > * {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+.modal__disclaimer {
+  margin: 27px 0 0;
+  font-weight: 300;
+  font-size: 14px;
+  line-height: 138%;
+  letter-spacing: 0.01em;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.5);
+}
+@media (max-width: 768px) {
+  .modal__disclaimer {
+    font-size: 10px;
+  }
+}

assets/img/icons/thanks.svg

@@ -0,0 +1,6 @@
+<svg width="161" height="161" viewBox="0 0 161 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="80.5" cy="80.5" r="80" stroke="white" stroke-opacity="0.33"/>
+<path d="M103.034 57.0916C102.418 57.3996 78.2151 81.5539 77.8747 82.1862C77.2101 83.4506 77.8099 85.25 79.1392 85.9957C79.9659 86.4658 81.0683 86.5145 81.814 86.1254C82.0733 85.9795 87.8444 80.3057 94.6368 73.4971C105.66 62.4574 106.99 61.0633 107.103 60.5121C107.362 59.0694 106.779 57.7887 105.547 57.1403C104.866 56.7674 103.699 56.7512 103.034 57.0916Z" fill="white"/>
+<path d="M115.208 62.895C114.706 63.0895 110.913 66.7856 97.5709 80.1272L80.5818 97.1163L75.524 92.0585C72.7357 89.2864 70.223 86.9034 69.9313 86.7575C69.6395 86.6116 69.0721 86.4981 68.6506 86.4981C66.7701 86.4981 65.3598 88.2813 65.8299 90.0645C65.992 90.713 66.6729 91.4587 72.4439 97.246C75.9779 100.796 79.0742 103.811 79.3174 103.941C79.8361 104.2 81.0195 104.233 81.668 104.006C82.2678 103.779 118.272 67.8069 118.694 67.0126C119.877 64.7268 117.575 62.0196 115.208 62.895Z" fill="white"/>
+<path d="M49.7002 86.6927C49.1814 86.9683 48.4681 87.6816 48.225 88.1517C47.9494 88.6704 47.9332 89.8538 48.1763 90.5023C48.3871 91.0859 60.8695 103.601 61.5504 103.925C62.2474 104.249 63.366 104.233 64.0469 103.86C65.2789 103.212 65.8625 101.931 65.5869 100.488C65.4896 99.9532 64.7115 99.0941 59.0539 93.4364C55.5199 89.8862 52.4074 86.8872 52.1156 86.7413C51.5158 86.4657 50.1703 86.4333 49.7002 86.6927Z" fill="white"/>
+</svg>

assets/js/main.js

@@ -3,3 +3,16 @@ import './step-by-step.js';
 import './team.js';
 import './faq.js';
 import './nav.js';
+import './modals.js';
+
+const maskOptions = {
+  mask: '+{7} (000) 000 00 00',
+};
+
+const phoneInputClassNames = ['input--phone'];
+
+const phoneInputs = phoneInputClassNames
+  .map((name) => document.querySelectorAll(`.${name}`))
+  .reduce((acc, array) => [...acc, ...array], []);
+
+phoneInputs.forEach((inputElement) => IMask(inputElement, maskOptions));

assets/js/modals.js

@@ -0,0 +1,36 @@
+const callbackButtons = document.querySelectorAll('.button--callback');
+const callbackModal = document.querySelector('.modal--callback');
+const thanksModal = document.querySelector('.modal--thanks');
+
+callbackButtons.forEach((button) => {
+  button.addEventListener('click', () => {
+    if (callbackModal) {
+      callbackModal.classList.add('active');
+      thanksModal.classList.remove('active');
+    }
+  });
+});
+
+[callbackModal, thanksModal].forEach((modal) => {
+  modal.addEventListener('click', (event) => {
+    const isModal = event.target.classList.contains('modal');
+    const isModalBody = event.target.classList.contains('modal__body');
+    if (isModal || isModalBody) event.currentTarget.classList.remove('active');
+  });
+});
+
+const modalForms = document.querySelectorAll('.modal__form');
+const callbackForms = document.querySelectorAll('.callback__form');
+
+[...modalForms, ...callbackForms].forEach((form) => {
+  form.addEventListener('submit', (event) => {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    const name = formData.get('name');
+    const phone = formData.get('phone');
+    console.log(name, phone)
+    event.currentTarget.reset();
+    if (callbackModal) callbackModal.classList.remove('active');
+    if (thanksModal) thanksModal.classList.add('active');
+  });
+});

assets/scss/_l-modal.scss

@@ -0,0 +1,130 @@
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9000;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba($color: $black, $alpha: 0.25);
+  backdrop-filter: blur(10px);
+
+  &.active {
+    display: flex;
+  }
+
+  &__body {
+    position: relative;
+    max-width: calc(100% - 30px);
+    width: 550px;
+    padding: 40px 60px;
+    box-sizing: border-box;
+    border-radius: 60px 10px;
+    background-color: $blue;
+
+    @include tablet {
+      padding: 24px 20px;
+      box-sizing: border-box;
+      border-radius: 30px 8px;
+      background-color: $blue;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: -26px;
+      right: -26px;
+      z-index: 1001;
+      display: block;
+      width: 28px;
+      height: 28px;
+      background: url(../img/icons/close.svg) center no-repeat;
+      cursor: pointer;
+
+      @include tablet {
+        top: -34px;
+        left: 50%;
+        right: auto;
+        transform: translateX(-50%);
+      }
+    }
+  }
+
+  &__content {
+    overflow: auto;
+
+    &--thanks {
+      padding-top: 164px;
+      background: url(../img/icons/thanks.svg) center top no-repeat;
+    }
+  }
+
+  &__title {
+    margin: 0 0 25px;
+    font-weight: 500;
+    font-size: 37px;
+    line-height: 122%;
+    letter-spacing: 0.01em;
+    text-align: center;
+    color: $white;
+
+    @include tablet {
+      font-size: 30px;
+    }
+
+    &--thanks {
+      margin: 0 0 8px;
+      font-weight: 700;
+      font-size: 56px;
+
+      @include tablet {
+        font-size: 42px;
+      }
+    }
+
+    & span {
+      font-weight: 700;
+    }
+  }
+
+  &__description {
+    font-weight: 400;
+    font-size: 28px;
+    line-height: 122%;
+    letter-spacing: 0.01em;
+    text-align: center;
+    color: $white;
+  }
+
+  &__form {
+    display: flex;
+    flex-direction: column;
+    gap: 25px;
+
+    @include tablet {
+      gap: 12px;
+    }
+
+    & > * {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+    }
+  }
+
+  &__disclaimer {
+    margin: 27px 0 0;
+    font-weight: 300;
+    font-size: 14px;
+    line-height: 138%;
+    letter-spacing: 0.01em;
+    text-align: center;
+    color: rgba($color: $white, $alpha: 0.5);
+
+    @include tablet {
+      font-size: 10px;
+    }
+  }
+}

assets/scss/_l-team.scss

@@ -190,7 +190,6 @@
         background: rgba($color: $black, $alpha: 0.05);
       }
 
-      /* Handle */
       &::-webkit-scrollbar-thumb {
         background: rgba($color: $black, $alpha: 0.1);
       }

assets/scss/_m-input.scss

@@ -17,6 +17,10 @@
     line-height: 140%;
   }
 
+  &:focus {
+    background-color: $blue;
+  } 
+
   &::placeholder {
     color: $white;
   }

assets/scss/index.scss

@@ -32,3 +32,4 @@
 @import './l-team';
 @import './l-faq';
 @import './l-callback';
+@import './l-modal';

index.html

@@ -34,7 +34,9 @@
 
           <a class="header__nav-phone" href="tel:88001012127">8 (800) 101-21-27</a>
 
-          <button class="button button--order button--order--white">Заказать звонок</button>
+          <button class="button button--order button--order--white button--callback">
+            Заказать звонок
+          </button>
         </nav>
 
         <div class="header__social">
@@ -46,7 +48,7 @@
         </div>
 
         <div class="header__buttons">
-          <button class="button button--order">Заказать звонок</button>
+          <button class="button button--order button--callback">Заказать звонок</button>
 
           <button class="header__burger"></button>
         </div>
@@ -101,7 +103,7 @@
             </div>
 
             <div class="first-screen__buttons">
-              <button class="button button--lg button--lg--consult button--light">
+              <button class="button button--lg button--lg--consult button--light button--callback">
                 Получить консультацию
               </button>
               <button class="button button--lg button--lg--coin button--dark">
@@ -512,14 +514,20 @@
                 name="name"
                 type="text"
                 placeholder="Введите ваше имя"
+                autocomplete="off"
+                required
               />
               <input
                 class="input input--phone"
                 name="phone"
-                type="text"
+                type="tel"
                 placeholder="Введите ваш телефон"
+                autocomplete="off"
+                required
               />
-              <button class="button button--lg button--light">Получить помощь</button>
+              <button class="button button--lg button--light">
+                Получить помощь
+              </button>
             </form>
 
             <div class="callback__disclaimer">
@@ -582,7 +590,9 @@
                   реабилитации и назначит дату прибытия в центр
                 </div>
                 <div class="step-by-step__card-buttons">
-                  <button class="button button--lg button--dark">Оставить заявку</button>
+                  <button class="button button--lg button--dark button--callback">
+                    Оставить заявку
+                  </button>
                 </div>
               </div>
 
@@ -595,7 +605,9 @@
                   состоянии, то самостоятельно заберем его и привезем на реабилитацию
                 </div>
                 <div class="step-by-step__card-buttons">
-                  <button class="button button--lg button--dark">Оставить заявку</button>
+                  <button class="button button--lg button--dark button--callback">
+                    Оставить заявку
+                  </button>
                 </div>
               </div>
 
@@ -608,7 +620,9 @@
                   облегчить состояние
                 </div>
                 <div class="step-by-step__card-buttons">
-                  <button class="button button--lg button--dark">Оставить заявку</button>
+                  <button class="button button--lg button--dark button--callback">
+                    Оставить заявку
+                  </button>
                 </div>
               </div>
 
@@ -621,7 +635,9 @@
                   согласия и подтверждения этого в договорах
                 </div>
                 <div class="step-by-step__card-buttons">
-                  <button class="button button--lg button--dark">Оставить заявку</button>
+                  <button class="button button--lg button--dark button--callback">
+                    Оставить заявку
+                  </button>
                 </div>
               </div>
 
@@ -707,7 +723,9 @@
                   </div>
                 </div>
                 <div class="step-by-step__card-buttons">
-                  <button class="button button--lg button--dark">Оставить заявку</button>
+                  <button class="button button--lg button--dark button--callback">
+                    Оставить заявку
+                  </button>
                 </div>
               </div>
 
@@ -722,7 +740,9 @@
                   будет напоминать о пройденном пути
                 </div>
                 <div class="step-by-step__card-buttons">
-                  <button class="button button--lg button--dark">Оставить заявку</button>
+                  <button class="button button--lg button--dark button--callback">
+                    Оставить заявку
+                  </button>
                 </div>
               </div>
 
@@ -737,7 +757,9 @@
                   плавную адаптацию
                 </div>
                 <div class="step-by-step__card-buttons">
-                  <button class="button button--lg button--dark">Оставить заявку</button>
+                  <button class="button button--lg button--dark button--callback">
+                    Оставить заявку
+                  </button>
                 </div>
               </div>
             </div>
@@ -1368,7 +1390,9 @@
               <div class="price__list-item-description">Для получения стабильного результата</div>
               <div class="price__list-item-price">от 25 000 ₽</div>
               <div class="price__list-item-buttons">
-                <button class="button button--lg button--light">Оставить заявку</button>
+                <button class="button button--lg button--light button--callback">
+                  Оставить заявку
+                </button>
               </div>
             </div>
 
@@ -1381,7 +1405,9 @@
               </div>
               <div class="price__list-item-price">от 35 000 ₽</div>
               <div class="price__list-item-buttons">
-                <button class="button button--lg button--dark">Оставить заявку</button>
+                <button class="button button--lg button--dark button--callback">
+                  Оставить заявку
+                </button>
               </div>
             </div>
 
@@ -1394,7 +1420,9 @@
               </div>
               <div class="price__list-item-price">от 45 000 ₽</div>
               <div class="price__list-item-buttons">
-                <button class="button button--lg button--dark">Оставить заявку</button>
+                <button class="button button--lg button--dark button--callback">
+                  Оставить заявку
+                </button>
               </div>
             </div>
 
@@ -1407,7 +1435,9 @@
               </div>
               <div class="price__list-item-price">от 15 000 ₽</div>
               <div class="price__list-item-buttons">
-                <button class="button button--lg button--dark">Оставить заявку</button>
+                <button class="button button--lg button--dark button--callback">
+                  Оставить заявку
+                </button>
               </div>
             </div>
           </div>
@@ -1881,14 +1911,20 @@
                 name="name"
                 type="text"
                 placeholder="Введите ваше имя"
+                autocomplete="off"
+                required
               />
               <input
                 class="input input--phone"
-                name="phone"
+                name="tel"
                 type="text"
                 placeholder="Введите ваш телефон"
+                autocomplete="off"
+                required
               />
-              <button class="button button--lg button--light">Получить помощь</button>
+              <button class="button button--lg button--light">
+                Получить помощь
+              </button>
             </form>
 
             <div class="callback__disclaimer">
@@ -1943,7 +1979,9 @@
           </div>
 
           <div class="footer__buttons">
-            <button class="button button--order button--order--light">Заказать звонок</button>
+            <button class="button button--order button--order--light button--callback">
+              Заказать звонок
+            </button>
           </div>
         </div>
 
@@ -1955,7 +1993,55 @@
       </div>
     </footer>
 
+    <div class="modal modal--callback">
+      <div class="modal__body">
+        <div class="modal__content">
+          <div class="modal__title">
+            <span>Перезвоним в течении 5 минут</span>
+            и ответим на все вопросы!
+          </div>
+
+          <form class="modal__form">
+            <input
+              class="input input--name"
+              name="name"
+              type="text"
+              placeholder="Введите ваше имя"
+              autocomplete="off"
+              required
+            />
+            <input
+              class="input input--phone"
+              name="phone"
+              type="tel"
+              placeholder="Введите ваш телефон"
+              autocomplete="off"
+              required
+            />
+            <button class="button button--lg button--light">
+              Получить помощь
+            </button>
+          </form>
+
+          <div class="modal__disclaimer">
+            Оставляя заявку на нашем сайте, вы соглашаетесь с политикой обработки персональных
+            данных и получение новостей компании, скидках и акциях
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="modal modal--thanks">
+      <div class="modal__body">
+        <div class="modal__content modal__content--thanks">
+          <div class="modal__title modal__title--thanks">Спасибо!</div>
+          <div class="modal__description">Ожидайте звонка!</div>
+        </div>
+      </div>
+    </div>
+
     <script src="./assets/js/swiper-bundle.min.js" defer></script>
+    <script src="./assets/js/imask.js" defer></script>
     <script src="./assets/js/main.js" type="module" defer></script>
   </body>
 </html>