shell-mirror 1.5.77 → 1.5.78
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/public/app/terminal.html +153 -39
package/package.json
CHANGED
package/public/app/terminal.html
CHANGED
|
@@ -343,6 +343,88 @@
|
|
|
343
343
|
from { opacity: 1; }
|
|
344
344
|
to { opacity: 0.4; }
|
|
345
345
|
}
|
|
346
|
+
|
|
347
|
+
/* Help Modal - Tab Navigation */
|
|
348
|
+
.help-tabs {
|
|
349
|
+
display: flex;
|
|
350
|
+
padding: 0 24px;
|
|
351
|
+
border-bottom: 1px solid #eee;
|
|
352
|
+
background: #f8f9fa;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
.help-tab {
|
|
356
|
+
padding: 12px 20px;
|
|
357
|
+
background: transparent;
|
|
358
|
+
border: none;
|
|
359
|
+
border-bottom: 3px solid transparent;
|
|
360
|
+
cursor: pointer;
|
|
361
|
+
font-size: 0.9rem;
|
|
362
|
+
color: #666;
|
|
363
|
+
transition: all 0.2s ease;
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
.help-tab:hover {
|
|
367
|
+
color: #333;
|
|
368
|
+
background: rgba(102, 126, 234, 0.05);
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
.help-tab.active {
|
|
372
|
+
color: #667eea;
|
|
373
|
+
border-bottom-color: #667eea;
|
|
374
|
+
font-weight: 600;
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
/* Help Modal - Tab Content */
|
|
378
|
+
.help-tab-content {
|
|
379
|
+
display: none;
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
.help-tab-content.active {
|
|
383
|
+
display: block;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
/* Help Modal - Content Sections */
|
|
387
|
+
.help-section {
|
|
388
|
+
margin-bottom: 24px;
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
.help-section h4 {
|
|
392
|
+
color: #333;
|
|
393
|
+
font-size: 1rem;
|
|
394
|
+
margin-bottom: 12px;
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
.help-section p {
|
|
398
|
+
color: #666;
|
|
399
|
+
line-height: 1.6;
|
|
400
|
+
margin-bottom: 8px;
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
.help-section ul {
|
|
404
|
+
list-style: none;
|
|
405
|
+
padding: 0;
|
|
406
|
+
margin: 8px 0;
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
.help-section li {
|
|
410
|
+
padding: 4px 0;
|
|
411
|
+
color: #666;
|
|
412
|
+
line-height: 1.6;
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
/* Help Modal - Mobile Responsiveness */
|
|
416
|
+
@media (max-width: 768px) {
|
|
417
|
+
.help-tabs {
|
|
418
|
+
overflow-x: auto;
|
|
419
|
+
-webkit-overflow-scrolling: touch;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
.help-tab {
|
|
423
|
+
font-size: 0.8rem;
|
|
424
|
+
padding: 10px 12px;
|
|
425
|
+
white-space: nowrap;
|
|
426
|
+
}
|
|
427
|
+
}
|
|
346
428
|
</style>
|
|
347
429
|
</head>
|
|
348
430
|
<body>
|
|
@@ -408,43 +490,64 @@
|
|
|
408
490
|
|
|
409
491
|
<!-- Help Modal -->
|
|
410
492
|
<div id="help-modal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); align-items: center; justify-content: center; z-index: 20000;">
|
|
411
|
-
<div style="background: white; border-radius: 12px; max-width:
|
|
493
|
+
<div style="background: white; border-radius: 12px; max-width: 600px; width: 90%; max-height: 80vh; overflow: hidden;">
|
|
494
|
+
<!-- Header -->
|
|
412
495
|
<div style="padding: 20px 24px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center;">
|
|
413
|
-
<h3 style="margin: 0; font-size: 1.2rem; color: #333;">🚀
|
|
496
|
+
<h3 style="margin: 0; font-size: 1.2rem; color: #333;">🚀 Shell Mirror Terminal</h3>
|
|
414
497
|
<button onclick="closeHelpModal()" style="background: none; border: none; font-size: 1.5rem; cursor: pointer; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #666;">×</button>
|
|
415
498
|
</div>
|
|
499
|
+
|
|
500
|
+
<!-- Tab Navigation -->
|
|
501
|
+
<div class="help-tabs">
|
|
502
|
+
<button class="help-tab active" onclick="showHelpTab('sessions')">Sessions</button>
|
|
503
|
+
<button class="help-tab" onclick="showHelpTab('help')">Troubleshooting</button>
|
|
504
|
+
</div>
|
|
505
|
+
|
|
506
|
+
<!-- Tab Content -->
|
|
416
507
|
<div style="padding: 24px; max-height: 60vh; overflow-y: auto;">
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
<
|
|
422
|
-
|
|
423
|
-
<
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
</div>
|
|
427
|
-
</div>
|
|
428
|
-
</div>
|
|
508
|
+
<!-- Sessions Tab -->
|
|
509
|
+
<div id="tab-sessions" class="help-tab-content active">
|
|
510
|
+
<p style="margin-top: 0; margin-bottom: 16px;">Sessions let you run multiple terminals simultaneously.</p>
|
|
511
|
+
|
|
512
|
+
<h4 style="margin-top: 20px; margin-bottom: 8px;">Creating</h4>
|
|
513
|
+
<ul style="list-style: none; padding: 0; margin: 0;">
|
|
514
|
+
<li>• Tap "Sessions" → "+ New Session"</li>
|
|
515
|
+
<li>• Each session runs independently</li>
|
|
516
|
+
</ul>
|
|
429
517
|
|
|
430
|
-
|
|
431
|
-
<
|
|
432
|
-
|
|
433
|
-
<
|
|
434
|
-
<
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
518
|
+
<h4 style="margin-top: 20px; margin-bottom: 8px;">Switching</h4>
|
|
519
|
+
<ul style="list-style: none; padding: 0; margin: 0;">
|
|
520
|
+
<li>• Tap "Sessions" dropdown</li>
|
|
521
|
+
<li>• Select any session</li>
|
|
522
|
+
<li>• Your processes keep running in background</li>
|
|
523
|
+
</ul>
|
|
524
|
+
|
|
525
|
+
<h4 style="margin-top: 20px; margin-bottom: 8px;">Limits</h4>
|
|
526
|
+
<ul style="list-style: none; padding: 0; margin: 0;">
|
|
527
|
+
<li>• Max 10 sessions per Mac</li>
|
|
528
|
+
<li>• Auto-deleted after 24h inactive</li>
|
|
529
|
+
</ul>
|
|
440
530
|
</div>
|
|
441
531
|
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
<
|
|
445
|
-
|
|
446
|
-
<li
|
|
447
|
-
<li
|
|
532
|
+
<!-- Troubleshooting Tab -->
|
|
533
|
+
<div id="tab-help" class="help-tab-content" style="display: none;">
|
|
534
|
+
<h4 style="margin-top: 0; margin-bottom: 8px;">Connection stuck?</h4>
|
|
535
|
+
<ul style="list-style: none; padding: 0; margin: 0 0 20px 0;">
|
|
536
|
+
<li>• Wait 10 seconds for auto-retry</li>
|
|
537
|
+
<li>• Still red? Return to Dashboard → Reconnect</li>
|
|
538
|
+
</ul>
|
|
539
|
+
|
|
540
|
+
<h4 style="margin-top: 20px; margin-bottom: 8px;">Slow connection?</h4>
|
|
541
|
+
<ul style="list-style: none; padding: 0; margin: 0 0 20px 0;">
|
|
542
|
+
<li>• App tries: Local network → WebRTC → Fallback</li>
|
|
543
|
+
<li>• First connect may take 30 seconds</li>
|
|
544
|
+
<li>• WebRTC works best (100-500ms)</li>
|
|
545
|
+
</ul>
|
|
546
|
+
|
|
547
|
+
<h4 style="margin-top: 20px; margin-bottom: 8px;">Behind corporate firewall?</h4>
|
|
548
|
+
<ul style="list-style: none; padding: 0; margin: 0;">
|
|
549
|
+
<li>• May need IT to whitelist STUN servers</li>
|
|
550
|
+
<li>• Contact: stun.l.google.com port 19302</li>
|
|
448
551
|
</ul>
|
|
449
552
|
</div>
|
|
450
553
|
</div>
|
|
@@ -463,16 +566,27 @@
|
|
|
463
566
|
modal.style.display = 'none';
|
|
464
567
|
}
|
|
465
568
|
|
|
466
|
-
function
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
569
|
+
function showHelpTab(tabName) {
|
|
570
|
+
// Hide all tab content
|
|
571
|
+
document.querySelectorAll('.help-tab-content').forEach(content => {
|
|
572
|
+
content.classList.remove('active');
|
|
573
|
+
content.style.display = 'none';
|
|
574
|
+
});
|
|
575
|
+
|
|
576
|
+
// Remove active from all tab buttons
|
|
577
|
+
document.querySelectorAll('.help-tab').forEach(btn => {
|
|
578
|
+
btn.classList.remove('active');
|
|
475
579
|
});
|
|
580
|
+
|
|
581
|
+
// Show selected tab content
|
|
582
|
+
const selectedContent = document.getElementById('tab-' + tabName);
|
|
583
|
+
if (selectedContent) {
|
|
584
|
+
selectedContent.classList.add('active');
|
|
585
|
+
selectedContent.style.display = 'block';
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
// Activate corresponding button
|
|
589
|
+
event.target.classList.add('active');
|
|
476
590
|
}
|
|
477
591
|
|
|
478
592
|
// Close modal when clicking outside
|