Hugging Face's logo

Spaces:
dineth554
/
tres
Running

App Files Community
dineth554 commited on
Commit
7ab0e24
·
verified ·
1 Parent(s): 8680d47

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1361 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Tres
3
- emoji: 🏢
4
- colorFrom: indigo
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: tres
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1361 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Nova OS by Dineth Nethsara</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @keyframes gradientBG {
11
+ 0% { background-position: 0% 50%; }
12
+ 50% { background-position: 100% 50%; }
13
+ 100% { background-position: 0% 50%; }
14
+ }
15
+ .animated-bg {
16
+ background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
17
+ background-size: 400% 400%;
18
+ animation: gradientBG 15s ease infinite;
19
+ }
20
+ .window {
21
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
22
+ border-radius: 12px;
23
+ overflow: hidden;
24
+ position: absolute;
25
+ resize: both;
26
+ min-width: 300px;
27
+ min-height: 200px;
28
+ display: none;
29
+ border: 1px solid rgba(255,255,255,0.1);
30
+ transition: all 0.2s ease;
31
+ backdrop-filter: blur(5px);
32
+ background: rgba(30, 41, 59, 0.85);
33
+ }
34
+ .window.active {
35
+ transform: translateY(-5px);
36
+ box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
37
+ }
38
+ .window-header {
39
+ cursor: move;
40
+ user-select: none;
41
+ background: linear-gradient(to right, #3b82f6, #6366f1);
42
+ color: white;
43
+ padding: 8px 12px;
44
+ font-weight: 500;
45
+ border-bottom: 1px solid rgba(255,255,255,0.1);
46
+ }
47
+ .desktop-icon {
48
+ transition: all 0.2s ease;
49
+ width: 84px;
50
+ height: 84px;
51
+ display: flex;
52
+ flex-direction: column;
53
+ align-items: center;
54
+ justify-content: center;
55
+ border-radius: 10px;
56
+ margin: 12px;
57
+ padding: 8px;
58
+ text-align: center;
59
+ backdrop-filter: blur(5px);
60
+ background: rgba(255,255,255,0.05);
61
+ }
62
+ .desktop-icon:hover {
63
+ transform: scale(1.08);
64
+ background-color: rgba(255, 255, 255, 0.2);
65
+ box-shadow: 0 5px 15px rgba(0,0,0,0.2);
66
+ }
67
+ .desktop-icon:active {
68
+ transform: scale(0.98);
69
+ }
70
+ .terminal-line::before {
71
+ content: "> ";
72
+ color: #4ade80;
73
+ font-weight: bold;
74
+ }
75
+ .login-screen, .lock-screen {
76
+ backdrop-filter: blur(15px);
77
+ transition: all 0.5s ease;
78
+ }
79
+ .ai-panel {
80
+ transition: all 0.3s ease;
81
+ box-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
82
+ border: 1px solid rgba(255,255,255,0.1);
83
+ }
84
+ .taskbar {
85
+ background: rgba(30, 41, 59, 0.9);
86
+ backdrop-filter: blur(10px);
87
+ border-top: 1px solid rgba(255,255,255,0.1);
88
+ box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
89
+ }
90
+ .start-menu {
91
+ background: rgba(30, 41, 59, 0.95);
92
+ backdrop-filter: blur(15px);
93
+ border: 1px solid rgba(255,255,255,0.1);
94
+ box-shadow: 0 10px 30px rgba(0,0,0,0.3);
95
+ border-radius: 12px;
96
+ border-bottom-left-radius: 0;
97
+ border-bottom-right-radius: 0;
98
+ }
99
+ ::-webkit-scrollbar { width: 8px; height: 8px; }
100
+ ::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
101
+ ::-webkit-scrollbar-thumb {
102
+ background: rgba(255,255,255,0.2);
103
+ border-radius: 4px;
104
+ }
105
+ ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }
106
+ .file-icon { color: #3b82f6; }
107
+ .folder-icon { color: #f59e0b; }
108
+ .app-icon { color: #8b5cf6; }
109
+ .system-icon { color: #10b981; }
110
+ .media-icon { color: #ec4899; }
111
+ .network-icon { color: #f97316; }
112
+ .utility-icon { color: #06b6d4; }
113
+ .game-icon { color: #ef4444; }
114
+
115
+ .window-controls button {
116
+ width: 16px;
117
+ height: 16px;
118
+ border-radius: 50%;
119
+ display: flex;
120
+ align-items: center;
121
+ justify-content: center;
122
+ font-size: 8px;
123
+ transition: all 0.2s ease;
124
+ }
125
+ .window-controls button:hover {
126
+ transform: scale(1.1);
127
+ }
128
+
129
+ .taskbar-app {
130
+ transition: all 0.2s ease;
131
+ border-radius: 6px;
132
+ padding: 6px 12px;
133
+ }
134
+ .taskbar-app:hover {
135
+ background: rgba(255,255,255,0.1);
136
+ }
137
+ .taskbar-app.active {
138
+ background: rgba(255,255,255,0.2);
139
+ border-bottom: 2px solid #3b82f6;
140
+ }
141
+
142
+ .context-menu {
143
+ position: absolute;
144
+ background: rgba(30, 41, 59, 0.95);
145
+ backdrop-filter: blur(10px);
146
+ border: 1px solid rgba(255,255,255,0.1);
147
+ border-radius: 8px;
148
+ box-shadow: 0 5px 20px rgba(0,0,0,0.3);
149
+ padding: 6px 0;
150
+ z-index: 1000;
151
+ display: none;
152
+ }
153
+ .context-menu-item {
154
+ padding: 8px 16px;
155
+ cursor: pointer;
156
+ transition: all 0.2s ease;
157
+ }
158
+ .context-menu-item:hover {
159
+ background: rgba(255,255,255,0.1);
160
+ }
161
+
162
+ .notification {
163
+ position: fixed;
164
+ top: 20px;
165
+ right: 20px;
166
+ background: rgba(30, 41, 59, 0.95);
167
+ backdrop-filter: blur(10px);
168
+ border: 1px solid rgba(255,255,255,0.1);
169
+ border-radius: 8px;
170
+ padding: 12px 16px;
171
+ box-shadow: 0 5px 20px rgba(0,0,0,0.3);
172
+ transform: translateX(120%);
173
+ transition: all 0.3s ease;
174
+ z-index: 1000;
175
+ max-width: 300px;
176
+ }
177
+ .notification.show {
178
+ transform: translateX(0);
179
+ }
180
+
181
+ .file-explorer-item {
182
+ transition: all 0.2s ease;
183
+ border-radius: 6px;
184
+ }
185
+ .file-explorer-item:hover {
186
+ background: rgba(255,255,255,0.1);
187
+ }
188
+
189
+ .music-progress {
190
+ height: 4px;
191
+ border-radius: 2px;
192
+ background: rgba(255,255,255,0.2);
193
+ }
194
+ .music-progress-fill {
195
+ height: 100%;
196
+ border-radius: 2px;
197
+ background: #3b82f6;
198
+ width: 30%;
199
+ }
200
+
201
+ .browser-tab {
202
+ background: rgba(255,255,255,0.1);
203
+ border-radius: 6px 6px 0 0;
204
+ padding: 6px 12px;
205
+ margin-right: 4px;
206
+ cursor: pointer;
207
+ transition: all 0.2s ease;
208
+ }
209
+ .browser-tab:hover {
210
+ background: rgba(255,255,255,0.2);
211
+ }
212
+ .browser-tab.active {
213
+ background: rgba(255,255,255,0.3);
214
+ }
215
+
216
+ .settings-option {
217
+ background: rgba(255,255,255,0.05);
218
+ border-radius: 8px;
219
+ padding: 12px;
220
+ transition: all 0.2s ease;
221
+ }
222
+ .settings-option:hover {
223
+ background: rgba(255,255,255,0.1);
224
+ }
225
+
226
+ .power-button {
227
+ width: 40px;
228
+ height: 40px;
229
+ border-radius: 50%;
230
+ display: flex;
231
+ align-items: center;
232
+ justify-content: center;
233
+ background: rgba(255,255,255,0.1);
234
+ transition: all 0.2s ease;
235
+ }
236
+ .power-button:hover {
237
+ background: rgba(255,255,255,0.2);
238
+ transform: scale(1.1);
239
+ }
240
+
241
+ @keyframes pulse {
242
+ 0% { transform: scale(1); }
243
+ 50% { transform: scale(1.05); }
244
+ 100% { transform: scale(1); }
245
+ }
246
+ .pulse {
247
+ animation: pulse 2s infinite;
248
+ }
249
+ </style>
250
+ </head>
251
+ <body class="overflow-hidden h-screen bg-gray-900 text-white font-sans">
252
+ <!-- Lock Screen -->
253
+ <div id="lockScreen" class="lock-screen fixed inset-0 z-50 flex flex-col items-center justify-center bg-gray-900 bg-opacity-90">
254
+ <div class="text-center mb-8">
255
+ <div class="text-7xl font-light mb-2" id="lockTime">00:00</div>
256
+ <div class="text-xl opacity-80 mb-10" id="lockDate">Monday, January 1</div>
257
+ <div class="flex items-center justify-center mb-6">
258
+ <div class="w-16 h-16 rounded-full bg-blue-600 flex items-center justify-center mr-4">
259
+ <i class="fas fa-user text-2xl"></i>
260
+ </div>
261
+ <div class="text-left">
262
+ <div class="text-xl font-medium">Dineth Nethsara</div>
263
+ <div class="text-sm opacity-70">Administrator</div>
264
+ </div>
265
+ </div>
266
+ <div class="text-lg opacity-60 mb-10">Built with ❤️ by Dineth Nethsara</div>
267
+ <div class="flex space-x-4">
268
+ <div class="px-6 py-3 rounded-full bg-white bg-opacity-10 hover:bg-opacity-20 cursor-pointer transition flex items-center"
269
+ onclick="unlockScreen()">
270
+ <i class="fas fa-unlock mr-2"></i> Unlock
271
+ </div>
272
+ <div class="px-6 py-3 rounded-full bg-white bg-opacity-10 hover:bg-opacity-20 cursor-pointer transition flex items-center"
273
+ onclick="shutdown()">
274
+ <i class="fas fa-power-off mr-2"></i> Power
275
+ </div>
276
+ </div>
277
+ </div>
278
+ </div>
279
+
280
+ <!-- Login Screen -->
281
+ <div id="loginScreen" class="login-screen fixed inset-0 z-40 flex items-center justify-center bg-gray-900 bg-opacity-90">
282
+ <div class="bg-gray-800 bg-opacity-80 rounded-xl p-8 w-96 shadow-2xl transform transition-all duration-500">
283
+ <div class="text-center mb-8">
284
+ <div class="text-5xl font-light mb-2 flex items-center justify-center">
285
+ <i class="fas fa-rocket mr-3 text-blue-400"></i>
286
+ <span>Nova OS</span>
287
+ </div>
288
+ <div class="text-sm opacity-70">by Dineth Nethsara</div>
289
+ </div>
290
+ <div class="space-y-4">
291
+ <div>
292
+ <label class="block text-sm font-medium mb-1 opacity-80">Username</label>
293
+ <input type="text" id="username" placeholder="Enter your username"
294
+ 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">
295
+ </div>
296
+ <div>
297
+ <label class="block text-sm font-medium mb-1 opacity-80">Password</label>
298
+ <input type="password" id="password" placeholder="Enter your password"
299
+ 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">
300
+ </div>
301
+ <div class="flex items-center justify-between mt-2">
302
+ <label class="flex items-center text-sm opacity-70">
303
+ <input type="checkbox" class="rounded bg-gray-700 border-gray-600 mr-2">
304
+ Remember me
305
+ </label>
306
+ <a href="#" class="text-sm text-blue-400 hover:text-blue-300">Forgot password?</a>
307
+ </div>
308
+ <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">
309
+ <i class="fas fa-sign-in-alt mr-2"></i> Sign In
310
+ </button>
311
+ </div>
312
+ <div class="text-center mt-6 text-sm opacity-70">
313
+ Don't have an account? <a href="#" class="text-blue-400 hover:text-blue-300">Create one</a>
314
+ </div>
315
+ </div>
316
+ </div>
317
+
318
+ <!-- Desktop -->
319
+ <div id="desktop" class="animated-bg h-screen w-screen relative overflow-hidden" oncontextmenu="showDesktopContextMenu(event)">
320
+ <!-- Desktop Icons -->
321
+ <div class="absolute left-4 top-4 flex flex-wrap" style="width: 500px;">
322
+ <div class="desktop-icon" onclick="openApp('terminal')" oncontextmenu="showIconContextMenu(event, 'terminal')">
323
+ <div class="text-4xl mb-1 app-icon"><i class="fas fa-terminal"></i></div>
324
+ <div class="text-xs text-center">Terminal</div>
325
+ </div>
326
+ <div class="desktop-icon" onclick="openApp('files')" oncontextmenu="showIconContextMenu(event, 'files')">
327
+ <div class="text-4xl mb-1 folder-icon"><i class="fas fa-folder"></i></div>
328
+ <div class="text-xs text-center">Files</div>
329
+ </div>
330
+ <div class="desktop-icon" onclick="openApp('notes')" oncontextmenu="showIconContextMenu(event, 'notes')">
331
+ <div class="text-4xl mb-1 file-icon"><i class="fas fa-file-alt"></i></div>
332
+ <div class="text-xs text-center">Notes</div>
333
+ </div>
334
+ <div class="desktop-icon" onclick="openApp('settings')" oncontextmenu="showIconContextMenu(event, 'settings')">
335
+ <div class="text-4xl mb-1 system-icon"><i class="fas fa-cog"></i></div>
336
+ <div class="text-xs text-center">Settings</div>
337
+ </div>
338
+ <div class="desktop-icon" onclick="openApp('novaai')" oncontextmenu="showIconContextMenu(event, 'novaai')">
339
+ <div class="text-4xl mb-1 app-icon"><i class="fas fa-robot"></i></div>
340
+ <div class="text-xs text-center">NovaAI</div>
341
+ </div>
342
+ <div class="desktop-icon" onclick="openApp('browser')" oncontextmenu="showIconContextMenu(event, 'browser')">
343
+ <div class="text-4xl mb-1 file-icon"><i class="fas fa-globe"></i></div>
344
+ <div class="text-xs text-center">Browser</div>
345
+ </div>
346
+ <div class="desktop-icon" onclick="openApp('media')" oncontextmenu="showIconContextMenu(event, 'media')">
347
+ <div class="text-4xl mb-1 media-icon"><i class="fas fa-music"></i></div>
348
+ <div class="text-xs text-center">Media Player</div>
349
+ </div>
350
+ <div class="desktop-icon" onclick="openApp('network')" oncontextmenu="showIconContextMenu(event, 'network')">
351
+ <div class="text-4xl mb-1 network-icon"><i class="fas fa-wifi"></i></div>
352
+ <div class="text-xs text-center">Network</div>
353
+ </div>
354
+ <div class="desktop-icon" onclick="openApp('calculator')" oncontextmenu="showIconContextMenu(event, 'calculator')">
355
+ <div class="text-4xl mb-1 utility-icon"><i class="fas fa-calculator"></i></div>
356
+ <div class="text-xs text-center">Calculator</div>
357
+ </div>
358
+ <div class="desktop-icon" onclick="openApp('game')" oncontextmenu="showIconContextMenu(event, 'game')">
359
+ <div class="text-4xl mb-1 game-icon"><i class="fas fa-gamepad"></i></div>
360
+ <div class="text-xs text-center">Games</div>
361
+ </div>
362
+ </div>
363
+
364
+ <!-- App Windows -->
365
+ <div id="terminalWindow" class="window bg-gray-800" style="width: 600px; height: 400px; top: 100px; left: 200px;">
366
+ <div class="window-header px-3 py-2 flex justify-between items-center">
367
+ <div class="flex items-center space-x-2">
368
+ <i class="fas fa-terminal"></i>
369
+ <span>Terminal</span>
370
+ </div>
371
+ <div class="flex space-x-2 window-controls">
372
+ <button class="bg-gray-500 hover:bg-gray-400" onclick="minimizeWindow('terminal')">
373
+ <i class="fas fa-minus"></i>
374
+ </button>
375
+ <button class="bg-red-500 hover:bg-red-400" onclick="closeWindow('terminal')">
376
+ <i class="fas fa-times"></i>
377
+ </button>
378
+ </div>
379
+ </div>
380
+ <div class="p-3 h-full overflow-auto font-mono text-sm bg-gray-900" id="terminalContent">
381
+ <div class="terminal-line">Nova OS Terminal v2.4.1</div>
382
+ <div class="terminal-line">Type 'help' for available commands</div>
383
+ <div class="terminal-line">&nbsp;</div>
384
+ <div class="terminal-line">user@nova-os:~$ <span class="terminal-input" contenteditable="true"></span></div>
385
+ </div>
386
+ </div>
387
+
388
+ <div id="filesWindow" class="window bg-gray-800" style="width: 700px; height: 500px; top: 150px; left: 300px;">
389
+ <div class="window-header px-3 py-2 flex justify-between items-center">
390
+ <div class="flex items-center space-x-2">
391
+ <i class="fas fa-folder"></i>
392
+ <span>File Explorer</span>
393
+ </div>
394
+ <div class="flex space-x-2 window-controls">
395
+ <button class="bg-gray-500 hover:bg-gray-400" onclick="minimizeWindow('files')">
396
+ <i class="fas fa-minus"></i>
397
+ </button>
398
+ <button class="bg-red-500 hover:bg-red-400" onclick="closeWindow('files')">
399
+ <i class="fas fa-times"></i>
400
+ </button>
401
+ </div>
402
+ </div>
403
+ <div class="flex h-full">
404
+ <div class="w-48 bg-gray-800 border-r border-gray-700 p-2">
405
+ <div class="space-y-1">
406
+ <div class="file-explorer-item p-2 flex items-center" onclick="openFolder('home')">
407
+ <i class="fas fa-home mr-2 folder-icon"></i>
408
+ <span>Home</span>
409
+ </div>
410
+ <div class="file-explorer-item p-2 flex items-center" onclick="openFolder('downloads')">
411
+ <i class="fas fa-download mr-2 folder-icon"></i>
412
+ <span>Downloads</span>
413
+ </div>
414
+ <div class="file-explorer-item p-2 flex items-center" onclick="openFolder('documents')">
415
+ <i class="fas fa-file mr-2 folder-icon"></i>
416
+ <span>Documents</span>
417
+ </div>
418
+ <div class="file-explorer-item p-2 flex items-center" onclick="openFolder('pictures')">
419
+ <i class="fas fa-image mr-2 folder-icon"></i>
420
+ <span>Pictures</span>
421
+ </div>
422
+ <div class="file-explorer-item p-2 flex items-center" onclick="openFolder('music')">
423
+ <i class="fas fa-music mr-2 folder-icon"></i>
424
+ <span>Music</span>
425
+ </div>
426
+ <div class="file-explorer-item p-2 flex items-center" onclick="openFolder('videos')">
427
+ <i class="fas fa-film mr-2 folder-icon"></i>
428
+ <span>Videos</span>
429
+ </div>
430
+ <div class="file-explorer-item p-2 flex items-center" onclick="openFolder('desktop')">
431
+ <i class="fas fa-desktop mr-2 folder-icon"></i>
432
+ <span>Desktop</span>
433
+ </div>
434
+ </div>
435
+ </div>
436
+ <div class="flex-1 p-4 overflow-auto">
437
+ <div class="flex items-center mb-4">
438
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-l-md">
439
+ <i class="fas fa-arrow-left"></i>
440
+ </button>
441
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-r-md -ml-px">
442
+ <i class="fas fa-arrow-right"></i>
443
+ </button>
444
+ <div class="ml-2 bg-gray-700 px-3 py-1 rounded-md flex-1">
445
+ <i class="fas fa-home mr-2"></i>
446
+ <span>Home</span>
447
+ </div>
448
+ <button class="ml-2 bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-md">
449
+ <i class="fas fa-search"></i>
450
+ </button>
451
+ </div>
452
+ <div class="grid grid-cols-4 gap-4">
453
+ <div class="p-3 rounded-md hover:bg-gray-700 cursor-pointer flex flex-col items-center" onclick="openFolder('documents')">
454
+ <i class="fas fa-file text-3xl mb-2 file-icon"></i>
455
+ <span>Document.txt</span>
456
+ </div>
457
+ <div class="p-3 rounded-md hover:bg-gray-700 cursor-pointer flex flex-col items-center" onclick="openFolder('images')">
458
+ <i class="fas fa-image text-3xl mb-2 file-icon"></i>
459
+ <span>Image.jpg</span>
460
+ </div>
461
+ <div class="p-3 rounded-md hover:bg-gray-700 cursor-pointer flex flex-col items-center" onclick="openFolder('music')">
462
+ <i class="fas fa-music text-3xl mb-2 file-icon"></i>
463
+ <span>Song.mp3</span>
464
+ </div>
465
+ <div class="p-3 rounded-md hover:bg-gray-700 cursor-pointer flex flex-col items-center" onclick="openFolder('videos')">
466
+ <i class="fas fa-film text-3xl mb-2 file-icon"></i>
467
+ <span>Video.mp4</span>
468
+ </div>
469
+ <div class="p-3 rounded-md hover:bg-gray-700 cursor-pointer flex flex-col items-center" onclick="openFolder('archives')">
470
+ <i class="fas fa-file-archive text-3xl mb-2 file-icon"></i>
471
+ <span>Archive.zip</span>
472
+ </div>
473
+ <div class="p-3 rounded-md hover:bg-gray-700 cursor-pointer flex flex-col items-center" onclick="openFolder('code')">
474
+ <i class="fas fa-file-code text-3xl mb-2 file-icon"></i>
475
+ <span>Script.js</span>
476
+ </div>
477
+ </div>
478
+ </div>
479
+ </div>
480
+ </div>
481
+
482
+ <div id="notesWindow" class="window bg-gray-800" style="width: 500px; height: 400px; top: 200px; left: 400px;">
483
+ <div class="window-header px-3 py-2 flex justify-between items-center">
484
+ <div class="flex items-center space-x-2">
485
+ <i class="fas fa-file-alt"></i>
486
+ <span>Notes</span>
487
+ </div>
488
+ <div class="flex space-x-2 window-controls">
489
+ <button class="bg-gray-500 hover:bg-gray-400" onclick="minimizeWindow('notes')">
490
+ <i class="fas fa-minus"></i>
491
+ </button>
492
+ <button class="bg-red-500 hover:bg-red-400" onclick="closeWindow('notes')">
493
+ <i class="fas fa-times"></i>
494
+ </button>
495
+ </div>
496
+ </div>
497
+ <div class="p-4 h-full flex flex-col">
498
+ <div class="flex mb-4">
499
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-md mr-2">
500
+ <i class="fas fa-save"></i> Save
501
+ </button>
502
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-md">
503
+ <i class="fas fa-file"></i> New
504
+ </button>
505
+ </div>
506
+ <div class="flex-1">
507
+ <textarea class="w-full h-full bg-gray-900 p-3 rounded-md focus:outline-none resize-none"
508
+ placeholder="Start typing your notes here..."></textarea>
509
+ </div>
510
+ </div>
511
+ </div>
512
+
513
+ <div id="settingsWindow" class="window bg-gray-800" style="width: 600px; height: 500px; top: 180px; left: 250px;">
514
+ <div class="window-header px-3 py-2 flex justify-between items-center">
515
+ <div class="flex items-center space-x-2">
516
+ <i class="fas fa-cog"></i>
517
+ <span>Settings</span>
518
+ </div>
519
+ <div class="flex space-x-2 window-controls">
520
+ <button class="bg-gray-500 hover:bg-gray-400" onclick="minimizeWindow('settings')">
521
+ <i class="fas fa-minus"></i>
522
+ </button>
523
+ <button class="bg-red-500 hover:bg-red-400" onclick="closeWindow('settings')">
524
+ <i class="fas fa-times"></i>
525
+ </button>
526
+ </div>
527
+ </div>
528
+ <div class="flex h-full">
529
+ <div class="w-48 bg-gray-800 border-r border-gray-700 p-2">
530
+ <div class="space-y-1">
531
+ <div class="file-explorer-item p-2 flex items-center" onclick="showSettingsTab('appearance')">
532
+ <i class="fas fa-palette mr-2"></i>
533
+ <span>Appearance</span>
534
+ </div>
535
+ <div class="file-explorer-item p-2 flex items-center" onclick="showSettingsTab('system')">
536
+ <i class="fas fa-desktop mr-2"></i>
537
+ <span>System</span>
538
+ </div>
539
+ <div class="file-explorer-item p-2 flex items-center" onclick="showSettingsTab('network')">
540
+ <i class="fas fa-wifi mr-2"></i>
541
+ <span>Network</span>
542
+ </div>
543
+ <div class="file-explorer-item p-2 flex items-center" onclick="showSettingsTab('privacy')">
544
+ <i class="fas fa-lock mr-2"></i>
545
+ <span>Privacy</span>
546
+ </div>
547
+ <div class="file-explorer-item p-2 flex items-center" onclick="showSettingsTab('accounts')">
548
+ <i class="fas fa-user mr-2"></i>
549
+ <span>Accounts</span>
550
+ </div>
551
+ <div class="file-explorer-item p-2 flex items-center" onclick="showSettingsTab('updates')">
552
+ <i class="fas fa-sync-alt mr-2"></i>
553
+ <span>Updates</span>
554
+ </div>
555
+ </div>
556
+ </div>
557
+ <div class="flex-1 p-4 overflow-auto" id="settingsContent">
558
+ <h2 class="text-xl font-medium mb-4">Appearance</h2>
559
+ <div class="space-y-6">
560
+ <div class="settings-option">
561
+ <h3 class="text-lg font-medium mb-3">Theme</h3>
562
+ <div class="flex items-center justify-between">
563
+ <span>Dark Mode</span>
564
+ <label class="relative inline-flex items-center cursor-pointer">
565
+ <input type="checkbox" id="darkModeToggle" class="sr-only peer" checked>
566
+ <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>
567
+ </label>
568
+ </div>
569
+ </div>
570
+
571
+ <div class="settings-option">
572
+ <h3 class="text-lg font-medium mb-3">Wallpaper</h3>
573
+ <div class="grid grid-cols-3 gap-3">
574
+ <div class="h-24 rounded-md bg-gradient-to-br from-purple-500 to-pink-500 cursor-pointer" onclick="changeWallpaper('purple-pink')"></div>
575
+ <div class="h-24 rounded-md bg-gradient-to-br from-blue-500 to-teal-500 cursor-pointer" onclick="changeWallpaper('blue-teal')"></div>
576
+ <div class="h-24 rounded-md bg-gradient-to-br from-yellow-500 to-red-500 cursor-pointer" onclick="changeWallpaper('yellow-red')"></div>
577
+ <div class="h-24 rounded-md bg-gradient-to-br from-green-500 to-blue-500 cursor-pointer" onclick="changeWallpaper('green-blue')"></div>
578
+ <div class="h-24 rounded-md bg-gradient-to-br from-indigo-500 to-purple-500 cursor-pointer" onclick="changeWallpaper('indigo-purple')"></div>
579
+ <div class="h-24 rounded-md bg-gradient-to-br from-orange-500 to-yellow-500 cursor-pointer" onclick="changeWallpaper('orange-yellow')"></div>
580
+ </div>
581
+ </div>
582
+
583
+ <div class="settings-option">
584
+ <h3 class="text-lg font-medium mb-3">Accent Color</h3>
585
+ <div class="flex space-x-2">
586
+ <div class="w-8 h-8 rounded-full bg-blue-500 cursor-pointer border-2 border-blue-400" onclick="changeAccentColor('blue')"></div>
587
+ <div class="w-8 h-8 rounded-full bg-purple-500 cursor-pointer" onclick="changeAccentColor('purple')"></div>
588
+ <div class="w-8 h-8 rounded-full bg-pink-500 cursor-pointer" onclick="changeAccentColor('pink')"></div>
589
+ <div class="w-8 h-8 rounded-full bg-red-500 cursor-pointer" onclick="changeAccentColor('red')"></div>
590
+ <div class="w-8 h-8 rounded-full bg-green-500 cursor-pointer" onclick="changeAccentColor('green')"></div>
591
+ <div class="w-8 h-8 rounded-full bg-yellow-500 cursor-pointer" onclick="changeAccentColor('yellow')"></div>
592
+ </div>
593
+ </div>
594
+ </div>
595
+ </div>
596
+ </div>
597
+ </div>
598
+
599
+ <div id="novaaiWindow" class="window bg-gray-800" style="width: 500px; height: 500px; top: 150px; left: 350px;">
600
+ <div class="window-header px-3 py-2 flex justify-between items-center">
601
+ <div class="flex items-center space-x-2">
602
+ <i class="fas fa-robot"></i>
603
+ <span>NovaAI Assistant</span>
604
+ </div>
605
+ <div class="flex space-x-2 window-controls">
606
+ <button class="bg-gray-500 hover:bg-gray-400" onclick="minimizeWindow('novaai')">
607
+ <i class="fas fa-minus"></i>
608
+ </button>
609
+ <button class="bg-red-500 hover:bg-red-400" onclick="closeWindow('novaai')">
610
+ <i class="fas fa-times"></i>
611
+ </button>
612
+ </div>
613
+ </div>
614
+ <div class="p-4 h-full flex flex-col">
615
+ <div class="flex-1 overflow-auto mb-4 space-y-3" id="novaaiChat">
616
+ <div class="bg-gray-700 rounded-lg p-3 mb-3">
617
+ <div class="text-xs text-gray-400 mb-1">NovaAI</div>
618
+ <div>Hello! I'm your NovaAI assistant. How can I help you today?</div>
619
+ </div>
620
+ </div>
621
+ <div class="flex space-x-2">
622
+ <input type="text" id="novaaiInput" placeholder="Ask me anything..."
623
+ class="flex-1 bg-gray-700 px-3 py-2 rounded-md focus:outline-none">
624
+ <button onclick="sendNovaAIMessage()" class="bg-blue-600 hover:bg-blue-700 px-3 py-2 rounded-md">
625
+ <i class="fas fa-paper-plane"></i>
626
+ </button>
627
+ </div>
628
+ </div>
629
+ </div>
630
+
631
+ <div id="browserWindow" class="window bg-gray-800" style="width: 800px; height: 600px; top: 100px; left: 200px;">
632
+ <div class="window-header px-3 py-2 flex justify-between items-center">
633
+ <div class="flex items-center space-x-2">
634
+ <i class="fas fa-globe"></i>
635
+ <span>Nova Browser</span>
636
+ </div>
637
+ <div class="flex space-x-2 window-controls">
638
+ <button class="bg-gray-500 hover:bg-gray-400" onclick="minimizeWindow('browser')">
639
+ <i class="fas fa-minus"></i>
640
+ </button>
641
+ <button class="bg-red-500 hover:bg-red-400" onclick="closeWindow('browser')">
642
+ <i class="fas fa-times"></i>
643
+ </button>
644
+ </div>
645
+ </div>
646
+ <div class="p-4 h-full flex flex-col">
647
+ <div class="flex mb-4">
648
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-l-md">
649
+ <i class="fas fa-arrow-left"></i>
650
+ </button>
651
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-r-md -ml-px">
652
+ <i class="fas fa-arrow-right"></i>
653
+ </button>
654
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-r-md -ml-px">
655
+ <i class="fas fa-sync-alt"></i>
656
+ </button>
657
+ <input type="text" value="https://nova-os.dineth"
658
+ class="flex-1 bg-gray-700 px-3 py-1 focus:outline-none mx-2">
659
+ <button class="bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded-md">
660
+ <i class="fas fa-search"></i>
661
+ </button>
662
+ </div>
663
+ <div class="flex border-b border-gray-700 mb-2">
664
+ <div class="browser-tab active">
665
+ <i class="fas fa-home mr-1"></i> Home
666
+ </div>
667
+ <div class="browser-tab">
668
+ <i class="fas fa-plus"></i>
669
+ </div>
670
+ </div>
671
+ <div class="flex-1 bg-gray-900 rounded-md p-4 overflow-auto">
672
+ <h1 class="text-2xl font-bold mb-4">Welcome to Nova Browser</h1>
673
+ <p class="mb-4">This is a simulated browser experience within Nova OS.</p>
674
+
675
+ <div class="grid grid-cols-4 gap-4 mt-6">
676
+ <div class="p-3 rounded-md hover:bg-gray-800 cursor-pointer flex flex-col items-center">
677
+ <i class="fas fa-search text-3xl mb-2"></i>
678
+ <span>Search</span>
679
+ </div>
680
+ <div class="p-3 rounded-md hover:bg-gray-800 cursor-pointer flex flex-col items-center">
681
+ <i class="fas fa-newspaper text-3xl mb-2"></i>
682
+ <span>News</span>
683
+ </div>
684
+ <div class="p-3 rounded-md hover:bg-gray-800 cursor-pointer flex flex-col items-center">
685
+ <i class="fas fa-shopping-bag text-3xl mb-2"></i>
686
+ <span>Shopping</span>
687
+ </div>
688
+ <div class="p-3 rounded-md hover:bg-gray-800 cursor-pointer flex flex-col items-center">
689
+ <i class="fas fa-envelope text-3xl mb-2"></i>
690
+ <span>Mail</span>
691
+ </div>
692
+ <div class="p-3 rounded-md hover:bg-gray-800 cursor-pointer flex flex-col items-center">
693
+ <i class="fas fa-video text-3xl mb-2"></i>
694
+ <span>Videos</span>
695
+ </div>
696
+ <div class="p-3 rounded-md hover:bg-gray-800 cursor-pointer flex flex-col items-center">
697
+ <i class="fas fa-map text-3xl mb-2"></i>
698
+ <span>Maps</span>
699
+ </div>
700
+ <div class="p-3 rounded-md hover:bg-gray-800 cursor-pointer flex flex-col items-center">
701
+ <i class="fas fa-cloud text-3xl mb-2"></i>
702
+ <span>Drive</span>
703
+ </div>
704
+ <div class="p-3 rounded-md hover:bg-gray-800 cursor-pointer flex flex-col items-center">
705
+ <i class="fas fa-calendar text-3xl mb-2"></i>
706
+ <span>Calendar</span>
707
+ </div>
708
+ </div>
709
+ </div>
710
+ </div>
711
+ </div>
712
+
713
+ <div id="mediaWindow" class="window bg-gray-800" style="width: 500px; height: 400px; top: 150px; left: 300px;">
714
+ <div class="window-header px-3 py-2 flex justify-between items-center">
715
+ <div class="flex items-center space-x-2">
716
+ <i class="fas fa-music"></i>
717
+ <span>Media Player</span>
718
+ </div>
719
+ <div class="flex space-x-2 window-controls">
720
+ <button class="bg-gray-500 hover:bg-gray-400" onclick="minimizeWindow('media')">
721
+ <i class="fas fa-minus"></i>
722
+ </button>
723
+ <button class="bg-red-500 hover:bg-red-400" onclick="closeWindow('media')">
724
+ <i class="fas fa-times"></i>
725
+ </button>
726
+ </div>
727
+ </div>
728
+ <div class="p-4 h-full flex flex-col items-center justify-center">
729
+ <div class="w-40 h-40 bg-gray-700 rounded-full mb-6 flex items-center justify-center shadow-lg">
730
+ <i class="fas fa-music text-4xl"></i>
731
+ </div>
732
+ <div class="text-xl font-medium mb-2">Now Playing</div>
733
+ <div class="text-gray-400 mb-6">Nova OS Theme</div>
734
+ <div class="w-full mb-2">
735
+ <div class="music-progress">
736
+ <div class="music-progress-fill" id="musicProgress"></div>
737
+ </div>
738
+ </div>
739
+ <div class="flex justify-between w-full text-xs text-gray-400 mb-6">
740
+ <span>1:23</span>
741
+ <span>3:45</span>
742
+ </div>
743
+ <div class="flex space-x-4">
744
+ <button class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-gray-600 shadow">
745
+ <i class="fas fa-step-backward"></i>
746
+ </button>
747
+ <button class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center hover:bg-blue-700 shadow" id="playButton">
748
+ <i class="fas fa-play" id="playIcon"></i>
749
+ </button>
750
+ <button class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-gray-600 shadow">
751
+ <i class="fas fa-step-forward"></i>
752
+ </button>
753
+ </div>
754
+ <div class="flex space-x-4 mt-6">
755
+ <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-gray-700">
756
+ <i class="fas fa-random"></i>
757
+ </button>
758
+ <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-gray-700">
759
+ <i class="fas fa-redo"></i>
760
+ </button>
761
+ <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-gray-700">
762
+ <i class="fas fa-volume-up"></i>
763
+ </button>
764
+ </div>
765
+ </div>
766
+ </div>
767
+
768
+ <div id="networkWindow" class="window bg-gray-800" style="width: 500px; height: 400px; top: 150px; left: 300px;">
769
+ <div class="window-header px-3 py-2 flex justify-between items-center">
770
+ <div class="flex items-center space-x-2">
771
+ <i class="fas fa-wifi"></i>
772
+ <span>Network Settings</span>
773
+ </div>
774
+ <div class="flex space-x-2 window-controls">
775
+ <button class="bg-gray-500 hover:bg-gray-400" onclick="minimizeWindow('network')">
776
+ <i class="fas fa-minus"></i>
777
+ </button>
778
+ <button class="bg-red-500 hover:bg-red-400" onclick="closeWindow('network')">
779
+ <i class="fas fa-times"></i>
780
+ </button>
781
+ </div>
782
+ </div>
783
+ <div class="p-4 h-full overflow-auto">
784
+ <div class="space-y-4">
785
+ <div class="settings-option">
786
+ <div class="flex items-center justify-between">
787
+ <div class="flex items-center">
788
+ <i class="fas fa-wifi text-xl mr-3"></i>
789
+ <div>
790
+ <div class="font-medium">Wi-Fi</div>
791
+ <div class="text-sm text-gray-400">Connected to NovaNet</div>
792
+ </div>
793
+ </div>
794
+ <label class="relative inline-flex items-center cursor-pointer">
795
+ <input type="checkbox" class="sr-only peer" checked>
796
+ <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>
797
+ </label>
798
+ </div>
799
+ </div>
800
+
801
+ <div class="settings-option">
802
+ <div class="flex items-center justify-between">
803
+ <div class="flex items-center">
804
+ <i class="fas fa-bluetooth-b text-xl mr-3"></i>
805
+ <div>
806
+ <div class="font-medium">Bluetooth</div>
807
+ <div class="text-sm text-gray-400">Available devices</div>
808
+ </div>
809
+ </div>
810
+ <label class="relative inline-flex items-center cursor-pointer">
811
+ <input type="checkbox" class="sr-only peer">
812
+ <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>
813
+ </label>
814
+ </div>
815
+ </div>
816
+
817
+ <div class="settings-option">
818
+ <div class="flex items-center justify-between">
819
+ <div class="flex items-center">
820
+ <i class="fas fa-ethernet text-xl mr-3"></i>
821
+ <div>
822
+ <div class="font-medium">Ethernet</div>
823
+ <div class="text-sm text-gray-400">Not connected</div>
824
+ </div>
825
+ </div>
826
+ <label class="relative inline-flex items-center cursor-pointer">
827
+ <input type="checkbox" class="sr-only peer">
828
+ <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>
829
+ </label>
830
+ </div>
831
+ </div>
832
+
833
+ <div class="settings-option">
834
+ <h3 class="font-medium mb-2">Available Networks</h3>
835
+ <div class="space-y-2">
836
+ <div class="flex items-center justify-between p-2 hover:bg-gray-700 rounded-md cursor-pointer">
837
+ <div class="flex items-center">
838
+ <i class="fas fa-wifi mr-2"></i>
839
+ <span>NovaNet</span>
840
+ </div>
841
+ <i class="fas fa-lock text-gray-400"></i>
842
+ </div>
843
+ <div class="flex items-center justify-between p-2 hover:bg-gray-700 rounded-md cursor-pointer">
844
+ <div class="flex items-center">
845
+ <i class="fas fa-wifi mr-2"></i>
846
+ <span>GuestWiFi</span>
847
+ </div>
848
+ <i class="fas fa-lock-open text-gray-400"></i>
849
+ </div>
850
+ <div class="flex items-center justify-between p-2 hover:bg-gray-700 rounded-md cursor-pointer">
851
+ <div class="flex items-center">
852
+ <i class="fas fa-wifi mr-2"></i>
853
+ <span>HomeNetwork</span>
854
+ </div>
855
+ <i class="fas fa-lock text-gray-400"></i>
856
+ </div>
857
+ </div>
858
+ </div>
859
+ </div>
860
+ </div>
861
+ </div>
862
+
863
+ <div id="calculatorWindow" class="window bg-gray-800" style="width: 350px; height: 500px; top: 150px; left: 300px;">
864
+ <div class="window-header px-3 py-2 flex justify-between items-center">
865
+ <div class="flex items-center space-x-2">
866
+ <i class="fas fa-calculator"></i>
867
+ <span>Calculator</span>
868
+ </div>
869
+ <div class="flex space-x-2 window-controls">
870
+ <button class="bg-gray-500 hover:bg-gray-400" onclick="minimizeWindow('calculator')">
871
+ <i class="fas fa-minus"></i>
872
+ </button>
873
+ <button class="bg-red-500 hover:bg-red-400" onclick="closeWindow('calculator')">
874
+ <i class="fas fa-times"></i>
875
+ </button>
876
+ </div>
877
+ </div>
878
+ <div class="p-4 h-full flex flex-col">
879
+ <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">
880
+ 0
881
+ </div>
882
+ <div class="grid grid-cols-4 gap-2 flex-1">
883
+ <button class="bg-gray-700 hover:bg-gray-600 rounded-md p-3" onclick="calculatorInput('C')">C</button>
884
+ <button class="bg-gray-700 hover:bg-gray-600 rounded-md p-3" onclick="calculatorInput('±')">±</button>
885
+ <button class="bg-gray-700 hover:bg-gray-600 rounded-md p-3" onclick="calculatorInput('%')">%</button>
886
+ <button class="bg-blue-600 hover:bg-blue-700 rounded-md p-3" onclick="calculatorInput('/')">÷</button>
887
+
888
+ <button class="bg-gray-800 hover:bg-gray-700 rounded-md p-3" onclick="calculatorInput('7')">7</button>
889
+ <button class="bg-gray-800 hover:bg-gray-700 rounded-md p-3" onclick="calculatorInput('8')">8</button>
890
+ <button class="bg-gray-800 hover:bg-gray-700 rounded-md p-3" onclick="calculatorInput('9')">9</button>
891
+ <button class="bg-blue-600 hover:bg-blue-700 rounded-md p-3" onclick="calculatorInput('*')">×</button>
892
+
893
+ <button class="bg-gray-800 hover:bg-gray-700 rounded-md p-3" onclick="calculatorInput('4')">4</button>
894
+ <button class="bg-gray-800 hover:bg-gray-700 rounded-md p-3" onclick="calculatorInput('5')">5</button>
895
+ <button class="bg-gray-800 hover:bg-gray-700 rounded-md p-3" onclick="calculatorInput('6')">6</button>
896
+ <button class="bg-blue-600 hover:bg-blue-700 rounded-md p-3" onclick="calculatorInput('-')">−</button>
897
+
898
+ <button class="bg-gray-800 hover:bg-gray-700 rounded-md p-3" onclick="calculatorInput('1')">1</button>
899
+ <button class="bg-gray-800 hover:bg-gray-700 rounded-md p-3" onclick="calculatorInput('2')">2</button>
900
+ <button class="bg-gray-800 hover:bg-gray-700 rounded-md p-3" onclick="calculatorInput('3')">3</button>
901
+ <button class="bg-blue-600 hover:bg-blue-700 rounded-md p-3" onclick="calculatorInput('+')">+</button>
902
+
903
+ <button class="bg-gray-800 hover:bg-gray-700 rounded-md p-3 col-span-2" onclick="calculatorInput('0')">0</button>
904
+ <button class="bg-gray-800 hover:bg-gray-700 rounded-md p-3" onclick="calculatorInput('.')">.</button>
905
+ <button class="bg-blue-600 hover:bg-blue-700 rounded-md p-3" onclick="calculatorCalculate()">=</button>
906
+ </div>
907
+ </div>
908
+ </div>
909
+
910
+ <div id="gameWindow" class="window bg-gray-800" style="width: 500px; height: 500px; top: 150px; left: 300px;">
911
+ <div class="window-header px-3 py-2 flex justify-between items-center">
912
+ <div class="flex items-center space-x-2">
913
+ <i class="fas fa-gamepad"></i>
914
+ <span>Memory Game</span>
915
+ </div>
916
+ <div class="flex space-x-2 window-controls">
917
+ <button class="bg-gray-500 hover:bg-gray-400" onclick="minimizeWindow('game')">
918
+ <i class="fas fa-minus"></i>
919
+ </button>
920
+ <button class="bg-red-500 hover:bg-red-400" onclick="closeWindow('game')">
921
+ <i class="fas fa-times"></i>
922
+ </button>
923
+ </div>
924
+ </div>
925
+ <div class="p-4 h-full flex flex-col items-center justify-center">
926
+ <h2 class="text-xl font-medium mb-6">Memory Card Game</h2>
927
+ <div class="grid grid-cols-4 gap-2 mb-6" id="gameBoard">
928
+ <!-- Cards will be generated here -->
929
+ </div>
930
+ <div class="flex items-center justify-between w-full mb-4">
931
+ <div class="bg-gray-700 px-4 py-2 rounded-md">
932
+ <span class="text-sm">Moves: </span>
933
+ <span id="movesCount">0</span>
934
+ </div>
935
+ <div class="bg-gray-700 px-4 py-2 rounded-md">
936
+ <span class="text-sm">Pairs: </span>
937
+ <span id="pairsCount">0/8</span>
938
+ </div>
939
+ </div>
940
+ <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-md" onclick="startGame()">
941
+ <i class="fas fa-redo mr-2"></i> New Game
942
+ </button>
943
+ </div>
944
+ </div>
945
+
946
+ <!-- Start Menu -->
947
+ <div id="startMenu" class="start-menu fixed bottom-16 left-1/2 transform -translate-x-1/2 w-96 h-96 hidden z-30">
948
+ <div class="p-4 border-b border-gray-700">
949
+ <input type="text" placeholder="Search apps, settings, and more"
950
+ class="w-full bg-gray-700 px-3 py-2 rounded-md focus:outline-none">
951
+ </div>
952
+ <div class="p-4 grid grid-cols-3 gap-4">
953
+ <div class="flex flex-col items-center p-3 rounded-md hover:bg-gray-700 cursor-pointer" onclick="openApp('terminal')">
954
+ <i class="fas fa-terminal text-2xl mb-2 app-icon"></i>
955
+ <span class="text-xs">Terminal</span>
956
+ </div>
957
+ <div class="flex flex-col items-center p-3 rounded-md hover:bg-gray-700 cursor-pointer" onclick="openApp('files')">
958
+ <i class="fas fa-folder text-2xl mb-2 folder-icon"></i>
959
+ <span class="text-xs">Files</span>
960
+ </div>
961
+ <div class="flex flex-col items-center p-3 rounded-md hover:bg-gray-700 cursor-pointer" onclick="openApp('notes')">
962
+ <i class="fas fa-file-alt text-2xl mb-2 file-icon"></i>
963
+ <span class="text-xs">Notes</span>
964
+ </div>
965
+ <div class="flex flex-col items-center p-3 rounded-md hover:bg-gray-700 cursor-pointer" onclick="openApp('settings')">
966
+ <i class="fas fa-cog text-2xl mb-2 system-icon"></i>
967
+ <span class="text-xs">Settings</span>
968
+ </div>
969
+ <div class="flex flex-col items-center p-3 rounded-md hover:bg-gray-700 cursor-pointer" onclick="openApp('novaai')">
970
+ <i class="fas fa-robot text-2xl mb-2 app-icon"></i>
971
+ <span class="text-xs">NovaAI</span>
972
+ </div>
973
+ <div class="flex flex-col items-center p-3 rounded-md hover:bg-gray-700 cursor-pointer" onclick="openApp('browser')">
974
+ <i class="fas fa-globe text-2xl mb-2 file-icon"></i>
975
+ <span class="text-xs">Browser</span>
976
+ </div>
977
+ <div class="flex flex-col items-center p-3 rounded-md hover:bg-gray-700 cursor-pointer" onclick="openApp('media')">
978
+ <i class="fas fa-music text-2xl mb-2 media-icon"></i>
979
+ <span class="text-xs">Media</span>
980
+ </div>
981
+ <div class="flex flex-col items-center p-3 rounded-md hover:bg-gray-700 cursor-pointer" onclick="openApp('network')">
982
+ <i class="fas fa-wifi text-2xl mb-2 network-icon"></i>
983
+ <span class="text-xs">Network</span>
984
+ </div>
985
+ <div class="flex flex-col items-center p-3 rounded-md hover:bg-gray-700 cursor-pointer" onclick="openApp('calculator')">
986
+ <i class="fas fa-calculator text-2xl mb-2 utility-icon"></i>
987
+ <span class="text-xs">Calculator</span>
988
+ </div>
989
+ <div class="flex flex-col items-center p-3 rounded-md hover:bg-gray-700 cursor-pointer" onclick="openApp('game')">
990
+ <i class="fas fa-gamepad text-2xl mb-2 game-icon"></i>
991
+ <span class="text-xs">Games</span>
992
+ </div>
993
+ </div>
994
+ <div class="absolute bottom-0 left-0 right-0 p-3 border-t border-gray-700 flex justify-between">
995
+ <div class="flex items-center">
996
+ <div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center mr-2">
997
+ <i class="fas fa-user text-sm"></i>
998
+ </div>
999
+ <span>Dineth</span>
1000
+ </div>
1001
+ <div class="power-button" onclick="shutdown()">
1002
+ <i class="fas fa-power-off"></i>
1003
+ </div>
1004
+ </div>
1005
+ </div>
1006
+
1007
+ <!-- Taskbar -->
1008
+ <div class="taskbar fixed bottom-0 left-0 right-0 h-12 flex items-center px-2 z-20">
1009
+ <button id="startButton" class="h-10 px-3 rounded-md flex items-center hover:bg-gray-700" onclick="toggleStartMenu()">
1010
+ <i class="fas fa-rocket text-blue-400 mr-2"></i>
1011
+ <span>Nova</span>
1012
+ </button>
1013
+
1014
+ <div class="flex-1 flex items-center px-2 space-x-1" id="taskbarApps">
1015
+ <div id="terminalTaskbar" class="taskbar-app" onclick="focusWindow('terminal')">
1016
+ <i class="fas fa-terminal mr-2"></i>
1017
+ <span>Terminal</span>
1018
+ </div>
1019
+ </div>
1020
+
1021
+ <div class="flex items-center space-x-4">
1022
+ <div class="cursor-pointer p-2 rounded-md hover:bg-gray-700" onclick="toggleAIPanel()">
1023
+ <i class="fas fa-robot"></i>
1024
+ </div>
1025
+ <div class="text-sm p-2 rounded-md hover:bg-gray-700 cursor-pointer flex items-center">
1026
+ <i class="fas fa-wifi mr-2"></i>
1027
+ <div id="currentTime">00:00</div>
1028
+ </div>
1029
+ </div>
1030
+ </div>
1031
+
1032
+ <!-- Context Menu -->
1033
+ <div id="desktopContextMenu" class="context-menu">
1034
+ <div class="context-menu-item" onclick="openApp('files')">
1035
+ <i class="fas fa-folder-open mr-2"></i> Open
1036
+ </div>
1037
+ <div class="context-menu-item" onclick="showNotification('New folder created')">
1038
+ <i class="fas fa-folder-plus mr-2"></i> New Folder
1039
+ </div>
1040
+ <div class="context-menu-item" onclick="showNotification('New file created')">
1041
+ <i class="fas fa-file-alt mr-2"></i> New File
1042
+ </div>
1043
+ <div class="border-t border-gray-700 my-1"></div>
1044
+ <div class="context-menu-item" onclick="showSettingsTab('appearance')">
1045
+ <i class="fas fa-palette mr-2"></i> Display Settings
1046
+ </div>
1047
+ <div class="context-menu-item" onclick="showNotification('Personalize options opened')">
1048
+ <i class="fas fa-sliders-h mr-2"></i> Personalize
1049
+ </div>
1050
+ </div>
1051
+
1052
+ <div id="iconContextMenu" class="context-menu">
1053
+ <div class="context-menu-item" onclick="openAppFromContext()">
1054
+ <i class="fas fa-play mr-2"></i> Open
1055
+ </div>
1056
+ <div class="context-menu-item" onclick="showNotification('Application pinned to taskbar')">
1057
+ <i class="fas fa-thumbtack mr-2"></i> Pin to Taskbar
1058
+ </div>
1059
+ <div class="context-menu-item" onclick="showNotification('Application shortcut created')">
1060
+ <i class="fas fa-link mr-2"></i> Create Shortcut
1061
+ </div>
1062
+ <div class="border-t border-gray-700 my-1"></div>
1063
+ <div class="context-menu-item" onclick="showNotification('Application renamed')">
1064
+ <i class="fas fa-i-cursor mr-2"></i> Rename
1065
+ </div>
1066
+ <div class="context-menu-item" onclick="showNotification('Application deleted')">
1067
+ <i class="fas fa-trash mr-2"></i> Delete
1068
+ </div>
1069
+ <div class="context-menu-item" onclick="showNotification('Properties displayed')">
1070
+ <i class="fas fa-info-circle mr-2"></i> Properties
1071
+ </div>
1072
+ </div>
1073
+
1074
+ <!-- Notification -->
1075
+ <div id="notification" class="notification">
1076
+ <div class="flex items-start">
1077
+ <div class="mr-3 text-blue-400">
1078
+ <i class="fas fa-info-circle"></i>
1079
+ </div>
1080
+ <div>
1081
+ <div class="font-medium">Notification</div>
1082
+ <div class="text-sm opacity-80" id="notificationMessage">This is a notification</div>
1083
+ </div>
1084
+ <button class="ml-4 opacity-70 hover:opacity-100" onclick="hideNotification()">
1085
+ <i class="fas fa-times"></i>
1086
+ </button>
1087
+ </div>
1088
+ </div>
1089
+ </div>
1090
+
1091
+ <script>
1092
+ // Initialize variables
1093
+ let activeApps = {};
1094
+ let isStartMenuOpen = false;
1095
+ let isLocked = true;
1096
+ let isLoggedIn = false;
1097
+ let currentContextApp = '';
1098
+ let calculatorValue = '0';
1099
+ let calculatorOperation = '';
1100
+ let calculatorPreviousValue = '';
1101
+ let isMusicPlaying = false;
1102
+ let musicProgress = 0;
1103
+ let musicInterval;
1104
+ let gameCards = [];
1105
+ let flippedCards = [];
1106
+ let matchedPairs = 0;
1107
+ let movesCount = 0;
1108
+
1109
+ // Initialize the OS
1110
+ document.addEventListener('DOMContentLoaded', function() {
1111
+ updateClock();
1112
+ setInterval(updateClock, 1000);
1113
+
1114
+ setupTerminal();
1115
+ initWindowDrag();
1116
+ setupMediaPlayer();
1117
+ setupCalculator();
1118
+ startGame();
1119
+ document.getElementById('loginScreen').style.display = 'flex';
1120
+
1121
+ document.getElementById('darkModeToggle').addEventListener('change', function() {
1122
+ document.documentElement.classList.toggle('dark', this.checked);
1123
+ });
1124
+
1125
+ // Close context menus when clicking elsewhere
1126
+ document.addEventListener('click', function(e) {
1127
+ if (!e.target.closest('.context-menu')) {
1128
+ hideContextMenus();
1129
+ }
1130
+ });
1131
+ });
1132
+
1133
+ function updateClock() {
1134
+ const now = new Date();
1135
+ const timeStr = now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
1136
+ const dateStr = now.toLocaleDateString([], {weekday: 'long', month: 'long', day: 'numeric'});
1137
+
1138
+ document.getElementById('currentTime').textContent = timeStr;
1139
+
1140
+ if(document.getElementById('lockScreen').style.display === 'flex') {
1141
+ document.getElementById('lockTime').textContent = timeStr;
1142
+ document.getElementById('lockDate').textContent = dateStr;
1143
+ }
1144
+ }
1145
+
1146
+ function login() {
1147
+ const username = document.getElementById('username').value;
1148
+ const password = document.getElementById('password').value;
1149
+
1150
+ if(!username || !password) {
1151
+ showNotification('Please enter both username and password');
1152
+ return;
1153
+ }
1154
+
1155
+ const loginScreen = document.getElementById('loginScreen');
1156
+ loginScreen.style.opacity = '0';
1157
+
1158
+ setTimeout(() => {
1159
+ loginScreen.style.display = 'none';
1160
+ isLoggedIn = true;
1161
+ document.getElementById('lockScreen').style.display = 'flex';
1162
+ showNotification('Welcome to Nova OS!');
1163
+ }, 500);
1164
+ }
1165
+
1166
+ function unlockScreen() {
1167
+ const lockScreen = document.getElementById('lockScreen');
1168
+ lockScreen.style.opacity = '0';
1169
+
1170
+ setTimeout(() => {
1171
+ lockScreen.style.display = 'none';
1172
+ isLocked = false;
1173
+ showNotification('Session unlocked');
1174
+ }, 500);
1175
+ }
1176
+
1177
+ function lockScreen() {
1178
+ document.getElementById('lockScreen').style.display = 'flex';
1179
+ document.getElementById('lockScreen').style.opacity = '1';
1180
+ isLocked = true;
1181
+ closeStartMenu();
1182
+ showNotification('Session locked');
1183
+ }
1184
+
1185
+ function shutdown() {
1186
+ showNotification('Shutting down Nova OS...');
1187
+ setTimeout(() => {
1188
+ document.getElementById('loginScreen').style.display = 'flex';
1189
+ document.getElementById('loginScreen').style.opacity = '1';
1190
+ document.getElementById('lockScreen').style.display = 'none';
1191
+ isLoggedIn = false;
1192
+ isLocked = true;
1193
+
1194
+ // Close all apps
1195
+ Object.keys(activeApps).forEach(app => {
1196
+ closeWindow(app);
1197
+ });
1198
+ }, 1000);
1199
+ }
1200
+
1201
+ function openApp(appName) {
1202
+ if(isLocked) return;
1203
+
1204
+ const windowId = appName + 'Window';
1205
+ const windowElement = document.getElementById(windowId);
1206
+
1207
+ if(!windowElement) return;
1208
+
1209
+ windowElement.style.display = 'block';
1210
+ bringToFront(windowElement);
1211
+ activeApps[appName] = true;
1212
+ updateTaskbar();
1213
+ closeStartMenu();
1214
+
1215
+ // Add to taskbar if not already there
1216
+ if (!document.getElementById(appName + 'Taskbar')) {
1217
+ const taskbarApp = document.createElement('div');
1218
+ taskbarApp.className = 'taskbar-app';
1219
+ taskbarApp.id = appName + 'Taskbar';
1220
+ taskbarApp.innerHTML = `<i class="fas ${getAppIcon(appName)} mr-2"></i><span>${getAppName(appName)}</span>`;
1221
+ taskbarApp.onclick = () => focusWindow(appName);
1222
+ document.getElementById('taskbarApps').appendChild(taskbarApp);
1223
+ }
1224
+ }
1225
+
1226
+ function getAppIcon(appName) {
1227
+ const icons = {
1228
+ 'terminal': 'fa-terminal',
1229
+ 'files': 'fa-folder',
1230
+ 'notes': 'fa-file-alt',
1231
+ 'settings': 'fa-cog',
1232
+ 'novaai': 'fa-robot',
1233
+ 'browser': 'fa-globe',
1234
+ 'media': 'fa-music',
1235
+ 'network': 'fa-wifi',
1236
+ 'calculator': 'fa-calculator',
1237
+ 'game': 'fa-gamepad'
1238
+ };
1239
+ return icons[appName] || 'fa-question';
1240
+ }
1241
+
1242
+ function getAppName(appName) {
1243
+ const names = {
1244
+ 'terminal': 'Terminal',
1245
+ 'files': 'Files',
1246
+ 'notes': 'Notes',
1247
+ 'settings': 'Settings',
1248
+ 'novaai': 'NovaAI',
1249
+ 'browser': 'Browser',
1250
+ 'media': 'Media',
1251
+ 'network': 'Network',
1252
+ 'calculator': 'Calculator',
1253
+ 'game': 'Games'
1254
+ };
1255
+ return names[appName] || appName;
1256
+ }
1257
+
1258
+ function closeWindow(appName) {
1259
+ const windowId = appName + 'Window';
1260
+ const windowElement = document.getElementById(windowId);
1261
+
1262
+ if(windowElement) windowElement.style.display = 'none';
1263
+
1264
+ delete activeApps[appName];
1265
+ updateTaskbar();
1266
+ }
1267
+
1268
+ function minimizeWindow(appName) {
1269
+ const windowId = appName + 'Window';
1270
+ const windowElement = document.getElementById(windowId);
1271
+
1272
+ if(windowElement) windowElement.style.display = 'none';
1273
+
1274
+ // Keep app in activeApps to show in taskbar
1275
+ activeApps[appName] = true;
1276
+ updateTaskbar();
1277
+ }
1278
+
1279
+ function bringToFront(element) {
1280
+ const windows = document.querySelectorAll('.window');
1281
+ let maxZIndex = 10;
1282
+
1283
+ windows.forEach(window => {
1284
+ const zIndex = parseInt(window.style.zIndex || '0');
1285
+ if(zIndex > maxZIndex) maxZIndex = zIndex;
1286
+ window.classList.remove('active');
1287
+ });
1288
+
1289
+ element.style.zIndex = maxZIndex + 1;
1290
+ element.classList.add('active');
1291
+
1292
+ // Update taskbar active state
1293
+ const appName = element.id.replace('Window', '');
1294
+ document.querySelectorAll('.taskbar-app').forEach(app => {
1295
+ app.classList.remove('active');
1296
+ });
1297
+ const taskbarApp = document.getElementById(appName + 'Taskbar');
1298
+ if (taskbarApp) {
1299
+ taskbarApp.classList.add('active');
1300
+ }
1301
+ }
1302
+
1303
+ function focusWindow(appName) {
1304
+ const windowId = appName + 'Window';
1305
+ const windowElement = document.getElementById(windowId);
1306
+
1307
+ if(windowElement && windowElement.style.display === 'block') {
1308
+ bringToFront(windowElement);
1309
+ } else {
1310
+ openApp(appName);
1311
+ }
1312
+ }
1313
+
1314
+ function updateTaskbar() {
1315
+ document.querySelectorAll('.taskbar-app').forEach(app => {
1316
+ const appName = app.id.replace('Taskbar', '');
1317
+ const windowElement = document.getElementById(appName + 'Window');
1318
+
1319
+ if (windowElement && windowElement.style.display === 'block') {
1320
+ app.classList.add('active');
1321
+ } else {
1322
+ app.classList.remove('active');
1323
+ }
1324
+
1325
+ // Remove apps that are closed
1326
+ if (!activeApps[appName] && appName !== 'terminal') {
1327
+ app.remove();
1328
+ }
1329
+ });
1330
+ }
1331
+
1332
+ function toggleStartMenu() {
1333
+ if(isStartMenuOpen) {
1334
+ closeStartMenu();
1335
+ } else {
1336
+ openStartMenu();
1337
+ }
1338
+ }
1339
+
1340
+ function openStartMenu() {
1341
+ if(isLocked) return;
1342
+
1343
+ const startMenu = document.getElementById('startMenu');
1344
+ startMenu.style.display = 'block';
1345
+ bringToFront(startMenu);
1346
+ isStartMenuOpen = true;
1347
+ }
1348
+
1349
+ function closeStartMenu() {
1350
+ document.getElementById('startMenu').style.display = 'none';
1351
+ isStartMenuOpen = false;
1352
+ }
1353
+
1354
+ function toggleAIPanel() {
1355
+ const aiPanel = document.getElementById('novaaiWindow');
1356
+ if(aiPanel.style.display === 'block') {
1357
+ closeWindow('novaai');
1358
+ } else {
1359
+ openApp('novaai');
1360
+
1361
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ add even More styles and all apps Need Work and Add even Mor eveen More veen More even More styles ISOS Need fu;lly funtional