/home/rcfmro/www/chat.html
<!doctype html>
<html lang="ro">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>RCFM Chat</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="chat-wrap">
<h2>Chat Live RCFM</h2>
<div id="messages" style="height:50vh;overflow:auto;border:1px solid rgba(255,255,255,0.06);padding:8px;background:rgba(0,0,0,0.2)"></div>
<div style="display:flex;gap:8px;margin-top:8px">
<input id="nick" placeholder="Nume" style="flex:0 0 150px;padding:8px"/>
<input id="msg" placeholder="Scrie mesaj..." style="flex:1;padding:8px"/>
<button id="send">Trimite</button>
</div>
</div>
<script>
const url = 'api/chat.php';
const messages = document.getElementById('messages');
const nick = document.getElementById('nick');
const msg = document.getElementById('msg');
const send = document.getElementById('send');
function append(m){
const d = document.createElement('div');
d.innerHTML = `<strong>${m.user}:</strong> ${m.msg} <small style="opacity:.6">(${new Date(m.t*1000).toLocaleTimeString()})</small>`;
messages.appendChild(d);
messages.scrollTop = messages.scrollHeight;
}
async function loadAll(){
const r = await fetch(url);
const arr = await r.json();
messages.innerHTML='';
arr.forEach(append);
}
send.addEventListener('click', async ()=>{
const u = nick.value || 'Anon';
const t = msg.value.trim();
if(!t) return;
await fetch(url, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({user:u,msg:t})});
msg.value='';
loadAll();
});
setInterval(()=>{ fetch(url).then(r=>r.json()).then(arr=>{ messages.innerHTML=''; arr.forEach(append); }); }, 3000);
loadAll();
</script>
</body>
</html>
