Upload index.html

index.html

@@ -436,7 +436,7 @@
 .inline-chart-card{border:1px solid #355374;border-radius:10px;background:linear-gradient(145deg,#132944,#102036);padding:12px;min-width:0}
 .inline-chart-card h4{font-size:12px;line-height:1.35;color:#e7f4ff;margin:0 0 10px;font-weight:750}
 .inline-chart-card h4 small{font-size:10px;font-weight:400;color:#a8bcd3}
-.inline-chart-svg{height:188px;background:#f8faff;border-radius:7px;padding:7px;overflow:hidden}
+.inline-chart-svg{height:188px;background:linear-gradient(180deg,#0f1f35,#0b1728);border:1px solid #294766;border-radius:7px;padding:7px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(120,171,220,.06)}
 .inline-chart-svg svg{display:block;width:100%;height:100%}
 .inline-chart-empty{border:1px dashed #385473;border-radius:9px;color:#9fb8d4;font-size:11px;line-height:1.5;padding:15px}
 .inline-chart-foot{color:#8eaaca;font-size:10px;line-height:1.4;margin-top:10px}
@@ -1159,31 +1159,39 @@ reply=function(q){
 // v0.8 — rapport wordt opgebouwd uit lokaal berekende, geaggregeerde testgegevens.
 // Er is geen LLM, er wordt niet geüpload en ontbrekende velden worden NIET ingevuld.
 const reportNL=n=>Number(n).toLocaleString('nl-NL');
-function reportChartBars(names,values,color='#7935cf',asWeek=false){
+function reportChartBars(names,values,color='#7935cf',asWeek=false,dark=false){
  const W=440,H=195,left=38,right=12,top=17,bottom=31,max=Math.max(1,...values);
- let out=`<svg viewBox="0 0 ${W} ${H}" width="100%" height="100%" role="img" aria-label="Staafgrafiek">`;
- for(let i=0;i<=4;i++){let y=top+(H-top-bottom)*i/4;out+=`<line x1="${left}" y1="${y}" x2="${W-right}" y2="${y}" stroke="#e6e8f2" stroke-width="1"/>`}
+ const gridColor=dark?'#2d4b67':'#e6e8f2';
+ const valueColor=dark?'#dff3ff':'#18116b';
+ const labelColor=dark?'#a8c7e5':'#1f2a56';
+ const bgRect=dark?`<rect x="0" y="0" width="${W}" height="${H}" rx="8" fill="#0c182a"/>`:'';
+ let out=`<svg viewBox="0 0 ${W} ${H}" width="100%" height="100%" role="img" aria-label="Staafgrafiek">${bgRect}`;
+ for(let i=0;i<=4;i++){let y=top+(H-top-bottom)*i/4;out+=`<line x1="${left}" y1="${y}" x2="${W-right}" y2="${y}" stroke="${gridColor}" stroke-width="1"/>`}
  const band=(W-left-right)/Math.max(1,names.length),bar=Math.min(38,band*.7);
  values.forEach((v,i)=>{const bh=(H-top-bottom-10)*v/max,x=left+band*i+(band-bar)/2,y=H-bottom-bh;
- out+=`<rect x="${x}" y="${y}" width="${bar}" height="${Math.max(bh,0)}" fill="${color}"/><text x="${x+bar/2}" y="${Math.max(10,y-5)}" text-anchor="middle" fill="#18116b" font-size="${asWeek?10:12}" font-weight="700">${v}</text><text x="${x+bar/2}" y="${H-11}" text-anchor="middle" fill="#1f2a56" font-size="${asWeek?8:11}">${escapeHTML(names[i])}</text>`});
+ out+=`<rect x="${x}" y="${y}" width="${bar}" height="${Math.max(bh,0)}" fill="${color}" rx="1.5"/><text x="${x+bar/2}" y="${Math.max(10,y-5)}" text-anchor="middle" fill="${valueColor}" font-size="${asWeek?10:12}" font-weight="700">${v}</text><text x="${x+bar/2}" y="${H-11}" text-anchor="middle" fill="${labelColor}" font-size="${asWeek?8:11}">${escapeHTML(names[i])}</text>`});
  return out+'</svg>';
 }
-function reportChartClientMonth(names,values){
+function reportChartClientMonth(names,values,dark=false){
  // Alleen presentatie: dezelfde berekende maandwaarden; iedere cliënt eenmaal per maand.
  const W=480,H=220,left=24,right=9,top=19,bottom=34;
  const max=Math.max(1,...values),span=H-top-bottom;
+ const gridColor=dark?'#2d4b67':'#e8e6f2';
+ const valueColor=dark?'#eee6ff':'#2e196e';
+ const labelColor=dark?'#c3b4ff':'#22285e';
+ const bgRect=dark?`<rect x="0" y="0" width="${W}" height="${H}" rx="8" fill="#0c182a"/>`:'';
  const band=(W-left-right)/Math.max(1,names.length),bar=Math.min(46,band*.82);
- let out=`<svg viewBox="0 0 ${W} ${H}" width="100%" height="100%" role="img" aria-label="Aantal unieke cliënten per maand">`;
+ let out=`<svg viewBox="0 0 ${W} ${H}" width="100%" height="100%" role="img" aria-label="Aantal unieke cliënten per maand">${bgRect}`;
  for(let i=0;i<=4;i++){
   const y=top+span*i/4;
-  out+=`<line x1="${left}" y1="${y}" x2="${W-right}" y2="${y}" stroke="#e8e6f2" stroke-width="1"/>`;
+  out+=`<line x1="${left}" y1="${y}" x2="${W-right}" y2="${y}" stroke="${gridColor}" stroke-width="1"/>`;
  }
  values.forEach((v,i)=>{
   const height=(span-15)*v/max;
   const x=left+band*i+(band-bar)/2,y=H-bottom-height;
   out+=`<rect x="${x}" y="${y}" width="${bar}" height="${Math.max(0,height)}" fill="#763fc7" rx="1.8"/>`;
-  out+=`<text x="${x+bar/2}" y="${Math.max(13,y-6)}" text-anchor="middle" fill="#2e196e" font-size="14" font-weight="800">${v}</text>`;
-  out+=`<text x="${x+bar/2}" y="${H-11}" text-anchor="middle" fill="#22285e" font-size="12" font-weight="600">${escapeHTML(names[i])}</text>`;
+  out+=`<text x="${x+bar/2}" y="${Math.max(13,y-6)}" text-anchor="middle" fill="${valueColor}" font-size="14" font-weight="800">${v}</text>`;
+  out+=`<text x="${x+bar/2}" y="${H-11}" text-anchor="middle" fill="${labelColor}" font-size="12" font-weight="600">${escapeHTML(names[i])}</text>`;
  });
  return out+'</svg>';
 }
@@ -1205,9 +1213,9 @@ function renderInlineReportCharts(){
  if(!data){host.innerHTML='<div class="inline-chart-empty">Analyseer eerst een Excelbestand om de bestaande rapportagegrafieken te zien.</div>';return;}
  const labels=data.months.map(m=>m.label);
  const specs=[
-  ['Nieuwe instroom per maand','Eerste geregistreerde scan op locatie',reportChartBars(labels,data.months.map(m=>m.newIntake),'#288e28')],
-  ['Bezoekdagen per weekdag','Unieke cliënt-/locatie-/bezoekdagen',reportChartBars(['Ma','Di','Wo','Do','Vr','Za','Zo'],data.byWeek,'#ff6410',true)],
-  ['Aantal cliënten per maand','Iedere cliënt maximaal één keer per maand',reportChartClientMonth(labels,data.months.map(m=>m.clients))]
+  ['Nieuwe instroom per maand','Eerste geregistreerde scan op locatie',reportChartBars(labels,data.months.map(m=>m.newIntake),'#63d219',false,true)],
+  ['Bezoekdagen per weekdag','Unieke cliënt-/locatie-/bezoekdagen',reportChartBars(['Ma','Di','Wo','Do','Vr','Za','Zo'],data.byWeek,'#ff7a10',true,true)],
+  ['Aantal cliënten per maand','Iedere cliënt maximaal één keer per maand',reportChartClientMonth(labels,data.months.map(m=>m.clients),true)]
  ];
  host.innerHTML=specs.map(([title,description,svg])=>`<section class="inline-chart-card"><h4>${title} <small>· ${description}</small></h4><div class="inline-chart-svg">${svg}</div></section>`).join('')+
  '<div class="inline-chart-foot">Dezelfde gegevens en grafieken als in de witte Reakt-monitor. Alleen lokale Excelanalyse · niet extern gevalideerd.</div>';