[DOCS+I18N] Guida aggiornata, i18n idle timeout, 3 documenti commerciali

- help.js: aggiornate sezioni per idle timeout, banner AI dismissible, matrice rischi real-time
- i18n.js: aggiunte 5 chiavi session.* per idle timeout (IT/EN)
- common.js: _showIdleWarning() usa I18n.t() per testi IT/EN
- docs/commercial/scheda-commerciale.html: scheda A4 stampabile (problema/soluzione, moduli, AI, target)
- docs/commercial/scheda-tecnica.html: specifiche stack, architettura, API, DB, sicurezza, deploy
- docs/commercial/presentazione.html: presentazione 10 slide completa (contesto, moduli, AI, compliance, ROI, roadmap)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
DevEnv nis2-agile
2026-02-20 12:43:17 +01:00
co-authored by Claude Sonnet 4.6
parent 59fad22c0e
commit 1bfca3fbe3
6 changed files with 2323 additions and 10 deletions
+499
View File
@@ -0,0 +1,499 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NIS2 Agile — Scheda Commerciale</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', Arial, sans-serif;
background: #fff;
color: #1a1a2e;
font-size: 13px;
line-height: 1.5;
}
/* ── Layout A4 ── */
.page {
width: 210mm;
min-height: 297mm;
margin: 0 auto;
padding: 0;
background: #fff;
position: relative;
overflow: hidden;
}
/* ── Header ── */
.header {
background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 60%, #1565c0 100%);
padding: 32px 40px 28px;
position: relative;
overflow: hidden;
}
.header::before {
content: '';
position: absolute;
right: -60px; top: -60px;
width: 200px; height: 200px;
border-radius: 50%;
background: rgba(255,255,255,0.06);
}
.header::after {
content: '';
position: absolute;
right: 40px; bottom: -40px;
width: 140px; height: 140px;
border-radius: 50%;
background: rgba(255,255,255,0.04);
}
.logo-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.logo-icon {
width: 42px; height: 42px;
background: rgba(255,255,255,0.15);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
}
.logo-icon svg { width: 26px; height: 26px; fill: #fff; }
.logo-text h1 { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.5px; }
.logo-text span { font-size: 10px; color: rgba(255,255,255,0.7); letter-spacing: 1px; text-transform: uppercase; }
.tagline {
font-size: 19px;
font-weight: 700;
color: #fff;
line-height: 1.3;
max-width: 420px;
margin-bottom: 10px;
}
.sub-tagline {
font-size: 12px;
color: rgba(255,255,255,0.8);
max-width: 400px;
}
.badge-row {
display: flex;
gap: 8px;
margin-top: 16px;
flex-wrap: wrap;
}
.badge {
background: rgba(255,255,255,0.15);
color: #fff;
font-size: 10px;
font-weight: 700;
padding: 4px 10px;
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.25);
letter-spacing: 0.3px;
}
/* ── Problema / Soluzione ── */
.problem-solution {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-bottom: 1px solid #e8edf3;
}
.problem {
background: #fef2f2;
padding: 20px 24px;
border-right: 1px solid #fecaca;
}
.solution {
background: #f0fdf4;
padding: 20px 24px;
}
.ps-label {
font-size: 9px;
font-weight: 800;
letter-spacing: 1.2px;
text-transform: uppercase;
margin-bottom: 8px;
}
.problem .ps-label { color: #dc2626; }
.solution .ps-label { color: #16a34a; }
.ps-title {
font-size: 13px;
font-weight: 700;
margin-bottom: 10px;
}
.problem .ps-title { color: #991b1b; }
.solution .ps-title { color: #14532d; }
.ps-list { list-style: none; padding: 0; }
.ps-list li {
font-size: 11.5px;
padding: 3px 0 3px 16px;
position: relative;
color: #374151;
}
.ps-list li::before {
content: '';
position: absolute;
left: 0; top: 9px;
width: 5px; height: 5px;
border-radius: 50%;
}
.problem .ps-list li::before { background: #dc2626; }
.solution .ps-list li::before { background: #16a34a; }
/* ── Funzionalità ── */
.features-section {
padding: 22px 40px;
}
.section-title {
font-size: 11px;
font-weight: 800;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #1a73e8;
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 2px solid #e8edf3;
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.feature-card {
background: #f8faff;
border: 1px solid #e0eaff;
border-radius: 8px;
padding: 14px;
}
.feature-icon {
width: 32px; height: 32px;
background: #1a73e8;
border-radius: 7px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 8px;
}
.feature-icon svg { width: 17px; height: 17px; fill: #fff; }
.feature-name {
font-size: 11px;
font-weight: 700;
color: #0d47a1;
margin-bottom: 4px;
}
.feature-desc {
font-size: 10.5px;
color: #4b5563;
line-height: 1.5;
}
.feature-tag {
display: inline-block;
background: #dbeafe;
color: #1d4ed8;
font-size: 9px;
font-weight: 700;
padding: 2px 7px;
border-radius: 10px;
margin-top: 6px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
/* ── Target ── */
.target-section {
background: #f8faff;
border-top: 1px solid #e0eaff;
padding: 18px 40px;
}
.target-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 12px;
}
.target-card {
background: #fff;
border: 1px solid #e0eaff;
border-radius: 8px;
padding: 12px 14px;
display: flex;
gap: 10px;
align-items: flex-start;
}
.target-num {
width: 26px; height: 26px;
background: linear-gradient(135deg, #1a73e8, #0d47a1);
color: #fff;
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
font-size: 12px;
font-weight: 800;
flex-shrink: 0;
}
.target-name { font-size: 11px; font-weight: 700; color: #1a1a2e; margin-bottom: 2px; }
.target-desc { font-size: 10px; color: #6b7280; }
/* ── AI Section ── */
.ai-section {
border-top: 1px solid #e8edf3;
padding: 18px 40px;
background: linear-gradient(135deg, #fdf4ff 0%, #f0f9ff 100%);
display: flex;
gap: 20px;
align-items: center;
}
.ai-icon-wrap {
width: 52px; height: 52px;
background: linear-gradient(135deg, #7c3aed, #2563eb);
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.ai-icon-wrap svg { width: 28px; height: 28px; fill: #fff; }
.ai-title { font-size: 14px; font-weight: 800; color: #4c1d95; margin-bottom: 4px; }
.ai-desc { font-size: 11px; color: #5b21b6; line-height: 1.5; }
.ai-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ai-chip {
background: rgba(124,58,237,0.1);
color: #6d28d9;
font-size: 9.5px;
font-weight: 600;
padding: 3px 8px;
border-radius: 10px;
border: 1px solid rgba(124,58,237,0.2);
}
/* ── Stats ── */
.stats-bar {
background: #0d47a1;
padding: 14px 40px;
display: flex;
justify-content: space-around;
align-items: center;
}
.stat-item { text-align: center; }
.stat-num { font-size: 20px; font-weight: 800; color: #fff; }
.stat-label { font-size: 9px; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.5px; }
.stat-sep { width: 1px; height: 32px; background: rgba(255,255,255,0.2); }
/* ── Footer ── */
.footer {
border-top: 1px solid #e8edf3;
padding: 14px 40px;
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
}
.footer-brand { font-size: 12px; font-weight: 800; color: #1a73e8; }
.footer-url { font-size: 11px; color: #6b7280; }
.footer-compliance {
font-size: 9px;
color: #9ca3af;
text-align: right;
line-height: 1.4;
}
@media print {
body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.page { width: 100%; margin: 0; }
}
</style>
</head>
<body>
<div class="page">
<!-- HEADER -->
<div class="header">
<div class="logo-row">
<div class="logo-icon">
<svg viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 2.18l7 3.12v4.7c0 4.83-3.23 9.36-7 10.57C8.23 20.36 5 15.83 5 11V6.3l7-3.12zM10 12.5l-2-2-1.41 1.41L10 15.32l5.41-5.41L14 8.5l-4 4z"/></svg>
</div>
<div class="logo-text">
<h1>NIS2 Agile</h1>
<span>Compliance Platform</span>
</div>
</div>
<div class="tagline">La piattaforma SaaS che rende semplice la conformità alla Direttiva NIS2</div>
<div class="sub-tagline">Gestione integrata di rischi, incidenti, policy e audit — con AI integrata — per soggetti essenziali e importanti ai sensi del D.Lgs. 138/2024</div>
<div class="badge-row">
<span class="badge">D.Lgs. 138/2024</span>
<span class="badge">Direttiva UE 2022/2555</span>
<span class="badge">AI Powered</span>
<span class="badge">Multi-Tenant SaaS</span>
<span class="badge">ISO 27001 Aligned</span>
</div>
</div>
<!-- PROBLEMA / SOLUZIONE -->
<div class="problem-solution">
<div class="problem">
<div class="ps-label">Il Problema</div>
<div class="ps-title">La NIS2 è obbligatoria. La compliance è complessa.</div>
<ul class="ps-list">
<li>Sanzioni fino a €10M o 2% fatturato globale</li>
<li>Responsabilità personale dei dirigenti</li>
<li>Obblighi stringenti su notifiche, rischi, policy, formazione</li>
<li>Processi dispersi tra Excel, email e documenti non strutturati</li>
<li>Assenza di visibilità real-time sul livello di compliance</li>
</ul>
</div>
<div class="solution">
<div class="ps-label">La Soluzione</div>
<div class="ps-title">NIS2 Agile centralizza e automatizza tutto.</div>
<ul class="ps-list">
<li>Gap analysis automatica sui 10 requisiti Art. 21</li>
<li>Gestione incidenti con timeline Art. 23 (24h/72h/30gg)</li>
<li>Risk register con matrice ISO 27005</li>
<li>Policy generate dall'AI e approvabili con un clic</li>
<li>Dashboard di compliance con score aggiornato in real-time</li>
</ul>
</div>
</div>
<!-- FUNZIONALITÀ CHIAVE -->
<div class="features-section">
<div class="section-title">Moduli Inclusi</div>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 20 20"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm9.707 5.707a1 1 0 00-1.414-1.414L9 12.586l-1.293-1.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
</div>
<div class="feature-name">Gap Analysis NIS2</div>
<div class="feature-desc">Wizard di assessment con 80 domande sui 10 requisiti Art. 21. Punteggio automatico e report di priorità.</div>
<span class="feature-tag">Art. 21</span>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 1.944A11.954 11.954 0 012.166 5C2.056 5.649 2 6.319 2 7c0 5.225 3.34 9.67 8 11.317C14.66 16.67 18 12.225 18 7c0-.682-.057-1.35-.166-2.001A11.954 11.954 0 0110 1.944zM11 14a1 1 0 11-2 0 1 1 0 012 0zm0-7a1 1 0 10-2 0v3a1 1 0 102 0V7z" clip-rule="evenodd"/></svg>
</div>
<div class="feature-name">Gestione Rischi</div>
<div class="feature-desc">Risk register completo con matrice 5×5, trattamenti e ownership. Conforme ISO 27005.</div>
<span class="feature-tag">ISO 27005</span>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 20 20"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"/></svg>
</div>
<div class="feature-name">Gestione Incidenti</div>
<div class="feature-desc">Timeline automatica 24h/72h/30gg con notifiche CSIRT. Decision tree per incidenti significativi.</div>
<span class="feature-tag">Art. 23</span>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"/></svg>
</div>
<div class="feature-name">Policy Management</div>
<div class="feature-desc">Ciclo di vita completo con approvazione. Template per tutte le categorie NIS2.</div>
<span class="feature-tag">Art. 21</span>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 20 20"><path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd"/></svg>
</div>
<div class="feature-name">Supply Chain Security</div>
<div class="feature-desc">Valutazione fornitori critici con scoring automatico e monitoraggio scadenze contrattuali.</div>
<span class="feature-tag">Art. 21(d)</span>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 20 20"><path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zm6-4a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zm6-3a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"/></svg>
</div>
<div class="feature-name">Audit & Report</div>
<div class="feature-desc">Audit log immutabile, evidenze allegabili, report esecutivo e export CSV multi-modulo.</div>
<span class="feature-tag">Art. 32-33</span>
</div>
</div>
</div>
<!-- AI SECTION -->
<div class="ai-section">
<div class="ai-icon-wrap">
<svg viewBox="0 0 20 20"><path d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zm7-10a1 1 0 01.967.744L14.146 7.2 17.5 8.512a1 1 0 010 1.836l-3.354 1.311-1.18 4.456a1 1 0 01-1.932 0L9.854 11.66 6.5 10.348a1 1 0 010-1.836l3.354-1.311 1.18-4.456A1 1 0 0112 2z"/></svg>
</div>
<div>
<div class="ai-title">AI Integrata con Claude (Anthropic)</div>
<div class="ai-desc">NIS2 Agile integra l'AI generativa per ridurre drasticamente il tempo dedicato alla compliance. L'AI analizza i gap, suggerisce rischi specifici per settore, genera policy complete e classifica automaticamente la gravità degli incidenti.</div>
<div class="ai-chips">
<span class="ai-chip">Gap Analysis AI</span>
<span class="ai-chip">Risk Suggest AI</span>
<span class="ai-chip">Policy Generate AI</span>
<span class="ai-chip">Incident Classify AI</span>
<span class="ai-chip">Dati anonimizzati</span>
</div>
</div>
</div>
<!-- STATS BAR -->
<div class="stats-bar">
<div class="stat-item">
<div class="stat-num">15</div>
<div class="stat-label">Moduli Integrati</div>
</div>
<div class="stat-sep"></div>
<div class="stat-item">
<div class="stat-num">80</div>
<div class="stat-label">Domande Assessment</div>
</div>
<div class="stat-sep"></div>
<div class="stat-item">
<div class="stat-num">22</div>
<div class="stat-label">Tabelle DB / 7 Ruoli</div>
</div>
<div class="stat-sep"></div>
<div class="stat-item">
<div class="stat-num">100%</div>
<div class="stat-label">Art. 21 Copertura</div>
</div>
<div class="stat-sep"></div>
<div class="stat-item">
<div class="stat-num">SaaS</div>
<div class="stat-label">Multi-Tenant</div>
</div>
</div>
<!-- TARGET -->
<div class="target-section">
<div class="section-title">A chi è destinato</div>
<div class="target-grid">
<div class="target-card">
<div class="target-num">1</div>
<div>
<div class="target-name">PMI — Soggetti Importanti</div>
<div class="target-desc">Medie imprese nei settori Allegato I e II che necessitano di compliance NIS2 strutturata senza un team IT dedicato.</div>
</div>
</div>
<div class="target-card">
<div class="target-num">2</div>
<div>
<div class="target-name">Enterprise — Soggetti Essenziali</div>
<div class="target-desc">Grandi organizzazioni in settori critici (energia, trasporti, sanità, finanza, ICT) soggette a vigilanza proattiva AGID/ACN.</div>
</div>
</div>
<div class="target-card">
<div class="target-num">3</div>
<div>
<div class="target-name">Consulenti & CISO</div>
<div class="target-desc">Consulenti di sicurezza e CISO che gestiscono la compliance NIS2 per conto di più organizzazioni clienti da un'unica piattaforma.</div>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
<div class="footer">
<div>
<div class="footer-brand">NIS2 Agile</div>
<div class="footer-url">nis2.certisource.it</div>
</div>
<div class="footer-compliance">
Conforme a D.Lgs. 138/2024 (recepimento Direttiva UE 2022/2555)<br>
Allineato ISO 27001 · GDPR · ACN Framework
</div>
</div>
</div>
</body>
</html>