Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>XortronOS // CyberDesktop</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700&display=swap'); | |
| :root { | |
| --primary: #00f0ff; | |
| --secondary: #ff00f0; | |
| --dark: #0a0a12; | |
| --darker: #050508; | |
| --light: #e0e0ff; | |
| } | |
| body { | |
| font-family: 'Share Tech Mono', monospace; | |
| background-color: var(--darker); | |
| color: var(--light); | |
| overflow: hidden; | |
| height: 100vh; | |
| user-select: none; | |
| } | |
| .cyber-font { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .window { | |
| border: 1px solid var(--primary); | |
| box-shadow: 0 0 15px var(--primary), | |
| inset 0 0 10px var(--primary); | |
| background: rgba(10, 10, 20, 0.9); | |
| border-radius: 0; | |
| transition: all 0.2s ease; | |
| } | |
| .window-header { | |
| background: linear-gradient(90deg, #0a0a20, #1a1a3a); | |
| border-bottom: 1px solid var(--primary); | |
| padding: 5px 10px; | |
| } | |
| .terminal { | |
| background-color: rgba(0, 0, 0, 0.85); | |
| font-family: 'Share Tech Mono', monospace; | |
| color: #00ff00; | |
| text-shadow: 0 0 5px #00ff00; | |
| } | |
| .glow-text { | |
| text-shadow: 0 0 5px var(--primary), | |
| 0 0 10px var(--primary); | |
| } | |
| .taskbar { | |
| background: rgba(5, 5, 15, 0.9); | |
| border-top: 1px solid var(--primary); | |
| box-shadow: 0 0 20px var(--primary); | |
| } | |
| .icon { | |
| text-align: center; | |
| width: 80px; | |
| padding: 10px 5px; | |
| margin: 5px; | |
| border-radius: 5px; | |
| transition: all 0.2s ease; | |
| } | |
| .icon:hover { | |
| background: rgba(0, 240, 255, 0.2); | |
| } | |
| .icon:active { | |
| background: rgba(0, 240, 255, 0.4); | |
| } | |
| .file { | |
| padding: 5px; | |
| margin: 2px; | |
| border-radius: 3px; | |
| } | |
| .file:hover { | |
| background: rgba(0, 240, 255, 0.1); | |
| } | |
| .cursor-blink { | |
| animation: blink 1s infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.5; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.5; } | |
| } | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: rgba(0, 0, 0, 0.2); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--primary); | |
| } | |
| .matrix-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| opacity: 0.5; | |
| } | |
| .browser-nav { | |
| background: rgba(15, 15, 25, 0.9); | |
| border-bottom: 1px solid var(--primary); | |
| padding: 5px; | |
| } | |
| .url-bar { | |
| background: rgba(0, 0, 0, 0.5); | |
| border: 1px solid var(--primary); | |
| color: var(--light); | |
| padding: 3px 10px; | |
| width: 100%; | |
| border-radius: 3px; | |
| } | |
| button { | |
| border: 1px solid var(--primary); | |
| padding: 2px 8px; | |
| margin: 2px; | |
| border-radius: 3px; | |
| background-color: rgba(0, 240, 255, 0.1); | |
| transition: all 0.2s; | |
| } | |
| button:hover { | |
| background-color: rgba(0, 240, 255, 0.3); | |
| } | |
| button:active { | |
| background-color: rgba(0, 240, 255, 0.5); | |
| } | |
| .window-header button { | |
| border: none; | |
| background-color: transparent; | |
| } | |
| .window-header button:hover { | |
| background-color: rgba(255,255,255,0.1); | |
| } | |
| /* Start Menu Styles */ | |
| .start-menu { | |
| position: absolute; | |
| bottom: 40px; | |
| left: 0; | |
| width: 300px; | |
| height: 500px; | |
| background: rgba(10, 10, 20, 0.95); | |
| border: 1px solid var(--primary); | |
| box-shadow: 0 0 20px var(--primary); | |
| display: none; | |
| z-index: 100; | |
| } | |
| .start-menu-header { | |
| background: linear-gradient(90deg, #0a0a20, #1a1a3a); | |
| padding: 10px; | |
| border-bottom: 1px solid var(--primary); | |
| } | |
| .start-menu-search { | |
| padding: 10px; | |
| border-bottom: 1px solid var(--primary); | |
| } | |
| .start-menu-apps { | |
| padding: 10px; | |
| overflow-y: auto; | |
| height: calc(100% - 110px); | |
| } | |
| .app-item { | |
| display: flex; | |
| align-items: center; | |
| padding: 8px; | |
| cursor: pointer; | |
| border-radius: 3px; | |
| } | |
| .app-item:hover { | |
| background: rgba(0, 240, 255, 0.2); | |
| } | |
| .app-item i { | |
| margin-right: 10px; | |
| width: 20px; | |
| text-align: center; | |
| } | |
| .start-menu-footer { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| padding: 10px; | |
| background: rgba(5, 5, 15, 0.9); | |
| border-top: 1px solid var(--primary); | |
| } | |
| /* Calculator Styles */ | |
| .calculator-display { | |
| background: rgba(0, 0, 0, 0.7); | |
| border: 1px solid var(--primary); | |
| padding: 10px; | |
| margin-bottom: 10px; | |
| text-align: right; | |
| font-size: 24px; | |
| height: 60px; | |
| overflow: hidden; | |
| } | |
| .calculator-btn { | |
| width: 50px; | |
| height: 50px; | |
| margin: 5px; | |
| font-size: 18px; | |
| } | |
| .calculator-btn-operator { | |
| background: rgba(0, 240, 255, 0.3); | |
| } | |
| .calculator-btn-equals { | |
| background: rgba(0, 240, 255, 0.5); | |
| } | |
| /* Game Styles */ | |
| .game-container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100%; | |
| } | |
| .game-board { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 5px; | |
| margin: 20px 0; | |
| } | |
| .game-cell { | |
| width: 80px; | |
| height: 80px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 36px; | |
| background: rgba(0, 0, 0, 0.5); | |
| border: 1px solid var(--primary); | |
| cursor: pointer; | |
| } | |
| .game-cell:hover { | |
| background: rgba(0, 240, 255, 0.1); | |
| } | |
| .game-status { | |
| margin: 10px 0; | |
| font-size: 18px; | |
| text-align: center; | |
| } | |
| /* Snake Game Styles */ | |
| #snake-game { | |
| border: 1px solid var(--primary); | |
| margin: 20px auto; | |
| } | |
| /* Minesweeper Styles */ | |
| .minesweeper-board { | |
| display: grid; | |
| grid-template-columns: repeat(10, 1fr); | |
| gap: 2px; | |
| margin: 20px auto; | |
| } | |
| .minesweeper-cell { | |
| width: 25px; | |
| height: 25px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| background: rgba(0, 0, 0, 0.5); | |
| border: 1px solid var(--primary); | |
| cursor: pointer; | |
| } | |
| .minesweeper-cell.revealed { | |
| background: rgba(0, 240, 255, 0.1); | |
| } | |
| .minesweeper-cell.mine { | |
| background: rgba(255, 0, 0, 0.5); | |
| } | |
| /* System Monitor Styles */ | |
| .system-monitor-graph { | |
| height: 100px; | |
| background: rgba(0, 0, 0, 0.5); | |
| border: 1px solid var(--primary); | |
| margin: 10px 0; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .graph-line { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .cpu-graph { | |
| background: rgba(0, 240, 255, 0.2); | |
| } | |
| .ram-graph { | |
| background: rgba(255, 0, 240, 0.2); | |
| } | |
| /* Text Editor Styles */ | |
| .text-editor-area { | |
| width: 100%; | |
| height: calc(100% - 40px); | |
| background: rgba(0, 0, 0, 0.7); | |
| border: 1px solid var(--primary); | |
| color: var(--light); | |
| padding: 10px; | |
| font-family: 'Share Tech Mono', monospace; | |
| resize: none; | |
| outline: none; | |
| } | |
| /* Settings Panel Styles */ | |
| .settings-option { | |
| padding: 10px; | |
| border-bottom: 1px solid rgba(0, 240, 255, 0.2); | |
| } | |
| .settings-option-title { | |
| margin-bottom: 5px; | |
| font-weight: bold; | |
| } | |
| .settings-toggle { | |
| position: relative; | |
| display: inline-block; | |
| width: 50px; | |
| height: 24px; | |
| } | |
| .settings-toggle input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .settings-slider { | |
| position: absolute; | |
| cursor: pointer; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| border: 1px solid var(--primary); | |
| transition: .4s; | |
| } | |
| .settings-slider:before { | |
| position: absolute; | |
| content: ""; | |
| height: 16px; | |
| width: 16px; | |
| left: 4px; | |
| bottom: 3px; | |
| background-color: var(--primary); | |
| transition: .4s; | |
| } | |
| input:checked + .settings-slider { | |
| background-color: rgba(0, 240, 255, 0.3); | |
| } | |
| input:checked + .settings-slider:before { | |
| transform: translateX(26px); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="matrix" class="matrix-bg"></canvas> | |
| <!-- Desktop Icons --> | |
| <div class="absolute left-0 top-0 p-4 flex flex-col"> | |
| <div class="icon" onclick="openApp('terminal')"> | |
| <div class="text-3xl text-center mb-1"><i class="fas fa-terminal text-green-500"></i></div> | |
| <div class="text-xs text-center">Terminal</div> | |
| </div> | |
| <div class="icon" onclick="openApp('file-explorer')"> | |
| <div class="text-3xl text-center mb-1"><i class="fas fa-folder text-yellow-500"></i></div> | |
| <div class="text-xs text-center">Files</div> | |
| </div> | |
| <div class="icon" onclick="openApp('hack-tools')"> | |
| <div class="text-3xl text-center mb-1"><i class="fas fa-user-secret text-red-500"></i></div> | |
| <div class="text-xs text-center">Hack Tools</div> | |
| </div> | |
| <div class="icon" onclick="openApp('browser')"> | |
| <div class="text-3xl text-center mb-1"><i class="fas fa-globe text-purple-500"></i></div> | |
| <div class="text-xs text-center">DarkBrowser</div> | |
| </div> | |
| <div class="icon" onclick="openApp('calculator')"> | |
| <div class="text-3xl text-center mb-1"><i class="fas fa-calculator text-blue-500"></i></div> | |
| <div class="text-xs text-center">Calculator</div> | |
| </div> | |
| <div class="icon" onclick="openApp('text-editor')"> | |
| <div class="text-3xl text-center mb-1"><i class="fas fa-file-code text-green-400"></i></div> | |
| <div class="text-xs text-center">Text Editor</div> | |
| </div> | |
| <div class="icon" onclick="window.open('https://ko-fi.com/xortron', '_blank')" title="Support the developer!"> | |
| <div class="text-3xl text-center mb-1"><i class="fas fa-coffee text-yellow-600"></i></div> | |
| <div class="text-xs text-center">Buy me a Coffee</div> | |
| </div> | |
| </div> | |
| <!-- Start Menu --> | |
| <div id="start-menu" class="start-menu"> | |
| <div class="start-menu-header cyber-font"> | |
| XortronOS v7.7.7 | |
| </div> | |
| <div class="start-menu-search"> | |
| <input type="text" class="url-bar w-full" placeholder="Search applications..."> | |
| </div> | |
| <div class="start-menu-apps"> | |
| <div class="app-item" onclick="openApp('terminal')"> | |
| <i class="fas fa-terminal text-green-500"></i> | |
| <span>Terminal</span> | |
| </div> | |
| <div class="app-item" onclick="openApp('file-explorer')"> | |
| <i class="fas fa-folder text-yellow-500"></i> | |
| <span>File Explorer</span> | |
| </div> | |
| <div class="app-item" onclick="openApp('browser')"> | |
| <i class="fas fa-globe text-purple-500"></i> | |
| <span>DarkBrowser</span> | |
| </div> | |
| <div class="app-item" onclick="openApp('calculator')"> | |
| <i class="fas fa-calculator text-blue-500"></i> | |
| <span>Calculator</span> | |
| </div> | |
| <div class="app-item" onclick="openApp('text-editor')"> | |
| <i class="fas fa-file-code text-green-400"></i> | |
| <span>Text Editor</span> | |
| </div> | |
| <div class="app-item" onclick="openApp('system-monitor')"> | |
| <i class="fas fa-chart-line text-red-400"></i> | |
| <span>System Monitor</span> | |
| </div> | |
| <div class="app-item" onclick="openApp('settings')"> | |
| <i class="fas fa-cog text-gray-400"></i> | |
| <span>System Settings</span> | |
| </div> | |
| <div class="app-item" onclick="openApp('tic-tac-toe')"> | |
| <i class="fas fa-times text-pink-400"></i> | |
| <span>Tic Tac Toe</span> | |
| </div> | |
| <div class="app-item" onclick="openApp('snake-game')"> | |
| <i class="fas fa-gamepad text-orange-400"></i> | |
| <span>Snake Game</span> | |
| </div> | |
| <div class="app-item" onclick="openApp('minesweeper')"> | |
| <i class="fas fa-bomb text-yellow-400"></i> | |
| <span>Minesweeper</span> | |
| </div> | |
| <div class="app-item" onclick="openApp('hack-tools')"> | |
| <i class="fas fa-user-secret text-red-500"></i> | |
| <span>Hack Tools</span> | |
| </div> | |
| <div class="app-item" onclick="window.open('https://ko-fi.com/xortron', '_blank')"> | |
| <i class="fas fa-coffee text-yellow-600"></i> | |
| <span>Support Developer</span> | |
| </div> | |
| </div> | |
| <div class="start-menu-footer"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <i class="fas fa-user-shield text-blue-400 mr-2"></i> | |
| <span class="text-xs">User: root</span> | |
| </div> | |
| <button class="text-xs" onclick="shutdown()"> | |
| <i class="fas fa-power-off text-red-400 mr-1"></i> Shutdown | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Windows Container --> | |
| <div id="windows-container"> | |
| <!-- Terminal Window --> | |
| <div id="terminal-window" class="window absolute top-16 left-16 w-2/3 h-2/3 hidden" style="z-index: 10;"> | |
| <div class="window-header flex justify-between items-center cursor-move"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> | |
| <span class="cyber-font ml-2">Xortron-Terminal</span> | |
| </div> | |
| <div class="text-xs">root@xortron-os:~</div> | |
| <div class="flex"> | |
| <button class="px-2" onclick="minimizeWindow('terminal')" title="Minimize">_</button> | |
| <button class="px-2" onclick="maximizeWindow('terminal')" title="Maximize">□</button> | |
| <button class="px-2" onclick="closeWindow('terminal')" title="Close">×</button> | |
| </div> | |
| </div> | |
| <div class="terminal p-2 h-[calc(100%-35px)] overflow-auto" id="terminal-content"> | |
| <div>Xortron Operating System v7.7.7</div> | |
| <div>Kernel 5.15.0-76-generic x86_64</div> | |
| <br> | |
| <div>Last login: <span id="login-time"></span> from 192.168.1.105</div> | |
| <br> | |
| <div class="flex items-center"> | |
| <span class="text-green-500">root@xortron-os:~#</span> | |
| <input type="text" class="bg-transparent border-none outline-none flex-1 ml-2 text-green-500" id="terminal-input" autofocus> | |
| <span class="cursor-blink">█</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- File Explorer Window --> | |
| <div id="file-explorer-window" class="window absolute top-32 left-32 w-1/2 h-1/2 hidden" style="z-index: 9;"> | |
| <div class="window-header flex justify-between items-center cursor-move"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> | |
| <span class="cyber-font ml-2">Xortron-Files</span> | |
| </div> | |
| <div class="text-xs">/root/files</div> | |
| <div class="flex"> | |
| <button class="px-2" onclick="minimizeWindow('file-explorer')" title="Minimize">_</button> | |
| <button class="px-2" onclick="maximizeWindow('file-explorer')" title="Maximize">□</button> | |
| <button class="px-2" onclick="closeWindow('file-explorer')" title="Close">×</button> | |
| </div> | |
| </div> | |
| <div class="p-2 h-[calc(100%-35px)] overflow-auto"> | |
| <div class="flex h-full"> | |
| <div class="w-1/4 border-r border-gray-700 pr-2"> | |
| <div class="text-xs text-gray-400 mb-2">LOCATIONS</div> | |
| <div class="file flex items-center py-1 cursor-pointer"> | |
| <i class="fas fa-home mr-2 text-blue-400"></i> | |
| <span>Home</span> | |
| </div> | |
| <div class="file flex items-center py-1 cursor-pointer"> | |
| <i class="fas fa-desktop mr-2 text-purple-400"></i> | |
| <span>Desktop</span> | |
| </div> | |
| <div class="file flex items-center py-1 cursor-pointer"> | |
| <i class="fas fa-download mr-2 text-green-400"></i> | |
| <span>Downloads</span> | |
| </div> | |
| <div class="file flex items-center py-1 cursor-pointer"> | |
| <i class="fas fa-database mr-2 text-yellow-400"></i> | |
| <span>Data</span> | |
| </div> | |
| <div class="file flex items-center py-1 cursor-pointer"> | |
| <i class="fas fa-network-wired mr-2 text-red-400"></i> | |
| <span>Network</span> | |
| </div> | |
| </div> | |
| <div class="w-3/4 pl-2"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div class="text-xs text-gray-400">/root/files</div> | |
| <div class="flex"> | |
| <button class="text-xs px-2 py-1 bg-gray-800 mr-1">New Folder</button> | |
| <button class="text-xs px-2 py-1 bg-gray-800">Upload</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2"> | |
| <div class="file text-center cursor-pointer"> | |
| <div class="text-3xl mb-1"><i class="fas fa-folder text-yellow-500"></i></div> | |
| <div class="text-xs truncate">Documents</div> | |
| </div> | |
| <div class="file text-center cursor-pointer"> | |
| <div class="text-3xl mb-1"><i class="fas fa-folder text-yellow-500"></i></div> | |
| <div class="text-xs truncate">Hack Tools</div> | |
| </div> | |
| <div class="file text-center cursor-pointer"> | |
| <div class="text-3xl mb-1"><i class="fas fa-file-code text-blue-400"></i></div> | |
| <div class="text-xs truncate">script.py</div> | |
| </div> | |
| <div class="file text-center cursor-pointer"> | |
| <div class="text-3xl mb-1"><i class="fas fa-file-alt text-gray-400"></i></div> | |
| <div class="text-xs truncate">Weaponizer.txt</div> | |
| </div> | |
| <div class="file text-center cursor-pointer"> | |
| <div class="text-3xl mb-1"><i class="fas fa-file-archive text-purple-400"></i></div> | |
| <div class="text-xs truncate">m3th4mph3t4m1n3.zip</div> | |
| </div> | |
| <div class="file text-center cursor-pointer"> | |
| <div class="text-3xl mb-1"><i class="fas fa-key text-green-400"></i></div> | |
| <div class="text-xs truncate">keys.asc</div> | |
| </div> | |
| <div class="file text-center cursor-pointer"> | |
| <div class="text-3xl mb-1"><i class="fas fa-database text-red-400"></i></div> | |
| <div class="text-xs truncate">passwords.db</div> | |
| </div> | |
| <div class="file text-center cursor-pointer"> | |
| <div class="text-3xl mb-1"><i class="fas fa-file-image text-pink-400"></i></div> | |
| <div class="text-xs truncate">Porn | |
| </html> |