Slide To Shutdown Windows 11 Free | EASY |
/* responsive */ @media (max-width: 500px) .shutdown-panel padding: 1.5rem 1.5rem 1.8rem; .slider-thumb width: 58px; height: 58px; .thumb-icon font-size: 1.7rem; .slide-label font-size: 1rem; .title font-size: 1.6rem; </style> </head> <body>
// 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; ); slide to shutdown windows 11
// attach event listeners function initEvents() // pointer + touch events thumb.addEventListener('pointerdown', onPointerDown); window.addEventListener('pointermove', onPointerMove); window.addEventListener('pointerup', onPointerUp); // touch fallback: ensure touchmove prevent default thumb.addEventListener('touchstart', onPointerDown, passive: false); window.addEventListener('touchmove', onPointerMove, passive: false); window.addEventListener('touchend', onPointerUp); window.addEventListener('resize', () => setTimeout(handleResize, 20); ); // also track container may change on font load, use ResizeObserver const resizeObserver = new ResizeObserver(() => handleResize()); if(trackContainer) resizeObserver.observe(trackContainer); handleResize(); /* responsive */ @media (max-width: 500px)
// reset everything (undo shutdown simulation) function resetShutdownUI() if(shutdownTriggered === false && currentTranslateX === 0) // already reset state, maybe just notify statusDiv.innerHTML = `<span>🔘 Drag the circle to the end ➔</span>`; statusDiv.style.color = "#b7c3e6"; statusDiv.style.background = "rgba(0, 0, 0, 0.35)"; return; // cancel any ongoing shutdown state shutdownTriggered = false; shutdownInProgress = false; panel.classList.remove('shutdown-active'); // reset thumb position currentTranslateX = 0; if(thumb) thumb.style.transform = `translateX(0px)`; const thumbIconSpan = thumb.querySelector('.thumb-icon'); if(thumbIconSpan) thumbIconSpan.innerHTML = '⏺'; thumb.style.background = "rgba(255, 255, 255, 0.96)"; if(fillDiv) fillDiv.style.width = '0%'; const labelEl = document.getElementById('slideLabel'); if(labelEl) labelEl.style.opacity = '1'; labelEl.innerHTML = '➡️ Slide to shutdown ⬅️'; // reset status statusDiv.innerHTML = `<span>🔘 Slide fully to trigger shutdown · Reset ready</span>`; statusDiv.style.color = "#cdd9ff"; statusDiv.style.background = "rgba(0, 0, 0, 0.35)"; // recalc max offset in case layout changed recalcMaxOffset(); // re-enable drag after reset (UI ready) // Also ensure any ghost dragging flags cleared isDragging = false; .slider-thumb width: 58px
// 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>
