AdminGit2026/nis2-agile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FEAT] UI V3 — flotta: chrome top-nav + design system su 32 pagine app

Browse Source 
Migrazione UI dal V2 (Bootstrap Italia, sidebar) al V3 (top-nav mega-menu
navy/oro, Inter+Lucide self-host) fedele ai mockup docs/mockup Ui/.
- 32 pagine app convertite (incl. admin/*): head Inter+v3.css, chrome
  topnav-v3, contenuti in card V3, dati REALI preservati (id/data-* intatti),
  i18n/help/FAB reali invariati, nessun CDN esterno.
- v3.css: aggiunti widget condivisi (modal/toast/form/btn-variant/spinner/
  progress/tag/badge) + utility (.btn base, .text-muted, .sr-only) + alias
  variabili V2->token V3, così modali/form/toast di common.js funzionano
  ovunque senza style.css.
- maintenance.html: finestra estesa a ~12:15.
- docs/UI_V3_FLEET_BRIEF.md: ricetta operativa della flotta.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
DevEnv nis2-agile
2026-06-27 15:57:35 +02:00
co-authored by Claude Opus 4.8
parent b0fc190704
commit a4150b5389
37 changed files with 4655 additions and 4922 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/architecture.html
+59 -25
View File
@@ -3,11 +3,39 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Architettura - NIS2 Agile</title>
<!-- Bootstrap Italia v2.18.1 self-hostato (regola: MAI CDN), PRIMA di style.css cosi' il design system esistente resta autorevole -->
<link rel="stylesheet" href="/vendor/bootstrap-italia/dist/css/bootstrap-italia.min.css">
<link rel="stylesheet" href="css/style.css?v=20260618">
<title>Architettura · NIS2 Agile</title>
<!-- UI V3: Inter self-host + design system v3.css (NO Google Fonts / NO unpkg / NO Bootstrap Italia). -->
<link rel="stylesheet" href="/vendor/inter/inter.css?v=20260627">
<link rel="stylesheet" href="/css/v3.css?v=20260627">
<style>
/* ── V3 compat bridge: token del vecchio style.css → token v3.css ──
Mantiene funzionanti gli stili inline e la page-CSS qui sotto senza
ricaricare style.css (rimosso col V3). Nessun CDN. */
:root{
--primary:#1F5FA8; --primary-light:#4a9af5; --primary-dark:#1557b0; --primary-bg:#E7F0FB;
--secondary:#1E8A5A; --secondary-light:#5cb876; --secondary-bg:#E6F4EC;
--warning:#D98324; --warning-light:#fdd663; --warning-bg:#FBF1E2;
--danger:#C62828; --danger-light:#f28b82; --danger-bg:#FBE9E9;
--info:#1F5FA8; --info-bg:#E7F0FB;
--gray-50:#f8fafc; --gray-100:#f1f5f9; --gray-200:#e2e8f0; --gray-300:#cbd5e1;
--gray-400:#94a3b8; --gray-500:#64748b; --gray-600:#475569; --gray-700:#334155;
--gray-800:#1e293b; --gray-900:#0f172a;
--card-bg:#fff; --content-bg:var(--bg);
--card-shadow:var(--shadow); --card-shadow-hover:0 4px 12px rgba(0,0,0,.1),0 2px 4px rgba(0,0,0,.06);
--border-radius:8px; --border-radius-lg:12px; --border-radius-sm:4px;
--font-mono:'SF Mono','Fira Code','Consolas',monospace;
--transition-fast:150ms ease; --transition:250ms ease;
}
/* Card di base (ex style.css) per le sezioni architettura */
.arch-section .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.arch-section .card-header{padding:16px 20px;border-bottom:1px solid var(--line)}
.arch-section .card-header h3{margin:0;font-size:15px;font-weight:700}
.arch-section .card-body{padding:20px}
.badge{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:3px 9px;border-radius:6px;background:#EEF2F7;color:#5b6b80}
.badge-danger{background:var(--danger-bg);color:var(--danger)}
.badge-warning{background:var(--warning-bg);color:#9A6418}
.badge-neutral{background:#EEF2F7;color:#5b6b80}
/* ── Architecture Page Styles ────────────────────────────────── */
.arch-section {
@@ -634,18 +662,21 @@
<!-- PWA:end -->
</head>
<body>
<div class="app-layout">
<!-- Sidebar -->
<aside class="sidebar" id="sidebar"></aside>
<!-- Chrome V3 (appbar + mega-menu) iniettata da topnav-v3.js in questo host -->
<div id="topnav"></div>
<!-- Main Content -->
<main class="main-content">
<header class="content-header">
<h2>Architettura del Sistema</h2>
<div class="content-header-actions">
<span class="badge badge-neutral">v1.0</span>
</div>
</header>
<main class="wrap">
<nav class="crumb" aria-label="breadcrumb">
<i data-lucide="home" class="ic"></i><a href="dashboard.html">Home</a>
<i data-lucide="chevron-right" class="ic"></i><span>Architettura</span>
</nav>
<div class="page-head">
<div>
<h1>Architettura del Sistema</h1>
<p class="sub">Stack tecnologico, modello dati e moduli della piattaforma</p>
</div>
<span class="badge-t blue">v1.0</span>
</div>
<div class="content-body">
@@ -1087,19 +1118,22 @@
</div>
</div>
</main>
</div>
</main>
<script src="js/api.js?v=20260631"></script>
<script src="js/common.js?v=20260624g"></script>
<script src="/vendor/bootstrap-italia/dist/js/bootstrap-italia.bundle.min.js"></script>
<script src="/js/common-bi.js?v=20260625d"></script>
<script src="js/i18n.js?v=20260631"></script>
<script src="js/help.js?v=20260625d"></script>
<!-- Scripts V3: api.js → common.js (helper+FAB reali) → Lucide self-host →
topnav-v3.js (chrome, ridefinisce loadSidebar) → i18n → help -->
<script src="/js/api.js?v=20260625d"></script>
<script src="/js/common.js?v=20260627v3"></script>
<script src="/vendor/lucide/lucide.min.js"></script>
<script src="/js/topnav-v3.js?v=20260627"></script>
<script src="/js/i18n.js?v=20260631"></script>
<script src="/js/help.js?v=20260625d"></script>
<script>
if (!checkAuth()) throw new Error('Not authenticated');
loadSidebar();
I18n.init();
loadSidebar(); // = loadTopnavV3()
if (typeof I18n !== 'undefined') I18n.init();
if (typeof HelpSystem !== 'undefined') HelpSystem.init();
if (window.lucide && lucide.createIcons) { try { lucide.createIcons(); } catch (e) {} }
</script>
</body>
</html>