marty/cbp-calculator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add '📌 You are here — L4+L3 Hybrid' badge above ladder on My Progress tab

Browse Source
This commit is contained in:
Marty Bostick
2026-07-29 16:18:50 +00:00
parent 772b617fe0
commit 67fd804ee0
1 changed files with 32 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+32 -9
View File
@@ -914,15 +914,29 @@
gap: 6px; gap: 6px;
} }
.roi-ladder-step { .roi-ladder-step {
padding: 6px 14px; padding: 6px 14px;
border-radius: 20px; border-radius: 20px;
font-size: 0.82rem; font-size: 0.82rem;
font-weight: 600; font-weight: 600;
background: var(--bg); background: var(--bg);
border: 1px solid var(--border); border: 1px solid var(--border);
color: var(--text-muted); color: var(--text-muted);
opacity: 0.5; opacity: 0.5;
transition: all 0.3s; }
.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 { .roi-ladder-step.active {
background: rgba(108,92,231,0.2); background: rgba(108,92,231,0.2);
@@ -1398,6 +1412,7 @@
<!-- Phase Tracker --> <!-- Phase Tracker -->
<div class="roi-phase-tracker"> <div class="roi-phase-tracker">
<div class="roi-phase-title">🪜 Your Ladder — Where You Are vs Endgame</div> <div class="roi-phase-title">🪜 Your Ladder — Where You Are vs Endgame</div>
<div class="roi-location-badge" id="roiLocationBadge">📌 You are here — <span id="roiHerePhase">—</span></div>
<div class="roi-ladder" id="roiLadder"> <div class="roi-ladder" id="roiLadder">
<div class="roi-ladder-step" data-phase="l1">L1</div> <div class="roi-ladder-step" data-phase="l1">L1</div>
<div class="roi-ladder-step" data-phase="l2l1">L2+L1</div> <div class="roi-ladder-step" data-phase="l2l1">L2+L1</div>
@@ -2189,6 +2204,14 @@ function updateROI() {
// Ladder visualization // Ladder visualization
const ladderOrder = ['l1','l2l1','l3l1','l4','l4l3','l5','l5l3','l6','l6l3','l7solo','l7x3']; const ladderOrder = ['l1','l2l1','l3l1','l4','l4l3','l5','l5l3','l6','l6l3','l7solo','l7x3'];
const phaseIndex = ladderOrder.indexOf(phase); 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 => { document.querySelectorAll('.roi-ladder-step').forEach(el => {
el.classList.remove('active', 'passed'); el.classList.remove('active', 'passed');
const idx = ladderOrder.indexOf(el.dataset.phase); const idx = ladderOrder.indexOf(el.dataset.phase);