|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
const targetId = this.getAttribute('href'); |
|
|
if (targetId === '#') return; |
|
|
|
|
|
const targetElement = document.querySelector(targetId); |
|
|
if (targetElement) { |
|
|
targetElement.scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const darkModeToggle = document.getElementById('darkModeToggle'); |
|
|
if (darkModeToggle) { |
|
|
darkModeToggle.addEventListener('click', () => { |
|
|
document.documentElement.classList.toggle('dark'); |
|
|
localStorage.setItem('darkMode', document.documentElement.classList.contains('dark')); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
if (localStorage.getItem('darkMode') === 'true' || |
|
|
(!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { |
|
|
document.documentElement.classList.add('dark'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const observerOptions = { |
|
|
threshold: 0.1 |
|
|
}; |
|
|
|
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
entry.target.classList.add('animate-fadeIn'); |
|
|
} |
|
|
}); |
|
|
}, observerOptions); |
|
|
|
|
|
document.querySelectorAll('.fade-in').forEach(el => { |
|
|
observer.observe(el); |
|
|
}); |