測試業

// Mobile Navigation Toggle document.addEventListener('DOMContentLoaded', function() { const navToggle = document.querySelector('.nav-toggle'); const navMenu = document.querySelector('.nav-menu'); if (navToggle && navMenu) { navToggle.addEventListener('click', function() { navMenu.classList.toggle('active'); // Animate hamburger menu const spans = navToggle.querySelectorAll('span'); if (navMenu.classList.contains('active')) { spans[0].style.transform = 'rotate(45deg) translate(5px, 5px)'; spans[1].style.opacity = '0'; spans[2].style.transform = 'rotate(-45deg) translate(7px, -6px)'; } else { spans[0].style.transform = 'none'; spans[1].style.opacity = '1'; spans[2].style.transform = 'none'; } }); // Close menu when clicking on a link const navLinks = navMenu.querySelectorAll('a'); navLinks.forEach(link => { link.addEventListener('click', () => { navMenu.classList.remove('active'); const spans = navToggle.querySelectorAll('span'); spans[0].style.transform = 'none'; spans[1].style.opacity = '1'; spans[2].style.transform = 'none'; }); }); } }); // Smooth scrolling for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { const headerHeight = document.querySelector('.header').offsetHeight; const targetPosition = target.offsetTop - headerHeight - 20; window.scrollTo({ top: targetPosition, behavior: 'smooth' }); } }); }); // Intersection Observer for animations const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; } }); }, observerOptions); // Observe elements for animation document.addEventListener('DOMContentLoaded', function() { const animatedElements = document.querySelectorAll('.feature-card, .faq-item, .hygiene-list li'); animatedElements.forEach(el => { el.style.opacity = '0'; el.style.transform = 'translateY(30px)'; el.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out'; observer.observe(el); }); }); // Enhanced table responsiveness function handleTableResponsiveness() { const tables = document.querySelectorAll('.spec-table'); tables.forEach(table => { const headers = table.querySelectorAll('th'); const rows = table.querySelectorAll('tbody tr'); rows.forEach(row => { const cells = row.querySelectorAll('td'); cells.forEach((cell, index) => { if (headers[index]) { cell.setAttribute('data-label', headers[index].textContent.trim()); } }); }); }); } // Call table responsiveness function document.addEventListener('DOMContentLoaded', handleTableResponsiveness); // FAQ accordion enhancement document.addEventListener('DOMContentLoaded', function() { const faqItems = document.querySelectorAll('.faq-item'); faqItems.forEach(item => { const summary = item.querySelector('.faq-question'); summary.addEventListener('click', function(e) { // Close other open items faqItems.forEach(otherItem => { if (otherItem !== item && otherItem.hasAttribute('open')) { otherItem.removeAttribute('open'); } }); }); }); }); // Scroll to top functionality function createScrollToTopButton() { const scrollButton = document.createElement('button'); scrollButton.innerHTML = '↑'; scrollButton.className = 'scroll-to-top'; scrollButton.setAttribute('aria-label', '回到頂部'); // Add styles const style = document.createElement('style'); style.textContent = ` .scroll-to-top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: white; border: none; font-size: 20px; cursor: pointer; opacity: 0; visibility: hidden; transition: all 0.3s ease; box-shadow: var(--shadow-medium); z-index: 1000; } .scroll-to-top.visible { opacity: 1; visibility: visible; } .scroll-to-top:hover { transform: translateY(-3px); box-shadow: var(--shadow-heavy); } @media (max-width: 768px) { .scroll-to-top { bottom: 20px; right: 20px; width: 45px; height: 45px; font-size: 18px; } } `; document.head.appendChild(style); document.body.appendChild(scrollButton); // Show/hide button based on scroll position window.addEventListener('scroll', () => { if (window.pageYOffset > 300) { scrollButton.classList.add('visible'); } else { scrollButton.classList.remove('visible'); } }); // Scroll to top when clicked scrollButton.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); } // Initialize scroll to top button document.addEventListener('DOMContentLoaded', createScrollToTopButton); // Performance optimization: Lazy loading for images document.addEventListener('DOMContentLoaded', function() { const images = document.querySelectorAll('img[src]'); if ('IntersectionObserver' in window) { const imageObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.style.opacity = '0'; img.style.transition = 'opacity 0.3s ease'; img.onload = () => { img.style.opacity = '1'; }; imageObserver.unobserve(img); } }); }); images.forEach(img => imageObserver.observe(img)); } }); // Enhanced keyboard navigation document.addEventListener('keydown', function(e) { // ESC key to close mobile menu if (e.key === 'Escape') { const navMenu = document.querySelector('.nav-menu'); const navToggle = document.querySelector('.nav-toggle'); if (navMenu && navMenu.classList.contains('active')) { navMenu.classList.remove('active'); const spans = navToggle.querySelectorAll('span'); spans[0].style.transform = 'none'; spans[1].style.opacity = '1'; spans[2].style.transform = 'none'; } } }); // Add loading animation document.addEventListener('DOMContentLoaded', function() { // Remove any existing loading states document.body.classList.add('loaded'); // Add CSS for loading state const loadingStyle = document.createElement('style'); loadingStyle.textContent = ` body:not(.loaded) { overflow: hidden; } body:not(.loaded)::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); z-index: 9999; display: flex; align-items: center; justify-content: center; } body:not(.loaded)::after { content: 'JFE 琺瑯壁板'; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 2rem; font-weight: 700; z-index: 10000; animation: pulse 1.5s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .loaded::before, .loaded::after { display: none; } `; document.head.appendChild(loadingStyle); }); // Console welcome message console.log(` 🏗️ JFE 琺瑯壁板網站 ✨ 優化版本已載入 🚀 現代化設計 | 響應式布局 | 無障礙支援 `);