Initial AI-generated site
This commit is contained in:
@@ -1,225 +1,196 @@
|
||||
// ========================================
|
||||
// HEADER SCROLL EFFECT
|
||||
// ========================================
|
||||
const header = document.getElementById('header');
|
||||
let lastScroll = 0;
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
function handleScroll() {
|
||||
const currentScroll = window.pageYOffset;
|
||||
|
||||
if (currentScroll > 50) {
|
||||
header.classList.add('header--scrolled');
|
||||
} else {
|
||||
header.classList.remove('header--scrolled');
|
||||
}
|
||||
|
||||
lastScroll = currentScroll;
|
||||
}
|
||||
// Mobile Menu
|
||||
const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
|
||||
const mainNav = document.querySelector('.main-nav');
|
||||
|
||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||
|
||||
// ========================================
|
||||
// MOBILE NAVIGATION
|
||||
// ========================================
|
||||
const navToggle = document.querySelector('.nav-toggle');
|
||||
const nav = document.getElementById('nav');
|
||||
|
||||
if (navToggle && nav) {
|
||||
navToggle.addEventListener('click', () => {
|
||||
const isExpanded = navToggle.getAttribute('aria-expanded') === 'true';
|
||||
navToggle.setAttribute('aria-expanded', !isExpanded);
|
||||
nav.classList.toggle('active');
|
||||
});
|
||||
|
||||
// Close nav when clicking on a link
|
||||
nav.querySelectorAll('.nav__link').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
navToggle.setAttribute('aria-expanded', 'false');
|
||||
nav.classList.remove('active');
|
||||
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 nav on escape key
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && nav.classList.contains('active')) {
|
||||
navToggle.setAttribute('aria-expanded', 'false');
|
||||
nav.classList.remove('active');
|
||||
navToggle.focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// REVEAL ON SCROLL
|
||||
// ========================================
|
||||
function initReveal() {
|
||||
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
if (prefersReducedMotion) {
|
||||
document.querySelectorAll('.reveal').forEach(el => {
|
||||
el.classList.add('visible');
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const revealElements = document.querySelectorAll('.reveal');
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
});
|
||||
|
||||
reveal Elements.forEach(el => observer.observe(el));
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// SMOOTH SCROLL FOR ANCHOR LINKS
|
||||
// ========================================
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function(e) {
|
||||
const href = this.getAttribute('href');
|
||||
if (href === '#') return;
|
||||
|
||||
const target = document.querySelector(href);
|
||||
if (target) {
|
||||
e.preventDefault();
|
||||
const headerHeight = header.offsetHeight;
|
||||
const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - headerHeight;
|
||||
|
||||
window.scrollTo({
|
||||
top: targetPosition,
|
||||
behavior: 'smooth'
|
||||
// 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 = '';
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// ========================================
|
||||
// FORM HANDLING
|
||||
// ========================================
|
||||
const contactForm = document.querySelector('.contact-form');
|
||||
// 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 = '';
|
||||
}
|
||||
});
|
||||
|
||||
if (contactForm) {
|
||||
const formStatus = document.getElementById('form-status');
|
||||
|
||||
function showError(field, message) {
|
||||
const errorEl = document.getElementById(field.id + '-error');
|
||||
field.classList.add('error');
|
||||
field.setAttribute('aria-invalid', 'true');
|
||||
if (errorEl) {
|
||||
errorEl.textContent = message;
|
||||
// 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');
|
||||
|
||||
function clearError(field) {
|
||||
const errorEl = document.getElementById(field.id + '-error');
|
||||
field.classList.remove('error');
|
||||
field.removeAttribute('aria-invalid');
|
||||
if (errorEl) {
|
||||
errorEl.textContent = '';
|
||||
}
|
||||
}
|
||||
|
||||
contactForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
let isValid = true;
|
||||
let firstError = null;
|
||||
|
||||
// Validate name
|
||||
const nameField = this.querySelector('#name');
|
||||
if (!nameField.value.trim()) {
|
||||
showError(nameField, 'נא להזין שם מלא');
|
||||
isValid = false;
|
||||
if (!firstError) firstError = nameField;
|
||||
} else {
|
||||
clearError(nameField);
|
||||
}
|
||||
|
||||
// Validate email
|
||||
const emailField = this.querySelector('#email');
|
||||
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailField.value.trim()) {
|
||||
showError(emailField, 'נא להזין כתובת אימייל');
|
||||
isValid = false;
|
||||
if (!firstError) firstError = emailField;
|
||||
} else if (!emailPattern.test(emailField.value)) {
|
||||
showError(emailField, 'נא להזין כתובת אימייל תקינה');
|
||||
isValid = false;
|
||||
if (!firstError) firstError = emailField;
|
||||
} else {
|
||||
clearError(emailField);
|
||||
}
|
||||
|
||||
// Validate message
|
||||
const messageField = this.querySelector('#message');
|
||||
if (!messageField.value.trim()) {
|
||||
showError(messageField, 'נא להזין הודעה');
|
||||
isValid = false;
|
||||
if (!firstError) firstError = messageField;
|
||||
} else {
|
||||
clearError(messageField);
|
||||
}
|
||||
|
||||
if (!isValid) {
|
||||
if (firstError) {
|
||||
firstError.focus();
|
||||
}
|
||||
if (formStatus) {
|
||||
formStatus.textContent = 'יש לתקן את השגיאות בטופס';
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const submitBtn = this.querySelector('.form-submit');
|
||||
const originalText = submitBtn.textContent;
|
||||
|
||||
submitBtn.textContent = 'שולח...';
|
||||
submitBtn.disabled = true;
|
||||
|
||||
// Simulate form submission
|
||||
setTimeout(() => {
|
||||
submitBtn.textContent = 'נשלח בהצלחה!';
|
||||
submitBtn.style.background = 'var(--gold)';
|
||||
if (formStatus) {
|
||||
formStatus.textContent = 'ההודעה נשלחה בהצלחה. אחזור אליכם בהקדם.';
|
||||
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;
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
submitBtn.textContent = originalText;
|
||||
submitBtn.style.background = '';
|
||||
submitBtn.disabled = false;
|
||||
contactForm.reset();
|
||||
if (formStatus) {
|
||||
formStatus.textContent = '';
|
||||
}
|
||||
}, 3000);
|
||||
}, 1500);
|
||||
});
|
||||
|
||||
// Clear error on input
|
||||
contactForm.querySelectorAll('.form-input').forEach(input => {
|
||||
input.addEventListener('input', function() {
|
||||
clearError(this);
|
||||
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();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// INIT
|
||||
// ========================================
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initReveal();
|
||||
});
|
||||
// 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';
|
||||
});
|
||||
}
|
||||
|
||||
// Also run on load for images etc
|
||||
window.addEventListener('load', () => {
|
||||
setTimeout(initReveal, 100);
|
||||
});
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user