gentelella
Version:
Gentelella v4 — free admin template. 60 pages, 20 chart variants, fully interactive inbox & kanban, live theme generator, component playground, PWA-ready. Vite 8, vanilla JS, no Bootstrap, no jQuery.
1 lines • 4.63 kB
JavaScript
import"./main-v4-BFwmMcfm.js";var e=[{id:1,name:"Sarah Kowalski",initials:"SK",color:"primary",preview:"Can you take a look at the design?",time:"4m",unread:2,online:!0},{id:2,name:"Michael Reyes",initials:"MR",color:"blue",preview:"Lunch tomorrow at noon?",time:"32m",unread:1,online:!0},{id:3,name:"Design Team",initials:"DT",color:"purple",preview:"Emily: Updated the timeline",time:"1h",unread:0,online:!1,group:!0},{id:4,name:"Emily Wang",initials:"EW",color:"yellow",preview:"Sprint retro notes posted",time:"2h",unread:0,online:!1},{id:5,name:"Diego Reyes",initials:"DR",color:"green",preview:"Customer feedback summary ready",time:"Mon",unread:0,online:!0},{id:6,name:"Mark Kim",initials:"MK",color:"red",preview:"PR #248 ready for review",time:"Mon",unread:0,online:!1},{id:7,name:"Lina Park",initials:"LP",color:"cyan",preview:"Campaign metrics for Q1",time:"Sun",unread:0,online:!1},{id:8,name:"Yuki Tanaka",initials:"YT",color:"azure",preview:"Translation files ready",time:"Fri",unread:0,online:!0}],t={primary:"var(--primary)",azure:"var(--azure)",blue:"var(--blue)",purple:"var(--purple)",yellow:"var(--yellow)",red:"var(--red)",green:"var(--green)",cyan:"var(--cyan)"},n={1:[{from:"them",text:"Hey! Just shared the latest design exploration in Figma — can you take a look?",time:"Today · 9:42"},{from:"them",text:"Specifically interested in your take on the dashboard density.",time:"Today · 9:42"},{from:"me",text:"On it — opening now.",time:"Today · 9:48"},{from:"me",text:"I think the stat cards are a bit dense at 768px. Want to try a 2-up layout there instead of 3?",time:"Today · 9:51"},{from:"them",text:"Yes good call. I'll push an update later today.",time:"Today · 9:53"},{from:"them",text:"Can you take a look at the design?",time:"Today · 11:14"}],2:[{from:"them",text:"Lunch tomorrow at noon?",time:"Today · 10:32"}],3:[{from:"them",text:"Emily: Updated the timeline based on the dependencies discussion",time:"Today · 8:30"},{from:"them",text:"Sarah: Looks good — I added the design review milestones",time:"Today · 8:45"}],4:[{from:"them",text:"Sprint retro notes posted in Notion",time:"Today · 7:20"}],5:[{from:"them",text:"Compiled the customer feedback summary — top 10 feature requests",time:"Mon · 16:00"},{from:"me",text:"Excellent, will read tonight.",time:"Mon · 17:12"}],6:[{from:"them",text:"PR #248 ready for review when you have a moment.",time:"Mon · 14:00"}],7:[{from:"them",text:"Q1 campaign metrics summary attached.",time:"Sun · 19:30"}],8:[{from:"them",text:"Translation files ready for the new locale.",time:"Fri · 15:45"}]},a=1;function i(){document.getElementById("chat-conversations").innerHTML=e.map(e=>`\n <button type="button" class="chat-conversation${e.id===a?" active":""}" data-id="${e.id}">\n <span class="av" style="background:${t[e.color]}">${e.initials}${e.online?'<span class="online"></span>':""}</span>\n <span class="info">\n <span class="row"><span class="name">${e.name}${e.group?" <small>(group)</small>":""}</span><span class="time">${e.time}</span></span>\n <span class="preview-row"><span class="preview">${e.preview}</span>${e.unread?`<span class="unread">${e.unread}</span>`:""}</span>\n </span>\n </button>\n `).join("")}function o(){const i=e.find(e=>e.id===a);if(!i)return;document.getElementById("thread-name").textContent=i.name;const o=document.getElementById("thread-avatar");o.textContent=i.initials,o.style.background=t[i.color];const r=i.online?"Online · last active 2m ago":"Offline";document.querySelector(".chat-thread-head .presence").innerHTML=`<span class="dot${i.online?"":" off"}"></span> ${r}`;const s=n[a]||[],m=document.getElementById("chat-messages");m.innerHTML=s.map(e=>`\n <div class="chat-bubble ${"me"===e.from?"mine":"theirs"}">\n <div class="bubble">${e.text}</div>\n <div class="meta">${e.time}</div>\n </div>\n `).join(""),m.scrollTop=m.scrollHeight}i(),o(),document.getElementById("chat-conversations").addEventListener("click",t=>{const n=t.target.closest(".chat-conversation");if(!n)return;a=parseInt(n.dataset.id,10);const r=e.find(e=>e.id===a);r&&(r.unread=0),i(),o()}),document.getElementById("chat-composer").addEventListener("submit",e=>{e.preventDefault(),e.stopPropagation();const t=document.getElementById("chat-input"),i=t.value.trim();if(!i)return;n[a]||(n[a]=[]);const r=new Date,s=`Today · ${String(r.getHours()).padStart(2,"0")}:${String(r.getMinutes()).padStart(2,"0")}`;n[a].push({from:"me",text:i,time:s}),t.value="",o(),setTimeout(()=>{a==a&&(n[a].push({from:"them",text:"Thanks — got it 👍",time:s}),o())},1400)});