diff --git a/index.html b/index.html index a6ee261..99b5b62 100644 --- a/index.html +++ b/index.html @@ -914,15 +914,29 @@ gap: 6px; } .roi-ladder-step { - padding: 6px 14px; - border-radius: 20px; - font-size: 0.82rem; - font-weight: 600; - background: var(--bg); - border: 1px solid var(--border); - color: var(--text-muted); - opacity: 0.5; - transition: all 0.3s; + padding: 6px 14px; + border-radius: 20px; + font-size: 0.82rem; + font-weight: 600; + background: var(--bg); + border: 1px solid var(--border); + color: var(--text-muted); + opacity: 0.5; + } + .roi-location-badge { + background: linear-gradient(135deg,rgba(99,102,241,0.15),rgba(139,92,246,0.15)); + border: 1px solid rgba(99,102,241,0.3); + border-radius: 8px; + padding: 8px 14px; + margin-bottom: 12px; + font-size: 0.9rem; + color: #e2e8f0; + display: inline-block; + } + .roi-location-badge span { + color: #818cf8; + font-weight: 600; + } } .roi-ladder-step.active { background: rgba(108,92,231,0.2); @@ -1398,6 +1412,7 @@
🪜 Your Ladder — Where You Are vs Endgame
+
📌 You are here — —
L1
L2+L1
@@ -2189,6 +2204,14 @@ function updateROI() { // Ladder visualization const ladderOrder = ['l1','l2l1','l3l1','l4','l4l3','l5','l5l3','l6','l6l3','l7solo','l7x3']; const phaseIndex = ladderOrder.indexOf(phase); + // Location badge + const phaseNames = { + l1:'L1 Only', l2l1:'L2 + L1', l3l1:'L3 + L1', l4:'L4 Only', + l4l3:'L4 + L3 Hybrid', l5:'L5 Only', l5l3:'L5 + L3 Hybrid', + l6:'L6 Only', l6l3:'L6 + L3 Hybrid', l7solo:'L7 Solo', l7x3:'3× L7 Endgame' + }; + document.getElementById('roiHerePhase').textContent = phase && phaseNames[phase] ? phaseNames[phase] : '—'; + document.querySelectorAll('.roi-ladder-step').forEach(el => { el.classList.remove('active', 'passed'); const idx = ladderOrder.indexOf(el.dataset.phase);