Initial AI-generated site
This commit is contained in:
@@ -0,0 +1,306 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// DOM Elements
|
||||
const menuToggle = document.querySelector('.menu-toggle');
|
||||
const mobileMenu = document.querySelector('.mobile-menu');
|
||||
const mobileMenuClose = document.querySelector('.mobile-menu-close');
|
||||
const mobileNavItems = document.querySelectorAll('.mobile-nav-item button');
|
||||
|
||||
const searchToggle = document.querySelector('.search-toggle');
|
||||
const searchOverlay = document.querySelector('.search-overlay');
|
||||
const searchClose = document.querySelector('.search-close');
|
||||
const searchInput = document.getElementById('search-input');
|
||||
|
||||
const cartToggle = document.querySelector('.cart-toggle');
|
||||
const cartDrawer = document.querySelector('.cart-drawer');
|
||||
const cartDrawerClose = document.querySelector('.cart-drawer-close');
|
||||
const cartOverlay = document.querySelector('.cart-overlay');
|
||||
|
||||
const heroSlides = document.querySelectorAll('.hero-slide');
|
||||
const heroNavBtns = document.querySelectorAll('.hero-nav-btn');
|
||||
|
||||
// Mobile Menu
|
||||
function openMobileMenu() {
|
||||
mobileMenu.classList.add('active');
|
||||
mobileMenu.setAttribute('aria-hidden', 'false');
|
||||
menuToggle.setAttribute('aria-expanded', 'true');
|
||||
document.body.classList.add('menu-open');
|
||||
}
|
||||
|
||||
function closeMobileMenu() {
|
||||
mobileMenu.classList.remove('active');
|
||||
mobileMenu.setAttribute('aria-hidden', 'true');
|
||||
menuToggle.setAttribute('aria-expanded', 'false');
|
||||
document.body.classList.remove('menu-open');
|
||||
}
|
||||
|
||||
if (menuToggle && mobileMenu) {
|
||||
menuToggle.addEventListener('click', openMobileMenu);
|
||||
mobileMenuClose.addEventListener('click', closeMobileMenu);
|
||||
|
||||
// Close on escape
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && mobileMenu.classList.contains('active')) {
|
||||
closeMobileMenu();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Mobile Nav Accordion
|
||||
mobileNavItems.forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
const parent = this.closest('.mobile-nav-item');
|
||||
const isOpen = parent.classList.contains('open');
|
||||
|
||||
// Close all
|
||||
document.querySelectorAll('.mobile-nav-item.open').forEach(openItem => {
|
||||
openItem.classList.remove('open');
|
||||
openItem.querySelector('button').setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
|
||||
// Toggle current
|
||||
if (!isOpen) {
|
||||
parent.classList.add('open');
|
||||
this.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Search
|
||||
function openSearch() {
|
||||
searchOverlay.classList.add('active');
|
||||
searchOverlay.setAttribute('aria-hidden', 'false');
|
||||
document.body.classList.add('search-open');
|
||||
setTimeout(() => searchInput.focus(), 100);
|
||||
}
|
||||
|
||||
function closeSearch() {
|
||||
searchOverlay.classList.remove('active');
|
||||
searchOverlay.setAttribute('aria-hidden', 'true');
|
||||
document.body.classList.remove('search-open');
|
||||
searchInput.value = '';
|
||||
}
|
||||
|
||||
if (searchToggle && searchOverlay) {
|
||||
searchToggle.addEventListener('click', openSearch);
|
||||
searchClose.addEventListener('click', closeSearch);
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && searchOverlay.classList.contains('active')) {
|
||||
closeSearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Cart Drawer
|
||||
function openCart() {
|
||||
cartDrawer.classList.add('active');
|
||||
cartDrawer.setAttribute('aria-hidden', 'false');
|
||||
cartOverlay.classList.add('active');
|
||||
document.body.classList.add('cart-open');
|
||||
}
|
||||
|
||||
function closeCart() {
|
||||
cartDrawer.classList.remove('active');
|
||||
cartDrawer.setAttribute('aria-hidden', 'true');
|
||||
cartOverlay.classList.remove('active');
|
||||
document.body.classList.remove('cart-open');
|
||||
}
|
||||
|
||||
if (cartToggle && cartDrawer) {
|
||||
cartToggle.addEventListener('click', openCart);
|
||||
cartDrawerClose.addEventListener('click', closeCart);
|
||||
cartOverlay.addEventListener('click', closeCart);
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && cartDrawer.classList.contains('active')) {
|
||||
closeCart();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Hero Slider
|
||||
let currentSlide = 0;
|
||||
let slideInterval;
|
||||
|
||||
function showSlide(index) {
|
||||
heroSlides.forEach((slide, i) => {
|
||||
slide.classList.toggle('active', i === index);
|
||||
});
|
||||
heroNavBtns.forEach((btn, i) => {
|
||||
btn.classList.toggle('active', i === index);
|
||||
});
|
||||
currentSlide = index;
|
||||
}
|
||||
|
||||
function nextSlide() {
|
||||
const next = (currentSlide + 1) % heroSlides.length;
|
||||
showSlide(next);
|
||||
}
|
||||
|
||||
function startSlider() {
|
||||
slideInterval = setInterval(nextSlide, 5000);
|
||||
}
|
||||
|
||||
function stopSlider() {
|
||||
clearInterval(slideInterval);
|
||||
}
|
||||
|
||||
if (heroSlides.length > 1 && heroNavBtns.length > 0) {
|
||||
heroNavBtns.forEach((btn, index) => {
|
||||
btn.addEventListener('click', () => {
|
||||
stopSlider();
|
||||
showSlide(index);
|
||||
startSlider();
|
||||
});
|
||||
});
|
||||
|
||||
// Check for reduced motion preference
|
||||
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
|
||||
if (!prefersReducedMotion.matches) {
|
||||
startSlider();
|
||||
}
|
||||
|
||||
prefersReducedMotion.addEventListener('change', () => {
|
||||
if (prefersReducedMotion.matches) {
|
||||
stopSlider();
|
||||
} else {
|
||||
startSlider();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Scroll Animations
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px',
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const animateOnScroll = (entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
|
||||
|
||||
if (!prefersReducedMotion.matches) {
|
||||
const observer = new IntersectionObserver(animateOnScroll, observerOptions);
|
||||
|
||||
// Add animation classes
|
||||
const animatedElements = document.querySelectorAll(
|
||||
'.product-card, .category-card, .collection-card, .feature'
|
||||
);
|
||||
|
||||
animatedElements.forEach((el, index) => {
|
||||
el.style.opacity = '0';
|
||||
el.style.transform = 'translateY(20px)';
|
||||
el.style.transition = `opacity 0.6s ease ${index * 0.05}s, transform 0.6s ease ${index * 0.05}s`;
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
// Add visible class styles
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
.product-card.visible,
|
||||
.category-card.visible,
|
||||
.collection-card.visible,
|
||||
.feature.visible {
|
||||
opacity: 1 !important;
|
||||
transform: translateY(0) !important;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
// Quick Add to Cart
|
||||
const quickAddButtons = document.querySelectorAll('.product-quick-add');
|
||||
|
||||
quickAddButtons.forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Visual feedback
|
||||
const originalHTML = btn.innerHTML;
|
||||
btn.innerHTML = `
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
`;
|
||||
btn.style.background = 'var(--color-text)';
|
||||
btn.style.borderColor = 'var(--color-text)';
|
||||
btn.style.color = 'var(--color-white)';
|
||||
|
||||
setTimeout(() => {
|
||||
btn.innerHTML = originalHTML;
|
||||
btn.style.background = '';
|
||||
btn.style.borderColor = '';
|
||||
btn.style.color = '';
|
||||
}, 1500);
|
||||
|
||||
// Update cart count
|
||||
const cartCount = document.querySelector('.cart-count');
|
||||
if (cartCount) {
|
||||
const current = parseInt(cartCount.textContent) || 0;
|
||||
cartCount.textContent = current + 1;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Newsletter Form
|
||||
const newsletterForm = document.querySelector('.newsletter-form');
|
||||
|
||||
if (newsletterForm) {
|
||||
newsletterForm.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const email = newsletterForm.querySelector('input[type="email"]');
|
||||
const btn = newsletterForm.querySelector('button');
|
||||
const originalText = btn.textContent;
|
||||
|
||||
btn.textContent = 'נרשמת בהצלחה!';
|
||||
btn.disabled = true;
|
||||
email.value = '';
|
||||
|
||||
setTimeout(() => {
|
||||
btn.textContent = originalText;
|
||||
btn.disabled = false;
|
||||
}, 3000);
|
||||
});
|
||||
}
|
||||
|
||||
// Dropdown keyboard navigation
|
||||
const dropdownItems = document.querySelectorAll('.nav-item.has-dropdown');
|
||||
|
||||
dropdownItems.forEach(item => {
|
||||
const link = item.querySelector('.nav-link');
|
||||
const dropdown = item.querySelector('.dropdown-menu');
|
||||
|
||||
link.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
dropdown.style.opacity = '1';
|
||||
dropdown.style.visibility = 'visible';
|
||||
dropdown.style.transform = 'translateY(0)';
|
||||
|
||||
const firstLink = dropdown.querySelector('a');
|
||||
if (firstLink) firstLink.focus();
|
||||
}
|
||||
});
|
||||
|
||||
dropdown.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
dropdown.style.opacity = '';
|
||||
dropdown.style.visibility = '';
|
||||
dropdown.style.transform = '';
|
||||
link.focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user