Initial AI-generated site
This commit is contained in:
@@ -0,0 +1,301 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// Check for reduced motion preference
|
||||
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
// Set current year in footer
|
||||
const yearEl = document.getElementById('current-year');
|
||||
if (yearEl) {
|
||||
yearEl.textContent = new Date().getFullYear();
|
||||
}
|
||||
|
||||
// Navigation scroll behavior
|
||||
const nav = document.querySelector('.nav');
|
||||
let lastScrollY = window.scrollY;
|
||||
let ticking = false;
|
||||
|
||||
function updateNav() {
|
||||
const currentScrollY = window.scrollY;
|
||||
|
||||
if (currentScrollY > 100) {
|
||||
nav.classList.add('nav--scrolled');
|
||||
} else {
|
||||
nav.classList.remove('nav--scrolled');
|
||||
}
|
||||
|
||||
if (currentScrollY > lastScrollY && currentScrollY > 500) {
|
||||
nav.classList.add('nav--hidden');
|
||||
} else {
|
||||
nav.classList.remove('nav--hidden');
|
||||
}
|
||||
|
||||
lastScrollY = currentScrollY;
|
||||
ticking = false;
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', function() {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(updateNav);
|
||||
ticking = true;
|
||||
}
|
||||
}, { passive: true });
|
||||
|
||||
// Mobile menu toggle
|
||||
const navToggle = document.querySelector('.nav__toggle');
|
||||
const navMenu = document.querySelector('.nav__menu');
|
||||
|
||||
if (navToggle && navMenu) {
|
||||
navToggle.addEventListener('click', function() {
|
||||
const isExpanded = this.getAttribute('aria-expanded') === 'true';
|
||||
this.setAttribute('aria-expanded', !isExpanded);
|
||||
navMenu.classList.toggle('is-open');
|
||||
});
|
||||
|
||||
// Close mobile menu on link click
|
||||
navMenu.querySelectorAll('a').forEach(link => {
|
||||
link.addEventListener('click', function() {
|
||||
navToggle.setAttribute('aria-expanded', 'false');
|
||||
navMenu.classList.remove('is-open');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Fade out scroll indicator after delay
|
||||
const heroScroll = document.querySelector('.hero__scroll');
|
||||
if (heroScroll && !prefersReducedMotion) {
|
||||
setTimeout(() => {
|
||||
heroScroll.classList.add('is-faded');
|
||||
}, 4000);
|
||||
}
|
||||
|
||||
// Reveal animations with Intersection Observer
|
||||
const revealElements = document.querySelectorAll('.reveal');
|
||||
|
||||
if (prefersReducedMotion) {
|
||||
// Show all elements immediately if reduced motion is preferred
|
||||
revealElements.forEach(el => {
|
||||
el.classList.add('is-visible');
|
||||
});
|
||||
} else {
|
||||
let revealDelay = 0;
|
||||
|
||||
const revealObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
// Use a stagger based on when elements enter viewport
|
||||
setTimeout(() => {
|
||||
entry.target.classList.add('is-visible');
|
||||
}, revealDelay);
|
||||
revealDelay += 80;
|
||||
|
||||
// Reset delay after a batch
|
||||
setTimeout(() => {
|
||||
revealDelay = 0;
|
||||
}, 500);
|
||||
|
||||
revealObserver.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.15,
|
||||
rootMargin: '0px 0px -40px 0px'
|
||||
});
|
||||
|
||||
revealElements.forEach(el => revealObserver.observe(el));
|
||||
}
|
||||
|
||||
// Animated counters
|
||||
function animateCounter(element, target, duration = 1800) {
|
||||
if (prefersReducedMotion) {
|
||||
element.textContent = target;
|
||||
return;
|
||||
}
|
||||
|
||||
const start = performance.now();
|
||||
|
||||
function updateCounter(currentTime) {
|
||||
const elapsed = currentTime - start;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
|
||||
// Ease out cubic
|
||||
const easeOut = 1 - Math.pow(1 - progress, 3);
|
||||
const current = Math.floor(easeOut * target);
|
||||
|
||||
element.textContent = current;
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(updateCounter);
|
||||
} else {
|
||||
element.textContent = target;
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(updateCounter);
|
||||
}
|
||||
|
||||
const statNumbers = document.querySelectorAll('.stat__number');
|
||||
|
||||
const statsObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const target = parseInt(entry.target.dataset.target, 10);
|
||||
animateCounter(entry.target, target);
|
||||
statsObserver.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.5
|
||||
});
|
||||
|
||||
statNumbers.forEach(stat => statsObserver.observe(stat));
|
||||
|
||||
// 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 navHeight = nav ? nav.offsetHeight : 0;
|
||||
const targetPosition = target.getBoundingClientRect().top + window.scrollY - navHeight - 20;
|
||||
|
||||
window.scrollTo({
|
||||
top: targetPosition,
|
||||
behavior: prefersReducedMotion ? 'auto' : 'smooth'
|
||||
});
|
||||
|
||||
// Set focus for accessibility
|
||||
target.setAttribute('tabindex', '-1');
|
||||
target.focus({ preventScroll: true });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Hero title animation
|
||||
if (!prefersReducedMotion) {
|
||||
const heroTitle = document.querySelector('.hero__title');
|
||||
if (heroTitle) {
|
||||
heroTitle.style.opacity = '0';
|
||||
heroTitle.style.transform = 'translateY(30px)';
|
||||
|
||||
setTimeout(() => {
|
||||
heroTitle.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
|
||||
heroTitle.style.opacity = '1';
|
||||
heroTitle.style.transform = 'translateY(0)';
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
|
||||
// Email validation helper
|
||||
function isValidEmail(email) {
|
||||
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
||||
}
|
||||
|
||||
// Form submission handling
|
||||
const contactForm = document.querySelector('.contact__form');
|
||||
const formStatus = document.querySelector('.form-status');
|
||||
|
||||
if (contactForm && formStatus) {
|
||||
const nameInput = document.getElementById('name');
|
||||
const emailInput = document.getElementById('email');
|
||||
const nameError = document.getElementById('name-error');
|
||||
const emailError = document.getElementById('email-error');
|
||||
|
||||
// Clear error on input
|
||||
if (nameInput && nameError) {
|
||||
nameInput.addEventListener('input', function() {
|
||||
this.removeAttribute('aria-invalid');
|
||||
nameError.textContent = '';
|
||||
});
|
||||
}
|
||||
|
||||
if (emailInput && emailError) {
|
||||
emailInput.addEventListener('input', function() {
|
||||
this.removeAttribute('aria-invalid');
|
||||
emailError.textContent = '';
|
||||
});
|
||||
}
|
||||
|
||||
contactForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const submitBtn = this.querySelector('.form-submit');
|
||||
const originalText = submitBtn.textContent;
|
||||
let isValid = true;
|
||||
|
||||
// Validate name
|
||||
if (nameInput && !nameInput.value.trim()) {
|
||||
isValid = false;
|
||||
nameInput.setAttribute('aria-invalid', 'true');
|
||||
if (nameError) nameError.textContent = 'נא להזין שם מלא';
|
||||
}
|
||||
|
||||
// Validate email
|
||||
if (emailInput) {
|
||||
if (!emailInput.value.trim()) {
|
||||
isValid = false;
|
||||
emailInput.setAttribute('aria-invalid', 'true');
|
||||
if (emailError) emailError.textContent = 'נא להזין כתובת דוא״ל';
|
||||
} else if (!isValidEmail(emailInput.value.trim())) {
|
||||
isValid = false;
|
||||
emailInput.setAttribute('aria-invalid', 'true');
|
||||
if (emailError) emailError.textContent = 'כתובת דוא״ל לא תקינה';
|
||||
}
|
||||
}
|
||||
|
||||
if (!isValid) {
|
||||
formStatus.textContent = 'נא לתקן את השגיאות בטופס';
|
||||
formStatus.className = 'form-status form-status--error';
|
||||
return;
|
||||
}
|
||||
|
||||
submitBtn.textContent = 'שולח...';
|
||||
submitBtn.disabled = true;
|
||||
formStatus.textContent = '';
|
||||
|
||||
// Simulate form submission
|
||||
setTimeout(() => {
|
||||
submitBtn.textContent = 'נשלח בהצלחה! ✓';
|
||||
submitBtn.style.background = 'var(--tertiary)';
|
||||
formStatus.textContent = 'ההודעה נשלחה בהצלחה. ניצור איתכם קשר בהקדם.';
|
||||
formStatus.className = 'form-status form-status--success';
|
||||
|
||||
setTimeout(() => {
|
||||
submitBtn.textContent = originalText;
|
||||
submitBtn.style.background = '';
|
||||
submitBtn.disabled = false;
|
||||
contactForm.reset();
|
||||
formStatus.textContent = '';
|
||||
formStatus.className = 'form-status';
|
||||
}, 4000);
|
||||
}, 1500);
|
||||
});
|
||||
}
|
||||
|
||||
// Keyboard navigation enhancement
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape' && navToggle && navMenu) {
|
||||
navToggle.setAttribute('aria-expanded', 'false');
|
||||
navMenu.classList.remove('is-open');
|
||||
}
|
||||
});
|
||||
|
||||
// Detect scroll on table
|
||||
const tableWrap = document.querySelector('.schedule__table-wrap');
|
||||
const scrollHint = document.querySelector('.schedule__scroll-hint');
|
||||
|
||||
if (tableWrap && scrollHint) {
|
||||
tableWrap.addEventListener('scroll', function() {
|
||||
if (this.scrollLeft > 10) {
|
||||
scrollHint.style.opacity = '0';
|
||||
} else {
|
||||
scrollHint.style.opacity = '1';
|
||||
}
|
||||
}, { passive: true });
|
||||
}
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user