DataGate AI Content Intelligence Dashboard

*{box-sizing:border-box;margin:0;padding:0}
:root{–bg:#0f172a;–card:#1e293b;–accent:#3b82f6;–accent2:#8b5cf6;–green:#10b981;–yellow:#f59e0b;–red:#ef4444;–text:#e2e8f0;–muted:#94a3b8}
body{font-family:’Segoe UI‘,system-ui,sans-serif;background:var(–bg);color:var(–text);padding:16px;line-height:1.6}
.header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.header h1{font-size:1.5rem;background:linear-gradient(90deg,var(–accent),var(–accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.header .badge{background:linear-gradient(135deg,var(–accent),var(–accent2));color:#fff;padding:4px 12px;border-radius:20px;font-size:.75rem;font-weight:600}
.tabs{display:flex;gap:4px;margin-bottom:16px;flex-wrap:wrap}
.tab{padding:8px 16px;border-radius:8px;background:var(–card);border:1px solid #334155;color:var(–muted);cursor:pointer;font-size:.85rem;transition:all .2s}
.tab.active{background:linear-gradient(135deg,var(–accent),var(–accent2));color:#fff;border-color:transparent}
.tab:hover:not(.active){border-color:var(–accent);color:var(–text)}
.panel{display:none}
.panel.active{display:block}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:700px){.grid2,.grid3{grid-template-columns:1fr}}
.card{background:var(–card);border-radius:12px;padding:14px;border:1px solid #334155}
.card h3{font-size:.85rem;color:var(–muted);margin-bottom:10px}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px;margin-bottom:12px}
.stat{background:#1a2234;border-radius:8px;padding:10px;text-align:center}
.stat .val{font-size:1.5rem;font-weight:700;background:linear-gradient(90deg,var(–accent),var(–accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.stat .lbl{font-size:.7rem;color:var(–muted)}
canvas{width:100%!important;height:180px!important}

function showPanel(n){
document.querySelectorAll(‚.tab‘).forEach((t,i)=>t.classList.toggle(‚active‘,i===n));
document.querySelectorAll(‚.panel‘).forEach((p,i)=>p.classList.toggle(‚active‘,i===n));
setTimeout(()=>window.dispatchEvent(new Event(‚resize‘)),50);
}

function lineChart(id,data,labels,color){
const c=document.getElementById(id);if(!c)return;
const ctx=c.getContext(‚d‘);
const W=c.offsetWidth||300,H=180;
c.width=W;c.height=H;
const p=25,x0=p,y0=H-p,x1=W-p,y1=p;
const maxY=Math.max(…data);
ctx.clearRect(0,0,W,H);
ctx.strokeStyle=’#334155′;
for(let i=0;i{const x=x0+(x1-x0)*i/(data.length-1);const y=y0-(y0-y1)*d/maxY;i===0?ctx.moveTo(x,y):ctx.lineTo(x,y);});
ctx.stroke();
data.forEach((d,i)=>{const x=x0+(x1-x0)*i/(data.length-1);const y=y0-(y0-y1)*d/maxY;ctx.beginPath();ctx.arc(x,y,3,0,Math.PI*2);ctx.fillStyle=color;ctx.fill();});
}

function doughnut(id,data){
const c=document.getElementById(id);if(!c)return;
const ctx=c.getContext(‚2d‘);
const W=c.offsetWidth||300,H=180;
c.width=W;c.height=H;
const cx=W/2,cy=H/2,r=60,ir=35;
const colors=[‚#3b82f6′,’#8b5cf6′,’#10b981′,’#f59e0b‘];
let a=-Math.PI/2;const total=data.reduce((s,x)=>s+x.v,0);
data.forEach((d,i)=>{const sw=d.v/total*Math.PI*2;ctx.beginPath();ctx.arc(cx,cy,r,a,a+sw);ctx.arc(cx,cy,ir,a+sw,a,true);ctx.closePath();ctx.fillStyle=colors[i];ctx.fill();a+=sw;});
ctx.fillStyle=’#e2e8f0′;ctx.font=’bold 18px system-ui‘;ctx.textAlign=’center‘;ctx.fillText(total+’%‘,cx,cy+6);
}

function radar(id,data,labels){
const c=document.getElementById(id);if(!c)return;
const ctx=c.getContext(‚2d‘);
const W=c.offsetWidth||300,H=180;
c.width=W;c.height=H;
const cx=W/2,cy=H/2,r=65;const n=data.length;
ctx.clearRect(0,0,W,H);
for(let l=1;l<=4;l++){ctx.beginPath();ctx.strokeStyle='#334155';ctx.lineWidth=0.5;for(let i=0;i<n;i++){const a1=Math.PI*2*i/n-Math.PI/2;const a2=Math.PI*2*((i+1)%n)/n-Math.PI/2;const r1=r*l/4;ctx.moveTo(cx+Math.cos(a1)*r1,cy+Math.sin(a1)*r1);ctx.lineTo(cx+Math.cos(a2)*r1,cy+Math.sin(a2)*r1);}ctx.stroke();}
for(let i=0;i{const a=Math.PI*2*i/n-Math.PI/2;const rv=d/100*r;i===0?ctx.moveTo(cx+Math.cos(a)*rv,cy+Math.sin(a)*rv):ctx.lineTo(cx+Math.cos(a)*rv,cy+Math.sin(a)*rv);});ctx.closePath();ctx.fillStyle=’rgba(59,130,246,.2)‘;ctx.fill();ctx.strokeStyle=’#3b82f6′;ctx.lineWidth=1.5;ctx.stroke();
}

function hBar(id,bars){
const c=document.getElementById(id);if(!c)return;
const ctx=c.getContext(‚2d‘);
const W=c.offsetWidth||300,H=180;
c.width=W;c.height=H;
const bh=18,sy=5,maxV=100,lp=85,rp=10;
bars.forEach((b,i)=>{
const y=sy+i*(bh+6);
ctx.fillStyle=’#94a3b8′;ctx.font=’10px system-ui‘;ctx.textAlign=’right‘;ctx.fillText(b.l,lp-6,y+13);
ctx.fillStyle=’#334155′;ctx.beginPath();ctx.roundRect(lp,y,W-lp-rp,bh,[3]);ctx.fill();
ctx.fillStyle=b.c||’#3b82f6′;const w=(W-lp-rp-4)*b.v/100;
if(w>0){ctx.beginPath();ctx.roundRect(lp+2,y+2,w,bh-4,[2]);ctx.fill();}
ctx.fillStyle=’#e2e8f0′;ctx.font=’9px system-ui‘;ctx.textAlign=’left‘;ctx.fillText(b.v+’%‘,lp+w+4,y+13);
});
}

// Performance
lineChart(‚cPerf1′,[3,4,5,4,6,4,3,5,4,5],’W142,W143,W144,W145,W146,W147,W148,W149,W150,W151‘.split(‚,‘),’#3b82f6′);
doughnut(‚cPerf2′,[{l:’Organic‘,v:35},{l:’Direct‘,v:25},{l:’Social‘,v:20},{l:’Referral‘,v:12},{l:’Email‘,v:8}]);
lineChart(‚cAio1′,[3,4,5,4,6,4,3,5,4,5],’W142,W143,W144,W145,W146,W147,W148,W149,W150,W151‘.split(‚,‘),’#3b82f6′);

// Audience
doughnut(‚cAud1′,[{l:’AI Engineers‘,v:35},{l:’CTOs‘,v:28},{l:’Researchers‘,v:22},{l:’Students‘,v:15}]);
hBar(‚cAud2′,[{l:’Deep Guides‘,v:85,c:’#3b82f6′},{l:’Tools‘,v:72,c:’#8b5cf6′},{l:’Tutorials‘,v:68,c:’#10b981′},{l:’Analysis‘,v:55,c:’#f59e0b‘},{l:’News‘,v:38,c:’#ef4444′}]);
doughnut(‚cAio2′,[{l:’AI Engineers‘,v:35},{l:’CTOs‘,v:28},{l:’Researchers‘,v:22},{l:’Students‘,v:15}]);

// Trends
radar(‚cTrend1′,[92,78,85,64,71,88],’Agents,Security,Edge,Regulation,Multimodal,Agents‘.split(‚,‘));
lineChart(‚cTrend2′,[45,52,61,68,75,82],’Dec,Jan,Feb,Mar,Apr,May‘.split(‚,‘),’#8b5cf6′);
radar(‚cAio3′,[92,78,85,64,71,88],’Agents,Security,Edge,Regulation,Multimodal,Agents‘.split(‚,‘));