' +
+ var barColor = cs.percentage >= 80 ? 'var(--green)' : cs.percentage >= 60 ? 'var(--amber)' : 'var(--red)';
+ return '
' +
'
' + cs.percentage + '
' +
- '
' + (CATEGORY_LABELS[cat] || cat) + '
' +
- '
' + cs.issueCount + ' issues
' +
+ '
' + (CATEGORY_LABELS[cat] || cat) + '
' +
+ '
' +
+ '
' + cs.issueCount + '
' +
'
';
}).join('');
// Summary bar
var s = scores.summary;
+ var sevTips = { blocking: 'Cannot implement correctly without fixing. Direct impact on screen reproduction.', risk: 'Implementable now but will break or increase cost later.', missing: 'Information is absent, forcing AI to guess.', suggestion: 'Not immediately problematic, but improves systemization.' };
document.getElementById('summary-bar').innerHTML =
- '
' + s.blocking + ' Blocking
' +
- '
' + s.risk + ' Risk
' +
- '
' + s.missingInfo + ' Missing
' +
- '
' + s.suggestion + ' Suggestion
' +
+ '
' + s.blocking + ' Blocking
' +
+ '
' + s.risk + ' Risk
' +
+ '
' + s.missingInfo + ' Missing
' +
+ '
' + s.suggestion + ' Suggestion
' +
'
' + s.totalIssues + ' total
';
// Filter tabs
@@ -260,10 +264,6 @@
Ready to analyze
document.querySelectorAll('.filter-tab').forEach(function(tab) {
tab.classList.toggle('active', tab.dataset.cat === cat);
});
- // Update category card highlights
- document.querySelectorAll('.cat-card').forEach(function(card) {
- card.classList.toggle('active', card.dataset.cat === cat);
- });
if (currentResult) {
renderIssues(currentResult.issues, cat);
}
@@ -343,6 +343,41 @@
Ready to analyze
}
}
};
+
+ // ---- Tooltip (JS-based, works inside Figma iframe) ----
+ (function() {
+ var tip = document.createElement('div');
+ tip.className = 'cic-tooltip';
+ var arrow = document.createElement('div');
+ arrow.className = 'cic-tooltip-arrow';
+ document.body.appendChild(tip);
+ document.body.appendChild(arrow);
+
+ function hide() { tip.classList.remove('visible'); arrow.classList.remove('visible'); }
+
+ document.addEventListener('mouseover', function(e) {
+ var el = e.target.closest('[data-tip]');
+ if (!el) { hide(); return; }
+ tip.textContent = el.getAttribute('data-tip');
+ tip.classList.add('visible');
+ var rect = el.getBoundingClientRect();
+ var tipH = tip.offsetHeight;
+ var tipW = tip.offsetWidth;
+ var cx = rect.left + rect.width / 2;
+ var tipLeft = Math.max(4, Math.min(cx - tipW / 2, window.innerWidth - tipW - 4));
+ var above = rect.top - tipH - 10 >= 0;
+ var tipTop = above ? rect.top - tipH - 10 : rect.bottom + 10;
+ tip.style.left = tipLeft + 'px';
+ tip.style.top = tipTop + 'px';
+ arrow.style.left = (cx - 4) + 'px';
+ arrow.style.top = (above ? rect.top - 14 : rect.bottom + 6) + 'px';
+ arrow.classList.add('visible');
+ });
+ document.addEventListener('mouseleave', hide);
+ document.addEventListener('mouseout', function(e) {
+ if (!e.target.closest('[data-tip]')) hide();
+ });
+ })();