WIP pause the animation via button

static/css/layout.css

@@ -119,6 +119,31 @@ footer {
 	margin-bottom: var(--med_margin)
 }
 
+.toggleButton {
+	position: fixed;
+	top: 1rem;
+	right: 1rem;
+	z-index: 999; /* Assure que le bouton est au-dessus du contenu */
+}
+
+.toggleable {
+	padding-top: 1rem;
+	color: black;
+	cursor: pointer;
+}
+
+.img_top_toggleable {
+	display: none;
+	position: absolute;
+	top: 1rem;
+	right: 0; /* Position en haut à droite */
+	z-index: 99;
+	background-color: var(--day-background);
+	color: darkgreen;
+	cursor: pointer;
+}
+
+
 /* MENU */
 nav#menu{
 	background-color: var(--day-background);
@@ -130,6 +155,20 @@ nav#menu{
 	right: 1rem;
 }
 
+/*.sr-only {
+	border: 0 !important;
+	clip: rect(1px, 1px, 1px, 1px) !important;
+	-webkit-clip-path: inset(50%) !important;
+	clip-path: inset(50%) !important;
+	height: 1px !important;
+	margin: -1px !important;
+	overflow: hidden !important;
+	padding: 0 !important;
+	position: absolute !important;
+	width: 1px !important;
+	white-space: nowrap !important;
+}*/
+
 .icone > pre{
 	padding-top: 1rem;
 	color: black;
@@ -236,12 +275,16 @@ pre.center > a{
 
 /* THEME SOMBRE */
 @media (prefers-color-scheme: dark) {
-	div#container, nav#menu, body{
+	div#container, nav#menu, body, nav#play{
 		background-color: var(--night-background);
 	}
 	p, pre, ul, li, a, a:hover, h1, h2, footer{
 		color: var(--txt-night);
 	}
+	.img_top_toggleable, .toggleable {
+		color: var(--txt-night);
+		background-color: var(--night-background);
+	}
 	.highlight{
 		color: var(--night-highlight-color);
 		background-color: var(--night-highlight-bg);

static/script-bon.js

@@ -1,44 +1,99 @@
+// State of the animation
+let animationPaused = false;
+// Dictionary to keep track of animation intervals
+let animationIntervals = {};
+
+document.getElementById('toggleAnimation').addEventListener('click', function() {
+  const button = document.getElementById('toggleAnimation');
+
+  if (animationPaused) {
+    button.textContent = 'Pause';
+    animationPaused = false;
+    // Play the animation
+    Object.keys(animationIntervals).forEach(id => {
+      animationIntervals[id] = setInterval(updateAnimation, delays[id], id, frames[id], frames[id].length);
+    });
+  } else {
+    button.textContent = 'Play';
+    animationPaused = true;
+    // Pause the animation
+    Object.keys(animationIntervals).forEach(id => {
+      clearInterval(animationIntervals[id]);
+    });
+  }
+});
+
+// Dictionary to keep track of delay count for each animation
+let delays = {};
+// Dictionary to keep track of frame for each animation
+let frames = {};
 // dictionary to keep track of frame count for each animation
 let frameCounts = {};
 
+
 function animate(id, delay) {
 
   // get the container and frames for the amination
   const container = document.getElementById(id);
-  const frames = container.children;
+  const framesList = container.children;
 
   // set up the frame counter
   frameCounts[id] = 0;
 
   // hide all frames except for the first
-  frames[0].style.display = "flex";
+  framesList[0].style.display = "flex";
-  for (let i = 1; i < frames.length; i++) {
+  for (let i = 1; i < framesList.length; i++) {
-    frames[i].style.display = "none";
+    framesList[i].style.display = "none";
   }
 
-  // start the animation
+  // Stock frames and delay in dictionaries
-  const interval = setInterval(updateAnimation, delay, id, frames, frames.length);
+  frames[id] = framesList;
+  delays[id] = delay;
 
+  // start the animation
+  animationIntervals[id] = setInterval(updateAnimation, delay, id, framesList, framesList.length);
 }
 
-function updateAnimation(id, frames, totalFrames) {
+function updateAnimation(id, framesList, totalFrames) {
 
   // increment the frame counter for the given id
   frameCounts[id] = (frameCounts[id] + 1) % totalFrames;
 
   // show the next frame
-  frames[frameCounts[id]].style.display = "flex";
+  framesList[frameCounts[id]].style.display = "flex";
 
   // hide the previous frame
-  if (frameCounts[id] == 0) {
+  if (frameCounts[id] === 0) {
-    frames[totalFrames - 1].style.display = "none";
+    framesList[totalFrames - 1].style.display = "none";
   } else {
-    frames[frameCounts[id] - 1].style.display = "none";
+    framesList[frameCounts[id] - 1].style.display = "none";
   }
-
 }
 
 animate("illustration-accueil", 500);
 animate("rennes", 1000);
 animate("orsay", 2000);
-animate("parterre", 1500);
+animate("parterre", 1500);
+
+document.addEventListener('DOMContentLoaded', function() {
+  const toggleableElements = document.querySelectorAll('.toggleable, .img_top_toggleable');
+  toggleableElements.forEach(function(element) {
+    element.addEventListener('click', function() {
+      toggleAnimation();
+    });
+  });
+});
+
+function toggleAnimation() {
+  const toggleable = document.querySelector('.toggleable');
+  const imgTopToggleable = document.querySelector('.img_top_toggleable');
+
+  if (toggleable.style.display === 'none') {
+    toggleable.style.display = 'block';
+    imgTopToggleable.style.display = 'none';
+  } else {
+    toggleable.style.display = 'none';
+    imgTopToggleable.style.display = 'block';
+  }
+}
+