| <!doctype html><html lang='en'><head><meta charset='utf-8'/><meta name='viewport' content='width=device-width,initial-scale=1'/><title>Storefront Chat</title><style>body{font-family:system-ui,Arial;margin:0;background:#0b0d12;color:#e5e7eb}.wrap{max-width:920px;margin:32px auto;padding:0 16px}.card{background:#0f172a;border:1px solid #1f2940;border-radius:16px;padding:16px}.row{display:flex;gap:8px;align-items:center}input[type=text]{flex:1;padding:12px;border-radius:12px;border:1px solid #1f2940;background:#111827;color:#e5e7eb}button{padding:10px 14px;border-radius:12px;border:1px solid #31405a;background:#1f2937;color:#e5e7eb;cursor:pointer}.log{display:grid;gap:10px;margin-top:12px}.bubble{max-width:80%;padding:12px;border-radius:14px;line-height:1.35}.me{background:#1e293b;border:1px solid #2b3b55;margin-left:auto}.bot{background:#0d1b2a;border:1px solid #223049;margin-right:auto}.small{font-size:12px;opacity:.85}</style></head><body><div class='wrap'><h2>Storefront Chat</h2><div class='card'><div class='row'><input id='msg' type='text' placeholder='Ask about cap & gown or parking...'/><button id='send'>Send</button></div><div class='row small'>Backend: <input id='base' type='text' value='http://127.0.0.1:8000' style='width:320px'/></div><div id='log' class='log'></div></div></div><script>const $=s=>document.querySelector(s);const chat=$('#log');function add(t,w){const d=document.createElement('div');d.className='bubble '+w;d.textContent=t;chat.appendChild(d);chat.scrollTop=chat.scrollHeight;}async function send(){const base=$('#base').value.replace(/\/$/,'');const t=$('#msg').value.trim();if(!t)return;$('#msg').value='';add(t,'me');try{const r=await fetch(base+'/chatbot/message',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({message:t})});const j=await r.json();add((j.reply||JSON.stringify(j)),'bot');}catch(e){add('Error: '+(e.message||e),'bot');}}</script><script>document.getElementById('send').onclick=send;document.getElementById('msg').addEventListener('keydown',e=>{if(e.key==='Enter')send();});</script></body></html> |
