Spaces:

CommanderLazarus
/

deepsite-project-4w40b

Running

Initial DeepSite commit

16c7afd verified 8 months ago

7.22 kB

// 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%';
        }
    });
});

	// 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%';
	}
	});
	});