Added a small animation for the clock and the menu bar exit button.

script.js

@@ -139,16 +139,41 @@ window.addEventListener('DOMContentLoaded', async () => {
 
 // ---------------------------end of weather stuff--------------------
 
+
+// Retrieve current time and calculate initial angles
+var currentTime = new Date();
+var initialSeconds = currentTime.getSeconds();
+var initialMinutes = currentTime.getMinutes();
+var initialHours = currentTime.getHours();
+
+// Initialize cumulative rotations
+let cumulativeSecondRotation = initialSeconds * 6; // 6° par seconde
+let cumulativeMinuteRotation = initialMinutes * 6 + (initialSeconds / 10); // 6° par minute + ajustement pour les secondes
+let cumulativeHourRotation = (30 * initialHours + initialMinutes / 2); // 30° par heure + ajustement pour les minutes
+
+// Apply initial rotations (no need to wait 1s now)
+document.getElementById("second").style.transform = `rotate(${cumulativeSecondRotation}deg)`;
+document.getElementById("minute").style.transform = `rotate(${cumulativeMinuteRotation}deg)`;
+document.getElementById("hour").style.transform = `rotate(${cumulativeHourRotation}deg)`;
+
 setInterval(() => {
     var currentTime = new Date();
-    let hours = currentTime.getHours();
-    var minutes = currentTime.getMinutes();
-    var seconds = currentTime.getSeconds();
-    let hour_rotate_angle = 30 * hours + minutes / 2;
 
-    document.getElementById("second").style.transform = `rotate(${seconds * 6}deg)`;
-    document.getElementById("minute").style.transform = `rotate(${minutes * 6}deg)`;
-    document.getElementById("hour").style.transform = `rotate(${hour_rotate_angle}deg)`;
+    // Adjust cumulative rotations (to prevent the needle from going the opposite way when it returns to 0)  
+    cumulativeSecondRotation += 6; // Increment the rotation by 6° for each second. This is because a clock completes a full 360° rotation in 60 seconds. Therefore, each second corresponds to a 6° movement (360° / 60 seconds = 6° per second).
+    cumulativeMinuteRotation = initialMinutes * 6 + (initialSeconds / 60) * 6;
+    cumulativeHourRotation += (1 / 120); // Add 1/120° for each second (30° / 3600s)
+    // Apply new rotations
+    document.getElementById("second").style.transition = "transform 1s ease"; // Transition fluide
+    document.getElementById("second").style.transform = `rotate(${cumulativeSecondRotation}deg)`;
+
+    document.getElementById("minute").style.transition = "transform 1s ease"; // Transition fluide
+    document.getElementById("minute").style.transform = `rotate(${cumulativeMinuteRotation}deg)`;
+
+    document.getElementById("hour").style.transition = "transform 1s ease"; // Transition fluide
+    document.getElementById("hour").style.transform = `rotate(${cumulativeHourRotation}deg)`;
+
+    // done : 5:08* 14 August 2023pHar
 
     // Get the day of the week (0 = Sunday, 1 = Monday, ..., 6 = Saturday)
     var dayOfWeek = currentTime.getDay();
@@ -173,8 +198,11 @@ setInterval(() => {
         document.getElementById("date").innerText = `${dayName.substring(0, 3)}, ${monthName.substring(0, 3)} ${dayOfMonth} `;
     }
 
+    document.getElementById("date").innerText = `${dayName.substring(0, 3)}, ${monthName.substring(0, 3)} ${dayOfMonth}`;
 }, 1000);
 
+
+
 setInterval((updated)=>{
  const userTextDiv = document.getElementById("userText");
  const storedValue = localStorage.getItem("userText");

style.css

@@ -231,6 +231,7 @@ body {
     top: -70px;
     background-color: var(--darkerColor-blue);
     transform: rotate(90deg);
+    transition: transform 1.50s;
 }
 
 #hour::after {
@@ -245,6 +246,7 @@ body {
 
 #minute {
     z-index: 9 !important;
+    transition: transform 1.50s;
 }
 
 #minute::after {
@@ -259,6 +261,7 @@ body {
 
 #second {
     background-color: #00000000;
+    transition: transform 1s;
 }
 
 #second::after {
@@ -624,6 +627,8 @@ body {
     border: 2px solid #ffffff;
     outline: none;
     margin-right: 8px;
+    cursor: pointer;
+    transition: .2s;
 }
 
 .search-engine input[type="radio"]:checked {
@@ -1621,11 +1626,12 @@ input:checked + .toggle:before {
 
 /* ---------------------- */
 #menuCloseButton {
-    /* position: absolute; */
+    position: relative;
+     /* position: absolute; */
     bottom: var(--gap);
     width: 42px;
-    max-width: 100%;
-    /* Set max-width to fit-content initially */
+    height: 42px; 
+    max-width: 100%; /* Set max-width to fit-content initially */
     background-color: var(--bg-color-blue);
     color: var(--textColorDark-blue);
     font-size: 1rem;
@@ -1640,30 +1646,72 @@ input:checked + .toggle:before {
     transition: all 0.4s;
     /* Transition the max-width property */
     cursor: pointer;
-    margin-top: 69px;
+    margin-top: calc(69px + 20px);
 }
 
 #menuCloseButton:hover {
     width: 105px;
     background-color: #fff;
 }
 
+#menuCloseButton::after {
+    content: "Close";
+    padding-right: 12px;
+    opacity: 0;
+    transform: translateX(-20px);
+    animation: .6s menuCloseButtonHoverReverse forwards;
+    z-index: 1;
+}
+
 #menuCloseButton:hover::after {
     content: "Close";
     padding-right: 12px;
+    padding-left: 36px;
     /* width: 32px; */
     /* Expand the max-width on hover */
+    animation: .6s menuCloseButtonHover forwards;
+    animation-delay: .1s;
+}
+
+@keyframes menuCloseButtonHover {
+    0%{
+        opacity: 0;
+        transform: translateX(-20px);
+    }
+    100%{
+        opacity: 1;
+        transform: translate(0);
+    }
 }
 
+@keyframes menuCloseButtonHoverReverse {
+    0% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+    100% {
+        opacity: 0;
+        transform: translateX(-10px);
+    }
+}
 
-#menuCloseButton .icon {
+#menuCloseButton .icon{
+    position: absolute;
+    left: 6px;
     background-color: #fff;
     width: 30px;
     height: 30px;
     border-radius: 100px;
+    /* transform: translateX(30px); */
+    transition: .4s;
+    z-index: 2;
 }
 
-#menuCloseButton .icon:hover {
+/* #menuCloseButton .icon:hover{
     transition: all 0.2s;
     transform: rotate(90deg);
-}
+} */
+
+#menuCloseButton:hover .icon{
+    transform: translateX(0) rotate(90deg);
+}