diff --git a/css/styles.css b/css/styles.css index 144330c..9aeeb7e 100644 --- a/css/styles.css +++ b/css/styles.css @@ -923,4 +923,107 @@ kbd { .warning-banner { border: 2px solid #f59e0b; } +} + +/* -------------------------------------------------------------------------- + Metric Tooltips + -------------------------------------------------------------------------- */ +.result-metric { + position: relative; + cursor: help; +} + +.metric-tooltip { + visibility: hidden; + opacity: 0; + position: absolute; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + margin-bottom: 12px; + padding: var(--space-md); + width: 280px; + background: var(--bg-primary); + border: 1px solid var(--border-color); + border-radius: var(--radius-md); + font-size: 0.8rem; + text-align: left; + z-index: 100; + box-shadow: var(--shadow-lg); + transition: opacity var(--transition-fast), visibility var(--transition-fast); +} + +.metric-tooltip::after { + content: ''; + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%); + border: 8px solid transparent; + border-top-color: var(--border-color); +} + +.result-metric:hover .metric-tooltip, +.result-metric:focus .metric-tooltip, +.result-metric:active .metric-tooltip { + visibility: visible; + opacity: 1; +} + +.metric-tooltip strong { + display: block; + margin-bottom: var(--space-sm); + color: var(--accent); + font-size: 0.85rem; +} + +.metric-tooltip p { + margin: 0 0 var(--space-sm); + color: var(--text-secondary); + line-height: 1.4; +} + +.tooltip-scale { + display: flex; + flex-direction: column; + gap: 2px; + margin: var(--space-sm) 0; + padding: var(--space-sm); + background: var(--bg-tertiary); + border-radius: var(--radius-sm); + font-family: var(--font-mono); + font-size: 0.7rem; +} + +.scale-good { + color: var(--success); +} + +.scale-ok { + color: var(--warning); +} + +.scale-bad { + color: var(--danger); +} + +.tooltip-hint { + margin-top: var(--space-sm); + padding-top: var(--space-sm); + border-top: 1px solid var(--border-color); + font-style: italic; + color: var(--text-muted); +} + +/* Mobile: tap to show tooltip */ +@media (max-width: 640px) { + .metric-tooltip { + width: 240px; + left: 0; + transform: translateX(0); + } + + .metric-tooltip::after { + left: 20%; + } } \ No newline at end of file diff --git a/index.html b/index.html index 0d0f601..b8e608c 100644 --- a/index.html +++ b/index.html @@ -199,21 +199,60 @@
-
+
- Match Score +
+ Match Score +

Combined score from capacity and IR variance, weighted by your settings.

+
+ < 0.5 = Excellent + 0.5 - 2.0 = Good + > 2.0 = Poor +
+

Lower is better

+
-
+
- Capacity CV% +
+ Capacity Coefficient of Variation +

Measures how evenly matched the total capacity of each parallel group is. CV = (σ / μ) × + 100%

+
+ < 1% = Excellent + 1 - 3% = Acceptable + > 3% = Poor balance +
+

Lower is better – ensures even discharge across series groups

+
-
+
- IR CV% +
+ Internal Resistance Variation +

Average variation of internal resistance within parallel groups. High mismatch causes + uneven current distribution.

+
+ < 5% = Excellent + 5 - 15% = Acceptable + > 20% = Risk of 40% lifetime reduction +
+

Lower is better – critical for high-drain applications

+
-
+
- Pack Capacity +
+ Effective Pack Capacity +

The usable capacity of your pack, limited by the smallest parallel group (weakest link). +

+

Formula: min(group capacities)

+

Higher is better – well-matched cells maximize this value

+
@@ -277,7 +316,7 @@ Git · Based on research by - Shi et al., 2013 + Wang et al., 2013

This tool is for educational purposes. Always consult professional guidance for battery pack assembly.