site_web/effect.js

const disk = document.getElementById('profile');
const audio = document.getElementById('disk-audio');

let hovering = false;
let startTime = 0;
let speedInterval = null;

// On page load, try to prime the audio.
window.addEventListener('load', () => {
  // Start playing the audio muted to force loading and decoding.
  audio.muted = true;
  audio.play().then(() => {
    // Immediately pause so it doesn't actually play muted.
    audio.pause();
    audio.muted = false;
    audio.currentTime = 0; // Reset to start if desired.
    console.log("Audio primed and ready.");
  }).catch(err => {
    // If this fails (due to browser policies), we'll still try on hover.
    console.log("Could not prime audio:", err);
  });
});

disk.addEventListener('mouseenter', () => {
  hovering = true;
  startTime = Date.now();

  // Play the audio if not already playing
  if (audio.paused) {
    audio.currentTime = 0; // Start from beginning if desired
    audio.play().catch(err => {
      console.log('Playback blocked:', err);
    });
  }

  speedInterval = setInterval(() => {
    if (!hovering) return;
    const elapsedSeconds = (Date.now() - startTime) / 1000;
    const newDuration = Math.max(0.2, 2 - 0.2 * elapsedSeconds);
    disk.style.animationDuration = newDuration + 's';
  }, 100);
});

disk.addEventListener('mouseleave', () => {
  hovering = false;
  clearInterval(speedInterval);
  disk.style.animationDuration = '2s';

  // Pause the audio when the mouse leaves
  audio.pause();
});




// Get the theme switch checkbox

const themeSwitch = document.getElementById('theme-switch');

// Function to set the theme
const setTheme = (isDark) => {
    if (isDark) {
        document.body.classList.add('dark-mode');
        document.body.classList.remove('light-mode');
    } else {
        document.body.classList.add('light-mode');
        document.body.classList.remove('dark-mode');
    }
};

// Retrieve the saved theme from localStorage
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
    const isDark = savedTheme === 'dark';
    themeSwitch.checked = !isDark; // Set the switch position
    setTheme(isDark);
} else {
    setTheme(true); // Default to dark mode
}

// Listen for changes on the switch
themeSwitch.addEventListener('change', (e) => {
    const isDark = !e.target.checked; // Light mode when checked
    setTheme(isDark);
    localStorage.setItem('theme', isDark ? 'dark' : 'light'); // Save preference
});