8c3ecc02c8
web/index.html: Browser chat interface (48 lines, dark theme) README.md: Architecture, API reference, quick start, crisis protocol
49 lines
3.7 KiB
HTML
49 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>MUD Bridge</title>
|
|
<style>
|
|
*{box-sizing:border-box;margin:0;padding:0}
|
|
body{font-family:'Courier New',monospace;background:#1a1a2e;color:#e0e0e0;display:flex;height:100vh}
|
|
#sidebar{width:220px;background:#16213e;padding:16px;display:flex;flex-direction:column;gap:12px;border-right:1px solid #0f3460}
|
|
#sidebar h2{color:#e94560;font-size:16px}
|
|
#sidebar label{font-size:12px;color:#a0a0a0}
|
|
#sidebar input,#sidebar select{background:#0f3460;color:#e0e0e0;border:1px solid #533483;padding:8px;font-family:inherit;font-size:13px;border-radius:4px}
|
|
#main{flex:1;display:flex;flex-direction:column}
|
|
#room-header{background:#16213e;padding:12px 16px;border-bottom:1px solid #0f3460;font-size:14px;color:#e94560}
|
|
#messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}
|
|
.msg{padding:8px 12px;border-radius:6px;max-width:80%;font-size:13px;line-height:1.4}
|
|
.msg.user{background:#533483;align-self:flex-end;text-align:right}
|
|
.msg.system{background:#0f3460;align-self:center;text-align:center;color:#a0a0a0;font-size:11px;max-width:100%}
|
|
.msg.bot{background:#1a3a5c;align-self:flex-start}
|
|
.msg .nick{font-weight:bold;font-size:11px;margin-bottom:2px}
|
|
.msg.user .nick{color:#c8a0e8}.msg.bot .nick{color:#e94560}
|
|
#input-bar{display:flex;padding:12px;gap:8px;background:#16213e;border-top:1px solid #0f3460}
|
|
#msg-input{flex:1;background:#0f3460;color:#e0e0e0;border:1px solid #533483;padding:10px;font-family:inherit;font-size:13px;border-radius:4px}
|
|
#send-btn{background:#e94560;color:#fff;border:none;padding:10px 20px;font-family:inherit;font-size:13px;cursor:pointer;border-radius:4px}
|
|
#send-btn:hover{background:#c73e54}#send-btn:disabled{background:#666;cursor:not-allowed}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="sidebar">
|
|
<h2>== MUD Bridge ==</h2>
|
|
<label>Username</label><input id="username" placeholder="Your name" value="Adventurer">
|
|
<label>Room</label>
|
|
<select id="room"><option>The Tower</option><option>The Garden</option><option>The Forge</option><option>The Bridge</option><option>The Threshold</option></select>
|
|
</div>
|
|
<div id="main">
|
|
<div id="room-header">Room: <span id="room-name">The Tower</span></div>
|
|
<div id="messages"><div class="msg system">Welcome to the MUD Bridge.</div></div>
|
|
<div id="input-bar"><input id="msg-input" placeholder="Say something..." autocomplete="off"><button id="send-btn">Send</button></div>
|
|
</div>
|
|
<script>
|
|
const $=id=>document.getElementById(id),messages=$('messages'),input=$('msg-input'),btn=$('send-btn'),API='http://127.0.0.1:4004/bridge/chat';
|
|
$('room').onchange=()=>{$('room-name').textContent=$('room').value;addMsg('system','','--- Entered '+$('room').value+' ---')};
|
|
function addMsg(t,nick,text){const d=document.createElement('div');d.className='msg '+t;const e=document.createElement('span');e.textContent=text;const safe=e.innerHTML;e.textContent=nick;d.innerHTML=nick?'<div class="nick">'+e.innerHTML+'</div>'+safe:safe;messages.appendChild(d);messages.scrollTop=messages.scrollHeight}
|
|
async function send(){const text=input.value.trim();if(!text)return;const username=$('username').value.trim()||'Adventurer',room=$('room').value;addMsg('user',username,text);input.value='';btn.disabled=true;btn.textContent='...';try{const r=await fetch(API,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({username,room,message:text})});const d=await r.json();addMsg('bot','Timmy',d.response||d.message||JSON.stringify(d))}catch(e){addMsg('system','','Error: '+e.message)}finally{btn.disabled=false;btn.textContent='Send';input.focus()}}
|
|
btn.onclick=send;input.onkeydown=e=>{if(e.key==='Enter')send()};input.focus();
|
|
</script>
|
|
</body>
|
|
</html>
|