My Computer
Open Window
About
body { margin: 0; font-family: "MS Sans Serif", Tahoma, sans-serif; background: #111; color: #e0e0e0; overflow: hidden; } body::after { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(255,255,255,0.03), rgba(255,255,255,0.03) 1px, transparent 1px, transparent 2px ); } .desktop { position: absolute; width: 100%; height: 100%; } .icon { width: 70px; text-align: center; margin: 10px; cursor: pointer; } .icon img { width: 32px; } .window { position: absolute; width: 400px; background: #2a2a2a; border: 2px solid #888; box-shadow: inset -2px -2px 0 #000, inset 2px 2px 0 #555; } .title-bar { background: linear-gradient(to right, #000080, #000040); color: white; padding: 4px; cursor: move; display: flex; justify-content: space-between; } .window-body { padding: 10px; } button { background: #c0c0c0; border: 2px solid; border-color: #fff #000 #000 #fff; cursor: pointer; } button:active { border-color: #000 #fff #fff #000; } .taskbar { position: fixed; bottom: 0; width: 100%; background: #2a2a2a; border-top: 2px solid #555; display: flex; align-items: center; padding: 5px; } #clock { margin-left: auto; background: #c0c0c0; color: black; border: 2px solid; border-color: #000 #fff #fff #000; padding: 2px 8px; font-size: 12px; } .start-menu { position: absolute; bottom: 35px; left: 5px; width: 200px; background: #c0c0c0; border: 2px solid; border-color: #fff #000 #000 #fff; display: none; } .start-menu div { padding: 5px; cursor: pointer; } .start-menu div:hover { background: #000080; color: white; } let win = document.getElementById('win'); let startMenu = document.getElementById('startMenu'); function openWindow() { win.style.display = 'block'; } function closeWindow() { win.style.display = 'none'; } function toggleStart() { startMenu.style.display = startMenu.style.display === 'block' ? 'none' : 'block'; } function playSound() { document.getElementById('clickSound').play(); } // Dragging let offsetX = 0, offsetY = 0, dragging = false; function dragStart(e) { dragging = true; offsetX = e.clientX - win.offsetLeft; offsetY = e.clientY - win.offsetTop; document.onmousemove = drag; document.onmouseup = stopDrag; } function drag(e) { if (dragging) { win.style.left = (e.clientX - offsetX) + 'px'; win.style.top = (e.clientY - offsetY) + 'px'; } } function stopDrag() { dragging = false; document.onmousemove = null; } // Clock function updateClock() { const now = new Date(); let h = now.getHours(); let m = now.getMinutes(); m = m < 10 ? '0' + m : m; document.getElementById('clock').innerText = h + ':' + m; } setInterval(updateClock, 1000); updateClock();