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

[UX] FAB feedback: pill cyan con label, animazione pulse, stile lg231

Browse Source
This commit is contained in:
DevEnv nis2-agile 2026-03-10 11:27:19 +01:00
parent 397d6a88d2
commit 4143dd31d3
2 changed files with 27 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
public/css/style.css
View File

@ -1972,34 +1972,44 @@ tbody tr.clickable:active {
Sistema Segnalazioni & Risoluzione AI (feedback.js) Sistema Segnalazioni & Risoluzione AI (feedback.js)
═══════════════════════════════════════════════════════════════════ */ ═══════════════════════════════════════════════════════════════════ */
/* FAB */ /* FAB — Segnalazioni & Bug Report */
@keyframes fab-pulse {
0% { box-shadow: 0 0 0 0 rgba(6,182,212,.55), 0 4px 16px rgba(6,182,212,.35); }
70% { box-shadow: 0 0 0 10px rgba(6,182,212,0), 0 4px 16px rgba(6,182,212,.35); }
100% { box-shadow: 0 0 0 0 rgba(6,182,212,0), 0 4px 16px rgba(6,182,212,.35); }
}
#feedback-fab { #feedback-fab {
position: fixed; position: fixed;
bottom: 28px; bottom: 28px;
right: 28px; right: 28px;
z-index: 8000; z-index: 8000;
width: 52px; display: flex;
height: 52px; align-items: center;
border-radius: 50%; gap: 8px;
background: #ef4444; padding: 0 18px 0 14px;
height: 48px;
border-radius: 24px;
background: #06B6D4;
color: #fff; color: #fff;
border: none; border: none;
cursor: pointer; cursor: pointer;
box-shadow: 0 4px 16px rgba(239,68,68,.4); font-size: .85rem;
display: flex; font-weight: 700;
align-items: center; font-family: inherit;
justify-content: center; letter-spacing: .02em;
font-size: 1.1rem; white-space: nowrap;
box-shadow: 0 4px 16px rgba(6,182,212,.35);
animation: fab-pulse 2.5s ease-in-out infinite;
transition: background .2s, transform .15s, box-shadow .2s; transition: background .2s, transform .15s, box-shadow .2s;
} }
#feedback-fab i { font-size: 1rem; }
#feedback-fab:hover { #feedback-fab:hover {
background: #dc2626; background: #0891b2;
transform: scale(1.08); transform: scale(1.05);
box-shadow: 0 6px 20px rgba(239,68,68,.5); animation: none;
} box-shadow: 0 6px 22px rgba(6,182,212,.55);
#feedback-fab:active {
transform: scale(.96);
} }
#feedback-fab:active { transform: scale(.97); }
/* Overlay */ /* Overlay */
.feedback-overlay { .feedback-overlay {

2
public/js/feedback.js
View File

@ -67,7 +67,7 @@
fab.id = 'feedback-fab'; fab.id = 'feedback-fab';
fab.type = 'button'; fab.type = 'button';
fab.title = 'Segnala un problema o suggerisci un miglioramento'; fab.title = 'Segnala un problema o suggerisci un miglioramento';
fab.innerHTML = '<i class="fas fa-comment-alt"></i>'; fab.innerHTML = '<i class="fas fa-comment-medical"></i><span>Segnala / Feedback</span>';
fab.setAttribute('aria-label', 'Segnala problema'); fab.setAttribute('aria-label', 'Segnala problema');
document.body.appendChild(fab); document.body.appendChild(fab);
} }