fix dark mode

7 months ago · 6d2a745161
parent d0651b6356
commit 6d2a745161
4 changed files with 80 additions and 8 deletions
--- a/effect.js
+++ b/effect.js
@ -1,4 +1,60 @@
 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
@ -27,4 +83,8 @@ themeSwitch.addEventListener('change', (e) => {
    const isDark = !e.target.checked; // Light mode when checked
    setTheme(isDark);
    localStorage.setItem('theme', isDark ? 'dark' : 'light'); // Save preference
-});
+});
--- a/index.html
+++ b/index.html
@ -3,7 +3,7 @@
 	<head>
 		<meta charset="UTF-8">
 		<link type="text/css" rel="stylesheet" href="style.css">
-v
+		<script src="effect.js" defer></script>
 		<title>Corentin</title>
 		<nav class="navbar"> 
 			<ul class="navbar-list">
@ -22,18 +22,15 @@ v
 				<input type="checkbox" id="theme-switch">
 				<span class="slider"></span>
 			</label>
 			</ul>
 		  </nav>
 	</head>
 	<body>
 		<header>
 			<h1>Caillot Corentin</h1>
 		</div>
 			<img id="profile" src="img/faced.jpg" alt="profil"title="Corentin" />
 			<audio id="disk-audio" src="music/still_standing.mp3" preload="auto"></audio>
 			<aside>
 					<ul class="example-2">
 					<li class="icon-content">
@ -129,7 +126,6 @@ v
 					</li>
 				</ul>
 			</aside>
 			<div>	
 				<section>
 					<article>
@ -171,4 +167,4 @@ v
 		</header>
 		<footer>
 			<p>Pied de page</p>
-		</footer>
+		</footer>
--- a/music/still_standing.mp3
+++ b/music/still_standing.mp3
--- a/style.css
+++ b/style.css
@ -31,6 +31,22 @@ aside {
  border: 3px solid #fff; /* Dark line around the profile */
 }
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
 }
 /* Initial spin: 2 seconds per rotation */
 #profile:hover {
  animation: spin 2s linear infinite;
  transition: animation-duration 0.2s linear;
  transform-origin: center center;
 }