Files
nis2-agile/docs/mockup Ui/assessment.html
T

361 lines
33 KiB
HTML

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GAP Analysis · NIS2 Agile</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root{
--navy-top:#0A2E54; --navy-nav:#103A61; --navy-hover:#1B4A75; --gold:#F0B429;
--bg:#EFF4FA; --card:#FFFFFF; --ink:#15263C; --muted:#64748B; --line:#E3E9F0;
--c-green:#1E8A5A; --c-blue:#1F5FA8; --c-amber:#D98324; --c-red:#C62828;
--radius:12px; --shadow:0 1px 2px rgba(16,40,80,.06),0 8px 24px rgba(16,40,80,.06);
}
*{box-sizing:border-box} html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px;line-height:1.5}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
.appbar{position:sticky;top:0;z-index:50}
.bar-top{background:var(--navy-top);color:#fff}
.bar-top-in{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:10px 24px}
.flag{width:18px;height:13px;border-radius:2px;overflow:hidden;display:flex;flex:0 0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.flag i{flex:1}.flag .g{background:#1f8a4c}.flag .w{background:#fff}.flag .r{background:#cd2b2b}
.logo-mark{width:34px;height:34px;border-radius:8px;background:var(--c-green);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:13px;flex:0 0 auto}
.brand-txt{line-height:1.1;min-width:0}
.brand-txt b{font-size:15px;font-weight:700}
.brand-txt span{display:block;font-size:10.5px;color:#A9C2DC;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search{flex:1;max-width:340px;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:7px 12px;color:#cfe0f1;min-width:120px}
.search input{flex:1;border:0;background:transparent;color:#fff;font:inherit;outline:none;min-width:0}
.search input::placeholder{color:#9db8d2}
.spacer{flex:1}
.btn-incident{display:inline-flex;align-items:center;gap:8px;background:#D24545;color:#fff;border:0;border-radius:8px;padding:9px 15px;font:inherit;font-weight:600;font-size:13px;cursor:pointer;box-shadow:0 1px 2px rgba(120,20,20,.35);white-space:nowrap}
.btn-incident:hover{background:#BF3A3A}
.btn-incident .ic{width:16px;height:16px}
.user{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:5px 10px 5px 5px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.user:hover{background:rgba(255,255,255,.16)}
.avatar{width:24px;height:24px;border-radius:6px;background:var(--c-green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.bar-nav{background:var(--navy-nav);border-top:1px solid rgba(255,255,255,.06)}
.bar-nav-in{max-width:1280px;margin:0 auto;padding:0 16px;display:flex;align-items:stretch;gap:2px;flex-wrap:wrap}
.nav-item{position:relative}
.nav-link{display:flex;align-items:center;gap:7px;color:#cfe0f1;font-weight:600;font-size:13px;padding:13px 14px;white-space:nowrap;border-bottom:3px solid transparent;cursor:pointer}
.nav-link .ic{width:15px;height:15px;opacity:.9}
.nav-link .caret{width:13px;height:13px;opacity:.7;margin-left:-2px}
.nav-item:hover>.nav-link{color:#fff;background:rgba(255,255,255,.06)}
.nav-link.active{color:#fff;border-bottom-color:var(--gold)}
.mega{position:absolute;top:100%;left:0;background:#fff;color:var(--ink);border-radius:0 0 14px 14px;box-shadow:0 18px 40px rgba(11,40,80,.18);border:1px solid var(--line);border-top:0;padding:22px;display:none;grid-template-columns:auto auto 250px;gap:30px;min-width:560px;z-index:60}
.nav-item:hover .mega,.nav-item:focus-within .mega{display:grid}
.nav-item:nth-last-child(-n+3) .mega{left:auto;right:0}
.mega.no-promo{min-width:auto}
.nav-item:hover .mega.no-promo,.nav-item:focus-within .mega.no-promo{display:flex;gap:30px;width:auto}
.mega-col{min-width:190px}
.mega-head{font-size:10.5px;font-weight:700;letter-spacing:.12em;color:#94A3B8;text-transform:uppercase;margin:0 0 12px}
.mega-link{display:flex;gap:11px;padding:8px;border-radius:9px;align-items:flex-start}
.mega-link:hover{background:#F3F7FC}
.mega-link .mega-ic{width:36px;height:36px;border-radius:10px;background:#EAF1FA;color:var(--c-blue);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.mega-ic .ic{width:21px;height:21px;display:block}
.mega-link b{display:block;font-size:13.5px;font-weight:700}
.mega-link span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.promo{background:linear-gradient(160deg,#1F5FA8,#0F3F77);color:#fff;border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:10px}
.promo .badge{align-self:flex-start;background:rgba(255,255,255,.18);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.promo b{font-size:16px}
.promo p{margin:0;font-size:12px;color:#cfe0f3;line-height:1.45}
.promo .go{margin-top:auto;align-self:flex-end;width:38px;height:38px;border-radius:9px;background:#fff;color:var(--c-blue);display:flex;align-items:center;justify-content:center}
.wrap{max-width:1280px;margin:0 auto;padding:22px 24px 80px}
.crumb{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);margin-bottom:14px}
.crumb .ic{width:13px;height:13px}.crumb a:hover{color:var(--ink)}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.page-head h1{margin:0;font-size:26px;font-weight:800;letter-spacing:-.4px}
.page-head .sub{margin:4px 0 0;color:var(--muted);font-size:13.5px}
.date{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 12px}
.date .ic{width:15px;height:15px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-pad{padding:20px}
.stack{display:grid;gap:18px}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.cal-head h3{margin:0;font-size:15px;font-weight:700}
.cal-ctrl{display:flex;gap:6px;align-items:center}
.ctrl-btn{width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ctrl-btn:hover{background:#F5F8FC}
.ctrl-btn .ic{width:16px;height:16px;color:var(--muted)}
.ctrl-today{height:32px;padding:0 13px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit;font-weight:600;font-size:12px;display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--ink)}
.ctrl-today:hover{background:#F5F8FC}
.ctrl-today .ic{width:14px;height:14px;color:var(--c-blue)}
.daystrip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.daycell{flex:1 1 0;min-width:64px;border:1px solid var(--line);border-radius:11px;background:#fff;padding:11px 6px 9px;text-align:center;position:relative;cursor:pointer;transition:border-color .12s,transform .12s,box-shadow .12s}
.daycell:hover{border-color:#9FBEDD;box-shadow:0 4px 12px rgba(16,40,80,.08)}
.daycell .wd{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8093A8}
.daycell .dn{font-size:21px;font-weight:800;line-height:1.15;margin-top:3px}
.daycell .mo{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:1px}
.daycell.weekend{background:#F5F8FC}
.daycell.weekend .wd{color:#A6B4C6}
.daycell.today{background:var(--navy-nav);border-color:var(--navy-nav)}
.daycell.today:hover{border-color:var(--navy-hover);box-shadow:0 6px 16px rgba(16,40,80,.22)}
.daycell.today .wd{color:#C7D9EC}.daycell.today .dn,.daycell.today .mo{color:#fff}
.daycell.today::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--gold);border-radius:11px 11px 0 0}
.dots{display:flex;gap:3px;justify-content:center;margin-top:7px;min-height:6px}
.ev{width:6px;height:6px;border-radius:50%;display:inline-block}
.ev.green{background:var(--c-green)}.ev.blue{background:var(--c-blue)}.ev.amber{background:var(--c-amber)}.ev.red{background:var(--c-red)}
.weekstrip{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:14px;align-items:start}
.weekblock{border:1px solid var(--line);border-radius:12px;background:#FAFCFE;padding:13px;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.weekblock:hover{border-color:#9FBEDD;box-shadow:0 6px 16px rgba(16,40,80,.10)}
.weekblock.current{background:#fff;border-color:#B9CFE6;box-shadow:0 6px 18px rgba(16,40,80,.08)}
.weekblock .wl{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:8px}
.weekblock .wl b{font-size:12.5px;font-weight:700;color:var(--muted)}
.weekblock.current .wl b{color:var(--c-blue)}
.weekblock .wl span{font-size:9.5px;color:#A6B4C6;text-transform:uppercase;letter-spacing:.07em;font-weight:700;white-space:nowrap}
.week7{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.mini{text-align:center;border-radius:8px;padding:6px 0 5px}
.mini .mi-wd{font-size:9.5px;font-weight:700;color:#9aa8ba;text-transform:uppercase}
.mini .mi-dn{font-size:13px;font-weight:700;margin-top:1px}
.mini.weekend .mi-wd,.mini.weekend .mi-dn{color:#A6B4C6}
.mini.today{background:var(--navy-nav)}.mini.today .mi-wd{color:#C7D9EC}.mini.today .mi-dn{color:#fff}
.mini .mi-ev{display:flex;gap:2px;justify-content:center;min-height:5px;margin-top:3px}
.mini .mi-ev .ev{width:4px;height:4px}
.cal-pop{position:fixed;z-index:80;display:none;width:252px;background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:0 14px 36px rgba(11,40,80,.20);padding:13px 14px;pointer-events:none;opacity:0;transform:translateY(5px);transition:opacity .12s ease,transform .12s ease}
.cal-pop.show{opacity:1;transform:none}
.cal-pop h4{margin:0 0 9px;font-size:12.5px;font-weight:700;text-transform:capitalize}
.cal-pop .pe{display:flex;gap:9px;align-items:flex-start;padding:6px 0;border-top:1px solid #EFF3F8}
.cal-pop .pe:first-of-type{border-top:0;padding-top:0}
.cal-pop .pe .ev{margin-top:5px;flex:0 0 auto}
.cal-pop .pe .tt{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;display:block}
.cal-pop .pe b{font-size:12px;font-weight:600;line-height:1.3;display:block}
.cal-pop .empty{font-size:12px;color:#94A3B8}
.fab-stack{position:fixed;right:22px;bottom:22px;display:flex;flex-direction:column;gap:12px;z-index:40}
.fab{width:46px;height:46px;border-radius:50%;border:0;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 20px rgba(16,40,80,.22)}
.fab .ic{width:20px;height:20px}
.fab.blue{background:var(--c-blue)}.fab.red{background:var(--c-red)}.fab.violet{background:#7C4DD6}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.split-anag{display:grid;grid-template-columns:1.35fr 1fr;gap:18px}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.sec-head h3{margin:0;font-size:15px;font-weight:700}
.sec-head .hint{font-size:11.5px;color:var(--muted)}
.stat{display:flex;gap:14px;align-items:flex-start;border-left:4px solid var(--c-blue)}
.stat.green{border-left-color:var(--c-green)}.stat.amber{border-left-color:var(--c-amber)}.stat.blue{border-left-color:var(--c-blue)}
.stat .ibox{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;background:#EAF1FA;color:var(--c-blue)}
.stat.green .ibox{background:#E6F4EC;color:var(--c-green)}.stat.amber .ibox{background:#FBF1E2;color:var(--c-amber)}
.stat .ibox .ic{width:20px;height:20px}
.stat .lbl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7a8aa0}
.stat .val{font-size:27px;font-weight:800;line-height:1.1;margin:3px 0 1px}
.stat.green .val{color:var(--c-green)}.stat.amber .val{color:var(--c-amber)}.stat.blue .val{color:var(--c-blue)}
.stat .sub{font-size:12px;color:var(--muted)}
.bar{height:7px;background:#EAF0F6;border-radius:99px;overflow:hidden;margin-top:9px;max-width:180px}
.bar>i{display:block;height:100%;background:var(--c-amber);border-radius:99px}
.btn-primary{display:inline-flex;align-items:center;gap:7px;background:var(--c-blue);color:#fff;border:0;border-radius:8px;padding:8px 13px;font:inherit;font-weight:600;font-size:12.5px;cursor:pointer}
.btn-primary:hover{background:#1A5494}
.btn-primary .ic{width:15px;height:15px}
.btn-ghost{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 12px;font:inherit;font-weight:600;font-size:12.5px;color:var(--ink);cursor:pointer}
.btn-ghost:hover{background:#F5F8FC;border-color:#c7d4e4}
.btn-ghost .ic{width:15px;height:15px;color:var(--c-blue)}
.dpill{flex:0 0 auto;width:46px;text-align:center;background:#EFF4FB;border:1px solid var(--line);border-radius:9px;padding:6px 0}
.dpill b{display:block;font-size:15px;font-weight:800;line-height:1}
.dpill span{font-size:9.5px;font-weight:700;letter-spacing:.05em;color:var(--muted);text-transform:uppercase}
.sca{display:flex;gap:13px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}
.sca:first-of-type{border-top:0;padding-top:0}
.sca .body{flex:1;min-width:0}
.sca .body b{font-size:13px;font-weight:600;display:block}
.meta{display:flex;gap:8px;align-items:center;margin-top:5px;flex-wrap:wrap}
.who{font-size:11.5px;color:var(--muted)}
.badge-t{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:2px 7px;border-radius:6px;background:#EEF2F7;color:#5b6b80;white-space:nowrap}
.badge-t.blue{background:#E7F0FB;color:#1F5FA8}.badge-t.amber{background:#FBF1E2;color:#9A6418}.badge-t.red{background:#FBE9E9;color:#B23636}.badge-t.green{background:#E6F4EC;color:#1E7A4E}.badge-t.gray{background:#EEF2F7;color:#5b6b80}
.act-scroll{max-height:330px;overflow-y:auto;padding-right:4px;scrollbar-width:thin}
.act{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:#fff}
.act:last-child{margin-bottom:0}
.act .body{flex:1;min-width:0}.act .body b{font-size:13px;font-weight:600;display:block}
.anag{display:flex;gap:16px;align-items:flex-start}
.anag-logo{width:60px;height:60px;border-radius:13px;background:linear-gradient(135deg,#143A5C,#1F5FA8);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;letter-spacing:.5px;flex:0 0 auto}
.anag .info{flex:1;min-width:0}
.anag .nm{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.anag .nm h3{margin:0;font-size:16px;font-weight:800}
.badge-nis{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:6px;background:#E7F0FB;color:#1F5FA8}
.anag-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px 18px;margin-top:14px}
.anag-grid .f span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#8093A8}
.anag-grid .f b{font-size:13px;font-weight:600}
.doc{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid var(--line);background:#fff;border-radius:10px;padding:12px 14px;cursor:pointer;font:inherit;margin-bottom:10px}
.doc:last-child{margin-bottom:0}
.doc:hover{border-color:#c7d4e4;background:#FAFCFE}
.doc .di{width:36px;height:36px;border-radius:9px;background:#EAF1FA;color:var(--c-blue);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.doc .di .ic{width:18px;height:18px}
.doc .dt{flex:1;min-width:0}
.doc .dt b{font-size:13.5px;font-weight:700;display:block}
.doc .dt small{font-size:11px;color:var(--muted)}
.doc .st{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px;white-space:nowrap}
.doc .st .ic{width:14px;height:14px}
.doc.has .st{background:#E6F4EC;color:#1E7A4E}
.doc.miss .st{background:#FBF1E2;color:#9A6418}
@media (max-width:900px){.weekstrip{grid-template-columns:1fr}.grid3,.split2,.split-anag{grid-template-columns:1fr}.mega{grid-template-columns:1fr;min-width:280px}.search{display:none}}
@media (max-width:560px){.brand-txt span{display:none}.btn-incident span{display:none}}
.ga-intro{display:flex;gap:12px;align-items:flex-start;background:#EEF4FB;border:1px solid #D5E3F2;color:#2C4A6B;border-radius:11px;padding:14px 16px;font-size:13px;margin-bottom:20px}
.ga-intro .ic{width:18px;height:18px;flex:0 0 auto;color:var(--c-blue);margin-top:1px}
.ga-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.ga-grid{display:grid;grid-template-columns:330px 1fr;gap:18px;align-items:start}
.ga-side .sec-head{margin-bottom:12px}
.emp-list{display:flex;flex-direction:column;gap:10px}
.emp{display:flex;align-items:center;gap:12px;padding:12px 13px;border:1px solid var(--line);border-radius:11px;background:#fff;cursor:pointer;box-shadow:var(--shadow);text-align:left;font:inherit;width:100%}
.emp:hover{border-color:#9FBEDD}
.emp.on{border-color:var(--c-blue);box-shadow:0 0 0 2px rgba(31,95,168,.18)}
.emp .av{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#143A5C,#1F5FA8);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:0 0 auto}
.emp .ei{flex:1;min-width:0}
.emp .ei b{font-size:13.5px;font-weight:700;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emp .ei span{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.emp .mt{font-size:14px;font-weight:800;flex:0 0 auto}
.emp .mt.ok{color:var(--c-green)}.emp .mt.warn{color:var(--c-amber)}.emp .mt.crit{color:var(--c-red)}
.det{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.det-head{display:flex;align-items:center;gap:16px;padding:20px;border-bottom:1px solid var(--line)}
.det-head .av{width:54px;height:54px;border-radius:12px;background:linear-gradient(135deg,#143A5C,#1F5FA8);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;flex:0 0 auto}
.det-head .hi{flex:1;min-width:0}
.det-head .hi h3{margin:0;font-size:18px;font-weight:800}
.det-head .hi .role{font-size:13px;color:var(--muted);margin-top:2px}
.det-head .score{text-align:right;flex:0 0 auto}
.det-head .score .pct{font-size:26px;font-weight:800;line-height:1}
.det-head .score .pct.ok{color:var(--c-green)}.det-head .score .pct.warn{color:var(--c-amber)}.det-head .score .pct.crit{color:var(--c-red)}
.det-head .score .lb{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8093A8;margin-top:3px}
.det-body{padding:6px 20px 14px}
.crow{display:grid;grid-template-columns:1.25fr 250px 116px;gap:18px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.crow:first-child{border-top:0}
.crow .cn{font-size:13.5px;font-weight:600}
.levels{display:grid;gap:7px}
.lvlrow{display:flex;align-items:center;gap:9px}
.lvlrow .lab{font-size:9.5px;font-weight:700;color:#8093A8;text-transform:uppercase;width:70px;letter-spacing:.03em}
.dots5{display:flex;gap:5px}
.dots5 i{width:13px;height:13px;border-radius:50%;background:#E7ECF2;display:block}
.dots5 i.req{background:#94A3B8}
.gbadge{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:4px 0;border-radius:999px;text-align:center}
.gbadge.ok{background:#E6F4EC;color:#1E7A4E}
.gbadge.warn{background:#FBF1E2;color:#9A6418}
.gbadge.crit{background:#FBE9E9;color:#B23636}
@media (max-width:900px){.ga-kpis{grid-template-columns:repeat(2,1fr)}.ga-grid{grid-template-columns:1fr}.crow{grid-template-columns:1fr;gap:10px}}
</style>
</head>
<body>
<header class="appbar">
<div class="bar-top"><div class="bar-top-in">
<span class="flag"><i class="g"></i><i class="w"></i><i class="r"></i></span>
<div class="logo-mark">N2</div>
<div class="brand-txt"><b>NIS2 Agile</b><span>Conformità Direttiva (UE) 2022/2555 · D.Lgs. 138/2024</span></div>
<label class="search"><i data-lucide="search" class="ic"></i><input placeholder="Cerca misura, rischio, incidente…"></label>
<span class="spacer"></span>
<button class="btn-incident"><i data-lucide="siren" class="ic"></i><span>Registra incidente</span></button>
<span class="user"><span class="avatar">SF</span>Simone Fatteri<i data-lucide="chevron-down" class="ic"></i></span>
</div></div>
<nav class="bar-nav"><div class="bar-nav-in">
<div class="nav-item"><a class="nav-link" href="index.html"><i data-lucide="layout-dashboard" class="ic"></i><span>Dashboard</span></a></div>
<div class="nav-item"><a class="nav-link" href="calendario.html"><i data-lucide="calendar" class="ic"></i><span>Calendario</span></a></div>
<div class="nav-item"><a class="nav-link" href="stakeholders.html"><i data-lucide="users" class="ic"></i><span>Stakeholders</span><i data-lucide="chevron-down" class="caret"></i></a><div class="mega no-promo"><div class="mega-col"><p class="mega-head">RELAZIONI</p><a class="mega-link" href="stakeholders.html"><span class="mega-ic"><i data-lucide="handshake" class="ic"></i></span><span><b>Stakeholders</b><span>Soggetti interni ed esterni rilevanti</span></span></a><a class="mega-link" href="supply-chain.html"><span class="mega-ic"><i data-lucide="link" class="ic"></i></span><span><b>Supply-Chain</b><span>Rischio fornitori e terze parti</span></span></a><a class="mega-link" href="stakeholder-activities.html"><span class="mega-ic"><i data-lucide="activity" class="ic"></i></span><span><b>Attività su Stakeholders</b><span>Interazioni, richieste e impegni</span></span></a></div></div></div>
<div class="nav-item"><a class="nav-link active" href="organigramma.html"><i data-lucide="building-2" class="ic"></i><span>Struttura interna</span><i data-lucide="chevron-down" class="caret"></i></a><div class="mega no-promo"><div class="mega-col"><p class="mega-head">RUOLI E COMPETENZE</p><a class="mega-link" href="organigramma.html"><span class="mega-ic"><i data-lucide="network" class="ic"></i></span><span><b>Organigramma</b><span>Ruoli, deleghe e responsabilità</span></span></a><a class="mega-link" href="competenze.html"><span class="mega-ic"><i data-lucide="award" class="ic"></i></span><span><b>Competenze</b><span>Skill matrix e copertura dei ruoli</span></span></a><a class="mega-link" href="assessment.html"><span class="mega-ic"><i data-lucide="git-compare" class="ic"></i></span><span><b>GAP Analysis</b><span>Scostamento tra stato attuale e atteso</span></span></a><a class="mega-link" href="training.html"><span class="mega-ic"><i data-lucide="graduation-cap" class="ic"></i></span><span><b>Formazione</b><span>Piani formativi e completamento</span></span></a></div></div></div>
<div class="nav-item"><a class="nav-link" href="risks.html"><i data-lucide="shield-alert" class="ic"></i><span>Rischi</span><i data-lucide="chevron-down" class="caret"></i></a><div class="mega no-promo"><div class="mega-col"><p class="mega-head">GESTIONE RISCHIO</p><a class="mega-link" href="risks.html"><span class="mega-ic"><i data-lucide="map" class="ic"></i></span><span><b>Mappa dei rischi</b><span>Registro rischi e piani di trattamento</span></span></a><a class="mega-link" href="assets.html"><span class="mega-ic"><i data-lucide="boxes" class="ic"></i></span><span><b>Inventario</b><span>Asset e perimetro tecnico</span></span></a><a class="mega-link" href="policies.html"><span class="mega-ic"><i data-lucide="file-text" class="ic"></i></span><span><b>Policy</b><span>Politiche approvate e in revisione</span></span></a></div></div></div>
<div class="nav-item"><a class="nav-link" href="whistleblowing.html"><i data-lucide="radar" class="ic"></i><span>Monitoraggio</span><i data-lucide="chevron-down" class="caret"></i></a><div class="mega no-promo"><div class="mega-col"><p class="mega-head">VIGILANZA E AUDIT</p><a class="mega-link" href="whistleblowing.html"><span class="mega-ic"><i data-lucide="megaphone" class="ic"></i></span><span><b>Segnalazioni ricevute</b><span>Whistleblowing e segnalazioni interne</span></span></a><a class="mega-link" href="internal-audits.html"><span class="mega-ic"><i data-lucide="clipboard-check" class="ic"></i></span><span><b>Audit interni</b><span>Programma e esiti degli audit</span></span></a><a class="mega-link" href="reports.html"><span class="mega-ic"><i data-lucide="file-check" class="ic"></i></span><span><b>Audit ACN</b><span>Verifiche e ispezioni dell'autorità</span></span></a></div></div></div>
<div class="nav-item"><a class="nav-link" href="report.html"><i data-lucide="scale" class="ic"></i><span>Lex e ISO</span><i data-lucide="chevron-down" class="caret"></i></a><div class="mega no-promo"><div class="mega-col"><p class="mega-head">NORMATIVA E ISO</p><a class="mega-link" href="normative.html"><span class="mega-ic"><i data-lucide="scroll-text" class="ic"></i></span><span><b>Normative</b><span>Direttiva, decreto e riferimenti applicabili</span></span></a><a class="mega-link" href="isms.html"><span class="mega-ic"><i data-lucide="shield-check" class="ic"></i></span><span><b>Modello SGSI (ISO 27001)</b><span>Sistema di gestione sicurezza informazioni</span></span></a><a class="mega-link" href="misure-requisiti.html"><span class="mega-ic"><i data-lucide="list-checks" class="ic"></i></span><span><b>Misure e requisiti ACN</b><span>Misure tecniche e organizzative Art. 21</span></span></a></div></div></div>
<div class="nav-item"><a class="nav-link" href="ai.html"><i data-lucide="sparkles" class="ic"></i><span>AI</span><i data-lucide="chevron-down" class="caret"></i></a><div class="mega no-promo"><div class="mega-col"><p class="mega-head">ASSISTENTE</p><a class="mega-link" href="cross-analysis.html"><span class="mega-ic"><i data-lucide="sparkles" class="ic"></i></span><span><b>AI Cross-Analysis</b><span>Analisi trasversale di rischi e misure</span></span></a><a class="mega-link" href="kb.html"><span class="mega-ic"><i data-lucide="book-open" class="ic"></i></span><span><b>Knowledge Base</b><span>Procedure, linee guida e riferimenti</span></span></a></div></div></div>
<div class="nav-item"><a class="nav-link" href="guida.html"><i data-lucide="life-buoy" class="ic"></i><span>Guida</span><i data-lucide="chevron-down" class="caret"></i></a><div class="mega no-promo"><div class="mega-col"><p class="mega-head">GUIDA</p><a class="mega-link" href="guida.html"><span class="mega-ic"><i data-lucide="life-buoy" class="ic"></i></span><span><b>Guida all'uso</b><span>Manuale e istruzioni della piattaforma</span></span></a><a class="mega-link" href="integrazioniext.html"><span class="mega-ic"><i data-lucide="plug" class="ic"></i></span><span><b>Integrazioni Esterne</b><span>Connettori e servizi collegati</span></span></a></div><div class="mega-col"><p class="mega-head">SISTEMA</p><a class="mega-link" href="setting.html"><span class="mega-ic"><i data-lucide="settings" class="ic"></i></span><span><b>Impostazioni</b><span>Configurazione del workspace</span></span></a><a class="mega-link" href="architecture.html"><span class="mega-ic"><i data-lucide="layers" class="ic"></i></span><span><b>Architettura</b><span>Modello dati e struttura del sistema</span></span></a></div></div></div>
</div></nav>
</header>
<main class="wrap">
<nav class="crumb"><i data-lucide="home" class="ic"></i><a href="index.html">Home</a><i data-lucide="chevron-right" class="ic"></i><a href="organigramma.html">Struttura interna</a><i data-lucide="chevron-right" class="ic"></i><span>GAP Analysis</span></nav>
<div class="page-head">
<div><h1>GAP Analysis — Competenze</h1><p class="sub">Allineamento tra le competenze possedute dai dipendenti e quelle richieste dal ruolo ricoperto</p></div>
<div class="date"><i data-lucide="calendar" class="ic"></i>giovedì 25 giugno 2026</div>
</div>
<div class="ga-intro"><i data-lucide="info" class="ic"></i><div>Per ogni dipendente dell'organigramma vengono confrontate le competenze <b>richieste dal ruolo</b> con quelle <b>effettivamente possedute</b>, evidenziando gli scostamenti (gap) su cui intervenire con la formazione.</div></div>
<div class="ga-kpis" id="ga-kpis"></div>
<div class="ga-grid">
<aside class="ga-side">
<div class="sec-head"><h3>Dipendenti</h3></div>
<div class="emp-list" id="emp-list"></div>
</aside>
<section class="det" id="detail"></section>
</div>
</main>
<div class="fab-stack">
<button class="fab blue" title="Notifiche"><i data-lucide="bell" class="ic"></i></button>
<button class="fab red" title="Assistenza"><i data-lucide="life-buoy" class="ic"></i></button>
<button class="fab violet" title="Assistente AI"><i data-lucide="sparkles" class="ic"></i></button>
</div>
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<script>
const EMP=[
{id:1,name:'Marco Bianchi',role:'CISO / Resp. Sicurezza',comps:[
['Gestione del rischio ICT',5,4],['Sicurezza delle reti',5,5],['Gestione incidenti (Art. 23)',5,3],
['Conformit\u00e0 NIS2',4,4],['Crittografia',3,2],['Continuit\u00e0 operativa',4,4]]},
{id:2,name:'Laura Verdi',role:'Responsabile IT',comps:[
['Amministrazione sistemi',5,5],['Gestione accessi (IAM)',4,3],['Backup e ripristino',4,4],
['Hardening',3,2],['Monitoraggio e log',3,3]]},
{id:3,name:'Andrea Rossi',role:'SOC Analyst',comps:[
['Monitoraggio SIEM',4,4],['Analisi incidenti',4,3],['Threat intelligence',3,2],['Digital forensics',3,1]]},
{id:4,name:'Giulia Neri',role:'Data Protection / Compliance',comps:[
['Normativa privacy (GDPR)',4,4],['Conformit\u00e0 NIS2',4,3],['Gestione documentale',3,3],['Audit interni',3,2]]},
{id:5,name:'Paolo Gialli',role:'Resp. Formazione',comps:[
['Pianificazione formazione',4,4],['Security awareness',3,3],['Gestione competenze',3,2]]},
{id:6,name:'Sara Blu',role:'Sistemista',comps:[
['Amministrazione sistemi',3,3],['Gestione accessi',3,2],['Backup e ripristino',3,3],['Hardening',3,3]]}
];
const STC={ok:'var(--c-green)',warn:'var(--c-amber)',crit:'var(--c-red)'};
function ini(n){return n.split(' ').map(p=>p[0]).join('').slice(0,2).toUpperCase();}
function cstat(req,act){const g=req-act;return g<=0?'ok':g===1?'warn':'crit';}
function estat(e){let w=false;for(const[,req,act]of e.comps){const g=req-act;if(g>=2)return'crit';if(g===1)w=true;}return w?'warn':'ok';}
function pct(e){let s=0,t=0;for(const[,req,act]of e.comps){s+=Math.min(act,req);t+=req;}return Math.round(s/t*100);}
function gaps(e){return e.comps.filter(([,req,act])=>req-act>0).length;}
function dots(filled,color){let h='';for(let i=1;i<=5;i++){const on=i<=filled;h+='<i'+(on&&!color?' class="req"':'')+(on&&color?' style="background:'+color+'"':'')+'></i>';}return h;}
function renderKpis(){
const n=EMP.length;
const avg=Math.round(EMP.reduce((a,e)=>a+pct(e),0)/n);
const totGap=EMP.reduce((a,e)=>a+gaps(e),0);
const roles=new Set(EMP.map(e=>e.role)).size;
const cards=[
['blue','users','Dipendenti valutati',n,'nell\'organigramma'],
['green','target','Allineamento medio',avg+'%','competenze vs ruolo'],
['amber','triangle-alert','Competenze in gap',totGap,'da colmare'],
['blue','briefcase','Ruoli coperti',roles,'profili valutati']
];
document.getElementById('ga-kpis').innerHTML=cards.map(([c,ic,l,v,s])=>
'<div class="card card-pad stat '+c+'"><div class="ibox"><i data-lucide="'+ic+'"></i></div>'+
'<div style="flex:1;min-width:0"><div class="lbl">'+l+'</div><div class="val">'+v+'</div><div class="sub">'+s+'</div></div></div>').join('');
}
function renderList(sel){
document.getElementById('emp-list').innerHTML=EMP.map(e=>{
const st=estat(e);
return '<button class="emp'+(e.id===sel?' on':'')+'" data-id="'+e.id+'">'+
'<span class="av">'+ini(e.name)+'</span>'+
'<span class="ei"><b>'+e.name+'</b><span>'+e.role+'</span></span>'+
'<span class="mt '+st+'">'+pct(e)+'%</span></button>';
}).join('');
document.querySelectorAll('.emp').forEach(b=>b.onclick=()=>select(+b.dataset.id));
}
function renderDetail(id){
const e=EMP.find(x=>x.id===id);const st=estat(e);const STL={ok:'In linea',warn:'Da rafforzare',crit:'Gap critico'};
let rows=e.comps.map(([name,req,act])=>{
const s=cstat(req,act);const g=req-act;
const badge=g<=0?'<span class="gbadge ok">In linea</span>':g===1?'<span class="gbadge warn">Gap \u22121</span>':'<span class="gbadge crit">Gap \u2212'+g+'</span>';
return '<div class="crow"><div class="cn">'+name+'</div>'+
'<div class="levels">'+
'<div class="lvlrow"><span class="lab">Richiesto</span><div class="dots5">'+dots(req,null)+'</div></div>'+
'<div class="lvlrow"><span class="lab">Posseduto</span><div class="dots5">'+dots(act,STC[s])+'</div></div>'+
'</div>'+badge+'</div>';
}).join('');
document.getElementById('detail').innerHTML=
'<div class="det-head"><span class="av">'+ini(e.name)+'</span>'+
'<div class="hi"><h3>'+e.name+'</h3><div class="role">'+e.role+'</div></div>'+
'<div class="score"><div class="pct '+st+'">'+pct(e)+'%</div><div class="lb">'+STL[st]+'</div></div></div>'+
'<div class="det-body">'+rows+'</div>';
}
let current=1;
function select(id){current=id;renderList(id);renderDetail(id);lucide.createIcons();}
renderKpis();renderList(current);renderDetail(current);
window.lucide && lucide.createIcons();
</script>
</body></html>