Desktop / index.html
darkc0de's picture
Add 2 files
ba20f0e verified
raw
history blame
23.7 kB
<!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 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>