<div class="slider-container"> <div class="slider-track" id="sliderTrack"> <div class="drag-zone" id="dragZone"> <div class="slider-fill" id="sliderFill"></div> <div class="slide-label" id="slideLabel">➡️ Slide to shutdown ⬅️</div> <div class="slider-thumb" id="sliderThumb"> <span class="thumb-icon">⏺</span> </div> </div> </div> </div>
/* drag area relative container */ .drag-zone position: relative; width: 100%; height: 68px; slide to shutdown windows 11
// windows shutdown simulation flag let shutdownInProgress = false; div class="slider-track" id="sliderTrack">
<div class="shutdown-panel" id="shutdownPanel"> <div class="power-header"> <div class="power-icon"> <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 3v9M8.5 7.5A6 6 0 1 0 15.5 7.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/> <path d="M18 14.5c1.5 1 2.5 2.5 2.5 4.5 0 2.5-2 4.5-4.5 4.5h-8C5 23.5 3 21.5 3 19c0-2 1-3.5 2.5-4.5" stroke="currentColor" stroke-linecap="round"/> </svg> </div> <div class="title">Shutdown</div> <div class="sub">Slide to power off · Windows 11 inspired</div> </div> div class="drag-zone" id="dragZone">