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
@ -28,3 +84,7 @@ themeSwitch.addEventListener('change', (e) => {
    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>
--- 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;
+}
+