| <!DOCTYPE html> |
| <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; |
| } |
| |
| |
| .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; |
| } |
| |
| |
| .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 { |
| 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-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; } |
| } |
| |
| |
| .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-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 { |
| 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-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); |
| } |
| |
| |
| ::-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-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; } |
| } |
| |
| |
| @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; |
| } |
| |
| |
| @media (max-width: 768px) { |
| .window { |
| position: fixed !important; |
| top: 0 !important; |
| left: 0 !important; |
| width: 100% !important; |
| height: 100% !important; |
| border-radius: 0; |
| } |
| |
| .desktop-grid { |
| grid-template-columns: repeat(3, 1fr); |
| } |
| } |
| |
| |
| .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"> |
|
|
| |
| <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> |
|
|
| |
| <div class="desktop-bg"></div> |
|
|
| |
| <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> |
|
|
| |
| <div id="windows-container" class="absolute inset-0 pointer-events-none"> |
| |
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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"> |
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
| |
| lucide.createIcons(); |
| |
| |
| |
| |
| 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'); |
| |
| |
| for (let i = 0; i < bootLogData.length; i++) { |
| const line = document.createElement('div'); |
| line.textContent = `> ${bootLogData[i]}`; |
| logsContainer.appendChild(line); |
| logsWrapper.scrollTop = logsWrapper.scrollHeight; |
| |
| |
| const delay = Math.floor(Math.random() * 30) + 10; |
| await new Promise(r => setTimeout(r, delay)); |
| } |
| |
| await new Promise(r => setTimeout(r, 200)); |
| |
| |
| 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; |
| |
| |
| while (progress < 100) { |
| progress += Math.floor(Math.random() * 15) + 5; |
| 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)); |
| |
| |
| title.classList.remove('glitch-anim'); |
| bootScreen.classList.add('fade-out-os'); |
| |
| |
| setTimeout(() => { |
| bootScreen.remove(); |
| document.getElementById('system-alert').style.display = 'flex'; |
| openWindow('browser'); |
| }, 800); |
| } |
| |
| |
| 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); |
| |
| |
| runBootSequence(); |
| |
| |
| |
| |
| |
| |
| |
| 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(); |
| |
| |
| 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'); |
| |
| |
| if (taskbarBtn) taskbarBtn.classList.add('active'); |
| |
| |
| window.style.transform = 'scale(0.9)'; |
| window.style.opacity = '0'; |
| setTimeout(() => { |
| window.style.transform = 'scale(1)'; |
| window.style.opacity = '1'; |
| }, 10); |
| } else { |
| |
| 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') { |
| |
| 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 { |
| |
| 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; |
| |
| |
| document.querySelectorAll('.window').forEach(w => w.classList.remove('active')); |
| window.classList.add('active'); |
| } |
| |
| |
| function startDrag(e, windowId) { |
| if (e.target.closest('.window-btn')) return; |
| |
| const window = document.getElementById(windowId); |
| if (window.dataset.maximized === 'true') return; |
| |
| isDragging = true; |
| draggedWindow = window; |
| |
| |
| 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; |
| |
| |
| 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; |
| |
| |
| document.querySelectorAll('iframe').forEach(iframe => { |
| iframe.style.pointerEvents = 'auto'; |
| }); |
| }); |
| |
| |
| document.querySelectorAll('.window').forEach(window => { |
| window.addEventListener('mousedown', () => { |
| const id = window.id.replace('window-', ''); |
| focusWindow(id); |
| }); |
| }); |
| |
| |
| 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'); |
| } |
| } |
| |
| |
| 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'); |
| } |
| }); |
| |
| |
| 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); |
| |
| |
| const now2 = new Date(); |
| const loginStr = now2.toLocaleDateString() + ', ' + now2.toLocaleTimeString(); |
| document.getElementById('last-login').textContent = loginStr; |
| |
| |
| 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')); |
| }); |
| |
| |
| 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; |
| |
| |
| 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; |
| |
| |
| document.querySelectorAll('iframe').forEach(iframe => { |
| iframe.style.pointerEvents = 'auto'; |
| }); |
| }); |
| }); |
| |
| |
| let lastTouchEnd = 0; |
| document.addEventListener('touchend', (e) => { |
| const nowTime = Date.now(); |
| if (nowTime - lastTouchEnd <= 300) { |
| e.preventDefault(); |
| } |
| lastTouchEnd = nowTime; |
| }, false); |
| |
| |
| 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; |
| |
| |
| 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(); |
| } |
| |
| |
| 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(); |
| } |
| } |
| |
| |
| 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> |
