Join the Discussion
No one has commented yet. Be the first!
<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>
// disable drag events isDragging = false; // update status message with dramatic effect statusDiv.innerHTML = `<span>⚠️ Shutting down... Please wait ⚡</span>`; statusDiv.style.color = "#ffb47b"; statusDiv.style.background = "rgba(0,0,0,0.6)"; // add visual shutdown class to panel panel.classList.add('shutdown-active'); // change thumb icon to power symbol const thumbIconSpan = thumb.querySelector('.thumb-icon'); if(thumbIconSpan) thumbIconSpan.innerHTML = '⏻'; thumb.style.background = "#f0c0a8"; // show shutdown overlay simulation for windows 11 feel const labelElement = document.getElementById('slideLabel'); if(labelElement) labelElement.style.opacity = "0"; // simulate shutdown sequence after short delay setTimeout(() => // final message statusDiv.innerHTML = `<span>✅ System halted · You can close this tab or reset.</span>`; statusDiv.style.color = "#b7f0b1"; // add a nice vibration? Not needed, but show finality // disable reset note text style? but reset still works (reload simulation) // keep reset button functional shutdownInProgress = false; , 800); // optional: extra windows 11 shutdown sound? just visual. // we also dispatch a console note console.log("Windows 11 shutdown sequence complete — slide to power off");
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Windows 11 · Slide to Shutdown</title> <style> * margin: 0; padding: 0; box-sizing: border-box; user-select: none; /* prevent accidental text selection while sliding */
Leave a Reply