feat: Dockerize and complete project

static/js/main.js

@@ -0,0 +1,156 @@
+'use strict';
+
+const SELECTORS = {
+  navbar: '#navbar',
+  navbarToggle: '#navbarToggle',
+  navbarMenu: '#navbarMenu',
+  productsNavItem: '#productsNavItem',
+  faqItems: '.faq-item',
+  faqQuestion: '.faq-question',
+  faqAnswer: '.faq-answer',
+  fadeInElements: '.fade-in',
+};
+
+function initNavbarScroll() {
+  const navbar = document.querySelector(SELECTORS.navbar);
+  if (!navbar) return;
+
+  const onScroll = () => {
+    if (window.scrollY > 20) {
+      navbar.classList.add('scrolled');
+    } else {
+      navbar.classList.remove('scrolled');
+    }
+  };
+
+  window.addEventListener('scroll', onScroll, { passive: true });
+  onScroll();
+}
+
+function initMobileMenu() {
+  const toggle = document.querySelector(SELECTORS.navbarToggle);
+  const menu = document.querySelector(SELECTORS.navbarMenu);
+  if (!toggle || !menu) return;
+
+  toggle.addEventListener('click', () => {
+    const isOpen = menu.classList.toggle('open');
+    toggle.classList.toggle('open', isOpen);
+    toggle.setAttribute('aria-expanded', String(isOpen));
+  });
+
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && menu.classList.contains('open')) {
+      menu.classList.remove('open');
+      toggle.classList.remove('open');
+      toggle.setAttribute('aria-expanded', 'false');
+      toggle.focus();
+    }
+  });
+
+  document.addEventListener('click', (e) => {
+    if (!menu.contains(e.target) && !toggle.contains(e.target)) {
+      menu.classList.remove('open');
+      toggle.classList.remove('open');
+      toggle.setAttribute('aria-expanded', 'false');
+    }
+  });
+}
+
+function initMegaMenu() {
+  const productsItem = document.querySelector(SELECTORS.productsNavItem);
+  if (!productsItem) return;
+
+  const trigger = productsItem.querySelector('.nav-link');
+  const megamenu = productsItem.querySelector('.megamenu');
+  if (!trigger || !megamenu) return;
+
+  productsItem.addEventListener('mouseenter', () => {
+    productsItem.classList.add('open');
+    trigger.setAttribute('aria-expanded', 'true');
+  });
+
+  productsItem.addEventListener('mouseleave', () => {
+    productsItem.classList.remove('open');
+    trigger.setAttribute('aria-expanded', 'false');
+  });
+
+  trigger.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      const isOpen = productsItem.classList.toggle('open');
+      trigger.setAttribute('aria-expanded', String(isOpen));
+    }
+    if (e.key === 'Escape') {
+      productsItem.classList.remove('open');
+      trigger.setAttribute('aria-expanded', 'false');
+    }
+  });
+}
+
+function initFAQAccordion() {
+  const faqItems = document.querySelectorAll(SELECTORS.faqItems);
+  faqItems.forEach((item) => {
+    const question = item.querySelector(SELECTORS.faqQuestion);
+    const answer = item.querySelector(SELECTORS.faqAnswer);
+    if (!question || !answer) return;
+
+    question.addEventListener('click', () => {
+      const isOpen = item.classList.contains('open');
+
+      faqItems.forEach((other) => {
+        if (other !== item) {
+          other.classList.remove('open');
+          const otherQuestion = other.querySelector(SELECTORS.faqQuestion);
+          const otherAnswer = other.querySelector(SELECTORS.faqAnswer);
+          if (otherQuestion) otherQuestion.setAttribute('aria-expanded', 'false');
+          if (otherAnswer) otherAnswer.hidden = true;
+        }
+      });
+
+      item.classList.toggle('open', !isOpen);
+      question.setAttribute('aria-expanded', String(!isOpen));
+      answer.hidden = isOpen;
+    });
+  });
+}
+
+function initIntersectionObserver() {
+  const elements = document.querySelectorAll(SELECTORS.fadeInElements);
+  if (!elements.length) return;
+
+  if (!('IntersectionObserver' in window)) {
+    elements.forEach((el) => el.classList.add('visible'));
+    return;
+  }
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('visible');
+          observer.unobserve(entry.target);
+        }
+      });
+    },
+    { threshold: 0.12, rootMargin: '0px 0px -40px 0px' }
+  );
+
+  elements.forEach((el, index) => {
+    el.style.transitionDelay = `${index * 0.06}s`;
+    observer.observe(el);
+  });
+}
+
+function init() {
+  initNavbarScroll();
+  initMobileMenu();
+  initMegaMenu();
+  initFAQAccordion();
+  initIntersectionObserver();
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', init);
+} else {
+  init();
+}