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}
if(r.regions.includes('uk')){eu+=10;nist+=15;iso+=20;}
if(r.regions.includes('apac')){iso+=25;nist+=15;}
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;}
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;}
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;}
html+=`
${rec.score}%
Match Score
`;
html+=`
${frameworks.length}
Frameworks Compared
`;
html+=`
${r.risk==='high'||r.risk==='critical'?'High':'Medium'}
Your Risk Level
`;
html+=`
Based on your profile (${r.size} ${r.industry} company operating in ${r.regions.join(', ')}), we recommend ${rec.name} as your primary compliance framework. ${rec.bestFor}.
`;
if(secondary.score>25) html+=`
Consider also adopting ${secondary.name} (${secondary.score}% match) as a complementary framework.
`;
html+=`
`;
html+=`
${f.name}${i===0?'Recommended':''}
`;
html+=`
${f.score}%
`;
f.pros.forEach(p=>html+=`
${p}
`);
f.cons.forEach(c=>html+=`
${c}
`);
r.regions.forEach(reg=>html+=`${reg.toUpperCase()}`);
html+=`${r.industry}`;
html+=`${r.size}`;
html+=`${r.risk} risk`;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;
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:’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‘}
const rec=frameworks[0];
const secondary=frameworks[1];
let html=`
`;
html+=`
`;
html+=`
html+=`
html+=`
`;
html+=`
html+=`
`;
html+=`
html+=`
`;
html+=`
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();
}
🏛️ AI Compliance Framework Selector
Find the right AI compliance framework for your organization. Answer a few questions and get a personalized recommendation comparing NIST AI RMF, EU AI Act, and ISO/IEC 42001.
🌍 Where does your organization primarily operate?
Select all regions where you deploy AI systems or serve customers.
🏢 What industry is your organization in?
Different industries have specific AI compliance requirements.
👥 What is your organization size?
Compliance requirements and resources vary significantly by company size.
🤖 What type of AI systems do you deploy?
Select the highest-risk category that applies to your AI use cases.
📊 Your AI Compliance Framework Recommendation
nist+=15;eu+=10;iso+=15;
// Industry scoring
// Size scoring
// Risk scoring
frameworks.sort((a,b)=>b.score-a.score);
html+=`
🎯 Primary Recommendation: ${rec.name}
${rec.desc}
html+=`
`;
html+=`
📋 Recommendation Summary
`;
html+=`
`;
📊 Framework Comparison
frameworks.forEach((f,i)=>{
html+=`
`;
html+=`
- `;
`;
🏷️ Your Profile
`;
initProgress();
Schreibe einen Kommentar