From cb944e2e3b1055cbe22f42e735142a7d9918642c Mon Sep 17 00:00:00 2001 From: kerogs Date: Mon, 7 Oct 2024 19:22:10 +0200 Subject: [PATCH 1/2] Added a small animation for the clock and the menu bar exit button. - The clock hands will be animated when the time is loaded. - The menu bar exit button has a slightly smoother animation than before. --- style.css | 56 +++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 52 insertions(+), 4 deletions(-) diff --git a/style.css b/style.css index 29d9b60c..b0e10f66 100644 --- a/style.css +++ b/style.css @@ -161,6 +161,7 @@ body { top: -90px; transform-origin: bottom; border-radius: 10px; + transition: transform 1.50s; } #hour { @@ -213,7 +214,7 @@ body { position: absolute; /* background-color: yellow; */ bottom: 18px; - /*Because search engnies has margin-bottom 20px*/ + /*Because search engines has margin-bottom 20px*/ left: 5px; } @@ -566,6 +567,8 @@ body { border: 2px solid #ffffff; outline: none; margin-right: 8px; + cursor: pointer; + transition: .2s; } .search-engine input[type="radio"]:checked { @@ -1249,6 +1252,7 @@ input:checked+.toggle:before { /* ---------------------- */ #menuCloseButton { + position: relative; /* position: absolute; */ bottom: var(--gap); width: 42px; @@ -1272,22 +1276,66 @@ input:checked+.toggle:before { 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 */ + /* 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{ + 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); +} \ No newline at end of file From fb90b252a9e5bc21417139eb26e9764d483acba8 Mon Sep 17 00:00:00 2001 From: kerogs Date: Thu, 10 Oct 2024 19:35:11 +0200 Subject: [PATCH 2/2] Fix issues with second dot rotation and close button styling - Corrected the rotation of the second dot to prevent it from rotating in the opposite direction after completing its cycle. - Added top margin to the close button and adjusted its styling to ensure it is a perfect circle. --- script.js | 41 ++++++++++++++++++++++++++++++++++------- style.css | 7 +++++-- 2 files changed, 39 insertions(+), 9 deletions(-) diff --git a/script.js b/script.js index 38232acd..fe9bbe35 100644 --- a/script.js +++ b/script.js @@ -93,15 +93,40 @@ 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) @@ -123,9 +148,11 @@ setInterval(() => { var dayName = dayNames[dayOfWeek]; document.getElementById("date").innerText = `${dayName.substring(0, 3)}, ${monthName.substring(0, 3)} ${dayOfMonth}` // substring(0, 3) => We are taking only three Char from the name of the month and day like Sunday > Sun + document.getElementById("date").innerText = `${dayName.substring(0, 3)}, ${monthName.substring(0, 3)} ${dayOfMonth}`; }, 1000); + // Showing border or outline in when you click on searchbar const searchbar = document.getElementById('searchbar'); searchbar.addEventListener('click', function () { diff --git a/style.css b/style.css index b0e10f66..7ee6c2c8 100644 --- a/style.css +++ b/style.css @@ -161,7 +161,6 @@ body { top: -90px; transform-origin: bottom; border-radius: 10px; - transition: transform 1.50s; } #hour { @@ -169,6 +168,7 @@ body { top: -70px; background-color: var(--darkerColor-blue); transform: rotate(90deg); + transition: transform 1.50s; } #hour::after { @@ -183,6 +183,7 @@ body { #minute { z-index: 9 !important; + transition: transform 1.50s; } #minute::after { @@ -197,6 +198,7 @@ body { #second { background-color: #00000000; + transition: transform 1s; } #second::after { @@ -1256,6 +1258,7 @@ input:checked+.toggle:before { /* position: absolute; */ bottom: var(--gap); width: 42px; + height: 42px; max-width: 100%; /* Set max-width to fit-content initially */ background-color: var(--bg-color-blue); color: var(--textColorDark-blue); @@ -1269,7 +1272,7 @@ input:checked+.toggle:before { overflow: hidden; /* Hide the overflow when content expands */ transition: all 0.4s; /* Transition the max-width property */ cursor: pointer; - margin-top: 69px; + margin-top: calc(69px + 20px); } #menuCloseButton:hover{