feat: W1 frontend — index.html, style.css, keybar, main.ts (esbuild entry)

- T8 public/index.html      — #term/#keybar, loads ./build/main.js (type=module)
- T9 public/style.css       — fullscreen term, keybar fixed bottom, hidden >768px
- T10 public/keybar.ts      — key→byte map + mountKeybar (13 tests)
- T11 public/main.ts        — xterm+fit, WS client (wss on https/M6), reconnect
                              backoff, resize debounce, mountKeybar wiring

Verified by orchestrator: backend+frontend tsc clean; full suite 141 tests;
npm run build:web bundles main.ts -> public/build/main.js (430kb).
Note: main.ts uses one @ts-ignore for the CSS import (minor; future: *.css d.ts).
This commit is contained in:
Yaojia Wang
2026-06-16 18:36:32 +02:00
parent de8c366ab2
commit 326d3472dd
5 changed files with 547 additions and 0 deletions

73
public/style.css Normal file
View File

@@ -0,0 +1,73 @@
/* Web Terminal Styling */
/* Full-screen terminal layout */
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #1a1a1a;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
overflow: hidden;
}
#term {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 60px;
width: 100%;
background-color: #1a1a1a;
overflow: hidden;
}
/* Mobile touch keybar — fixed at bottom, horizontal layout */
#keybar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background-color: #2a2a2a;
border-top: 1px solid #3a3a3a;
display: flex;
flex-direction: row;
overflow-x: auto;
overflow-y: hidden;
z-index: 1000;
gap: 0;
}
/* Keybar buttons */
#keybar button {
flex: 1;
min-width: 50px;
height: 60px;
padding: 0;
border: 1px solid #444;
background-color: #333;
color: #ddd;
font-size: 12px;
cursor: pointer;
border-radius: 0;
transition: background-color 0.2s;
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
#keybar button:active {
background-color: #555;
}
/* Hide keybar on desktop (viewport width > 768px) */
@media (min-width: 769px) {
#keybar {
display: none;
}
#term {
bottom: 0;
}
}