Spaces:

Boobs00
/

windy

Running

App Files Files Community

windy / index.html

Boobs00

Add 3 files

ab7801f verified 12 months ago

raw

history blame contribute delete

30.3 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>CyberpunkDesktop</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<script>
	tailwind.config = {
	theme: {
	extend: {
	colors: {
	cyberpink: '#ff2a6d',
	cyberblue: '#05d9fe',
	cyberpurple: '#d300c5',
	cyberdark: '#0d0221',
	cybergray: '#1a1a2e',
	},
	fontFamily: {
	'cyber': ['"Rajdhani"', 'sans-serif'],
	},
	boxShadow: {
	'neon-pink': '0 0 10px #ff2a6d, 0 0 20px #ff2a6d, 0 0 30px #ff2a6d',
	'neon-blue': '0 0 10px #05d9fe, 0 0 20px #05d9fe, 0 0 30px #05d9fe',
	'neon-purple': '0 0 10px #d300c5, 0 0 20px #d300c5, 0 0 30px #d300c5',
	}
	}
	}
	}
	</script>
	<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet">
	<style>
	/* Custom CSS for elements Tailwind can't handle */
	body {
	background-color: #0d0221;
	background-image:
	linear-gradient(rgba(5, 217, 254, 0.1) 1px, transparent 1px),
	linear-gradient(90deg, rgba(5, 217, 254, 0.1) 1px, transparent 1px);
	background-size: 20px 20px;
	overflow: hidden;
	user-select: none;
	font-family: 'Rajdhani', sans-serif;
	}

	.window {
	backdrop-filter: blur(10px);
	background: rgba(26, 26, 46, 0.7);
	border: 1px solid rgba(5, 217, 254, 0.3);
	box-shadow: 0 0 15px rgba(5, 217, 254, 0.2);
	}

	.window-header {
	background: linear-gradient(90deg, rgba(5, 217, 254, 0.2), rgba(255, 42, 109, 0.2));
	}

	.taskbar {
	backdrop-filter: blur(10px);
	background: rgba(13, 2, 33, 0.7);
	border-top: 1px solid rgba(5, 217, 254, 0.3);
	}

	.icon:hover {
	filter: drop-shadow(0 0 5px #05d9fe) drop-shadow(0 0 10px #ff2a6d);
	}

	.resize-handle {
	background: transparent;
	z-index: 10;
	}

	.resize-handle:hover {
	background: rgba(5, 217, 254, 0.3);
	}

	.terminal-cursor {
	animation: blink 1s infinite;
	}

	@keyframes blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
	}

	.context-menu {
	backdrop-filter: blur(10px);
	background: rgba(26, 26, 46, 0.9);
	border: 1px solid rgba(255, 42, 109, 0.5);
	box-shadow: 0 0 15px rgba(255, 42, 109, 0.3);
	}

	.context-menu-item:hover {
	background: rgba(255, 42, 109, 0.3);
	}

	.ghost-window {
	border: 2px dashed rgba(5, 217, 254, 0.7);
	background: rgba(5, 217, 254, 0.1);
	pointer-events: none;
	}
	</style>
	</head>
	<body class="h-screen w-screen text-white font-cyber flex flex-col">
	<!-- Desktop Icons -->
	<div id="desktop" class="flex-1 relative overflow-hidden">
	<!-- Desktop icons will be added here by JavaScript -->
	</div>

	<!-- Taskbar -->
	<div class="taskbar h-12 flex items-center px-2">
	<button id="start-button" class="h-10 px-3 flex items-center gap-2 hover:bg-cyberpurple hover:bg-opacity-20 rounded transition-all">
	<span class="text-cyberpink font-bold">START</span>
	</button>
	<div id="taskbar-items" class="flex-1 flex items-center gap-1 ml-2">
	<!-- Taskbar items will be added here by JavaScript -->
	</div>
	<div class="text-cyberblue text-sm font-medium px-2">
	<span id="clock">00:00:00</span>
	</div>
	</div>

	<!-- Windows -->
	<div id="windows-container">
	<!-- Windows will be added here by JavaScript -->
	</div>

	<!-- Context Menu -->
	<div id="context-menu" class="context-menu absolute hidden w-48 py-1 rounded z-50">
	<div class="context-menu-item px-4 py-2 cursor-pointer hover:text-cyberpink" onclick="openApp('explorer')">Open Explorer</div>
	<div class="context-menu-item px-4 py-2 cursor-pointer hover:text-cyberpink" onclick="openApp('notepad')">New Text File</div>
	<div class="context-menu-item px-4 py-2 cursor-pointer hover:text-cyberpink" onclick="location.reload()">Refresh</div>
	</div>

	<!-- Ghost Window for Resizing -->
	<div id="ghost-window" class="ghost-window absolute hidden z-40"></div>

	<script>
	// App definitions
	const apps = [
	{
	id: 'explorer',
	title: 'File Explorer',
	icon: '📁',
	content: `
	<div class="p-4">
	<h3 class="text-cyberpink mb-4">File Explorer</h3>
	<div class="grid grid-cols-4 gap-4">
	<div class="icon p-2 rounded hover:bg-cyberblue hover:bg-opacity-10 cursor-pointer">
	<div class="text-4xl text-center">📁</div>
	<div class="text-center mt-1 text-xs">Documents</div>
	</div>
	<div class="icon p-2 rounded hover:bg-cyberblue hover:bg-opacity-10 cursor-pointer">
	<div class="text-4xl text-center">🎵</div>
	<div class="text-center mt-1 text-xs">Music</div>
	</div>
	<div class="icon p-2 rounded hover:bg-cyberblue hover:bg-opacity-10 cursor-pointer">
	<div class="text-4xl text-center">🖼️</div>
	<div class="text-center mt-1 text-xs">Pictures</div>
	</div>
	<div class="icon p-2 rounded hover:bg-cyberblue hover:bg-opacity-10 cursor-pointer">
	<div class="text-4xl text-center">🎮</div>
	<div class="text-center mt-1 text-xs">Games</div>
	</div>
	</div>
	</div>
	`
	},
	{
	id: 'notepad',
	title: 'Notepad',
	icon: '📝',
	content: `
	<div class="flex flex-col h-full">
	<textarea class="flex-1 bg-transparent p-4 outline-none resize-none" placeholder="Type something..."></textarea>
	</div>
	`
	},
	{
	id: 'calculator',
	title: 'Calculator',
	icon: '🧮',
	content: `
	<div class="p-4">
	<div class="bg-cybergray rounded p-2 mb-4 text-right text-xl h-10" id="calc-display">0</div>
	<div class="grid grid-cols-4 gap-2">
	<button class="calc-btn bg-cyberpink bg-opacity-20 hover:bg-opacity-30" onclick="calcInput('7')">7</button>
	<button class="calc-btn bg-cyberpink bg-opacity-20 hover:bg-opacity-30" onclick="calcInput('8')">8</button>
	<button class="calc-btn bg-cyberpink bg-opacity-20 hover:bg-opacity-30" onclick="calcInput('9')">9</button>
	<button class="calc-btn bg-cyberblue bg-opacity-20 hover:bg-opacity-30" onclick="calcInput('+')">+</button>
	<button class="calc-btn bg-cyberpink bg-opacity-20 hover:bg-opacity-30" onclick="calcInput('4')">4</button>
	<button class="calc-btn bg-cyberpink bg-opacity-20 hover:bg-opacity-30" onclick="calcInput('5')">5</button>
	<button class="calc-btn bg-cyberpink bg-opacity-20 hover:bg-opacity-30" onclick="calcInput('6')">6</button>
	<button class="calc-btn bg-cyberblue bg-opacity-20 hover:bg-opacity-30" onclick="calcInput('-')">-</button>
	<button class="calc-btn bg-cyberpink bg-opacity-20 hover:bg-opacity-30" onclick="calcInput('1')">1</button>
	<button class="calc-btn bg-cyberpink bg-opacity-20 hover:bg-opacity-30" onclick="calcInput('2')">2</button>
	<button class="calc-btn bg-cyberpink bg-opacity-20 hover:bg-opacity-30" onclick="calcInput('3')">3</button>
	<button class="calc-btn bg-cyberblue bg-opacity-20 hover:bg-opacity-30" onclick="calcInput('*')">×</button>
	<button class="calc-btn bg-cyberpink bg-opacity-20 hover:bg-opacity-30" onclick="calcInput('0')">0</button>
	<button class="calc-btn bg-cyberpink bg-opacity-20 hover:bg-opacity-30" onclick="calcInput('.')">.</button>
	<button class="calc-btn bg-cyberblue bg-opacity-20 hover:bg-opacity-30" onclick="calcClear()">C</button>
	<button class="calc-btn bg-cyberblue bg-opacity-20 hover:bg-opacity-30" onclick="calcInput('/')">÷</button>
	<button class="calc-btn col-span-4 bg-cyberpurple bg-opacity-20 hover:bg-opacity-30" onclick="calcEquals()">=</button>
	</div>
	</div>
	`
	},
	{
	id: 'terminal',
	title: 'Terminal',
	icon: '💻',
	content: `
	<div class="flex flex-col h-full p-2 bg-black bg-opacity-50">
	<div class="flex-1 overflow-y-auto font-mono text-sm" id="terminal-output">
	<div>CyberTerminal v1.0</div>
	<div>Type "help" for available commands</div>
	<div class="terminal-line"> </div>
	</div>
	<div class="flex items-center">
	<span class="text-cyberpink mr-2">$</span>
	<input type="text" id="terminal-input" class="flex-1 bg-transparent outline-none" autocomplete="off" onkeydown="handleTerminalInput(event)">
	<span class="terminal-cursor ml-1">█</span>
	</div>
	</div>
	`
	}
	];

	// State management
	let activeWindowId = null;
	let zIndexCounter = 1;
	let isDragging = false;
	let isResizing = false;
	let resizeDirection = null;
	let dragOffset = { x: 0, y: 0 };
	let originalWindowSize = { width: 0, height: 0 };
	let originalMousePos = { x: 0, y: 0 };

	// Initialize the desktop
	function initDesktop() {
	const desktop = document.getElementById('desktop');

	apps.forEach(app => {
	// Create desktop icon
	const icon = document.createElement('div');
	icon.className = 'icon absolute flex flex-col items-center w-16 p-2 cursor-pointer';
	icon.style.left = `${Math.random() * (window.innerWidth - 100)}px`;
	icon.style.top = `${Math.random() * (window.innerHeight - 150)}px`;
	icon.innerHTML = `
	<div class="text-4xl">${app.icon}</div>
	<div class="text-xs mt-1 text-center">${app.title}</div>
	`;
	icon.onclick = () => openApp(app.id);
	desktop.appendChild(icon);
	});

	// Update clock every second
	updateClock();
	setInterval(updateClock, 1000);

	// Setup context menu
	document.addEventListener('contextmenu', (e) => {
	e.preventDefault();
	const contextMenu = document.getElementById('context-menu');
	contextMenu.style.left = `${e.clientX}px`;
	contextMenu.style.top = `${e.clientY}px`;
	contextMenu.classList.remove('hidden');
	});

	// Close context menu on click elsewhere
	document.addEventListener('click', () => {
	document.getElementById('context-menu').classList.add('hidden');
	});

	// Setup window dragging and resizing
	setupWindowInteractions();
	}

	// Open an application window
	function openApp(appId) {
	const app = apps.find(a => a.id === appId);
	if (!app) return;

	// Check if window already exists
	let windowElement = document.getElementById(`window-${appId}`);

	if (!windowElement) {
	// Create new window
	windowElement = document.createElement('div');
	windowElement.id = `window-${appId}`;
	windowElement.className = 'window rounded-lg overflow-hidden absolute flex flex-col';
	windowElement.style.width = '400px';
	windowElement.style.height = '300px';
	windowElement.style.left = `${Math.random() * (window.innerWidth - 400)}px`;
	windowElement.style.top = `${Math.random() * (window.innerHeight - 350)}px`;

	windowElement.innerHTML = `
	<div class="window-header h-8 flex items-center justify-between px-3 cursor-move">
	<div class="flex items-center gap-2">
	<span>${app.icon}</span>
	<span class="font-medium">${app.title}</span>
	</div>
	<div class="flex gap-2">
	<button class="w-4 h-4 rounded-full bg-yellow-500 hover:bg-yellow-400" onclick="minimizeWindow('${appId}')"></button>
	<button class="w-4 h-4 rounded-full bg-green-500 hover:bg-green-400" onclick="maximizeWindow('${appId}')"></button>
	<button class="w-4 h-4 rounded-full bg-red-500 hover:bg-red-400" onclick="closeWindow('${appId}')"></button>
	</div>
	</div>
	<div class="flex-1 overflow-auto">
	${app.content}
	</div>
	<div class="resize-handle absolute bottom-0 right-0 w-3 h-3 cursor-nwse-resize"></div>
	`;

	document.getElementById('windows-container').appendChild(windowElement);

	// Add to taskbar
	addToTaskbar(appId);
	}

	// Bring to front
	bringToFront(windowElement);

	// Show window if minimized
	windowElement.classList.remove('hidden');

	// Update active window
	activeWindowId = appId;

	// Initialize app-specific functionality
	if (appId === 'terminal') {
	initTerminal();
	}
	}

	// Close a window
	function closeWindow(appId) {
	const windowElement = document.getElementById(`window-${appId}`);
	if (windowElement) {
	windowElement.remove();
	removeFromTaskbar(appId);
	}
	}

	// Minimize a window
	function minimizeWindow(appId) {
	const windowElement = document.getElementById(`window-${appId}`);
	if (windowElement) {
	windowElement.classList.add('hidden');
	}
	}

	// Maximize a window
	function maximizeWindow(appId) {
	const windowElement = document.getElementById(`window-${appId}`);
	if (windowElement) {
	if (windowElement.classList.contains('maximized')) {
	// Restore
	windowElement.classList.remove('maximized');
	windowElement.style.width = originalWindowSize.width + 'px';
	windowElement.style.height = originalWindowSize.height + 'px';
	windowElement.style.left = originalWindowSize.left + 'px';
	windowElement.style.top = originalWindowSize.top + 'px';
	} else {
	// Maximize
	originalWindowSize = {
	width: parseInt(windowElement.style.width),
	height: parseInt(windowElement.style.height),
	left: parseInt(windowElement.style.left),
	top: parseInt(windowElement.style.top)
	};

	windowElement.classList.add('maximized');
	windowElement.style.width = (window.innerWidth - 20) + 'px';
	windowElement.style.height = (window.innerHeight - 60) + 'px';
	windowElement.style.left = '10px';
	windowElement.style.top = '10px';
	}
	}
	}

	// Bring window to front
	function bringToFront(windowElement) {
	zIndexCounter++;
	windowElement.style.zIndex = zIndexCounter;
	activeWindowId = windowElement.id.replace('window-', '');
	}

	// Add window to taskbar
	function addToTaskbar(appId) {
	const app = apps.find(a => a.id === appId);
	if (!app) return;

	const taskbarItems = document.getElementById('taskbar-items');
	const existingItem = document.getElementById(`taskbar-${appId}`);

	if (!existingItem) {
	const item = document.createElement('div');
	item.id = `taskbar-${appId}`;
	item.className = 'flex items-center gap-2 px-3 py-1 rounded hover:bg-cyberblue hover:bg-opacity-20 cursor-pointer';
	item.innerHTML = `
	<span>${app.icon}</span>
	<span class="text-sm">${app.title}</span>
	`;
	item.onclick = () => {
	const windowElement = document.getElementById(`window-${appId}`);
	if (windowElement) {
	if (windowElement.classList.contains('hidden')) {
	windowElement.classList.remove('hidden');
	bringToFront(windowElement);
	} else {
	bringToFront(windowElement);
	}
	} else {
	openApp(appId);
	}
	};
	taskbarItems.appendChild(item);
	}
	}

	// Remove window from taskbar
	function removeFromTaskbar(appId) {
	const item = document.getElementById(`taskbar-${appId}`);
	if (item) {
	item.remove();
	}
	}

	// Update the clock
	function updateClock() {
	const now = new Date();
	const hours = now.getHours().toString().padStart(2, '0');
	const minutes = now.getMinutes().toString().padStart(2, '0');
	const seconds = now.getSeconds().toString().padStart(2, '0');
	document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`;
	}

	// Setup window interactions (dragging and resizing)
	function setupWindowInteractions() {
	document.addEventListener('mousedown', (e) => {
	// Check if we're clicking on a window header
	const header = e.target.closest('.window-header');
	if (header) {
	const windowElement = header.closest('.window');
	if (windowElement) {
	// Bring to front
	bringToFront(windowElement);

	// Setup dragging
	isDragging = true;
	dragOffset = {
	x: e.clientX - windowElement.getBoundingClientRect().left,
	y: e.clientY - windowElement.getBoundingClientRect().top
	};

	// Prevent text selection during drag
	document.body.style.userSelect = 'none';
	}
	}

	// Check if we're clicking on a resize handle
	const resizeHandle = e.target.closest('.resize-handle');
	if (resizeHandle) {
	const windowElement = resizeHandle.closest('.window');
	if (windowElement) {
	// Bring to front
	bringToFront(windowElement);

	// Setup resizing
	isResizing = true;
	resizeDirection = 'se'; // southeast by default
	originalWindowSize = {
	width: parseInt(windowElement.style.width),
	height: parseInt(windowElement.style.height)
	};
	originalMousePos = { x: e.clientX, y: e.clientY };

	// Create ghost window
	const ghostWindow = document.getElementById('ghost-window');
	ghostWindow.style.width = originalWindowSize.width + 'px';
	ghostWindow.style.height = originalWindowSize.height + 'px';
	ghostWindow.style.left = windowElement.style.left;
	ghostWindow.style.top = windowElement.style.top;
	ghostWindow.classList.remove('hidden');

	// Prevent text selection during resize
	document.body.style.userSelect = 'none';
	}
	}
	});

	document.addEventListener('mousemove', (e) => {
	if (isDragging) {
	const windowElement = document.getElementById(`window-${activeWindowId}`);
	if (windowElement) {
	let newLeft = e.clientX - dragOffset.x;
	let newTop = e.clientY - dragOffset.y;

	// Constrain to viewport
	newLeft = Math.max(0, Math.min(newLeft, window.innerWidth - windowElement.offsetWidth));
	newTop = Math.max(0, Math.min(newTop, window.innerHeight - windowElement.offsetHeight));

	windowElement.style.left = `${newLeft}px`;
	windowElement.style.top = `${newTop}px`;
	}
	}

	if (isResizing) {
	const windowElement = document.getElementById(`window-${activeWindowId}`);
	if (windowElement) {
	const ghostWindow = document.getElementById('ghost-window');

	const deltaX = e.clientX - originalMousePos.x;
	const deltaY = e.clientY - originalMousePos.y;

	let newWidth = originalWindowSize.width;
	let newHeight = originalWindowSize.height;

	if (resizeDirection.includes('e')) {
	newWidth = Math.max(150, originalWindowSize.width + deltaX);
	}
	if (resizeDirection.includes('s')) {
	newHeight = Math.max(100, originalWindowSize.height + deltaY);
	}

	ghostWindow.style.width = `${newWidth}px`;
	ghostWindow.style.height = `${newHeight}px`;
	}
	}
	});

	document.addEventListener('mouseup', () => {
	if (isDragging) {
	isDragging = false;
	document.body.style.userSelect = '';
	}

	if (isResizing) {
	isResizing = false;
	document.body.style.userSelect = '';

	const windowElement = document.getElementById(`window-${activeWindowId}`);
	const ghostWindow = document.getElementById('ghost-window');

	if (windowElement && ghostWindow) {
	windowElement.style.width = ghostWindow.style.width;
	windowElement.style.height = ghostWindow.style.height;
	}

	ghostWindow.classList.add('hidden');
	}
	});
	}

	// Calculator functions
	function calcInput(value) {
	const display = document.getElementById('calc-display');
	if (display.textContent === '0' && value !== '.') {
	display.textContent = value;
	} else {
	display.textContent += value;
	}
	}

	function calcClear() {
	document.getElementById('calc-display').textContent = '0';
	}

	function calcEquals() {
	const display = document.getElementById('calc-display');
	try {
	// Replace × with * and ÷ with / for eval
	const expression = display.textContent.replace(/×/g, '*').replace(/÷/g, '/');
	display.textContent = eval(expression).toString();
	} catch (e) {
	display.textContent = 'Error';
	}
	}

	// Terminal functions
	function initTerminal() {
	// Clear terminal input
	const terminalInput = document.getElementById('terminal-input');
	if (terminalInput) {
	terminalInput.value = '';
	terminalInput.focus();
	}
	}

	function handleTerminalInput(e) {
	if (e.key === 'Enter') {
	const input = document.getElementById('terminal-input');
	const command = input.value.trim();
	input.value = '';

	processTerminalCommand(command);
	}
	}

	function processTerminalCommand(command) {
	const output = document.getElementById('terminal-output');

	// Add the command to output
	const commandLine = document.createElement('div');
	commandLine.innerHTML = `<span class="text-cyberpink">$</span> ${command}`;
	output.appendChild(commandLine);

	// Process command
	let response = '';
	switch (command.toLowerCase()) {
	case 'help':
	response = `
	Available commands:<br>
	- help: Show this help<br>
	- clear: Clear terminal<br>
	- about: Show system info<br>
	- hack: Initiate hacking sequence (just kidding)<br>
	`;
	break;
	case 'clear':
	output.innerHTML = '';
	output.appendChild(document.createElement('div'));
	return;
	case 'about':
	response = `
	CyberTerminal v1.0<br>
	Running on CyberpunkDesktop<br>
	System status: <span class="text-cyberblue">OPERATIONAL</span>
	`;
	break;
	case 'hack':
	response = `
	<span class="text-cyberpink">INITIATING HACKING SEQUENCE...</span><br>
	Accessing mainframe...<br>
	Bypassing firewalls...<br>
	<span class="text-cyberblue">ERROR: Not a real terminal</span><br>
	Just kidding! This is a simulation.
	`;
	break;
	case '':
	response = '';
	break;
	default:
	response = `<span class="text-cyberpink">Command not found: ${command}</span>`;
	}

	const responseLine = document.createElement('div');
	responseLine.innerHTML = response;
	output.appendChild(responseLine);

	// Add empty line
	output.appendChild(document.createElement('div'));

	// Scroll to bottom
	output.scrollTop = output.scrollHeight;
	}

	// Initialize when DOM is loaded
	document.addEventListener('DOMContentLoaded', initDesktop);
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Boobs00/windy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>