final

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