Style the web page's button and name keys as the TUI does

The Enter button matches the input beside it, and the key legend shows
arrows and short names (↑ ↓ Del PgUp) instead of Pure's key names.

1 files changed, 7 insertions, 2 deletions

diff --git a/src/web.c b/src/web.c
index a48401a..78da0ab 100644
--- a/src/web.c
+++ b/src/web.c
@@ -198,7 +198,9 @@ static const char *const page_parts[] = {
 ".muted{color:var(--muted)}.accent{color:var(--accent)}.good{color:var(--good)}.warning{color:var(--warning)}"
 ".danger{color:var(--danger)}[aria-selected=true].muted,[aria-selected=true] *{color:#fff}"
 "form{display:flex;gap:8px;margin-top:16px}input{flex:1;font:inherit;padding:8px 10px;border:1px solid var(--line);"
-"border-radius:8px;background:transparent;color:inherit}footer{margin-top:14px;color:var(--muted);font-size:13px}"
+"border-radius:8px;background:transparent;color:inherit}button{font:inherit;padding:8px 16px;border:1px solid var(--line);"
+"border-radius:8px;background:transparent;color:inherit;cursor:pointer}button:hover{border-color:var(--focus)}"
+"footer{margin-top:14px;color:var(--muted);font-size:13px}"
 "kbd{font:12px ui-monospace,monospace;border:1px solid var(--line);border-radius:4px;padding:0 5px;margin-right:4px}"
 "</style></head><body><main>",
 "<h1 id=title></h1><dl id=fields></dl><div id=parts></div>"
@@ -230,7 +232,10 @@ static const char *const page_parts[] = {
 "table.append(body);table.onwheel=e=>{e.preventDefault();pick(Math.max(0,Math.min(p.rows-1,p.focus+Math.sign(e.deltaY))))};"
 "return el('section',{},head,table)}));"
 "$('prompt').hidden=!s.prompt;if(s.prompt)$('entry').placeholder=s.prompt;"
-"$('keys').replaceChildren(...s.keys.map(k=>el('span',{},el('kbd',{textContent:k.key.replace(/^(Key|Digit)/,'')}),k.input+'  ')))}"
+"const symbols={ArrowUp:'\u2191',ArrowDown:'\u2193',ArrowLeft:'\u2190',ArrowRight:'\u2192',Backspace:'Bksp',"
+"Delete:'Del',Escape:'Esc',PageUp:'PgUp',PageDown:'PgDn'};"
+"$('keys').replaceChildren(...s.keys.map(k=>el('span',{},el('kbd',{textContent:symbols[k.key]?\?k.key.replace(/^(Key|Digit)/,'')}),"
+"k.input+'  ')))}"
 "$('prompt').onsubmit=e=>{e.preventDefault();const v=$('entry').value;if(v){$('entry').value='';post('/text',v)}};"
 "addEventListener('keydown',e=>{if(!screen||e.ctrlKey||e.metaKey||e.altKey)return;"
 "const typing=document.activeElement===$('entry');"