  <head><meta charset=&quot;utf-8&quot; /><meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /><title>People 404™ Interactive Demo</title>
<style>
:root{--navy:#012564;--gold:#AB8834;--bronze:#9D7515;--slate:#5C6B8A;--ink:#0f172a;--bg:#f8fafc}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink)}
.wrap{max-width:1200px;margin:0 auto;padding:24px}
h1{margin:0 0 4px;font-size:clamp(20px,2.6vw,32px);font-weight:800}
p.lead{margin:0 0 16px;color:#64748b;font-size:14px}
.controls{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 16px}
select{padding:10px 12px;border:1px solid #cbd5e1;border-radius:12px;background:#fff}
.grid{display:grid;gap:16px}
@media(min-width:768px){.grid.cols-4{grid-template-columns:repeat(4,1fr)}.grid.cols-3{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card .body{padding:16px}
.kpi .label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#64748b}
.kpi .value{font-size:26px;font-weight:700;margin-top:4px;display:flex;align-items:baseline;gap:8px}
.trend{font-size:12px}.up{color:#059669}.down{color:#dc2626}.flat{color:#64748b}
canvas{width:100% !important;height:280px !important}
footer{margin-top:24px;text-align:center;color:#94a3b8;font-size:12px}
</style>
</head><body>
<div class=&quot;wrap&quot;>
  <h1>People 404™ Interactive Demo</h1>
  <p class=&quot;lead&quot;>Dropdowns for Scope &amp; Scenario. Live charts. No build tools.</p>

  <div class=&quot;controls&quot;>
    <select id=&quot;scopeSel&quot;><option>Mezzo</option><option>Micro</option><option>Macro</option></select>
    <select id=&quot;scenarioSel&quot;><option>None</option><option>CEO Change</option><option>Supply Chain</option><option>Cyber</option><option>Pandemic</option></select>
  </div>

  <!-- KPI Row -->
  <div class=&quot;grid cols-4&quot;>
    <div class=&quot;card kpi&quot;><div class=&quot;body&quot;><div class=&quot;label&quot;>Headcount</div><div class=&quot;value&quot;><span id=&quot;kpiHeadcount&quot;>—</span><span id=&quot;kpiHeadcountTrend&quot; class=&quot;trend flat&quot;>—</span></div></div></div>
    <div class=&quot;card kpi&quot;><div class=&quot;body&quot;><div class=&quot;label&quot;>Turnover Rate</div><div class=&quot;value&quot;><span id=&quot;kpiTurnover&quot;>—</span><span id=&quot;kpiTurnoverTrend&quot; class=&quot;trend flat&quot;>—</span></div></div></div>
    <div class=&quot;card kpi&quot;><div class=&quot;body&quot;><div class=&quot;label&quot;>Time to Fill</div><div class=&quot;value&quot;><span id=&quot;kpiTTF&quot;>—</span><span id=&quot;kpiTTFTrend&quot; class=&quot;trend flat&quot;>—</span></div></div></div>
    <div class=&quot;card kpi&quot;><div class=&quot;body&quot;><div class=&quot;label&quot;>People 404 VPI</div><div class=&quot;value&quot;><span id=&quot;kpiVPI&quot;>—</span><span id=&quot;kpiVPITrend&quot; class=&quot;trend flat&quot;>—</span></div></div></div>
  </div>

  <!-- Charts -->
  <div class=&quot;grid cols-3&quot; style=&quot;margin-top:16px;&quot;>
    <div class=&quot;card&quot;><div class=&quot;body&quot;><div class=&quot;label&quot; style=&quot;margin-bottom:8px&quot;>Composite Health: VPI vs Engagement</div><canvas id=&quot;chartVPI&quot;></canvas></div></div>
    <div class=&quot;card&quot;><div class=&quot;body&quot;><div class=&quot;label&quot; style=&quot;margin-bottom:8px&quot;>Hires vs Exits</div><canvas id=&quot;chartHX&quot;></canvas></div></div>
    <div class=&quot;card&quot;><div class=&quot;body&quot;><div class=&quot;label&quot; style=&quot;margin-bottom:8px&quot;>Time to Fill &amp; Cost per Hire</div><canvas id=&quot;chartTTF&quot;></canvas></div></div>
  </div>

  <footer>People 404™ • Demo • Replace sample data later with live connectors.</footer>
</div>

<!-- Chart.js from CDN -->
<script src=&quot;https://cdn.jsdelivr.net/npm/chart.js&quot;></script>
<script>
  const months = [&quot;Jan&quot;,&quot;Feb&quot;,&quot;Mar&quot;,&quot;Apr&quot;,&quot;May&quot;,&quot;Jun&quot;,&quot;Jul&quot;,&quot;Aug&quot;,&quot;Sep&quot;,&quot;Oct&quot;,&quot;Nov&quot;,&quot;Dec&quot;];
  const base = months.map((m,i)=>({
    month: m,
    headcount: 900 + Math.round(Math.sin(i/1.5)*40) + i*2,
    hires: 45 + (i%4)*5,
    exits: 30 + (i%3)*4,
    turnoverRate: 2.0 + (i%5)*0.2,
    timeToFill: 42 - i + (i%3)*2,
    vpi: 62 + (i%7)*2 - (i>8?3:0),
    engagement: 68 + (i%5)*2,
    costPerHire: 3900 + i*75
  }));

  function applyScope(r, scope){
    const x = { ...r };
    if (scope === &quot;Micro&quot;) { x.turnoverRate *= 1.1; x.engagement -= 2; }
    if (scope === &quot;Macro&quot;) { x.vpi -= 1; }
    return x;
  }
  function applyScenario(r, scenario, idx){
    const x = { ...r };
    if (scenario === &quot;CEO Change&quot;) { if (idx>=4 && idx<=8) x.vpi -= 3; x.turnoverRate *= 1.15; }
    if (scenario === &quot;Supply Chain&quot;) { x.timeToFill += 5; x.costPerHire += 400; }
    if (scenario === &quot;Cyber&quot;) { x.engagement -= 3; }
    if (scenario === &quot;Pandemic&quot;) { x.exits += 10; x.timeToFill += 3; }
    return x;
  }
  function series(scope, scenario){ return base.map((r,i)=>applyScenario(applyScope(r, scope), scenario, i)); }

  function pct(a,b){ if(b===0) return 0; return Math.round(((a-b)/b)*100); }
  function setTrend(el, val){
    el.textContent = (val>0?&quot;▲ &quot;:val<0?&quot;▼ &quot;:&quot;&quot;) + Math.abs(val) + &quot;%&quot;;
    el.className = &quot;trend &quot; + (val>0?&quot;up&quot;:val<0?&quot;down&quot;:&quot;flat&quot;);
  }

  const scopeSel = document.getElementById(&quot;scopeSel&quot;);
  const scenarioSel = document.getElementById(&quot;scenarioSel&quot;);

  const kHead = document.getElementById(&quot;kpiHeadcount&quot;);
  const kTurn = document.getElementById(&quot;kpiTurnover&quot;);
  const kTTF = document.getElementById(&quot;kpiTTF&quot;);
  const kVPI = document.getElementById(&quot;kpiVPI&quot;);

  const ctx1 = document.getElementById(&quot;chartVPI&quot;);
  const ctx2 = document.getElementById(&quot;chartHX&quot;);
  const ctx3 = document.getElementById(&quot;chartTTF&quot;);

  const ch1 = new Chart(ctx1, {
    type: &quot;line&quot;,
    data: { labels: months, datasets: [
      { label: &quot;VPI&quot;, data: [], borderColor: &quot;#012564&quot;, backgroundColor: &quot;rgba(1,37,100,0.15)&quot;, fill: true, tension: .35 },
      { label: &quot;Engagement&quot;, data: [], borderColor: &quot;#AB8834&quot;, tension: .35 }
    ]},
    options: { plugins:{ legend:{ position:&quot;bottom&quot; } } }
  });

  const ch2 = new Chart(ctx2, {
    type: &quot;bar&quot;,
    data: { labels: months, datasets: [
      { label: &quot;Hires&quot;, data: [], backgroundColor: &quot;#9D7515&quot; },
      { label: &quot;Exits&quot;, data: [], backgroundColor: &quot;#5C6B8A&quot; }
    ]},
    options: { plugins:{ legend:{ position:&quot;bottom&quot; } }, scales:{ y:{ beginAtZero:true } } }
  });

  const ch3 = new Chart(ctx3, {
    type: &quot;line&quot;,
    data: { labels: months, datasets: [
      { label: &quot;Time to Fill (d)&quot;, data: [], borderColor: &quot;#012564&quot;, tension: .35 },
      { label: &quot;Cost per Hire ($)&quot;, data: [], borderColor: &quot;#AB8834&quot;, tension: .35 }
    ]},
    options: { plugins:{ legend:{ position:&quot;bottom&quot; } } }
  });

  function refresh(){
    const rows = series(scopeSel.value, scenarioSel.value);
    const latest = rows[rows.length-1];
    const prev = rows[rows.length-2] || latest;

    kHead.textContent = latest.headcount;
    kTurn.textContent = latest.turnoverRate.toFixed(1) + &quot;%&quot;;
    kTTF.textContent = latest.timeToFill + &quot; d&quot;;
    kVPI.textContent = latest.vpi;

    setTrend(document.getElementById(&quot;kpiHeadcountTrend&quot;), pct(latest.headcount, prev.headcount));
    setTrend(document.getElementById(&quot;kpiTurnoverTrend&quot;), pct(latest.turnoverRate, prev.turnoverRate));
    setTrend(document.getElementById(&quot;kpiTTFTrend&quot;), pct(latest.timeToFill, prev.timeToFill));
    setTrend(document.getElementById(&quot;kpiVPITrend&quot;), pct(latest.vpi, prev.vpi));

    ch1.data.datasets[0].data = rows.map(r=>r.vpi);
    ch1.data.datasets[1].data = rows.map(r=>r.engagement);
    ch1.update();

    ch2.data.datasets[0].data = rows.map(r=>r.hires);
    ch2.data.datasets[1].data = rows.map(r=>r.exits);
    ch2.update();

    ch3.data.datasets[0].data = rows.map(r=>r.timeToFill);
    ch3.data.datasets[1].data = rows.map(r=>r.costPerHire);
    ch3.update();
  }

  scopeSel.addEventListener(&quot;change&quot;, refresh);
  scenarioSel.addEventListener(&quot;change&quot;, refresh);
  refresh();
</script>
</body></html>">
  
Call Us Today! (774) 312-0752

info@sustinericonsulting.com

Government Contracting Info

Areas We Service

Northeast Regional Division

Southeast Regional District

Continental Regional Division

Our Partners
