DevEnv nis2-agileandClaude Opus 4.8
36513fa722
- manifest.webmanifest + service worker (offline shell, /api network-only, asset stale-while-revalidate) - set icone (192/512 + maskable + apple-touch + favicon), generate zero-deps (pure Node+zlib) - tag PWA + viewport viewport-fit=cover (zoom mantenuto, WCAG 1.4.4) in 77 pagine HTML - AGID/WCAG 2.1 AA: touch target >=44px, orientamento/zoom liberi, safe-area standalone - generatori riproducibili: scripts/gen-pwa-icons.mjs + scripts/inject-pwa-head.mjs - bump version 1.14.1 -> 1.15.0 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
80 lines
5.2 KiB
HTML
80 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
<title>NIS2 Agile — Integrazioni</title>
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
:root {
|
|
--bg: #f8fafc; --white: #ffffff; --primary: #06b6d4;
|
|
--gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-500: #64748b;
|
|
--gray-700: #334155; --gray-900: #0f172a;
|
|
--radius: 12px; --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
|
}
|
|
body { background: var(--bg); font-family: var(--font); color: var(--gray-900); padding: 40px 24px; }
|
|
.container { max-width: 1000px; margin: 0 auto; }
|
|
h1 { font-size: 1.75rem; font-weight: 800; margin-bottom: 8px; }
|
|
p.subtitle { color: var(--gray-500); margin-bottom: 40px; }
|
|
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
|
|
.card { background: var(--white); border-radius: var(--radius); border: 1px solid var(--gray-200); padding: 28px; transition: all 0.2s; }
|
|
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
|
|
.card-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; font-size: 1.5rem; }
|
|
.card-title { font-size: 1.125rem; font-weight: 700; margin-bottom: 8px; }
|
|
.card-desc { font-size: 0.875rem; color: var(--gray-500); line-height: 1.6; margin-bottom: 20px; }
|
|
.card-link { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
|
|
.card-link:hover { text-decoration: underline; }
|
|
.badge { display: inline-flex; padding: 3px 8px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; margin-bottom: 12px; }
|
|
</style>
|
|
<!-- PWA:start -->
|
|
<link rel="manifest" href="/manifest.webmanifest">
|
|
<meta name="theme-color" content="#0066CC">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/icons/favicon-16.png">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
|
<meta name="apple-mobile-web-app-title" content="NIS2 Agile">
|
|
<meta name="application-name" content="NIS2 Agile">
|
|
<script src="/js/pwa.js?v=20260614" defer></script>
|
|
<!-- PWA:end -->
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>NIS2 Agile — Integrazioni</h1>
|
|
<p class="subtitle">Pagine di integrazione per connettere NIS2 Agile con altri prodotti della suite Agile.</p>
|
|
<div class="grid">
|
|
<div class="card">
|
|
<div class="card-icon" style="background:#f0fdf4;">📋</div>
|
|
<span class="badge" style="background:#dcfce7; color:#166534;">Webhook + Widget</span>
|
|
<div class="card-title">231 Agile ← NIS2</div>
|
|
<div class="card-desc">Integra i dati di compliance NIS2 in 231 Agile. Visualizza compliance score, rischi cyber e incidenti significativi nel contesto del Modello 231.</div>
|
|
<a href="lg231.html" class="card-link">Guida integrazione →</a>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon" style="background:#f0f9ff;">🌿</div>
|
|
<span class="badge" style="background:#e0f2fe; color:#075985;">API Widget</span>
|
|
<div class="card-title">SustainAI ← NIS2</div>
|
|
<div class="card-desc">Alimenta i report ESG/sostenibilità di SustainAI con dati di governance cybersecurity NIS2. Compliance score e policy approvate per l'area G (Governance).</div>
|
|
<a href="sustainai.html" class="card-link">Guida integrazione →</a>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon" style="background:#fef9c3;">⚡</div>
|
|
<span class="badge" style="background:#fef9c3; color:#854d0e;">REST API</span>
|
|
<div class="card-title">AllRisk ← NIS2</div>
|
|
<div class="card-desc">Esporta il risk register cyber NIS2 verso AllRisk per consolidamento nel registro rischi enterprise. Sincronizzazione automatica via API Key.</div>
|
|
<a href="allrisk.html" class="card-link">Guida integrazione →</a>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon" style="background:#faf5ff;">🔒</div>
|
|
<span class="badge" style="background:#f3e8ff; color:#6b21a8;">SIEM</span>
|
|
<div class="card-title">SIEM / SOC</div>
|
|
<div class="card-desc">Integra NIS2 Agile con SIEM (Splunk, Elastic, IBM QRadar) tramite webhook outbound. Ricevi eventi incident.created, risk.high_created in tempo reale.</div>
|
|
<a href="siem.html" class="card-link">Guida integrazione →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|