197 lines
6.2 KiB
JavaScript
197 lines
6.2 KiB
JavaScript
(function() {
|
|
'use strict';
|
|
|
|
// Mobile Menu
|
|
const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
|
|
const mainNav = document.querySelector('.main-nav');
|
|
|
|
if (mobileMenuToggle && mainNav) {
|
|
mobileMenuToggle.addEventListener('click', function() {
|
|
const isOpen = mainNav.classList.toggle('open');
|
|
this.classList.toggle('open');
|
|
this.setAttribute('aria-expanded', isOpen);
|
|
document.body.style.overflow = isOpen ? 'hidden' : '';
|
|
});
|
|
|
|
// Close menu when clicking a link
|
|
mainNav.querySelectorAll('.nav-link').forEach(function(link) {
|
|
link.addEventListener('click', function() {
|
|
mainNav.classList.remove('open');
|
|
mobileMenuToggle.classList.remove('open');
|
|
mobileMenuToggle.setAttribute('aria-expanded', 'false');
|
|
document.body.style.overflow = '';
|
|
});
|
|
});
|
|
|
|
// Close menu when clicking outside
|
|
document.addEventListener('click', function(e) {
|
|
if (mainNav.classList.contains('open') &&
|
|
!mainNav.contains(e.target) &&
|
|
!mobileMenuToggle.contains(e.target)) {
|
|
mainNav.classList.remove('open');
|
|
mobileMenuToggle.classList.remove('open');
|
|
mobileMenuToggle.setAttribute('aria-expanded', 'false');
|
|
document.body.style.overflow = '';
|
|
}
|
|
});
|
|
|
|
// Close menu on Escape key
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape' && mainNav.classList.contains('open')) {
|
|
mainNav.classList.remove('open');
|
|
mobileMenuToggle.classList.remove('open');
|
|
mobileMenuToggle.setAttribute('aria-expanded', 'false');
|
|
document.body.style.overflow = '';
|
|
mobileMenuToggle.focus();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Check for reduced motion preference
|
|
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
|
|
// Scroll Reveal Animation
|
|
const observerOptions = {
|
|
root: null,
|
|
rootMargin: '0px 0px -50px 0px',
|
|
threshold: 0.1
|
|
};
|
|
|
|
const revealObserver = new IntersectionObserver(function(entries) {
|
|
entries.forEach(function(entry) {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('revealed');
|
|
revealObserver.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
if (!prefersReducedMotion) {
|
|
document.querySelectorAll('.reveal-fade, .reveal-slide').forEach(function(el) {
|
|
revealObserver.observe(el);
|
|
});
|
|
} else {
|
|
// If reduced motion is preferred, show all elements immediately
|
|
document.querySelectorAll('.reveal-fade, .reveal-slide').forEach(function(el) {
|
|
el.classList.add('revealed');
|
|
});
|
|
}
|
|
|
|
// Layer animation observer for tech diagram
|
|
const layerObserver = new IntersectionObserver(function(entries) {
|
|
entries.forEach(function(entry) {
|
|
if (entry.isIntersecting) {
|
|
const layers = entry.target.querySelectorAll('.layer');
|
|
layers.forEach(function(layer) {
|
|
layer.classList.add('animate');
|
|
});
|
|
layerObserver.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, { threshold: 0.3 });
|
|
|
|
const techDiagram = document.querySelector('.tech-diagram');
|
|
if (techDiagram && !prefersReducedMotion) {
|
|
layerObserver.observe(techDiagram);
|
|
} else if (techDiagram) {
|
|
techDiagram.querySelectorAll('.layer').forEach(function(layer) {
|
|
layer.style.opacity = '1';
|
|
});
|
|
}
|
|
|
|
// Header scroll effect
|
|
const header = document.querySelector('.site-header');
|
|
|
|
function updateHeader() {
|
|
const currentScrollY = window.scrollY;
|
|
|
|
if (currentScrollY > 100) {
|
|
header.style.background = 'rgba(26, 26, 46, 0.98)';
|
|
} else {
|
|
header.style.background = 'rgba(26, 26, 46, 0.9)';
|
|
}
|
|
}
|
|
|
|
window.addEventListener('scroll', updateHeader, { passive: true });
|
|
|
|
// Form handling (basic validation feedback)
|
|
const contactForm = document.querySelector('.contact-form form');
|
|
|
|
if (contactForm) {
|
|
contactForm.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
// Basic validation
|
|
const requiredFields = this.querySelectorAll('[required]');
|
|
let isValid = true;
|
|
|
|
requiredFields.forEach(function(field) {
|
|
if (!field.value.trim()) {
|
|
isValid = false;
|
|
field.style.borderColor = '#ef4444';
|
|
} else {
|
|
field.style.borderColor = '';
|
|
}
|
|
});
|
|
|
|
if (!isValid) {
|
|
return;
|
|
}
|
|
|
|
const submitBtn = this.querySelector('button[type="submit"]');
|
|
const originalText = submitBtn.textContent;
|
|
|
|
// Simple visual feedback
|
|
submitBtn.textContent = 'שולח...';
|
|
submitBtn.disabled = true;
|
|
|
|
// Simulate form submission (replace with actual form handling)
|
|
setTimeout(function() {
|
|
submitBtn.textContent = 'נשלח בהצלחה!';
|
|
submitBtn.style.background = '#22c55e';
|
|
|
|
setTimeout(function() {
|
|
submitBtn.textContent = originalText;
|
|
submitBtn.style.background = '';
|
|
submitBtn.disabled = false;
|
|
contactForm.reset();
|
|
}, 2000);
|
|
}, 1000);
|
|
});
|
|
|
|
// Clear error state on input
|
|
contactForm.querySelectorAll('input, textarea, select').forEach(function(field) {
|
|
field.addEventListener('input', function() {
|
|
this.style.borderColor = '';
|
|
});
|
|
});
|
|
}
|
|
|
|
// Smooth scroll for anchor links
|
|
document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
|
|
anchor.addEventListener('click', function(e) {
|
|
const targetId = this.getAttribute('href');
|
|
if (targetId === '#') return;
|
|
|
|
const targetElement = document.querySelector(targetId);
|
|
if (targetElement) {
|
|
e.preventDefault();
|
|
targetElement.scrollIntoView({
|
|
behavior: prefersReducedMotion ? 'auto' : 'smooth'
|
|
});
|
|
// Set focus for accessibility
|
|
targetElement.setAttribute('tabindex', '-1');
|
|
targetElement.focus();
|
|
}
|
|
});
|
|
});
|
|
|
|
// Add staggered animation delay to grid items
|
|
if (!prefersReducedMotion) {
|
|
document.querySelectorAll('.expertise-grid .expertise-card, .products-grid .product-card, .advantages-grid .advantage-item, .industries-grid .industry-card').forEach(function(card, index) {
|
|
card.style.transitionDelay = (index * 0.1) + 's';
|
|
});
|
|
}
|
|
|
|
})();
|