// Window Management System let highestZ = 100; let activeWindow = null; let dragOffset = { x: 0, y: 0 }; let isDragging = false; let currentDragWindow = null; // Initialize document.addEventListener('DOMContentLoaded', () => { initializeWindows(); startClock(); addMatrixEffect(); }); // Clock function startClock() { const clock = document.getElementById('clock'); setInterval(() => { const now = new Date(); clock.textContent = now.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' }); }, 1000); } // Window Dragging Logic function initializeWindows() { const windows = document.querySelectorAll('.window'); windows.forEach(window => { const header = window.querySelector('.window-header'); header.addEventListener('mousedown', (e) => startDrag(e, window)); header.addEventListener('touchstart', (e) => startDrag(e, window), { passive: false }); // Bring to front on click window.addEventListener('mousedown', () => bringToFront(window)); }); document.addEventListener('mousemove', drag); document.addEventListener('touchmove', drag, { passive: false }); document.addEventListener('mouseup', stopDrag); document.addEventListener('touchend', stopDrag); } function startDrag(e, window) { if (window.classList.contains('minimized')) return; isDragging = true; currentDragWindow = window; window.classList.add('dragging'); bringToFront(window); const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX; const clientY = e.type.includes('touch') ? e.touches[0].clientY : e.clientY; const rect = window.getBoundingClientRect(); dragOffset.x = clientX - rect.left; dragOffset.y = clientY - rect.top; e.preventDefault(); } function drag(e) { if (!isDragging || !currentDragWindow) return; const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX; const clientY = e.type.includes('touch') ? e.touches[0].clientY : e.clientY; let newX = clientX - dragOffset.x; let newY = clientY - dragOffset.y; // Boundary checks const maxX = window.innerWidth - currentDragWindow.offsetWidth; const maxY = window.innerHeight - currentDragWindow.offsetHeight - 48; // Account for taskbar newX = Math.max(0, Math.min(newX, maxX)); newY = Math.max(48, Math.min(newY, maxY)); // Account for header currentDragWindow.style.left = newX + 'px'; currentDragWindow.style.top = newY + 'px'; e.preventDefault(); } function stopDrag() { if (currentDragWindow) { currentDragWindow.classList.remove('dragging'); } isDragging = false; currentDragWindow = null; } function bringToFront(window) { highestZ++; window.style.zIndex = highestZ; // Remove active class from all windows document.querySelectorAll('.window').forEach(w => w.classList.remove('active')); window.classList.add('active'); } // Window Controls function minimizeWindow(windowId) { const window = document.querySelector(`[data-window="${windowId}"]`); if (window) { window.classList.add('minimized'); updateTaskbarButton(windowId, false); } } function closeWindow(windowId) { const window = document.querySelector(`[data-window="${windowId}"]`); if (window) { window.style.display = 'none'; updateTaskbarButton(windowId, false); // Add closed animation window.style.animation = 'none'; setTimeout(() => { window.style.animation = ''; }, 10); } } function openWindow(windowId) { const window = document.querySelector(`[data-window="${windowId}"]`); if (window) { window.classList.remove('minimized'); window.style.display = 'block'; bringToFront(window); updateTaskbarButton(windowId, true); // Reset animation window.style.animation = 'windowOpen 0.3s ease-out'; } } function updateTaskbarButton(windowId, isActive) { const buttons = document.querySelectorAll('.taskbar-btn'); buttons.forEach(btn => { if (btn.getAttribute('onclick').includes(windowId)) { if (isActive) { btn.classList.add('active'); } else { btn.classList.remove('active'); } } }); } // Matrix-like background effect function addMatrixEffect() { const chars = "0123456789ABCDEF"; const desktop = document.getElementById('desktop'); // Create occasional falling characters setInterval(() => { if (Math.random() > 0.9) { createFallingChar(); } }, 500); } function createFallingChar() { const char = document.createElement('div'); char.textContent = Math.random() > 0.5 ? '0' : '1'; char.style.position = 'absolute'; char.style.left = Math.random() * 100 + '%'; char.style.top = '-20px'; char.style.color = 'rgba(245, 158, 11, 0.2)'; char.style.fontFamily = 'JetBrains Mono, monospace'; char.style.fontSize = '14px'; char.style.pointerEvents = 'none'; char.style.zIndex = '1'; char.style.animation = 'fall 3s linear forwards'; document.getElementById('desktop').appendChild(char); setTimeout(() => char.remove(), 3000); } // Add fall animation to CSS dynamically const style = document.createElement('style'); style.textContent = ` @keyframes fall { to { transform: translateY(100vh); opacity: 0; } } `; document.head.appendChild(style); // Keyboard shortcuts document.addEventListener('keydown', (e) => { // Alt + W to close active window if (e.altKey && e.key === 'w') { const active = document.querySelector('.window.active'); if (active) { const windowId = active.getAttribute('data-window'); closeWindow(windowId); } } // Escape to minimize active window if (e.key === 'Escape') { const active = document.querySelector('.window.active'); if (active) { const windowId = active.getAttribute('data-window'); minimizeWindow(windowId); } } }); // Prevent text selection when dragging document.addEventListener('selectstart', (e) => { if (isDragging) { e.preventDefault(); } }); // Double click header to maximize (simplified - just centers and enlarges) document.querySelectorAll('.window-header').forEach(header => { header.addEventListener('dblclick', (e) => { const window = header.closest('.window'); if (window.style.width === '90%') { // Restore window.style.width = ''; window.style.height = ''; window.style.left = '10%'; window.style.top = '10%'; } else { // Maximize window.style.width = '90%'; window.style.height = '80%'; window.style.left = '5%'; window.style.top = '5%'; } }); });