<!doctype html><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" /><title>Cool Chat UI</title><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet"><style>:root{--bg-1:#0f1724;--bg-2:#071226;--glass:rgba(255,255,255,0.04);--accent:linear-gradient(135deg,#6ef0c1 0%,#7bd2ff 50%,#8b6bff 100%);--accent-2:#8b6bff;--muted:rgba(255,255,255,0.65);--success:#4ade80;--danger:#fb7185;--radius:14px;--shadow:0 6px 30px rgba(2,6,23,0.6);color-scheme:dark;}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;background:radial-gradient(1200px 600px at 10% 10%, rgba(123,210,255,0.07), transparent 8%),radial-gradient(800px 400px at 90% 90%, rgba(139,107,255,0.06), transparent 8%),linear-gradient(180deg,var(--bg-1),var(--bg-2));display:flex;align-items:center;justify-content:center;padding:28px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.chat--shell{width:1000px;max-width:100%;height:640px;border-radius:22px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:var(--shadow);display:grid;grid-template-columns:320px 1fr;overflow:hidden;border:1px solid rgba(255,255,255,0.03);}.sidebar{background:linear-gradient(180deg, rgba(255,255,255,0.015), transparent);padding:18px;display:flex;flex-direction:column;gap:12px;border-right:1px solid rgba(255,255,255,0.02);}.brand{display:flex;align-items:center;gap:12px;padding:6px 8px;}.logo{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:var(--accent);color:#03111a;font-weight:700;box-shadow:0 6px 18px rgba(139,107,255,0.12);font-size:18px}.brand h1{margin:0;font-size:16px;color:white}.brand p{margin:0;font-size:12px;color:var(--muted)}.search{display:flex;align-items:center;padding:8px;background:rgba(255,255,255,0.02);border-radius:12px;gap:8px;}.search input{background:transparent;border:0;outline:none;color:var(--muted);flex:1}.contacts{overflow:auto;padding-right:6px;display:flex;flex-direction:column;gap:8px}.contact{display:flex;gap:10px;align-items:center;padding:8px;border-radius:12px;cursor:pointer;transition:all .18s}.contact:hover{background:rgba(255,255,255,0.02);transform:translateY(-2px)}.avatar{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;font-weight:600}.meta{flex:1}.meta h4{margin:0;font-size:14px}.meta p{margin:0;font-size:12px;color:var(--muted)}.chat-area{display:flex;flex-direction:column;height:100%}.chat-header{display:flex;align-items:center;justify-content:space-between ;padding:18px;border-bottom:1px solid rgba(255,255,255,0.02)}.chat-header .left{display:flex;gap:12px;align-items:center}.status{font-size:12px;color:var(--muted)}.messages{flex:1;padding:22px;overflow:auto;display:flex;flex-direction:column;gap:12px}.message{max-width:68%;padding:12px 14px;border-radius:14px;line-height:1.3;font-size:14px;box-shadow:0 6px 20px rgba(3,6,23,0.4);position:relative}.message.me{align-self:flex-end;background:linear-gradient(90deg,#6ef0c1,#8b6bff);color:#02121a;border-bottom-right-radius:4px}.message.them{align-self:flex-start;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));color:var(--muted);border:1px solid rgba(255,255,255,0.02)}.message .time{font-size:11px;opacity:0.7;margin-top:6px;text-align:right}.message.me::after{content:'';position:absolute;right:-8px;bottom:6px;width:10px;height:10px;transform:rotate(45deg);background:linear-gradient(90deg,#6ef0c1,#8b6bff);border-bottom-right-radius:2px}.message.them::after{content:'';position:absolute;left:-8px;bottom:6px;width:10px;height:10px;transform:rotate(45deg);background:rgba(255,255,255,0.02)}.typing{display:flex;gap:6px;align-items:center}.dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.22);animation:blink 1s infinite alter-nate}.dot:nth-child(2){animation-delay:.15s}.dot:nth-child(3){animation-delay:.3s}@keyframes blink{from{transform:translateY(0);opacity:0.35}to{transform:translateY(-4px);opacity:1}}.composer{padding:14px;border-top:1px solid rgba(255,255,255,0.02);display:flex;gap:12px;align-items:center}.composer .input{flex:1;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);padding:10px 12px;border-radius:12px;display:flex;gap:8px;align-items:center}.composer input[type="text"]{background:transparent;border:0;outline:none;color:white;width:100%}.btn{background:var(--accent-2);border-radius:12px;padding:10px 14px;color:white;font-weight:600;border:0;cursor:pointer;box-shadow:0 6px 18px rgba(139,107,255,0.12)}@media (max-width:880px){.chat--shell{grid-template-columns:1fr;height:92vh}.sidebar{display:none}}.messages::-webkit-scrollbar,.contacts::-webkit-scrollbar{width:8px}.messages::-webkit-scrollbar-thumb,.contacts::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.04);border-radius:999px}</style></head><body><div class="chat--shell"><aside class="sidebar"><div class="brand"><div class="logo">C</div><div><h1>ChillChat</h1><p>Fast • Secure • Pretty</p></div></div><div class="search"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden><path d="M21 21l-4.35-4.35" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><circle cx="11" cy="11" r="6" stroke="currentColor" stroke-width="2"></circle></svg><input placeholder="Search or start a new chat" /></div><div class="contacts" id="contacts"><!-- contacts generated by JS --></div></aside><main class="chat-area"><div class="chat-header"><div class="left"><div class="avatar" style="background:linear-gradient(135deg,#7bd2ff,#6ef0c1);">A</div><div><div style="display:flex;gap:8px;align-items:center"><strong>Alex Morgan</strong><span class="status">Online</span></div><div class="status">Last seen 2h ago</div></div></div><div class="right"><button class="btn">New Chat</button></div></div><div class="messages" id="messages" aria-live="polite"><!-- messages added by JS --></div><div class="composer"><div class="input"><button title="emoji" aria-hidden>😊</button><input id="msgInput" type="text" placeholder="Write a message..." /></div><button id="sendBtn" class="btn">Send</button></div></main></div><script>// small demo datasetconst people = [{name:'Alex Morgan',id:1,avatar:'A',status:'Online',last:'2h ago'},{name:'Jordan Lee',id:2,avatar:'J',status:'Away',last:'1d'},{name:'Samira',id:3,avatar:'S',status:'Online',last:'5m'},{name:'Dev Team',id:4,avatar:'DT',status:'Offline',last:'3d'},];const contactsEl = document.getElementById('contacts');const messagesEl = document.getElementById('messages');function el(tag, cls, txt){const e=document.createElement(tag);if(cls)e.className=cls;if(txt)e.textContent=txt;return e}people.forEach(p=>{const c = el('div','contact');const av = el('div','avatar',p.avatar);av.style.background = 'linear-gradient(135deg,#'+Math.floor(Math.random()*16777215).toString(16)+', #8b6bff)';const meta = el('div','meta');meta.appendChild(el('h4',-null,p.name));meta.appendChild(el('p',-null,p.last+' • '+p.status));c.appendChild(av);c.appendChild(meta);c.onclick = ()=>selectContact(p);contactsEl.appendChild(c);});// sample conversationconst sample = [{from:'them',text:'Hey — you around for a quick sync?','time':'09:12'},{from:'me',text:'On it. Give me 5 minutes.' ,time:'09:13'},{from:'them',text:'Cool. Also — did you check the new UI mockups?',time:'09:14'},{from:'me',text:'Yes — I liked the color palette. We can tweak spacing.',time:'09:15'}];function renderMessages(convo){messagesEl.innerHTML='';convo.forEach(m=>{const msg = el('div','message '+(m.from==='me'?'me':'them'));msg.innerHTML = <div class="txt">${escapeHtml(m.text)}</div><div class="time">${m.time}</div>;messagesEl.appendChild(msg);});messagesEl.scrollTop = messagesEl.scrollHeight;}function selectContact(p){// simple header updatedocument.querySelector('.chat-header .avatar').textContent = p.avatar;document.querySelector('.chat-header strong').textContent = p.name;document.querySelector('.chat-header .status').textContent = p.status;// render sample (in a real app you'd load messages for this contact)renderMessages(sample);}function escapeHtml(str){return str.replace(/[&<>"']/g, function(c){return{'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":"&#39;"}[c];});}// send message demodocument.getElementById('sendBtn').addEventListener('click',sendMsg);document.getElementById('msgInput').addEventListener('keydown', e=>{if(e.key==='Enter') sendMsg()});function sendMsg(){const input = document.getElementById('msgInput');const v = input.value.trim();if(!v) return;sample.push({from:'me',text:v,time:new Date().toLocaleTimeString([],{hour:'2-digit', minute:'2-digit'})});renderMessages(sample);input.value='';// fake replysetTimeout(()=>{sample.push({from:'them',text:'Nice — got it!','time':new Date().toLocaleTimeString([],{hour:'2-digit', minute:'2-digit'})});renderMessages(sample);},900);}// initialize with first contactselectContact(people[0]);</script></body></html>