|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Nova OS by Dineth Nethsara</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> |
|
|
@keyframes gradientBG { |
|
|
0% { background-position: 0% 50%; } |
|
|
50% { background-position: 100% 50%; } |
|
|
100% { background-position: 0% 50%; } |
|
|
} |
|
|
.animated-bg { |
|
|
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); |
|
|
background-size: 400% 400%; |
|
|
animation: gradientBG 15s ease infinite; |
|
|
} |
|
|
.window { |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); |
|
|
border-radius: 12px; |
|
|
overflow: hidden; |
|
|
position: absolute; |
|
|
resize: both; |
|
|
min-width: 300px; |
|
|
min-height: 200px; |
|
|
display: none; |
|
|
border: 1px solid rgba(255,255,255,0.1); |
|
|
transition: all 0.2s ease; |
|
|
backdrop-filter: blur(5px); |
|
|
background: rgba(30, 41, 59, 0.85); |
|
|
} |
|
|
.window.active { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4); |
|
|
} |
|
|
.window-header { |
|
|
cursor: move; |
|
|
user-select: none; |
|
|
background: linear-gradient(to right, #3b82f6, #6366f1); |
|
|
color: white; |
|
|
padding: 8px 12px; |
|
|
font-weight: 500; |
|
|
border-bottom: 1px solid rgba(255,255,255,0.1); |
|
|
} |
|
|
.desktop-icon { |
|
|
transition: all 0.2s ease; |
|
|
width: 84px; |
|
|
height: 84px; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
border-radius: 10px; |
|
|
margin: 12px; |
|
|
padding: 8px; |
|
|
text-align: center; |
|
|
backdrop-filter: blur(5px); |
|
|
background: rgba(255,255,255,0.05); |
|
|
} |
|
|
.desktop-icon:hover { |
|
|
transform: scale(1.08); |
|
|
background-color: rgba(255, 255, 255, 0.2); |
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.2); |
|
|
} |
|
|
.desktop-icon:active { |
|
|
transform: scale(0.98); |
|
|
} |
|
|
.terminal-line::before { |
|
|
content: "> "; |
|
|
color: #4ade80; |
|
|
font-weight: bold; |
|
|
} |
|
|
.login-screen, .lock-screen { |
|
|
backdrop-filter: blur(15px); |
|
|
transition: all 0.5s ease; |
|
|
} |
|
|
.ai-panel { |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 0 30px rgba(59, 130, 246, 0.3); |
|
|
border: 1px solid rgba(255,255,255,0.1); |
|
|
} |
|
|
.taskbar { |
|
|
background: rgba(30, 41, 59, 0.9); |
|
|
backdrop-filter: blur(10px); |
|
|
border-top: 1px solid rgba(255,255,255,0.1); |
|
|
box-shadow: 0 -2px 10px rgba(0,0,0,0.2); |
|
|
} |
|
|
.start-menu { |
|
|
background: rgba(30, 41, 59, 0.95); |
|
|
backdrop-filter: blur(15px); |
|
|
border: 1px solid rgba(255,255,255,0.1); |
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.3); |
|
|
border-radius: 12px; |
|
|
border-bottom-left-radius: 0; |
|
|
border-bottom-right-radius: 0; |
|
|
} |
|
|
::-webkit-scrollbar { width: 8px; height: 8px; } |
|
|
::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); } |
|
|
::-webkit-scrollbar-thumb { |
|
|
background: rgba(255,255,255,0.2); |
|
|
border-radius: 4px; |
|
|
} |
|
|
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); } |
|
|
.file-icon { color: #3b82f6; } |
|
|
.folder-icon { color: #f59e0b; } |
|
|
.app-icon { color: #8b5cf6; } |
|
|
.system-icon { color: #10b981; } |
|
|
.media-icon { color: #ec4899; } |
|
|
.network-icon { color: #f97316; } |
|
|
.utility-icon { color: #06b6d4; } |
|
|
.game-icon { color: #ef4444; } |
|
|
|
|
|
.window-controls button { |
|
|
width: 16px; |
|
|
height: 16px; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 8px; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.window-controls button:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.taskbar-app { |
|
|
transition: all 0.2s ease; |
|
|
border-radius: 6px; |
|
|
padding: 6px 12px; |
|
|
} |
|
|
.taskbar-app:hover { |
|
|
background: rgba(255,255,255,0.1); |
|
|
} |
|
|
.taskbar-app.active { |
|
|
background: rgba(255,255,255,0.2); |
|
|
border-bottom: 2px solid #3b82f6; |
|
|
} |
|
|
|
|
|
.context-menu { |
|
|
position: absolute; |
|
|
background: rgba(30, 41, 59, 0.95); |
|
|
backdrop-filter: blur(10px); |
|
|
border: 1px solid rgba(255,255,255,0.1); |
|
|
border-radius: 8px; |
|
|
box-shadow: 0 5px 20px rgba(0,0,0,0.3); |
|
|
padding: 6px 0; |
|
|
z-index: 1000; |
|
|
display: none; |
|
|
} |
|
|
.context-menu-item { |
|
|
padding: 8px 16px; |
|
|
cursor: pointer; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.context-menu-item:hover { |
|
|
background: rgba(255,255,255,0.1); |
|
|
} |
|
|
|
|
|
.notification { |
|
|
position: fixed; |
|
|
top: 20px; |
|
|
right: 20px; |
|
|
background: rgba(30, 41, 59, 0.95); |
|
|
backdrop-filter: blur(10px); |
|
|
border: 1px solid rgba(255,255,255,0.1); |
|
|
border-radius: 8px; |
|
|
padding: 12px 16px; |
|
|
box-shadow: 0 5px 20px rgba(0,0,0,0.3); |
|
|
transform: translateX(120%); |
|
|
transition: all 0.3s ease; |
|
|
z-index: 1000; |
|
|
max-width: 300px; |
|
|
} |
|
|
.notification.show { |
|
|
transform: translateX(0); |
|
|
} |
|
|
|
|
|
.file-explorer-item { |
|
|
transition: all 0.2s ease; |
|
|
border-radius: 6px; |
|
|
} |
|
|
.file-explorer-item:hover { |
|
|
background: rgba(255,255,255,0.1); |
|
|
} |
|
|
|
|
|
.music-progress { |
|
|
height: 4px; |
|
|
border-radius: 2px; |
|
|
background: rgba(255,255,255,0.2); |
|
|
} |
|
|
.music-progress-fill { |
|
|
height: 100%; |
|
|
border-radius: 2px; |
|
|
background: #3b82f6; |
|
|
width: 30%; |
|
|
} |
|
|
|
|
|
.browser-tab { |
|
|
background: rgba(255,255,255,0.1); |
|
|
border-radius: 6px 6px 0 0; |
|
|
padding: 6px 12px; |
|
|
margin-right: 4px; |
|
|
cursor: pointer; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.browser-tab:hover { |
|
|
background: rgba(255,255,255,0.2); |
|
|
} |
|
|
.browser-tab.active { |
|
|
background: rgba(255,255,255,0.3); |
|
|
} |
|
|
|
|
|
.settings-option { |
|
|
background: rgba(255,255,255,0.05); |
|
|
border-radius: 8px; |
|
|
padding: 12px; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.settings-option:hover { |
|
|
background: rgba(255,255,255,0.1); |
|
|
} |
|
|
|
|
|
.power-button { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
background: rgba(255,255,255,0.1); |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.power-button:hover { |
|
|
background: rgba(255,255,255,0.2); |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="overflow-hidden h-screen bg-gray-900 text-white font-sans"> |
|
|
|
|
|
<div id="lockScreen" class="lock-screen fixed inset-0 z-50 flex flex-col items-center justify-center bg-gray-900 bg-opacity-90"> |
|
|
<div class="text-center mb-8"> |
|
|
<div class="text-7xl font-light mb-2" id="lockTime">00:00</div> |
|
|
<div class="text-xl opacity-80 mb-10" id="lockDate">Monday, January 1</div> |
|
|
<div class="flex items-center justify-center mb-6"> |
|
|
<div class="w-16 h-16 rounded-full bg-blue-600 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-user text-2xl"></i> |
|
|
</div> |
|
|
<div class="text-left"> |
|
|
<div class="text-xl font-medium">Dineth Nethsara</div> |
|
|
<div class="text-sm opacity-70">Administrator</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-lg opacity-60 mb-10">Built with ❤️ by Dineth Nethsara</div> |
|
|
<div class="flex space-x-4"> |
|
|
<div class="px-6 py-3 rounded-full bg-white bg-opacity-10 hover:bg-opacity-20 cursor-pointer transition flex items-center" |
|
|
onclick="unlockScreen()"> |
|
|
<i class="fas fa-unlock mr-2"></i> Unlock |
|
|
</div> |
|
|
<div class="px-6 py-3 rounded-full bg-white bg-opacity-10 hover:bg-opacity-20 cursor-pointer transition flex items-center" |
|
|
onclick="shutdown()"> |
|
|
<i class="fas fa-power-off mr-2"></i> Power |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="loginScreen" class="login-screen fixed inset-0 z-40 flex items-center justify-center bg-gray-900 bg-opacity-90"> |
|
|
<div class="bg-gray-800 bg-opacity-80 rounded-xl p-8 w-96 shadow-2xl transform transition-all duration-500"> |
|
|
<div class="text-center mb-8"> |
|
|
<div class="text-5xl font-light mb-2 flex items-center justify-center"> |
|
|
<i class="fas fa-rocket mr-3 text-blue-400"></i> |
|
|
<span>Nova OS</span> |
|
|
</div> |
|
|
<div class="text-sm opacity-70">by Dineth Nethsara</div> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1 opacity-80">Username</label> |
|
|
<input type="text" id="username" placeholder="Enter your username" |
|
|
class="w-full bg-gray-700 bg-opacity-50 border border-gray-600 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 transition"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1 opacity-80">Password</label> |
|
|
<input type="password" id="password" placeholder="Enter your password" |
|
|
class="w-full bg-gray-700 bg-opacity-50 border border-gray-600 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 transition"> |
|
|
</div> |
|
|
<div class="flex items-center justify-between mt-2"> |
|
|
<label class="flex items-center text-sm opacity-70"> |
|
|
<input type="checkbox" class="rounded bg-gray-700 border-gray-600 mr-2"> |
|
|
Remember me |
|
|
</label> |
|
|
<a href="#" class="text-sm text-blue-400 hover:text-blue-300">Forgot password?</a> |
|
|
</div> |
|
|
<button onclick="login()" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-md transition mt-4 flex items-center justify-center"> |
|
|
<i class="fas fa-sign-in-alt mr-2"></i> Sign In |
|
|
</button> |
|
|
</div> |
|
|
<div class="text-center mt-6 text-sm opacity-70"> |
|
|
Don't have an account? <a href="#" class="text-blue-400 hover:text-blue-300">Create one</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="desktop" class="animated-bg h-screen w-screen relative overflow-hidden" oncontextmenu="showDesktopContextMenu(event)"> |
|
|
|
|
|
<div class="absolute left-4 top-4 flex flex-wrap" style="width: 500px;"> |
|
|
<div class="desktop-icon" onclick="openApp('terminal')" oncontextmenu="showIconContextMenu(event, 'terminal')"> |
|
|
<div class="text-4xl mb-1 app-icon"><i class="fas fa-terminal"></i></div> |
|
|
<div class="text-xs text-center">Terminal</div> |
|
|
</div> |
|
|
<div class="desktop-icon" onclick="openApp('files')" oncontextmenu="showIconContextMenu(event, 'files')"> |
|
|
<div class="text-4xl mb-1 folder-icon"><i class="fas fa-folder"></i></div> |
|
|
<div class="text-xs text-center">Files</div> |
|
|
</div> |
|
|
<div class="desktop-icon" onclick="openApp('notes')" oncontextmenu="showIconContextMenu(event, 'notes')"> |
|
|
<div class="text-4xl mb-1 file-icon"><i class="fas fa-file-alt"></i></div> |
|
|
<div class="text-xs text-center">Notes</div> |
|
|
</div> |
|
|
<div class="desktop-icon" onclick="openApp('settings')" oncontextmenu="showIconContextMenu(event, 'settings')"> |
|
|
<div class="text-4xl mb-1 system-icon"><i class="fas fa-cog"></i></div> |
|
|
<div class="text-xs text-center">Settings</div> |
|
|
</div> |
|
|
<div class="desktop-icon" onclick="openApp('novaai')" oncontextmenu="showIconContextMenu(event, 'novaai')"> |
|
|
<div class="text-4xl mb-1 app-icon"><i class="fas fa-robot"></i></div> |
|
|
<div class="text-xs text-center">NovaAI</div> |
|
|
</div> |
|
|
<div class="desktop-icon" onclick="openApp('browser')" oncontextmenu="showIconContextMenu(event, 'browser')"> |
|
|
<div class="text-4xl mb-1 file-icon"><i class="fas fa-globe"></i></div> |
|
|
<div class="text-xs text-center">Browser</div> |
|
|
</div> |
|
|
<div class="desktop-icon" onclick="openApp('media')" oncontextmenu="showIconContextMenu(event, 'media')"> |
|
|
<div class="text-4xl mb-1 media-icon"><i class="fas fa-music"></i></div> |
|
|
<div class="text-xs text-center">Media Player</div> |
|
|
</div> |
|
|
<div class="desktop-icon" onclick="openApp('network')" oncontextmenu="showIconContextMenu(event, 'network')"> |
|
|
<div class="text-4xl mb-1 network-icon"><i class="fas fa-wifi"></i></div> |
|
|
<div class="text-xs text-center">Network</div> |
|
|
</div> |
|
|
<div class="desktop-icon" onclick="openApp('calculator')" oncontextmenu="showIconContextMenu(event, 'calculator')"> |
|
|
<div class="text-4xl mb-1 utility-icon"><i class="fas fa-calculator"></i></div> |
|
|
<div class="text-xs text-center">Calculator</div> |
|
|
</div> |
|
|
<div class="desktop-icon" onclick="openApp('game')" oncontextmenu="showIconContextMenu(event, 'game')"> |
|
|
<div class="text-4xl mb-1 game-icon"><i class="fas fa-gamepad"></i></div> |
|
|
<div class="text-xs text-center">Games</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="terminalWindow" class="window bg-gray-800" style="width: 600px; height: 400px; top: 100px; left: 200px;"> |
|
|
<div class="window-header px-3 py-2 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-terminal"></i> |
|
|
<span>Terminal</span> |
|
|
</div> |
|
|
<div class="flex space-x-2 window-controls"> |
|
|
<button class="bg-gray-500 hover:bg-gray-400" onclick="minimizeWindow('terminal')"> |
|
|
<i class="fas fa-minus"></i> |
|
|
</button> |
|
|
<button class="bg-red-500 hover:bg-red-400" onclick="closeWindow('terminal')"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-3 h-full overflow-auto font-mono text-sm bg-gray-900" id="terminalContent"> |
|
|
<div class="terminal-line">Nova OS Terminal v2.4.1</div> |
|
|
<div class="terminal-line">Type 'help' for available commands</div> |
|
|
<div class="terminal-line"> </div> |
|
|
<div class="terminal-line">user@nova-os:~$ <span class="terminal-input" contenteditable="true"></span></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="filesWindow" class="window bg-gray-800" style="width: 700px; height: 500px; top: 150px; left: 300px;"> |
|
|
<div class="window-header px-3 py-2 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-folder"></i> |
|
|
<span>File Explorer</span> |
|
|
</div> |
|
|
<div class="flex space-x-2 window-controls"> |
|
|
<button class="bg-gray-500 hover:bg-gray-400" onclick="minimizeWindow('files')"> |
|
|
<i class="fas fa-minus"></i> |
|
|
</button> |
|
|
<button class="bg-red-500 hover:bg-red-400" onclick="closeWindow('files')"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex h-full"> |
|
|
<div class="w-48 bg-gray-800 border-r border-gray-700 p-2"> |
|
|
<div class="space-y-1"> |
|
|
<div class="file-explorer-item p-2 flex items-center" onclick="openFolder('home')"> |
|
|
<i class="fas fa-home mr-2 folder-icon"></i> |
|
|
<span>Home</span> |
|
|
</div> |
|
|
<div class="file-explorer-item p-2 flex items-center" onclick="openFolder('downloads')"> |
|
|
<i class="fas fa-download mr-2 folder-icon"></i> |
|
|
<span>Downloads</span> |
|
|
</div> |
|
|
<div class="file-explorer-item p-2 flex items-center" onclick="openFolder('documents')"> |
|
|
<i class="fas fa-file mr-2 folder-icon"></i> |
|
|
<span>Documents</span> |
|
|
</div> |
|
|
<div class="file-explorer-item p-2 flex items-center" onclick="openFolder('pictures')"> |
|
|
<i class="fas fa-image mr-2 folder-icon"></i> |
|
|
<span>Pictures</span> |
|
|
</div> |
|
|
<div class="file-explorer-item p-2 flex items-center" onclick="openFolder('music')"> |
|
|
<i class="fas fa-music mr-2 folder-icon"></i> |
|
|
<span>Music</span> |
|
|
</div> |
|
|
<div class="file-explorer-item p-2 flex items-center" onclick="openFolder('videos')"> |
|
|
<i class="fas fa-film mr-2 folder-icon"></i> |
|
|
<span>Videos</span> |
|
|
</div> |
|
|
<div class="file-explorer-item p-2 flex items-center" onclick="openFolder('desktop')"> |
|
|
<i class="fas fa-desktop mr-2 folder-icon"></i> |
|
|
<span>Desktop</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-1 p-4 overflow-auto"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-l-md"> |
|
|
<i class="fas fa-arrow-left"></i> |
|
|
</button> |
|
|
<button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-r-md -ml-px"> |
|
|
<i class="fas fa-arrow-right"></i> |
|
|
</button> |
|
|
<div class="ml-2 bg-gray-700 px-3 py-1 rounded-md flex-1"> |
|
|
<i class="fas fa-home mr-2"></i> |
|
|
<span>Home</span> |
|
|
</div> |
|
|
<button class="ml-2 bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-md"> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="grid grid-cols-4 gap-4"> |
|
|
<div class="p-3 rounded-md hover:bg-gray-700 cursor-pointer flex flex-col items-center" onclick="openFolder('documents')"> |
|
|
<i class="fas fa-file text-3xl mb-2 file-icon"></i> |
|
|
<span>Document.txt</span> |
|
|
</div> |
|
|
<div class="p-3 rounded-md hover:bg-gray-700 cursor-pointer flex flex-col items-center" onclick="openFolder('images')"> |
|
|
<i class="fas fa-image text-3xl mb-2 file-icon"></i> |
|
|
<span>Image.jpg</span> |
|
|
</div> |
|
|
<div class="p-3 rounded-md hover:bg-gray-700 cursor-pointer flex flex-col items-center" onclick="openFolder('music')"> |
|
|
<i class="fas fa-music text-3xl mb-2 file-icon"></i> |
|
|
<span>Song.mp3</span> |
|
|
</div> |
|
|
<div class="p-3 rounded-md hover:bg-gray-700 cursor-pointer flex flex-col items-center" onclick="openFolder('videos')"> |
|
|
<i class="fas fa-film text-3xl mb-2 file-icon"></i> |
|
|
<span>Video.mp4</span> |
|
|
</div> |
|
|
<div class="p-3 rounded-md hover:bg-gray-700 cursor-pointer flex flex-col items-center" onclick="openFolder('archives')"> |
|
|
<i class="fas fa-file-archive text-3xl mb-2 file-icon"></i> |
|
|
<span>Archive.zip</span> |
|
|
</div> |
|
|
<div class="p-3 rounded-md hover:bg-gray-700 cursor-pointer flex flex-col items-center" onclick="openFolder('code')"> |
|
|
<i class="fas fa-file-code text-3xl mb-2 file-icon"></i> |
|
|
<span>Script.js</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="notesWindow" class="window bg-gray-800" style="width: 500px; height: 400px; top: 200px; left: 400px;"> |
|
|
<div class="window-header px-3 py-2 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-file-alt"></i> |
|
|
<span>Notes</span> |
|
|
</div> |
|
|
<div class="flex space-x-2 window-controls"> |
|
|
<button class="bg-gray-500 hover:bg-gray-400" onclick="minimizeWindow('notes')"> |
|
|
<i class="fas fa-minus"></i> |
|
|
</button> |
|
|
<button class="bg-red-500 hover:bg-red-400" onclick="closeWindow('notes')"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 h-full flex flex-col"> |
|
|
<div class="flex mb-4"> |
|
|
<button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-md mr-2"> |
|
|
<i class="fas fa-save"></i> Save |
|
|
</button> |
|
|
<button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-md"> |
|
|
<i class="fas fa-file"></i> New |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<textarea class="w-full h-full bg-gray-900 p-3 rounded-md focus:outline-none resize-none" |
|
|
placeholder="Start typing your notes here..."></textarea> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="settingsWindow" class="window bg-gray-800" style="width: 600px; height: 500px; top: 180px; left: 250px;"> |
|
|
<div class="window-header px-3 py-2 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-cog"></i> |
|
|
<span>Settings</span> |
|
|
</div> |
|
|
<div class="flex space-x-2 window-controls"> |
|
|
<button class="bg-gray-500 hover:bg-gray-400" onclick="minimizeWindow('settings')"> |
|
|
<i class="fas fa-minus"></i> |
|
|
</button> |
|
|
<button class="bg-red-500 hover:bg-red-400" onclick="closeWindow('settings')"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex h-full"> |
|
|
<div class="w-48 bg-gray-800 border-r border-gray-700 p-2"> |
|
|
<div class="space-y-1"> |
|
|
<div class="file-explorer-item p-2 flex items-center" onclick="showSettingsTab('appearance')"> |
|
|
<i class="fas fa-palette mr-2"></i> |
|
|
<span>Appearance</span> |
|
|
</div> |
|
|
<div class="file-explorer-item p-2 flex items-center" onclick="showSettingsTab('system')"> |
|
|
<i class="fas fa-desktop mr-2"></i> |
|
|
<span>System</span> |
|
|
</div> |
|
|
<div class="file-explorer-item p-2 flex items-center" onclick="showSettingsTab('network')"> |
|
|
<i class="fas fa-wifi mr-2"></i> |
|
|
<span>Network</span> |
|
|
</div> |
|
|
<div class="file-explorer-item p-2 flex items-center" onclick="showSettingsTab('privacy')"> |
|
|
<i class="fas fa-lock mr-2"></i> |
|
|
<span>Privacy</span> |
|
|
</div> |
|
|
<div class="file-explorer-item p-2 flex items-center" onclick="showSettingsTab('accounts')"> |
|
|
<i class="fas fa-user mr-2"></i> |
|
|
<span>Accounts</span> |
|
|
</div> |
|
|
<div class="file-explorer-item p-2 flex items-center" onclick="showSettingsTab('updates')"> |
|
|
<i class="fas fa-sync-alt mr-2"></i> |
|
|
<span>Updates</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-1 p-4 overflow-auto" id="settingsContent"> |
|
|
<h2 class="text-xl font-medium mb-4">Appearance</h2> |
|
|
<div class="space-y-6"> |
|
|
<div class="settings-option"> |
|
|
<h3 class="text-lg font-medium mb-3">Theme</h3> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span>Dark Mode</span> |
|
|
<label class="relative inline-flex items-center cursor-pointer"> |
|
|
<input type="checkbox" id="darkModeToggle" class="sr-only peer" checked> |
|
|
<div class="w-11 h-6 bg-gray-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="settings-option"> |
|
|
<h3 class="text-lg font-medium mb-3">Wallpaper</h3> |
|
|
<div class="grid grid-cols-3 gap-3"> |
|
|
<div class="h-24 rounded-md bg-gradient-to-br from-purple-500 to-pink-500 cursor-pointer" onclick="changeWallpaper('purple-pink')"></div> |
|
|
<div class="h-24 rounded-md bg-gradient-to-br from-blue-500 to-teal-500 cursor-pointer" onclick="changeWallpaper('blue-teal')"></div> |
|
|
<div class="h-24 rounded-md bg-gradient-to-br from-yellow-500 to-red-500 cursor-pointer" onclick="changeWallpaper('yellow-red')"></div> |
|
|
<div class="h-24 rounded-md bg-gradient-to-br from-green-500 to-blue-500 cursor-pointer" onclick="changeWallpaper('green-blue')"></div> |
|
|
<div class="h-24 rounded-md bg-gradient-to-br from-indigo-500 to-purple-500 cursor-pointer" onclick="changeWallpaper('indigo-purple')"></div> |
|
|
<div class="h-24 rounded-md bg-gradient-to-br from-orange-500 to-yellow-500 cursor-pointer" onclick="changeWallpaper('orange-yellow')"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="settings-option"> |
|
|
<h3 class="text-lg font-medium mb-3">Accent Color</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-500 cursor-pointer border-2 border-blue-400" onclick="changeAccentColor('blue')"></div> |
|
|
<div class="w-8 h-8 rounded-full bg-purple-500 cursor-pointer" onclick="changeAccentColor('purple')"></div> |
|
|
<div class="w-8 h-8 rounded-full bg-pink-500 cursor-pointer" onclick="changeAccentColor('pink')"></div> |
|
|
<div class="w-8 h-8 rounded-full bg-red-500 cursor-pointer" onclick="changeAccentColor('red')"></div> |
|
|
<div class="w-8 h-8 rounded-full bg-green-500 cursor-pointer" onclick="changeAccentColor('green')"></div> |
|
|
<div class="w-8 h-8 rounded-full bg-yellow-500 cursor-pointer" onclick="changeAccentColor('yellow')"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="novaaiWindow" class="window bg-gray-800" style="width: 500px; height: 500px; top: 150px; left: 350px;"> |
|
|
<div class="window-header px-3 py-2 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-robot"></i> |
|
|
<span>NovaAI Assistant</span> |
|
|
</div> |
|
|
<div class="flex space-x-2 window-controls"> |
|
|
<button class="bg-gray-500 hover:bg-gray-400" onclick="minimizeWindow('novaai')"> |
|
|
<i class="fas fa-minus"></i> |
|
|
</button> |
|
|
<button class="bg-red-500 hover:bg-red-400" onclick="closeWindow('novaai')"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 h-full flex flex-col"> |
|
|
<div class="flex-1 overflow-auto mb-4 space-y-3" id="novaaiChat"> |
|
|
<div class="bg-gray-700 rounded-lg p-3 mb-3"> |
|
|
<div class="text-xs text-gray-400 mb-1">NovaAI</div> |
|
|
<div>Hello! I'm your NovaAI assistant. How can I help you today?</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<input type="text" id="novaaiInput" placeholder="Ask me anything..." |
|
|
class="flex-1 bg-gray-700 px-3 py-2 rounded-md focus:outline-none"> |
|
|
<button onclick="sendNovaAIMessage()" class="bg-blue-600 hover:bg-blue-700 px-3 py-2 rounded-md"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="browserWindow" class="window bg-gray-800" style="width: 800px; height: 600px; top: 100px; left: 200px;"> |
|
|
<div class="window-header px-3 py-2 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-globe"></i> |
|
|
<span>Nova Browser</span> |
|
|
</div> |
|
|
<div class="flex space-x-2 window-controls"> |
|
|
<button class="bg-gray-500 hover:bg-gray-400" onclick="minimizeWindow('browser')"> |
|
|
<i class="fas fa-minus"></i> |
|
|
</button> |
|
|
<button class="bg-red-500 hover:bg-red-400" onclick="closeWindow('browser')"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 h-full flex flex-col"> |
|
|
<div class="flex mb-4"> |
|
|
<button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-l-md"> |
|
|
<i class="fas fa-arrow-left"></i> |
|
|
</button> |
|
|
<button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-r-md -ml-px"> |
|
|
<i class="fas fa-arrow-right"></i> |
|
|
</button> |
|
|
<button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-r-md -ml-px"> |
|
|
<i class="fas fa-sync-alt"></i> |
|
|
</button> |
|
|
<input type="text" value="https://nova-os.dineth" |
|
|
class="flex-1 bg-gray-700 px-3 py-1 focus:outline-none mx-2"> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded-md"> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex border-b border-gray-700 mb-2"> |
|
|
<div class="browser-tab active"> |
|
|
<i class="fas fa-home mr-1"></i> Home |
|
|
</div> |
|
|
<div class="browser-tab"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-1 bg-gray-900 rounded-md p-4 overflow-auto"> |
|
|
<h1 class="text-2xl font-bold mb-4">Welcome to Nova Browser</h1> |
|
|
<p class="mb-4">This is a simulated browser experience within Nova OS.</p> |
|
|
|
|
|
<div class="grid grid-cols-4 gap-4 mt-6"> |
|
|
<div class="p-3 rounded-md hover:bg-gray-800 cursor-pointer flex flex-col items-center"> |
|
|
<i class="fas fa-search text-3xl mb-2"></i> |
|
|
<span>Search</span> |
|
|
</div> |
|
|
<div class="p-3 rounded-md hover:bg-gray-800 cursor-pointer flex flex-col items-center"> |
|
|
<i class="fas fa-newspaper text-3xl mb-2"></i> |
|
|
<span>News</span> |
|
|
</div> |
|
|
<div class="p-3 rounded-md hover:bg-gray-800 cursor-pointer flex flex-col items-center"> |
|
|
<i class="fas fa-shopping-bag text-3xl mb-2"></i> |
|
|
<span>Shopping</span> |
|
|
</div> |
|
|
<div class="p-3 rounded-md hover:bg-gray-800 cursor-pointer flex flex-col items-center"> |
|
|
<i class="fas fa-envelope text-3xl mb-2"></i> |
|
|
<span>Mail</span> |
|
|
</div> |
|
|
<div class="p-3 rounded-md hover:bg-gray-800 cursor-pointer flex flex-col items-center"> |
|
|
<i class="fas fa-video text-3xl mb-2"></i> |
|
|
<span>Videos</span> |
|
|
</div> |
|
|
<div class="p-3 rounded-md hover:bg-gray-800 cursor-pointer flex flex-col items-center"> |
|
|
<i class="fas fa-map text-3xl mb-2"></i> |
|
|
<span>Maps</span> |
|
|
</div> |
|
|
<div class="p-3 rounded-md hover:bg-gray-800 cursor-pointer flex flex-col items-center"> |
|
|
<i class="fas fa-cloud text-3xl mb-2"></i> |
|
|
<span>Drive</span> |
|
|
</div> |
|
|
<div class="p-3 rounded-md hover:bg-gray-800 cursor-pointer flex flex-col items-center"> |
|
|
<i class="fas fa-calendar text-3xl mb-2"></i> |
|
|
<span>Calendar</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="mediaWindow" class="window bg-gray-800" style="width: 500px; height: 400px; top: 150px; left: 300px;"> |
|
|
<div class="window-header px-3 py-2 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-music"></i> |
|
|
<span>Media Player</span> |
|
|
</div> |
|
|
<div class="flex space-x-2 window-controls"> |
|
|
<button class="bg-gray-500 hover:bg-gray-400" onclick="minimizeWindow('media')"> |
|
|
<i class="fas fa-minus"></i> |
|
|
</button> |
|
|
<button class="bg-red-500 hover:bg-red-400" onclick="closeWindow('media')"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 h-full flex flex-col items-center justify-center"> |
|
|
<div class="w-40 h-40 bg-gray-700 rounded-full mb-6 flex items-center justify-center shadow-lg"> |
|
|
<i class="fas fa-music text-4xl"></i> |
|
|
</div> |
|
|
<div class="text-xl font-medium mb-2">Now Playing</div> |
|
|
<div class="text-gray-400 mb-6">Nova OS Theme</div> |
|
|
<div class="w-full mb-2"> |
|
|
<div class="music-progress"> |
|
|
<div class="music-progress-fill" id="musicProgress"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between w-full text-xs text-gray-400 mb-6"> |
|
|
<span>1:23</span> |
|
|
<span>3:45</span> |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<button class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-gray-600 shadow"> |
|
|
<i class="fas fa-step-backward"></i> |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center hover:bg-blue-700 shadow" id="playButton"> |
|
|
<i class="fas fa-play" id="playIcon"></i> |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-gray-600 shadow"> |
|
|
<i class="fas fa-step-forward"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex space-x-4 mt-6"> |
|
|
<button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-gray-700"> |
|
|
<i class="fas fa-random"></i> |
|
|
</button> |
|
|
<button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-gray-700"> |
|
|
<i class="fas fa-redo"></i> |
|
|
</button> |
|
|
<button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-gray-700"> |
|
|
<i class="fas fa-volume-up"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="networkWindow" class="window bg-gray-800" style="width: 500px; height: 400px; top: 150px; left: 300px;"> |
|
|
<div class="window-header px-3 py-2 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-wifi"></i> |
|
|
<span>Network Settings</span> |
|
|
</div> |
|
|
<div class="flex space-x-2 window-controls"> |
|
|
<button class="bg-gray-500 hover:bg-gray-400" onclick="minimizeWindow('network')"> |
|
|
<i class="fas fa-minus"></i> |
|
|
</button> |
|
|
<button class="bg-red-500 hover:bg-red-400" onclick="closeWindow('network')"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 h-full overflow-auto"> |
|
|
<div class="space-y-4"> |
|
|
<div class="settings-option"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-wifi text-xl mr-3"></i> |
|
|
<div> |
|
|
<div class="font-medium">Wi-Fi</div> |
|
|
<div class="text-sm text-gray-400">Connected to NovaNet</div> |
|
|
</div> |
|
|
</div> |
|
|
<label class="relative inline-flex items-center cursor-pointer"> |
|
|
<input type="checkbox" class="sr-only peer" checked> |
|
|
<div class="w-11 h-6 bg-gray-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="settings-option"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-bluetooth-b text-xl mr-3"></i> |
|
|
<div> |
|
|
<div class="font-medium">Bluetooth</div> |
|
|
<div class="text-sm text-gray-400">Available devices</div> |
|
|
</div> |
|
|
</div> |
|
|
<label class="relative inline-flex items-center cursor-pointer"> |
|
|
<input type="checkbox" class="sr-only peer"> |
|
|
<div class="w-11 h-6 bg-gray-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="settings-option"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-ethernet text-xl mr-3"></i> |
|
|
<div> |
|
|
<div class="font-medium">Ethernet</div> |
|
|
<div class="text-sm text-gray-400">Not connected</div> |
|
|
</div> |
|
|
</div> |
|
|
<label class="relative inline-flex items-center cursor-pointer"> |
|
|
<input type="checkbox" class="sr-only peer"> |
|
|
<div class="w-11 h-6 bg-gray-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="settings-option"> |
|
|
<h3 class="font-medium mb-2">Available Networks</h3> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex items-center justify-between p-2 hover:bg-gray-700 rounded-md cursor-pointer"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-wifi mr-2"></i> |
|
|
<span>NovaNet</span> |
|
|
</div> |
|
|
<i class="fas fa-lock text-gray-400"></i> |
|
|
</div> |
|
|
<div class="flex items-center justify-between p-2 hover:bg-gray-700 rounded-md cursor-pointer"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-wifi mr-2"></i> |
|
|
<span>GuestWiFi</span> |
|
|
</div> |
|
|
<i class="fas fa-lock-open text-gray-400"></i> |
|
|
</div> |
|
|
<div class="flex items-center justify-between p-2 hover:bg-gray-700 rounded-md cursor-pointer"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-wifi mr-2"></i> |
|
|
<span>HomeNetwork</span> |
|
|
</div> |
|
|
<i class="fas fa-lock text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="calculatorWindow" class="window bg-gray-800" style="width: 350px; height: 500px; top: 150px; left: 300px;"> |
|
|
<div class="window-header px-3 py-2 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-calculator"></i> |
|
|
<span>Calculator</span> |
|
|
</div> |
|
|
<div class="flex space-x-2 window-controls"> |
|
|
<button class="bg-gray-500 hover:bg-gray-400" onclick="minimizeWindow('calculator')"> |
|
|
<i class="fas fa-minus"></i> |
|
|
</button> |
|
|
<button class="bg-red-500 hover:bg-red-400" onclick="closeWindow('calculator')"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 h-full flex flex-col"> |
|
|
<div class="bg-gray-900 rounded-md p-4 mb-4 text-right text-2xl font-mono h-16 flex items-center justify-end" id="calculatorDisplay"> |
|
|
0 |
|
|
</div> |
|
|
<div class="grid grid-cols-4 gap-2 flex-1"> |
|
|
<button class="bg-gray-700 hover:bg-gray-600 rounded-md p-3" onclick="calculatorInput('C')">C</button> |
|
|
<button class="bg-gray-700 hover:bg-gray-600 rounded-md p-3" onclick="calculatorInput('±')">±</button> |
|
|
<button class="bg-gray-700 hover:bg-gray-600 rounded-md p-3" onclick="calculatorInput('%')">%</button> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 rounded-md p-3" onclick="calculatorInput('/')">÷</button> |
|
|
|
|
|
<button class="bg-gray-800 hover:bg-gray-700 rounded-md p-3" onclick="calculatorInput('7')">7</button> |
|
|
<button class="bg-gray-800 hover:bg-gray-700 rounded-md p-3" onclick="calculatorInput('8')">8</button> |
|
|
<button class="bg-gray-800 hover:bg-gray-700 rounded-md p-3" onclick="calculatorInput('9')">9</button> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 rounded-md p-3" onclick="calculatorInput('*')">×</button> |
|
|
|
|
|
<button class="bg-gray-800 hover:bg-gray-700 rounded-md p-3" onclick="calculatorInput('4')">4</button> |
|
|
<button class="bg-gray-800 hover:bg-gray-700 rounded-md p-3" onclick="calculatorInput('5')">5</button> |
|
|
<button class="bg-gray-800 hover:bg-gray-700 rounded-md p-3" onclick="calculatorInput('6')">6</button> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 rounded-md p-3" onclick="calculatorInput('-')">−</button> |
|
|
|
|
|
<button class="bg-gray-800 hover:bg-gray-700 rounded-md p-3" onclick="calculatorInput('1')">1</button> |
|
|
<button class="bg-gray-800 hover:bg-gray-700 rounded-md p-3" onclick="calculatorInput('2')">2</button> |
|
|
<button class="bg-gray-800 hover:bg-gray-700 rounded-md p-3" onclick="calculatorInput('3')">3</button> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 rounded-md p-3" onclick="calculatorInput('+')">+</button> |
|
|
|
|
|
<button class="bg-gray-800 hover:bg-gray-700 rounded-md p-3 col-span-2" onclick="calculatorInput('0')">0</button> |
|
|
<button class="bg-gray-800 hover:bg-gray-700 rounded-md p-3" onclick="calculatorInput('.')">.</button> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 rounded-md p-3" onclick="calculatorCalculate()">=</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="gameWindow" class="window bg-gray-800" style="width: 500px; height: 500px; top: 150px; left: 300px;"> |
|
|
<div class="window-header px-3 py-2 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-gamepad"></i> |
|
|
<span>Memory Game</span> |
|
|
</div> |
|
|
<div class="flex space-x-2 window-controls"> |
|
|
<button class="bg-gray-500 hover:bg-gray-400" onclick="minimizeWindow('game')"> |
|
|
<i class="fas fa-minus"></i> |
|
|
</button> |
|
|
<button class="bg-red-500 hover:bg-red-400" onclick="closeWindow('game')"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 h-full flex flex-col items-center justify-center"> |
|
|
<h2 class="text-xl font-medium mb-6">Memory Card Game</h2> |
|
|
<div class="grid grid-cols-4 gap-2 mb-6" id="gameBoard"> |
|
|
|
|
|
</div> |
|
|
<div class="flex items-center justify-between w-full mb-4"> |
|
|
<div class="bg-gray-700 px-4 py-2 rounded-md"> |
|
|
<span class="text-sm">Moves: </span> |
|
|
<span id="movesCount">0</span> |
|
|
</div> |
|
|
<div class="bg-gray-700 px-4 py-2 rounded-md"> |
|
|
<span class="text-sm">Pairs: </span> |
|
|
<span id="pairsCount">0/8</span> |
|
|
</div> |
|
|
</div> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-md" onclick="startGame()"> |
|
|
<i class="fas fa-redo mr-2"></i> New Game |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="startMenu" class="start-menu fixed bottom-16 left-1/2 transform -translate-x-1/2 w-96 h-96 hidden z-30"> |
|
|
<div class="p-4 border-b border-gray-700"> |
|
|
<input type="text" placeholder="Search apps, settings, and more" |
|
|
class="w-full bg-gray-700 px-3 py-2 rounded-md focus:outline-none"> |
|
|
</div> |
|
|
<div class="p-4 grid grid-cols-3 gap-4"> |
|
|
<div class="flex flex-col items-center p-3 rounded-md hover:bg-gray-700 cursor-pointer" onclick="openApp('terminal')"> |
|
|
<i class="fas fa-terminal text-2xl mb-2 app-icon"></i> |
|
|
<span class="text-xs">Terminal</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center p-3 rounded-md hover:bg-gray-700 cursor-pointer" onclick="openApp('files')"> |
|
|
<i class="fas fa-folder text-2xl mb-2 folder-icon"></i> |
|
|
<span class="text-xs">Files</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center p-3 rounded-md hover:bg-gray-700 cursor-pointer" onclick="openApp('notes')"> |
|
|
<i class="fas fa-file-alt text-2xl mb-2 file-icon"></i> |
|
|
<span class="text-xs">Notes</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center p-3 rounded-md hover:bg-gray-700 cursor-pointer" onclick="openApp('settings')"> |
|
|
<i class="fas fa-cog text-2xl mb-2 system-icon"></i> |
|
|
<span class="text-xs">Settings</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center p-3 rounded-md hover:bg-gray-700 cursor-pointer" onclick="openApp('novaai')"> |
|
|
<i class="fas fa-robot text-2xl mb-2 app-icon"></i> |
|
|
<span class="text-xs">NovaAI</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center p-3 rounded-md hover:bg-gray-700 cursor-pointer" onclick="openApp('browser')"> |
|
|
<i class="fas fa-globe text-2xl mb-2 file-icon"></i> |
|
|
<span class="text-xs">Browser</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center p-3 rounded-md hover:bg-gray-700 cursor-pointer" onclick="openApp('media')"> |
|
|
<i class="fas fa-music text-2xl mb-2 media-icon"></i> |
|
|
<span class="text-xs">Media</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center p-3 rounded-md hover:bg-gray-700 cursor-pointer" onclick="openApp('network')"> |
|
|
<i class="fas fa-wifi text-2xl mb-2 network-icon"></i> |
|
|
<span class="text-xs">Network</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center p-3 rounded-md hover:bg-gray-700 cursor-pointer" onclick="openApp('calculator')"> |
|
|
<i class="fas fa-calculator text-2xl mb-2 utility-icon"></i> |
|
|
<span class="text-xs">Calculator</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center p-3 rounded-md hover:bg-gray-700 cursor-pointer" onclick="openApp('game')"> |
|
|
<i class="fas fa-gamepad text-2xl mb-2 game-icon"></i> |
|
|
<span class="text-xs">Games</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute bottom-0 left-0 right-0 p-3 border-t border-gray-700 flex justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center mr-2"> |
|
|
<i class="fas fa-user text-sm"></i> |
|
|
</div> |
|
|
<span>Dineth</span> |
|
|
</div> |
|
|
<div class="power-button" onclick="shutdown()"> |
|
|
<i class="fas fa-power-off"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="taskbar fixed bottom-0 left-0 right-0 h-12 flex items-center px-2 z-20"> |
|
|
<button id="startButton" class="h-10 px-3 rounded-md flex items-center hover:bg-gray-700" onclick="toggleStartMenu()"> |
|
|
<i class="fas fa-rocket text-blue-400 mr-2"></i> |
|
|
<span>Nova</span> |
|
|
</button> |
|
|
|
|
|
<div class="flex-1 flex items-center px-2 space-x-1" id="taskbarApps"> |
|
|
<div id="terminalTaskbar" class="taskbar-app" onclick="focusWindow('terminal')"> |
|
|
<i class="fas fa-terminal mr-2"></i> |
|
|
<span>Terminal</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="cursor-pointer p-2 rounded-md hover:bg-gray-700" onclick="toggleAIPanel()"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<div class="text-sm p-2 rounded-md hover:bg-gray-700 cursor-pointer flex items-center"> |
|
|
<i class="fas fa-wifi mr-2"></i> |
|
|
<div id="currentTime">00:00</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="desktopContextMenu" class="context-menu"> |
|
|
<div class="context-menu-item" onclick="openApp('files')"> |
|
|
<i class="fas fa-folder-open mr-2"></i> Open |
|
|
</div> |
|
|
<div class="context-menu-item" onclick="showNotification('New folder created')"> |
|
|
<i class="fas fa-folder-plus mr-2"></i> New Folder |
|
|
</div> |
|
|
<div class="context-menu-item" onclick="showNotification('New file created')"> |
|
|
<i class="fas fa-file-alt mr-2"></i> New File |
|
|
</div> |
|
|
<div class="border-t border-gray-700 my-1"></div> |
|
|
<div class="context-menu-item" onclick="showSettingsTab('appearance')"> |
|
|
<i class="fas fa-palette mr-2"></i> Display Settings |
|
|
</div> |
|
|
<div class="context-menu-item" onclick="showNotification('Personalize options opened')"> |
|
|
<i class="fas fa-sliders-h mr-2"></i> Personalize |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="iconContextMenu" class="context-menu"> |
|
|
<div class="context-menu-item" onclick="openAppFromContext()"> |
|
|
<i class="fas fa-play mr-2"></i> Open |
|
|
</div> |
|
|
<div class="context-menu-item" onclick="showNotification('Application pinned to taskbar')"> |
|
|
<i class="fas fa-thumbtack mr-2"></i> Pin to Taskbar |
|
|
</div> |
|
|
<div class="context-menu-item" onclick="showNotification('Application shortcut created')"> |
|
|
<i class="fas fa-link mr-2"></i> Create Shortcut |
|
|
</div> |
|
|
<div class="border-t border-gray-700 my-1"></div> |
|
|
<div class="context-menu-item" onclick="showNotification('Application renamed')"> |
|
|
<i class="fas fa-i-cursor mr-2"></i> Rename |
|
|
</div> |
|
|
<div class="context-menu-item" onclick="showNotification('Application deleted')"> |
|
|
<i class="fas fa-trash mr-2"></i> Delete |
|
|
</div> |
|
|
<div class="context-menu-item" onclick="showNotification('Properties displayed')"> |
|
|
<i class="fas fa-info-circle mr-2"></i> Properties |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="notification" class="notification"> |
|
|
<div class="flex items-start"> |
|
|
<div class="mr-3 text-blue-400"> |
|
|
<i class="fas fa-info-circle"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium">Notification</div> |
|
|
<div class="text-sm opacity-80" id="notificationMessage">This is a notification</div> |
|
|
</div> |
|
|
<button class="ml-4 opacity-70 hover:opacity-100" onclick="hideNotification()"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
let activeApps = {}; |
|
|
let isStartMenuOpen = false; |
|
|
let isLocked = true; |
|
|
let isLoggedIn = false; |
|
|
let currentContextApp = ''; |
|
|
let calculatorValue = '0'; |
|
|
let calculatorOperation = ''; |
|
|
let calculatorPreviousValue = ''; |
|
|
let isMusicPlaying = false; |
|
|
let musicProgress = 0; |
|
|
let musicInterval; |
|
|
let gameCards = []; |
|
|
let flippedCards = []; |
|
|
let matchedPairs = 0; |
|
|
let movesCount = 0; |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
updateClock(); |
|
|
setInterval(updateClock, 1000); |
|
|
|
|
|
setupTerminal(); |
|
|
initWindowDrag(); |
|
|
setupMediaPlayer(); |
|
|
setupCalculator(); |
|
|
startGame(); |
|
|
document.getElementById('loginScreen').style.display = 'flex'; |
|
|
|
|
|
document.getElementById('darkModeToggle').addEventListener('change', function() { |
|
|
document.documentElement.classList.toggle('dark', this.checked); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', function(e) { |
|
|
if (!e.target.closest('.context-menu')) { |
|
|
hideContextMenus(); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
function updateClock() { |
|
|
const now = new Date(); |
|
|
const timeStr = now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}); |
|
|
const dateStr = now.toLocaleDateString([], {weekday: 'long', month: 'long', day: 'numeric'}); |
|
|
|
|
|
document.getElementById('currentTime').textContent = timeStr; |
|
|
|
|
|
if(document.getElementById('lockScreen').style.display === 'flex') { |
|
|
document.getElementById('lockTime').textContent = timeStr; |
|
|
document.getElementById('lockDate').textContent = dateStr; |
|
|
} |
|
|
} |
|
|
|
|
|
function login() { |
|
|
const username = document.getElementById('username').value; |
|
|
const password = document.getElementById('password').value; |
|
|
|
|
|
if(!username || !password) { |
|
|
showNotification('Please enter both username and password'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const loginScreen = document.getElementById('loginScreen'); |
|
|
loginScreen.style.opacity = '0'; |
|
|
|
|
|
setTimeout(() => { |
|
|
loginScreen.style.display = 'none'; |
|
|
isLoggedIn = true; |
|
|
document.getElementById('lockScreen').style.display = 'flex'; |
|
|
showNotification('Welcome to Nova OS!'); |
|
|
}, 500); |
|
|
} |
|
|
|
|
|
function unlockScreen() { |
|
|
const lockScreen = document.getElementById('lockScreen'); |
|
|
lockScreen.style.opacity = '0'; |
|
|
|
|
|
setTimeout(() => { |
|
|
lockScreen.style.display = 'none'; |
|
|
isLocked = false; |
|
|
showNotification('Session unlocked'); |
|
|
}, 500); |
|
|
} |
|
|
|
|
|
function lockScreen() { |
|
|
document.getElementById('lockScreen').style.display = 'flex'; |
|
|
document.getElementById('lockScreen').style.opacity = '1'; |
|
|
isLocked = true; |
|
|
closeStartMenu(); |
|
|
showNotification('Session locked'); |
|
|
} |
|
|
|
|
|
function shutdown() { |
|
|
showNotification('Shutting down Nova OS...'); |
|
|
setTimeout(() => { |
|
|
document.getElementById('loginScreen').style.display = 'flex'; |
|
|
document.getElementById('loginScreen').style.opacity = '1'; |
|
|
document.getElementById('lockScreen').style.display = 'none'; |
|
|
isLoggedIn = false; |
|
|
isLocked = true; |
|
|
|
|
|
|
|
|
Object.keys(activeApps).forEach(app => { |
|
|
closeWindow(app); |
|
|
}); |
|
|
}, 1000); |
|
|
} |
|
|
|
|
|
function openApp(appName) { |
|
|
if(isLocked) return; |
|
|
|
|
|
const windowId = appName + 'Window'; |
|
|
const windowElement = document.getElementById(windowId); |
|
|
|
|
|
if(!windowElement) return; |
|
|
|
|
|
windowElement.style.display = 'block'; |
|
|
bringToFront(windowElement); |
|
|
activeApps[appName] = true; |
|
|
updateTaskbar(); |
|
|
closeStartMenu(); |
|
|
|
|
|
|
|
|
if (!document.getElementById(appName + 'Taskbar')) { |
|
|
const taskbarApp = document.createElement('div'); |
|
|
taskbarApp.className = 'taskbar-app'; |
|
|
taskbarApp.id = appName + 'Taskbar'; |
|
|
taskbarApp.innerHTML = `<i class="fas ${getAppIcon(appName)} mr-2"></i><span>${getAppName(appName)}</span>`; |
|
|
taskbarApp.onclick = () => focusWindow(appName); |
|
|
document.getElementById('taskbarApps').appendChild(taskbarApp); |
|
|
} |
|
|
} |
|
|
|
|
|
function getAppIcon(appName) { |
|
|
const icons = { |
|
|
'terminal': 'fa-terminal', |
|
|
'files': 'fa-folder', |
|
|
'notes': 'fa-file-alt', |
|
|
'settings': 'fa-cog', |
|
|
'novaai': 'fa-robot', |
|
|
'browser': 'fa-globe', |
|
|
'media': 'fa-music', |
|
|
'network': 'fa-wifi', |
|
|
'calculator': 'fa-calculator', |
|
|
'game': 'fa-gamepad' |
|
|
}; |
|
|
return icons[appName] || 'fa-question'; |
|
|
} |
|
|
|
|
|
function getAppName(appName) { |
|
|
const names = { |
|
|
'terminal': 'Terminal', |
|
|
'files': 'Files', |
|
|
'notes': 'Notes', |
|
|
'settings': 'Settings', |
|
|
'novaai': 'NovaAI', |
|
|
'browser': 'Browser', |
|
|
'media': 'Media', |
|
|
'network': 'Network', |
|
|
'calculator': 'Calculator', |
|
|
'game': 'Games' |
|
|
}; |
|
|
return names[appName] || appName; |
|
|
} |
|
|
|
|
|
function closeWindow(appName) { |
|
|
const windowId = appName + 'Window'; |
|
|
const windowElement = document.getElementById(windowId); |
|
|
|
|
|
if(windowElement) windowElement.style.display = 'none'; |
|
|
|
|
|
delete activeApps[appName]; |
|
|
updateTaskbar(); |
|
|
} |
|
|
|
|
|
function minimizeWindow(appName) { |
|
|
const windowId = appName + 'Window'; |
|
|
const windowElement = document.getElementById(windowId); |
|
|
|
|
|
if(windowElement) windowElement.style.display = 'none'; |
|
|
|
|
|
|
|
|
activeApps[appName] = true; |
|
|
updateTaskbar(); |
|
|
} |
|
|
|
|
|
function bringToFront(element) { |
|
|
const windows = document.querySelectorAll('.window'); |
|
|
let maxZIndex = 10; |
|
|
|
|
|
windows.forEach(window => { |
|
|
const zIndex = parseInt(window.style.zIndex || '0'); |
|
|
if(zIndex > maxZIndex) maxZIndex = zIndex; |
|
|
window.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
element.style.zIndex = maxZIndex + 1; |
|
|
element.classList.add('active'); |
|
|
|
|
|
|
|
|
const appName = element.id.replace('Window', ''); |
|
|
document.querySelectorAll('.taskbar-app').forEach(app => { |
|
|
app.classList.remove('active'); |
|
|
}); |
|
|
const taskbarApp = document.getElementById(appName + 'Taskbar'); |
|
|
if (taskbarApp) { |
|
|
taskbarApp.classList.add('active'); |
|
|
} |
|
|
} |
|
|
|
|
|
function focusWindow(appName) { |
|
|
const windowId = appName + 'Window'; |
|
|
const windowElement = document.getElementById(windowId); |
|
|
|
|
|
if(windowElement && windowElement.style.display === 'block') { |
|
|
bringToFront(windowElement); |
|
|
} else { |
|
|
openApp(appName); |
|
|
} |
|
|
} |
|
|
|
|
|
function updateTaskbar() { |
|
|
document.querySelectorAll('.taskbar-app').forEach(app => { |
|
|
const appName = app.id.replace('Taskbar', ''); |
|
|
const windowElement = document.getElementById(appName + 'Window'); |
|
|
|
|
|
if (windowElement && windowElement.style.display === 'block') { |
|
|
app.classList.add('active'); |
|
|
} else { |
|
|
app.classList.remove('active'); |
|
|
} |
|
|
|
|
|
|
|
|
if (!activeApps[appName] && appName !== 'terminal') { |
|
|
app.remove(); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
function toggleStartMenu() { |
|
|
if(isStartMenuOpen) { |
|
|
closeStartMenu(); |
|
|
} else { |
|
|
openStartMenu(); |
|
|
} |
|
|
} |
|
|
|
|
|
function openStartMenu() { |
|
|
if(isLocked) return; |
|
|
|
|
|
const startMenu = document.getElementById('startMenu'); |
|
|
startMenu.style.display = 'block'; |
|
|
bringToFront(startMenu); |
|
|
isStartMenuOpen = true; |
|
|
} |
|
|
|
|
|
function closeStartMenu() { |
|
|
document.getElementById('startMenu').style.display = 'none'; |
|
|
isStartMenuOpen = false; |
|
|
} |
|
|
|
|
|
function toggleAIPanel() { |
|
|
const aiPanel = document.getElementById('novaaiWindow'); |
|
|
if(aiPanel.style.display === 'block') { |
|
|
closeWindow('novaai'); |
|
|
} else { |
|
|
openApp('novaai'); |
|
|
|
|
|
</html> |
