AI Compliance Framework Selector: NIST vs EU AI Act vs ISO 42001

*{margin:0;padding:0;box-sizing:border-box}
:root{–bg:#0f172a;–card:#1e293b;–accent:#3b82f6;–accent2:#8b5cf6;–text:#e2e8f0;–muted:#94a3b8;–success:#22c55e;–warning:#f59e0b;–danger:#ef4444}
body{font-family:’Segoe UI‘,system-ui,-apple-system,sans-serif;background:var(–bg);color:var(–text);min-height:1000px;line-height:1.6}
.header{background:linear-gradient(135deg,#1e3a5f 0%,#0f172a 100%);padding:40px 20px;text-align:center;border-bottom:1px solid #334155}
.header h1{font-size:2em;background:linear-gradient(90deg,var(–accent),var(–accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px}
.header p{color:var(–muted);max-width:600px;margin:0 auto}
.container{max-width:900px;margin:0 auto;padding:30px 20px}
.step{background:var(–card);border:1px solid #334155;border-radius:12px;padding:24px;margin-bottom:20px;display:none}
.step.active{display:block}
.step h2{font-size:1.3em;margin-bottom:16px;color:var(–accent)}
.step p{color:var(–muted);margin-bottom:16px}
label{display:block;font-weight:600;margin-bottom:8px;color:var(–text)}
select,input{width:100%;padding:12px 16px;background:#0f172a;border:1px solid #475569;border-radius:8px;color:var(–text);font-size:1em;margin-bottom:16px}
select:focus,input:focus{outline:none;border-color:var(–accent);box-shadow:0 0 0 3px rgba(59,130,246,.2)}
.options-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:16px}
.option{background:#0f172a;border:2px solid #475569;border-radius:10px;padding:16px;cursor:pointer;transition:all .2s;text-align:center}
.option:hover{border-color:var(–accent);background:#1e3a5f}
.option.selected{border-color:var(–accent);background:rgba(59,130,246,.15)}
.option .icon{font-size:2em;margin-bottom:8px}
.option .label{font-weight:600;font-size:.95em}
.option .desc{font-size:.8em;color:var(–muted);margin-top:4px}
.btn{display:inline-block;padding:12px 28px;background:linear-gradient(135deg,var(–accent),var(–accent2));color:#fff;border:none;border-radius:8px;font-size:1em;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(59,130,246,.4)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-secondary{background:transparent;border:1px solid #475569;color:var(–text);margin-right:12px}
.btn-secondary:hover{background:#1e293b}
.nav-btns{display:flex;justify-content:space-between;margin-top:20px}
.progress-bar{display:flex;gap:8px;margin-bottom:24px;justify-content:center}
.progress-dot{width:12px;height:12px;border-radius:50%;background:#334155;transition:all .3s}
.progress-dot.active{background:var(–accent);box-shadow:0 0 8px var(–accent)}
.progress-dot.done{background:var(–success)}
.result-card{background:linear-gradient(135deg,rgba(59,130,246,.1),rgba(139,92,246,.1));border:1px solid var(–accent);border-radius:12px;padding:28px;margin-top:20px}
.result-card h3{font-size:1.4em;margin-bottom:12px;background:linear-gradient(90deg,var(–accent),var(–accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.result-card .score{display:flex;gap:20px;margin:16px 0;flex-wrap:wrap}
.score-item{background:var(–card);border-radius:8px;padding:12px 20px;text-align:center;flex:1;min-width:120px}
.score-item .value{font-size:1.8em;font-weight:700;color:var(–accent)}
.score-item .label{font-size:.8em;color:var(–muted)}
.framework-comparison{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-top:16px}
.framework-card{background:var(–card);border:1px solid #334155;border-radius:10px;padding:20px}
.framework-card.recommended{border-color:var(–success);box-shadow:0 0 20px rgba(34,197,94,.15)}
.framework-card h4{margin-bottom:8px;display:flex;align-items:center;gap:8px}
.framework-card .badge{background:var(–success);color:#fff;font-size:.7em;padding:2px 8px;border-radius:4px}
.framework-card .score-bar{height:6px;background:#334155;border-radius:3px;margin:8px 0;overflow:hidden}
.framework-card .score-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(–accent),var(–accent2))}
.framework-card ul{list-style:none;padding:0;margin-top:12px}
.framework-card ul li{padding:4px 0;font-size:.9em;color:var(–muted)}
.framework-card ul li::before{content:“✓ „;color:var(–success)}
.framework-card ul li.negative::before{content:“✗ „;color:var(–danger)}
.recommendation{background:rgba(34,197,94,.1);border:1px solid var(–success);border-radius:8px;padding:16px;margin-top:16px}
.recommendation h4{color:var(–success);margin-bottom:8px}
.tag{display:inline-block;padding:4px 12px;background:rgba(59,130,246,.2);border-radius:20px;font-size:.85em;margin:4px}

let answers={regions:[],industry:“,size:“,risk:“};
let currentStep=1;
const totalSteps=4;

function initProgress(){
const bar=document.getElementById(‚progressBar‘);
bar.innerHTML=“;
for(let i=1;i<=totalSteps;i++){
const dot=document.createElement('div');
dot.className='progress-dot'+(i===1?' active':'');
dot.id='dot'+i;
bar.appendChild(dot);
}
}

function updateProgress(step){
for(let i=1;i<=totalSteps;i++){
const dot=document.getElementById('dot'+i);
dot.className='progress-dot'+(ir!==val);
else answers.regions.push(val);
document.getElementById(‚btn1‘).disabled=answers.regions.length===0;
}else{
document.querySelectorAll(‚#’+key+’Options .option‘).forEach(o=>o.classList.remove(’selected‘));
el.classList.add(’selected‘);
answers[key]=el.dataset.value;
document.getElementById(‚btn’+currentStep).disabled=false;
}
}

function nextStep(n){
document.getElementById(’step’+currentStep).classList.remove(‚active‘);
currentStep=n;
document.getElementById(’step’+currentStep).classList.add(‚active‘);
updateProgress(currentStep);
}

function prevStep(n){
document.getElementById(’step’+currentStep).classList.remove(‚active‘);
currentStep=n;
document.getElementById(’step’+currentStep).classList.add(‚active‘);
updateProgress(currentStep);
}

function calculateResult(){
document.getElementById(’step4′).classList.remove(‚active‘);
document.getElementById(’step5′).classList.add(‚active‘);
updateProgress(5);

const r=answers;
let nist=0,eu=0,iso=0;

// Region scoring
if(r.regions.includes(‚eu‘)||r.regions.includes(‚global‘))eu+=30;
if(r.regions.includes(‚us‘)||r.regions.includes(‚global‘))nist+=25;
if(r.regions.includes(‚uk‘)){eu+=10;nist+=15;iso+=20;}
if(r.regions.includes(‚apac‘)){iso+=25;nist+=15;}
nist+=15;eu+=10;iso+=15;

// Industry scoring
if(r.industry===’finance‘){eu+=20;nist+=15;iso+=15;}
if(r.industry===’healthcare‘){eu+=25;nist+=20;iso+=15;}
if(r.industry===’tech‘){eu+=15;nist+=20;iso+=10;}
if(r.industry===’government‘){nist+=25;eu+=15;iso+=10;}
if(r.industry===’retail‘){eu+=15;nist+=10;iso+=15;}

// Size scoring
if(r.size===’startup‘){nist+=10;iso+=5;eu+=5;}
if(r.size===’sme‘){nist+=15;iso+=15;eu+=10;}
if(r.size===’enterprise‘){nist+=20;iso+=20;eu+=20;}
if(r.size===’large‘){nist+=25;iso+=25;eu+=25;}

// Risk scoring
if(r.risk===’minimal‘){nist+=5;iso+=5;eu+=5;}
if(r.risk===’limited‘){nist+=10;iso+=10;eu+=15;}
if(r.risk===’high‘){nist+=15;iso+=15;eu+=25;}
if(r.risk===’critical‘){nist+=20;iso+=20;eu+=30;}

const total=nist+eu+iso;
const nistPct=Math.round(nist/total*100);
const euPct=Math.round(eu/total*100);
const isoPct=100-nistPct-euPct;

let frameworks=[
{name:’NIST AI RMF‘,score:nistPct,color:’#3b82f6′,desc:’US National Institute of Standards and Technology AI Risk Management Framework‘,pros:[‚Flexible, voluntary framework‘,’Strong risk-based approach‘,’Widely adopted in US‘,’Maps to multiple standards‘],cons:[‚Not legally binding‘,’Limited EU recognition‘],bestFor:’US-based organizations seeking a flexible, risk-based approach‘},
{name:’EU AI Act‘,score:euPct,color:’#8b5cf6′,desc:’European Union Artificial Intelligence Act — world first comprehensive AI law‘,pros:[‚Legally binding in EU‘,’Clear risk classification‘,’Comprehensive coverage‘,’Global regulatory influence‘],cons:[‚Complex compliance requirements‘,’High administrative burden‘,’Still finalizing implementing acts‘],bestFor:’Organizations operating in or serving EU customers‘},
{name:’ISO/IEC 42001′,score:isoPct,color:’#22c55e‘,desc:’International standard for AI Management Systems‘,pros:[‚Internationally recognized‘,’Certifiable standard‘,’Integrates with ISO 27001′,’Industry-neutral‘],cons:[‚Certification costs‘,’Less prescriptive than EU AI Act‘,’Newer standard, fewer certified orgs‘],bestFor:’Organizations seeking international certification and management system approach‘}
];

frameworks.sort((a,b)=>b.score-a.score);

const rec=frameworks[0];
const secondary=frameworks[1];

let html=`

`;

html+=`

📊 Framework Comparison

`;
html+=`

`;

html+=`

🏷️ Your Profile

`;
html+=`

`;

document.getElementById(‚resultContent‘).innerHTML=html;
}

function resetTool(){
answers={regions:[],industry:“,size:“,risk:“};
currentStep=1;
document.querySelectorAll(‚.option‘).forEach(o=>o.classList.remove(’selected‘));
document.querySelectorAll(‚.step‘).forEach(s=>s.classList.remove(‚active‘));
document.getElementById(’step1′).classList.add(‚active‘);
for(let i=1;i<=4;i++)document.getElementById('btn'+i).disabled=true;
initProgress();
}

initProgress();