body min-height: 100vh; background: radial-gradient(circle at 20% 30%, #0b1120, #03050b); display: flex; align-items: center; justify-content: center; font-family: 'Segoe UI', 'SF Pro Text', 'Segoe UI Variable', system-ui, -apple-system, 'BlinkMacSystemFont', 'Roboto', sans-serif; padding: 1.5rem;
/* fully shutdown state */ .shutdown-active .slider-thumb, .shutdown-active .slider-track cursor: default; slide to shutdown windows 11
// initial recalculation and safety function init() initEvents(); recalcMaxOffset(); setThumbOffset(0, true); statusDiv.innerHTML = `<span>🔘 Drag the circle to the end ➔</span>`; init(); )(); </script> </body> </html> const trackRectCached = trackContainer
function onPointerMove(e) if (!isDragging) return; if (shutdownTriggered) isDragging = false; return; e.preventDefault(); let clientX = e.clientX; if (e.touches) clientX = e.touches[0].clientX; e.preventDefault(); // get current track boundaries relative to dragZone if (!trackContainer) return; const trackBounds = trackContainer.getBoundingClientRect(); const thumbWidth = thumb.offsetWidth; // compute new left position: pointer position - start offset let newThumbLeft = clientX - startX; // clamp within track container bounds (left bound and right bound) const minLeft = trackBounds.left; const maxLeft = trackBounds.right - thumbWidth; let clampedLeft = Math.min(maxLeft, Math.max(minLeft, newThumbLeft)); // compute translateX = clampedLeft - originalLeft (original thumb position relative to track) // easier: get current transform? we compute relative offset from initial position. // but we want offset relative to left start = 0px. const trackRectCached = trackContainer.getBoundingClientRect(); const offsetFromTrackStart = clampedLeft - trackRectCached.left; let translateValue = Math.min(maxOffset, Math.max(0, offsetFromTrackStart)); // apply to thumb if(thumb) thumb.style.transform = `translateX($translateValuepx)`; currentTranslateX = translateValue; // update fill width based on progress updateFillAndLabel(translateValue); // if fully slid, performShutdown will be called inside setThumbOffset logic ( but we call manually also ) if (!shutdownTriggered && maxOffset > 0 && translateValue >= maxOffset - 0.2) // ensure full engagement if(translateValue >= maxOffset - 0.01) performShutdown(); else // snap to max if close enough? if(translateValue > maxOffset - 1 && translateValue < maxOffset) setThumbOffset(maxOffset, true); let translateValue = Math.min(maxOffset
// reset button handler resetBtn.addEventListener('click', (e) => e.preventDefault(); if(shutdownInProgress && !shutdownTriggered) // weird case but just reset resetShutdownUI(); // also ensure that if we reset after shutdown, slider fully reinitialized recalcMaxOffset(); // force pointer release isDragging = false; );
/* the sliding thumb (draggable element) */ .slider-thumb width: 68px; height: 68px; background: rgba(255, 255, 255, 0.96); border-radius: 100px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255,255,240,0.5); transition: box-shadow 0.1s, transform 0.05s linear; backdrop-filter: blur(2px); color: #1f2a48; font-weight: 600; font-size: 1.6rem; cursor: grab; will-change: transform;
/* text inside the thumb (chevron right) */ .thumb-icon font-size: 2rem; line-height: 1; transform: translateX(2px);
body min-height: 100vh; background: radial-gradient(circle at 20% 30%, #0b1120, #03050b); display: flex; align-items: center; justify-content: center; font-family: 'Segoe UI', 'SF Pro Text', 'Segoe UI Variable', system-ui, -apple-system, 'BlinkMacSystemFont', 'Roboto', sans-serif; padding: 1.5rem;
/* fully shutdown state */ .shutdown-active .slider-thumb, .shutdown-active .slider-track cursor: default;
// initial recalculation and safety function init() initEvents(); recalcMaxOffset(); setThumbOffset(0, true); statusDiv.innerHTML = `<span>🔘 Drag the circle to the end ➔</span>`; init(); )(); </script> </body> </html>
function onPointerMove(e) if (!isDragging) return; if (shutdownTriggered) isDragging = false; return; e.preventDefault(); let clientX = e.clientX; if (e.touches) clientX = e.touches[0].clientX; e.preventDefault(); // get current track boundaries relative to dragZone if (!trackContainer) return; const trackBounds = trackContainer.getBoundingClientRect(); const thumbWidth = thumb.offsetWidth; // compute new left position: pointer position - start offset let newThumbLeft = clientX - startX; // clamp within track container bounds (left bound and right bound) const minLeft = trackBounds.left; const maxLeft = trackBounds.right - thumbWidth; let clampedLeft = Math.min(maxLeft, Math.max(minLeft, newThumbLeft)); // compute translateX = clampedLeft - originalLeft (original thumb position relative to track) // easier: get current transform? we compute relative offset from initial position. // but we want offset relative to left start = 0px. const trackRectCached = trackContainer.getBoundingClientRect(); const offsetFromTrackStart = clampedLeft - trackRectCached.left; let translateValue = Math.min(maxOffset, Math.max(0, offsetFromTrackStart)); // apply to thumb if(thumb) thumb.style.transform = `translateX($translateValuepx)`; currentTranslateX = translateValue; // update fill width based on progress updateFillAndLabel(translateValue); // if fully slid, performShutdown will be called inside setThumbOffset logic ( but we call manually also ) if (!shutdownTriggered && maxOffset > 0 && translateValue >= maxOffset - 0.2) // ensure full engagement if(translateValue >= maxOffset - 0.01) performShutdown(); else // snap to max if close enough? if(translateValue > maxOffset - 1 && translateValue < maxOffset) setThumbOffset(maxOffset, true);
// reset button handler resetBtn.addEventListener('click', (e) => e.preventDefault(); if(shutdownInProgress && !shutdownTriggered) // weird case but just reset resetShutdownUI(); // also ensure that if we reset after shutdown, slider fully reinitialized recalcMaxOffset(); // force pointer release isDragging = false; );
/* the sliding thumb (draggable element) */ .slider-thumb width: 68px; height: 68px; background: rgba(255, 255, 255, 0.96); border-radius: 100px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255,255,240,0.5); transition: box-shadow 0.1s, transform 0.05s linear; backdrop-filter: blur(2px); color: #1f2a48; font-weight: 600; font-size: 1.6rem; cursor: grab; will-change: transform;
/* text inside the thumb (chevron right) */ .thumb-icon font-size: 2rem; line-height: 1; transform: translateX(2px);