Download index.html from Boobs00/windy: direct link, hf CLI and curl.
- Browser
- Download file 30.3 kB
-
https://huggingface.co/spaces/Boobs00/windy/resolve/main/index.html
- Command line
-
hf download hf://spaces/Boobs00/windy/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Boobs00/windy/resolve/main/index.html
30.3 kB
| <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> |