Hugging Face's logo

Spaces:
Siranjeevi029
/
moondream3-preview
Runtime error

App Files Community
Siranjeevi029 commited on
Commit
ff488d3
·
verified ·
1 Parent(s): 4a201ea

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +656 -0
index.html ADDED
@@ -0,0 +1,656 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Nexus Launcher | Web App</title>
7
+ <meta name="description" content="A modern web application launcher interface">
8
+
9
+ <!-- Importing FontAwesome for Icons -->
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+
12
+ <style>
13
+ :root {
14
+ --primary-color: #6366f1;
15
+ --primary-hover: #4f46e5;
16
+ --bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
17
+ --glass-bg: rgba(30, 41, 59, 0.7);
18
+ --glass-border: rgba(255, 255, 255, 0.1);
19
+ --text-main: #f8fafc;
20
+ --text-muted: #94a3b8;
21
+ --success: #10b981;
22
+ --danger: #ef4444;
23
+ --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
24
+ }
25
+
26
+ * {
27
+ box-sizing: border-box;
28
+ margin: 0;
29
+ padding: 0;
30
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
31
+ }
32
+
33
+ body {
34
+ background: var(--bg-gradient);
35
+ color: var(--text-main);
36
+ min-height: 100vh;
37
+ display: flex;
38
+ flex-direction: column;
39
+ overflow-x: hidden;
40
+ }
41
+
42
+ /* --- Header Section --- */
43
+ header {
44
+ padding: 20px;
45
+ display: flex;
46
+ justify-content: space-between;
47
+ align-items: center;
48
+ border-bottom: 1px solid var(--glass-border);
49
+ backdrop-filter: blur(10px);
50
+ position: sticky;
51
+ top: 0;
52
+ z-index: 100;
53
+ background: rgba(15, 23, 42, 0.8);
54
+ }
55
+
56
+ .logo {
57
+ display: flex;
58
+ align-items: center;
59
+ gap: 10px;
60
+ font-size: 1.5rem;
61
+ font-weight: 700;
62
+ color: white;
63
+ }
64
+
65
+ .logo i {
66
+ color: var(--primary-color);
67
+ }
68
+
69
+ .top-nav {
70
+ display: flex;
71
+ gap: 20px;
72
+ align-items: center;
73
+ }
74
+
75
+ .nav-link {
76
+ color: var(--text-muted);
77
+ text-decoration: none;
78
+ transition: color 0.3s;
79
+ font-size: 0.9rem;
80
+ }
81
+
82
+ .nav-link:hover {
83
+ color: var(--text-main);
84
+ }
85
+
86
+ .btn {
87
+ padding: 8px 16px;
88
+ border-radius: 6px;
89
+ border: none;
90
+ cursor: pointer;
91
+ font-weight: 600;
92
+ transition: all 0.3s ease;
93
+ display: flex;
94
+ align-items: center;
95
+ gap: 8px;
96
+ }
97
+
98
+ .btn-primary {
99
+ background-color: var(--primary-color);
100
+ color: white;
101
+ box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.4);
102
+ }
103
+
104
+ .btn-primary:hover {
105
+ background-color: var(--primary-hover);
106
+ transform: translateY(-1px);
107
+ box-shadow: 0 6px 8px -1px rgba(99, 102, 241, 0.5);
108
+ }
109
+
110
+ .btn-outline {
111
+ background: transparent;
112
+ border: 1px solid var(--glass-border);
113
+ color: var(--text-main);
114
+ }
115
+
116
+ .btn-outline:hover {
117
+ background: rgba(255,255,255,0.05);
118
+ }
119
+
120
+ /* --- Main Content Area --- */
121
+ main {
122
+ flex: 1;
123
+ padding: 40px;
124
+ max-width: 1200px;
125
+ margin: 0 auto;
126
+ width: 100%;
127
+ }
128
+
129
+ .welcome-section {
130
+ margin-bottom: 50px;
131
+ }
132
+
133
+ h1 {
134
+ font-size: 3rem;
135
+ font-weight: 800;
136
+ margin-bottom: 10px;
137
+ background: linear-gradient(to right, #fff, #94a3b8);
138
+ -webkit-background-clip: text;
139
+ -webkit-text-fill-color: transparent;
140
+ }
141
+
142
+ p.subtitle {
143
+ color: var(--text-muted);
144
+ font-size: 1.2rem;
145
+ max-width: 600px;
146
+ }
147
+
148
+ /* --- Grid Layout for Apps --- */
149
+ .apps-grid {
150
+ display: grid;
151
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
152
+ gap: 25px;
153
+ }
154
+
155
+ .app-card {
156
+ background: var(--glass-bg);
157
+ border: 1px solid var(--glass-border);
158
+ border-radius: 16px;
159
+ padding: 30px;
160
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
161
+ cursor: pointer;
162
+ position: relative;
163
+ overflow: hidden;
164
+ }
165
+
166
+ .app-card:hover {
167
+ transform: translateY(-5px);
168
+ background: rgba(51, 65, 85, 0.8);
169
+ border-color: var(--primary-color);
170
+ box-shadow: var(--card-shadow);
171
+ }
172
+
173
+ .app-icon {
174
+ width: 60px;
175
+ height: 60px;
176
+ background: rgba(99, 102, 241, 0.15);
177
+ color: var(--primary-color);
178
+ border-radius: 12px;
179
+ display: flex;
180
+ align-items: center;
181
+ justify-content: center;
182
+ font-size: 1.8rem;
183
+ margin-bottom: 20px;
184
+ }
185
+
186
+ .app-card:hover .app-icon {
187
+ background: rgba(99, 102, 241, 0.25);
188
+ transform: scale(1.1);
189
+ }
190
+
191
+ .app-title {
192
+ font-size: 1.5rem;
193
+ font-weight: 700;
194
+ margin-bottom: 8px;
195
+ }
196
+
197
+ .app-desc {
198
+ color: var(--text-muted);
199
+ line-height: 1.6;
200
+ font-size: 0.95rem;
201
+ }
202
+
203
+ .launch-badge {
204
+ position: absolute;
205
+ top: 20px;
206
+ right: 20px;
207
+ background: rgba(16, 185, 129, 0.2);
208
+ color: var(--success);
209
+ padding: 4px 10px;
210
+ border-radius: 20px;
211
+ font-size: 0.75rem;
212
+ font-weight: 700;
213
+ text-transform: uppercase;
214
+ opacity: 0;
215
+ transition: opacity 0.3s;
216
+ }
217
+
218
+ .app-card:hover .launch-badge {
219
+ opacity: 1;
220
+ }
221
+
222
+ /* --- Modal (The "Application" Window) --- */
223
+ .modal-overlay {
224
+ position: fixed;
225
+ top: 0;
226
+ left: 0;
227
+ width: 100%;
228
+ height: 100%;
229
+ background: rgba(0, 0, 0, 0.8);
230
+ backdrop-filter: blur(8px);
231
+ z-index: 1000;
232
+ display: none; /* Hidden by default */
233
+ align-items: center;
234
+ justify-content: center;
235
+ opacity: 0;
236
+ transition: opacity 0.3s ease;
237
+ }
238
+
239
+ .modal-overlay.active {
240
+ display: flex;
241
+ opacity: 1;
242
+ }
243
+
244
+ .app-window {
245
+ width: 90%;
246
+ max-width: 800px;
247
+ height: 70vh;
248
+ background: #1e293b;
249
+ border-radius: 12px;
250
+ border: 1px solid var(--glass-border);
251
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
252
+ display: flex;
253
+ flex-direction: column;
254
+ animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
255
+ }
256
+
257
+ @keyframes slideUp {
258
+ from { transform: translateY(50px); opacity: 0; }
259
+ to { transform: translateY(0); opacity: 1; }
260
+ }
261
+
262
+ .window-header {
263
+ padding: 20px;
264
+ border-bottom: 1px solid var(--glass-border);
265
+ display: flex;
266
+ justify-content: space-between;
267
+ align-items: center;
268
+ background: #0f172a;
269
+ border-radius: 12px 12px 0 0;
270
+ }
271
+
272
+ .window-title {
273
+ font-weight: 600;
274
+ display: flex;
275
+ align-items: center;
276
+ gap: 10px;
277
+ }
278
+
279
+ .window-controls {
280
+ display: flex;
281
+ gap: 10px;
282
+ }
283
+
284
+ .control-dot {
285
+ width: 12px;
286
+ height: 12px;
287
+ border-radius: 50%;
288
+ }
289
+ .close-dot { background: var(--danger); }
290
+ .min-dot { background: var(--success); }
291
+ .max-dot { background: var(--primary-color); }
292
+
293
+ .window-content {
294
+ flex: 1;
295
+ padding: 40px;
296
+ overflow-y: auto;
297
+ text-align: center;
298
+ }
299
+
300
+ .placeholder-content {
301
+ animation: fadeIn 1s ease;
302
+ }
303
+
304
+ @keyframes fadeIn {
305
+ from { opacity: 0; }
306
+ to { opacity: 1; }
307
+ }
308
+
309
+ .console-log {
310
+ font-family: 'Courier New', Courier, monospace;
311
+ background: #000;
312
+ padding: 20px;
313
+ border-radius: 8px;
314
+ text-align: left;
315
+ margin-top: 20px;
316
+ color: #10b981;
317
+ border: 1px solid #10b981;
318
+ }
319
+
320
+ .close-btn {
321
+ background: transparent;
322
+ border: none;
323
+ color: var(--text-muted);
324
+ font-size: 1.5rem;
325
+ cursor: pointer;
326
+ transition: color 0.2s;
327
+ }
328
+ .close-btn:hover { color: var(--text-main); }
329
+
330
+ /* Responsive Design */
331
+ @media (max-width: 768px) {
332
+ h1 { font-size: 2rem; }
333
+ .apps-grid { grid-template-columns: 1fr; }
334
+ main { padding: 20px; }
335
+ }
336
+
337
+ /* Footer Credit */
338
+ .footer-credit {
339
+ text-align: center;
340
+ padding: 20px;
341
+ color: var(--text-muted);
342
+ font-size: 0.85rem;
343
+ border-top: 1px solid var(--glass-border);
344
+ }
345
+ .footer-credit a {
346
+ color: var(--primary-color);
347
+ text-decoration: none;
348
+ font-weight: 600;
349
+ }
350
+ .footer-credit a:hover {
351
+ text-decoration: underline;
352
+ }
353
+
354
+ </style>
355
+ </head>
356
+ <body>
357
+
358
+ <!-- Header -->
359
+ <header>
360
+ <div class="logo">
361
+ <i class="fa-solid fa-rocket"></i>
362
+ <span>Nexus Launcher</span>
363
+ </div>
364
+ <nav class="top-nav">
365
+ <a href="#" class="nav-link" onclick="launchApp('Dashboard')">Dashboard</a>
366
+ <a href="#" class="nav-link" onclick="launchApp('Settings')">Settings</a>
367
+ <a href="#" class="nav-link" target="_blank" rel="noopener">Help</a>
368
+ <button class="btn btn-primary" onclick="launchApp('Terminal')">
369
+ <i class="fa-solid fa-terminal"></i> Launch App
370
+ </button>
371
+ </nav>
372
+ </header>
373
+
374
+ <!-- Main Content -->
375
+ <main>
376
+ <section class="welcome-section">
377
+ <h1>Welcome to the Digital Workspace</h1>
378
+ <p class="subtitle">Select an application from the grid below to launch it. This interface demonstrates a modern, responsive web application architecture built with pure HTML, CSS, and JavaScript.</p>
379
+ </section>
380
+
381
+ <div class="apps-grid">
382
+ <!-- App Card 1: Dashboard -->
383
+ <div class="app-card" onclick="launchApp('Analytics Dashboard')">
384
+ <div class="launch-badge"><i class="fa-solid fa-play"></i> Launch</div>
385
+ <div class="app-icon">
386
+ <i class="fa-solid fa-chart-pie"></i>
387
+ </div>
388
+ <div class="app-title">Analytics Dashboard</div>
389
+ <div class="app-desc">Visualize your data with interactive charts and real-time statistics. Perfect for monitoring project progress.</div>
390
+ </div>
391
+
392
+ <!-- App Card 2: Terminal -->
393
+ <div class="app-card" onclick="launchApp('System Terminal')">
394
+ <div class="launch-badge"><i class="fa-solid fa-play"></i> Launch</div>
395
+ <div class="app-icon">
396
+ <i class="fa-solid fa-terminal"></i>
397
+ </div>
398
+ <div class="app-title">System Terminal</div>
399
+ <div class="app-desc">Access the command line interface directly in your browser. Run scripts, manage files, and configure settings.</div>
400
+ </div>
401
+
402
+ <!-- App Card 3: Media -->
403
+ <div class="app-card" onclick="launchApp('Media Center')">
404
+ <div class="launch-badge"><i class="fa-solid fa-play"></i> Launch</div>
405
+ <div class="app-icon">
406
+ <i class="fa-solid fa-film"></i>
407
+ </div>
408
+ <div class="app-title">Media Center</div>
409
+ <div class="app-desc">Stream videos, manage playlists, and organize your digital media library in one place.</div>
410
+ </div>
411
+
412
+ <!-- App Card 4: Chat -->
413
+ <div class="app-card" onclick="launchApp('Secure Chat')">
414
+ <div class="launch-badge"><i class="fa-solid fa-play"></i> Launch</div>
415
+ <div class="app-icon">
416
+ <i class="fa-solid fa-comments"></i>
417
+ </div>
418
+ <div class="app-title">Secure Chat</div>
419
+ <div class="app-desc">End-to-end encrypted messaging workspace for teams and individuals.</div>
420
+ </div>
421
+
422
+ <!-- App Card 5: Code Editor -->
423
+ <div class="app-card" onclick="launchApp('Code Editor')">
424
+ <div class="launch-badge"><i class="fa-solid fa-play"></i> Launch</div>
425
+ <div class="app-icon">
426
+ <i class="fa-solid fa-code"></i>
427
+ </div>
428
+ <div class="app-title">Code Editor</div>
429
+ <div class="app-desc">A lightweight, fast code editing environment with syntax highlighting support.</div>
430
+ </div>
431
+
432
+ <!-- App Card 6: Settings -->
433
+ <div class="app-card" onclick="launchApp('System Settings')">
434
+ <div class="launch-badge"><i class="fa-solid fa-play"></i> Launch</div>
435
+ <div class="app-icon">
436
+ <i class="fa-solid fa-gear"></i>
437
+ </div>
438
+ <div class="app-title">System Settings</div>
439
+ <div class="app-desc">Customize your environment, manage user accounts, and adjust system preferences.</div>
440
+ </div>
441
+ </div>
442
+ </main>
443
+
444
+ <!-- Footer -->
445
+ <div class="footer-credit">
446
+ Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
447
+ </div>
448
+
449
+ <!-- Application Modal -->
450
+ <div class="modal-overlay" id="appModal" onclick="if(event.target === this) closeApp();">
451
+ <div class="app-window">
452
+ <div class="window-header">
453
+ <div class="window-title">
454
+ <i class="fa-solid fa-window-maximize"></i>
455
+ <span id="modalTitle">Application</span>
456
+ </div>
457
+ <div class="window-controls">
458
+ <div class="control-dot min-dot" title="Minimize"></div>
459
+ <div class="control-dot max-dot" title="Maximize"></div>
460
+ <button class="close-btn" onclick="closeApp()" title="Close Application">
461
+ <i class="fa-solid fa-xmark"></i>
462
+ </button>
463
+ </div>
464
+ </div>
465
+ <div class="window-content">
466
+ <div class="placeholder-content">
467
+ <i class="fa-solid fa-rocket" style="font-size: 4rem; color: var(--primary-color); margin-bottom: 20px;"></i>
468
+ <h2 id="modalTitleText" style="margin-bottom: 15px;">Application Launched</h2>
469
+ <p id="modalText" style="color: var(--text-muted); max-width: 600px; margin: 0 auto 30px auto;">
470
+ You have successfully launched a simulated web application window.
471
+ </p>
472
+
473
+ <!-- Dynamic Content Area -->
474
+ <div id="dynamicContent" style="text-align: left; margin-top: 20px;">
475
+ <p>System initialized...<br>Waiting for input...</p>
476
+ </div>
477
+
478
+ <div class="console-log" id="consoleOutput">
479
+ > Initializing environment...<br>
480
+ > Loading assets...<br>
481
+ > Ready.
482
+ </div>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </div>
487
+
488
+ <script>
489
+ // --- JavaScript Logic ---
490
+
491
+ // Select DOM elements
492
+ const modal = document.getElementById('appModal');
493
+ const modalTitle = document.getElementById('modalTitle');
494
+ const modalTitleText = document.getElementById('modalTitleText');
495
+ const modalText = document.getElementById('modalText');
496
+ const dynamicContent = document.getElementById('dynamicContent');
497
+ const consoleOutput = document.getElementById('consoleOutput');
498
+
499
+ // Function to launch an application
500
+ function launchApp(appName) {
501
+ // 1. Show the modal
502
+ modal.classList.add('active');
503
+
504
+ // 2. Update content based on the app name
505
+ modalTitleText.innerText = appName;
506
+ modalTitle.innerText = `${appName} - Active`;
507
+
508
+ // 3. Simulate different behaviors for different apps
509
+ let contentHTML = '';
510
+ let logMessages = [];
511
+
512
+ switch(appName) {
513
+ case 'System Terminal':
514
+ case 'Code Editor':
515
+ contentHTML = `
516
+ <div style="background: #000; padding: 15px; border-radius: 8px; font-family: monospace; color: #fff;">
517
+ <p><span style="color: #10b981;">user@nexus:~$</span> ls -la</p>
518
+ <p>drwxr-xr-x 12 user staff 384 Jan 10 10:00 .</p>
519
+ <p>drwxr-xr-x 5 user staff 160 Jan 9 14:30 ..</p>
520
+ <p>-rw-r--r-- 1 user staff 1024 Jan 10 10:01 index.html</p>
521
+ <p>-rw-r--r-- 1 user staff 2048 Jan 10 10:02 style.css</p>
522
+ <p><span style="color: #10b981;">user@nexus:~$</span> ./launch_app.sh</p>
523
+ <p style="color: #6366f1;">> Application "${appName}" started successfully.</p>
524
+ </div>`;
525
+ logMessages = [
526
+ "> Mounting virtual drive...",
527
+ "> Checking permissions...",
528
+ "> Loading binary assets...",
529
+ "> GUI renderer initialized."
530
+ ];
531
+ break;
532
+
533
+ case 'Analytics Dashboard':
534
+ contentHTML = `
535
+ <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
536
+ <div style="background: rgba(255,255,255,0.05); padding: 20px; border-radius: 8px; border-left: 4px solid var(--primary-color);">
537
+ <h3>Total Users</h3>
538
+ <h1 style="color: var(--success);">12,450</h1>
539
+ <small style="color: var(--success);">+12% this week</small>
540
+ </div>
541
+ <div style="background: rgba(255,255,255,0.05); padding: 20px; border-radius: 8px; border-left: 4px solid var(--danger);">
542
+ <h3>System Load</h3>
543
+ <h1 style="color: var(--danger);">45%</h1>
544
+ <small style="color: var(--text-muted);">Optimal Performance</small>
545
+ </div>
546
+ </div>
547
+ <div style="background: rgba(255,255,255,0.05); padding: 20px; border-radius: 8px; height: 150px; display: flex; align-items: center; justify-content: center; color: var(--text-muted);">
548
+ [Chart Visualization Placeholder]
549
+ </div>`;
550
+ logMessages = [
551
+ "> Connecting to database...",
552
+ "> Fetching metrics...",
553
+ "> Rendering visualization...",
554
+ "> Dashboard updated."
555
+ ];
556
+ break;
557
+
558
+ case 'Media Center':
559
+ contentHTML = `
560
+ <div style="background: #000; width: 100%; max-width: 500px; aspect-ratio: 16/9; margin: 0 auto; border-radius: 8px; display: flex; align-items: center; justify-content: center; position: relative;">
561
+ <i class="fa-solid fa-play" style="font-size: 4rem; color: white; opacity: 0.8;"></i>
562
+ <div style="position: absolute; bottom: 20px; left: 20px; right: 20px; background: linear-gradient(to top, black, transparent); padding: 20px;">
563
+ <h3 style="margin-bottom: 5px;">Sample Video Stream</h3>
564
+ <p style="color: #aaa;">Duration: 04:20 | Quality: 1080p</p>
565
+ </div>
566
+ </div>`;
567
+ logMessages = [
568
+ "> Loading media decoder...",
569
+ "> Scanning local library...",
570
+ "> Playlist loaded (3 items).",
571
+ "> Ready to play."
572
+ ];
573
+ break;
574
+
575
+ case 'Secure Chat':
576
+ contentHTML = `
577
+ <div style="background: rgba(255,255,255,0.05); border-radius: 8px; padding: 20px; height: 200px; overflow-y: auto; text-align: left;">
578
+ <div style="margin-bottom: 10px;">
579
+ <span style="color: var(--primary-color); font-weight: bold;">System:</span> Welcome to the secure channel.
580
+ </div>
581
+ <div style="margin-bottom: 10px; text-align: right;">
582
+ <span style="background: var(--primary-color); padding: 8px 12px; border-radius: 12px; color: white; display: inline-block;">Hello World!</span>
583
+ </div>
584
+ <div style="margin-bottom: 10px;">
585
+ <span style="color: var(--success); font-weight: bold;">User_01:</span> Is the connection encrypted?
586
+ </div>
587
+ <div style="margin-bottom: 10px;">
588
+ <span style="color: var(--primary-color); font-weight: bold;">System:</span> <i class="fa-solid fa-lock"></i> Yes, end-to-end encryption active.
589
+ </div>
590
+ </div>`;
591
+ logMessages = [
592
+ "> Establishing secure handshake...",
593
+ "> Verifying certificates...",
594
+ "> Channel encrypted (AES-256).",
595
+ "> Connected to server."
596
+ ];
597
+ break;
598
+
599
+ default: // Settings and others
600
+ contentHTML = `
601
+ <div style="display: grid; grid-template-columns: 200px 1fr; gap: 20px;">
602
+ <div style="background: rgba(255,255,255,0.05); border-radius: 8px; padding: 10px;">
603
+ <div style="padding: 10px; background: var(--primary-color); border-radius: 4px; margin-bottom: 5px;">General</div>
604
+ <div style="padding: 10px; color: var(--text-muted);">Network</div>
605
+ <div style="padding: 10px; color: var(--text-muted);">Security</div>
606
+ </div>
607
+ <div style="background: rgba(255,255,255,0.05); border-radius: 8px; padding: 20px; min-height: 150px;">
608
+ <h3>General Settings</h3>
609
+ <p style="margin-top: 10px; color: var(--text-muted);">Adjust your preferences here.</p>
610
+ <label style="display: flex; align-items: center; gap: 10px; margin-top: 20px; cursor: pointer;">
611
+ <input type="checkbox" checked> Enable Notifications
612
+ </label>
613
+ <label style="display: flex; align-items: center; gap: 10px; margin-top: 10px; cursor: pointer;">
614
+ <input type="checkbox"> Dark Mode
615
+ </label>
616
+ </div>
617
+ </div>`;
618
+ logMessages = [
619
+ "> Loading configuration files...",
620
+ "> Checking for updates...",
621
+ "> User profile loaded.",
622
+ "> Settings ready."
623
+ ];
624
+ }
625
+
626
+ dynamicContent.innerHTML = contentHTML;
627
+
628
+ // Simulate console log animation
629
+ consoleOutput.innerHTML = '';
630
+ logMessages.forEach((msg, index) => {
631
+ setTimeout(() => {
632
+ consoleOutput.innerHTML += msg + '<br>';
633
+ // Auto scroll to bottom of console
634
+ const consoleDiv = document.getElementById('consoleOutput');
635
+ consoleDiv.scrollTop = consoleDiv.scrollHeight;
636
+ }, index * 400 + 200);
637
+ });
638
+ }
639
+
640
+ // Function to close the application
641
+ function closeApp() {
642
+ modal.classList.remove('active');
643
+
644
+ // Optional: Clear console when closing
645
+ setTimeout(() => {
646
+ consoleOutput.innerHTML = '';
647
+ }, 300);
648
+ }
649
+
650
+ // Initialize with a welcome message in console
651
+ window.onload = () => {
652
+ consoleOutput.innerHTML = "> System boot complete.<br>> Welcome to Nexus Launcher.<br>> Waiting for user input...";
653
+ };
654
+ </script>
655
+ </body>
656
+ </html>