diff --git a/css/styles.css b/css/styles.css index 23a376d..144330c 100644 --- a/css/styles.css +++ b/css/styles.css @@ -444,17 +444,89 @@ output { transition: width var(--transition-normal); } -.progress-stats { - display: flex; - flex-wrap: wrap; - gap: var(--space-lg); - font-size: 0.875rem; - color: var(--text-secondary); +.progress-stats-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); + gap: var(--space-md); + margin-bottom: var(--space-lg); } -.progress-stats strong { - color: var(--text-primary); +.stat-item { + display: flex; + flex-direction: column; + align-items: center; + padding: var(--space-md); + background: var(--bg-tertiary); + border-radius: var(--radius-md); + text-align: center; +} + +.stat-label { + font-size: 0.7rem; + text-transform: uppercase; + letter-spacing: 0.5px; + color: var(--text-muted); + margin-bottom: var(--space-xs); +} + +.stat-value { + font-size: 1.1rem; + font-weight: 600; font-family: var(--font-mono); + color: var(--text-primary); +} + +.stat-highlight { + color: var(--accent); +} + +/* Live Preview */ +.live-preview { + margin-top: var(--space-lg); + padding: var(--space-md); + background: var(--bg-tertiary); + border-radius: var(--radius-md); + border: 1px dashed var(--border-color); +} + +.live-preview h3 { + margin: 0 0 var(--space-sm); + font-size: 0.8rem; + text-transform: uppercase; + letter-spacing: 0.5px; + color: var(--text-muted); +} + +.live-preview-content { + display: flex; + flex-wrap: wrap; + gap: var(--space-sm); + font-family: var(--font-mono); + font-size: 0.8rem; +} + +.live-preview-group { + display: inline-flex; + align-items: center; + gap: var(--space-xs); + padding: var(--space-xs) var(--space-sm); + background: var(--bg-secondary); + border-radius: var(--radius-sm); + border: 1px solid var(--border-color); +} + +.live-preview-group .group-label { + color: var(--text-muted); + font-weight: 600; +} + +.live-preview-group .group-cells { + color: var(--text-primary); +} + +.live-preview-group .group-cap { + color: var(--accent); + margin-left: var(--space-xs); } /* -------------------------------------------------------------------------- diff --git a/index.html b/index.html index 7be6a21..0d0f601 100644 --- a/index.html +++ b/index.html @@ -136,14 +136,41 @@
-This tool is for educational purposes. Always consult professional guidance for battery pack assembly. @@ -277,7 +303,6 @@ -