Hugging Face's logo

Spaces:
Boobs00
/
myspace
Running

App Files Community
igorvkarpov commited on
Commit
9823874
·
verified ·
1 Parent(s): f27289d

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +660 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Myspace
3
- emoji: 👁
4
- colorFrom: purple
5
- colorTo: indigo
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: myspace
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
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,660 @@
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>WinUI</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ user-select: none;
14
+ }
15
+
16
+ body {
17
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
18
+ background-color: #0078d7;
19
+ background-image: url('https://4kwallpapers.com/images/wallpapers/windows-11-dark-mode-stock-official-3840x2400-5630.jpg');
20
+ background-size: cover;
21
+ background-position: center;
22
+ height: 100vh;
23
+ overflow: hidden;
24
+ color: white;
25
+ }
26
+
27
+ .desktop {
28
+ height: calc(100vh - 40px);
29
+ padding: 10px;
30
+ display: grid;
31
+ grid-template-columns: repeat(auto-fill, 80px);
32
+ grid-auto-rows: min-content;
33
+ gap: 20px;
34
+ align-content: start;
35
+ }
36
+
37
+ .desktop-icon {
38
+ width: 80px;
39
+ text-align: center;
40
+ cursor: pointer;
41
+ padding: 5px;
42
+ border-radius: 5px;
43
+ }
44
+
45
+ .desktop-icon:hover {
46
+ background-color: rgba(255, 255, 255, 0.2);
47
+ }
48
+
49
+ .desktop-icon img {
50
+ width: 40px;
51
+ height: 40px;
52
+ margin-bottom: 5px;
53
+ }
54
+
55
+ .desktop-icon span {
56
+ font-size: 12px;
57
+ display: block;
58
+ text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
59
+ word-break: break-word;
60
+ }
61
+
62
+ .taskbar {
63
+ position: fixed;
64
+ bottom: 0;
65
+ left: 0;
66
+ width: 100%;
67
+ height: 40px;
68
+ background-color: rgba(32, 32, 32, 0.8);
69
+ backdrop-filter: blur(10px);
70
+ display: flex;
71
+ align-items: center;
72
+ z-index: 1000;
73
+ }
74
+
75
+ .start-button {
76
+ height: 100%;
77
+ padding: 0 10px;
78
+ display: flex;
79
+ align-items: center;
80
+ gap: 5px;
81
+ font-weight: bold;
82
+ cursor: pointer;
83
+ transition: background-color 0.2s;
84
+ }
85
+
86
+ .start-button:hover {
87
+ background-color: rgba(255, 255, 255, 0.1);
88
+ }
89
+
90
+ .taskbar-icons {
91
+ display: flex;
92
+ height: 100%;
93
+ align-items: center;
94
+ gap: 2px;
95
+ margin-left: 10px;
96
+ }
97
+
98
+ .taskbar-icon {
99
+ width: 24px;
100
+ height: 24px;
101
+ padding: 8px;
102
+ cursor: pointer;
103
+ border-radius: 4px;
104
+ }
105
+
106
+ .taskbar-icon:hover {
107
+ background-color: rgba(255, 255, 255, 0.1);
108
+ }
109
+
110
+ .taskbar-icon img {
111
+ width: 100%;
112
+ height: 100%;
113
+ }
114
+
115
+ .clock {
116
+ margin-left: auto;
117
+ padding: 0 15px;
118
+ font-size: 12px;
119
+ }
120
+
121
+ .start-menu {
122
+ position: absolute;
123
+ bottom: 40px;
124
+ left: 0;
125
+ width: 500px;
126
+ height: 600px;
127
+ background-color: rgba(32, 32, 32, 0.9);
128
+ backdrop-filter: blur(20px);
129
+ border-radius: 8px 8px 0 0;
130
+ display: none;
131
+ z-index: 1001;
132
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
133
+ overflow: hidden;
134
+ }
135
+
136
+ .start-menu-header {
137
+ padding: 15px;
138
+ display: flex;
139
+ align-items: center;
140
+ gap: 10px;
141
+ }
142
+
143
+ .start-menu-header input {
144
+ flex-grow: 1;
145
+ background: rgba(255, 255, 255, 0.1);
146
+ border: none;
147
+ padding: 8px 15px;
148
+ border-radius: 20px;
149
+ color: white;
150
+ outline: none;
151
+ }
152
+
153
+ .start-menu-content {
154
+ display: grid;
155
+ grid-template-columns: 1fr 1fr;
156
+ height: calc(100% - 60px);
157
+ }
158
+
159
+ .pinned-apps, .recommended {
160
+ padding: 10px;
161
+ overflow-y: auto;
162
+ }
163
+
164
+ .pinned-apps h3, .recommended h3 {
165
+ margin-bottom: 15px;
166
+ font-weight: normal;
167
+ font-size: 14px;
168
+ color: rgba(255, 255, 255, 0.7);
169
+ }
170
+
171
+ .app-grid {
172
+ display: grid;
173
+ grid-template-columns: repeat(3, 1fr);
174
+ gap: 10px;
175
+ }
176
+
177
+ .app {
178
+ padding: 10px;
179
+ border-radius: 5px;
180
+ cursor: pointer;
181
+ display: flex;
182
+ flex-direction: column;
183
+ align-items: center;
184
+ text-align: center;
185
+ }
186
+
187
+ .app:hover {
188
+ background-color: rgba(255, 255, 255, 0.1);
189
+ }
190
+
191
+ .app img {
192
+ width: 30px;
193
+ height: 30px;
194
+ margin-bottom: 5px;
195
+ }
196
+
197
+ .app span {
198
+ font-size: 12px;
199
+ }
200
+
201
+ .user-profile {
202
+ margin-top: auto;
203
+ padding: 15px;
204
+ display: flex;
205
+ align-items: center;
206
+ gap: 10px;
207
+ background-color: rgba(0, 0, 0, 0.2);
208
+ cursor: pointer;
209
+ }
210
+
211
+ .user-profile:hover {
212
+ background-color: rgba(0, 0, 0, 0.3);
213
+ }
214
+
215
+ .user-profile img {
216
+ width: 30px;
217
+ height: 30px;
218
+ border-radius: 50%;
219
+ }
220
+
221
+ .window {
222
+ position: absolute;
223
+ min-width: 300px;
224
+ min-height: 200px;
225
+ background-color: rgba(32, 32, 32, 0.9);
226
+ backdrop-filter: blur(20px);
227
+ border-radius: 8px;
228
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
229
+ display: none;
230
+ flex-direction: column;
231
+ overflow: hidden;
232
+ z-index: 10;
233
+ }
234
+
235
+ .window.active {
236
+ z-index: 100;
237
+ display: flex;
238
+ }
239
+
240
+ .window-header {
241
+ padding: 8px 10px;
242
+ display: flex;
243
+ align-items: center;
244
+ background-color: rgba(0, 0, 0, 0.2);
245
+ cursor: move;
246
+ }
247
+
248
+ .window-icon {
249
+ width: 16px;
250
+ height: 16px;
251
+ margin-right: 8px;
252
+ }
253
+
254
+ .window-title {
255
+ flex-grow: 1;
256
+ font-size: 12px;
257
+ }
258
+
259
+ .window-controls {
260
+ display: flex;
261
+ }
262
+
263
+ .window-btn {
264
+ width: 30px;
265
+ height: 30px;
266
+ display: flex;
267
+ align-items: center;
268
+ justify-content: center;
269
+ cursor: pointer;
270
+ background: none;
271
+ border: none;
272
+ color: white;
273
+ }
274
+
275
+ .window-btn:hover {
276
+ background-color: rgba(255, 255, 255, 0.1);
277
+ }
278
+
279
+ .window-btn.close:hover {
280
+ background-color: #e81123;
281
+ }
282
+
283
+ .window-content {
284
+ flex-grow: 1;
285
+ padding: 15px;
286
+ overflow: auto;
287
+ }
288
+
289
+ .window-footer {
290
+ padding: 8px;
291
+ background-color: rgba(0, 0, 0, 0.1);
292
+ font-size: 12px;
293
+ display: flex;
294
+ justify-content: space-between;
295
+ }
296
+
297
+ /* Explorer window specific */
298
+ .explorer-nav {
299
+ display: flex;
300
+ padding: 5px 10px;
301
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
302
+ }
303
+
304
+ .explorer-nav-btn {
305
+ background: none;
306
+ border: none;
307
+ color: white;
308
+ padding: 5px 10px;
309
+ font-size: 12px;
310
+ cursor: pointer;
311
+ border-radius: 3px;
312
+ }
313
+
314
+ .explorer-nav-btn:hover {
315
+ background-color: rgba(255, 255, 255, 0.1);
316
+ }
317
+
318
+ .explorer-path {
319
+ flex-grow: 1;
320
+ padding: 5px;
321
+ font-size: 12px;
322
+ color: rgba(255, 255, 255, 0.7);
323
+ border: 1px solid rgba(255, 255, 255, 0.2);
324
+ border-radius: 3px;
325
+ background: rgba(0, 0, 0, 0.2);
326
+ }
327
+
328
+ .explorer-body {
329
+ display: flex;
330
+ height: calc(100% - 60px);
331
+ }
332
+
333
+ .explorer-sidebar {
334
+ width: 200px;
335
+ padding: 10px;
336
+ border-right: 1px solid rgba(255, 255, 255, 0.1);
337
+ }
338
+
339
+ .explorer-files {
340
+ flex-grow: 1;
341
+ padding: 10px;
342
+ overflow-y: auto;
343
+ }
344
+
345
+ .folder {
346
+ display: flex;
347
+ align-items: center;
348
+ padding: 5px;
349
+ cursor: pointer;
350
+ border-radius: 3px;
351
+ }
352
+
353
+ .folder:hover {
354
+ background-color: rgba(255, 255, 255, 0.1);
355
+ }
356
+
357
+ .folder-icon {
358
+ width: 20px;
359
+ height: 20px;
360
+ margin-right: 8px;
361
+ }
362
+
363
+ /* Notepad window specific */
364
+ .notepad-textarea {
365
+ width: 100%;
366
+ height: 100%;
367
+ background: none;
368
+ border: none;
369
+ color: white;
370
+ font-family: 'Consolas', monospace;
371
+ resize: none;
372
+ outline: none;
373
+ }
374
+ </style>
375
+ </head>
376
+ <body>
377
+ <div class="desktop">
378
+ <div class="desktop-icon" onclick="openWindow('explorer')">
379
+ <img src="https://cdn-icons-png.flaticon.com/512/2965/2965300.png" alt="File Explorer">
380
+ <span>File Explorer</span>
381
+ </div>
382
+ <div class="desktop-icon" onclick="openWindow('notepad')">
383
+ <img src="https://cdn-icons-png.flaticon.com/512/2809/2809932.png" alt="Notepad">
384
+ <span>Notepad</span>
385
+ </div>
386
+ <div class="desktop-icon" onclick="openWindow('calculator')">
387
+ <img src="https://cdn-icons-png.flaticon.com/512/210/210826.png" alt="Calculator">
388
+ <span>Calculator</span>
389
+ </div>
390
+ <div class="desktop-icon">
391
+ <img src="https://cdn-icons-png.flaticon.com/512/888/888882.png" alt="Chrome">
392
+ <span>Google Chrome</span>
393
+ </div>
394
+ </div>
395
+
396
+ <div class="taskbar">
397
+ <div class="start-button" id="startButton" onclick="toggleStartMenu()">
398
+ <i class="fab fa-windows"></i>
399
+ </div>
400
+ <div class="taskbar-icons">
401
+ <div class="taskbar-icon" onclick="openWindow('explorer')">
402
+ <img src="https://cdn-icons-png.flaticon.com/512/2965/2965300.png" alt="File Explorer">
403
+ </div>
404
+ <div class="taskbar-icon" onclick="openWindow('notepad')">
405
+ <img src="https://cdn-icons-png.flaticon.com/512/2809/2809932.png" alt="Notepad">
406
+ </div>
407
+ <div class="taskbar-icon" onclick="openWindow('calculator')">
408
+ <img src="https://cdn-icons-png.flaticon.com/512/210/210826.png" alt="Calculator">
409
+ </div>
410
+ </div>
411
+ <div class="clock" id="clock">12:00 PM</div>
412
+ </div>
413
+
414
+ <div class="start-menu" id="startMenu">
415
+ <div class="start-menu-header">
416
+ <i class="fas fa-search"></i>
417
+ <input type="text" placeholder="Type here to search">
418
+ </div>
419
+ <div class="start-menu-content">
420
+ <div class="pinned-apps">
421
+ <h3>Pinned</h3>
422
+ <div class="app-grid">
423
+ <div class="app" onclick="openWindow('explorer')">
424
+ <img src="https://cdn-icons-png.flaticon.com/512/2965/2965300.png" alt="File Explorer">
425
+ <span>File Explorer</span>
426
+ </div>
427
+ <div class="app" onclick="openWindow('notepad')">
428
+ <img src="https://cdn-icons-png.flaticon.com/512/2809/2809932.png" alt="Notepad">
429
+ <span>Notepad</span>
430
+ </div>
431
+ <div class="app" onclick="openWindow('calculator')">
432
+ <img src="https://cdn-icons-png.flaticon.com/512/210/210826.png" alt="Calculator">
433
+ <span>Calculator</span>
434
+ </div>
435
+ <div class="app">
436
+ <img src="https://cdn-icons-png.flaticon.com/512/888/888882.png" alt="Chrome">
437
+ <span>Google Chrome</span>
438
+ </div>
439
+ <div class="app">
440
+ <img src="https://cdn-icons-png.flaticon.com/512/2965/2965278.png" alt="Settings">
441
+ <span>Settings</span>
442
+ </div>
443
+ <div class="app">
444
+ <img src="https://cdn-icons-png.flaticon.com/512/2965/2965256.png" alt="Store">
445
+ <span>Microsoft Store</span>
446
+ </div>
447
+ </div>
448
+ </div>
449
+ <div class="recommended">
450
+ <h3>Recommended</h3>
451
+ <div class="app-grid">
452
+ <div class="app">
453
+ <img src="https://cdn-icons-png.flaticon.com/512/2965/2965283.png" alt="Word">
454
+ <span>Word</span>
455
+ </div>
456
+ <div class="app">
457
+ <img src="https://cdn-icons-png.flaticon.com/512/2965/2965335.png" alt="Excel">
458
+ <span>Excel</span>
459
+ </div>
460
+ <div class="app">
461
+ <img src="https://cdn-icons-png.flaticon.com/512/2965/2965291.png" alt="PowerPoint">
462
+ <span>PowerPoint</span>
463
+ </div>
464
+ <div class="app">
465
+ <img src="https://cdn-icons-png.flaticon.com/512/2913/2913111.png" alt="Visual Studio">
466
+ <span>Visual Studio</span>
467
+ </div>
468
+ <div class="app">
469
+ <img src="https://cdn-icons-png.flaticon.com/512/5968/5968666.png" alt="Edge">
470
+ <span>Edge</span>
471
+ </div>
472
+ <div class="app">
473
+ <img src="https://cdn-icons-png.flaticon.com/512/3046/3046125.png" alt="Outlook">
474
+ <span>Outlook</span>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ </div>
479
+ <div class="user-profile" onclick="openWindow('user-settings')">
480
+ <img src="https://cdn-icons-png.flaticon.com/512/149/149071.png" alt="User">
481
+ <span>User</span>
482
+ </div>
483
+ </div>
484
+
485
+ <div class="window" id="explorerWindow">
486
+ <div class="window-header">
487
+ <img class="window-icon" src="https://cdn-icons-png.flaticon.com/512/2965/2965300.png" alt="Explorer">
488
+ <div class="window-title">File Explorer</div>
489
+ <div class="window-controls">
490
+ <button class="window-btn minimize"><i class="fas fa-minus"></i></button>
491
+ <button class="window-btn maximize"><i class="far fa-square"></i></button>
492
+ <button class="window-btn close" onclick="closeWindow('explorerWindow')"><i class="fas fa-times"></i></button>
493
+ </div>
494
+ </div>
495
+ <div class="explorer-nav">
496
+ <button class="explorer-nav-btn"><i class="fas fa-arrow-left"></i></button>
497
+ <button class="explorer-nav-btn"><i class="fas fa-arrow-right"></i></button>
498
+ <button class="explorer-nav-btn"><i class="fas fa-arrow-up"></i></button>
499
+ <input type="text" class="explorer-path" value="This PC > Documents">
500
+ </div>
501
+ <div class="explorer-body">
502
+ <div class="explorer-sidebar">
503
+ <div class="folder">
504
+ <img class="folder-icon" src="https://cdn-icons-png.flaticon.com/512/2965/2965318.png" alt="Desktop">
505
+ <span>Desktop</span>
506
+ </div>
507
+ <div class="folder">
508
+ <img class="folder-icon" src="https://cdn-icons-png.flaticon.com/512/2965/2965316.png" alt="Documents">
509
+ <span>Documents</span>
510
+ </div>
511
+ <div class="folder">
512
+ <img class="folder-icon" src="https://cdn-icons-png.flaticon.com/512/2965/2965311.png" alt="Downloads">
513
+ <span>Downloads</span>
514
+ </div>
515
+ <div class="folder">
516
+ <img class="folder-icon" src="https://cdn-icons-png.flaticon.com/512/2965/2965334.png" alt="Music">
517
+ <span>Music</span>
518
+ </div>
519
+ <div class="folder">
520
+ <img class="folder-icon" src="https://cdn-icons-png.flaticon.com/512/2965/2965351.png" alt="Pictures">
521
+ <span>Pictures</span>
522
+ </div>
523
+ <div class="folder">
524
+ <img class="folder-icon" src="https://cdn-icons-png.flaticon.com/512/2965/2965341.png" alt="Videos">
525
+ <span>Videos</span>
526
+ </div>
527
+ </div>
528
+ <div class="explorer-files">
529
+ Some files would be listed here...
530
+ </div>
531
+ </div>
532
+ <div class="window-footer">
533
+ <div>5 items</div>
534
+ <div>100 GB free of 256 GB</div>
535
+ </div>
536
+ </div>
537
+
538
+ <div class="window" id="notepadWindow">
539
+ <div class="window-header">
540
+ <img class="window-icon" src="https://cdn-icons-png.flaticon.com/512/2809/2809932.png" alt="Notepad">
541
+ <div class="window-title">Untitled - Notepad</div>
542
+ <div class="window-controls">
543
+ <button class="window-btn minimize"><i class="fas fa-minus"></i></button>
544
+ <button class="window-btn maximize"><i class="far fa-square"></i></button>
545
+ <button class="window-btn close" onclick="closeWindow('notepadWindow')"><i class="fas fa-times"></i></button>
546
+ </div>
547
+ </div>
548
+ <div class="window-content">
549
+ <textarea class="notepad-textarea">This is a sample text in Notepad.
550
+
551
+ You can type here whatever you want.
552
+
553
+ • List item 1
554
+ • List item 2
555
+ • List item 3
556
+
557
+ 1234567890
558
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ
559
+ abcdefghijklmnopqrstuvwxyz</textarea>
560
+ </div>
561
+ <div class="window-footer">
562
+ <div>Ln 7, Col 1</div>
563
+ <div>Windows (CRLF)</div>
564
+ <div>UTF-8</div>
565
+ </div>
566
+ </div>
567
+
568
+ <div class="window" id="calculatorWindow">
569
+ <div class="window-header">
570
+ <img class="window-icon" src="https://cdn-icons-png.flaticon.com/512/210/210826.png" alt="Calculator">
571
+ <div class="window-title">Calculator</div>
572
+ <div class="window-controls">
573
+ <button class="window-btn minimize"><i class="fas fa-minus"></i></button>
574
+ <button class="window-btn maximize"><i class="far fa-square"></i></button>
575
+ <button class="window-btn close" onclick="closeWindow('calculatorWindow')"><i class="fas fa-times"></i></button>
576
+ </div>
577
+ </div>
578
+ <div class="window-content">
579
+ <p>Calculator functionality would go here...</p>
580
+ </div>
581
+ </div>
582
+
583
+ <script>
584
+ // Clock functionality
585
+ function updateClock() {
586
+ const now = new Date();
587
+ const hours = now.getHours();
588
+ const minutes = now.getMinutes().toString().padStart(2, '0');
589
+ const ampm = hours >= 12 ? 'PM' : 'AM';
590
+ const formattedHours = hours % 12 || 12;
591
+
592
+ document.getElementById('clock').textContent = `${formattedHours}:${minutes} ${ampm}`;
593
+ }
594
+
595
+ setInterval(updateClock, 1000);
596
+ updateClock();
597
+
598
+ // Start menu functionality
599
+ function toggleStartMenu() {
600
+ const startMenu = document.getElementById('startMenu');
601
+ startMenu.style.display = startMenu.style.display === 'block' ? 'none' : 'block';
602
+ }
603
+
604
+ // Close start menu when clicking outside
605
+ document.addEventListener('click', function(event) {
606
+ const startMenu = document.getElementById('startMenu');
607
+ const startButton = document.getElementById('startButton');
608
+
609
+ if (!startMenu.contains(event.target) && event.target !== startButton) {
610
+ startMenu.style.display = 'none';
611
+ }
612
+ });
613
+
614
+ // Window management
615
+ function openWindow(windowId) {
616
+ document.getElementById(windowId + 'Window').classList.add('active');
617
+ document.getElementById('startMenu').style.display = 'none';
618
+ }
619
+
620
+ function closeWindow(windowId) {
621
+ document.getElementById(windowId).classList.remove('active');
622
+ }
623
+
624
+ // Make windows draggable
625
+ const windows = document.querySelectorAll('.window');
626
+ windows.forEach(window => {
627
+ const header = window.querySelector('.window-header');
628
+ let isDragging = false;
629
+ let offsetX, offsetY;
630
+
631
+ header.addEventListener('mousedown', function(e) {
632
+ isDragging = true;
633
+ offsetX = e.clientX - window.getBoundingClientRect().left;
634
+ offsetY = e.clientY - window.getBoundingClientRect().top;
635
+
636
+ // Bring to front
637
+ windows.forEach(w => w.style.zIndex = 10);
638
+ window.style.zIndex = 100;
639
+ });
640
+
641
+ document.addEventListener('mousemove', function(e) {
642
+ if (!isDragging) return;
643
+
644
+ const x = e.clientX - offsetX;
645
+ const y = e.clientY - offsetY;
646
+
647
+ window.style.left = x + 'px';
648
+ window.style.top = y + 'px';
649
+ });
650
+
651
+ document.addEventListener('mouseup', function() {
652
+ isDragging = false;
653
+ });
654
+ });
655
+
656
+ // Open File Explorer by default
657
+ openWindow('explorer');
658
+ </script>
659
+ <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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
660
+ </html>