final

2025-08-01 10:07:08 +03:00
parent 21562852ca
commit 7d7a28e789
54 changed files with 4554 additions and 6928 deletions
--- a/resources/css/theme.css
+++ b/resources/css/theme.css
@@ -47,28 +47,26 @@ html, body {

 .grey-gradient-hover {
    background: linear-gradient(90deg, #9d9994 39.42%, #c5c5b9 92.9%);
-    background-size: 177% 100%;
-    background-position: 0% 0;
-    transition: background-position 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
+    transition: background 180ms ease-in-out;
+    background-size: 101%!important;
 }

 .grey-gradient-hover:hover {
-    background-position: 39.42% 0;
-    transition: background-position 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
+    background: linear-gradient(90deg, #e21e24 39.42%, #ff2f35 92.9%);
 }

 .dark .grey-gradient-hover {
    border: 1px solid rgba(248, 248, 248, 0.12);
    backdrop-filter: blur(20px);
+    box-shadow: 0 2px 32px 0 rgba(16, 15, 15, 0.03);
    background: linear-gradient(90deg, #2b2c35 39.42%, #6e7996 92.9%);
-    background-size: 177% 100%;
-    background-position: -1px 0;
-    transition: background-position 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
+    transition: background 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
 }

 .dark .grey-gradient-hover:hover {
-    background-position: 9.42% 0;
-    transition: background-position 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
+    background:
+            linear-gradient(90deg, #e21e24 39.42%, #ff2f35 92.9%),
+            linear-gradient(90deg, #e21e24 39.42%, #ff2f35 92.9%);
 }

 .red-gradient-hover {
@@ -113,11 +111,13 @@ html, body {



-#fluentform_4 {
+#fluentform_4,
+#fluentform_5 {

 }

-#fluentform_4 .ff-el-form-control {
+#fluentform_4 .ff-el-form-control,
+#fluentform_5 .ff-el-form-control {
    border: none;
    box-shadow: 0 2px 32px 0 rgba(16, 15, 15, 0.03);
    background: #fff;
@@ -133,7 +133,8 @@ html, body {
    color: #6c6b6b;
 }

-#fluentform_4 .ff-btn-submit {
+#fluentform_4 .ff-btn-submit,
+#fluentform_5 .ff-btn-submit {
    height: 75px;
    background: linear-gradient(90deg, #e21e24 39.42%, #ff2f35 92.9%);
    border-radius: 90px;
@@ -148,16 +149,32 @@ html, body {
    transition: 180ms ease-in;
 }

-#fluentform_4 .ff-btn-submit:hover {
+@media (max-width: 1049px) {
+    #fluentform_4 .ff-el-form-control,
+    #fluentform_5 .ff-el-form-control {
+        font-size: 16px;
+        height: 69px;
+    }
+    #fluentform_4 .ff-btn-submit,
+    #fluentform_5 .ff-btn-submit {
+        font-size: 16px;
+        height: 69px;
+    }
+}
+
+#fluentform_4 .ff-btn-submit:hover,
+#fluentform_5 .ff-btn-submit:hover {
    font-weight: 700;
    transition: 180ms ease-in;
 }

-#fluentform_4 .ff_submit_btn_wrapper {
+#fluentform_4 .ff_submit_btn_wrapper,
+#fluentform_5 .ff_submit_btn_wrapper {
    margin-bottom: 0!important;
 }

-#fluentform_4 .error.text-danger {
+#fluentform_4 .error.text-danger,
+#fluentform_5 .error.text-danger {
    position: absolute;
    margin-top: 0;
    bottom: -18px;
@@ -166,18 +183,19 @@ html, body {
    text-align: center;
 }

-#fluentform_4 .ff-el-group {
+#fluentform_4 .ff-el-group,
+#fluentform_5 .ff-el-group {
    position: relative;
    margin-bottom: 18px;
 }

-#fluentform_4_success {
+#fluentform_4_success,
+#fluentform_5_success {
    display: none!important;
 }

-
-
-#fluentform_4 .ff-el-input--label {
+#fluentform_4 .ff-el-input--label,
+#fluentform_5 .ff-el-input--label {
    position: absolute;
    top: 50%;
    left: 32px;
@@ -193,19 +211,30 @@ html, body {
    color: #6c6b6b;
 }

-
 #fluentform_4 .ff-el-group.focused .ff-el-input--label,
-#fluentform_4 .ff-el-group.has-value .ff-el-input--label {
+#fluentform_4 .ff-el-group.has-value .ff-el-input--label,
+#fluentform_5 .ff-el-group.focused .ff-el-input--label,
+#fluentform_5 .ff-el-group.has-value .ff-el-input--label {
    top: 6px;
    transform: translateY(0);
    transition: 180ms ease-in-out;
    font-size: 14px;
 }
-#fluentform_4 .ff-el-tc{
+
+#fluentform_4 .ff-el-tc,
+#fluentform_5 .ff-el-tc {
    margin-top: 32px!important;
    font-weight: 500!important;
    font-size: 16px!important;
    line-height: 145%!important;
    color: #6c6b6b!important;
    margin-bottom: 0!important;
+}
+
+@media (max-width: 1047px) {
+    #fluentform_4 .ff-el-tc,
+    #fluentform_5 .ff-el-tc {
+        font-size: 12px!important;
+        margin-top: 16px!important;
+    }
 }
--- a/resources/css/utilities.css
+++ b/resources/css/utilities.css
@@ -1,7 +1,26 @@
-@utility container {
-    max-width: 1330px;
-    padding-left: 5px;
-    padding-right: 5px;
+@layer utilities {
+    .container {
+        max-width: 1330px;
+        padding-left: 5px;
+        padding-right: 5px;
+    }
+}
+
+@media (max-width: 767px) {
+    @layer utilities {
+        .container {
+            padding-left: 24px;
+            padding-right: 24px;
+        }
+    }
+}
+@media (max-width: 349px) {
+    @layer utilities {
+        .container {
+            padding-left: 5px;
+            padding-right: 5px;
+        }
+    }
 }

 /*@utility alignfull {
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -15,18 +15,84 @@ document.addEventListener('DOMContentLoaded', function() {
      window.addEventListener('resize', updateMainPadding);
 });*/

-// Используем делегирование событий для динамически загружаемых форм
+document.addEventListener('DOMContentLoaded', function() {
+    function smoothScrollTo(element, options = {}) {
+        const {
+            offset = 80,
+            behavior = 'smooth',
+            block = 'start'
+        } = options;
+
+        if (element) {
+            const elementPosition = element.offsetTop;
+            const offsetPosition = Math.max(0, elementPosition - offset);
+
+            window.scrollTo({
+                top: offsetPosition,
+                behavior: behavior
+            });
+        }
+    }
+
+    document.querySelectorAll('[data-scroll-to]').forEach(function(button) {
+        button.addEventListener('click', function() {
+            const scrollTarget = this.getAttribute('data-scroll-to');
+
+            if (scrollTarget) {
+
+                const targetSection = document.querySelector(`[data-scroll-section="${scrollTarget}"]`);
+
+                if (targetSection) {
+
+                    const scrollOptions = {
+                        offset: 80,
+                        behavior: 'smooth'
+                    };
+
+                    smoothScrollTo(targetSection, scrollOptions);
+
+
+                    document.querySelectorAll('[data-scroll-section]').forEach(section => {
+                        section.classList.remove('scroll-active');
+                    });
+                    targetSection.classList.add('scroll-active');
+                } else {
+                    console.warn(`Секция с data-scroll-section="${scrollTarget}" не найдена`);
+                }
+            }
+        });
+    });
+
+    function updateActiveSection() {
+        const sections = document.querySelectorAll('[data-scroll-section]');
+        const scrollPosition = window.scrollY + 100;
+
+        sections.forEach(section => {
+            const sectionTop = section.offsetTop;
+            const sectionBottom = sectionTop + section.offsetHeight;
+
+            if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) {
+                sections.forEach(s => s.classList.remove('scroll-current'));
+                section.classList.add('scroll-current');
+            }
+        });
+    }
+    let scrollTimeout;
+    window.addEventListener('scroll', function() {
+        clearTimeout(scrollTimeout);
+        scrollTimeout = setTimeout(updateActiveSection, 100);
+    });
+});
+
 document.addEventListener('DOMContentLoaded', function() {

-    // Делегирование для focus события
    document.addEventListener('focus', function(e) {
        if (e.target.matches('#fluentform_4 .ff-el-form-control')) {
            const group = e.target.closest('.ff-el-group');
            if (group) group.classList.add('focused');
        }
-    }, true); // используем capture phase
+    }, true);

-    // Делегирование для blur события
    document.addEventListener('blur', function(e) {
        if (e.target.matches('#fluentform_4 .ff-el-form-control')) {
            const group = e.target.closest('.ff-el-group');
@@ -34,9 +100,7 @@ document.addEventListener('DOMContentLoaded', function() {
        }
    }, true);

-    // Делегирование для input события
    document.addEventListener('input', function(e) {
-        // Обычные поля формы
        if (e.target.matches('#fluentform_4 .ff-el-form-control')) {
            const group = e.target.closest('.ff-el-group');
            if (group) {
@@ -48,29 +112,23 @@ document.addEventListener('DOMContentLoaded', function() {
            }
        }

-        // Форматирование телефона
        if (e.target.matches('#fluentform_4 .ff-el-phone')) {
            formatPhoneNumber(e);
        }
    });
-
-    // Делегирование для keydown события (для телефона)
    document.addEventListener('keydown', function(e) {
        if (e.target.matches('#fluentform_4 .ff-el-phone')) {
            handlePhoneKeydown(e);
        }
    });

-    // Функция форматирования телефона
    function formatPhoneNumber(e) {
        let value = e.target.value.replace(/\D/g, '');

-        // Заменяем 8 на 7
        if (value.startsWith('8')) {
            value = '7' + value.slice(1);
        }

-        // Добавляем 7 если нет
        if (!value.startsWith('7') && value.length > 0) {
            value = '7' + value;
        }
@@ -100,7 +158,6 @@ document.addEventListener('DOMContentLoaded', function() {
        e.target.value = formattedValue;
    }

-    // Функция обработки клавиш для телефона
    function handlePhoneKeydown(e) {
        if (e.key === 'Backspace' || e.key === 'Delete') {
            const cursorPos = e.target.selectionStart;
@@ -113,4 +170,103 @@ document.addEventListener('DOMContentLoaded', function() {
            }
        }
    }
+});
+
+document.addEventListener('DOMContentLoaded', function() {
+
+    const MenuSystem = {
+        burger: null,
+        overlay: null,
+        container: null,
+        isOpen: false,
+
+        init() {
+            this.burger = document.getElementById('burger');
+            this.overlay = document.getElementById('menu-overlay');
+            this.container = document.getElementById('menu-container');
+
+            if (!this.burger || !this.overlay || !this.container) {
+                return;
+            }
+
+            this.bindEvents();
+        },
+
+        bindEvents() {
+            this.burger.addEventListener('click', () => {
+                if (this.isOpen) {
+                    this.close();
+                } else {
+                    this.open();
+                }
+            });
+
+            this.overlay.addEventListener('click', (e) => {
+                if (e.target === this.overlay) {
+                    this.close();
+                }
+            });
+
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape' && this.isOpen) {
+                    this.close();
+                }
+            });
+        },
+
+        open() {
+            if (this.isOpen) return;
+
+            this.isOpen = true;
+            this.animateBurger(true);
+            this.showMenu();
+        },
+
+        close() {
+            if (!this.isOpen) return;
+
+            this.isOpen = false;
+            this.animateBurger(false);
+            this.hideMenu();
+        },
+
+        animateBurger(toClose) {
+            const line1 = this.burger.querySelector('.line-1');
+            const line2 = this.burger.querySelector('.line-2');
+            const line3 = this.burger.querySelector('.line-3');
+
+            if (toClose) {
+                line1.classList.remove('-translate-y-[6px]');
+                line1.classList.add('rotate-[45deg]');
+                line2.classList.add('opacity-[0]');
+                line3.classList.remove('translate-y-[6px]');
+                line3.classList.add('-rotate-[45deg]');
+            } else {
+                line1.classList.add('-translate-y-[6px]');
+                line1.classList.remove('rotate-[45deg]');
+                line2.classList.remove('opacity-[0]');
+                line3.classList.add('translate-y-[6px]');
+                line3.classList.remove('-rotate-[45deg]');
+            }
+        },
+
+        showMenu() {
+            document.body.style.overflow = 'hidden';
+            this.overlay.classList.remove('opacity-[0]', 'invisible');
+            this.overlay.classList.add('opacity-[1]', 'visible');
+            this.container.classList.remove('translate-x-full');
+            this.container.classList.add('translate-x-[0]');
+        },
+
+        hideMenu() {
+            document.body.style.overflow = '';
+            this.container.classList.remove('translate-x-[0]');
+            this.container.classList.add('translate-x-full');
+            this.overlay.classList.remove('opacity-[1]', 'visible');
+            this.overlay.classList.add('opacity-[0]', 'invisible');
+        }
+    };
+
+    MenuSystem.init();
+    window.MenuSystem = MenuSystem;
 });