Spaces:
Paused
Paused
File size: 3,122 Bytes
f3c7569 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Claude Code</title>
<link rel="stylesheet" href="/xterm.css" />
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #1e1e1e;
overflow: hidden;
}
#terminal-wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 48px;
}
#terminal {
width: 100%;
height: 100%;
}
#toolbar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 48px;
display: flex;
background: #2d2d2d;
border-top: 1px solid #444;
z-index: 1000;
}
#toolbar button {
flex: 1;
background: #2d2d2d;
color: #e0e0e0;
border: none;
border-right: 1px solid #444;
font-size: 13px;
font-family: monospace;
padding: 0;
-webkit-tap-highlight-color: rgba(255,255,255,0.2);
}
#toolbar button:last-child {
border-right: none;
}
#toolbar button:active {
background: #454545;
}
</style>
</head>
<body>
<div id="terminal-wrap">
<div id="terminal"></div>
</div>
<div id="toolbar">
<button data-key="Escape">Esc</button>
<button data-key="Tab">Tab</button>
<button data-key="ArrowUp">↑</button>
<button data-key="ArrowDown">↓</button>
<button data-key="ArrowLeft">←</button>
<button data-key="ArrowRight">→</button>
<button data-key="ctrl-c">^C</button>
<button data-key="ctrl-r">^R</button>
</div>
<script src="/xterm.js"></script>
<script>
// ttyd's default client script is loaded separately via /ttyd.js normally,
// but since we're overriding index.html we hook into the same websocket
// logic ttyd expects, then bind our toolbar to xterm's key input.
document.addEventListener('DOMContentLoaded', function () {
var checkReady = setInterval(function () {
if (window.term) {
clearInterval(checkReady);
bindToolbar(window.term);
}
}, 100);
});
function bindToolbar(term) {
var keyMap = {
'Escape': '\x1b',
'Tab': '\t',
'ArrowUp': '\x1b[A',
'ArrowDown': '\x1b[B',
'ArrowLeft': '\x1b[D',
'ArrowRight': '\x1b[C',
'ctrl-c': '\x03',
'ctrl-r': '\x12'
};
document.querySelectorAll('#toolbar button').forEach(function (btn) {
btn.addEventListener('touchstart', function (e) {
e.preventDefault();
var seq = keyMap[btn.dataset.key];
if (seq && term._core && term._core.coreService) {
term._core.coreService.triggerDataEvent(seq, true);
}
}, { passive: false });
btn.addEventListener('click', function (e) {
var seq = keyMap[btn.dataset.key];
if (seq && term._core && term._core.coreService) {
term._core.coreService.triggerDataEvent(seq, true);
}
});
});
}
</script>
</body>
</html> |