Spaces:
Running
Running
File size: 2,716 Bytes
c51a38f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
document.addEventListener('DOMContentLoaded', () => {
const themeToggle = document.getElementById('theme-toggle');
if (themeToggle) {
themeToggle.addEventListener('click', () => {
// Get the current theme from the HTML data attribute
const currentTheme = document.documentElement.getAttribute('data-theme');
let newTheme = 'dark'; // Default to dark
// Determine the new theme
if (currentTheme === 'dark') {
newTheme = 'light';
} else {
newTheme = 'dark';
}
// Update the data-theme attribute
document.documentElement.setAttribute('data-theme', newTheme);
// Send a request to Flask to save the theme preference in the session
// This ensures the theme persists even after page reloads
fetch(`/toggle_theme?current_page=${encodeURIComponent(window.location.pathname)}`, {
method: 'GET' // Or 'POST' if you prefer for state changes
})
.then(response => {
// If you want to handle a response from the server, do it here
// For a simple theme toggle, the server response might not be critical
})
.catch(error => {
console.error('Error toggling theme on server:', error);
});
});
}
// Example of another micro-interaction: Animate elements on scroll (simple reveal)
const fadeInElements = document.querySelectorAll('.fade-in');
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target); // Stop observing once visible
}
});
}, {
threshold: 0.1 // Trigger when 10% of the element is visible
});
fadeInElements.forEach(element => {
observer.observe(element);
});
// Add a simple hover effect for social links in the footer (already handled by CSS, but good for JS examples)
const socialLinks = document.querySelectorAll('.social-links a');
socialLinks.forEach(link => {
link.addEventListener('mouseover', () => {
link.style.transform = 'scale(1.2)';
link.style.color = 'var(--primary-color)';
});
link.addEventListener('mouseout', () => {
link.style.transform = 'scale(1)';
link.style.color = 'var(--header-footer-text)'; /* Reset to default footer text color */
});
});
}); |