5c545ea3d0
Fase 1 - Asset Relevance Scoring NIS2 (GV.OC-04): metodologia 0-100 a 6 criteri, AssetScoringService + endpoint scoringGrid/score/relevantSystems + UI assets.html + registro stampabile. Fase 2 - Tassonomia incidenti Determina ACN 164179/2025: IS-1..4 + regime essenziale/importante (Allegati 3/4). Fase 3 - Post-Incident Review (5-Whys) + metriche TTD/TTC/TTR + timestamp di fase. Fase 4 - Mapping NIST CSF 2.0 (43 controlli) reference-only. Fonti certe: registry config/nis2_sources.php + grounding AI (vieta riferimenti inventati) + citazioni help.js + ingest PDF normativi nella KB RAG (scripts/ingest-nis2-sources.php). Migrazioni 020/021/022 (additive idempotenti). Fix VectorService IP Qdrant (drift .5->.3). Analisi concorrenza Evix (docs/EVIX_ANALISI_CONCORRENZA.html, gap-driven). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1481 lines
77 KiB
HTML
1481 lines
77 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>NIS2 Dashboard - Sistema di Gestione Cybersecurity</title>
|
|
<style>
|
|
:root {
|
|
--bg-primary: #0d1117;
|
|
--bg-secondary: #161b22;
|
|
--bg-tertiary: #1c2128;
|
|
--border-color: #30363d;
|
|
--text-primary: #c9d1d9;
|
|
--text-secondary: #8b949e;
|
|
--accent-primary: #58a6ff;
|
|
--accent-secondary: #1f6feb;
|
|
--success: #3fb950;
|
|
--warning: #d29922;
|
|
--danger: #f85149;
|
|
--essential-bg: #fef3c7;
|
|
--essential-text: #92400e;
|
|
--essential-border: #f59e0b;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
|
|
background-color: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
line-height: 1.6;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1600px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
/* Header */
|
|
.header {
|
|
background-color: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 24px 0;
|
|
margin-bottom: 32px;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.header-content {
|
|
max-width: 1600px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.header p {
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Stats Grid */
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 16px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.stat-card {
|
|
background-color: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
padding: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.stat-card h3 {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
color: var(--text-secondary);
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Gauge */
|
|
.gauge-wrapper {
|
|
margin-top: 16px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.gauge {
|
|
position: relative;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
.gauge svg {
|
|
transform: rotate(-135deg);
|
|
}
|
|
|
|
.gauge-bg {
|
|
fill: none;
|
|
stroke: var(--bg-tertiary);
|
|
stroke-width: 8;
|
|
}
|
|
|
|
.gauge-fill {
|
|
fill: none;
|
|
stroke-width: 8;
|
|
stroke-linecap: round;
|
|
transition: stroke-dashoffset 1s ease;
|
|
}
|
|
|
|
.gauge-needle {
|
|
position: absolute;
|
|
width: 2px;
|
|
height: 40px;
|
|
background: var(--text-primary);
|
|
bottom: 50%;
|
|
left: 50%;
|
|
transform-origin: bottom center;
|
|
transform: translateX(-50%) rotate(0deg);
|
|
transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.gauge-needle::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -6px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 12px;
|
|
height: 12px;
|
|
background: var(--text-primary);
|
|
border-radius: 50%;
|
|
border: 2px solid var(--bg-secondary);
|
|
}
|
|
|
|
.gauge-value {
|
|
position: absolute;
|
|
top: 65%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Tabs */
|
|
.tabs {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 24px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding-bottom: 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tab {
|
|
padding: 12px 16px;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
border-bottom: 2px solid transparent;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.tab:hover {
|
|
color: var(--text-primary);
|
|
background-color: var(--bg-tertiary);
|
|
}
|
|
|
|
.tab.active {
|
|
color: var(--accent-primary);
|
|
border-bottom-color: var(--accent-primary);
|
|
}
|
|
|
|
/* Section */
|
|
.section {
|
|
background-color: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
padding: 24px;
|
|
margin-bottom: 24px;
|
|
display: none;
|
|
}
|
|
|
|
.section.active {
|
|
display: block;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
padding-bottom: 16px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Help Icon */
|
|
.help-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 18px;
|
|
height: 18px;
|
|
background-color: var(--bg-tertiary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 50%;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
color: var(--text-secondary);
|
|
cursor: help;
|
|
position: relative;
|
|
}
|
|
|
|
.help-icon:hover {
|
|
background-color: var(--accent-secondary);
|
|
color: var(--text-primary);
|
|
border-color: var(--accent-primary);
|
|
}
|
|
|
|
.tooltip {
|
|
visibility: hidden;
|
|
position: absolute;
|
|
z-index: 1000;
|
|
background-color: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
padding: 12px;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--border-color);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
|
|
width: 320px;
|
|
top: 28px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.tooltip::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -6px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border-left: 6px solid transparent;
|
|
border-right: 6px solid transparent;
|
|
border-bottom: 6px solid var(--border-color);
|
|
}
|
|
|
|
.tooltip-title {
|
|
color: var(--accent-primary);
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.help-icon:hover .tooltip {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Requirements Grid */
|
|
.requirements-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.requirement-card {
|
|
background-color: var(--bg-tertiary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
padding: 16px;
|
|
transition: all 0.2s;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
.requirement-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 3px;
|
|
background-color: var(--success);
|
|
border-radius: 6px 0 0 6px;
|
|
}
|
|
|
|
.requirement-card:hover {
|
|
border-color: var(--accent-primary);
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
.requirement-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.requirement-code {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--accent-primary);
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
|
|
.requirement-gauge {
|
|
width: 40px;
|
|
height: 40px;
|
|
position: relative;
|
|
}
|
|
|
|
.requirement-gauge svg {
|
|
transform: rotate(-135deg);
|
|
}
|
|
|
|
.requirement-gauge .gauge-bg {
|
|
stroke-width: 4;
|
|
}
|
|
|
|
.requirement-gauge .gauge-fill {
|
|
stroke-width: 4;
|
|
}
|
|
|
|
.mini-needle {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 16px;
|
|
background: var(--text-primary);
|
|
bottom: 50%;
|
|
left: 50%;
|
|
transform-origin: bottom center;
|
|
transform: translateX(-50%) rotate(0deg);
|
|
transition: transform 1s ease;
|
|
}
|
|
|
|
.mini-needle::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -4px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 8px;
|
|
height: 8px;
|
|
background: var(--text-primary);
|
|
border-radius: 50%;
|
|
border: 1px solid var(--bg-tertiary);
|
|
}
|
|
|
|
.requirement-title {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
margin-bottom: 8px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.requirement-coverage {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.requirement-process {
|
|
font-size: 12px;
|
|
color: var(--success);
|
|
font-style: italic;
|
|
padding-left: 12px;
|
|
border-left: 2px solid var(--success);
|
|
}
|
|
|
|
/* Essential Badge */
|
|
.essential-badge {
|
|
display: inline-block;
|
|
background-color: var(--essential-bg);
|
|
color: var(--essential-text);
|
|
padding: 4px 8px;
|
|
border-radius: 3px;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
border: 1px solid var(--essential-border);
|
|
margin-left: 8px;
|
|
transform: rotate(-1deg);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Navigation */
|
|
.nav-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 12px;
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.nav-button {
|
|
background-color: var(--bg-tertiary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
padding: 16px;
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
transition: all 0.2s;
|
|
display: block;
|
|
}
|
|
|
|
.nav-button:hover {
|
|
background-color: var(--accent-secondary);
|
|
border-color: var(--accent-primary);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.requirements-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.stats-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.tabs {
|
|
overflow-x: auto;
|
|
flex-wrap: nowrap;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<div class="header-content">
|
|
<h1>NIS2 Dashboard - Sistema di Gestione Cybersecurity</h1>
|
|
<p>Monitoraggio conformità Direttiva NIS2 e requisiti di sicurezza informatica</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<!-- Statistics -->
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<h3>Conformità Totale</h3>
|
|
<div class="stat-value">94%</div>
|
|
<div class="stat-label">44 requisiti totali mappati</div>
|
|
<div class="gauge-wrapper">
|
|
<div class="gauge" data-value="94">
|
|
<svg width="100" height="100" viewBox="0 0 100 100">
|
|
<circle class="gauge-bg" cx="50" cy="50" r="40" stroke-dasharray="188.4" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="50" cy="50" r="40" stroke-dasharray="188.4" stroke-dashoffset="11.3" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="gauge-needle"></div>
|
|
<div class="gauge-value">94</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<h3>Governance</h3>
|
|
<div class="stat-value">11</div>
|
|
<div class="stat-label">Requisiti implementati</div>
|
|
<div class="gauge-wrapper">
|
|
<div class="gauge" data-value="100">
|
|
<svg width="100" height="100" viewBox="0 0 100 100">
|
|
<circle class="gauge-bg" cx="50" cy="50" r="40" stroke-dasharray="188.4" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="50" cy="50" r="40" stroke-dasharray="188.4" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="gauge-needle"></div>
|
|
<div class="gauge-value">100</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<h3>Identificazione</h3>
|
|
<div class="stat-value">10</div>
|
|
<div class="stat-label">Requisiti implementati</div>
|
|
<div class="gauge-wrapper">
|
|
<div class="gauge" data-value="100">
|
|
<svg width="100" height="100" viewBox="0 0 100 100">
|
|
<circle class="gauge-bg" cx="50" cy="50" r="40" stroke-dasharray="188.4" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="50" cy="50" r="40" stroke-dasharray="188.4" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="gauge-needle"></div>
|
|
<div class="gauge-value">100</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<h3>Protezione</h3>
|
|
<div class="stat-value">16</div>
|
|
<div class="stat-label">Requisiti implementati</div>
|
|
<div class="gauge-wrapper">
|
|
<div class="gauge" data-value="100">
|
|
<svg width="100" height="100" viewBox="0 0 100 100">
|
|
<circle class="gauge-bg" cx="50" cy="50" r="40" stroke-dasharray="188.4" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="50" cy="50" r="40" stroke-dasharray="188.4" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="gauge-needle"></div>
|
|
<div class="gauge-value">100</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<h3>Rilevazione</h3>
|
|
<div class="stat-value">2</div>
|
|
<div class="stat-label">Requisiti implementati</div>
|
|
<div class="gauge-wrapper">
|
|
<div class="gauge" data-value="100">
|
|
<svg width="100" height="100" viewBox="0 0 100 100">
|
|
<circle class="gauge-bg" cx="50" cy="50" r="40" stroke-dasharray="188.4" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="50" cy="50" r="40" stroke-dasharray="188.4" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="gauge-needle"></div>
|
|
<div class="gauge-value">100</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<h3>Risposta/Ripristino</h3>
|
|
<div class="stat-value">4</div>
|
|
<div class="stat-label">Requisiti implementati</div>
|
|
<div class="gauge-wrapper">
|
|
<div class="gauge" data-value="100">
|
|
<svg width="100" height="100" viewBox="0 0 100 100">
|
|
<circle class="gauge-bg" cx="50" cy="50" r="40" stroke-dasharray="188.4" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="50" cy="50" r="40" stroke-dasharray="188.4" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="gauge-needle"></div>
|
|
<div class="gauge-value">100</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabs -->
|
|
<div class="tabs">
|
|
<button class="tab active" onclick="showSection('all')">Tutti i Requisiti</button>
|
|
<button class="tab" onclick="showSection('govern')">Governance (11)</button>
|
|
<button class="tab" onclick="showSection('identify')">Identificazione (10)</button>
|
|
<button class="tab" onclick="showSection('protect')">Protezione (16)</button>
|
|
<button class="tab" onclick="showSection('detect')">Rilevazione (2)</button>
|
|
<button class="tab" onclick="showSection('respond')">Risposta/Ripristino (4)</button>
|
|
</div>
|
|
|
|
<!-- GOVERNANCE Section -->
|
|
<div class="section active" id="section-govern">
|
|
<div class="section-header">
|
|
<div class="section-title">
|
|
REQUISITI GOVERNANCE (GOVERN)
|
|
<span class="help-icon">?
|
|
<div class="tooltip">
|
|
<div class="tooltip-title">HELP DELLA SEZIONE</div>
|
|
I requisiti di Governance stabiliscono il framework organizzativo per la gestione della cybersecurity. Include politiche, processi decisionali, gestione dei rischi, ruoli e responsabilità, e gestione della supply chain.
|
|
</div>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="requirements-grid">
|
|
<div class="requirement-card" onclick="location.href='assets.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">GV.OC-04</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Elenco sistemi informativi e di rete rilevanti</div>
|
|
<div class="requirement-coverage">Coperto da: Org.01 - Inventario Asset e Sistemi Rilevanti</div>
|
|
<div class="requirement-process">Processo: Identificazione e classificazione sistemi rilevanti con approvazione Direzione</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='risk.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">GV.RM-03</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Processo di gestione dei rischi cyber</div>
|
|
<div class="requirement-coverage">Coperto da: Org.05 - Gestione Rischi Cibernetici</div>
|
|
<div class="requirement-process">Processo: Risk assessment ciclico con metodologia documentata</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='org.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">GV.RR-02</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Ruoli e responsabilità cybersecurity</div>
|
|
<div class="requirement-coverage">Coperto da: Org.03 - Struttura Organizzativa Cybersecurity</div>
|
|
<div class="requirement-process">Processo: Organigramma con CISO, team, deleghe formali</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='budget.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">GV.RR-04</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Risorse per cybersecurity</div>
|
|
<div class="requirement-coverage">Coperto da: Org.03 - Budget Cybersecurity</div>
|
|
<div class="requirement-process">Processo: Budget annuale approvato CdA, monitoraggio trimestrale</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='policy.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">GV.PO-01</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Politica di sicurezza delle informazioni</div>
|
|
<div class="requirement-coverage">Coperto da: Sistema Documentale - Politica Sicurezza</div>
|
|
<div class="requirement-process">Processo: Politica approvata CdA, comunicata, revisione annuale</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='policy.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">GV.PO-02</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Ruoli e responsabilità definiti in politiche</div>
|
|
<div class="requirement-coverage">Coperto da: Org.03 + Politica Sicurezza</div>
|
|
<div class="requirement-process">Processo: Job description e RACI in politica</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='supply.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">GV.SC-01</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Processi supply chain cyber risk management</div>
|
|
<div class="requirement-coverage">Coperto da: Org.02 - Gestione Catena Fornitura ICT</div>
|
|
<div class="requirement-process">Processo: Qualificazione, contrattualizzazione, monitoraggio fornitori</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='supply.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">GV.SC-02</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Identificazione e prioritizzazione fornitori</div>
|
|
<div class="requirement-coverage">Coperto da: Org.02 - Classificazione Fornitori (Tier 1/2/3)</div>
|
|
<div class="requirement-process">Processo: Scoring e categorizzazione per criticità</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='supply.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">GV.SC-04</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Valutazione e monitoraggio fornitori</div>
|
|
<div class="requirement-coverage">Coperto da: Org.02 - Audit Fornitori e KPI</div>
|
|
<div class="requirement-process">Processo: Audit annuali, KPI mensili/trimestrali, scoring</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='supply.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">GV.SC-05</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Risposta a cambiamenti supply chain</div>
|
|
<div class="requirement-coverage">Coperto da: Org.02 - Piano Continuità Fornitori</div>
|
|
<div class="requirement-process">Processo: Scenari gestione crisi fornitore, backup provider</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='supply.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">GV.SC-07</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Protezione informazioni sensibili condivise</div>
|
|
<div class="requirement-coverage">Coperto da: Org.02 - Clausole Contrattuali + PR.DS-01/02</div>
|
|
<div class="requirement-process">Processo: NDA, crittografia, controllo accessi</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- IDENTIFY Section -->
|
|
<div class="section" id="section-identify">
|
|
<div class="section-header">
|
|
<div class="section-title">
|
|
REQUISITI IDENTIFICAZIONE (IDENTIFY)
|
|
<span class="help-icon">?
|
|
<div class="tooltip">
|
|
<div class="tooltip-title">HELP DELLA SEZIONE</div>
|
|
I requisiti di Identificazione riguardano la conoscenza approfondita degli asset aziendali, dei sistemi, dei dati e dei rischi cyber. Include inventari completi, mappature di rete, analisi delle vulnerabilità e valutazione dei rischi.
|
|
</div>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="requirements-grid">
|
|
<div class="requirement-card" onclick="location.href='assets.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">ID.AM-01</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Inventario asset fisici</div>
|
|
<div class="requirement-coverage">Coperto da: Org.01 - Inventario Hardware</div>
|
|
<div class="requirement-process">Processo: Censimento server, dispositivi, network equipment</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='assets.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">ID.AM-02</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Inventario asset software e sistemi</div>
|
|
<div class="requirement-coverage">Coperto da: Org.01 - Inventario Software, Cloud, Applicazioni</div>
|
|
<div class="requirement-process">Processo: Catalogo licenze, versioni, dipendenze</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='network.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">ID.AM-03<span class="essential-badge">SOLO ESSENZIALI</span></div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Diagrammi flussi dati e comunicazione</div>
|
|
<div class="requirement-coverage">Coperto da: Org.01 - Diagrammi di Rete</div>
|
|
<div class="requirement-process">Processo: Topologia, segmentazione, flussi critici</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='services.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">ID.AM-04</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Catalogo servizi erogati</div>
|
|
<div class="requirement-coverage">Coperto da: Org.01 - Sezione Servizi Erogati</div>
|
|
<div class="requirement-process">Processo: Elenco servizi, criticità, dipendenze, utenti</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='risk.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">ID.RA-01</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Identificazione vulnerabilità e minacce</div>
|
|
<div class="requirement-coverage">Coperto da: Org.05 - Fase 1 Risk Assessment</div>
|
|
<div class="requirement-process">Processo: Vulnerability scanning, threat intelligence, analisi scenari</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='risk.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">ID.RA-05</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Valutazione probabilità e impatto rischi</div>
|
|
<div class="requirement-coverage">Coperto da: Org.05 - Fase 2 Analisi Rischi (matrice 4x4)</div>
|
|
<div class="requirement-process">Processo: Scoring probabilità/impatto, matrice rischio</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='risk.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">ID.RA-06</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Identificazione e prioritizzazione rischi</div>
|
|
<div class="requirement-coverage">Coperto da: Org.05 - Classificazione e Prioritizzazione</div>
|
|
<div class="requirement-process">Processo: Ranking rischi, prioritizzazione interventi</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='risk.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">ID.RA-08</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Risposta ai rischi (trattamento)</div>
|
|
<div class="requirement-coverage">Coperto da: Org.05 - Fase 4 Trattamento Rischi</div>
|
|
<div class="requirement-process">Processo: Strategie mitigazione/trasferimento/accettazione/evitamento</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='vuln.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">ID.IM-01</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Gestione vulnerabilità</div>
|
|
<div class="requirement-coverage">Coperto da: Org.06 - Processo Vulnerability Management</div>
|
|
<div class="requirement-process">Processo: Scanning, assessment, prioritizzazione, patching</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='patch.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">ID.IM-04</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Gestione patch e aggiornamenti</div>
|
|
<div class="requirement-coverage">Coperto da: Org.06 - Processo Patch Management</div>
|
|
<div class="requirement-process">Processo: Inventario patch, testing, deployment, verifica</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PROTECT Section -->
|
|
<div class="section" id="section-protect">
|
|
<div class="section-header">
|
|
<div class="section-title">
|
|
REQUISITI PROTEZIONE (PROTECT)
|
|
<span class="help-icon">?
|
|
<div class="tooltip">
|
|
<div class="tooltip-title">HELP DELLA SEZIONE</div>
|
|
I requisiti di Protezione definiscono le misure tecniche e organizzative per salvaguardare sistemi e dati. Include gestione identità, formazione, crittografia, backup, piani di continuità e configurazioni sicure.
|
|
</div>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="requirements-grid">
|
|
<div class="requirement-card" onclick="location.href='iam.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">PR.AA-01</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Gestione identità e autenticazione</div>
|
|
<div class="requirement-coverage">Coperto da: Org.07 - Processo Identity & Access Management</div>
|
|
<div class="requirement-process">Processo: Provisioning, autenticazione forte, gestione credenziali</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='mfa.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">PR.AA-03</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Autenticazione multi-fattore (MFA)</div>
|
|
<div class="requirement-coverage">Coperto da: Org.07 - Implementazione MFA</div>
|
|
<div class="requirement-process">Processo: MFA su sistemi rilevanti, VPN, accessi privilegiati</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='netaccess.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">PR.AA-05</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Gestione accessi di rete</div>
|
|
<div class="requirement-coverage">Coperto da: Org.08 - Network Access Control</div>
|
|
<div class="requirement-process">Processo: Segmentazione, firewall, controllo accessi</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='physical.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">PR.AA-06</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Gestione identità fisiche e credenziali</div>
|
|
<div class="requirement-coverage">Coperto da: Org.09 - Controllo Accessi Fisici</div>
|
|
<div class="requirement-process">Processo: Badge, videosorveglianza, registro accessi</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='training.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">PR.AT-01</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Formazione awareness generale</div>
|
|
<div class="requirement-coverage">Coperto da: Org.04 - Formazione Tutti i Dipendenti</div>
|
|
<div class="requirement-process">Processo: Corso iniziale 4h, aggiornamento 2h/anno, simulazioni phishing</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='training.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">PR.AT-02<span class="essential-badge">SOLO ESSENZIALI</span></div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Formazione specialistica ruoli privilegiati</div>
|
|
<div class="requirement-coverage">Coperto da: Org.04 - Formazione CISO e Team (≥16h/anno)</div>
|
|
<div class="requirement-process">Processo: Corsi tecnici, certificazioni, training specialistico</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='crypto.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">PR.DS-01</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Protezione dati a riposo</div>
|
|
<div class="requirement-coverage">Coperto da: Org.10 - Crittografia Dati</div>
|
|
<div class="requirement-process">Processo: Encryption database, storage, backup</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='crypto.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">PR.DS-02</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Protezione dati in transito</div>
|
|
<div class="requirement-coverage">Coperto da: Org.10 - Crittografia Comunicazioni</div>
|
|
<div class="requirement-process">Processo: TLS/SSL, VPN, protocolli sicuri</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='backup.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">PR.DS-11</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Backup e capacità di ripristino</div>
|
|
<div class="requirement-coverage">Coperto da: Org.11 - Processo Backup e Restore</div>
|
|
<div class="requirement-process">Processo: Backup sistemi rilevanti, test trimestrale, retention</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='bcp.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">PR.PS-01<span class="essential-badge">SOLO ESSENZIALI</span></div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Business Continuity Plan</div>
|
|
<div class="requirement-coverage">Coperto da: Org.12 - Piano Continuità Operativa</div>
|
|
<div class="requirement-process">Processo: BCP documentato, test annuale, procedure escalation</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='drp.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">PR.PS-02</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Disaster Recovery Plan</div>
|
|
<div class="requirement-coverage">Coperto da: Org.13 - Piano Disaster Recovery</div>
|
|
<div class="requirement-process">Processo: DR documentato, RTO/RPO, test semestrale (essenziali)/annuale (importanti)</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='irp.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">PR.PS-03<span class="essential-badge">SOLO ESSENZIALI</span></div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Incident Response Plan</div>
|
|
<div class="requirement-coverage">Coperto da: Org.14 - Piano Gestione Incidenti</div>
|
|
<div class="requirement-process">Processo: IRP documentato, team, procedure, esercitazioni</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='crisis.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">PR.PS-04</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Comunicazioni e operazioni coordinate</div>
|
|
<div class="requirement-coverage">Coperto da: Org.15 - Protocollo Comunicazione Crisi</div>
|
|
<div class="requirement-process">Processo: Escalation, comunicazione interna/esterna, coordinamento</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='hardening.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">PR.PS-06</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Configurazioni sicure (hardening)</div>
|
|
<div class="requirement-coverage">Coperto da: Org.16 - Baseline Configurazioni Sicure</div>
|
|
<div class="requirement-process">Processo: Hardening guide, CIS benchmarks, controllo configurazioni</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='netarch.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">PR.IR-01</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Reti e ambienti protetti</div>
|
|
<div class="requirement-coverage">Coperto da: Org.08 - Architettura Rete Sicura</div>
|
|
<div class="requirement-process">Processo: Segmentazione, DMZ, VLAN, micro-segmentation</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='config.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">PR.IR-03</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Configurazioni gestite e controllate</div>
|
|
<div class="requirement-coverage">Coperto da: Org.17 - Configuration Management</div>
|
|
<div class="requirement-process">Processo: CMDB, change management, baseline</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DETECT Section -->
|
|
<div class="section" id="section-detect">
|
|
<div class="section-header">
|
|
<div class="section-title">
|
|
REQUISITI RILEVAZIONE (DETECT)
|
|
<span class="help-icon">?
|
|
<div class="tooltip">
|
|
<div class="tooltip-title">HELP DELLA SEZIONE</div>
|
|
I requisiti di Rilevazione riguardano la capacità di identificare tempestivamente eventi e incidenti di sicurezza. Include monitoraggio continuo, analisi dei log, sistemi SIEM e capacità di threat detection.
|
|
</div>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="requirements-grid">
|
|
<div class="requirement-card" onclick="location.href='monitor.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">DE.CM-01<span class="essential-badge">SIEM OBBLIGATORIO</span></div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Monitoraggio continuo reti e sistemi</div>
|
|
<div class="requirement-coverage">Coperto da: Org.18 - Sistema Monitoraggio e SIEM</div>
|
|
<div class="requirement-process">Processo: Monitoraggio 24/7, log management, alert</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='detect.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">DE.CM-09</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Rilevazione incidenti di sicurezza</div>
|
|
<div class="requirement-coverage">Coperto da: Org.18 - Incident Detection</div>
|
|
<div class="requirement-process">Processo: Correlation rules, anomaly detection, threat hunting</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RESPOND/RECOVER Section -->
|
|
<div class="section" id="section-respond">
|
|
<div class="section-header">
|
|
<div class="section-title">
|
|
REQUISITI RISPOSTA E RIPRISTINO (RESPOND/RECOVER)
|
|
<span class="help-icon">?
|
|
<div class="tooltip">
|
|
<div class="tooltip-title">HELP DELLA SEZIONE</div>
|
|
I requisiti di Risposta e Ripristino definiscono le azioni da intraprendere durante e dopo un incidente di sicurezza. Include contenimento, eradicazione, notifiche obbligatorie a CSIRT Italia, ripristino dei servizi e comunicazioni agli stakeholder.
|
|
</div>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="requirements-grid">
|
|
<div class="requirement-card" onclick="location.href='contain.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">RS.MA-01</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Contenimento incidenti</div>
|
|
<div class="requirement-coverage">Coperto da: Org.19 - Processo Incident Response - Contenimento</div>
|
|
<div class="requirement-process">Processo: Isolamento, eradicazione, contenimento laterale</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='csirt.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">RS.CO-02</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Notifica incidenti a CSIRT Italia</div>
|
|
<div class="requirement-coverage">Coperto da: Org.20 - Processo Notifiche CSIRT</div>
|
|
<div class="requirement-process">Processo: Valutazione significatività, notifica 24h, report 72h e finale</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='recovery.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">RC.RP-01</div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Ripristino sistemi e servizi</div>
|
|
<div class="requirement-coverage">Coperto da: Org.21 - Processo Recovery</div>
|
|
<div class="requirement-process">Processo: Ripristino da backup, validazione, ritorno operatività</div>
|
|
</div>
|
|
|
|
<div class="requirement-card" onclick="location.href='postinc.html'">
|
|
<div class="requirement-header">
|
|
<div class="requirement-code">RC.CO-03<span class="essential-badge">SOLO ESSENZIALI</span></div>
|
|
<div class="requirement-gauge">
|
|
<svg width="40" height="40" viewBox="0 0 40 40">
|
|
<circle class="gauge-bg" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0"/>
|
|
<circle class="gauge-fill" cx="20" cy="20" r="16" stroke-dasharray="75.36" stroke-dashoffset="0" stroke="#3fb950"/>
|
|
</svg>
|
|
<div class="mini-needle" style="transform: translateX(-50%) rotate(135deg);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="requirement-title">Comunicazione ripristino a stakeholder</div>
|
|
<div class="requirement-coverage">Coperto da: Org.22 - Comunicazione Post-Incidente</div>
|
|
<div class="requirement-process">Processo: Informativa clienti, tempistiche, misure adottate</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<div class="section active" id="section-nav">
|
|
<div class="section-header">
|
|
<div class="section-title">Accesso Rapido alle Sezioni Operative</div>
|
|
</div>
|
|
<div class="nav-grid">
|
|
<a href="assets.html" class="nav-button">Inventario Asset</a>
|
|
<a href="risk.html" class="nav-button">Gestione Rischi</a>
|
|
<a href="org.html" class="nav-button">Struttura Organizzativa</a>
|
|
<a href="supply.html" class="nav-button">Supply Chain</a>
|
|
<a href="training.html" class="nav-button">Formazione</a>
|
|
<a href="monitor.html" class="nav-button">Monitoraggio</a>
|
|
<a href="irp.html" class="nav-button">Incident Response</a>
|
|
<a href="policy.html" class="nav-button">Politiche</a>
|
|
<a href="iam.html" class="nav-button">Identity & Access</a>
|
|
<a href="crypto.html" class="nav-button">Crittografia</a>
|
|
<a href="backup.html" class="nav-button">Backup</a>
|
|
<a href="bcp.html" class="nav-button">Business Continuity</a>
|
|
<a href="drp.html" class="nav-button">Disaster Recovery</a>
|
|
<a href="vuln.html" class="nav-button">Vulnerability Mgmt</a>
|
|
<a href="patch.html" class="nav-button">Patch Management</a>
|
|
<a href="csirt.html" class="nav-button">Notifiche CSIRT</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Tab switching
|
|
function showSection(category) {
|
|
// Update tabs
|
|
const tabs = document.querySelectorAll('.tab');
|
|
tabs.forEach(tab => tab.classList.remove('active'));
|
|
event.target.classList.add('active');
|
|
|
|
// Update sections
|
|
const sections = document.querySelectorAll('.section');
|
|
sections.forEach(section => section.classList.remove('active'));
|
|
|
|
if (category === 'all') {
|
|
sections.forEach(section => section.classList.add('active'));
|
|
} else {
|
|
const targetSection = document.getElementById('section-' + category);
|
|
if (targetSection) {
|
|
targetSection.classList.add('active');
|
|
}
|
|
// Always show navigation
|
|
document.getElementById('section-nav').classList.add('active');
|
|
}
|
|
}
|
|
|
|
// Gauge animation
|
|
function updateGauge(gaugeElement, value) {
|
|
// Validate value (0-100)
|
|
value = Math.max(0, Math.min(100, value));
|
|
|
|
// Calculate needle rotation
|
|
// Formula: rotation = -135 + (value * 2.7)
|
|
// Range: -135° to +135° (270° total)
|
|
const rotation = -135 + (value * 2.7);
|
|
|
|
// Calculate stroke dashoffset
|
|
// Circumference for 270° arc with radius 40: 188.4
|
|
// Formula: dashoffset = 188.4 * (1 - value/100)
|
|
const circumference = 188.4;
|
|
const dashoffset = circumference * (1 - value / 100);
|
|
|
|
// Update needle
|
|
const needle = gaugeElement.querySelector('.gauge-needle, .mini-needle');
|
|
if (needle) {
|
|
needle.style.transform = `translateX(-50%) rotate(${rotation}deg)`;
|
|
}
|
|
|
|
// Update progress arc
|
|
const progress = gaugeElement.querySelector('.gauge-fill');
|
|
if (progress) {
|
|
progress.setAttribute('stroke-dashoffset', dashoffset);
|
|
|
|
// Update color based on value
|
|
let color;
|
|
if (value >= 80) {
|
|
color = '#3fb950'; // Green
|
|
} else if (value >= 50) {
|
|
color = '#d29922'; // Orange
|
|
} else {
|
|
color = '#f85149'; // Red
|
|
}
|
|
progress.setAttribute('stroke', color);
|
|
}
|
|
|
|
// Update value display
|
|
const valueDisplay = gaugeElement.querySelector('.gauge-value');
|
|
if (valueDisplay) {
|
|
valueDisplay.textContent = Math.round(value);
|
|
}
|
|
}
|
|
|
|
// Initialize gauges on page load
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Main gauges
|
|
document.querySelectorAll('.gauge[data-value]').forEach(gauge => {
|
|
const value = parseInt(gauge.getAttribute('data-value'));
|
|
setTimeout(() => updateGauge(gauge, value), 100);
|
|
});
|
|
|
|
// Mini gauges (all set to 100%)
|
|
document.querySelectorAll('.requirement-gauge').forEach(gauge => {
|
|
setTimeout(() => updateGauge(gauge, 100), 100);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|