|
|
|
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
initializeAnimations(); |
|
|
initializeTrackingForm(); |
|
|
initializeServiceCards(); |
|
|
}); |
|
|
|
|
|
|
|
|
function initializeAnimations() { |
|
|
const observerOptions = { |
|
|
threshold: 0.1, |
|
|
rootMargin: '0px 0px -50px 0px' |
|
|
}; |
|
|
|
|
|
const observer = new IntersectionObserver(function(entries) { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
entry.target.classList.add('fade-in-up'); |
|
|
observer.unobserve(entry.target); |
|
|
} |
|
|
}); |
|
|
}, observerOptions); |
|
|
|
|
|
|
|
|
document.querySelectorAll('section').forEach(section => { |
|
|
observer.observe(section); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function initializeTrackingForm() { |
|
|
const trackingForm = document.querySelector('#tracking-form'); |
|
|
if (trackingForm) { |
|
|
trackingForm.addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
const trackingNumber = this.querySelector('input[type="text"]').value; |
|
|
if (trackingNumber.trim()) { |
|
|
window.location.href = `/tracking?number=${encodeURIComponent(trackingNumber)}`; |
|
|
} |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function initializeServiceCards() { |
|
|
const serviceCards = document.querySelectorAll('.service-card'); |
|
|
serviceCards.forEach(card => { |
|
|
card.addEventListener('mouseenter', function() { |
|
|
this.style.transform = 'translateY(-10px)'; |
|
|
this.style.boxShadow = '0 20px 40px rgba(0,0,0,0.1)'; |
|
|
}); |
|
|
|
|
|
card.addEventListener('mouseleave', function() { |
|
|
this.style.transform = 'translateY(0)'; |
|
|
this.style.boxShadow = '0 10px 30px rgba(0,0,0,0.08)'; |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
async function fetchTrackingInfo(trackingNumber) { |
|
|
try { |
|
|
|
|
|
const response = await fetch(`/api/tracking/${trackingNumber}`); |
|
|
const data = await response.json(); |
|
|
return data; |
|
|
} catch (error) { |
|
|
console.error('Error fetching tracking info:', error); |
|
|
return null; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function scrollToSection(sectionId) { |
|
|
const element = document.getElementById(sectionId); |
|
|
if (element) { |
|
|
element.scrollIntoView({ |
|
|
behavior: 'smooth', |
|
|
block: 'start' |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function toggleMobileMenu() { |
|
|
const mobileMenu = document.querySelector('#mobile-menu'); |
|
|
if (mobileMenu) { |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function validateForm(form) { |
|
|
const inputs = form.querySelectorAll('input[required], textarea[required]'); |
|
|
let isValid = true; |
|
|
|
|
|
inputs.forEach(input => { |
|
|
if (!input.value.trim()) { |
|
|
input.classList.add('border-red-500'); |
|
|
isValid = false; |
|
|
} else { |
|
|
input.classList.remove('border-red-500'); |
|
|
} |
|
|
}); |
|
|
|
|
|
return isValid; |
|
|
} |
|
|
|
|
|
|
|
|
function debounce(func, wait) { |
|
|
let timeout; |
|
|
return function executedFunction(...args) { |
|
|
const later = () => { |
|
|
clearTimeout(timeout); |
|
|
func(...args); |
|
|
}; |
|
|
clearTimeout(timeout); |
|
|
timeout = setTimeout(later, wait); |
|
|
}; |
|
|
} |