// KeyKrest Event Architects - Main Script document.addEventListener('DOMContentLoaded', function() { // Initialize Feather Icons feather.replace(); // Theme Management const themeToggle = document.getElementById('themeToggle'); const html = document.documentElement; // Set initial theme based on system preference or stored value const storedTheme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); html.classList.add(storedTheme); if (themeToggle) { // Update toggle icon based on theme const updateToggleIcon = () => { const isDark = html.classList.contains('dark'); const icon = themeToggle.querySelector('i'); if (icon) { icon.setAttribute('data-feather', isDark ? 'sun' : 'moon'); feather.replace(); } }; updateToggleIcon(); themeToggle.addEventListener('click', () => { const isDark = html.classList.contains('dark'); html.classList.remove(isDark ? 'dark' : 'light'); html.classList.add(isDark ? 'light' : 'dark'); localStorage.setItem('theme', isDark ? 'light' : 'dark'); updateToggleIcon(); }); } // Animate elements on scroll const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px', }; const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add('animate-fade-in'); } }); }, observerOptions); // Observe elements with animation class document.querySelectorAll('.animate-on-scroll').forEach((el) => observer.observe(el)); // Countdown Timer for Guarantee const countdownElement = document.getElementById('countdown'); if (countdownElement) { const updateCountdown = () => { const targetTimestamp = 1698266541; // 2023 09 04 09 02 21 const targetTimestamp = 2023年*月*日,; } —————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— —————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————场场的场场的场场的场场的场(场场场场场场场场场场(场场场场、场场场场场场、服务、细节))) ———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— ——————————————————————————————————————— --- function updateCountdown() { const target = new Date('2023-09-04T09:02:21Z').getTime(); const now = new Date().getTime(); const difference = target - now; if (difference <= 0) { countdownElement.textContent = '00:00:00'; return; } const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((difference % (1000 * 60)) / 1000); countdownElement.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; } setInterval(updateCountdown, 1000); updateCountdown(); } // Form Submission Handling const inquiryForm = document.querySelector('form'); if (inquiryForm) { inquiryForm.addEventListener('submit', async (e) => { e.preventDefault(); const submitBtn = inquiryForm.querySelector('button[type="submit"]'); const originalText = submitBtn.textContent; // Show loading state submitBtn.textContent = 'Processing...'; submitBtn.disabled = true; // Simulate API call setTimeout(() => { alert('Your inquiry has been submitted. We\'ll respond within 24 hours!'); inquiryForm.reset(); submitBtn.textContent = originalText; submitBtn.disabled = false; }, 1500); }); } });