|
|
<!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> |
|
|
|
|
|
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"> |
|
|
|
|
|
<div id="desktop" class="flex-1 relative overflow-hidden"> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
</div> |
|
|
<div class="text-cyberblue text-sm font-medium px-2"> |
|
|
<span id="clock">00:00:00</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="windows-container"> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div id="ghost-window" class="ghost-window absolute hidden z-40"></div> |
|
|
|
|
|
<script> |
|
|
|
|
|
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> |
|
|
` |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
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 }; |
|
|
|
|
|
|
|
|
function initDesktop() { |
|
|
const desktop = document.getElementById('desktop'); |
|
|
|
|
|
apps.forEach(app => { |
|
|
|
|
|
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); |
|
|
}); |
|
|
|
|
|
|
|
|
updateClock(); |
|
|
setInterval(updateClock, 1000); |
|
|
|
|
|
|
|
|
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'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', () => { |
|
|
document.getElementById('context-menu').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
setupWindowInteractions(); |
|
|
} |
|
|
|
|
|
|
|
|
function openApp(appId) { |
|
|
const app = apps.find(a => a.id === appId); |
|
|
if (!app) return; |
|
|
|
|
|
|
|
|
let windowElement = document.getElementById(`window-${appId}`); |
|
|
|
|
|
if (!windowElement) { |
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
addToTaskbar(appId); |
|
|
} |
|
|
|
|
|
|
|
|
bringToFront(windowElement); |
|
|
|
|
|
|
|
|
windowElement.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
activeWindowId = appId; |
|
|
|
|
|
|
|
|
if (appId === 'terminal') { |
|
|
initTerminal(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function closeWindow(appId) { |
|
|
const windowElement = document.getElementById(`window-${appId}`); |
|
|
if (windowElement) { |
|
|
windowElement.remove(); |
|
|
removeFromTaskbar(appId); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function minimizeWindow(appId) { |
|
|
const windowElement = document.getElementById(`window-${appId}`); |
|
|
if (windowElement) { |
|
|
windowElement.classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function maximizeWindow(appId) { |
|
|
const windowElement = document.getElementById(`window-${appId}`); |
|
|
if (windowElement) { |
|
|
if (windowElement.classList.contains('maximized')) { |
|
|
|
|
|
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 { |
|
|
|
|
|
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'; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function bringToFront(windowElement) { |
|
|
zIndexCounter++; |
|
|
windowElement.style.zIndex = zIndexCounter; |
|
|
activeWindowId = windowElement.id.replace('window-', ''); |
|
|
} |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function removeFromTaskbar(appId) { |
|
|
const item = document.getElementById(`taskbar-${appId}`); |
|
|
if (item) { |
|
|
item.remove(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
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}`; |
|
|
} |
|
|
|
|
|
|
|
|
function setupWindowInteractions() { |
|
|
document.addEventListener('mousedown', (e) => { |
|
|
|
|
|
const header = e.target.closest('.window-header'); |
|
|
if (header) { |
|
|
const windowElement = header.closest('.window'); |
|
|
if (windowElement) { |
|
|
|
|
|
bringToFront(windowElement); |
|
|
|
|
|
|
|
|
isDragging = true; |
|
|
dragOffset = { |
|
|
x: e.clientX - windowElement.getBoundingClientRect().left, |
|
|
y: e.clientY - windowElement.getBoundingClientRect().top |
|
|
}; |
|
|
|
|
|
|
|
|
document.body.style.userSelect = 'none'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const resizeHandle = e.target.closest('.resize-handle'); |
|
|
if (resizeHandle) { |
|
|
const windowElement = resizeHandle.closest('.window'); |
|
|
if (windowElement) { |
|
|
|
|
|
bringToFront(windowElement); |
|
|
|
|
|
|
|
|
isResizing = true; |
|
|
resizeDirection = 'se'; |
|
|
originalWindowSize = { |
|
|
width: parseInt(windowElement.style.width), |
|
|
height: parseInt(windowElement.style.height) |
|
|
}; |
|
|
originalMousePos = { x: e.clientX, y: e.clientY }; |
|
|
|
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
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; |
|
|
|
|
|
|
|
|
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'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
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 { |
|
|
|
|
|
const expression = display.textContent.replace(/×/g, '*').replace(/÷/g, '/'); |
|
|
display.textContent = eval(expression).toString(); |
|
|
} catch (e) { |
|
|
display.textContent = 'Error'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function initTerminal() { |
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
const commandLine = document.createElement('div'); |
|
|
commandLine.innerHTML = `<span class="text-cyberpink">$</span> ${command}`; |
|
|
output.appendChild(commandLine); |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
output.appendChild(document.createElement('div')); |
|
|
|
|
|
|
|
|
output.scrollTop = output.scrollHeight; |
|
|
} |
|
|
|
|
|
|
|
|
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> |
