Hugging Face's logo

Spaces:
sky-meilin
/
HuggingfaceCLI2
Running

App Files Community
sky-meilin commited on
Commit
2db1bc0
·
verified ·
1 Parent(s): cf7dd41

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +655 -19
index.html CHANGED
@@ -1,19 +1,655 @@
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>Hugging Face CLI Installer</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary: #ffd23f;
11
+ --secondary: #2b2b2b;
12
+ --accent: #ff6b6b;
13
+ --text: #f8f8f8;
14
+ --text-secondary: #a0a0a0;
15
+ --bg: #1a1a1a;
16
+ --terminal-bg: #1e1e1e;
17
+ --terminal-text: #e0e0e0;
18
+ --terminal-prompt: #4CAF50;
19
+ --terminal-output: #bbbbbb;
20
+ --terminal-error: #ff5252;
21
+ --terminal-success: #8bc34a;
22
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
23
+ --border-radius: 8px;
24
+ --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
25
+ }
26
+
27
+ * {
28
+ margin: 0;
29
+ padding: 0;
30
+ box-sizing: border-box;
31
+ font-family: 'SF Mono', 'Roboto Mono', 'Courier New', monospace;
32
+ }
33
+
34
+ body {
35
+ background-color: var(--bg);
36
+ color: var(--text);
37
+ min-height: 100vh;
38
+ display: flex;
39
+ flex-direction: column;
40
+ line-height: 1.6;
41
+ }
42
+
43
+ header {
44
+ background: linear-gradient(135deg, var(--secondary), #111);
45
+ padding: 1.5rem;
46
+ box-shadow: var(--shadow);
47
+ position: sticky;
48
+ top: 0;
49
+ z-index: 100;
50
+ }
51
+
52
+ .header-content {
53
+ max-width: 1200px;
54
+ margin: 0 auto;
55
+ display: flex;
56
+ justify-content: space-between;
57
+ align-items: center;
58
+ flex-wrap: wrap;
59
+ gap: 1rem;
60
+ }
61
+
62
+ .logo {
63
+ display: flex;
64
+ align-items: center;
65
+ gap: 0.8rem;
66
+ text-decoration: none;
67
+ color: var(--text);
68
+ }
69
+
70
+ .logo-icon {
71
+ font-size: 1.8rem;
72
+ color: var(--primary);
73
+ }
74
+
75
+ .logo-text {
76
+ font-size: 1.3rem;
77
+ font-weight: bold;
78
+ }
79
+
80
+ .anycoder-link {
81
+ color: var(--primary);
82
+ text-decoration: none;
83
+ font-size: 0.9rem;
84
+ display: flex;
85
+ align-items: center;
86
+ gap: 0.5rem;
87
+ transition: var(--transition);
88
+ }
89
+
90
+ .anycoder-link:hover {
91
+ color: var(--accent);
92
+ transform: translateY(-2px);
93
+ }
94
+
95
+ main {
96
+ flex: 1;
97
+ max-width: 1200px;
98
+ margin: 2rem auto;
99
+ padding: 0 1rem;
100
+ width: 100%;
101
+ }
102
+
103
+ .terminal-container {
104
+ background-color: var(--terminal-bg);
105
+ border-radius: var(--border-radius);
106
+ box-shadow: var(--shadow);
107
+ overflow: hidden;
108
+ height: 600px;
109
+ display: flex;
110
+ flex-direction: column;
111
+ position: relative;
112
+ }
113
+
114
+ .terminal-header {
115
+ background-color: var(--secondary);
116
+ padding: 0.8rem 1.2rem;
117
+ display: flex;
118
+ justify-content: space-between;
119
+ align-items: center;
120
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
121
+ }
122
+
123
+ .terminal-title {
124
+ font-size: 0.9rem;
125
+ color: var(--text-secondary);
126
+ }
127
+
128
+ .terminal-controls {
129
+ display: flex;
130
+ gap: 0.6rem;
131
+ }
132
+
133
+ .control-btn {
134
+ width: 12px;
135
+ height: 12px;
136
+ border-radius: 50%;
137
+ border: none;
138
+ cursor: pointer;
139
+ transition: var(--transition);
140
+ }
141
+
142
+ .control-btn:hover {
143
+ transform: scale(1.2);
144
+ }
145
+
146
+ .close {
147
+ background-color: #ff5f56;
148
+ }
149
+
150
+ .minimize {
151
+ background-color: #ffbd2e;
152
+ }
153
+
154
+ .maximize {
155
+ background-color: #27c93f;
156
+ }
157
+
158
+ .terminal-body {
159
+ flex: 1;
160
+ padding: 1.5rem;
161
+ overflow-y: auto;
162
+ position: relative;
163
+ }
164
+
165
+ .terminal-output {
166
+ color: var(--terminal-output);
167
+ margin-bottom: 1rem;
168
+ white-space: pre-wrap;
169
+ font-size: 0.95rem;
170
+ }
171
+
172
+ .terminal-prompt {
173
+ display: flex;
174
+ align-items: center;
175
+ gap: 0.5rem;
176
+ margin-bottom: 0.5rem;
177
+ }
178
+
179
+ .prompt-symbol {
180
+ color: var(--terminal-prompt);
181
+ font-weight: bold;
182
+ }
183
+
184
+ .prompt-input {
185
+ color: var(--terminal-text);
186
+ background: transparent;
187
+ border: none;
188
+ outline: none;
189
+ flex: 1;
190
+ font-size: 0.95rem;
191
+ }
192
+
193
+ .typing-cursor {
194
+ display: inline-block;
195
+ width: 8px;
196
+ height: 1.2em;
197
+ background-color: var(--terminal-text);
198
+ animation: blink 1s step-end infinite;
199
+ vertical-align: middle;
200
+ }
201
+
202
+ @keyframes blink {
203
+ from, to { background-color: transparent }
204
+ 50% { background-color: var(--terminal-text) }
205
+ }
206
+
207
+ .command-explanation {
208
+ background-color: rgba(0, 0, 0, 0.3);
209
+ border-left: 3px solid var(--primary);
210
+ padding: 1rem;
211
+ margin: 1.5rem 0;
212
+ border-radius: 0 var(--border-radius) var(--border-radius) 0;
213
+ }
214
+
215
+ .command-explanation h3 {
216
+ color: var(--primary);
217
+ margin-bottom: 0.5rem;
218
+ display: flex;
219
+ align-items: center;
220
+ gap: 0.5rem;
221
+ }
222
+
223
+ .command-explanation p {
224
+ color: var(--terminal-output);
225
+ margin-bottom: 0.5rem;
226
+ }
227
+
228
+ .command-explanation ul {
229
+ color: var(--terminal-output);
230
+ margin-left: 1.5rem;
231
+ margin-bottom: 0.5rem;
232
+ }
233
+
234
+ .command-explanation li {
235
+ margin-bottom: 0.3rem;
236
+ }
237
+
238
+ .progress-container {
239
+ margin: 1.5rem 0;
240
+ }
241
+
242
+ .progress-bar {
243
+ width: 100%;
244
+ height: 4px;
245
+ background-color: rgba(255, 255, 255, 0.1);
246
+ border-radius: 2px;
247
+ overflow: hidden;
248
+ }
249
+
250
+ .progress-fill {
251
+ height: 100%;
252
+ background: linear-gradient(90deg, var(--primary), var(--accent));
253
+ width: 0%;
254
+ transition: width 0.5s ease;
255
+ }
256
+
257
+ .status-message {
258
+ color: var(--terminal-output);
259
+ margin-top: 0.5rem;
260
+ font-size: 0.9rem;
261
+ }
262
+
263
+ .success-message {
264
+ color: var(--terminal-success);
265
+ font-weight: bold;
266
+ }
267
+
268
+ .error-message {
269
+ color: var(--terminal-error);
270
+ font-weight: bold;
271
+ }
272
+
273
+ .action-buttons {
274
+ display: flex;
275
+ gap: 1rem;
276
+ margin-top: 1.5rem;
277
+ }
278
+
279
+ .btn {
280
+ padding: 0.6rem 1.2rem;
281
+ border-radius: var(--border-radius);
282
+ font-weight: bold;
283
+ text-decoration: none;
284
+ display: inline-flex;
285
+ align-items: center;
286
+ gap: 0.5rem;
287
+ transition: var(--transition);
288
+ border: none;
289
+ cursor: pointer;
290
+ font-size: 0.9rem;
291
+ }
292
+
293
+ .btn-primary {
294
+ background-color: var(--primary);
295
+ color: var(--secondary);
296
+ }
297
+
298
+ .btn-primary:hover {
299
+ background-color: #e6bc37;
300
+ transform: translateY(-2px);
301
+ }
302
+
303
+ .btn-secondary {
304
+ background-color: transparent;
305
+ color: var(--primary);
306
+ border: 1px solid var(--primary);
307
+ }
308
+
309
+ .btn-secondary:hover {
310
+ background-color: rgba(255, 210, 63, 0.1);
311
+ }
312
+
313
+ .btn-danger {
314
+ background-color: var(--terminal-error);
315
+ color: white;
316
+ }
317
+
318
+ .btn-danger:hover {
319
+ background-color: #e64a4a;
320
+ }
321
+
322
+ footer {
323
+ text-align: center;
324
+ padding: 1.5rem;
325
+ color: var(--text-secondary);
326
+ font-size: 0.9rem;
327
+ }
328
+
329
+ .footer-links {
330
+ display: flex;
331
+ justify-content: center;
332
+ gap: 1rem;
333
+ margin-top: 0.5rem;
334
+ }
335
+
336
+ .footer-link {
337
+ color: var(--primary);
338
+ text-decoration: none;
339
+ transition: var(--transition);
340
+ }
341
+
342
+ .footer-link:hover {
343
+ color: var(--accent);
344
+ text-decoration: underline;
345
+ }
346
+
347
+ /* Responsive adjustments */
348
+ @media (max-width: 768px) {
349
+ .terminal-container {
350
+ height: 500px;
351
+ }
352
+
353
+ .header-content {
354
+ flex-direction: column;
355
+ align-items: flex-start;
356
+ }
357
+
358
+ .anycoder-link {
359
+ margin-left: 2rem;
360
+ }
361
+
362
+ .action-buttons {
363
+ flex-direction: column;
364
+ }
365
+
366
+ .btn {
367
+ width: 100%;
368
+ justify-content: center;
369
+ }
370
+ }
371
+
372
+ @media (max-width: 480px) {
373
+ .terminal-container {
374
+ height: 400px;
375
+ }
376
+
377
+ .terminal-body {
378
+ padding: 1rem;
379
+ }
380
+
381
+ .command-explanation {
382
+ padding: 0.8rem;
383
+ }
384
+ }
385
+ </style>
386
+ </head>
387
+ <body>
388
+ <header>
389
+ <div class="header-content">
390
+ <a href="#" class="logo">
391
+ <i class="fas fa-terminal logo-icon"></i>
392
+ <span class="logo-text">Hugging Face CLI Installer</span>
393
+ </a>
394
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">
395
+ <i class="fas fa-code"></i>
396
+ Built with anycoder
397
+ </a>
398
+ </div>
399
+ </header>
400
+
401
+ <main>
402
+ <div class="terminal-container">
403
+ <div class="terminal-header">
404
+ <div class="terminal-title">Terminal - Hugging Face CLI Installation</div>
405
+ <div class="terminal-controls">
406
+ <button class="control-btn close" title="Close"></button>
407
+ <button class="control-btn minimize" title="Minimize"></button>
408
+ <button class="control-btn maximize" title="Maximize"></button>
409
+ </div>
410
+ </div>
411
+ <div class="terminal-body" id="terminal">
412
+ <div class="terminal-output">
413
+ <span style="color: var(--terminal-prompt);">user@machine</span><span style="color: var(--text-secondary);">:~$</span> Welcome to the Hugging Face CLI installer
414
+ <br><br>
415
+ This will install the official Hugging Face command-line interface (CLI) tool.
416
+ <br>
417
+ The CLI allows you to interact with Hugging Face services directly from your terminal.
418
+ </div>
419
+
420
+ <div class="command-explanation">
421
+ <h3><i class="fas fa-info-circle"></i> About this command</h3>
422
+ <p>The command you're about to run:</p>
423
+ <p style="color: var(--primary); font-weight: bold; margin: 0.5rem 0;">curl -LsSf https://hf.co/cli/install.sh | bash</p>
424
+ <p>Will perform the following actions:</p>
425
+ <ul>
426
+ <li>Download the installation script from Hugging Face</li>
427
+ <li>Execute the script with bash</li>
428
+ <li>Install the Hugging Face CLI to your system</li>
429
+ <li>Make the <code>huggingface-cli</code> command available globally</li>
430
+ </ul>
431
+ <p><strong>Note:</strong> This requires curl and bash to be installed on your system.</p>
432
+ </div>
433
+
434
+ <div class="terminal-prompt">
435
+ <span class="prompt-symbol">user@machine</span>
436
+ <span style="color: var(--text-secondary);">:~$</span>
437
+ <span class="prompt-input" id="command-input"></span>
438
+ <span class="typing-cursor" id="cursor"></span>
439
+ </div>
440
+
441
+ <div class="progress-container" id="progress-container" style="display: none;">
442
+ <div class="progress-bar">
443
+ <div class="progress-fill" id="progress-fill"></div>
444
+ </div>
445
+ <div class="status-message" id="status-message">Downloading installation script...</div>
446
+ </div>
447
+ </div>
448
+ </div>
449
+
450
+ <div class="action-buttons">
451
+ <button class="btn btn-primary" id="run-btn">
452
+ <i class="fas fa-play"></i> Run Installation
453
+ </button>
454
+ <button class="btn btn-secondary" id="copy-btn">
455
+ <i class="fas fa-copy"></i> Copy Command
456
+ </button>
457
+ <button class="btn btn-danger" id="clear-btn">
458
+ <i class="fas fa-eraser"></i> Clear Terminal
459
+ </button>
460
+ </div>
461
+ </main>
462
+
463
+ <footer>
464
+ <p>Hugging Face CLI Installer | Simulated Terminal Interface</p>
465
+ <div class="footer-links">
466
+ <a href="https://huggingface.co/docs/huggingface_hub/quick-start" class="footer-link" target="_blank">Documentation</a>
467
+ <a href="https://github.com/huggingface/huggingface_hub" class="footer-link" target="_blank">GitHub</a>
468
+ <a href="https://huggingface.co/" class="footer-link" target="_blank">Hugging Face</a>
469
+ </div>
470
+ </footer>
471
+
472
+ <script>
473
+ document.addEventListener('DOMContentLoaded', function() {
474
+ const commandInput = document.getElementById('command-input');
475
+ const cursor = document.getElementById('cursor');
476
+ const terminal = document.getElementById('terminal');
477
+ const runBtn = document.getElementById('run-btn');
478
+ const copyBtn = document.getElementById('copy-btn');
479
+ const clearBtn = document.getElementById('clear-btn');
480
+ const progressContainer = document.getElementById('progress-container');
481
+ const progressFill = document.getElementById('progress-fill');
482
+ const statusMessage = document.getElementById('status-message');
483
+
484
+ const fullCommand = 'curl -LsSf https://hf.co/cli/install.sh | bash';
485
+ let commandIndex = 0;
486
+ let isTyping = false;
487
+ let isInstalling = false;
488
+
489
+ // Type the command character by character
490
+ function typeCommand() {
491
+ if (commandIndex < fullCommand.length) {
492
+ commandInput.textContent += fullCommand[commandIndex];
493
+ commandIndex++;
494
+ setTimeout(typeCommand, 50);
495
+ } else {
496
+ isTyping = false;
497
+ cursor.style.display = 'none';
498
+ }
499
+ }
500
+
501
+ // Start typing the command
502
+ setTimeout(() => {
503
+ isTyping = true;
504
+ typeCommand();
505
+ }, 1000);
506
+
507
+ // Run installation simulation
508
+ runBtn.addEventListener('click', function() {
509
+ if (isInstalling) return;
510
+
511
+ terminal.innerHTML += `
512
+ <div class="terminal-output">
513
+ <span style="color: var(--terminal-prompt);">user@machine</span><span style="color: var(--text-secondary);">:~$</span> ${fullCommand}
514
+ </div>
515
+ `;
516
+
517
+ isInstalling = true;
518
+ progressContainer.style.display = 'block';
519
+ runBtn.disabled = true;
520
+ copyBtn.disabled = true;
521
+ clearBtn.disabled = true;
522
+
523
+ // Simulate installation progress
524
+ let progress = 0;
525
+ const interval = setInterval(() => {
526
+ progress += Math.random() * 5;
527
+ if (progress > 100) progress = 100;
528
+ progressFill.style.width = `${progress}%`;
529
+
530
+ if (progress === 100) {
531
+ clearInterval(interval);
532
+ setTimeout(() => {
533
+ // Show success message
534
+ terminal.innerHTML += `
535
+ <div class="terminal-output">
536
+ <br>
537
+ <span class="success-message">✓ Hugging Face CLI installed successfully!</span>
538
+ <br><br>
539
+ You can now use the following commands:
540
+ <br><br>
541
+ <span style="color: var(--primary);">huggingface-cli --help</span> - Show help
542
+ <br>
543
+ <span style="color: var(--primary);">huggingface-cli login</span> - Log in to your account
544
+ <br>
545
+ <span style="color: var(--primary);">huggingface-cli whoami</span> - Check your current user
546
+ <br><br>
547
+ For more information, visit: <span style="color: var(--primary);">https://huggingface.co/docs/huggingface_hub/quick-start</span>
548
+ </div>
549
+ `;
550
+
551
+ statusMessage.textContent = 'Installation completed successfully!';
552
+ statusMessage.className = 'status-message success-message';
553
+
554
+ // Reset buttons
555
+ isInstalling = false;
556
+ runBtn.disabled = false;
557
+ copyBtn.disabled = false;
558
+ clearBtn.disabled = false;
559
+
560
+ // Scroll to bottom
561
+ terminal.scrollTop = terminal.scrollHeight;
562
+ }, 500);
563
+ } else if (progress < 30) {
564
+ statusMessage.textContent = 'Downloading installation script...';
565
+ } else if (progress < 60) {
566
+ statusMessage.textContent = 'Verifying script integrity...';
567
+ } else if (progress < 80) {
568
+ statusMessage.textContent = 'Installing dependencies...';
569
+ } else {
570
+ statusMessage.textContent = 'Finalizing installation...';
571
+ }
572
+
573
+ // Scroll to bottom
574
+ terminal.scrollTop = terminal.scrollHeight;
575
+ }, 200);
576
+ });
577
+
578
+ // Copy command to clipboard
579
+ copyBtn.addEventListener('click', function() {
580
+ navigator.clipboard.writeText(fullCommand).then(() => {
581
+ const originalText = copyBtn.innerHTML;
582
+ copyBtn.innerHTML = '<i class="fas fa-check"></i> Copied!';
583
+ copyBtn.classList.replace('btn-secondary', 'btn-primary');
584
+
585
+ setTimeout(() => {
586
+ copyBtn.innerHTML = originalText;
587
+ copyBtn.classList.replace('btn-primary', 'btn-secondary');
588
+ }, 2000);
589
+ });
590
+ });
591
+
592
+ // Clear terminal
593
+ clearBtn.addEventListener('click', function() {
594
+ if (isInstalling) return;
595
+
596
+ terminal.innerHTML = `
597
+ <div class="terminal-output">
598
+ <span style="color: var(--terminal-prompt);">user@machine</span><span style="color: var(--text-secondary);">:~$</span> Terminal cleared. Ready for new commands.
599
+ </div>
600
+ <div class="terminal-prompt">
601
+ <span class="prompt-symbol">user@machine</span>
602
+ <span style="color: var(--text-secondary);">:~$</span>
603
+ <span class="prompt-input" id="command-input"></span>
604
+ <span class="typing-cursor" id="cursor"></span>
605
+ </div>
606
+ `;
607
+
608
+ progressContainer.style.display = 'none';
609
+ progressFill.style.width = '0%';
610
+ statusMessage.textContent = '';
611
+ statusMessage.className = 'status-message';
612
+
613
+ // Restart typing animation
614
+ commandIndex = 0;
615
+ isTyping = true;
616
+ cursor.style.display = 'inline-block';
617
+ setTimeout(() => {
618
+ typeCommand();
619
+ }, 500);
620
+ });
621
+
622
+ // Terminal control buttons
623
+ document.querySelector('.close').addEventListener('click', function() {
624
+ if (confirm('Are you sure you want to close this terminal?')) {
625
+ window.close();
626
+ }
627
+ });
628
+
629
+ document.querySelector('.minimize').addEventListener('click', function() {
630
+ // Simulate minimize - just hide the terminal
631
+ const terminalContainer = document.querySelector('.terminal-container');
632
+ terminalContainer.style.transform = 'scale(0.9)';
633
+ terminalContainer.style.opacity = '0.5';
634
+ terminalContainer.style.transition = 'all 0.3s ease';
635
+
636
+ setTimeout(() => {
637
+ terminalContainer.style.transform = '';
638
+ terminalContainer.style.opacity = '';
639
+ }, 2000);
640
+ });
641
+
642
+ document.querySelector('.maximize').addEventListener('click', function() {
643
+ // Simulate maximize - toggle fullscreen
644
+ if (!document.fullscreenElement) {
645
+ document.documentElement.requestFullscreen().catch(err => {
646
+ console.error(`Error attempting to enable fullscreen: ${err.message}`);
647
+ });
648
+ } else {
649
+ document.exitFullscreen();
650
+ }
651
+ });
652
+ });
653
+ </script>
654
+ </body>
655
+ </html>