lotus-real/script.js

(function() {
  'use strict';

  // Intersection Observer for scroll animations
  const observerOptions = {
    root: null,
    rootMargin: '0px 0px -50px 0px',
    threshold: 0.1
  };

  const animateOnScroll = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const delay = entry.target.dataset.delay || 0;
        setTimeout(() => {
          entry.target.classList.add('visible');
        }, delay * 100);
        animateOnScroll.unobserve(entry.target);
      }
    });
  }, observerOptions);

  // Observe elements
  document.querySelectorAll('.about-content, .area-card, .project-card, .contact-form').forEach((el, index) => {
    el.dataset.delay = index % 4;
    animateOnScroll.observe(el);
  });

  // Header scroll effect
  const header = document.querySelector('.site-header');

  window.addEventListener('scroll', () => {
    const currentScroll = window.pageYOffset;
    
    if (currentScroll > 100) {
      header.classList.add('scrolled');
    } else {
      header.classList.remove('scrolled');
    }
  }, { passive: true });

  // Mobile navigation
  const navToggle = document.querySelector('.nav-toggle');
  const navLinks = document.querySelector('.nav-links');

  if (navToggle && navLinks) {
    navToggle.addEventListener('click', () => {
      const isActive = navToggle.classList.toggle('active');
      navLinks.classList.toggle('active');
      navToggle.setAttribute('aria-expanded', isActive);
      document.body.style.overflow = isActive ? 'hidden' : '';
    });

    // Close mobile nav on link click
    navLinks.querySelectorAll('a').forEach(link => {
      link.addEventListener('click', () => {
        navToggle.classList.remove('active');
        navLinks.classList.remove('active');
        navToggle.setAttribute('aria-expanded', 'false');
        document.body.style.overflow = '';
      });
    });
  }

  // Smooth scroll for anchor links
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
      const href = this.getAttribute('href');
      if (href === '#') return;
      
      e.preventDefault();
      const target = document.querySelector(href);
      if (target) {
        const headerHeight = header ? header.offsetHeight : 0;
        const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - headerHeight;
        
        window.scrollTo({
          top: targetPosition,
          behavior: 'smooth'
        });
      }
    });
  });

  // Form handling with validation and accessibility
  const contactForm = document.querySelector('.contact-form');
  
  if (contactForm) {
    // Create live region for form announcements
    const liveRegion = document.createElement('div');
    liveRegion.setAttribute('aria-live', 'polite');
    liveRegion.setAttribute('aria-atomic', 'true');
    liveRegion.className = 'sr-only';
    contactForm.appendChild(liveRegion);

    contactForm.addEventListener('submit', function(e) {
      e.preventDefault();
      
      // Basic validation
      const name = this.querySelector('#name');
      const email = this.querySelector('#email');
      const message = this.querySelector('#message');
      
      let isValid = true;
      const errors = [];
      
      // Clear previous errors
      this.querySelectorAll('.form-error').forEach(el => el.remove());
      [name, email, message].forEach(field => {
        if (field) {
          field.removeAttribute('aria-invalid');
          field.removeAttribute('aria-describedby');
        }
      });
      
      // Validate required fields
      if (name && !name.value.trim()) {
        showFieldError(name, 'נא למלא שם מלא');
        isValid = false;
        errors.push('שם מלא');
      }
      
      if (email && !email.value.trim()) {
        showFieldError(email, 'נא למלא כתובת דוא"ל');
        isValid = false;
        errors.push('דוא"ל');
      } else if (email && email.value && !isValidEmail(email.value)) {
        showFieldError(email, 'נא להזין כתובת דוא"ל תקינה');
        isValid = false;
        errors.push('דוא"ל תקין');
      }
      
      if (message && !message.value.trim()) {
        showFieldError(message, 'נא למלא הודעה');
        isValid = false;
        errors.push('הודעה');
      }
      
      if (!isValid) {
        liveRegion.textContent = 'יש לתקן את השדות הבאים: ' + errors.join(', ');
        return;
      }
      
      const submitBtn = this.querySelector('.btn-submit');
      const originalText = submitBtn.textContent;
      
      submitBtn.textContent = 'שולח...';
      submitBtn.disabled = true;
      liveRegion.textContent = 'שולח את הטופס...';
      
      // Simulate form submission
      setTimeout(() => {
        submitBtn.textContent = 'נשלח בהצלחה!';
        submitBtn.style.background = '#4a9c6d';
        liveRegion.textContent = 'ההודעה נשלחה בהצלחה!';
        
        this.reset();
        
        setTimeout(() => {
          submitBtn.textContent = originalText;
          submitBtn.style.background = '';
          submitBtn.disabled = false;
        }, 3000);
      }, 1500);
    });
    
    function showFieldError(field, message) {
      const errorId = field.id + '-error';
      const errorEl = document.createElement('span');
      errorEl.className = 'form-error';
      errorEl.id = errorId;
      errorEl.textContent = message;
      field.parentNode.appendChild(errorEl);
      field.setAttribute('aria-invalid', 'true');
      field.setAttribute('aria-describedby', errorId);
    }
  }
  
  function isValidEmail(email) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  }

  // Add loaded class
  window.addEventListener('load', () => {
    document.body.classList.add('loaded');
  });

})();