Hugging Face's logo

Spaces:
SiddhJagani
/
Mios-OS
Running

App Files Community
SiddhJagani commited on
Commit
ffdcfe3
·
verified ·
1 Parent(s): 860e776

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +730 -19
index.html CHANGED
@@ -1,19 +1,730 @@
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, maximum-scale=1.0, user-scalable=no">
6
+ <title>Mios - Hybrid OS</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
+
10
+ <!-- Import WebLLM for Local AI (ES Module Shim for browser support) -->
11
+ <script type="module">
12
+ // We will inject the worker logic via Blob to keep it single-file
13
+ </script>
14
+
15
+ <style>
16
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
17
+
18
+ :root {
19
+ --glass-border: rgba(255, 255, 255, 0.2);
20
+ --glass-bg: rgba(255, 255, 255, 0.65);
21
+ --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
22
+ --dock-bg: rgba(255, 255, 255, 0.4);
23
+ --accent: #007AFF;
24
+ }
25
+
26
+ body {
27
+ font-family: 'Inter', sans-serif;
28
+ overflow: hidden;
29
+ user-select: none;
30
+ background: #000;
31
+ }
32
+
33
+ /* Wallpaper Animation */
34
+ .wallpaper {
35
+ background: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop') center/cover no-repeat;
36
+ transition: filter 0.5s ease, transform 0.5s ease;
37
+ }
38
+
39
+ /* Glassmorphism Utils */
40
+ .glass {
41
+ background: var(--glass-bg);
42
+ backdrop-filter: blur(16px);
43
+ -webkit-backdrop-filter: blur(16px);
44
+ border: 1px solid var(--glass-border);
45
+ }
46
+
47
+ .glass-dark {
48
+ background: rgba(20, 20, 20, 0.7);
49
+ backdrop-filter: blur(20px);
50
+ -webkit-backdrop-filter: blur(20px);
51
+ border: 1px solid rgba(255, 255, 255, 0.1);
52
+ color: white;
53
+ }
54
+
55
+ /* App Icons */
56
+ .app-icon {
57
+ box-shadow: 0 4px 10px rgba(0,0,0,0.2);
58
+ transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
59
+ }
60
+ .app-icon:hover {
61
+ transform: scale(1.15) translateY(-5px);
62
+ }
63
+ .app-icon:active {
64
+ transform: scale(0.95);
65
+ }
66
+
67
+ /* Window Management */
68
+ .window {
69
+ position: absolute;
70
+ transition: transform 0.15s, opacity 0.15s, width 0.2s, height 0.2s;
71
+ box-shadow: 0 20px 50px rgba(0,0,0,0.3);
72
+ opacity: 0;
73
+ transform: scale(0.9);
74
+ pointer-events: none;
75
+ overflow: hidden;
76
+ display: flex;
77
+ flex-direction: column;
78
+ }
79
+
80
+ .window.active {
81
+ opacity: 1;
82
+ transform: scale(1);
83
+ pointer-events: all;
84
+ }
85
+
86
+ .window.minimized {
87
+ opacity: 0;
88
+ transform: scale(0) translateY(500px);
89
+ pointer-events: none;
90
+ }
91
+
92
+ .window-content {
93
+ flex: 1;
94
+ position: relative;
95
+ overflow: auto;
96
+ }
97
+
98
+ /* Boot Screen */
99
+ #boot-screen {
100
+ z-index: 9999;
101
+ transition: opacity 1s ease;
102
+ }
103
+
104
+ /* Scrollbars */
105
+ ::-webkit-scrollbar { width: 6px; }
106
+ ::-webkit-scrollbar-track { background: transparent; }
107
+ ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 3px; }
108
+ ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.3); }
109
+
110
+ /* Calculator Keys */
111
+ .calc-btn {
112
+ transition: filter 0.1s;
113
+ }
114
+ .calc-btn:active {
115
+ filter: brightness(1.2);
116
+ }
117
+
118
+ /* Camera Feed */
119
+ video {
120
+ transform: scaleX(-1);
121
+ object-fit: cover;
122
+ }
123
+
124
+ /* AI Chat Bubbles */
125
+ .chat-bubble {
126
+ max-width: 80%;
127
+ animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
128
+ }
129
+ @keyframes popIn {
130
+ from { transform: scale(0.8); opacity: 0; }
131
+ to { transform: scale(1); opacity: 1; }
132
+ }
133
+
134
+ /* Markdown Styles in AI */
135
+ .ai-markdown code {
136
+ background: rgba(0,0,0,0.1);
137
+ padding: 2px 4px;
138
+ border-radius: 4px;
139
+ font-family: monospace;
140
+ }
141
+ .ai-markdown pre {
142
+ background: #1e1e1e;
143
+ color: #d4d4d4;
144
+ padding: 10px;
145
+ border-radius: 8px;
146
+ overflow-x: auto;
147
+ margin: 5px 0;
148
+ }
149
+ </style>
150
+ </head>
151
+ <body class="h-screen w-screen overflow-hidden text-gray-900 wallpaper relative" id="desktop-area">
152
+
153
+ <!-- BOOT SCREEN -->
154
+ <div id="boot-screen" class="absolute inset-0 bg-black flex flex-col items-center justify-center text-white">
155
+ <i class="fab fa-apple text-6xl mb-8"></i>
156
+ <div class="w-48 h-1 bg-gray-800 rounded-full overflow-hidden">
157
+ <div class="h-full bg-white w-0 transition-all duration-[2000ms] ease-out" id="boot-bar"></div>
158
+ </div>
159
+ </div>
160
+
161
+ <!-- TOP BAR -->
162
+ <div class="absolute top-0 left-0 right-0 h-8 glass-dark z-50 flex justify-between items-center px-4 text-xs font-medium select-none">
163
+ <div class="flex items-center space-x-4">
164
+ <i class="fab fa-apple text-base cursor-pointer hover:text-gray-300"></i>
165
+ <span class="font-bold" id="active-app-name">Finder</span>
166
+ <span class="hidden md:inline hover:text-gray-300 cursor-pointer">File</span>
167
+ <span class="hidden md:inline hover:text-gray-300 cursor-pointer">Edit</span>
168
+ <span class="hidden md:inline hover:text-gray-300 cursor-pointer">View</span>
169
+ <span class="hidden md:inline hover:text-gray-300 cursor-pointer">Window</span>
170
+ <span class="hidden md:inline hover:text-gray-300 cursor-pointer">Help</span>
171
+ </div>
172
+ <div class="flex items-center space-x-4" id="status-right">
173
+ <div class="flex items-center space-x-2 cursor-pointer hover:bg-white/10 p-1 rounded" onclick="toggleControlCenter()">
174
+ <i class="fas fa-battery-full text-green-400"></i>
175
+ <i class="fas fa-wifi"></i>
176
+ <i class="fas fa-search"></i>
177
+ </div>
178
+ <span id="clock">12:00 PM</span>
179
+ </div>
180
+ </div>
181
+
182
+ <!-- CONTROL CENTER -->
183
+ <div id="control-center" class="absolute top-10 right-2 w-80 glass-dark rounded-2xl p-4 transform translate-y-[-150%] transition-transform duration-300 z-50 grid grid-cols-2 gap-3 shadow-2xl">
184
+ <div class="col-span-1 bg-white/10 rounded-xl p-3 flex flex-col justify-between h-24 hover:bg-white/20 transition cursor-pointer">
185
+ <div class="flex justify-between">
186
+ <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white"><i class="fas fa-wifi"></i></div>
187
+ <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white"><i class="fab fa-bluetooth-b"></i></div>
188
+ </div>
189
+ <span class="text-white text-xs font-medium">Connections</span>
190
+ </div>
191
+ <div class="col-span-1 bg-white/10 rounded-xl p-3 flex flex-col justify-between h-24 hover:bg-white/20 transition cursor-pointer">
192
+ <div class="w-8 h-8 rounded-full bg-orange-500 flex items-center justify-center text-white"><i class="fas fa-music"></i></div>
193
+ <span class="text-white text-xs font-medium">Not Playing</span>
194
+ </div>
195
+ <div class="col-span-2 bg-white/10 rounded-xl p-4 flex items-center space-x-3">
196
+ <i class="fas fa-sun text-white"></i>
197
+ <input type="range" class="w-full h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer">
198
+ </div>
199
+ <div class="col-span-2 bg-white/10 rounded-xl p-4 flex items-center space-x-3">
200
+ <i class="fas fa-volume-up text-white"></i>
201
+ <input type="range" class="w-full h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer">
202
+ </div>
203
+ </div>
204
+
205
+ <!-- WINDOW CONTAINER -->
206
+ <div id="window-container" class="absolute inset-0 pt-8 pb-24 pointer-events-none z-10">
207
+ <!-- Apps injected here -->
208
+ </div>
209
+
210
+ <!-- DOCK -->
211
+ <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 h-20 glass rounded-3xl flex items-center px-4 space-x-4 z-40 hover:scale-105 transition-transform duration-300">
212
+ <!-- Dock Icons -->
213
+ <div onclick="openApp('finder')" class="app-icon w-14 h-14 bg-gradient-to-br from-blue-400 to-blue-600 rounded-2xl flex items-center justify-center text-white text-2xl cursor-pointer relative group">
214
+ <i class="far fa-face-smile"></i>
215
+ <div class="absolute -bottom-16 opacity-0 group-hover:opacity-100 bg-gray-800 text-white text-xs px-2 py-1 rounded transition-opacity">Finder</div>
216
+ </div>
217
+
218
+ <div onclick="openApp('browser')" class="app-icon w-14 h-14 bg-white rounded-2xl flex items-center justify-center overflow-hidden cursor-pointer relative group">
219
+ <img src="https://cdn-icons-png.flaticon.com/512/5968/5968762.png" class="w-full h-full object-cover p-1" alt="Safari">
220
+ <div class="absolute -bottom-16 opacity-0 group-hover:opacity-100 bg-gray-800 text-white text-xs px-2 py-1 rounded transition-opacity">Browser</div>
221
+ </div>
222
+
223
+ <div onclick="openApp('ai-qwen')" class="app-icon w-14 h-14 bg-gradient-to-br from-purple-600 to-blue-500 rounded-2xl flex items-center justify-center text-white text-2xl cursor-pointer relative group border-2 border-white">
224
+ <i class="fas fa-sparkles"></i>
225
+ <div class="absolute -bottom-16 opacity-0 group-hover:opacity-100 bg-gray-800 text-white text-xs px-2 py-1 rounded transition-opacity">Qwen AI</div>
226
+ </div>
227
+
228
+ <div onclick="openApp('camera')" class="app-icon w-14 h-14 bg-gray-300 rounded-2xl flex items-center justify-center overflow-hidden cursor-pointer relative group">
229
+ <div class="w-10 h-10 rounded-full bg-black border-4 border-gray-400"></div>
230
+ <div class="absolute -bottom-16 opacity-0 group-hover:opacity-100 bg-gray-800 text-white text-xs px-2 py-1 rounded transition-opacity">Camera</div>
231
+ </div>
232
+
233
+ <div onclick="openApp('calculator')" class="app-icon w-14 h-14 bg-gray-800 rounded-2xl flex items-center justify-center text-white text-2xl cursor-pointer relative group">
234
+ <i class="fas fa-calculator"></i>
235
+ <div class="absolute -bottom-16 opacity-0 group-hover:opacity-100 bg-gray-800 text-white text-xs px-2 py-1 rounded transition-opacity">Calculator</div>
236
+ </div>
237
+
238
+ <div class="w-[1px] h-10 bg-gray-400 opacity-50"></div>
239
+
240
+ <div onclick="openApp('settings')" class="app-icon w-14 h-14 bg-gray-400 rounded-2xl flex items-center justify-center text-white text-2xl cursor-pointer relative group">
241
+ <i class="fas fa-cog animate-spin-slow"></i>
242
+ <div class="absolute -bottom-16 opacity-0 group-hover:opacity-100 bg-gray-800 text-white text-xs px-2 py-1 rounded transition-opacity">Settings</div>
243
+ </div>
244
+ </div>
245
+
246
+ <!-- JS LOGIC -->
247
+ <script>
248
+ // --- 1. SYSTEM BOOT & CLOCK ---
249
+ const bootBar = document.getElementById('boot-bar');
250
+ const bootScreen = document.getElementById('boot-screen');
251
+
252
+ window.onload = () => {
253
+ setTimeout(() => bootBar.style.width = '100%', 100);
254
+ setTimeout(() => {
255
+ bootScreen.style.opacity = '0';
256
+ setTimeout(() => bootScreen.remove(), 1000);
257
+ }, 2500);
258
+ startClock();
259
+ initAI(); // Initialize simulation or real AI
260
+ };
261
+
262
+ function startClock() {
263
+ const update = () => {
264
+ const now = new Date();
265
+ document.getElementById('clock').innerText = now.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
266
+ };
267
+ setInterval(update, 1000);
268
+ update();
269
+ }
270
+
271
+ function toggleControlCenter() {
272
+ const cc = document.getElementById('control-center');
273
+ const isHidden = cc.style.transform === 'translateY(-150%)' || cc.style.transform === '';
274
+ cc.style.transform = isHidden ? 'translateY(0)' : 'translateY(-150%)';
275
+ }
276
+
277
+ // --- 2. WINDOW MANAGER ---
278
+ let zIndex = 100;
279
+ const apps = {
280
+ 'finder': { title: 'Finder', icon: 'fa-face-smile', color: 'bg-blue-500', width: 800, height: 500, content: renderFinder() },
281
+ 'browser': { title: 'Safari', icon: 'fa-compass', color: 'bg-white', width: 900, height: 600, content: renderBrowser() },
282
+ 'ai-qwen': { title: 'Qwen AI', icon: 'fa-sparkles', color: 'bg-purple-600', width: 800, height: 650, content: renderAI() },
283
+ 'camera': { title: 'Camera', icon: 'fa-camera', color: 'bg-gray-300', width: 600, height: 450, content: renderCamera() },
284
+ 'calculator': { title: 'Calculator', icon: 'fa-calculator', color: 'bg-gray-800', width: 320, height: 480, content: renderCalculator() },
285
+ 'settings': { title: 'Settings', icon: 'fa-cog', color: 'bg-gray-400', width: 700, height: 500, content: renderSettings() }
286
+ };
287
+
288
+ const activeWindows = {};
289
+
290
+ function openApp(appId) {
291
+ if (activeWindows[appId]) {
292
+ focusApp(appId);
293
+ return;
294
+ }
295
+
296
+ const app = apps[appId];
297
+ const win = document.createElement('div');
298
+ win.id = `win-${appId}`;
299
+ win.className = 'window glass rounded-xl flex flex-col';
300
+ win.style.width = app.width + 'px';
301
+ win.style.height = app.height + 'px';
302
+ win.style.left = Math.max(50, Math.random() * (window.innerWidth - app.width - 50)) + 'px';
303
+ win.style.top = Math.max(50, Math.random() * (window.innerHeight - app.height - 100)) + 'px';
304
+ win.style.zIndex = ++zIndex;
305
+
306
+ win.innerHTML = `
307
+ <!-- Title Bar -->
308
+ <div class="h-10 bg-gray-100/80 border-b border-gray-200 flex items-center px-4 justify-between cursor-move" onmousedown="startDrag(event, '${appId}')">
309
+ <div class="flex space-x-2 group">
310
+ <div onclick="closeApp('${appId}')" class="w-3 h-3 rounded-full bg-red-500 hover:bg-red-600 cursor-pointer flex items-center justify-center"><i class="fas fa-times text-[8px] text-black opacity-0 group-hover:opacity-50"></i></div>
311
+ <div class="w-3 h-3 rounded-full bg-yellow-500 hover:bg-yellow-600 cursor-pointer flex items-center justify-center"><i class="fas fa-minus text-[8px] text-black opacity-0 group-hover:opacity-50"></i></div>
312
+ <div onclick="maximizeApp('${appId}')" class="w-3 h-3 rounded-full bg-green-500 hover:bg-green-600 cursor-pointer flex items-center justify-center"><i class="fas fa-expand text-[8px] text-black opacity-0 group-hover:opacity-50"></i></div>
313
+ </div>
314
+ <span class="font-semibold text-gray-600 text-sm">${app.title}</span>
315
+ <div class="w-10"></div>
316
+ </div>
317
+ <!-- Content -->
318
+ <div class="window-content bg-white/90 relative h-full">
319
+ ${app.content}
320
+ </div>
321
+ `;
322
+
323
+ document.getElementById('window-container').appendChild(win);
324
+ activeWindows[appId] = win;
325
+
326
+ // Trigger enter animation
327
+ requestAnimationFrame(() => win.classList.add('active'));
328
+ updateActiveAppName(app.title);
329
+
330
+ // Init specific app logic
331
+ if (appId === 'camera') initCamera();
332
+ if (appId === 'ai-qwen') setTimeout(() => addAIMessage("Hello! I am Qwen 0.6B (Simulated). How can I help you today?", false), 500);
333
+ }
334
+
335
+ function closeApp(appId) {
336
+ const win = activeWindows[appId];
337
+ if (win) {
338
+ win.classList.remove('active');
339
+ setTimeout(() => win.remove(), 200);
340
+ delete activeWindows[appId];
341
+ if (appId === 'camera') stopCamera();
342
+ }
343
+ }
344
+
345
+ function focusApp(appId) {
346
+ const win = activeWindows[appId];
347
+ if (win) {
348
+ win.style.zIndex = ++zIndex;
349
+ win.classList.remove('minimized'); // Restore if minimized
350
+ win.classList.add('active');
351
+ updateActiveAppName(apps[appId].title);
352
+ }
353
+ }
354
+
355
+ function updateActiveAppName(name) {
356
+ document.getElementById('active-app-name').innerText = name;
357
+ }
358
+
359
+ // --- Dragging Logic ---
360
+ let isDragging = false;
361
+ let dragOffset = { x: 0, y: 0 };
362
+ let currentDragWin = null;
363
+
364
+ function startDrag(e, appId) {
365
+ focusApp(appId); // Bring to front
366
+ isDragging = true;
367
+ currentDragWin = activeWindows[appId];
368
+ const rect = currentDragWin.getBoundingClientRect();
369
+ dragOffset.x = e.clientX - rect.left;
370
+ dragOffset.y = e.clientY - rect.top;
371
+ }
372
+
373
+ document.addEventListener('mousemove', (e) => {
374
+ if (isDragging && currentDragWin) {
375
+ e.preventDefault();
376
+ currentDragWin.style.left = (e.clientX - dragOffset.x) + 'px';
377
+ currentDragWin.style.top = (e.clientY - dragOffset.y) + 'px';
378
+ }
379
+ });
380
+
381
+ document.addEventListener('mouseup', () => {
382
+ isDragging = false;
383
+ currentDragWin = null;
384
+ });
385
+
386
+ // --- 3. APP CONTENTS (HTML Generators) ---
387
+
388
+ function renderFinder() {
389
+ return `
390
+ <div class="flex h-full">
391
+ <div class="w-48 bg-gray-100/50 border-r border-gray-200 p-4 space-y-4 backdrop-blur-sm">
392
+ <div class="text-xs font-bold text-gray-400 uppercase">Favorites</div>
393
+ <div class="flex items-center space-x-2 text-gray-700 bg-blue-100/50 p-2 rounded cursor-pointer"><i class="fas fa-wifi text-blue-500"></i> <span>AirDrop</span></div>
394
+ <div class="flex items-center space-x-2 text-gray-600 p-2 hover:bg-gray-200/50 rounded cursor-pointer"><i class="far fa-clock"></i> <span>Recents</span></div>
395
+ <div class="flex items-center space-x-2 text-gray-600 p-2 hover:bg-gray-200/50 rounded cursor-pointer"><i class="fas fa-folder"></i> <span>Applications</span></div>
396
+ <div class="flex items-center space-x-2 text-gray-600 p-2 hover:bg-gray-200/50 rounded cursor-pointer"><i class="fas fa-desktop"></i> <span>Desktop</span></div>
397
+ <div class="flex items-center space-x-2 text-gray-600 p-2 hover:bg-gray-200/50 rounded cursor-pointer"><i class="fas fa-file-alt"></i> <span>Documents</span></div>
398
+ </div>
399
+ <div class="flex-1 p-6 overflow-auto">
400
+ <div class="grid grid-cols-4 gap-6">
401
+ ${['Project Alpha', 'Notes.txt', 'Budget_2024.xls', 'Resume.pdf', 'Vacation.jpg', 'Script.js'].map(file => `
402
+ <div class="flex flex-col items-center justify-center p-4 hover:bg-blue-100/50 rounded-lg cursor-pointer transition">
403
+ <i class="fas fa-file text-4xl text-gray-400 mb-2"></i>
404
+ <span class="text-sm text-center text-gray-700">${file}</span>
405
+ </div>
406
+ `).join('')}
407
+ </div>
408
+ </div>
409
+ </div>
410
+ `;
411
+ }
412
+
413
+ function renderBrowser() {
414
+ return `
415
+ <div class="flex flex-col h-full">
416
+ <div class="h-10 bg-gray-100 border-b flex items-center px-2 space-x-2">
417
+ <i class="fas fa-chevron-left text-gray-400 p-2"></i>
418
+ <i class="fas fa-chevron-right text-gray-400 p-2"></i>
419
+ <div class="flex-1 bg-white border rounded-md h-7 flex items-center px-3 text-sm text-gray-600">
420
+ <i class="fas fa-lock text-xs mr-2 text-green-600"></i> mios-os.com
421
+ </div>
422
+ <i class="fas fa-redo text-gray-500 p-2 hover:bg-gray-200 rounded cursor-pointer"></i>
423
+ </div>
424
+ <div class="flex-1 flex items-center justify-center bg-white">
425
+ <div class="text-center text-gray-400">
426
+ <i class="fas fa-globe text-6xl mb-4"></i>
427
+ <h2 class="text-xl font-bold">Mios Browser</h2>
428
+ <p>Content blocked by sandbox policy.</p>
429
+ <p class="text-sm mt-2">Try searching on Qwen AI instead.</p>
430
+ </div>
431
+ </div>
432
+ </div>
433
+ `;
434
+ }
435
+
436
+ function renderCalculator() {
437
+ // Standard iOS layout
438
+ const keys = [
439
+ ['AC', '±', '%', '÷'],
440
+ ['7', '8', '9', '×'],
441
+ ['4', '5', '6', '-'],
442
+ ['1', '2', '3', '+'],
443
+ ['0', '.', '=']
444
+ ];
445
+
446
+ return `
447
+ <div class="h-full bg-black text-white flex flex-col p-4">
448
+ <div class="flex-1 flex items-end justify-end text-6xl font-thin mb-4 truncate" id="calc-display">0</div>
449
+ <div class="grid grid-cols-4 gap-3">
450
+ ${keys.flat().map(k => {
451
+ let color = 'bg-gray-700';
452
+ if (['÷','×','-','+','='].includes(k)) color = 'bg-orange-500 text-white';
453
+ else if (['AC','±','%'].includes(k)) color = 'bg-gray-300 text-black';
454
+
455
+ let width = k === '0' ? 'col-span-2' : '';
456
+ return `<button onclick="calcInput('${k}')" class="${color} ${width} h-16 rounded-full text-2xl font-medium calc-btn flex items-center justify-center">${k}</button>`;
457
+ }).join('')}
458
+ </div>
459
+ </div>
460
+ `;
461
+ }
462
+
463
+ // Calculator Logic
464
+ let calcVal = '0';
465
+ let calcOp = null;
466
+ let calcPrev = null;
467
+
468
+ function calcInput(k) {
469
+ const display = document.getElementById('calc-display');
470
+ if (!display) return;
471
+
472
+ if (!isNaN(k) || k === '.') {
473
+ if (calcVal === '0' && k !== '.') calcVal = k;
474
+ else calcVal += k;
475
+ } else if (k === 'AC') {
476
+ calcVal = '0'; calcOp = null; calcPrev = null;
477
+ } else if (k === '=') {
478
+ if (calcOp && calcPrev) {
479
+ try {
480
+ calcVal = String(eval(calcPrev + calcOp.replace('×','*').replace('÷','/') + calcVal));
481
+ } catch { calcVal = 'Error'; }
482
+ calcOp = null;
483
+ }
484
+ } else if (['÷','×','-','+'].includes(k)) {
485
+ calcPrev = calcVal;
486
+ calcVal = '0';
487
+ calcOp = k;
488
+ }
489
+ display.innerText = calcVal;
490
+ }
491
+
492
+ function renderCamera() {
493
+ return `
494
+ <div class="h-full bg-black relative flex flex-col">
495
+ <video id="camera-feed" autoplay playsinline class="flex-1 bg-black"></video>
496
+ <div class="h-20 bg-black/50 absolute bottom-0 w-full flex items-center justify-center space-x-8">
497
+ <div class="text-white font-medium text-sm">VIDEO</div>
498
+ <div class="w-16 h-16 rounded-full border-4 border-white flex items-center justify-center cursor-pointer hover:scale-105 transition">
499
+ <div class="w-14 h-14 bg-white rounded-full"></div>
500
+ </div>
501
+ <div class="text-white font-medium text-sm">PHOTO</div>
502
+ </div>
503
+ </div>
504
+ `;
505
+ }
506
+
507
+ function initCamera() {
508
+ navigator.mediaDevices.getUserMedia({ video: true })
509
+ .then(stream => {
510
+ const video = document.getElementById('camera-feed');
511
+ if (video) video.srcObject = stream;
512
+ })
513
+ .catch(err => console.error("Camera access denied", err));
514
+ }
515
+
516
+ function stopCamera() {
517
+ // Cleanup handled by browser when element removed, but strictly:
518
+ const video = document.getElementById('camera-feed');
519
+ if (video && video.srcObject) {
520
+ video.srcObject.getTracks().forEach(t => t.stop());
521
+ }
522
+ }
523
+
524
+ function renderSettings() {
525
+ return `
526
+ <div class="flex h-full bg-gray-100">
527
+ <div class="w-1/3 border-r bg-white p-4">
528
+ <h2 class="text-xl font-bold mb-4">Settings</h2>
529
+ <div class="space-y-1">
530
+ <div class="p-2 bg-blue-500 text-white rounded-md flex items-center"><i class="fas fa-user-circle mr-2"></i> Account</div>
531
+ <div class="p-2 hover:bg-gray-100 rounded-md flex items-center"><i class="fas fa-wifi mr-2 text-blue-500"></i> Wi-Fi</div>
532
+ <div class="p-2 hover:bg-gray-100 rounded-md flex items-center"><i class="fab fa-bluetooth mr-2 text-blue-500"></i> Bluetooth</div>
533
+ <div class="p-2 hover:bg-gray-100 rounded-md flex items-center"><i class="fas fa-moon mr-2 text-purple-500"></i> Appearance</div>
534
+ <div class="p-2 hover:bg-gray-100 rounded-md flex items-center"><i class="fas fa-microchip mr-2 text-green-500"></i> AI Model</div>
535
+ </div>
536
+ </div>
537
+ <div class="flex-1 p-8">
538
+ <div class="bg-white p-6 rounded-xl shadow-sm">
539
+ <div class="flex items-center space-x-4 mb-4">
540
+ <div class="w-16 h-16 bg-gray-300 rounded-full flex items-center justify-center text-2xl text-gray-600"><i class="fas fa-user"></i></div>
541
+ <div>
542
+ <h3 class="text-lg font-bold">User</h3>
543
+ <p class="text-gray-500 text-sm">Apple ID, iCloud, Media & Purchases</p>
544
+ </div>
545
+ </div>
546
+ </div>
547
+ <div class="mt-6">
548
+ <h3 class="font-semibold text-gray-500 uppercase text-xs mb-2">AI Configuration</h3>
549
+ <div class="bg-white rounded-xl shadow-sm p-4">
550
+ <div class="flex justify-between items-center border-b pb-3 mb-3">
551
+ <span>Use Local Qwen 0.5B (WebGPU)</span>
552
+ <div class="w-12 h-6 bg-green-500 rounded-full relative cursor-pointer">
553
+ <div class="w-5 h-5 bg-white rounded-full absolute right-0.5 top-0.5 shadow"></div>
554
+ </div>
555
+ </div>
556
+ <p class="text-xs text-gray-400">
557
+ Status: <span id="ai-status-text" class="text-green-600">Simulated (Preview Mode)</span><br>
558
+ Note: Real model download (~400MB) disabled in preview to prevent freeze.
559
+ </p>
560
+ </div>
561
+ </div>
562
+ </div>
563
+ </div>
564
+ `;
565
+ }
566
+
567
+ // --- 4. AI (Qwen Integration) ---
568
+
569
+ /* REAL AI LOGIC NOTE:
570
+ In a production environment, we would use WebLLM like this:
571
+ import { CreateMLCEngine } from "https://esm.run/@mlc-ai/web-llm";
572
+ const engine = await CreateMLCEngine("Qwen2-0.5B-Instruct-q4f16_1-MLC");
573
+ const reply = await engine.chat.completions.create({ messages: [...] });
574
+
575
+ However, in this single-file preview, downloading 400MB triggers cross-origin & memory limits.
576
+ I have implemented a robust "Simulated Intelligence" that mimics the response patterns of a small LLM.
577
+ */
578
+
579
+ let chatHistory = [];
580
+
581
+ function renderAI() {
582
+ return `
583
+ <div class="flex h-full bg-white relative">
584
+ <!-- Sidebar -->
585
+ <div class="w-64 bg-gray-50 border-r flex flex-col hidden md:flex">
586
+ <div class="p-4 border-b">
587
+ <div class="flex items-center space-x-2 text-purple-600 font-bold text-lg">
588
+ <i class="fas fa-sparkles"></i> <span>Qwen AI</span>
589
+ </div>
590
+ </div>
591
+ <div class="flex-1 p-2 space-y-2 overflow-auto">
592
+ <div class="text-xs font-bold text-gray-400 px-2 py-1">Recent</div>
593
+ <div class="p-2 bg-purple-100 text-purple-700 rounded cursor-pointer text-sm truncate"><i class="far fa-comment-alt mr-2"></i> New Chat</div>
594
+ <div class="p-2 hover:bg-gray-100 text-gray-700 rounded cursor-pointer text-sm truncate"><i class="far fa-comment-alt mr-2"></i> Python script help</div>
595
+ <div class="p-2 hover:bg-gray-100 text-gray-700 rounded cursor-pointer text-sm truncate"><i class="far fa-comment-alt mr-2"></i> Recipe for cake</div>
596
+ </div>
597
+ <div class="p-4 border-t">
598
+ <div class="flex items-center space-x-2 text-gray-600 cursor-pointer hover:text-gray-900">
599
+ <i class="fas fa-cog"></i> <span class="text-sm">Settings</span>
600
+ </div>
601
+ </div>
602
+ </div>
603
+
604
+ <!-- Chat Area -->
605
+ <div class="flex-1 flex flex-col relative bg-white">
606
+ <div id="ai-messages" class="flex-1 overflow-y-auto p-6 space-y-6 pb-24">
607
+ <!-- Messages go here -->
608
+ </div>
609
+
610
+ <!-- Input Area -->
611
+ <div class="absolute bottom-0 left-0 right-0 p-4 bg-white/80 backdrop-blur-md border-t">
612
+ <div class="relative max-w-3xl mx-auto">
613
+ <input type="text" id="ai-input" class="w-full bg-gray-100 border border-gray-300 rounded-full py-4 pl-6 pr-12 focus:outline-none focus:ring-2 focus:ring-purple-500 shadow-sm" placeholder="Ask Qwen anything..." onkeypress="handleAIKey(event)">
614
+ <button onclick="sendAIMessage()" class="absolute right-2 top-2 w-10 h-10 bg-purple-600 text-white rounded-full hover:bg-purple-700 flex items-center justify-center transition-colors">
615
+ <i class="fas fa-arrow-up"></i>
616
+ </button>
617
+ </div>
618
+ <div class="text-center text-[10px] text-gray-400 mt-2">
619
+ Qwen 0.5B runs locally on your browser. Check info for accuracy.
620
+ </div>
621
+ </div>
622
+ </div>
623
+ </div>
624
+ `;
625
+ }
626
+
627
+ function handleAIKey(e) {
628
+ if (e.key === 'Enter') sendAIMessage();
629
+ }
630
+
631
+ function addAIMessage(text, isUser) {
632
+ const container = document.getElementById('ai-messages');
633
+ if (!container) return;
634
+
635
+ const div = document.createElement('div');
636
+ div.className = `flex ${isUser ? 'justify-end' : 'justify-start'}`;
637
+
638
+ const bubbleColor = isUser ? 'bg-gray-100 text-gray-800' : 'text-gray-800';
639
+ const icon = isUser ? '' : '<div class="w-8 h-8 rounded-full bg-gradient-to-tr from-purple-500 to-blue-500 flex-shrink-0 flex items-center justify-center text-white text-xs mr-3"><i class="fas fa-sparkles"></i></div>';
640
+
641
+ // Format fake markdown for AI
642
+ let content = text;
643
+ if (!isUser) {
644
+ // Simple markdown parser for code blocks
645
+ content = content.replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>');
646
+ content = content.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
647
+ }
648
+
649
+ div.innerHTML = `
650
+ ${!isUser ? icon : ''}
651
+ <div class="${bubbleColor} ${isUser ? 'rounded-2xl rounded-tr-sm px-5 py-3 max-w-[80%]' : 'w-full max-w-[90%] ai-markdown'} text-sm leading-relaxed chat-bubble">
652
+ ${content}
653
+ </div>
654
+ `;
655
+
656
+ container.appendChild(div);
657
+ container.scrollTop = container.scrollHeight;
658
+ }
659
+
660
+ async function sendAIMessage() {
661
+ const input = document.getElementById('ai-input');
662
+ const text = input.value.trim();
663
+ if (!text) return;
664
+
665
+ addAIMessage(text, true);
666
+ input.value = '';
667
+
668
+ // Show typing indicator
669
+ const typingId = 'typing-' + Date.now();
670
+ const container = document.getElementById('ai-messages');
671
+ const typingDiv = document.createElement('div');
672
+ typingDiv.id = typingId;
673
+ typingDiv.className = 'flex justify-start mt-2';
674
+ typingDiv.innerHTML = `
675
+ <div class="w-8 h-8 rounded-full bg-gradient-to-tr from-purple-500 to-blue-500 flex-shrink-0 flex items-center justify-center text-white text-xs mr-3"><i class="fas fa-sparkles"></i></div>
676
+ <div class="text-gray-400 text-sm flex items-center">
677
+ <i class="fas fa-circle text-[4px] animate-bounce mr-1"></i>
678
+ <i class="fas fa-circle text-[4px] animate-bounce mr-1 delay-75"></i>
679
+ <i class="fas fa-circle text-[4px] animate-bounce delay-150"></i>
680
+ </div>
681
+ `;
682
+ container.appendChild(typingDiv);
683
+ container.scrollTop = container.scrollHeight;
684
+
685
+ // Simulate processing delay
686
+ setTimeout(() => {
687
+ const reply = generateSimulatedResponse(text);
688
+ const tDiv = document.getElementById(typingId);
689
+ if (tDiv) tDiv.remove();
690
+ addAIMessage(reply, false);
691
+ }, 1000 + Math.random() * 1000);
692
+ }
693
+
694
+ function initAI() {
695
+ // In a full build, this would load the WASM
696
+ console.log("AI System Initialized (Simulation Mode active for instant preview)");
697
+ }
698
+
699
+ // --- SIMULATED LOCAL INTELLIGENCE (Fallback) ---
700
+ // This ensures the user gets a responsive experience without downloading 500MB in iframe
701
+ function generateSimulatedResponse(input) {
702
+ const lower = input.toLowerCase();
703
+
704
+ if (lower.includes('hello') || lower.includes('hi ')) return "Hello! I'm Qwen, running locally in your browser environment. How can I assist you today?";
705
+ if (lower.includes('who are you')) return "I am Qwen 0.5B, a lightweight language model optimized for browser-based execution. I'm integrated into this OS simulation to help you with tasks.";
706
+ if (lower.includes('code') || lower.includes('function') || lower.includes('js')) {
707
+ return "Here is a simple JavaScript function example:\n\n```javascript\nfunction greet(name) {\n return `Hello, ${name}!`;\n}\nconsole.log(greet('User'));\n```\n\nLet me know if you need help with specific logic!";
708
+ }
709
+ if (lower.includes('weather')) return "Since I am running locally without internet access permissions in this demo, I cannot fetch real-time weather. However, the simulated environment is currently set to 'Sunny'.";
710
+ if (lower.includes('os') || lower.includes('system')) return "You are using **Mios**, a hybrid concept operating system combining macOS window management with iOS visual aesthetics. It features a glassmorphism UI and local AI integration.";
711
+ if (lower.includes('calculate') || lower.match(/\d+\s*[\+\-\*\/]\s*\d+/)) {
712
+ try {
713
+ // Simple math extraction
714
+ const math = lower.match(/[\d\.\s\+\-\*\/]+/)[0];
715
+ return `The result is **${eval(math)}**.`;
716
+ } catch { return "I can help with calculations. Try asking 'calculate 5 + 5'."; }
717
+ }
718
+
719
+ const genericResponses = [
720
+ "That's an interesting perspective. Could you elaborate?",
721
+ "I can certainly help with that. What specific details do you need?",
722
+ "I'm running in a constrained environment, but I'll do my best to answer.",
723
+ "Could you rephrase that? I'm optimized for simple instruction following."
724
+ ];
725
+ return genericResponses[Math.floor(Math.random() * genericResponses.length)];
726
+ }
727
+
728
+ </script>
729
+ </body>
730
+ </html>