You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
6.7 KiB
HTML
130 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
|
<title>cmux-remote</title>
|
|
<link rel="manifest" href="/manifest.json">
|
|
<meta name="theme-color" content="#0c0c14">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<link rel="stylesheet" href="/css/themes.css?v=2">
|
|
<link rel="stylesheet" href="/css/main.css?v=8">
|
|
<link rel="stylesheet" href="/css/terminal.css?v=4">
|
|
<link rel="stylesheet" href="/css/keyboard.css?v=6">
|
|
<link rel="stylesheet" href="/css/sidebar.css?v=6">
|
|
<link rel="stylesheet" href="/css/claude.css?v=6">
|
|
</head>
|
|
<body>
|
|
<!-- Sidebar -->
|
|
<div class="sidebar-overlay" id="sidebar-overlay"></div>
|
|
<aside class="sidebar" id="sidebar">
|
|
<div class="sidebar-header">
|
|
<h2>Workspaces</h2>
|
|
<button class="sidebar-close" id="sidebar-close" aria-label="Close sidebar">×</button>
|
|
</div>
|
|
<div class="sidebar-content" id="sidebar-tree"></div>
|
|
</aside>
|
|
|
|
<!-- Main layout -->
|
|
<div class="app-container">
|
|
<!-- Top bar -->
|
|
<header class="top-bar">
|
|
<button class="menu-btn" id="menu-btn" aria-label="Open sidebar">☰</button>
|
|
<span class="app-title" id="app-title"></span>
|
|
<div class="top-bar-right">
|
|
<span class="connection-status" id="connection-status"></span>
|
|
<button class="reload-btn" id="reload-btn" aria-label="Reload page" title="Reload">↻</button>
|
|
<button class="settings-btn" id="settings-btn" aria-label="Settings" title="Settings">
|
|
<svg width="17" height="17" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/></svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Terminal area -->
|
|
<main class="terminal-container" id="terminal-container">
|
|
<pre class="terminal-output" id="terminal-output"></pre>
|
|
<img class="browser-view" id="browser-view" hidden alt="browser">
|
|
<button class="browser-zoom-btn" id="browser-zoom-btn" hidden aria-label="Zoom">⤢</button>
|
|
<div class="browser-loading" id="browser-loading" hidden></div>
|
|
</main>
|
|
|
|
<!-- Browser zoom lightbox -->
|
|
<div class="img-zoom-overlay" id="img-zoom-overlay" hidden>
|
|
<button class="img-zoom-close" id="img-zoom-close" aria-label="Close">✕</button>
|
|
<div class="img-zoom-container" id="img-zoom-container">
|
|
<img class="img-zoom-img" id="img-zoom-img" alt="">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Virtual keyboard -->
|
|
<footer class="virtual-keyboard" id="virtual-keyboard">
|
|
<div class="key-row all-keys">
|
|
<button class="key" data-key="Escape">Esc</button>
|
|
<button class="key" data-key="Tab">Tab</button>
|
|
<button class="key modifier" data-modifier="ctrl" id="ctrl-key">Ctrl</button>
|
|
<button class="key modifier" data-modifier="alt" id="alt-key">Alt</button>
|
|
<button class="key modifier" data-modifier="shift" id="shift-key">⇧</button>
|
|
<button class="key" data-key="ShiftTab">⟳</button>
|
|
<button class="key shortcut" data-key="Backspace">⌫</button>
|
|
<button class="key shortcut" data-key="Ctrl-c">^C</button>
|
|
<button class="key shortcut" data-key="/">/</button>
|
|
<button class="key" data-key="ArrowLeft">◀</button>
|
|
<button class="key" data-key="ArrowDown">▼</button>
|
|
<button class="key" data-key="ArrowUp">▲</button>
|
|
<button class="key" data-key="ArrowRight">▶</button>
|
|
</div>
|
|
<div class="key-row input-row">
|
|
<button class="keyboard-toggle" id="keyboard-toggle" aria-label="Toggle keyboard">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M6 9h.01M10 9h.01M14 9h.01M18 9h.01M8 13h.01M12 13h.01M16 13h.01M6 17h12"/></svg>
|
|
</button>
|
|
<input type="text" class="text-input" id="text-input" placeholder="Type here..."
|
|
autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false">
|
|
<button class="key send-key" id="send-btn">↵</button>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- Settings panel -->
|
|
<div class="settings-overlay" id="settings-overlay"></div>
|
|
<aside class="settings-panel" id="settings-panel">
|
|
<div class="settings-header">
|
|
<span>Settings</span>
|
|
<button class="settings-close" id="settings-close" aria-label="Close settings">
|
|
<svg width="14" height="14" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="settings-body">
|
|
<label class="settings-row" for="theme-cb">
|
|
<span class="settings-label">Dark Mode</span>
|
|
<span class="settings-toggle">
|
|
<input type="checkbox" id="theme-cb" class="settings-cb">
|
|
<span class="settings-toggle-slider"></span>
|
|
</span>
|
|
</label>
|
|
<label class="settings-row" for="scroll-x-cb">
|
|
<span class="settings-label">Horizontal Scroll</span>
|
|
<span class="settings-toggle">
|
|
<input type="checkbox" id="scroll-x-cb" class="settings-cb">
|
|
<span class="settings-toggle-slider"></span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</aside>
|
|
|
|
<script src="/js/websocket-client.js?v=3"></script>
|
|
<script src="/js/terminal-view.js?v=7"></script>
|
|
<script src="/js/virtual-keyboard.js?v=3"></script>
|
|
<script src="/js/sidebar.js?v=5"></script>
|
|
<script src="/js/gestures.js?v=2"></script>
|
|
<script src="/js/theme.js?v=4"></script>
|
|
<script src="/js/claude-parser.js?v=10"></script>
|
|
<script src="/js/claude-renderer.js?v=10"></script>
|
|
<script src="/js/claude-keyboard.js?v=4"></script>
|
|
<script src="/js/app.js?v=9"></script>
|
|
<script src="/js/debug-safe-area.js"></script>
|
|
<script src="/js/sw-unregister.js"></script>
|
|
</body>
|
|
</html>
|