[FEAT] UI: guida online, landing EN, mobile-conversion, ai-assistant, bug-reporter + help/i18n
- public/guida.html, index-en.html, service-continuity.html - public/js/ai-assistant.js, bug-reporter.js (FAB supporto) - public/mobile-conversion.css/js - index.html, common.js, help.js, risks.html: aggiornamenti UI/help Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
DevEnv nis2-agile
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
c0bf7b6c15
commit
1d934e4e63
@@ -0,0 +1,189 @@
|
||||
/* ════════════════════════════════════════════════════════════════
|
||||
* Mobile Conversion Layer — Agile Technology suite
|
||||
* Riutilizzabile su EViX, QSA, NIS2, TRPG, LG231, ecc.
|
||||
* Si attiva SOLO su mobile (≤768px) — desktop invariato.
|
||||
* Classi prefissate .mobconv-* per zero conflitti con CSS host.
|
||||
* ════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── Variabili di tema (override via inline style sul container) ── */
|
||||
:root {
|
||||
--mobconv-accent: #E31E24;
|
||||
--mobconv-accent2: #B71518;
|
||||
--mobconv-bg: #0A0A0A;
|
||||
--mobconv-text: #FFFFFF;
|
||||
--mobconv-sub: rgba(255,255,255,0.75);
|
||||
--mobconv-border: rgba(255,255,255,0.12);
|
||||
}
|
||||
|
||||
/* ── Sticky CTA bar (bottom) — visibile solo mobile ────────────── */
|
||||
.mobconv-sticky {
|
||||
display: none; /* nascosta di default */
|
||||
position: fixed;
|
||||
left: 0; right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9990;
|
||||
background: linear-gradient(180deg, rgba(10,10,10,0.96), rgba(10,10,10,1));
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
border-top: 1px solid var(--mobconv-border);
|
||||
padding: 10px 16px;
|
||||
padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
|
||||
box-shadow: 0 -8px 32px rgba(0,0,0,0.45);
|
||||
transform: translateY(100%);
|
||||
transition: transform .28s ease;
|
||||
}
|
||||
.mobconv-sticky-row { max-width: 540px; margin: 0 auto; }
|
||||
.mobconv-cta { max-width: 100%; }
|
||||
/* iPhone XS / SE: padding ridotto per non sovrastare */
|
||||
@media (max-width: 380px) {
|
||||
.mobconv-sticky { padding: 8px 12px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
|
||||
.mobconv-cta { font-size: 14px !important; padding: 0 12px !important; min-height: 44px !important; }
|
||||
.mobconv-pill { min-height: 44px !important; min-width: 44px !important; }
|
||||
}
|
||||
.mobconv-sticky.show { transform: translateY(0); }
|
||||
|
||||
.mobconv-sticky-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.mobconv-pill {
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 48px;
|
||||
min-height: 48px;
|
||||
padding: 0 12px;
|
||||
border-radius: 14px;
|
||||
background: rgba(255,255,255,0.08);
|
||||
color: var(--mobconv-text);
|
||||
border: 1px solid var(--mobconv-border);
|
||||
text-decoration: none;
|
||||
font-size: 18px;
|
||||
transition: background .15s, transform .15s;
|
||||
}
|
||||
.mobconv-pill:active { transform: scale(0.96); background: rgba(255,255,255,0.14); }
|
||||
.mobconv-pill.wa { background: rgba(37,211,102,0.18); border-color: rgba(37,211,102,0.45); color: #25D366; }
|
||||
|
||||
.mobconv-cta {
|
||||
flex: 1 1 auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
min-height: 48px;
|
||||
padding: 0 16px;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, var(--mobconv-accent), var(--mobconv-accent2));
|
||||
color: #FFFFFF;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
font-size: 14.5px;
|
||||
letter-spacing: 0.01em;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06) inset;
|
||||
transition: transform .15s;
|
||||
}
|
||||
.mobconv-cta:active { transform: scale(0.98); }
|
||||
|
||||
/* ── WhatsApp FAB (alternativa standalone — usabile su Diamante-like) ── */
|
||||
.mobconv-wa-fab {
|
||||
display: none;
|
||||
position: fixed;
|
||||
right: 16px;
|
||||
bottom: calc(20px + env(safe-area-inset-bottom, 0px));
|
||||
z-index: 9980;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
background: #25D366;
|
||||
color: white;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
font-size: 26px;
|
||||
box-shadow: 0 8px 28px rgba(37,211,102,0.45);
|
||||
transition: transform .2s, box-shadow .2s;
|
||||
animation: mobconv-pulse 2.4s ease-out infinite;
|
||||
}
|
||||
.mobconv-wa-fab:active { transform: scale(0.92); }
|
||||
@keyframes mobconv-pulse {
|
||||
0% { box-shadow: 0 8px 28px rgba(37,211,102,0.45), 0 0 0 0 rgba(37,211,102,0.55); }
|
||||
70% { box-shadow: 0 8px 28px rgba(37,211,102,0.45), 0 0 0 18px rgba(37,211,102,0); }
|
||||
100% { box-shadow: 0 8px 28px rgba(37,211,102,0.45), 0 0 0 0 rgba(37,211,102,0); }
|
||||
}
|
||||
|
||||
/* ── Trust ribbon (sotto hero su mobile, opzionale) ─────────────── */
|
||||
.mobconv-trust {
|
||||
display: none;
|
||||
background: linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.02));
|
||||
border-top: 1px solid rgba(0,0,0,0.06);
|
||||
border-bottom: 1px solid rgba(0,0,0,0.06);
|
||||
padding: 14px 12px;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.mobconv-trust::-webkit-scrollbar { display: none; }
|
||||
.mobconv-trust-row {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
white-space: nowrap;
|
||||
padding: 0 4px;
|
||||
}
|
||||
.mobconv-trust-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
color: rgba(0,0,0,0.7);
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
.mobconv-trust-item::before {
|
||||
content: "✓";
|
||||
color: var(--mobconv-accent);
|
||||
font-weight: 900;
|
||||
font-size: 11px;
|
||||
}
|
||||
.mobconv-trust-item:not(:first-child)::after {
|
||||
content: "·";
|
||||
color: rgba(0,0,0,0.25);
|
||||
margin-left: 18px;
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
}
|
||||
/* Variante dark per siti dark-theme */
|
||||
.mobconv-trust.dark {
|
||||
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
|
||||
border-top-color: rgba(255,255,255,0.08);
|
||||
border-bottom-color: rgba(255,255,255,0.08);
|
||||
}
|
||||
.mobconv-trust.dark .mobconv-trust-item { color: rgba(255,255,255,0.85); }
|
||||
.mobconv-trust.dark .mobconv-trust-item:not(:first-child)::after { color: rgba(255,255,255,0.2); }
|
||||
|
||||
/* ── Mobile-only: attiva tutto sotto i 768px ─────────────────────── */
|
||||
@media (max-width: 768px) {
|
||||
.mobconv-sticky { display: block; }
|
||||
.mobconv-wa-fab[data-enabled="true"] { display: inline-flex; }
|
||||
/* Hide WA FAB quando sticky è visibile (ridondante) */
|
||||
.mobconv-sticky.show ~ .mobconv-wa-fab { display: none !important; }
|
||||
.mobconv-trust { display: block; }
|
||||
|
||||
/* iOS: no zoom su input/select (font-size ≥16px) */
|
||||
input, select, textarea {
|
||||
font-size: max(16px, 1rem) !important;
|
||||
}
|
||||
|
||||
/* Spazio extra in bottom della pagina per non coprire CTA esistenti */
|
||||
body.mobconv-padded {
|
||||
padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Su desktop nasconde TUTTO senza margine d'errore */
|
||||
@media (min-width: 769px) {
|
||||
.mobconv-sticky, .mobconv-wa-fab, .mobconv-trust { display: none !important; }
|
||||
}
|
||||
Reference in New Issue
Block a user