feat: интеграция Fancybox и добавление формы обратной связи

- Подключён Fancybox для улучшения пользовательского интерфейса
- Добавлена интерактивная форма обратной связи в секции FAQ
- Обновлены стили и скрипты для поддержки новых функций
- Исправлена ссылка на страницу входа в header

static/css/index.css

@@ -661,4 +661,77 @@
             color: #63768d;
         }
     }
+}
+
+.back-form {
+    h2 {
+        font-weight: 400;
+        font-size: 44px;
+        line-height: 53px;
+        text-align: left;
+
+        color: #36213e;
+    }
+
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+
+    form {
+        display: inline-flex;
+        flex-direction: column;
+        align-items: center;
+    }
+}
+
+.q-label {
+    margin-top: 25px;
+    display: inline-block;
+
+    & > input[type=text] {
+        width: 540px;
+        height: 43px;
+        padding: 1px 5px;
+        display: inline-block;
+
+        background: #d9d9d9;
+
+        border: 1px solid #554971;
+    }
+}
+
+.back-form-accept-checkbox {
+    margin-top: 7px;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+
+    input {
+        margin-right: 5px;
+    }
+
+    label {
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 22px;
+        text-align: left;
+
+        color: #554971;
+    }
+}
+
+.back-form-submit {
+    margin-top: 69px;
+    background: #63768d;
+
+    padding: 25px 55px;
+    border: 0;
+
+    font-weight: 500;
+    font-size: 26px;
+    line-height: 31px;
+    text-align: left;
+
+    color: #b8f3ff;
 }

templates/_fragments/header.html

@@ -36,7 +36,7 @@
                         <path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5M3.14 5l1.25 5h8.22l1.25-5zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0m9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0"></path>
                     </svg>
                 </a>
-                <a href="#">
+                <a href="/users/login/">
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                          class="bi bi-person" viewBox="0 0 16 16">
                         <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z"></path>

templates/_layouts/base.html

@@ -12,7 +12,9 @@
     <link rel="stylesheet" href="{% static 'css/normalize.css' %}">
     <link rel="stylesheet" href="{% static 'css/style.css' %}">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css"/>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.1/dist/fancybox/fancybox.css"/>
     <script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.1/dist/fancybox/fancybox.umd.js"></script>
     {% block add_css %}
         <!-- Additional CSS -->
     {% endblock %}

templates/home/_fragments/faq.html

@@ -42,10 +42,41 @@
 
     </div>
 
+    <div id="back-form" style="display: none;" class="back-form">
+        <h2>НЕ НАШЛИ ОТВЕТ НА ВАШ ВОПРОС?</h2>
+        <form action="">
+            <label class="q-label" for="name" style="margin-top: 69px;">
+                <input type="text" placeholder="Имя" id="name">
+            </label>
+
+            <label class="q-label" for="number">
+                <input type="text" placeholder="Номер телефона" id="number">
+            </label>
+
+            <label class="q-label" for="question">
+                <input type="text" placeholder="Ваш вопрос" id="question">
+            </label>
+
+            <div class="back-form-accept-checkbox">
+                <input type="checkbox" id="accept" name="accept">
+                <label for="accept">Я согласен с политикой обработки персональных данных</label>
+            </div>
+
+            <button class="back-form-submit" type="submit">ОТПРАВИТЬ ВОПРОС</button>
+        </form>
+    </div>
+
     <div class="faq-cta">
-        <a href="#">
+        <a href="#back-form" data-fancybox>
             <div>?</div>
             ЗАДАТЬ ВОПРОС
         </a>
     </div>
-</section>
+
+</section>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        Fancybox.bind('[data-fancybox]')
+    })
+</script>