File manager - Edit - /home/webapp69.cm.in.th/u69319090030/69319090030/script.js
Back
/* ==================== SELECT ELEMENTS ==================== */ const header = document.getElementById('header'); const navMenu = document.getElementById('nav-menu'); const navToggle = document.getElementById('nav-toggle'); const navLinks = document.querySelectorAll('.nav-link'); const sections = document.querySelectorAll('section[id]'); const contactForm = document.getElementById('contact-form'); const toastContainer = document.getElementById('toast-container'); /* ==================== MOBILE MENU TOGGLE ==================== */ if (navToggle) { navToggle.addEventListener('click', () => { navMenu.classList.toggle('show-menu'); navToggle.classList.toggle('toggle-active'); }); } // Close menu when clicking a nav link (both top and bottom) navLinks.forEach(link => { link.addEventListener('click', () => { navMenu.classList.remove('show-menu'); navToggle.classList.remove('toggle-active'); }); }); const bottomNavLinks = document.querySelectorAll('.bottom-nav-link'); bottomNavLinks.forEach(link => { link.addEventListener('click', () => { navMenu.classList.remove('show-menu'); navToggle.classList.remove('toggle-active'); }); }); /* ==================== STICKY HEADER ==================== */ function stickyHeader() { if (window.scrollY >= 50) { header.classList.add('scroll-header'); header.style.padding = '0.2rem 0'; header.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.3)'; } else { header.classList.remove('scroll-header'); header.style.padding = '0'; header.style.boxShadow = 'none'; } } window.addEventListener('scroll', stickyHeader); /* ==================== SCROLL SECTIONS ACTIVE LINK ==================== */ function scrollActive() { const scrollY = window.pageYOffset; sections.forEach(current => { const sectionHeight = current.offsetHeight; const sectionTop = current.offsetTop - 120; // offset to match header const sectionId = current.getAttribute('id'); if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) { document.querySelector('.nav-menu a[href*=' + sectionId + ']')?.classList.add('active-link'); document.querySelector('.bottom-nav a[href*=' + sectionId + ']')?.classList.add('active-link'); } else { document.querySelector('.nav-menu a[href*=' + sectionId + ']')?.classList.remove('active-link'); document.querySelector('.bottom-nav a[href*=' + sectionId + ']')?.classList.remove('active-link'); } }); } window.addEventListener('scroll', scrollActive); /* ==================== TOAST NOTIFICATION FUNCTION ==================== */ function showToast(message, type = 'success') { const toast = document.createElement('div'); toast.className = `toast toast-${type}`; // Add icon and message toast.innerHTML = ` <i class="fa-solid fa-circle-check"></i> <span>${message}</span> `; toastContainer.appendChild(toast); // Trigger slide in setTimeout(() => { toast.classList.add('show'); }, 10); // Auto remove after 4 seconds setTimeout(() => { toast.classList.remove('show'); setTimeout(() => { toast.remove(); }, 400); // match transition speed }, 4000); } /* ==================== CONTACT FORM SUBMISSION ==================== */ if (contactForm) { contactForm.addEventListener('submit', (e) => { e.preventDefault(); // Collect form data const nameVal = document.getElementById('name').value; const emailVal = document.getElementById('email').value; const messageVal = document.getElementById('message').value; // Submit Button animation state const submitBtn = contactForm.querySelector('.submit-btn'); const originalBtnHTML = submitBtn.innerHTML; submitBtn.disabled = true; submitBtn.innerHTML = `<span>กำลังส่งข้อความ...</span> <i class="fa-solid fa-spinner fa-spin"></i>`; // Simulate API post request delay (1.5 seconds) setTimeout(() => { // Show custom success toast showToast(`สวัสดีครับคุณ ${nameVal}! ข้อความของคุณส่งสำเร็จแล้ว ผมจะติดต่อกลับโดยเร็วที่สุดครับ`); // Reset form contactForm.reset(); // Restore button state submitBtn.disabled = false; submitBtn.innerHTML = originalBtnHTML; }, 1500); }); } /* ==================== DARK / LIGHT THEME TOGGLING ==================== */ const themeToggleBtn = document.getElementById('theme-toggle-btn'); const headerThemeToggle = document.getElementById('header-theme-toggle'); // Helper function to update theme icons function updateThemeIcons(isLight) { const iconClass = isLight ? 'fa-sun' : 'fa-moon'; if (themeToggleBtn) { themeToggleBtn.innerHTML = `<i class="fa-solid ${iconClass}"></i>`; } if (headerThemeToggle) { headerThemeToggle.innerHTML = `<i class="fa-solid ${iconClass}"></i>`; } } // Initial theme check const savedTheme = localStorage.getItem('theme'); const prefersLight = window.matchMedia('(prefers-color-scheme: light)').matches; if (savedTheme === 'light' || (!savedTheme && prefersLight)) { document.body.classList.add('light-mode'); updateThemeIcons(true); } else { document.body.classList.remove('light-mode'); updateThemeIcons(false); } // Theme toggler logic function toggleTheme() { document.body.classList.toggle('light-mode'); const isLight = document.body.classList.contains('light-mode'); localStorage.setItem('theme', isLight ? 'light' : 'dark'); updateThemeIcons(isLight); // Show status toast showToast(isLight ? 'เปิดโหมดสว่าง (Light Mode)' : 'เปิดโหมดมืด (Dark Mode)'); } if (themeToggleBtn) { themeToggleBtn.addEventListener('click', toggleTheme); } if (headerThemeToggle) { headerThemeToggle.addEventListener('click', toggleTheme); }
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.33 |
proxy
|
phpinfo
|
Settings