File manager - Edit - /home/webapp69.cm.in.th/u69319090053/portfolio/script.js
Back
// Portfolio Interactive Scripts document.addEventListener('DOMContentLoaded', () => { // ---------------------------------------------------- // 1. Dark / Light Theme Manager // ---------------------------------------------------- const themeToggleBtn = document.getElementById('theme-toggle'); const themeToggleBtnMobile = document.getElementById('theme-toggle-mobile'); const themeToggleIcon = document.getElementById('theme-toggle-icon'); const themeToggleIconMobile = document.getElementById('theme-toggle-icon-mobile'); // Check system preference or localStorage const savedTheme = localStorage.getItem('theme'); const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) { document.documentElement.classList.add('dark'); updateThemeIcons(true); } else { document.documentElement.classList.remove('dark'); updateThemeIcons(false); } function toggleTheme() { const isDark = document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', isDark ? 'dark' : 'light'); updateThemeIcons(isDark); } function updateThemeIcons(isDark) { if (isDark) { themeToggleIcon.className = 'fas fa-sun text-yellow-400'; themeToggleIconMobile.className = 'fas fa-sun text-yellow-400'; } else { themeToggleIcon.className = 'fas fa-moon text-slate-700'; themeToggleIconMobile.className = 'fas fa-moon text-slate-700'; } } themeToggleBtn.addEventListener('click', toggleTheme); themeToggleBtnMobile.addEventListener('click', toggleTheme); // ---------------------------------------------------- // 2. Mobile Menu Toggle // ---------------------------------------------------- const menuBtn = document.getElementById('menu-btn'); const mobileMenu = document.getElementById('mobile-menu'); const mobileNavLinks = document.querySelectorAll('.mobile-nav-link'); menuBtn.addEventListener('click', () => { const isHidden = mobileMenu.classList.toggle('hidden'); const icon = menuBtn.querySelector('i'); if (isHidden) { icon.className = 'fas fa-bars text-xl'; } else { icon.className = 'fas fa-times text-xl'; } }); mobileNavLinks.forEach(link => { link.addEventListener('click', () => { mobileMenu.classList.add('hidden'); menuBtn.querySelector('i').className = 'fas fa-bars text-xl'; }); }); // ---------------------------------------------------- // 3. Sticky Navbar & Active Section Highlights // ---------------------------------------------------- const navbar = document.getElementById('navbar'); const sections = document.querySelectorAll('section'); const navLinks = document.querySelectorAll('.nav-link'); window.addEventListener('scroll', () => { // Sticky transition if (window.scrollY > 50) { navbar.classList.add('scrolled'); } else { navbar.classList.remove('scrolled'); } // Active link tracking let currentSection = 'home'; sections.forEach(section => { const sectionTop = section.offsetTop - 120; if (window.scrollY >= sectionTop) { currentSection = section.getAttribute('id'); } }); navLinks.forEach(link => { link.classList.remove('active'); if (link.getAttribute('href') === `#${currentSection}`) { link.classList.add('active'); } }); }); // ---------------------------------------------------- // 4. Dynamic Project Category Filtering // ---------------------------------------------------- const filterButtons = document.querySelectorAll('.filter-btn'); const projectCards = document.querySelectorAll('.project-card'); filterButtons.forEach(button => { button.addEventListener('click', () => { // Remove active class from all buttons filterButtons.forEach(btn => btn.classList.remove('active')); // Add active class to current button button.classList.add('active'); const filterValue = button.getAttribute('data-filter'); projectCards.forEach(card => { const category = card.getAttribute('data-category'); // Reset card styles first card.style.opacity = '0'; card.style.transform = 'scale(0.95)'; setTimeout(() => { if (filterValue === 'all' || category === filterValue) { card.style.display = 'flex'; setTimeout(() => { card.style.opacity = '1'; card.style.transform = 'scale(1)'; }, 50); } else { card.style.display = 'none'; } }, 200); }); }); }); // ---------------------------------------------------- // 5. Contact Form Handling (Mailto integration) // ---------------------------------------------------- const contactForm = document.getElementById('contact-form'); contactForm.addEventListener('submit', (e) => { e.preventDefault(); const name = document.getElementById('name').value; const email = document.getElementById('email').value; const subject = document.getElementById('subject').value; const message = document.getElementById('message').value; // Construct email body const emailBody = `สวัสดีครับ ผม ${name} (${email})\n\nรายละเอียดข้อความ:\n${message}`; const mailtoUrl = `mailto:Auckkharadej.p@gmail.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(emailBody)}`; // Open user's email client window.location.href = mailtoUrl; // Visual feedback / temporary status change const submitBtn = contactForm.querySelector('button[type="submit"]'); const originalText = submitBtn.innerHTML; submitBtn.innerHTML = `<span>เปิดแอปพลิเคชันอีเมลแล้ว!</span> <i class="fas fa-check"></i>`; submitBtn.classList.remove('bg-brand-600', 'hover:bg-brand-700'); submitBtn.classList.add('bg-emerald-600'); setTimeout(() => { submitBtn.innerHTML = originalText; submitBtn.classList.remove('bg-emerald-600'); submitBtn.classList.add('bg-brand-600', 'hover:bg-brand-700'); contactForm.reset(); }, 5000); }); });
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.32 |
proxy
|
phpinfo
|
Settings