Windows XP Desktop

Start

Please wait while your computer turns off...

Microsoft Windows XP

Settings

X

Show seconds in clock

Browser

X

body { margin: 0; overflow: hidden; transition: background-color 1s ease; } body.blackout { background-color: black; } /* Login Screen Styles */ .login-screen { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000080; /* Windows XP blue background */ color: white; display: none; /* Hidden by default */ justify-content: center; align-items: center; z-index: 200; /* Above all other elements */ } .login-screen.active { display: flex; /* Show login screen when active */ } .login-box { background-color: #F0F0F0; color: black; padding: 20px; border: 2px solid #808080; border-top: 2px solid white; border-left: 2px solid white; box-shadow: 5px 5px 15px rgba(0,0,0,0.5); text-align: center; } .login-header { background-color: #000080; color: white; padding: 10px; margin-bottom: 20px; font-weight: bold; } .login-form { display: flex; flex-direction: column; gap: 15px; padding: 0 10px; } .login-field { display: flex; flex-direction: column; align-items: flex-start; } .login-field label { margin-bottom: 5px; font-weight: bold; } .login-field input { padding: 8px; border: 1px solid #808080; border-top: 2px solid white; border-left: 2px solid white; border-right: 2px solid #808080; border-bottom: 2px solid #808080; } #login-button { padding: 10px 15px; border: 2px outset white; cursor: pointer; font-weight: bold; background-color: #C0C0C0; border-top: 2px solid white; border-left: 2px solid white; border-right: 2px solid #808080; border-bottom: 2px solid #808080; } #login-button:active { border: 2px inset white; } .desktop { background-image: url('https://upload.wikimedia.org/wikipedia/en/7/77/Windows_XP_Default_desktop_background.png'); background-size: cover; background-position: center; height: 100vh; width: 100vw; position: fixed; top: 0; left: 0; font-family: Tahoma, sans-serif; color: white; transition: opacity 1s ease; /* Opacity transition for desktop */ display: none; /* Hidden by default */ } .desktop.active { display: block; /* Show desktop when active */ } .desktop.hidden { opacity: 0; } .desktop-icons { position: absolute; top: 20px; left: 20px; display: flex; flex-direction: column; gap: 20px; transition: opacity 1s ease; /* Opacity transition for desktop icons */ } .desktop-icons.hidden { opacity: 0; } .desktop-icon { display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; } .desktop-icon img { height: 48px; margin-bottom: 5px; } .taskbar { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #C0C0C0; height: 30px; border-top: 2px solid white; border-left: 2px solid white; border-right: 2px solid #808080; border-bottom: 2px solid #808080; display: flex; align-items: center; padding-left: 5px; z-index: 100; /* Ensure taskbar is above start menu */ transition: opacity 1s ease; /* Opacity transition for taskbar */ justify-content: space-between; /* Space out items */ padding-right: 5px; /* Add some padding on the right */ } .taskbar.hidden { opacity: 0; } .start-button { background-color: #C0C0C0; color: black; border: 2px outset white; padding: 5px 15px; font-weight: bold; cursor: pointer; border-top: 2px solid white; border-left: 2px solid white; border-right: 2px solid #808080; border-bottom: 2px solid #808080; transition: opacity 1s ease; /* Opacity transition for start button */ } .start-button.hidden { opacity: 0; } .start-button:active { border: 2px inset white; } .start-menu { position: fixed; bottom: 30px; /* Height of the taskbar */ left: 0; background-color: #C0C0C0; border: 2px solid #808080; border-top: 2px solid white; border-left: 2px solid white; width: 200px; display: none; /* Hidden by default */ z-index: 101; /* Above taskbar and other elements */ font-size: 12px; } .start-menu.active { display: block; /* Show when active class is added */ } .start-menu-header { background-color: #000080; color: white; padding: 10px; display: flex; align-items: center; } .start-menu-logo { height: 20px; margin-right: 5px; } .start-menu-items { padding: 5px; } .start-menu-item { padding: 5px 10px; cursor: pointer; display: flex; align-items: center; } .start-menu-item:hover { background-color: #000080; color: white; } .start-menu-icon { height: 16px; width: 16px; margin-right: 5px; } .start-menu-separator { border-top: 1px solid #808080; margin: 5px 0; } .start-menu-item.shutdown { color: white; background-color: #000080; margin-top: 5px; padding: 10px; text-align: center; } .start-menu-item.shutdown:hover { background-color: #0000A0; /* Slightly darker blue on hover */ } .shutdown-menu { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #C0C0C0; border: 2px solid #000080; /* Dark blue border */ border-top: 2px solid white; border-left: 2px solid white; display: none; z-index: 102; /* Above start menu */ width: 400px; padding: 20px; font-size: 14px; text-align: center; box-shadow: 5px 5px 15px rgba(0,0,0,0.3); } .shutdown-menu.active { display: block; } .shutdown-menu-content { display: flex; align-items: center; justify-content: center; flex-direction: column; } .shutdown-icon { height: 64px; margin-bottom: 10px; } .shutdown-text { margin-bottom: 20px; } .shutdown-title { font-weight: bold; font-size: 1.2em; margin-bottom: 5px; } .shutdown-message { color: #000080; } .shutdown-buttons { display: flex; gap: 10px; justify-content: center; } .shutdown-button, .cancel-shutdown { background-color: #C0C0C0; border: 2px outset white; padding: 8px 15px; cursor: pointer; border-top: 2px solid white; border-left: 2px solid white; border-right: 2px solid #808080; border-bottom: 2px solid #808080; color: black; } .shutdown-button:hover, .cancel-shutdown:hover { background-color: #E0E0E0; } .shutdown-button:active, .cancel-shutdown:active { border: 2px inset white; } .turning-off-screen { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000080; /* Windows XP shutdown screen blue */ color: white; display: none; /* Hidden by default */ z-index: 103; /* Above all other elements */ align-items: center; justify-content: center; flex-direction: column; } .turning-off-screen.active { display: flex; /* Show when active */ } .turning-off-text { display: flex; align-items: center; flex-direction: column; } .turning-off-icon { height: 80px; margin-bottom: 20px; } .turning-off-text p { font-size: 1.5em; } .restarting-screen { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000080; /* Windows XP blue screen */ color: white; display: none; /* Hidden by default */ z-index: 104; /* Above turning off screen */ align-items: center; justify-content: center; flex-direction: column; } .restarting-screen.active { display: flex; /* Show when active */ } .restarting-text { display: flex; align-items: center; flex-direction: column; } .restarting-logo { height: 80px; margin-bottom: 20px; } .restarting-text p { font-size: 2em; font-weight: bold; } .taskbar-time { color: black; font-weight: bold; } /* Settings Window Styles */ .settings-window { position: absolute; /* Changed to absolute for dragging */ top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #C0C0C0; border: 2px solid #808080; border-top: 2px solid white; border-left: 2px solid white; width: 400px; min-height: 200px; display: none; /* Hidden by default */ z-index: 105; /* Above all menus */ box-shadow: 5px 5px 15px rgba(0,0,0,0.3); font-size: 14px; } .settings-window.active { display: block; /* Show when active */ } .window-header { background-color: #000080; color: white; padding: 5px 10px; display: flex; justify-content: space-between; align-items: center; cursor: grab; /* Draggable cursor */ } .window-content { padding: 10px; overflow: auto; /* For scrollable content if needed */ background-color: #F0F0F0; /* Light grey content background */ color: black; } .setting-item { margin-bottom: 10px; } .setting-item label { display: flex; align-items: center; } .setting-item input[type="checkbox"] { margin-right: 5px; } .window-close-button { background-color: #C0C0C0; border: 2px outset white; padding: 0px 5px; cursor: pointer; font-weight: bold; border-top: 2px solid white; border-left: 2px solid white; border-right: 2px solid #808080; border-bottom: 2px solid #808080; color: black; } .window-close-button:hover { background-color: #E0E0E0; } .window-close-button:active { border: 2px inset white; } /* Browser Window Styles - Shorter and Movable */ .browser-window { position: absolute; /* Changed to absolute for dragging */ top: 10%; /* Distance from top */ left: 10%; /* Distance from left */ width: 80%; /* Width of the browser window */ height: 75%; /* Height to leave space for taskbar */ transform: none; /* Remove transform */ background-color: #C0C0C0; border: 2px solid #808080; border-top: 2px solid white; border-left: 2px solid white; display: none; z-index: 106; /* Above other windows */ box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); } .browser-window.active { display: block; } .browser-window .window-content { background-color: white; height: calc(100% - 28px); /* Adjusted to leave space for header */ width: 100%; } .browser-window iframe { border: none; width: 100%; height: 100%; } const startButton = document.querySelector('.start-button'); const startMenu = document.querySelector('.start-menu'); const shutdownButtonStartMenu = document.querySelector('.start-menu-item.shutdown-button'); const shutdownMenu = document.querySelector('.shutdown-menu'); const cancelShutdownButton = document.querySelector('.cancel-shutdown'); const turnOffButton = document.querySelector('.shutdown-button.turn-off-button'); const restartButton = document.querySelector('.shutdown-button.restart-button'); const standbyButton = document.querySelector('.shutdown-button.standby-button'); const turningOffScreen = document.querySelector('.turning-off-screen'); const restartingScreen = document.querySelector('.restarting-screen'); const taskbar = document.querySelector('.taskbar'); const startBtn = document.querySelector('.start-button'); const taskbarTime = document.querySelector('.taskbar-time'); const settingsMenuItem = document.querySelector('.start-menu-item.settings-menu'); const settingsWindow = document.querySelector('.settings-window'); const settingsHeader = document.querySelector('.window-header'); // Header for dragging const settingsCloseButton = document.querySelector('.window-close-button'); const showSecondsCheckbox = document.getElementById('showSecondsCheckbox'); const browserMenuItem = document.querySelector('.start-menu-item.browser-menu'); const browserWindow = document.querySelector('.browser-window'); const browserWindowHeader = browserWindow.querySelector('.window-header'); // Browser header for dragging const browserWindowCloseButton = browserWindow.querySelector('.window-close-button'); const desktop = document.querySelector('.desktop'); const desktopIcons = document.querySelector('.desktop-icons'); const loginScreen = document.querySelector('.login-screen'); const loginButton = document.getElementById('login-button'); let isDraggingSettings = false; let isDraggingBrowser = false; let offsetX, offsetY; settingsHeader.addEventListener('mousedown', (e) => { isDraggingSettings = true; offsetX = e.clientX - settingsWindow.offsetLeft; offsetY = e.clientY - settingsWindow.offsetTop; settingsWindow.style.cursor = 'grabbing'; // Change cursor during drag }); browserWindowHeader.addEventListener('mousedown', (e) => { isDraggingBrowser = true; offsetX = e.clientX - browserWindow.offsetLeft; offsetY = e.clientY - browserWindow.offsetTop; browserWindow.style.cursor = 'grabbing'; // Change cursor during drag }); document.addEventListener('mousemove', (e) => { if (isDraggingSettings) { settingsWindow.style.left = e.clientX - offsetX + 'px'; settingsWindow.style.top = e.clientY - offsetY + 'px'; } if (isDraggingBrowser) { browserWindow.style.left = e.clientX - offsetX + 'px'; browserWindow.style.top = e.clientY - offsetY + 'px'; } }); document.addEventListener('mouseup', () => { isDraggingSettings = false; isDraggingBrowser = false; settingsWindow.style.cursor = 'grab'; // Reset cursor after drag browserWindow.style.cursor = 'grab'; // Reset cursor after drag }); function updateTime() { const now = new Date(); let hours = now.getHours(); const minutes = String(now.getMinutes()).padStart(2, '0'); const seconds = String(now.getSeconds()).padStart(2, '0'); const ampm = hours >= 12 ? 'PM' : 'AM'; hours = hours % 12 || 12; // Convert to 12-hour format let timeString = `${hours}:${minutes} ${ampm}`; if (showSecondsCheckbox.checked) { timeString = `${hours}:${minutes}:${seconds} ${ampm}`; } taskbarTime.textContent = timeString; } // Load setting from localStorage const showSecondsSetting = localStorage.getItem('showSeconds'); if (showSecondsSetting === 'true') { showSecondsCheckbox.checked = true; } updateTime(); setInterval(updateTime, 1000); // Update time every second startButton.addEventListener('click', () => { startMenu.classList.toggle('active'); shutdownMenu.classList.remove('active'); turningOffScreen.classList.remove('active'); restartingScreen.classList.remove('active'); settingsWindow.classList.remove('active'); // Close settings window when start menu opens browserWindow.classList.remove('active'); // Close browser window }); shutdownButtonStartMenu.addEventListener('click', () => { startMenu.classList.remove('active'); shutdownMenu.classList.add('active'); turningOffScreen.classList.remove('active'); restartingScreen.classList.remove('active'); settingsWindow.classList.remove('active'); // Close settings window when shutdown menu opens browserWindow.classList.remove('active'); // Close browser window }); cancelShutdownButton.addEventListener('click', () => { shutdownMenu.classList.remove('active'); turningOffScreen.classList.remove('active'); restartingScreen.classList.remove('active'); }); turnOffButton.addEventListener('click', () => { shutdownMenu.classList.remove('active'); startMenu.classList.remove('active'); turningOffScreen.classList.add('active'); taskbar.classList.add('hidden'); startBtn.classList.add('hidden'); restartingScreen.classList.remove('active'); settingsWindow.classList.remove('active'); // Ensure settings window is closed browserWindow.classList.remove('active'); // Close browser window desktop.classList.add('hidden'); // Hide desktop background desktopIcons.classList.add('hidden'); // Hide desktop icons setTimeout(() => { document.body.classList.add('blackout'); turningOffScreen.classList.remove('active'); }, 2000); }); restartButton.addEventListener('click', () => { shutdownMenu.classList.remove('active'); startMenu.classList.remove('active'); restartingScreen.classList.add('active'); taskbar.classList.add('hidden'); startBtn.classList.add('hidden'); turningOffScreen.classList.remove('active'); settingsWindow.classList.remove('active'); // Ensure settings window is closed browserWindow.classList.remove('active'); // Close browser window desktop.classList.add('hidden'); // Hide desktop background desktopIcons.classList.add('hidden'); // Hide desktop icons setTimeout(() => { document.body.classList.add('blackout'); restartingScreen.classList.remove('active'); setTimeout(() => { document.body.classList.remove('blackout'); taskbar.classList.remove('hidden'); startBtn.classList.remove('hidden'); desktop.classList.remove('hidden'); // Show desktop background back desktopIcons.classList.remove('hidden'); // Show desktop icons back window.location.reload(); }, 1000); }, 2000); }); standbyButton.addEventListener('click', () => { shutdownMenu.classList.remove('active'); startMenu.classList.remove('active'); document.body.classList.add('blackout'); taskbar.classList.add('hidden'); startBtn.classList.add('hidden'); turningOffScreen.classList.remove('active'); restartingScreen.classList.remove('active'); settingsWindow.classList.remove('active'); // Ensure settings window is closed browserWindow.classList.remove('active'); // Close browser window desktop.classList.add('hidden'); // Hide desktop background desktopIcons.classList.add('hidden'); // Hide desktop icons }); settingsMenuItem.addEventListener('click', () => { startMenu.classList.remove('active'); // Close start menu settingsWindow.classList.toggle('active'); // Open/close settings window browserWindow.classList.remove('active'); // Ensure settings window is closed }); settingsCloseButton.addEventListener('click', () => { settingsWindow.classList.remove('active'); // Close settings window by close button }); showSecondsCheckbox.addEventListener('change', function() { localStorage.setItem('showSeconds', this.checked); // Save setting to localStorage }); browserMenuItem.addEventListener('click', () => { startMenu.classList.remove('active'); // Close start menu after opening browser browserWindow.classList.toggle('active'); // Open/close browser window settingsWindow.classList.remove('active'); // Ensure settings window is closed }); browserWindowCloseButton.addEventListener('click', () => { browserWindow.classList.remove('active'); // Close browser window by its close button }); loginButton.addEventListener('click', () => { const usernameInput = document.getElementById('username'); const passwordInput = document.getElementById('password'); const username = usernameInput.value; const password = passwordInput.value; // Basic hardcoded login check, username and password are "1234" if (username === '1234' && password === '1234') { loginScreen.classList.remove('active'); // Hide login screen desktop.classList.add('active'); // Show desktop taskbar.classList.remove('hidden'); // Show taskbar startBtn.classList.remove('hidden'); // Show start button desktopIcons.classList.remove('hidden'); // Show desktop icons } else { alert('Login failed. Please check your username and password.'); } }); document.addEventListener('click', (event) => { if (!startButton.contains(event.target) && !startMenu.contains(event.target) && !shutdownButtonStartMenu.contains(event.target) && !shutdownMenu.contains(event.target) && !turnOffButton.contains(event.target) && !restartButton.contains(event.target) && !standbyButton.contains(event.target) && !settingsMenuItem.contains(event.target) && !settingsWindow.contains(event.target) && !browserMenuItem.contains(event.target) && !browserWindow.contains(event.target) && !document.querySelector('#trash-icon').contains(event.target) && !loginScreen.contains(event.target) && !loginButton.contains(event.target)) { startMenu.classList.remove('active'); shutdownMenu.classList.remove('active'); turningOffScreen.classList.remove('active'); restartingScreen.classList.remove('active'); settingsWindow.classList.remove('active'); // Close settings window on outside click browserWindow.classList.remove('active'); // Close browser window on outside click desktop.classList.remove('hidden'); // Show desktop background back desktopIcons.classList.remove('hidden'); // Show desktop icons back } }); window.onload = () => { desktop.classList.remove('active'); // Hide desktop initially taskbar.classList.add('hidden'); // Hide taskbar initially startBtn.classList.add('hidden'); // Hide start button initially desktopIcons.classList.add('hidden'); // Hide desktop icons initially loginScreen.classList.add('active'); // Show login screen on load };