diff --git a/public/assets/my.js b/public/assets/my.js index 9697f29..7115c8c 100644 --- a/public/assets/my.js +++ b/public/assets/my.js @@ -285,6 +285,26 @@ if (toast) { IAP.status(toast, kind); if (sound) playSound(sound); liveRefresh(); } } + // visual line tree on the Overview: YOU + three levels, qualified directs in gold + async function loadLineTree(buyerCount) { + try { + const r = await (await fetch('/api/my/line')).json(); + const el = $('lineTree'); if (!el) return; + const levels = r.levels || []; + const total = levels.reduce((n, L) => n + L.members.length, 0); + if ($('treeSub')) $('treeSub').textContent = total ? total + ' across 3 levels' : 'share your link to grow'; + const chip = (m, q) => '' + esc(String(m.name || 'M').replace(/^@/, '').slice(0, 12)) + ''; + const rowFor = lvl => { + const L = levels.find(x => x.level === lvl); const members = L ? L.members : []; + const qn = lvl === 1 ? (buyerCount || 0) : 0; // highlight your qualified directs + let html = members.map((m, i) => chip(m, i < qn)).join(''); + if (lvl <= 2 && members.length < (lvl === 1 ? 2 : 4)) html += '+ open'; + if (!html) html = '+ open'; + return '
L' + lvl + '
' + html + '
'; + }; + el.innerHTML = '
YOU
' + rowFor(1) + rowFor(2) + rowFor(3); + } catch (e) {} + } async function loadDashboard() { try { const d = await (await fetch('/api/my/dashboard')).json(); @@ -321,6 +341,7 @@ if (d.sponsorMsg) showSponsorModal(d.sponsorMsg); renderBadges(d); loadFeatured(); + loadLineTree(d.buyerCount || 0); loadCharts(d); $('nextMove').textContent = nextMove(d); renderSteps(d); diff --git a/public/assets/site.css b/public/assets/site.css index e266de0..d12d343 100644 --- a/public/assets/site.css +++ b/public/assets/site.css @@ -561,3 +561,16 @@ img{max-width:100%} .chat-msg-btn{margin-left:auto;font-size:12px;padding:3px 10px} .switch{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px} .switch input{width:18px;height:18px;accent-color:var(--mint)} + +/* ── Overview line tree ── */ +.line-tree{margin-top:6px} +.lt-top{margin-left:26px} +.lt-you{display:inline-block;background:var(--mint);color:var(--mint-ink);font-weight:800;padding:6px 18px;border-radius:999px;font-size:13px} +.lt-stem{height:12px;border-left:2px solid var(--line-strong);width:0;margin:0 0 6px 30px} +.lt-row{display:flex;align-items:center;gap:10px;margin:7px 0} +.lt-cap{font:700 11px var(--mono);color:var(--muted);width:22px;flex:0 0 auto} +.lt-nodes{display:flex;gap:8px;flex-wrap:wrap} +.lt-node{background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;padding:6px 12px;font-size:13px;font-weight:600;white-space:nowrap} +.lt-node.deep{color:var(--muted)} +.lt-node.qualified{border-color:#ffb238;color:#ffd15c;box-shadow:0 0 0 1px rgba(255,177,56,.35)} +.lt-node.open{border-style:dashed;color:var(--muted);background:transparent} diff --git a/public/my.html b/public/my.html index 25a5be9..c6b9d3f 100644 --- a/public/my.html +++ b/public/my.html @@ -4,7 +4,7 @@ Member area | InstantAdPay - + @@ -217,6 +217,10 @@
+
+

Your line at a glance

+

Loading your line…

+
- +