Hugging Face's logo

Spaces:
TechITProfessional
/
hfos
Running

App Files Community
TechITProfessional commited on
Commit
7c3dc3f
·
verified ·
1 Parent(s): 8fdc950

The app doesn't function now - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1380 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Hfos
3
- emoji: 📚
4
- colorFrom: green
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: hfos
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: pink
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,1380 @@
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>BrowserOS</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ 'os-primary': '#4f46e5',
15
+ 'os-secondary': '#6366f1',
16
+ 'os-dark': '#1e293b',
17
+ 'os-darker': '#0f172a',
18
+ 'os-light': '#f1f5f9',
19
+ 'os-accent': '#8b5cf6'
20
+ }
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+ <style>
26
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
27
+
28
+ * {
29
+ margin: 0;
30
+ padding: 0;
31
+ box-sizing: border-box;
32
+ font-family: 'Inter', sans-serif;
33
+ user-select: none;
34
+ }
35
+
36
+ body {
37
+ overflow: hidden;
38
+ background-color: #0f172a;
39
+ height: 100vh;
40
+ width: 100vw;
41
+ }
42
+
43
+ #desktop {
44
+ background-image: url('https://images.unsplash.com/photo-1505506874110-0a3a6a03b9c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80');
45
+ background-size: cover;
46
+ background-position: center;
47
+ height: calc(100vh - 50px);
48
+ position: relative;
49
+ overflow: hidden;
50
+ }
51
+
52
+ .desktop-icon {
53
+ position: absolute;
54
+ width: 80px;
55
+ height: 80px;
56
+ display: flex;
57
+ flex-direction: column;
58
+ align-items: center;
59
+ justify-content: center;
60
+ cursor: pointer;
61
+ transition: all 0.2s ease;
62
+ text-align: center;
63
+ color: white;
64
+ text-shadow: 0 1px 3px rgba(0,0,0,0.5);
65
+ }
66
+
67
+ .desktop-icon:hover {
68
+ background: rgba(255,255,255,0.1);
69
+ border-radius: 5px;
70
+ }
71
+
72
+ .desktop-icon i {
73
+ font-size: 32px;
74
+ margin-bottom: 5px;
75
+ }
76
+
77
+ .desktop-icon span {
78
+ font-size: 12px;
79
+ font-weight: 500;
80
+ }
81
+
82
+ .window {
83
+ position: absolute;
84
+ border-radius: 8px;
85
+ overflow: hidden;
86
+ box-shadow: 0 10px 30px rgba(0,0,0,0.2);
87
+ display: flex;
88
+ flex-direction: column;
89
+ min-width: 400px;
90
+ min-height: 300px;
91
+ background: #f8fafc;
92
+ resize: both;
93
+ overflow: auto;
94
+ }
95
+
96
+ .window-header {
97
+ background: linear-gradient(to right, #4f46e5, #6366f1);
98
+ color: white;
99
+ padding: 8px 12px;
100
+ display: flex;
101
+ justify-content: space-between;
102
+ align-items: center;
103
+ cursor: move;
104
+ }
105
+
106
+ .window-title {
107
+ font-weight: 600;
108
+ font-size: 14px;
109
+ display: flex;
110
+ align-items: center;
111
+ gap: 8px;
112
+ }
113
+
114
+ .window-controls {
115
+ display: flex;
116
+ gap: 8px;
117
+ }
118
+
119
+ .window-control {
120
+ width: 30px;
121
+ height: 30px;
122
+ border-radius: 50%;
123
+ display: flex;
124
+ align-items: center;
125
+ justify-content: center;
126
+ cursor: pointer;
127
+ transition: all 0.2s ease;
128
+ }
129
+
130
+ .window-control:hover {
131
+ background: rgba(255,255,255,0.2);
132
+ }
133
+
134
+ .window-content {
135
+ flex: 1;
136
+ padding: 15px;
137
+ overflow: auto;
138
+ }
139
+
140
+ #taskbar {
141
+ height: 50px;
142
+ background: rgba(30, 41, 59, 0.9);
143
+ backdrop-filter: blur(10px);
144
+ display: flex;
145
+ align-items: center;
146
+ padding: 0 10px;
147
+ position: relative;
148
+ z-index: 1000;
149
+ }
150
+
151
+ #start-menu-btn {
152
+ background: linear-gradient(to right, #4f46e5, #6366f1);
153
+ color: white;
154
+ border: none;
155
+ border-radius: 5px;
156
+ padding: 5px 15px;
157
+ display: flex;
158
+ align-items: center;
159
+ gap: 8px;
160
+ font-weight: 500;
161
+ cursor: pointer;
162
+ transition: all 0.2s ease;
163
+ }
164
+
165
+ #start-menu-btn:hover {
166
+ transform: scale(1.05);
167
+ }
168
+
169
+ #app-tray {
170
+ display: flex;
171
+ gap: 5px;
172
+ margin-left: 15px;
173
+ }
174
+
175
+ .tray-app {
176
+ width: 40px;
177
+ height: 40px;
178
+ border-radius: 5px;
179
+ display: flex;
180
+ align-items: center;
181
+ justify-content: center;
182
+ color: white;
183
+ background: rgba(255,255,255,0.1);
184
+ cursor: pointer;
185
+ transition: all 0.2s ease;
186
+ }
187
+
188
+ .tray-app:hover {
189
+ background: rgba(255,255,255,0.2);
190
+ }
191
+
192
+ .tray-app.active {
193
+ background: rgba(79, 70, 229, 0.5);
194
+ }
195
+
196
+ #system-tray {
197
+ margin-left: auto;
198
+ display: flex;
199
+ align-items: center;
200
+ gap: 10px;
201
+ color: white;
202
+ padding: 0 10px;
203
+ }
204
+
205
+ .tray-icon {
206
+ padding: 5px;
207
+ cursor: pointer;
208
+ border-radius: 3px;
209
+ transition: all 0.2s ease;
210
+ }
211
+
212
+ .tray-icon:hover {
213
+ background: rgba(255,255,255,0.1);
214
+ }
215
+
216
+ #clock {
217
+ font-size: 14px;
218
+ font-weight: 500;
219
+ }
220
+
221
+ #start-menu {
222
+ position: absolute;
223
+ bottom: 50px;
224
+ left: 10px;
225
+ width: 350px;
226
+ height: 450px;
227
+ background: rgba(30, 41, 59, 0.95);
228
+ backdrop-filter: blur(10px);
229
+ border-radius: 10px;
230
+ box-shadow: 0 10px 30px rgba(0,0,0,0.3);
231
+ display: none;
232
+ flex-direction: column;
233
+ overflow: hidden;
234
+ z-index: 999;
235
+ }
236
+
237
+ .app-grid {
238
+ display: grid;
239
+ grid-template-columns: repeat(3, 1fr);
240
+ gap: 15px;
241
+ padding: 20px;
242
+ flex: 1;
243
+ }
244
+
245
+ .app-item {
246
+ display: flex;
247
+ flex-direction: column;
248
+ align-items: center;
249
+ justify-content: center;
250
+ gap: 8px;
251
+ color: white;
252
+ padding: 15px 5px;
253
+ border-radius: 8px;
254
+ cursor: pointer;
255
+ transition: all 0.2s ease;
256
+ }
257
+
258
+ .app-item:hover {
259
+ background: rgba(255,255,255,0.1);
260
+ }
261
+
262
+ .app-item i {
263
+ font-size: 28px;
264
+ }
265
+
266
+ .app-item span {
267
+ font-size: 12px;
268
+ font-weight: 500;
269
+ }
270
+
271
+ .file-item {
272
+ display: flex;
273
+ align-items: center;
274
+ padding: 8px 12px;
275
+ border-radius: 5px;
276
+ cursor: pointer;
277
+ transition: all 0.2s ease;
278
+ }
279
+
280
+ .file-item:hover {
281
+ background: #e2e8f0;
282
+ }
283
+
284
+ .context-menu {
285
+ position: absolute;
286
+ background: white;
287
+ border-radius: 5px;
288
+ box-shadow: 0 5px 15px rgba(0,0,0,0.2);
289
+ min-width: 200px;
290
+ z-index: 1001;
291
+ display: none;
292
+ }
293
+
294
+ .context-menu-item {
295
+ padding: 8px 15px;
296
+ cursor: pointer;
297
+ transition: all 0.2s ease;
298
+ display: flex;
299
+ align-items: center;
300
+ gap: 8px;
301
+ }
302
+
303
+ .context-menu-item:hover {
304
+ background: #f1f5f9;
305
+ }
306
+
307
+ .tab-container {
308
+ display: flex;
309
+ border-bottom: 1px solid #cbd5e1;
310
+ padding: 0 15px;
311
+ }
312
+
313
+ .tab {
314
+ padding: 10px 20px;
315
+ cursor: pointer;
316
+ border-bottom: 2px solid transparent;
317
+ transition: all 0.2s ease;
318
+ }
319
+
320
+ .tab.active {
321
+ border-bottom: 2px solid #4f46e5;
322
+ color: #4f46e5;
323
+ font-weight: 500;
324
+ }
325
+
326
+ .tab-content {
327
+ display: none;
328
+ }
329
+
330
+ .tab-content.active {
331
+ display: block;
332
+ }
333
+
334
+ .file-grid {
335
+ display: grid;
336
+ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
337
+ gap: 15px;
338
+ padding: 15px;
339
+ }
340
+
341
+ .file-grid-item {
342
+ display: flex;
343
+ flex-direction: column;
344
+ align-items: center;
345
+ gap: 5px;
346
+ padding: 10px;
347
+ border-radius: 5px;
348
+ cursor: pointer;
349
+ transition: all 0.2s ease;
350
+ }
351
+
352
+ .file-grid-item:hover {
353
+ background: #e2e8f0;
354
+ }
355
+
356
+ .file-grid-item i {
357
+ font-size: 32px;
358
+ }
359
+
360
+ .file-grid-item span {
361
+ font-size: 12px;
362
+ text-align: center;
363
+ word-break: break-word;
364
+ }
365
+
366
+ .settings-grid {
367
+ display: grid;
368
+ grid-template-columns: repeat(2, 1fr);
369
+ gap: 15px;
370
+ padding: 15px;
371
+ }
372
+
373
+ .wallpaper-preview {
374
+ width: 100%;
375
+ aspect-ratio: 16/9;
376
+ border-radius: 5px;
377
+ overflow: hidden;
378
+ cursor: pointer;
379
+ border: 2px solid transparent;
380
+ transition: all 0.2s ease;
381
+ }
382
+
383
+ .wallpaper-preview:hover {
384
+ transform: scale(1.03);
385
+ }
386
+
387
+ .wallpaper-preview.selected {
388
+ border-color: #4f46e5;
389
+ }
390
+
391
+ .wallpaper-preview img {
392
+ width: 100%;
393
+ height: 100%;
394
+ object-fit: cover;
395
+ }
396
+
397
+ .editor-toolbar {
398
+ display: flex;
399
+ gap: 5px;
400
+ padding: 8px;
401
+ background: #e2e8f0;
402
+ border-bottom: 1px solid #cbd5e1;
403
+ }
404
+
405
+ .editor-btn {
406
+ padding: 5px 10px;
407
+ border-radius: 3px;
408
+ background: white;
409
+ border: 1px solid #cbd5e1;
410
+ cursor: pointer;
411
+ transition: all 0.2s ease;
412
+ }
413
+
414
+ .editor-btn:hover {
415
+ background: #f1f5f9;
416
+ }
417
+
418
+ #editor-content {
419
+ width: 100%;
420
+ height: 100%;
421
+ padding: 15px;
422
+ border: none;
423
+ resize: none;
424
+ font-family: 'Inter', sans-serif;
425
+ font-size: 14px;
426
+ }
427
+
428
+ #editor-content:focus {
429
+ outline: none;
430
+ }
431
+
432
+ .browser-nav {
433
+ display: flex;
434
+ gap: 10px;
435
+ padding: 10px;
436
+ background: #e2e8f0;
437
+ border-bottom: 1px solid #cbd5e1;
438
+ }
439
+
440
+ .browser-input {
441
+ flex: 1;
442
+ padding: 8px 15px;
443
+ border-radius: 20px;
444
+ border: 1px solid #cbd5e1;
445
+ }
446
+
447
+ .browser-btn {
448
+ padding: 8px 15px;
449
+ border-radius: 5px;
450
+ background: #4f46e5;
451
+ color: white;
452
+ border: none;
453
+ cursor: pointer;
454
+ }
455
+
456
+ #browser-frame {
457
+ flex: 1;
458
+ border: none;
459
+ }
460
+
461
+ .minimized-window {
462
+ opacity: 0.7;
463
+ }
464
+
465
+ .window.snapped-left {
466
+ width: 50% !important;
467
+ height: calc(100vh - 50px) !important;
468
+ top: 0 !important;
469
+ left: 0 !important;
470
+ resize: none;
471
+ }
472
+
473
+ .window.snapped-right {
474
+ width: 50% !important;
475
+ height: calc(100vh - 50px) !important;
476
+ top: 0 !important;
477
+ left: 50% !important;
478
+ resize: none;
479
+ }
480
+
481
+ .window.maximized {
482
+ width: 100% !important;
483
+ height: calc(100vh - 50px) !important;
484
+ top: 0 !important;
485
+ left: 0 !important;
486
+ resize: none;
487
+ }
488
+
489
+ .window.maximized .window-control.maximize i:before {
490
+ content: "\f2d0";
491
+ }
492
+
493
+ @media (max-width: 768px) {
494
+ .window {
495
+ min-width: 300px;
496
+ min-height: 250px;
497
+ }
498
+
499
+ #start-menu {
500
+ width: 300px;
501
+ height: 400px;
502
+ }
503
+
504
+ .app-grid {
505
+ grid-template-columns: repeat(2, 1fr);
506
+ }
507
+ }
508
+ </style>
509
+ </head>
510
+ <body>
511
+ <!-- Desktop with icons -->
512
+ <div id="desktop">
513
+ <div class="desktop-icon" style="top: 20px; left: 20px;" data-app="file-manager">
514
+ <i class="fas fa-folder"></i>
515
+ <span>Files</span>
516
+ </div>
517
+
518
+ <div class="desktop-icon" style="top: 20px; left: 120px;" data-app="text-editor">
519
+ <i class="fas fa-file-alt"></i>
520
+ <span>Notes</span>
521
+ </div>
522
+
523
+ <div class="desktop-icon" style="top: 120px; left: 20px;" data-app="browser">
524
+ <i class="fas fa-globe"></i>
525
+ <span>Browser</span>
526
+ </div>
527
+
528
+ <div class="desktop-icon" style="top: 120px; left: 120px;" data-app="settings">
529
+ <i class="fas fa-cog"></i>
530
+ <span>Settings</span>
531
+ </div>
532
+
533
+ <!-- Windows will be appended here dynamically -->
534
+ </div>
535
+
536
+ <!-- Taskbar -->
537
+ <div id="taskbar">
538
+ <button id="start-menu-btn">
539
+ <i class="fas fa-logo"></i>
540
+ <span>Start</span>
541
+ </button>
542
+
543
+ <div id="app-tray">
544
+ <!-- App icons will be added here when apps are opened -->
545
+ </div>
546
+
547
+ <div id="system-tray">
548
+ <div class="tray-icon" id="wifi-icon" title="WiFi: Connected">
549
+ <i class="fas fa-wifi"></i>
550
+ </div>
551
+ <div class="tray-icon" id="volume-icon" title="Volume: 75%">
552
+ <i class="fas fa-volume-up"></i>
553
+ <div class="volume-control hidden absolute bottom-10 right-0 bg-white p-3 rounded shadow-lg w-40">
554
+ <input type="range" min="0" max="100" value="75" class="w-full">
555
+ </div>
556
+ </div>
557
+ <div class="tray-icon" id="battery-icon" title="Battery: 85%">
558
+ <i class="fas fa-battery-three-quarters"></i>
559
+ </div>
560
+ <div id="clock">10:30 AM</div>
561
+ </div>
562
+ </div>
563
+
564
+ <!-- Start Menu -->
565
+ <div id="start-menu">
566
+ <div class="bg-gradient-to-r from-os-primary to-os-secondary p-4 text-white">
567
+ <div class="text-xl font-bold">BrowserOS</div>
568
+ <div class="text-sm opacity-80">v1.0.0</div>
569
+ </div>
570
+
571
+ <div class="app-grid">
572
+ <div class="app-item" data-app="file-manager">
573
+ <i class="fas fa-folder"></i>
574
+ <span>File Manager</span>
575
+ </div>
576
+
577
+ <div class="app-item" data-app="text-editor">
578
+ <i class="fas fa-file-alt"></i>
579
+ <span>Text Editor</span>
580
+ </div>
581
+
582
+ <div class="app-item" data-app="browser">
583
+ <i class="fas fa-globe"></i>
584
+ <span>Web Browser</span>
585
+ </div>
586
+
587
+ <div class="app-item" data-app="settings">
588
+ <i class="fas fa-cog"></i>
589
+ <span>Settings</span>
590
+ </div>
591
+
592
+ <div class="app-item" data-app="terminal">
593
+ <i class="fas fa-terminal"></i>
594
+ <span>Terminal</span>
595
+ </div>
596
+
597
+ <div class="app-item" data-app="calculator">
598
+ <i class="fas fa-calculator"></i>
599
+ <span>Calculator</span>
600
+ </div>
601
+ </div>
602
+
603
+ <div class="mt-auto bg-os-dark p-3 text-white flex justify-between">
604
+ <div class="flex items-center gap-2">
605
+ <i class="fas fa-user"></i>
606
+ <span>User</span>
607
+ </div>
608
+ <div class="flex items-center gap-2">
609
+ <i class="fas fa-power-off"></i>
610
+ <span>Power</span>
611
+ </div>
612
+ </div>
613
+ </div>
614
+
615
+ <!-- Notifications -->
616
+ <div id="notifications" class="fixed bottom-16 right-4 w-80 z-1002"></div>
617
+
618
+ <!-- Power Menu -->
619
+ <div id="power-menu" class="fixed bottom-16 left-4 bg-white rounded-lg shadow-lg p-2 hidden z-1001">
620
+ <div class="power-option p-2 hover:bg-gray-100 rounded cursor-pointer">
621
+ <i class="fas fa-moon mr-2"></i> Sleep
622
+ </div>
623
+ <div class="power-option p-2 hover:bg-gray-100 rounded cursor-pointer">
624
+ <i class="fas fa-redo mr-2"></i> Restart
625
+ </div>
626
+ <div class="power-option p-2 hover:bg-gray-100 rounded cursor-pointer text-red-500">
627
+ <i class="fas fa-power-off mr-2"></i> Shut Down
628
+ </div>
629
+ </div>
630
+
631
+ <!-- Context Menu -->
632
+ <div class="context-menu">
633
+ <div class="context-menu-item" id="context-new-folder">
634
+ <i class="fas fa-folder-plus"></i>
635
+ <span>New Folder</span>
636
+ </div>
637
+ <div class="context-menu-item" id="context-new-file">
638
+ <i class="fas fa-file"></i>
639
+ <span>New File</span>
640
+ </div>
641
+ <div class="context-menu-divider border-t border-gray-200 my-1"></div>
642
+ <div class="context-menu-item" id="context-cut">
643
+ <i class="fas fa-cut"></i>
644
+ <span>Cut</span>
645
+ </div>
646
+ <div class="context-menu-item" id="context-copy">
647
+ <i class="fas fa-copy"></i>
648
+ <span>Copy</span>
649
+ </div>
650
+ <div class="context-menu-item" id="context-paste">
651
+ <i class="fas fa-paste"></i>
652
+ <span>Paste</span>
653
+ </div>
654
+ <div class="context-menu-divider border-t border-gray-200 my-1"></div>
655
+ <div class="context-menu-item" id="context-refresh">
656
+ <i class="fas fa-sync"></i>
657
+ <span>Refresh</span>
658
+ </div>
659
+ <div class="context-menu-item" id="context-properties">
660
+ <i class="fas fa-info-circle"></i>
661
+ <span>Properties</span>
662
+ </div>
663
+ </div>
664
+
665
+ <!-- File Manager Template -->
666
+ <template id="file-manager-template">
667
+ <div class="window">
668
+ <div class="window-header">
669
+ <div class="window-title">
670
+ <i class="fas fa-folder"></i>
671
+ <span>File Manager</span>
672
+ </div>
673
+ <div class="window-controls">
674
+ <div class="window-control minimize">
675
+ <i class="fas fa-minus"></i>
676
+ </div>
677
+ <div class="window-control maximize">
678
+ <i class="fas fa-square"></i>
679
+ </div>
680
+ <div class="window-control close">
681
+ <i class="fas fa-times"></i>
682
+ </div>
683
+ </div>
684
+ </div>
685
+ <div class="window-content">
686
+ <div class="tab-container">
687
+ <div class="tab active" data-tab="home">Home</div>
688
+ <div class="tab" data-tab="documents">Documents</div>
689
+ <div class="tab" data-tab="pictures">Pictures</div>
690
+ <div class="tab" data-tab="downloads">Downloads</div>
691
+ </div>
692
+
693
+ <div class="tab-content active" id="home-tab">
694
+ <div class="file-grid">
695
+ <div class="file-grid-item">
696
+ <i class="fas fa-folder text-yellow-500"></i>
697
+ <span>Documents</span>
698
+ </div>
699
+ <div class="file-grid-item">
700
+ <i class="fas fa-folder text-blue-500"></i>
701
+ <span>Downloads</span>
702
+ </div>
703
+ <div class="file-grid-item">
704
+ <i class="fas fa-folder text-green-500"></i>
705
+ <span>Pictures</span>
706
+ </div>
707
+ <div class="file-grid-item">
708
+ <i class="fas fa-folder text-purple-500"></i>
709
+ <span>Music</span>
710
+ </div>
711
+ <div class="file-grid-item">
712
+ <i class="fas fa-file-pdf text-red-500"></i>
713
+ <span>Report.pdf</span>
714
+ </div>
715
+ <div class="file-grid-item">
716
+ <i class="fas fa-file-word text-blue-600"></i>
717
+ <span>Document.docx</span>
718
+ </div>
719
+ </div>
720
+ </div>
721
+
722
+ <div class="tab-content" id="documents-tab">
723
+ <div class="p-4">Documents folder content</div>
724
+ </div>
725
+ </div>
726
+ </div>
727
+ </template>
728
+
729
+ <!-- Text Editor Template -->
730
+ <template id="text-editor-template">
731
+ <div class="window">
732
+ <div class="window-header">
733
+ <div class="window-title">
734
+ <i class="fas fa-file-alt"></i>
735
+ <span>Text Editor - Untitled</span>
736
+ </div>
737
+ <div class="window-controls">
738
+ <div class="window-control minimize">
739
+ <i class="fas fa-minus"></i>
740
+ </div>
741
+ <div class="window-control maximize">
742
+ <i class="fas fa-square"></i>
743
+ </div>
744
+ <div class="window-control close">
745
+ <i class="fas fa-times"></i>
746
+ </div>
747
+ </div>
748
+ </div>
749
+ <div class="editor-toolbar">
750
+ <button class="editor-btn"><i class="fas fa-bold"></i></button>
751
+ <button class="editor-btn"><i class="fas fa-italic"></i></button>
752
+ <button class="editor-btn"><i class="fas fa-underline"></i></button>
753
+ <button class="editor-btn"><i class="fas fa-list-ul"></i></button>
754
+ <button class="editor-btn"><i class="fas fa-list-ol"></i></button>
755
+ </div>
756
+ <textarea id="editor-content">Welcome to BrowserOS Text Editor!
757
+
758
+ Start typing your notes here...</textarea>
759
+ </div>
760
+ </template>
761
+
762
+ <!-- Browser Template -->
763
+ <template id="browser-template">
764
+ <div class="window">
765
+ <div class="window-header">
766
+ <div class="window-title">
767
+ <i class="fas fa-globe"></i>
768
+ <span>Web Browser</span>
769
+ </div>
770
+ <div class="window-controls">
771
+ <div class="window-control minimize">
772
+ <i class="fas fa-minus"></i>
773
+ </div>
774
+ <div class="window-control maximize">
775
+ <i class="fas fa-square"></i>
776
+ </div>
777
+ <div class="window-control close">
778
+ <i class="fas fa-times"></i>
779
+ </div>
780
+ </div>
781
+ </div>
782
+ <div class="browser-nav">
783
+ <button class="browser-btn"><i class="fas fa-arrow-left"></i></button>
784
+ <button class="browser-btn"><i class="fas fa-arrow-right"></i></button>
785
+ <button class="browser-btn"><i class="fas fa-sync"></i></button>
786
+ <input type="text" class="browser-input" value="https://browseros.com" placeholder="Search or enter address">
787
+ <button class="browser-btn"><i class="fas fa-search"></i></button>
788
+ </div>
789
+ <iframe id="browser-frame" src="about:blank"></iframe>
790
+ </div>
791
+ </template>
792
+
793
+ <!-- Terminal Template -->
794
+ <template id="terminal-template">
795
+ <div class="window">
796
+ <div class="window-header">
797
+ <div class="window-title">
798
+ <i class="fas fa-terminal"></i>
799
+ <span>Terminal</span>
800
+ </div>
801
+ <div class="window-controls">
802
+ <div class="window-control minimize">
803
+ <i class="fas fa-minus"></i>
804
+ </div>
805
+ <div class="window-control maximize">
806
+ <i class="fas fa-square"></i>
807
+ </div>
808
+ <div class="window-control close">
809
+ <i class="fas fa-times"></i>
810
+ </div>
811
+ </div>
812
+ </div>
813
+ <div class="window-content bg-os-darker text-white p-4 font-mono">
814
+ <div id="terminal-output"></div>
815
+ <div class="flex items-center">
816
+ <span class="text-green-400 mr-2">user@browseros:~$</span>
817
+ <input type="text" id="terminal-input" class="bg-transparent border-none text-white outline-none flex-1" autofocus>
818
+ </div>
819
+ </div>
820
+ </div>
821
+ </template>
822
+
823
+ <!-- Calculator Template -->
824
+ <template id="calculator-template">
825
+ <div class="window">
826
+ <div class="window-header">
827
+ <div class="window-title">
828
+ <i class="fas fa-calculator"></i>
829
+ <span>Calculator</span>
830
+ </div>
831
+ <div class="window-controls">
832
+ <div class="window-control minimize">
833
+ <i class="fas fa-minus"></i>
834
+ </div>
835
+ <div class="window-control maximize">
836
+ <i class="fas fa-square"></i>
837
+ </div>
838
+ <div class="window-control close">
839
+ <i class="fas fa-times"></i>
840
+ </div>
841
+ </div>
842
+ </div>
843
+ <div class="window-content p-4">
844
+ <div class="bg-gray-100 rounded p-3 mb-3 text-right text-2xl font-semibold" id="calc-display">0</div>
845
+ <div class="grid grid-cols-4 gap-2">
846
+ <button class="calc-btn bg-gray-200">C</button>
847
+ <button class="calc-btn bg-gray-200">±</button>
848
+ <button class="calc-btn bg-gray-200">%</button>
849
+ <button class="calc-btn bg-os-primary text-white">÷</button>
850
+ <button class="calc-btn">7</button>
851
+ <button class="calc-btn">8</button>
852
+ <button class="calc-btn">9</button>
853
+ <button class="calc-btn bg-os-primary text-white">×</button>
854
+ <button class="calc-btn">4</button>
855
+ <button class="calc-btn">5</button>
856
+ <button class="calc-btn">6</button>
857
+ <button class="calc-btn bg-os-primary text-white">-</button>
858
+ <button class="calc-btn">1</button>
859
+ <button class="calc-btn">2</button>
860
+ <button class="calc-btn">3</button>
861
+ <button class="calc-btn bg-os-primary text-white">+</button>
862
+ <button class="calc-btn col-span-2">0</button>
863
+ <button class="calc-btn">.</button>
864
+ <button class="calc-btn bg-green-500 text-white">=</button>
865
+ </div>
866
+ </div>
867
+ </div>
868
+ </template>
869
+
870
+ <!-- Settings Template -->
871
+ <template id="settings-template">
872
+ <div class="window">
873
+ <div class="window-header">
874
+ <div class="window-title">
875
+ <i class="fas fa-cog"></i>
876
+ <span>System Settings</span>
877
+ </div>
878
+ <div class="window-controls">
879
+ <div class="window-control minimize">
880
+ <i class="fas fa-minus"></i>
881
+ </div>
882
+ <div class="window-control maximize">
883
+ <i class="fas fa-square"></i>
884
+ </div>
885
+ <div class="window-control close">
886
+ <i class="fas fa-times"></i>
887
+ </div>
888
+ </div>
889
+ </div>
890
+ <div class="window-content">
891
+ <h2 class="text-xl font-bold mb-4">Personalization</h2>
892
+
893
+ <div class="mb-6">
894
+ <h3 class="font-semibold mb-2">Wallpaper</h3>
895
+ <div class="settings-grid">
896
+ <div class="wallpaper-preview selected" data-wallpaper="1">
897
+ <img src="https://images.unsplash.com/photo-1505506874110-0a3a6a03b9c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="Mountain Landscape">
898
+ </div>
899
+ <div class="wallpaper-preview" data-wallpaper="2">
900
+ <img src="https://images.unsplash.com/photo-1501854140801-50d01698950b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2048&q=80" alt="Forest">
901
+ </div>
902
+ <div class="wallpaper-preview" data-wallpaper="3">
903
+ <img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2048&q=80" alt="Nature">
904
+ </div>
905
+ <div class="wallpaper-preview" data-wallpaper="4">
906
+ <img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2048&q=80" alt="Landscape">
907
+ </div>
908
+ </div>
909
+ </div>
910
+
911
+ <div class="mb-6">
912
+ <h3 class="font-semibold mb-2">Theme</h3>
913
+ <div class="flex gap-4">
914
+ <div class="cursor-pointer p-3 rounded border-2 border-transparent bg-gradient-to-r from-blue-500 to-purple-500 w-16 h-16" data-theme="default"></div>
915
+ <div class="cursor-pointer p-3 rounded border-2 border-transparent bg-gradient-to-r from-green-500 to-teal-500 w-16 h-16" data-theme="green"></div>
916
+ <div class="cursor-pointer p-3 rounded border-2 border-transparent bg-gradient-to-r from-red-500 to-orange-500 w-16 h-16" data-theme="red"></div>
917
+ <div class="cursor-pointer p-3 rounded border-2 border-transparent bg-gradient-to-r from-gray-700 to-gray-900 w-16 h-16" data-theme="dark"></div>
918
+ </div>
919
+ </div>
920
+ </div>
921
+ </div>
922
+ </template>
923
+
924
+ <script>
925
+ document.addEventListener('DOMContentLoaded', function() {
926
+ // Add to getAppIcon function
927
+ function getAppIcon(appName) {
928
+ const icons = {
929
+ 'file-manager': 'fa-folder',
930
+ 'text-editor': 'fa-file-alt',
931
+ 'browser': 'fa-globe',
932
+ 'settings': 'fa-cog',
933
+ 'terminal': 'fa-terminal',
934
+ 'calculator': 'fa-calculator'
935
+ };
936
+ return icons[appName] || 'fa-question';
937
+ }
938
+
939
+ // Add power menu functionality
940
+ document.querySelector('.fa-power-off').addEventListener('click', function() {
941
+ document.getElementById('power-menu').classList.toggle('hidden');
942
+ });
943
+
944
+ // Add window snapping
945
+ document.addEventListener('keydown', function(e) {
946
+ if (e.key === 'ArrowLeft' && e.altKey && activeWindow) {
947
+ activeWindow.classList.remove('snapped-right', 'maximized');
948
+ activeWindow.classList.add('snapped-left');
949
+ } else if (e.key === 'ArrowRight' && e.altKey && activeWindow) {
950
+ activeWindow.classList.remove('snapped-left', 'maximized');
951
+ activeWindow.classList.add('snapped-right');
952
+ } else if (e.key === 'ArrowUp' && e.altKey && activeWindow) {
953
+ activeWindow.classList.remove('snapped-left', 'snapped-right');
954
+ activeWindow.classList.add('maximized');
955
+ }
956
+ });
957
+
958
+ // Add terminal functionality
959
+ function setupTerminal(terminalWindow) {
960
+ const terminalInput = terminalWindow.querySelector('#terminal-input');
961
+ const terminalOutput = terminalWindow.querySelector('#terminal-output');
962
+
963
+ terminalInput.addEventListener('keydown', function(e) {
964
+ if (e.key === 'Enter') {
965
+ const command = terminalInput.value.trim();
966
+ terminalInput.value = '';
967
+
968
+ // Add command to output
969
+ terminalOutput.innerHTML += `
970
+ <div class="mb-1">
971
+ <span class="text-green-400">user@browseros:~$</span> ${command}
972
+ </div>
973
+ `;
974
+
975
+ // Process command
976
+ let output = '';
977
+ if (command === 'help') {
978
+ output = `Available commands: help, clear, about, echo`;
979
+ } else if (command === 'clear') {
980
+ terminalOutput.innerHTML = '';
981
+ return;
982
+ } else if (command.startsWith('echo ')) {
983
+ output = command.substring(5);
984
+ } else if (command === 'about') {
985
+ output = 'BrowserOS Terminal v1.0';
986
+ } else if (command) {
987
+ output = `Command not found: ${command}`;
988
+ }
989
+
990
+ if (output) {
991
+ terminalOutput.innerHTML += `<div class="mb-2">${output}</div>`;
992
+ }
993
+
994
+ // Scroll to bottom
995
+ terminalOutput.scrollTop = terminalOutput.scrollHeight;
996
+ }
997
+ });
998
+ }
999
+
1000
+ // Add calculator functionality
1001
+ function setupCalculator(calcWindow) {
1002
+ const display = calcWindow.querySelector('#calc-display');
1003
+ const buttons = calcWindow.querySelectorAll('.calc-btn');
1004
+
1005
+ let currentInput = '0';
1006
+ let previousInput = '';
1007
+ let operation = null;
1008
+ let resetInput = false;
1009
+
1010
+ function updateDisplay() {
1011
+ display.textContent = currentInput;
1012
+ }
1013
+
1014
+ buttons.forEach(button => {
1015
+ button.addEventListener('click', function() {
1016
+ const value = this.textContent;
1017
+
1018
+ if (value >= '0' && value <= '9') {
1019
+ if (currentInput === '0' || resetInput) {
1020
+ currentInput = value;
1021
+ resetInput = false;
1022
+ } else {
1023
+ currentInput += value;
1024
+ }
1025
+ } else if (value === '.') {
1026
+ if (!currentInput.includes('.')) {
1027
+ currentInput += '.';
1028
+ }
1029
+ } else if (value === 'C') {
1030
+ currentInput = '0';
1031
+ previousInput = '';
1032
+ operation = null;
1033
+ } else if (value === '±') {
1034
+ currentInput = (parseFloat(currentInput) * -1).toString();
1035
+ } else if (value === '%') {
1036
+ currentInput = (parseFloat(currentInput) / 100).toString();
1037
+ } else if (['+', '-', '×', '÷'].includes(value)) {
1038
+ if (operation !== null) calculate();
1039
+ previousInput = currentInput;
1040
+ operation = value;
1041
+ resetInput = true;
1042
+ } else if (value === '=') {
1043
+ calculate();
1044
+ }
1045
+
1046
+ updateDisplay();
1047
+ });
1048
+ });
1049
+
1050
+ function calculate() {
1051
+ let result;
1052
+ const prev = parseFloat(previousInput);
1053
+ const current = parseFloat(currentInput);
1054
+
1055
+ if (isNaN(prev) || isNaN(current)) return;
1056
+
1057
+ switch (operation) {
1058
+ case '+': result = prev + current; break;
1059
+ case '-': result = prev - current; break;
1060
+ case '×': result = prev * current; break;
1061
+ case '÷': result = prev / current; break;
1062
+ default: return;
1063
+ }
1064
+
1065
+ currentInput = result.toString();
1066
+ operation = null;
1067
+ resetInput = true;
1068
+ }
1069
+ }
1070
+
1071
+ // DOM Elements
1072
+ const desktop = document.getElementById('desktop');
1073
+ const taskbar = document.getElementById('taskbar');
1074
+ const startMenuBtn = document.getElementById('start-menu-btn');
1075
+ const startMenu = document.getElementById('start-menu');
1076
+ const appTray = document.getElementById('app-tray');
1077
+ const clock = document.getElementById('clock');
1078
+ const contextMenu = document.querySelector('.context-menu');
1079
+
1080
+ // State management
1081
+ let openWindows = [];
1082
+ let activeWindow = null;
1083
+ let dragOffset = {x: 0, y: 0};
1084
+ let isDragging = false;
1085
+ let currentDraggedElement = null;
1086
+
1087
+ // Initialize clock
1088
+ function updateClock() {
1089
+ const now = new Date();
1090
+ const hours = now.getHours().toString().padStart(2, '0');
1091
+ const minutes = now.getMinutes().toString().padStart(2, '0');
1092
+ clock.textContent = `${hours}:${minutes}`;
1093
+ }
1094
+ updateClock();
1095
+ setInterval(updateClock, 60000);
1096
+
1097
+ // Start menu toggle
1098
+ startMenuBtn.addEventListener('click', function(e) {
1099
+ e.stopPropagation();
1100
+ startMenu.style.display = startMenu.style.display === 'flex' ? 'none' : 'flex';
1101
+ });
1102
+
1103
+ // Close start menu when clicking elsewhere
1104
+ document.addEventListener('click', function(e) {
1105
+ if (!startMenu.contains(e.target) && e.target !== startMenuBtn) {
1106
+ startMenu.style.display = 'none';
1107
+ }
1108
+ });
1109
+
1110
+ // Desktop icon click handler
1111
+ document.querySelectorAll('.desktop-icon, .app-item').forEach(icon => {
1112
+ icon.addEventListener('click', function(e) {
1113
+ e.stopPropagation();
1114
+ const appName = this.getAttribute('data-app');
1115
+ openApp(appName);
1116
+ });
1117
+ });
1118
+
1119
+ // Context menu handling
1120
+ desktop.addEventListener('contextmenu', function(e) {
1121
+ e.preventDefault();
1122
+ contextMenu.style.display = 'block';
1123
+ contextMenu.style.left = `${e.pageX}px`;
1124
+ contextMenu.style.top = `${e.pageY}px`;
1125
+ });
1126
+
1127
+ document.addEventListener('click', function() {
1128
+ contextMenu.style.display = 'none';
1129
+ });
1130
+
1131
+ // Open application function
1132
+ function openApp(appName) {
1133
+ // Setup app-specific functionality
1134
+ if (appName === 'terminal') {
1135
+ setupTerminal(windowElement);
1136
+ } else if (appName === 'calculator') {
1137
+ setupCalculator(windowElement);
1138
+ }
1139
+ // Close start menu
1140
+ startMenu.style.display = 'none';
1141
+
1142
+ // Check if app is already open
1143
+ const existingWindow = openWindows.find(win => win.appName === appName);
1144
+ if (existingWindow) {
1145
+ // Bring to front
1146
+ bringToFront(existingWindow.element);
1147
+ return;
1148
+ }
1149
+
1150
+ // Create new window
1151
+ const template = document.getElementById(`${appName}-template`);
1152
+ if (!template) return;
1153
+
1154
+ const clone = template.content.cloneNode(true);
1155
+ const windowElement = clone.querySelector('.window');
1156
+
1157
+ // Position window randomly but within view
1158
+ const maxX = window.innerWidth - 400;
1159
+ const maxY = window.innerHeight - 300 - 50; // Account for taskbar
1160
+ const x = Math.max(50, Math.min(maxX, Math.floor(Math.random() * maxX)));
1161
+ const y = Math.max(50, Math.min(maxY, Math.floor(Math.random() * maxY)));
1162
+
1163
+ windowElement.style.left = `${x}px`;
1164
+ windowElement.style.top = `${y}px`;
1165
+
1166
+ // Add to desktop
1167
+ desktop.appendChild(windowElement);
1168
+
1169
+ // Add to app tray
1170
+ const trayApp = document.createElement('div');
1171
+ trayApp.className = 'tray-app';
1172
+ trayApp.innerHTML = `<i class="fas ${getAppIcon(appName)}"></i>`;
1173
+ trayApp.setAttribute('data-app', appName);
1174
+ trayApp.addEventListener('click', function() {
1175
+ const win = openWindows.find(w => w.appName === appName);
1176
+ if (win) {
1177
+ if (win.element.classList.contains('minimized-window')) {
1178
+ win.element.classList.remove('minimized-window');
1179
+ win.element.style.display = 'flex';
1180
+ } else {
1181
+ win.element.classList.add('minimized-window');
1182
+ win.element.style.display = 'none';
1183
+ }
1184
+ }
1185
+ });
1186
+ appTray.appendChild(trayApp);
1187
+
1188
+ // Store window reference
1189
+ const windowObj = {
1190
+ element: windowElement,
1191
+ appName: appName,
1192
+ trayElement: trayApp
1193
+ };
1194
+
1195
+ openWindows.push(windowObj);
1196
+
1197
+ // Set as active window
1198
+ bringToFront(windowElement);
1199
+
1200
+ // Add window controls
1201
+ const header = windowElement.querySelector('.window-header');
1202
+ const minimizeBtn = windowElement.querySelector('.window-control.minimize');
1203
+ const maximizeBtn = windowElement.querySelector('.window-control.maximize');
1204
+ const closeBtn = windowElement.querySelector('.window-control.close');
1205
+
1206
+ // Window dragging
1207
+ header.addEventListener('mousedown', function(e) {
1208
+ if (e.target.classList.contains('window-control')) return;
1209
+
1210
+ isDragging = true;
1211
+ currentDraggedElement = windowElement;
1212
+ dragOffset.x = e.clientX - windowElement.offsetLeft;
1213
+ dragOffset.y = e.clientY - windowElement.offsetTop;
1214
+ bringToFront(windowElement);
1215
+ });
1216
+
1217
+ // Minimize window
1218
+ minimizeBtn.addEventListener('click', function(e) {
1219
+ e.stopPropagation();
1220
+ windowElement.classList.add('minimized-window');
1221
+ windowElement.style.display = 'none';
1222
+ });
1223
+
1224
+ // Maximize window
1225
+ maximizeBtn.addEventListener('click', function(e) {
1226
+ e.stopPropagation();
1227
+ windowElement.classList.toggle('maximized');
1228
+
1229
+ // Update maximize icon
1230
+ const icon = maximizeBtn.querySelector('i');
1231
+ if (windowElement.classList.contains('maximized')) {
1232
+ icon.classList.remove('fa-square');
1233
+ icon.classList.add('fa-clone');
1234
+ } else {
1235
+ icon.classList.add('fa-square');
1236
+ icon.classList.remove('fa-clone');
1237
+ }
1238
+ });
1239
+
1240
+ // Close window
1241
+ closeBtn.addEventListener('click', function(e) {
1242
+ e.stopPropagation();
1243
+ windowElement.remove();
1244
+ trayApp.remove();
1245
+
1246
+ // Remove from open windows
1247
+ openWindows = openWindows.filter(win => win.element !== windowElement);
1248
+
1249
+ // Activate next window if available
1250
+ if (openWindows.length > 0) {
1251
+ bringToFront(openWindows[openWindows.length - 1].element);
1252
+ }
1253
+ });
1254
+
1255
+ // Tab switching for file manager
1256
+ if (appName === 'file-manager') {
1257
+ const tabs = windowElement.querySelectorAll('.tab');
1258
+ tabs.forEach(tab => {
1259
+ tab.addEventListener('click', function() {
1260
+ // Remove active class from all tabs
1261
+ tabs.forEach(t => t.classList.remove('active'));
1262
+
1263
+ // Add active class to clicked tab
1264
+ this.classList.add('active');
1265
+
1266
+ // Hide all tab content
1267
+ const tabContents = windowElement.querySelectorAll('.tab-content');
1268
+ tabContents.forEach(content => content.classList.remove('active'));
1269
+
1270
+ // Show corresponding tab content
1271
+ const tabName = this.getAttribute('data-tab');
1272
+ const content = windowElement.querySelector(`#${tabName}-tab`);
1273
+ if (content) content.classList.add('active');
1274
+ });
1275
+ });
1276
+ }
1277
+
1278
+ // Wallpaper selection for settings
1279
+ if (appName === 'settings') {
1280
+ const wallpaperPreviews = windowElement.querySelectorAll('.wallpaper-preview');
1281
+ wallpaperPreviews.forEach(preview => {
1282
+ preview.addEventListener('click', function() {
1283
+ // Remove selected class from all
1284
+ wallpaperPreviews.forEach(p => p.classList.remove('selected'));
1285
+
1286
+ // Add selected class to clicked
1287
+ this.classList.add('selected');
1288
+
1289
+ // Change desktop background
1290
+ const img = this.querySelector('img');
1291
+ desktop.style.backgroundImage = `url('${img.src}')`;
1292
+ });
1293
+ });
1294
+ }
1295
+ }
1296
+
1297
+ // Get app icon based on app name
1298
+ function getAppIcon(appName) {
1299
+ const icons = {
1300
+ 'file-manager': 'fa-folder',
1301
+ 'text-editor': 'fa-file-alt',
1302
+ 'browser': 'fa-globe',
1303
+ 'settings': 'fa-cog',
1304
+ 'terminal': 'fa-terminal',
1305
+ 'calculator': 'fa-calculator'
1306
+ };
1307
+ return icons[appName] || 'fa-question';
1308
+ }
1309
+
1310
+ // Bring window to front
1311
+ function bringToFront(windowElement) {
1312
+ // Move to top of z-index stack
1313
+ const windows = document.querySelectorAll('.window');
1314
+ let maxZ = 10;
1315
+
1316
+ windows.forEach(win => {
1317
+ const z = parseInt(win.style.zIndex) || 0;
1318
+ if (z > maxZ) maxZ = z;
1319
+ win.style.zIndex = z;
1320
+ });
1321
+
1322
+ windowElement.style.zIndex = maxZ + 1;
1323
+ activeWindow = windowElement;
1324
+
1325
+ // Update tray app active state
1326
+ const appName = openWindows.find(win => win.element === windowElement)?.appName;
1327
+ if (appName) {
1328
+ document.querySelectorAll('.tray-app').forEach(app => {
1329
+ app.classList.remove('active');
1330
+ });
1331
+ const trayApp = document.querySelector(`.tray-app[data-app="${appName}"]`);
1332
+ if (trayApp) trayApp.classList.add('active');
1333
+ }
1334
+ }
1335
+
1336
+ // Global mouse events for dragging
1337
+ document.addEventListener('mousemove', function(e) {
1338
+ if (isDragging && currentDraggedElement) {
1339
+ const x = e.clientX - dragOffset.x;
1340
+ const y = e.clientY - dragOffset.y;
1341
+
1342
+ // Keep window within bounds
1343
+ const maxX = window.innerWidth - currentDraggedElement.offsetWidth;
1344
+ const maxY = window.innerHeight - currentDraggedElement.offsetHeight - 50; // Account for taskbar
1345
+
1346
+ currentDraggedElement.style.left = `${Math.max(0, Math.min(maxX, x))}px`;
1347
+ currentDraggedElement.style.top = `${Math.max(0, Math.min(maxY, y))}px`;
1348
+ }
1349
+ });
1350
+
1351
+ document.addEventListener('mouseup', function() {
1352
+ isDragging = false;
1353
+ currentDraggedElement = null;
1354
+ });
1355
+
1356
+ // Window click to bring to front
1357
+ desktop.addEventListener('click', function(e) {
1358
+ const windowElement = e.target.closest('.window');
1359
+ if (windowElement) {
1360
+ bringToFront(windowElement);
1361
+ }
1362
+ });
1363
+
1364
+ // Context menu actions
1365
+ document.getElementById('context-new-folder').addEventListener('click', function() {
1366
+ alert('New folder created!');
1367
+ contextMenu.style.display = 'none';
1368
+ });
1369
+
1370
+ document.getElementById('context-new-file').addEventListener('click', function() {
1371
+ alert('New file created!');
1372
+ contextMenu.style.display = 'none';
1373
+ });
1374
+
1375
+ // Initialize with File Manager open
1376
+ openApp('file-manager');
1377
+ });
1378
+ </script>
1379
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=TechITProfessional/hfos" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1380
+ </html>