document.addEventListener('DOMContentLoaded', () => {
// 1. Theme Switcher (Dark / Light)
const themeToggle = document.getElementById('theme-toggle');
const html = document.documentElement;
const savedTheme = localStorage.getItem('theme') || 'dark';
html.setAttribute('data-theme', savedTheme);
themeToggle.addEventListener('click', () => {
const current = html.getAttribute('data-theme');
const target = current === 'dark' ? 'light' : 'dark';
html.setAttribute('data-theme', target);
localStorage.setItem('theme', target);
});
// 2. Colorway Swapper
const colorDots = document.querySelectorAll('.color-dot');
const shoeSole = document.getElementById('shoe-sole');
const shoeAccent = document.getElementById('shoe-accent');
const heroGlow = document.getElementById('hero-glow');
const colorMap = {
volt: '#CCFF00',
coral: '#FF4800',
phantom: '#333742',
glacial: '#7BE0FF'
};
colorDots.forEach(dot => {
dot.addEventListener('click', () => {
colorDots.forEach(d => d.classList.remove('active'));
dot.classList.add('active');
const color = colorMap[dot.dataset.color];
shoeSole.setAttribute('fill', color);
shoeAccent.setAttribute('fill', color);
heroGlow.style.background = `radial-gradient(circle, ${color} 0%, rgba(0,0,0,0) 70%)`;
});
});
// 3. Animated Metric Counters via IntersectionObserver
const stats = document.querySelectorAll('.stat-number');
let started = false;
const runCounter = (el) => {
const target = +el.dataset.target;
let count = 0;
const step = Math.ceil(target / 40);
const timer = setInterval(() => {
count += step;
if (count >= target) {
el.innerText = target;
clearInterval(timer);
} else {
el.innerText = count;
}
}, 30);
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting && !started) {
stats.forEach(el => runCounter(el));
started = true;
}
});
}, { threshold: 0.4 });
const statsSection = document.querySelector('.stats-section');
if (statsSection) observer.observe(statsSection);
// 4. Slide-over Cart State
const cartTrigger = document.getElementById('cart-trigger');
const cartDrawer = document.getElementById('cart-drawer');
const cartClose = document.getElementById('cart-close');
const overlay = document.getElementById('overlay');
const cartCountEl = document.getElementById('cart-count');
const cartDrawerCount = document.getElementById('cart-drawer-count');
const cartItemsContainer = document.getElementById('cart-items');
const cartSubtotal = document.getElementById('cart-subtotal');
const heroAddBtn = document.querySelector('.add-to-cart-hero');
let cart = [];
const updateCartUI = () => {
const totalCount = cart.reduce((acc, item) => acc + item.qty, 0);
const totalPrice = cart.reduce((acc, item) => acc + (item.price * item.qty), 0);
cartCountEl.innerText = totalCount;
cartDrawerCount.innerText = totalCount;
cartSubtotal.innerText = `${totalPrice.toFixed(2)} €`;
if (cart.length === 0) {
cartItemsContainer.innerHTML = '
`).join('');
document.querySelectorAll('.remove-item').forEach(btn => {
btn.addEventListener('click', (e) => {
const id = e.target.dataset.id;
cart = cart.filter(p => p.id !== id);
updateCartUI();
});
});
};
const openCart = () => {
cartDrawer.classList.add('open');
overlay.classList.add('active');
};
const closeCart = () => {
cartDrawer.classList.remove('open');
overlay.classList.remove('active');
};
cartTrigger.addEventListener('click', openCart);
cartClose.addEventListener('click', closeCart);
overlay.addEventListener('click', closeCart);
if (heroAddBtn) {
heroAddBtn.addEventListener('click', () => {
const existing = cart.find(i => i.id === "1");
if (existing) {
existing.qty += 1;
} else {
cart.push({ id: "1", name: "AllRun Pro Velocity", price: 240, qty: 1 });
}
updateCartUI();
openCart();
});
}
// 5. Stride Finder Mini-Quiz
const quizSteps = document.querySelectorAll('.quiz-step');
const quizButtons = document.querySelectorAll('.quiz-btn');
const quizResult = document.getElementById('quiz-result');
const resetQuizBtn = document.getElementById('reset-quiz');
let selections = {};
quizButtons.forEach(btn => {
btn.addEventListener('click', () => {
const key = btn.dataset.key;
const val = btn.dataset.val;
selections[key] = val;
const currentStep = btn.closest('.quiz-step');
const stepNum = +currentStep.dataset.step;
currentStep.classList.remove('active');
currentStep.style.display = 'none';
const nextStep = document.querySelector(`.quiz-step[data-step="${stepNum + 1}"]`);
if (nextStep) {
nextStep.classList.add('active');
nextStep.style.display = 'block';
} else {
showResult();
}
});
});
const showResult = () => {
quizResult.style.display = 'block';
const shoeTitle = document.getElementById('result-shoe-name');
const shoeDesc = document.getElementById('result-shoe-desc');
if (selections.terrain === 'trail') {
shoeTitle.innerText = "AllRun Apex Terra";
shoeDesc.innerText = "Tracción multidireccional y placa de protección anti-rocas.";
} else {
shoeTitle.innerText = "AllRun Carbon Velocity Pro";
shoeDesc.innerText = "Propulsión hiper-ligera con retorno optimizado para asfalto.";
}
};
resetQuizBtn.addEventListener('click', () => {
selections = {};
quizResult.style.display = 'none';
quizSteps.forEach((step, index) => {
step.style.display = index === 0 ? 'block' : 'none';
if (index === 0) step.classList.add('active');
});
});
// 6. Video Modal Handler
const videoModal = document.getElementById('video-modal');
const openVideoBtn = document.getElementById('video-modal-open');
const closeVideoBtn = document.getElementById('video-modal-close');
if (openVideoBtn && videoModal) {
openVideoBtn.addEventListener('click', () => videoModal.showModal());
closeVideoBtn.addEventListener('click', () => videoModal.close());
videoModal.addEventListener('click', (e) => {
if (e.target === videoModal) videoModal.close();
});
}
});
Tu bolsa está vacía.
'; return; } cartItemsContainer.innerHTML = cart.map(item => `
${item.name}
${item.qty} x ${item.price} €
${item.qty} x ${item.price} €