[UI] Bootstrap Italia rollout (Opzione B) — vendor self-hostato + 16 pagine -bi + sidebar BI
Pipeline a trittici (Esecutore->Revisore->Controllore avversariale), 6 trittici T1-T6. Tutto ADDITIVO: nessuna pagina/JS live modificata, produzione intatta. Swap non incluso. - public/vendor/bootstrap-italia/ : BI v2.18.1 self-hostato (CSS+JS bundle+16 woff2+sprite), MAI CDN - 16 pagine *-bi.html (login/register/onboarding/forgot/reset/index + dashboard/assessment/ risks/incidents/policies/supply-chain/training/assets/reports/settings) - public/js/common-bi.js : sidebar/topbar in markup BI (additivo, riusa stessi ID + common.js) - Verifica sul path servito reale: 16/16 -> 200, 0 CDN, 0 FontAwesome residui, parita ID/hook completa, WCAG AA - docs/SISTEMA_TRITTICI_AGENTI.md : design del sistema a trittici Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.8
parent
06c94b3c05
commit
4d676f2e21
@@ -0,0 +1,70 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Demo Sidebar BI - NIS2 Agile</title>
|
||||
|
||||
<!-- Bootstrap Italia v2.18.1 SELF-HOSTATO da /vendor (regola "MAI CDN") -->
|
||||
<link rel="stylesheet" href="vendor/bootstrap-italia/dist/css/bootstrap-italia.min.css">
|
||||
<!-- Stile applicativo NIS2: fornisce le classi della sidebar (.sidebar-nav, .sidebar-brand, ecc.)
|
||||
riusate dal markup BI per parità visiva con la chrome di produzione -->
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<style>
|
||||
/* Solo layout della pagina demo: niente colori custom (vengono da BI/style.css) */
|
||||
body { margin: 0; }
|
||||
.app-shell { display: flex; min-height: 100vh; }
|
||||
#sidebar { flex: 0 0 auto; }
|
||||
.app-main { flex: 1; padding: 32px; min-width: 0; }
|
||||
.demo-note {
|
||||
border-left: 4px solid #06c; background: #f0f6fc;
|
||||
padding: 16px 20px; border-radius: 8px; margin-bottom: 24px;
|
||||
}
|
||||
.demo-note h1 { font-size: 1.25rem; margin: 0 0 8px; color: #17324d; }
|
||||
.demo-note p { margin: 0; color: #5b6772; font-size: .9rem; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-shell">
|
||||
<!-- La sidebar BI viene renderizzata qui da common-bi.js (loadSidebar override) -->
|
||||
<aside id="sidebar" class="sidebar" aria-label="Barra di navigazione laterale"></aside>
|
||||
|
||||
<main class="app-main">
|
||||
<div class="demo-note">
|
||||
<h1>Demo Sidebar Bootstrap Italia</h1>
|
||||
<p>
|
||||
Questa pagina dimostra la sidebar generata da <code>js/common-bi.js</code>
|
||||
(override di <code>loadSidebar()</code> con markup Bootstrap Italia,
|
||||
voci/icone/permessi identici a <code>common.js</code>). Nessuna chiamata
|
||||
backend: stessa logica JS, stessi id/elementi DOM.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="text-muted">
|
||||
Le voci utente/azienda/versione nel footer della sidebar si popolano via
|
||||
<code>api.getMe()</code> quando è presente una sessione autenticata; in questa
|
||||
demo restano ai valori di default (parità funzionale, nessun errore).
|
||||
</p>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap Italia JS (bundle locale) -->
|
||||
<script src="vendor/bootstrap-italia/dist/js/bootstrap-italia.bundle.min.js"></script>
|
||||
<script>
|
||||
if (window.bootstrap && bootstrap.loadFonts) {
|
||||
bootstrap.loadFonts('vendor/bootstrap-italia/dist/fonts');
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Stessa logica della app: api.js + common.js (helper) + common-bi.js (override BI) -->
|
||||
<script src="js/api.js"></script>
|
||||
<script src="js/common.js"></script>
|
||||
<script src="js/common-bi.js"></script>
|
||||
<script>
|
||||
// Renderizza la sidebar BI (loadSidebar è stato ridefinito da common-bi.js)
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
loadSidebar();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user