File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090040/01 Portfolio/script.js

Back
document.addEventListener('DOMContentLoaded', () => { // --- Loading Screen --- const loader = document.getElementById('loader'); if (loader) { window.addEventListener('load', () => { setTimeout(() => { loader.classList.add('opacity-0'); setTimeout(() => { loader.style.display = 'none'; }, 500); }, 800); // Give it a slight delay for realistic loading feel }); // Fallback if window load doesn't trigger quickly setTimeout(() => { loader.classList.add('opacity-0'); setTimeout(() => { loader.style.display = 'none'; }, 500); }, 2500); } // --- Dark / Light Mode --- const themeToggleBtn = document.getElementById('theme-toggle'); const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon'); const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon'); // Set initial theme based on localStorage or user system preference if (localStorage.getItem('color-theme') === 'dark' \|\| (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { document.documentElement.classList.add('dark'); if (themeToggleLightIcon) themeToggleLightIcon.classList.remove('hidden'); if (themeToggleDarkIcon) themeToggleDarkIcon.classList.add('hidden'); } else { document.documentElement.classList.remove('dark'); if (themeToggleLightIcon) themeToggleLightIcon.classList.add('hidden'); if (themeToggleDarkIcon) themeToggleDarkIcon.classList.remove('hidden'); } if (themeToggleBtn) { themeToggleBtn.addEventListener('click', function() { // Toggle icons if (themeToggleDarkIcon && themeToggleLightIcon) { themeToggleDarkIcon.classList.toggle('hidden'); themeToggleLightIcon.classList.toggle('hidden'); } // Toggle dark class if (document.documentElement.classList.contains('dark')) { document.documentElement.classList.remove('dark'); localStorage.setItem('color-theme', 'light'); } else { document.documentElement.classList.add('dark'); localStorage.setItem('color-theme', 'dark'); } }); } // --- Sticky Navbar Active Links --- const sections = document.querySelectorAll('section[id]'); const navLinks = document.querySelectorAll('nav a[href^="#"]'); window.addEventListener('scroll', () => { let scrollY = window.pageYOffset; // Header background glass effect on scroll const header = document.querySelector('header'); if (header) { if (scrollY > 20) { header.classList.add('shadow-lg', 'py-3'); header.classList.remove('py-5'); } else { header.classList.remove('shadow-lg', 'py-3'); header.classList.add('py-5'); } } // Active state highlighting sections.forEach(current => { const sectionHeight = current.offsetHeight; const sectionTop = current.offsetTop - 100; const sectionId = current.getAttribute('id'); if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) { navLinks.forEach(link => { if (link.getAttribute('href') === `#${sectionId}`) { link.classList.add('text-sky-500', 'font-medium'); link.classList.remove('text-slate-600', 'dark:text-slate-300'); } else { link.classList.remove('text-sky-500', 'font-medium'); link.classList.add('text-slate-600', 'dark:text-slate-300'); } }); } }); // Back to Top Button visibility const backToTopBtn = document.getElementById('back-to-top'); if (backToTopBtn) { if (scrollY > 500) { backToTopBtn.classList.remove('translate-y-20', 'opacity-0'); backToTopBtn.classList.add('translate-y-0', 'opacity-100'); } else { backToTopBtn.classList.add('translate-y-20', 'opacity-0'); backToTopBtn.classList.remove('translate-y-0', 'opacity-100'); } } }); // --- Mobile Menu Toggle --- const mobileMenuBtn = document.getElementById('mobile-menu-btn'); const mobileMenu = document.getElementById('mobile-menu'); if (mobileMenuBtn && mobileMenu) { mobileMenuBtn.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); // Simple fade-in transition logic if (!mobileMenu.classList.contains('hidden')) { mobileMenu.classList.add('animate-fadeIn'); } }); // Close menu on link click mobileMenu.querySelectorAll('a').forEach(link => { link.addEventListener('click', () => { mobileMenu.classList.add('hidden'); }); }); } // --- Scroll Reveal Animation using Intersection Observer --- const revealElements = document.querySelectorAll('.reveal, .reveal-left, .reveal-right'); const revealObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('active'); // Optional: stop observing once revealed revealObserver.unobserve(entry.target); } }); }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }); revealElements.forEach(el => revealObserver.observe(el)); // --- Contact Form Handling & Toast Notification --- const contactForm = document.getElementById('contact-form'); const toast = document.getElementById('toast'); const toastMessage = document.getElementById('toast-message'); const showToast = (message, type = 'success') => { if (toast && toastMessage) { toastMessage.textContent = message; // Style depending on type if (type === 'success') { toast.className = 'fixed bottom-5 right-5 z-50 flex items-center w-full max-w-xs p-4 space-x-4 text-slate-800 bg-white rounded-lg shadow-xl dark:text-slate-100 dark:bg-slate-800 border-l-4 border-green-500 transform transition-all duration-300 translate-y-0 opacity-100'; } else { toast.className = 'fixed bottom-5 right-5 z-50 flex items-center w-full max-w-xs p-4 space-x-4 text-slate-800 bg-white rounded-lg shadow-xl dark:text-slate-100 dark:bg-slate-800 border-l-4 border-red-500 transform transition-all duration-300 translate-y-0 opacity-100'; } // Auto close after 3.5s setTimeout(() => { toast.classList.replace('opacity-100', 'opacity-0'); toast.classList.replace('translate-y-0', 'translate-y-5'); }, 3500); } }; if (contactForm) { contactForm.addEventListener('submit', (e) => { e.preventDefault(); const name = document.getElementById('name').value.trim(); const email = document.getElementById('email').value.trim(); const message = document.getElementById('message').value.trim(); if (!name \|\| !email \|\| !message) { showToast('กรุณากรอกข้อมูลให้ครบถ้วนในช่องที่กำหนด', 'error'); return; } // Simple email validation const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(email)) { showToast('รูปแบบอีเมลไม่ถูกต้อง กรุณาตรวจสอบอีกครั้ง', 'error'); return; } // Simulate sending success showToast('ส่งข้อความสำเร็จแล้ว! ขอบคุณที่ติดต่อเรา', 'success'); contactForm.reset(); }); } });

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.31 | proxy | phpinfo | Settings