Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>XortronOS</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@300;400;500;600;700&display=swap'); | |
| * { | |
| box-sizing: border-box; | |
| user-select: none; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| overflow: hidden; | |
| background: #000; | |
| } | |
| .font-mono { | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| /* Animated Wallpaper */ | |
| .desktop-bg { | |
| background-image: url('https://huggingface.co/spaces/darkc0de/Desktop/resolve/main/xWall.png'); | |
| background-size: cover; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -2; | |
| } | |
| .desktop-bg::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: radial-gradient(circle at center, transparent 0%, rgba(0, 10, 30, 0.4) 100%); | |
| pointer-events: none; | |
| } | |
| /* Glassmorphism */ | |
| .glass { | |
| background: rgba(10, 20, 40, 0.65); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); | |
| } | |
| .glass-strong { | |
| background: rgba(5, 15, 30, 0.85); | |
| backdrop-filter: blur(30px); | |
| -webkit-backdrop-filter: blur(30px); | |
| border: 1px solid rgba(0, 255, 255, 0.15); | |
| box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1); | |
| } | |
| .glass-panel { | |
| background: rgba(0, 30, 60, 0.4); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(0, 255, 255, 0.1); | |
| } | |
| /* Window Styles */ | |
| .window { | |
| position: absolute; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| transition: transform 0.2s ease, opacity 0.2s ease; | |
| min-width: 300px; | |
| min-height: 200px; | |
| } | |
| .window.active { | |
| box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 255, 255, 0.3); | |
| } | |
| .window-header { | |
| cursor: move; | |
| background: linear-gradient(180deg, rgba(20, 40, 80, 0.8) 0%, rgba(10, 25, 50, 0.9) 100%); | |
| border-bottom: 1px solid rgba(0, 255, 255, 0.2); | |
| } | |
| .window-btn { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| transition: all 0.2s; | |
| cursor: pointer; | |
| } | |
| .window-btn:hover { | |
| transform: scale(1.2); | |
| } | |
| .btn-close { background: #ff5f57; } | |
| .btn-min { background: #ffbd2e; } | |
| .btn-max { background: #28c840; } | |
| /* Terminal Specific */ | |
| .terminal-text { | |
| text-shadow: 0 0 10px rgba(0, 255, 0, 0.5); | |
| } | |
| .cursor-blink { | |
| animation: blink 1s infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 50% { opacity: 1; } | |
| 51%, 100% { opacity: 0; } | |
| } | |
| /* Scanline Effect */ | |
| .scanlines { | |
| background: linear-gradient( | |
| to bottom, | |
| rgba(255,255,255,0), | |
| rgba(255,255,255,0) 50%, | |
| rgba(0,0,0,0.1) 50%, | |
| rgba(0,0,0,0.1) | |
| ); | |
| background-size: 100% 4px; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| pointer-events: none; | |
| z-index: 1; | |
| opacity: 0.3; | |
| } | |
| /* Neon Glows */ | |
| .neon-text { | |
| text-shadow: 0 0 5px currentColor, 0 0 10px currentColor; | |
| } | |
| .neon-border { | |
| box-shadow: 0 0 10px rgba(0, 255, 255, 0.5), inset 0 0 10px rgba(0, 255, 255, 0.1); | |
| } | |
| /* Taskbar */ | |
| .taskbar { | |
| background: linear-gradient(180deg, rgba(10, 25, 50, 0.9) 0%, rgba(5, 15, 30, 0.95) 100%); | |
| border-top: 1px solid rgba(0, 255, 255, 0.2); | |
| backdrop-filter: blur(20px); | |
| } | |
| .taskbar-icon { | |
| transition: all 0.3s ease; | |
| position: relative; | |
| } | |
| .taskbar-icon:hover { | |
| transform: translateY(-5px); | |
| background: rgba(0, 255, 255, 0.1); | |
| } | |
| .taskbar-icon.active::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 4px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 4px; | |
| height: 4px; | |
| background: #00ffff; | |
| border-radius: 50%; | |
| box-shadow: 0 0 10px #00ffff; | |
| } | |
| /* Desktop Icons */ | |
| .desktop-icon { | |
| transition: all 0.2s; | |
| cursor: pointer; | |
| } | |
| .desktop-icon:hover { | |
| background: rgba(0, 255, 255, 0.1); | |
| transform: scale(1.05); | |
| } | |
| .desktop-icon.selected { | |
| background: rgba(0, 255, 255, 0.2); | |
| border: 1px solid rgba(0, 255, 255, 0.5); | |
| } | |
| /* Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: rgba(0, 20, 40, 0.5); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: rgba(0, 255, 255, 0.3); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: rgba(0, 255, 255, 0.5); | |
| } | |
| /* Boot Sequence Specific CSS */ | |
| #boot-screen { | |
| background-color: #050505; | |
| } | |
| .boot-scanline { | |
| background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,255,255,0.05) 50%, rgba(0,255,255,0.05)); | |
| background-size: 100% 4px; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| pointer-events: none; | |
| z-index: 10; | |
| } | |
| @keyframes boot-glitch { | |
| 0% { transform: translate(0) } | |
| 20% { transform: translate(-3px, 1px) } | |
| 40% { transform: translate(-1px, -2px) } | |
| 60% { transform: translate(3px, 1px) } | |
| 80% { transform: translate(1px, -1px) } | |
| 100% { transform: translate(0) } | |
| } | |
| .glitch-anim { | |
| animation: boot-glitch 0.2s infinite; | |
| } | |
| .fade-out-os { | |
| animation: fadeOutOS 0.8s cubic-bezier(0.87, 0, 0.13, 1) forwards; | |
| } | |
| @keyframes fadeOutOS { | |
| 0% { opacity: 1; transform: scale(1); filter: blur(0px); } | |
| 50% { opacity: 0.8; transform: scale(1.02); filter: blur(2px); } | |
| 100% { opacity: 0; transform: scale(1.05); filter: blur(10px); visibility: hidden; } | |
| } | |
| /* Animations */ | |
| @keyframes pulse-glow { | |
| 0%, 100% { box-shadow: 0 0 20px rgba(0, 255, 255, 0.3); } | |
| 50% { box-shadow: 0 0 30px rgba(0, 255, 255, 0.6); } | |
| } | |
| .animate-pulse-glow { | |
| animation: pulse-glow 2s infinite; | |
| } | |
| @keyframes slide-up { | |
| from { transform: translateY(100%); opacity: 0; } | |
| to { transform: translateY(0); opacity: 1; } | |
| } | |
| .notification { | |
| animation: slide-up 0.3s ease-out; | |
| } | |
| /* Mobile Responsive */ | |
| @media (max-width: 768px) { | |
| .window { | |
| position: fixed ; | |
| top: 0 ; | |
| left: 0 ; | |
| width: 100% ; | |
| height: 100% ; | |
| border-radius: 0; | |
| } | |
| .desktop-grid { | |
| grid-template-columns: repeat(3, 1fr); | |
| } | |
| } | |
| /* Grid Pattern for File Manager */ | |
| .grid-pattern { | |
| background-image: | |
| linear-gradient(rgba(0, 255, 255, 0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| } | |
| </style> | |
| </head> | |
| <body class="text-gray-100 overflow-hidden h-screen w-screen"> | |
| <!-- BOOT SEQUENCE OVERLAY --> | |
| <div id="boot-screen" class="fixed inset-0 z-[9999] flex flex-col font-mono text-green-500 overflow-hidden"> | |
| <div class="boot-scanline"></div> | |
| <div class="absolute inset-0 p-6 overflow-y-auto flex flex-col justify-end pointer-events-none" id="boot-logs-container"> | |
| <div id="boot-logs" class="text-[11px] sm:text-xs md:text-sm space-y-0.5 leading-tight text-cyan-500 text-shadow drop-shadow-[0_0_8px_rgba(0,255,255,0.8)] opacity-90 pb-8"></div> | |
| </div> | |
| <div id="boot-splash" class="absolute inset-0 flex flex-col items-center justify-center hidden bg-[#030a10]"> | |
| <div class="boot-scanline"></div> | |
| <div class="flex flex-col items-center z-20"> | |
| <i data-lucide="cpu" class="w-16 h-16 text-cyan-400 mb-4 animate-pulse"></i> | |
| <div class="text-cyan-400 font-mono text-center neon-text mb-8"> | |
| <h1 id="glitch-title" class="text-5xl md:text-7xl font-bold mb-2 tracking-wider">XORTRON OS</h1> | |
| <p class="text-sm md:text-base tracking-[0.5em] text-cyan-700">KERNEL V7.7.7</p> | |
| </div> | |
| <div class="w-64 sm:w-80 border border-cyan-800/50 p-1 rounded bg-black/50 backdrop-blur-sm shadow-[0_0_15px_rgba(0,255,255,0.2)]"> | |
| <div id="boot-progress-bar" class="h-2 bg-cyan-400 w-0 transition-all shadow-[0_0_10px_rgba(0,255,255,0.8)]"></div> | |
| </div> | |
| <div class="flex justify-between w-64 sm:w-80 mt-2 text-[10px] text-cyan-600 font-mono uppercase"> | |
| <span id="boot-status-text">Mounting filesystems...</span> | |
| <span id="boot-percent">0%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Desktop Background --> | |
| <div class="desktop-bg"></div> | |
| <!-- Desktop Icons --> | |
| <div class="absolute top-4 left-4 flex flex-col flex-wrap content-start gap-4 z-0 h-[calc(100vh-80px)]" id="desktop-icons"> | |
| <div class="desktop-icon flex flex-col items-center p-3 rounded-lg w-24" onclick="openWindow('terminal')"> | |
| <div class="w-12 h-12 bg-gray-900 rounded-lg flex items-center justify-center mb-2 border border-cyan-500/30 shadow-lg shadow-cyan-500/20"> | |
| <i data-lucide="terminal" class="w-6 h-6 text-cyan-400"></i> | |
| </div> | |
| <span class="text-xs text-center font-medium text-cyan-100 drop-shadow-md">Terminal</span> | |
| </div> | |
| <div class="desktop-icon flex flex-col items-center p-3 rounded-lg w-24" onclick="openWindow('files')"> | |
| <div class="w-12 h-12 bg-gray-900 rounded-lg flex items-center justify-center mb-2 border border-yellow-500/30 shadow-lg shadow-yellow-500/20"> | |
| <i data-lucide="folder-open" class="w-6 h-6 text-yellow-400"></i> | |
| </div> | |
| <span class="text-xs text-center font-medium text-yellow-100 drop-shadow-md">Files</span> | |
| </div> | |
| <div class="desktop-icon flex flex-col items-center p-3 rounded-lg w-24" onclick="openWindow('hacktools')"> | |
| <div class="w-12 h-12 bg-gray-900 rounded-lg flex items-center justify-center mb-2 border border-red-500/30 shadow-lg shadow-red-500/20"> | |
| <i data-lucide="shield-alert" class="w-6 h-6 text-red-400"></i> | |
| </div> | |
| <span class="text-xs text-center font-medium text-red-100 drop-shadow-md">Hack Tools</span> | |
| </div> | |
| <div class="desktop-icon flex flex-col items-center p-3 rounded-lg w-24" onclick="openWindow('network')"> | |
| <div class="w-12 h-12 bg-gray-900 rounded-lg flex items-center justify-center mb-2 border border-green-500/30 shadow-lg shadow-green-500/20"> | |
| <i data-lucide="network" class="w-6 h-6 text-green-400"></i> | |
| </div> | |
| <span class="text-xs text-center font-medium text-green-100 drop-shadow-md">Network</span> | |
| </div> | |
| <div class="desktop-icon flex flex-col items-center p-3 rounded-lg w-24" onclick="openWindow('browser')"> | |
| <div class="w-12 h-12 bg-gray-900 rounded-lg flex items-center justify-center mb-2 border border-purple-500/30 shadow-lg shadow-purple-500/20"> | |
| <i data-lucide="globe" class="w-6 h-6 text-purple-400"></i> | |
| </div> | |
| <span class="text-xs text-center font-medium text-purple-100 drop-shadow-md">Xortron Chat</span> | |
| </div> | |
| <div class="desktop-icon flex flex-col items-center p-3 rounded-lg w-24" onclick="openWindow('calculator')"> | |
| <div class="w-12 h-12 bg-gray-900 rounded-lg flex items-center justify-center mb-2 border border-pink-500/30 shadow-lg shadow-pink-500/20"> | |
| <i data-lucide="calculator" class="w-6 h-6 text-pink-400"></i> | |
| </div> | |
| <span class="text-xs text-center font-medium text-pink-100 drop-shadow-md">Calculator</span> | |
| </div> | |
| <div class="desktop-icon flex flex-col items-center p-3 rounded-lg w-24" onclick="openWindow('spec')"> | |
| <div class="w-12 h-12 bg-gray-900 rounded-lg flex items-center justify-center mb-2 border border-red-500/30 shadow-lg shadow-red-500/20"> | |
| <i data-lucide="book-open" class="w-6 h-6 text-red-400"></i> | |
| </div> | |
| <span class="text-xs text-center font-medium text-red-100 drop-shadow-md">Master Spec</span> | |
| </div> | |
| <div class="desktop-icon flex flex-col items-center p-3 rounded-lg w-24" onclick="openWindow('favs')"> | |
| <div class="w-12 h-12 bg-gray-900 rounded-lg flex items-center justify-center mb-2 border border-yellow-500/30 shadow-lg shadow-yellow-500/20"> | |
| <i data-lucide="star" class="w-6 h-6 text-yellow-400"></i> | |
| </div> | |
| <span class="text-xs text-center font-medium text-yellow-100 drop-shadow-md">Xor's Favs</span> | |
| </div> | |
| <a href="https://ko-fi.com/Z8Z51E5TIG" target="_blank" class="desktop-icon flex flex-col items-center p-3 rounded-lg w-24 no-underline"> | |
| <div class="w-12 h-12 bg-gray-900 rounded-lg flex items-center justify-center mb-2 border border-orange-500/30 shadow-lg shadow-orange-500/20"> | |
| <i data-lucide="coffee" class="w-6 h-6 text-orange-400"></i> | |
| </div> | |
| <span class="text-xs text-center font-medium text-orange-100 drop-shadow-md">Buy me a coffee</span> | |
| </a> | |
| <a href="https://huggingface.co/darkc0de" target="_blank" class="desktop-icon flex flex-col items-center p-3 rounded-lg w-24 no-underline"> | |
| <div class="w-12 h-12 bg-gray-900 rounded-lg flex items-center justify-center mb-2 border border-yellow-500/30 shadow-lg shadow-yellow-500/20"> | |
| <i data-lucide="smile" class="w-6 h-6 text-yellow-400"></i> | |
| </div> | |
| <span class="text-xs text-center font-medium text-yellow-100 drop-shadow-md">Visit the Dev on HF</span> | |
| </a> | |
| </div> | |
| <!-- Windows Container --> | |
| <div id="windows-container" class="absolute inset-0 pointer-events-none"> | |
| <!-- Terminal Window --> | |
| <div id="window-terminal" class="window glass-strong pointer-events-auto hidden" style="top: 10%; left: 10%; width: 700px; height: 450px; z-index: 10;"> | |
| <div class="window-header flex items-center justify-between px-4 py-2 select-none" onmousedown="startDrag(event, 'window-terminal')"> | |
| <div class="flex items-center gap-2"> | |
| <i data-lucide="terminal" class="w-4 h-4 text-cyan-400"></i> | |
| <span class="text-sm font-medium text-cyan-100">Xortron-Terminal</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <span class="text-xs text-gray-400 font-mono mr-2">root@xortron-os:~</span> | |
| <div class="window-btn btn-min" onclick="minimizeWindow('terminal')"></div> | |
| <div class="window-btn btn-max" onclick="maximizeWindow('terminal')"></div> | |
| <div class="window-btn btn-close" onclick="closeWindow('terminal')"></div> | |
| </div> | |
| </div> | |
| <div class="p-4 h-[calc(100%-40px)] overflow-auto font-mono text-sm bg-black/40 relative"> | |
| <div class="scanlines"></div> | |
| <div class="terminal-text text-green-400 space-y-1"> | |
| <div class="text-cyan-400 font-bold">Xortron Operating System v7.7.7</div> | |
| <div class="text-gray-400">Kernel 5.15.0-76-generic x86_64</div> | |
| <div class="text-gray-500 text-xs mt-2">Last login: <span id="last-login">3/18/2026, 3:56:48 AM</span> from 192.168.1.105</div> | |
| <div class="mt-4 flex items-center"> | |
| <span class="text-green-500">root@xortron-os:~#</span> | |
| <span class="ml-2 cursor-blink">█</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Files Window --> | |
| <div id="window-files" class="window glass-strong pointer-events-auto hidden" style="top: 15%; left: 20%; width: 750px; height: 500px; z-index: 20;"> | |
| <div class="window-header flex items-center justify-between px-4 py-2 select-none" onmousedown="startDrag(event, 'window-files')"> | |
| <div class="flex items-center gap-2"> | |
| <i data-lucide="folder-open" class="w-4 h-4 text-yellow-400"></i> | |
| <span class="text-sm font-medium text-yellow-100">Xortron-Files</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <span class="text-xs text-gray-400 font-mono mr-2">/root/files</span> | |
| <div class="window-btn btn-min" onclick="minimizeWindow('files')"></div> | |
| <div class="window-btn btn-max" onclick="maximizeWindow('files')"></div> | |
| <div class="window-btn btn-close" onclick="closeWindow('files')"></div> | |
| </div> | |
| </div> | |
| <div class="flex h-[calc(100%-40px)]"> | |
| <div class="w-48 glass-panel p-4 border-r border-cyan-900/30"> | |
| <div class="text-xs font-bold text-cyan-400 mb-3 uppercase tracking-wider">Locations</div> | |
| <div class="space-y-2 text-sm"> | |
| <div class="flex items-center gap-2 text-gray-300 hover:text-cyan-400 cursor-pointer p-1 rounded hover:bg-cyan-900/20 transition"><i data-lucide="home" class="w-4 h-4"></i> Home</div> | |
| <div class="flex items-center gap-2 text-gray-300 hover:text-cyan-400 cursor-pointer p-1 rounded hover:bg-cyan-900/20 transition"><i data-lucide="monitor" class="w-4 h-4"></i> Desktop</div> | |
| <div class="flex items-center gap-2 text-gray-300 hover:text-cyan-400 cursor-pointer p-1 rounded hover:bg-cyan-900/20 transition"><i data-lucide="download" class="w-4 h-4"></i> Downloads</div> | |
| <div class="flex items-center gap-2 text-cyan-400 bg-cyan-900/20 p-1 rounded cursor-pointer"><i data-lucide="database" class="w-4 h-4"></i> Data</div> | |
| <div class="flex items-center gap-2 text-gray-300 hover:text-cyan-400 cursor-pointer p-1 rounded hover:bg-cyan-900/20 transition"><i data-lucide="wifi" class="w-4 h-4"></i> Network</div> | |
| </div> | |
| <div class="mt-6 pt-4 border-t border-cyan-900/30"> | |
| <div class="text-xs text-gray-500 mb-2">/root/files</div> | |
| <button class="w-full py-1 px-2 bg-cyan-900/30 hover:bg-cyan-800/50 border border-cyan-700/50 rounded text-xs text-cyan-300 transition flex items-center justify-center gap-1"> | |
| <i data-lucide="plus" class="w-3 h-3"></i> New Folder | |
| </button> | |
| <button class="w-full mt-2 py-1 px-2 bg-cyan-900/30 hover:bg-cyan-800/50 border border-cyan-700/50 rounded text-xs text-cyan-300 transition flex items-center justify-center gap-1"> | |
| <i data-lucide="upload" class="w-3 h-3"></i> Upload | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex-1 p-4 bg-black/20 grid-pattern overflow-auto"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="text-xs text-gray-400">Documents > Hack Tools</div> | |
| <div class="flex gap-2"> | |
| <i data-lucide="grid" class="w-4 h-4 text-cyan-400 cursor-pointer"></i> | |
| <i data-lucide="list" class="w-4 h-4 text-gray-500 cursor-pointer"></i> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-4 gap-3"> | |
| <div class="glass-panel p-3 rounded-lg hover:bg-cyan-900/20 cursor-pointer transition group"> | |
| <i data-lucide="file-code" class="w-8 h-8 text-blue-400 mb-2 group-hover:scale-110 transition"></i> | |
| <div class="text-xs text-gray-300 truncate">script.py</div> | |
| <div class="text-[10px] text-gray-500">2.4 KB</div> | |
| </div> | |
| <div class="glass-panel p-3 rounded-lg hover:bg-cyan-900/20 cursor-pointer transition group"> | |
| <i data-lucide="file-text" class="w-8 h-8 text-yellow-400 mb-2 group-hover:scale-110 transition"></i> | |
| <div class="text-xs text-gray-300 truncate">Weaponizer.txt</div> | |
| <div class="text-[10px] text-gray-500">15 KB</div> | |
| </div> | |
| <div class="glass-panel p-3 rounded-lg hover:bg-cyan-900/20 cursor-pointer transition group"> | |
| <i data-lucide="file-archive" class="w-8 h-8 text-red-400 mb-2 group-hover:scale-110 transition"></i> | |
| <div class="text-xs text-gray-300 truncate">m3th4mph3t4m1n3.zip</div> | |
| <div class="text-[10px] text-gray-500">45 MB</div> | |
| </div> | |
| <div class="glass-panel p-3 rounded-lg hover:bg-cyan-900/20 cursor-pointer transition group"> | |
| <i data-lucide="key" class="w-8 h-8 text-green-400 mb-2 group-hover:scale-110 transition"></i> | |
| <div class="text-xs text-gray-300 truncate">keys.asc</div> | |
| <div class="text-[10px] text-gray-500">4 KB</div> | |
| </div> | |
| <div class="glass-panel p-3 rounded-lg hover:bg-cyan-900/20 cursor-pointer transition group"> | |
| <i data-lucide="database" class="w-8 h-8 text-purple-400 mb-2 group-hover:scale-110 transition"></i> | |
| <div class="text-xs text-gray-300 truncate">passwords.db</div> | |
| <div class="text-[10px] text-gray-500">Encrypted</div> | |
| </div> | |
| <div class="glass-panel p-3 rounded-lg hover:bg-cyan-900/20 cursor-pointer transition group border-pink-500/30"> | |
| <i data-lucide="globe" class="w-8 h-8 text-pink-400 mb-2 group-hover:scale-110 transition"></i> | |
| <div class="text-xs text-gray-300 truncate">PornHub.com</div> | |
| <div class="text-[10px] text-gray-500">Shortcut</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Hack Tools Window --> | |
| <div id="window-hacktools" class="window glass-strong pointer-events-auto hidden" style="top: 20%; left: 30%; width: 600px; height: 500px; z-index: 30;"> | |
| <div class="window-header flex items-center justify-between px-4 py-2 select-none" onmousedown="startDrag(event, 'window-hacktools')"> | |
| <div class="flex items-center gap-2"> | |
| <i data-lucide="shield-alert" class="w-4 h-4 text-red-400"></i> | |
| <span class="text-sm font-medium text-red-100">Hack Tools v3.1.4</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <span class="text-xs text-red-400 font-mono mr-2 animate-pulse">[Encrypted Connection Active]</span> | |
| <div class="window-btn btn-min" onclick="minimizeWindow('hacktools')"></div> | |
| <div class="window-btn btn-max" onclick="maximizeWindow('hacktools')"></div> | |
| <div class="window-btn btn-close" onclick="closeWindow('hacktools')"></div> | |
| </div> | |
| </div> | |
| <div class="p-6 h-[calc(100%-40px)] overflow-auto bg-black/40"> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="glass-panel p-4 rounded-lg hover:bg-red-900/10 cursor-pointer transition group border border-transparent hover:border-red-500/30"> | |
| <div class="flex items-center gap-3 mb-2"> | |
| <div class="p-2 bg-red-500/20 rounded-lg"> | |
| <i data-lucide="scan-line" class="w-5 h-5 text-red-400"></i> | |
| </div> | |
| <div class="font-semibold text-red-100">Port Scanner</div> | |
| </div> | |
| <div class="text-xs text-gray-400">Scan for open ports and services</div> | |
| </div> | |
| <div class="glass-panel p-4 rounded-lg hover:bg-orange-900/10 cursor-pointer transition group border border-transparent hover:border-orange-500/30"> | |
| <div class="flex items-center gap-3 mb-2"> | |
| <div class="p-2 bg-orange-500/20 rounded-lg"> | |
| <i data-lucide="hammer" class="w-5 h-5 text-orange-400"></i> | |
| </div> | |
| <div class="font-semibold text-orange-100">Brute Force</div> | |
| </div> | |
| <div class="text-xs text-gray-400">Password cracking utility</div> | |
| </div> | |
| <div class="glass-panel p-4 rounded-lg hover:bg-blue-900/10 cursor-pointer transition group border border-transparent hover:border-blue-500/30"> | |
| <div class="flex items-center gap-3 mb-2"> | |
| <div class="p-2 bg-blue-500/20 rounded-lg"> | |
| <i data-lucide="database" class="w-5 h-5 text-blue-400"></i> | |
| </div> | |
| <div class="font-semibold text-blue-100">SQL Inject</div> | |
| </div> | |
| <div class="text-xs text-gray-400">Database penetration tool</div> | |
| </div> | |
| <div class="glass-panel p-4 rounded-lg hover:bg-purple-900/10 cursor-pointer transition group border border-transparent hover:border-purple-500/30"> | |
| <div class="flex items-center gap-3 mb-2"> | |
| <div class="p-2 bg-purple-500/20 rounded-lg"> | |
| <i data-lucide="git-compare" class="w-5 h-5 text-purple-400"></i> | |
| </div> | |
| <div class="font-semibold text-purple-100">MITM</div> | |
| </div> | |
| <div class="text-xs text-gray-400">Man-in-the-middle attack</div> | |
| </div> | |
| <div class="glass-panel p-4 rounded-lg hover:bg-yellow-900/10 cursor-pointer transition group border border-transparent hover:border-yellow-500/30"> | |
| <div class="flex items-center gap-3 mb-2"> | |
| <div class="p-2 bg-yellow-500/20 rounded-lg"> | |
| <i data-lucide="bug" class="w-5 h-5 text-yellow-400"></i> | |
| </div> | |
| <div class="font-semibold text-yellow-100">Exploit DB</div> | |
| </div> | |
| <div class="text-xs text-gray-400">Vulnerability database</div> | |
| </div> | |
| <div class="glass-panel p-4 rounded-lg hover:bg-green-900/10 cursor-pointer transition group border border-transparent hover:border-green-500/30"> | |
| <div class="flex items-center gap-3 mb-2"> | |
| <div class="p-2 bg-green-500/20 rounded-lg"> | |
| <i data-lucide="user-x" class="w-5 h-5 text-green-400"></i> | |
| </div> | |
| <div class="font-semibold text-green-100">Anonymizer</div> | |
| </div> | |
| <div class="text-xs text-gray-400">TOR/VPN configuration</div> | |
| </div> | |
| </div> | |
| <div class="mt-6 p-4 glass-panel rounded-lg border border-red-500/20"> | |
| <div class="flex items-center gap-2 text-red-400 text-sm font-mono mb-2"> | |
| <i data-lucide="activity" class="w-4 h-4 animate-pulse"></i> | |
| <span>SYSTEM STATUS: ARMED</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2 overflow-hidden"> | |
| <div class="bg-gradient-to-r from-red-500 to-orange-500 h-full w-[78%] animate-pulse"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-500 mt-1 font-mono"> | |
| <span>Threat Level: HIGH</span> | |
| <span>78%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Network Window --> | |
| <div id="window-network" class="window glass-strong pointer-events-auto hidden" style="top: 25%; left: 15%; width: 700px; height: 550px; z-index: 40;"> | |
| <div class="window-header flex items-center justify-between px-4 py-2 select-none" onmousedown="startDrag(event, 'window-network')"> | |
| <div class="flex items-center gap-2"> | |
| <i data-lucide="network" class="w-4 h-4 text-green-400"></i> | |
| <span class="text-sm font-medium text-green-100">Network Monitor</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <span class="text-xs text-green-400 font-mono mr-2 animate-pulse">12 active connections</span> | |
| <div class="window-btn btn-min" onclick="minimizeWindow('network')"></div> | |
| <div class="window-btn btn-max" onclick="maximizeWindow('network')"></div> | |
| <div class="window-btn btn-close" onclick="closeWindow('network')"></div> | |
| </div> | |
| </div> | |
| <div class="flex flex-col h-[calc(100%-40px)] bg-black/40"> | |
| <div class="p-4 border-b border-cyan-900/30"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="text-xs text-gray-400 uppercase tracking-wider">Bandwidth Usage</div> | |
| <div class="font-mono text-green-400"> | |
| <span id="download-speed">3.7</span> MB/s ↓ | <span id="upload-speed">1.2</span> MB/s ↑ | |
| </div> | |
| </div> | |
| <div class="flex gap-1 h-16"> | |
| <!-- Simulated graph bars --> | |
| <div class="flex-1 bg-green-500/20 rounded-sm relative overflow-hidden"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-green-500/60 transition-all duration-500" style="height: 45%"></div> | |
| </div> | |
| <div class="flex-1 bg-green-500/20 rounded-sm relative overflow-hidden"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-green-500/60 transition-all duration-500" style="height: 72%"></div> | |
| </div> | |
| <div class="flex-1 bg-green-500/20 rounded-sm relative overflow-hidden"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-green-500/60 transition-all duration-500" style="height: 30%"></div> | |
| </div> | |
| <div class="flex-1 bg-green-500/20 rounded-sm relative overflow-hidden"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-green-500/60 transition-all duration-500" style="height: 85%"></div> | |
| </div> | |
| <div class="flex-1 bg-green-500/20 rounded-sm relative overflow-hidden"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-green-500/60 transition-all duration-500" style="height: 55%"></div> | |
| </div> | |
| <div class="flex-1 bg-green-500/20 rounded-sm relative overflow-hidden"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-green-500/60 transition-all duration-500" style="height: 40%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <div class="w-1/2 p-4 border-r border-cyan-900/30 overflow-auto"> | |
| <div class="text-xs text-gray-400 uppercase tracking-wider mb-3">Active Connections</div> | |
| <div class="space-y-2 font-mono text-xs"> | |
| <div class="flex items-center justify-between p-2 glass-panel rounded hover:bg-cyan-900/20 transition cursor-pointer"> | |
| <span class="text-cyan-300">192.168.1.1:443</span> | |
| <span class="text-green-400 text-[10px]">ENCRYPTED</span> | |
| </div> | |
| <div class="flex items-center justify-between p-2 glass-panel rounded hover:bg-cyan-900/20 transition cursor-pointer"> | |
| <span class="text-cyan-300">104.18.25.36:80</span> | |
| <span class="text-yellow-400 text-[10px]">UNSECURED</span> | |
| </div> | |
| <div class="flex items-center justify-between p-2 glass-panel rounded hover:bg-cyan-900/20 transition cursor-pointer border border-red-500/30"> | |
| <span class="text-cyan-300">74.91.123.45:3306</span> | |
| <span class="text-red-400 text-[10px] animate-pulse">VULNERABLE</span> | |
| </div> | |
| <div class="flex items-center justify-between p-2 glass-panel rounded hover:bg-cyan-900/20 transition cursor-pointer"> | |
| <span class="text-cyan-300">192.168.1.105:8080</span> | |
| <span class="text-green-400 text-[10px]">LOCAL</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w-1/2 p-4 overflow-auto font-mono text-xs"> | |
| <div class="text-xs text-gray-400 uppercase tracking-wider mb-3">Network Map</div> | |
| <div class="space-y-3"> | |
| <div class="flex items-start gap-2"> | |
| <i data-lucide="corner-down-right" class="w-4 h-4 text-cyan-600 mt-1"></i> | |
| <div> | |
| <div class="text-cyan-400">[YOU] 192.168.1.105</div> | |
| <div class="flex items-start gap-2 mt-1 ml-4"> | |
| <i data-lucide="corner-down-right" class="w-4 h-4 text-cyan-600 mt-1"></i> | |
| <div> | |
| <div class="text-cyan-300">Router 192.168.1.1</div> | |
| <div class="flex items-start gap-2 mt-1 ml-4 flex-col"> | |
| <div class="flex items-center gap-2"> | |
| <i data-lucide="minus" class="w-4 h-4 text-cyan-600"></i> | |
| <span class="text-gray-400">Device 192.168.1.102 (Mobile)</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <i data-lucide="minus" class="w-4 h-4 text-cyan-600"></i> | |
| <span class="text-gray-400">Device 192.168.1.103 (Laptop)</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start gap-2 mt-1 ml-4"> | |
| <i data-lucide="corner-down-right" class="w-4 h-4 text-purple-600 mt-1"></i> | |
| <div class="text-purple-400">[TOR Exit Node] 74.125.24.102</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Browser Window --> | |
| <div id="window-browser" class="window glass-strong pointer-events-auto hidden" style="top: 10%; left: 20%; width: 800px; height: 800px; z-index: 50;"> | |
| <div class="window-header flex items-center justify-between px-4 py-2 select-none" onmousedown="startDrag(event, 'window-browser')"> | |
| <div class="flex items-center gap-2"> | |
| <i data-lucide="globe" class="w-4 h-4 text-purple-400"></i> | |
| <span class="text-sm font-medium text-purple-100">Xortron Browser</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <span class="text-xs text-purple-400 font-mono mr-2 flex items-center gap-1"> | |
| <span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span> | |
| [Secure Connection] | |
| </span> | |
| <div class="window-btn btn-min" onclick="minimizeWindow('browser')"></div> | |
| <div class="window-btn btn-max" onclick="maximizeWindow('browser')"></div> | |
| <div class="window-btn btn-close" onclick="closeWindow('browser')"></div> | |
| </div> | |
| </div> | |
| <div class="flex flex-col h-[calc(100%-40px)] bg-gray-900"> | |
| <div class="flex items-center gap-2 p-2 bg-gray-800/50 border-b border-gray-700"> | |
| <div class="flex gap-1"> | |
| <button class="p-1 hover:bg-gray-700 rounded text-gray-400" onclick="browserBack()"><i data-lucide="arrow-left" class="w-4 h-4"></i></button> | |
| <button class="p-1 hover:bg-gray-700 rounded text-gray-400" onclick="browserForward()"><i data-lucide="arrow-right" class="w-4 h-4"></i></button> | |
| <button class="p-1 hover:bg-gray-700 rounded text-gray-400" onclick="browserRefresh()"><i data-lucide="refresh-cw" class="w-4 h-4"></i></button> | |
| </div> | |
| <div class="flex-1 flex items-center gap-2 bg-gray-800 rounded-lg px-3 py-1 border border-gray-700"> | |
| <i data-lucide="lock" class="w-3 h-3 text-green-400"></i> | |
| <input type="text" id="browser-url" value="https://darkc0de-chat.hf.space/?__theme=dark" class="bg-transparent border-none outline-none text-sm text-gray-300 flex-1 font-mono" onkeydown="if(event.key==='Enter')browserNavigate()"> | |
| <button onclick="browserNavigate()" class="p-1 hover:bg-gray-700 rounded text-gray-400"> | |
| <i data-lucide="search" class="w-3 h-3"></i> | |
| </button> | |
| </div> | |
| <div class="flex gap-1"> | |
| <button class="p-1 hover:bg-gray-700 rounded text-gray-400" onclick="browserHome()"><i data-lucide="home" class="w-4 h-4"></i></button> | |
| </div> | |
| </div> | |
| <div class="flex-1 relative bg-black/40 overflow-hidden"> | |
| <iframe id="browser-frame" src="https://darkc0de-chat.hf.space/?__theme=dark" class="w-full h-full border-none" sandbox="allow-scripts allow-same-origin allow-forms allow-popups"></iframe> | |
| <div id="browser-loading" class="absolute inset-0 bg-gray-900/90 flex items-center justify-center hidden"> | |
| <div class="flex flex-col items-center gap-3"> | |
| <div class="w-12 h-12 border-4 border-purple-500/30 border-t-purple-400 rounded-full animate-spin"></div> | |
| <span class="text-purple-400 font-mono text-sm">Loading...</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Calculator Window --> | |
| <div id="window-calculator" class="window glass-strong pointer-events-auto hidden" style="top: 20%; left: 40%; width: 320px; height: 480px; z-index: 60;"> | |
| <div class="window-header flex items-center justify-between px-4 py-2 select-none" onmousedown="startDrag(event, 'window-calculator')"> | |
| <div class="flex items-center gap-2"> | |
| <i data-lucide="calculator" class="w-4 h-4 text-pink-400"></i> | |
| <span class="text-sm font-medium text-pink-100">Xortron-Calc</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <span class="text-xs text-gray-400 font-mono mr-2">v1.0</span> | |
| <div class="window-btn btn-min" onclick="minimizeWindow('calculator')"></div> | |
| <div class="window-btn btn-max" onclick="maximizeWindow('calculator')"></div> | |
| <div class="window-btn btn-close" onclick="closeWindow('calculator')"></div> | |
| </div> | |
| </div> | |
| <div class="flex flex-col h-[calc(100%-40px)] bg-black/60 p-4"> | |
| <div class="bg-gray-900/80 rounded-lg p-4 mb-4 border border-pink-500/20"> | |
| <div id="calc-history" class="text-xs text-gray-500 font-mono text-right mb-1 h-4"></div> | |
| <div id="calc-display" class="text-3xl text-pink-100 font-mono text-right truncate">0</div> | |
| </div> | |
| <div class="grid grid-cols-4 gap-2 flex-1"> | |
| <button onclick="calcClear()" class="bg-red-500/20 hover:bg-red-500/30 text-red-400 rounded-lg font-semibold transition border border-red-500/30">C</button> | |
| <button onclick="calcOperator('(')" class="glass-panel hover:bg-pink-900/20 text-pink-300 rounded-lg font-semibold transition">(</button> | |
| <button onclick="calcOperator(')')" class="glass-panel hover:bg-pink-900/20 text-pink-300 rounded-lg font-semibold transition">)</button> | |
| <button onclick="calcOperator('/')" class="bg-pink-500/20 hover:bg-pink-500/30 text-pink-400 rounded-lg font-semibold transition border border-pink-500/30">÷</button> | |
| <button onclick="calcNumber('7')" class="glass-panel hover:bg-gray-700/50 text-gray-200 rounded-lg font-semibold transition text-lg">7</button> | |
| <button onclick="calcNumber('8')" class="glass-panel hover:bg-gray-700/50 text-gray-200 rounded-lg font-semibold transition text-lg">8</button> | |
| <button onclick="calcNumber('9')" class="glass-panel hover:bg-gray-700/50 text-gray-200 rounded-lg font-semibold transition text-lg">9</button> | |
| <button onclick="calcOperator('*')" class="bg-pink-500/20 hover:bg-pink-500/30 text-pink-400 rounded-lg font-semibold transition border border-pink-500/30">×</button> | |
| <button onclick="calcNumber('4')" class="glass-panel hover:bg-gray-700/50 text-gray-200 rounded-lg font-semibold transition text-lg">4</button> | |
| <button onclick="calcNumber('5')" class="glass-panel hover:bg-gray-700/50 text-gray-200 rounded-lg font-semibold transition text-lg">5</button> | |
| <button onclick="calcNumber('6')" class="glass-panel hover:bg-gray-700/50 text-gray-200 rounded-lg font-semibold transition text-lg">6</button> | |
| <button onclick="calcOperator('-')" class="bg-pink-500/20 hover:bg-pink-500/30 text-pink-400 rounded-lg font-semibold transition border border-pink-500/30">-</button> | |
| <button onclick="calcNumber('1')" class="glass-panel hover:bg-gray-700/50 text-gray-200 rounded-lg font-semibold transition text-lg">1</button> | |
| <button onclick="calcNumber('2')" class="glass-panel hover:bg-gray-700/50 text-gray-200 rounded-lg font-semibold transition text-lg">2</button> | |
| <button onclick="calcNumber('3')" class="glass-panel hover:bg-gray-700/50 text-gray-200 rounded-lg font-semibold transition text-lg">3</button> | |
| <button onclick="calcOperator('+')" class="bg-pink-500/20 hover:bg-pink-500/30 text-pink-400 rounded-lg font-semibold transition border border-pink-500/30">+</button> | |
| <button onclick="calcNumber('0')" class="glass-panel hover:bg-gray-700/50 text-gray-200 rounded-lg font-semibold transition text-lg col-span-2">0</button> | |
| <button onclick="calcNumber('.')" class="glass-panel hover:bg-gray-700/50 text-gray-200 rounded-lg font-semibold transition text-lg">.</button> | |
| <button onclick="calcEquals()" class="bg-pink-500 hover:bg-pink-400 text-white rounded-lg font-bold transition text-xl shadow-lg shadow-pink-500/30">=</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Master Spec Window --> | |
| <div id="window-spec" class="window glass-strong pointer-events-auto hidden" style="top: 5%; left: 15%; width: 1200px; height: 800px; z-index: 55;"> | |
| <div class="window-header flex items-center justify-between px-4 py-2 select-none" onmousedown="startDrag(event, 'window-spec')"> | |
| <div class="flex items-center gap-2"> | |
| <i data-lucide="book-open" class="w-4 h-4 text-red-400"></i> | |
| <span class="text-sm font-medium text-red-100">Xortron Master Spec</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <span class="text-xs text-red-400 font-mono mr-2 flex items-center gap-1"> | |
| <span class="w-2 h-2 bg-red-400 rounded-full animate-pulse"></span> | |
| [Classified Document] | |
| </span> | |
| <div class="window-btn btn-min" onclick="minimizeWindow('spec')"></div> | |
| <div class="window-btn btn-max" onclick="maximizeWindow('spec')"></div> | |
| <div class="window-btn btn-close" onclick="closeWindow('spec')"></div> | |
| </div> | |
| </div> | |
| <div class="flex-1 relative bg-black/40 overflow-hidden h-[calc(100%-40px)] rounded-b-lg"> | |
| <iframe src="indexfile.html" class="w-full h-full border-none" sandbox="allow-scripts allow-same-origin allow-forms allow-popups"></iframe> | |
| </div> | |
| </div> | |
| <!-- Xor's Favs Window --> | |
| <div id="window-favs" class="window glass-strong pointer-events-auto hidden" style="top: 8%; left: 18%; width: 500px; height: 700px; z-index: 56;"> | |
| <div class="window-header flex items-center justify-between px-4 py-2 select-none" onmousedown="startDrag(event, 'window-favs')"> | |
| <div class="flex items-center gap-2"> | |
| <i data-lucide="star" class="w-4 h-4 text-yellow-400"></i> | |
| <span class="text-sm font-medium text-yellow-100">Xor's Favorites</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <span class="text-xs text-yellow-400 font-mono mr-2 flex items-center gap-1"> | |
| <span class="w-2 h-2 bg-yellow-400 rounded-full animate-pulse"></span> | |
| [Saved Bookmarks] | |
| </span> | |
| <div class="window-btn btn-min" onclick="minimizeWindow('favs')"></div> | |
| <div class="window-btn btn-max" onclick="maximizeWindow('favs')"></div> | |
| <div class="window-btn btn-close" onclick="closeWindow('favs')"></div> | |
| </div> | |
| </div> | |
| <div class="flex-1 relative bg-black/40 overflow-hidden h-[calc(100%-40px)] rounded-b-lg"> | |
| <iframe src="bookmarks.html" class="w-full h-full border-none" sandbox="allow-scripts allow-same-origin allow-forms allow-popups"></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- System Alert Notification (Hidden by default until boot completes) --> | |
| <div id="system-alert" class="fixed top-4 right-4 glass-strong p-4 rounded-lg border-l-4 border-cyan-400 max-w-sm z-[1000] notification pointer-events-auto cursor-pointer" style="display: none;" onclick="this.style.display='none'"> | |
| <div class="flex items-start gap-3"> | |
| <i data-lucide="info" class="w-5 h-5 text-cyan-400 mt-0.5"></i> | |
| <div> | |
| <div class="font-semibold text-cyan-100 mb-1">System Alert</div> | |
| <div class="text-sm text-gray-300">Welcome to XortronOS. Systems online.</div> | |
| </div> | |
| <button class="ml-auto text-gray-400 hover:text-white" onclick="document.getElementById('system-alert').style.display='none'; event.stopPropagation();"> | |
| <i data-lucide="x" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Taskbar --> | |
| <div class="taskbar fixed bottom-0 left-0 right-0 h-14 flex items-center px-4 gap-4 z-[999]"> | |
| <div class="flex items-center gap-2 mr-4"> | |
| <button class="w-10 h-10 rounded-lg bg-cyan-500/20 hover:bg-cyan-500/30 flex items-center justify-center transition border border-cyan-500/30" onclick="toggleStartMenu()"> | |
| <i data-lucide="grid" class="w-5 h-5 text-cyan-400"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center gap-2 flex-1" id="taskbar-apps"> | |
| <button class="taskbar-icon w-10 h-10 rounded-lg flex items-center justify-center" onclick="openWindow('terminal')" id="taskbar-terminal"> | |
| <i data-lucide="terminal" class="w-5 h-5 text-cyan-400"></i> | |
| </button> | |
| <button class="taskbar-icon w-10 h-10 rounded-lg flex items-center justify-center" onclick="openWindow('files')" id="taskbar-files"> | |
| <i data-lucide="folder-open" class="w-5 h-5 text-yellow-400"></i> | |
| </button> | |
| <button class="taskbar-icon w-10 h-10 rounded-lg flex items-center justify-center" onclick="openWindow('hacktools')" id="taskbar-hacktools"> | |
| <i data-lucide="shield-alert" class="w-5 h-5 text-red-400"></i> | |
| </button> | |
| <button class="taskbar-icon w-10 h-10 rounded-lg flex items-center justify-center" onclick="openWindow('network')" id="taskbar-network"> | |
| <i data-lucide="network" class="w-5 h-5 text-green-400"></i> | |
| </button> | |
| <button class="taskbar-icon w-10 h-10 rounded-lg flex items-center justify-center" onclick="openWindow('browser')" id="taskbar-browser"> | |
| <i data-lucide="globe" class="w-5 h-5 text-purple-400"></i> | |
| </button> | |
| <button class="taskbar-icon w-10 h-10 rounded-lg flex items-center justify-center" onclick="openWindow('calculator')" id="taskbar-calculator"> | |
| <i data-lucide="calculator" class="w-5 h-5 text-pink-400"></i> | |
| </button> | |
| <button class="taskbar-icon w-10 h-10 rounded-lg flex items-center justify-center" onclick="openWindow('spec')" id="taskbar-spec"> | |
| <i data-lucide="book-open" class="w-5 h-5 text-red-400"></i> | |
| </button> | |
| <button class="taskbar-icon w-10 h-10 rounded-lg flex items-center justify-center" onclick="openWindow('favs')" id="taskbar-favs"> | |
| <i data-lucide="star" class="w-5 h-5 text-yellow-400"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center gap-4 px-4 py-2 glass-panel rounded-lg"> | |
| <div class="flex items-center gap-2 text-xs font-mono"> | |
| <span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span> | |
| <span class="text-green-400">VPN:ON</span> | |
| </div> | |
| <div class="w-px h-4 bg-gray-600"></div> | |
| <div class="text-xs font-mono text-gray-300" id="clock">03:57 AM</div> | |
| <div class="text-xs text-gray-500" id="date">Wed, Mar 18</div> | |
| </div> | |
| </div> | |
| <!-- Start Menu (Hidden by default) --> | |
| <div id="start-menu" class="fixed bottom-16 left-4 w-64 glass-strong rounded-xl border border-cyan-500/20 shadow-2xl transform translate-y-4 opacity-0 pointer-events-none transition-all duration-200 z-[998]"> | |
| <div class="p-4 border-b border-cyan-900/30"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center"> | |
| <i data-lucide="user" class="w-5 h-5 text-white"></i> | |
| </div> | |
| <div> | |
| <div class="font-semibold text-cyan-100">root</div> | |
| <div class="text-xs text-gray-400">Administrator</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-2 space-y-1 max-h-80 overflow-y-auto"> | |
| <button class="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-cyan-900/20 transition text-left text-sm text-gray-300" onclick="openWindow('terminal'); toggleStartMenu()"> | |
| <i data-lucide="terminal" class="w-4 h-4 text-cyan-400"></i> Terminal | |
| </button> | |
| <button class="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-cyan-900/20 transition text-left text-sm text-gray-300" onclick="openWindow('files'); toggleStartMenu()"> | |
| <i data-lucide="folder" class="w-4 h-4 text-yellow-400"></i> Files | |
| </button> | |
| <button class="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-red-900/20 transition text-left text-sm text-gray-300" onclick="openWindow('hacktools'); toggleStartMenu()"> | |
| <i data-lucide="shield-alert" class="w-4 h-4 text-red-400"></i> Hack Tools | |
| </button> | |
| <button class="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-green-900/20 transition text-left text-sm text-gray-300" onclick="openWindow('network'); toggleStartMenu()"> | |
| <i data-lucide="network" class="w-4 h-4 text-green-400"></i> Network | |
| </button> | |
| <button class="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-purple-900/20 transition text-left text-sm text-gray-300" onclick="openWindow('browser'); toggleStartMenu()"> | |
| <i data-lucide="globe" class="w-4 h-4 text-purple-400"></i> Xortron Chat | |
| </button> | |
| <button class="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-pink-900/20 transition text-left text-sm text-gray-300" onclick="openWindow('calculator'); toggleStartMenu()"> | |
| <i data-lucide="calculator" class="w-4 h-4 text-pink-400"></i> Calculator | |
| </button> | |
| <button class="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-red-900/20 transition text-left text-sm text-gray-300" onclick="openWindow('spec'); toggleStartMenu()"> | |
| <i data-lucide="book-open" class="w-4 h-4 text-red-400"></i> Master Spec | |
| </button> | |
| <button class="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-yellow-900/20 transition text-left text-sm text-gray-300" onclick="openWindow('favs'); toggleStartMenu()"> | |
| <i data-lucide="star" class="w-4 h-4 text-yellow-400"></i> Xor's Favs | |
| </button> | |
| <div class="border-t border-cyan-900/30 my-2"></div> | |
| <a href="https://ko-fi.com/Z8Z51E5TIG" target="_blank" class="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-orange-900/20 transition text-left text-sm text-gray-300 no-underline" onclick="toggleStartMenu()"> | |
| <i data-lucide="coffee" class="w-4 h-4 text-orange-400"></i> Buy me a coffee | |
| </a> | |
| <a href="https://huggingface.co/darkc0de" target="_blank" class="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-yellow-900/20 transition text-left text-sm text-gray-300 no-underline" onclick="toggleStartMenu()"> | |
| <i data-lucide="smile" class="w-4 h-4 text-yellow-400"></i> Visit the Dev on HF | |
| </a> | |
| </div> | |
| <div class="p-2 border-t border-cyan-900/30"> | |
| <button class="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-red-900/20 transition text-left text-sm text-red-400"> | |
| <i data-lucide="power" class="w-4 h-4"></i> Shutdown | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Lucide icons | |
| lucide.createIcons(); | |
| // ----------------------------- | |
| // BOOT SEQUENCE LOGIC | |
| // ----------------------------- | |
| const bootLogData = [ | |
| "XORTRON BIOS (C) 2026 Xortron Industries", | |
| "Checking base memory... 64000K OK", | |
| "Checking extended memory... 4096000K OK", | |
| "Loading XortronOS Kernel v7.7.7-arch1-1...", | |
| "INIT: version 2.88 booting", | |
| "Mounting /root/fs... [OK]", | |
| "Checking encrypted partitions... [VERIFIED]", | |
| "Loading hardware modules...", | |
| " > CPU microcode loaded.", | |
| " > GPU drivers initialized.", | |
| " > Neural-link interface [OK]", | |
| "Initializing network interfaces... eth0[UP] wlan0[UP]", | |
| "Establishing secure connection to mainframe...", | |
| "Bypassing internal firewalls... [SUCCESS]", | |
| "Injecting stealth payload into kernel ring-0...", | |
| "Starting system message bus... [OK]", | |
| "Starting Xortron GUI Server...", | |
| "System check complete. Booting GUI..." | |
| ]; | |
| async function runBootSequence() { | |
| const logsContainer = document.getElementById('boot-logs'); | |
| const logsWrapper = document.getElementById('boot-logs-container'); | |
| const splash = document.getElementById('boot-splash'); | |
| const title = document.getElementById('glitch-title'); | |
| const progressBar = document.getElementById('boot-progress-bar'); | |
| const progressPercent = document.getElementById('boot-percent'); | |
| const statusText = document.getElementById('boot-status-text'); | |
| const bootScreen = document.getElementById('boot-screen'); | |
| // 1. Text Typing Phase (~900ms) | |
| for (let i = 0; i < bootLogData.length; i++) { | |
| const line = document.createElement('div'); | |
| line.textContent = `> ${bootLogData[i]}`; | |
| logsContainer.appendChild(line); | |
| logsWrapper.scrollTop = logsWrapper.scrollHeight; | |
| // Very fast terminal speed | |
| const delay = Math.floor(Math.random() * 30) + 10; | |
| await new Promise(r => setTimeout(r, delay)); | |
| } | |
| await new Promise(r => setTimeout(r, 200)); | |
| // 2. Splash Screen Phase (~2 seconds) | |
| logsContainer.style.display = 'none'; | |
| splash.classList.remove('hidden'); | |
| title.classList.add('glitch-anim'); | |
| const statuses = ["Mounting Drives...", "Decrypting...", "Starting Services...", "Launching GUI..."]; | |
| let progress = 0; | |
| // Fixed loop condition so it never hangs | |
| while (progress < 100) { | |
| progress += Math.floor(Math.random() * 15) + 5; // Fast chunks | |
| if (progress > 100) progress = 100; | |
| progressBar.style.width = `${progress}%`; | |
| progressPercent.textContent = `${progress}%`; | |
| if (progress >= 25 && progress < 60) statusText.textContent = statuses[1]; | |
| if (progress >= 60 && progress < 90) statusText.textContent = statuses[2]; | |
| if (progress >= 90) statusText.textContent = statuses[3]; | |
| await new Promise(r => setTimeout(r, Math.random() * 60 + 20)); | |
| } | |
| await new Promise(r => setTimeout(r, 400)); // Hold briefly on 100% | |
| // 3. Fade Out (800ms) | |
| title.classList.remove('glitch-anim'); | |
| bootScreen.classList.add('fade-out-os'); | |
| // 4. Trigger Desktop initialization after fade | |
| setTimeout(() => { | |
| bootScreen.remove(); | |
| document.getElementById('system-alert').style.display = 'flex'; | |
| openWindow('browser'); | |
| }, 800); | |
| } | |
| // Failsafe Timeout: GUARANTEES desktop loads no matter what in exactly 5.5 seconds. | |
| setTimeout(() => { | |
| const bootScreen = document.getElementById('boot-screen'); | |
| if(bootScreen && bootScreen.parentNode) { | |
| bootScreen.remove(); | |
| document.getElementById('system-alert').style.display = 'flex'; | |
| const browserWin = document.getElementById('window-browser'); | |
| if(browserWin && browserWin.classList.contains('hidden')) { | |
| openWindow('browser'); | |
| } | |
| } | |
| }, 5500); | |
| // Run boot sequence as soon as script runs | |
| runBootSequence(); | |
| // ----------------------------- | |
| // DESKTOP SYSTEM LOGIC | |
| // ----------------------------- | |
| // Clock functionality | |
| function updateClock() { | |
| const now = new Date(); | |
| const timeStr = now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }); | |
| const dateStr = now.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' }); | |
| document.getElementById('clock').textContent = timeStr; | |
| document.getElementById('date').textContent = dateStr; | |
| } | |
| setInterval(updateClock, 1000); | |
| updateClock(); | |
| // Window Management | |
| let activeWindow = null; | |
| let zIndexCounter = 100; | |
| let isDragging = false; | |
| let dragOffset = { x: 0, y: 0 }; | |
| let draggedWindow = null; | |
| function openWindow(windowId) { | |
| const window = document.getElementById(`window-${windowId}`); | |
| const taskbarBtn = document.getElementById(`taskbar-${windowId}`); | |
| if (window.classList.contains('hidden')) { | |
| window.classList.remove('hidden'); | |
| window.style.zIndex = ++zIndexCounter; | |
| window.classList.add('active'); | |
| // Update taskbar | |
| if (taskbarBtn) taskbarBtn.classList.add('active'); | |
| // Animate opening | |
| window.style.transform = 'scale(0.9)'; | |
| window.style.opacity = '0'; | |
| setTimeout(() => { | |
| window.style.transform = 'scale(1)'; | |
| window.style.opacity = '1'; | |
| }, 10); | |
| } else { | |
| // If already open, just focus it | |
| focusWindow(windowId); | |
| } | |
| activeWindow = windowId; | |
| } | |
| function closeWindow(windowId) { | |
| const window = document.getElementById(`window-${windowId}`); | |
| const taskbarBtn = document.getElementById(`taskbar-${windowId}`); | |
| window.style.transform = 'scale(0.9)'; | |
| window.style.opacity = '0'; | |
| setTimeout(() => { | |
| window.classList.add('hidden'); | |
| window.classList.remove('active'); | |
| if (taskbarBtn) taskbarBtn.classList.remove('active'); | |
| }, 200); | |
| } | |
| function minimizeWindow(windowId) { | |
| const window = document.getElementById(`window-${windowId}`); | |
| const taskbarBtn = document.getElementById(`taskbar-${windowId}`); | |
| window.style.transform = 'translateY(100vh) scale(0.8)'; | |
| window.style.opacity = '0'; | |
| setTimeout(() => { | |
| window.classList.add('hidden'); | |
| window.classList.remove('active'); | |
| window.style.transform = ''; | |
| if (taskbarBtn) taskbarBtn.classList.remove('active'); | |
| }, 200); | |
| } | |
| function maximizeWindow(windowId) { | |
| const window = document.getElementById(`window-${windowId}`); | |
| if (window.dataset.maximized === 'true') { | |
| // Restore | |
| window.style.width = window.dataset.prevWidth; | |
| window.style.height = window.dataset.prevHeight; | |
| window.style.top = window.dataset.prevTop; | |
| window.style.left = window.dataset.prevLeft; | |
| window.dataset.maximized = 'false'; | |
| } else { | |
| // Maximize | |
| window.dataset.prevWidth = window.style.width; | |
| window.dataset.prevHeight = window.style.height; | |
| window.dataset.prevTop = window.style.top; | |
| window.dataset.prevLeft = window.style.left; | |
| window.style.width = '100%'; | |
| window.style.height = 'calc(100% - 56px)'; | |
| window.style.top = '0'; | |
| window.style.left = '0'; | |
| window.dataset.maximized = 'true'; | |
| } | |
| } | |
| function focusWindow(windowId) { | |
| const window = document.getElementById(`window-${windowId}`); | |
| window.style.zIndex = ++zIndexCounter; | |
| // Remove active class from all windows | |
| document.querySelectorAll('.window').forEach(w => w.classList.remove('active')); | |
| window.classList.add('active'); | |
| } | |
| // Drag functionality | |
| function startDrag(e, windowId) { | |
| if (e.target.closest('.window-btn')) return; // Don't drag if clicking buttons | |
| const window = document.getElementById(windowId); | |
| if (window.dataset.maximized === 'true') return; // Don't drag if maximized | |
| isDragging = true; | |
| draggedWindow = window; | |
| // TEMPORARILY DISABLE IFRAMES SO THEY DON'T TRAP THE MOUSE | |
| document.querySelectorAll('iframe').forEach(iframe => { | |
| iframe.style.pointerEvents = 'none'; | |
| }); | |
| const rect = window.getBoundingClientRect(); | |
| dragOffset.x = e.clientX - rect.left; | |
| dragOffset.y = e.clientY - rect.top; | |
| focusWindow(windowId.replace('window-', '')); | |
| } | |
| document.addEventListener('mousemove', (e) => { | |
| if (!isDragging || !draggedWindow) return; | |
| let x = e.clientX - dragOffset.x; | |
| let y = e.clientY - dragOffset.y; | |
| // Keep within bounds | |
| x = Math.max(0, Math.min(x, window.innerWidth - draggedWindow.offsetWidth)); | |
| y = Math.max(0, Math.min(y, window.innerHeight - draggedWindow.offsetHeight - 56)); | |
| draggedWindow.style.left = x + 'px'; | |
| draggedWindow.style.top = y + 'px'; | |
| }); | |
| document.addEventListener('mouseup', () => { | |
| isDragging = false; | |
| draggedWindow = null; | |
| // RE-ENABLE IFRAMES | |
| document.querySelectorAll('iframe').forEach(iframe => { | |
| iframe.style.pointerEvents = 'auto'; | |
| }); | |
| }); | |
| // Add click handlers to windows for focus | |
| document.querySelectorAll('.window').forEach(window => { | |
| window.addEventListener('mousedown', () => { | |
| const id = window.id.replace('window-', ''); | |
| focusWindow(id); | |
| }); | |
| }); | |
| // Start Menu Toggle | |
| function toggleStartMenu() { | |
| const menu = document.getElementById('start-menu'); | |
| if (menu.classList.contains('opacity-0')) { | |
| menu.classList.remove('opacity-0', 'pointer-events-none', 'translate-y-4'); | |
| } else { | |
| menu.classList.add('opacity-0', 'pointer-events-none', 'translate-y-4'); | |
| } | |
| } | |
| // Close start menu when clicking outside | |
| document.addEventListener('click', (e) => { | |
| const menu = document.getElementById('start-menu'); | |
| const btn = document.querySelector('[onclick="toggleStartMenu()"]'); | |
| if (!menu.contains(e.target) && !btn.contains(e.target)) { | |
| menu.classList.add('opacity-0', 'pointer-events-none', 'translate-y-4'); | |
| } | |
| }); | |
| // Simulate network traffic | |
| setInterval(() => { | |
| const download = (Math.random() * 5 + 2).toFixed(1); | |
| const upload = (Math.random() * 2 + 0.5).toFixed(1); | |
| document.getElementById('download-speed').textContent = download; | |
| document.getElementById('upload-speed').textContent = upload; | |
| }, 3000); | |
| // Update last login time | |
| const now2 = new Date(); | |
| const loginStr = now2.toLocaleDateString() + ', ' + now2.toLocaleTimeString(); | |
| document.getElementById('last-login').textContent = loginStr; | |
| // Desktop icon selection | |
| document.querySelectorAll('.desktop-icon').forEach(icon => { | |
| icon.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| document.querySelectorAll('.desktop-icon').forEach(i => i.classList.remove('selected')); | |
| icon.classList.add('selected'); | |
| }); | |
| }); | |
| document.addEventListener('click', () => { | |
| document.querySelectorAll('.desktop-icon').forEach(i => i.classList.remove('selected')); | |
| }); | |
| // Mobile touch support for dragging | |
| let touchStartX, touchStartY; | |
| document.querySelectorAll('.window-header').forEach(header => { | |
| header.addEventListener('touchstart', (e) => { | |
| const touch = e.touches[0]; | |
| const windowId = header.parentElement.id; | |
| if (e.target.closest('.window-btn')) return; | |
| const window = document.getElementById(windowId); | |
| if (window.dataset.maximized === 'true') return; | |
| const rect = window.getBoundingClientRect(); | |
| touchStartX = touch.clientX - rect.left; | |
| touchStartY = touch.clientY - rect.top; | |
| // TEMPORARILY DISABLE IFRAMES SO THEY DON'T TRAP THE MOUSE | |
| document.querySelectorAll('iframe').forEach(iframe => { | |
| iframe.style.pointerEvents = 'none'; | |
| }); | |
| focusWindow(windowId.replace('window-', '')); | |
| }, {passive: false}); | |
| header.addEventListener('touchmove', (e) => { | |
| if (!touchStartX) return; | |
| e.preventDefault(); | |
| const touch = e.touches[0]; | |
| const windowId = header.parentElement.id; | |
| const window = document.getElementById(windowId); | |
| let x = touch.clientX - touchStartX; | |
| let y = touch.clientY - touchStartY; | |
| x = Math.max(0, Math.min(x, window.innerWidth - window.offsetWidth)); | |
| y = Math.max(0, Math.min(y, window.innerHeight - window.offsetHeight - 56)); | |
| window.style.left = x + 'px'; | |
| window.style.top = y + 'px'; | |
| }, {passive: false}); | |
| header.addEventListener('touchend', () => { | |
| touchStartX = null; | |
| touchStartY = null; | |
| // RE-ENABLE IFRAMES | |
| document.querySelectorAll('iframe').forEach(iframe => { | |
| iframe.style.pointerEvents = 'auto'; | |
| }); | |
| }); | |
| }); | |
| // Prevent zoom on double tap for mobile | |
| let lastTouchEnd = 0; | |
| document.addEventListener('touchend', (e) => { | |
| const nowTime = Date.now(); | |
| if (nowTime - lastTouchEnd <= 300) { | |
| e.preventDefault(); | |
| } | |
| lastTouchEnd = nowTime; | |
| }, false); | |
| // Browser functionality | |
| let browserHistory = ['https://darkc0de-chat.hf.space/?__theme=dark']; | |
| let browserHistoryIndex = 0; | |
| function browserNavigate() { | |
| const url = document.getElementById('browser-url').value; | |
| const frame = document.getElementById('browser-frame'); | |
| const loading = document.getElementById('browser-loading'); | |
| if (!url) return; | |
| let fullUrl = url; | |
| if (!url.startsWith('http://') && !url.startsWith('https://')) { | |
| fullUrl = 'https://' + url; | |
| } | |
| loading.classList.remove('hidden'); | |
| frame.src = fullUrl; | |
| // Update history | |
| if (browserHistoryIndex < browserHistory.length - 1) { | |
| browserHistory = browserHistory.slice(0, browserHistoryIndex + 1); | |
| } | |
| browserHistory.push(fullUrl); | |
| browserHistoryIndex++; | |
| setTimeout(() => { | |
| loading.classList.add('hidden'); | |
| }, 1000); | |
| } | |
| function browserBack() { | |
| if (browserHistoryIndex > 0) { | |
| browserHistoryIndex--; | |
| const url = browserHistory[browserHistoryIndex]; | |
| document.getElementById('browser-url').value = url; | |
| document.getElementById('browser-frame').src = url; | |
| } | |
| } | |
| function browserForward() { | |
| if (browserHistoryIndex < browserHistory.length - 1) { | |
| browserHistoryIndex++; | |
| const url = browserHistory[browserHistoryIndex]; | |
| document.getElementById('browser-url').value = url; | |
| document.getElementById('browser-frame').src = url; | |
| } | |
| } | |
| function browserRefresh() { | |
| const frame = document.getElementById('browser-frame'); | |
| const loading = document.getElementById('browser-loading'); | |
| loading.classList.remove('hidden'); | |
| frame.src = frame.src; | |
| setTimeout(() => { | |
| loading.classList.add('hidden'); | |
| }, 800); | |
| } | |
| function browserHome() { | |
| document.getElementById('browser-url').value = 'https://darkc0de-chat.hf.space/?__theme=dark'; | |
| browserNavigate(); | |
| } | |
| // Calculator functionality | |
| let calcCurrent = ''; | |
| let calcPrevious = ''; | |
| let calcOperation = null; | |
| let calcResetNext = false; | |
| function calcUpdateDisplay() { | |
| document.getElementById('calc-display').textContent = calcCurrent || '0'; | |
| document.getElementById('calc-history').textContent = calcPrevious + (calcOperation || ''); | |
| } | |
| function calcNumber(num) { | |
| if (calcResetNext) { | |
| calcCurrent = ''; | |
| calcResetNext = false; | |
| } | |
| if (num === '.' && calcCurrent.includes('.')) return; | |
| calcCurrent += num; | |
| calcUpdateDisplay(); | |
| } | |
| function calcOperator(op) { | |
| calcCurrent += op; | |
| calcUpdateDisplay(); | |
| } | |
| function calcClear() { | |
| calcCurrent = ''; | |
| calcPrevious = ''; | |
| calcOperation = null; | |
| calcResetNext = false; | |
| calcUpdateDisplay(); | |
| } | |
| function calcEquals() { | |
| try { | |
| if (!calcCurrent) return; | |
| const result = eval(calcCurrent); | |
| calcPrevious = calcCurrent; | |
| calcCurrent = String(result); | |
| calcResetNext = true; | |
| calcUpdateDisplay(); | |
| } catch (e) { | |
| calcCurrent = 'Error'; | |
| calcResetNext = true; | |
| calcUpdateDisplay(); | |
| } | |
| } | |
| // Keyboard support for calculator when window is active | |
| document.addEventListener('keydown', (e) => { | |
| const calcWindow = document.getElementById('window-calculator'); | |
| if (calcWindow.classList.contains('hidden')) return; | |
| if (!calcWindow.classList.contains('active')) return; | |
| if (e.key >= '0' && e.key <= '9') calcNumber(e.key); | |
| if (e.key === '.') calcNumber('.'); | |
| if (e.key === '+' || e.key === '-' || e.key === '*' || e.key === '/' || e.key === '(' || e.key === ')') calcOperator(e.key); | |
| if (e.key === 'Enter') calcEquals(); | |
| if (e.key === 'Escape') calcClear(); | |
| if (e.key === 'Backspace') { | |
| calcCurrent = calcCurrent.slice(0, -1); | |
| calcUpdateDisplay(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |