|
<!DOCTYPE html> |
|
<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 { |
|
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-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-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 { |
|
border: 1px solid var(--primary); |
|
margin: 20px auto; |
|
} |
|
|
|
|
|
.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-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-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-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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<div id="windows-container"> |
|
|
|
<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> |
|
|
|
|
|
<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> |