marty/instantadpay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Visual downline tree on the Overview

Browse Source 
"Your line at a glance": YOU + three levels of member chips with connectors,
your qualified directs highlighted in gold, and "+ open" placeholders on levels
1-2 showing what's next. Loads from /api/my/line.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-09-07 08:38:15 -05:00
parent 0dbd99f69e
commit 42d0e15fea
3 changed files with 40 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/my.js
+21
View File
@@ -285,6 +285,26 @@
if (toast) { IAP.status(toast, kind); if (sound) playSound(sound); liveRefresh(); } 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) => '<span class="lt-node' + (q ? ' qualified' : (m.email ? '' : ' deep')) + '" title="' + esc(m.name || 'member') + (q ? ' · qualified buyer' : '') + '">' + esc(String(m.name || 'M').replace(/^@/, '').slice(0, 12)) + '</span>';
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 += '<span class="lt-node open">+ open</span>';
if (!html) html = '<span class="lt-node open">+ open</span>';
return '<div class="lt-row"><span class="lt-cap">L' + lvl + '</span><div class="lt-nodes">' + html + '</div></div>';
};
el.innerHTML = '<div class="lt-top"><span class="lt-you">YOU</span></div><div class="lt-stem"></div>' + rowFor(1) + rowFor(2) + rowFor(3);
} catch (e) {}
}
async function loadDashboard() { async function loadDashboard() {
try { try {
const d = await (await fetch('/api/my/dashboard')).json(); const d = await (await fetch('/api/my/dashboard')).json();
@@ -321,6 +341,7 @@
if (d.sponsorMsg) showSponsorModal(d.sponsorMsg); if (d.sponsorMsg) showSponsorModal(d.sponsorMsg);
renderBadges(d); renderBadges(d);
loadFeatured(); loadFeatured();
loadLineTree(d.buyerCount || 0);
loadCharts(d); loadCharts(d);
$('nextMove').textContent = nextMove(d); $('nextMove').textContent = nextMove(d);
renderSteps(d); renderSteps(d);
public/assets/site.css
+13
View File
@@ -561,3 +561,16 @@ img{max-width:100%}
.chat-msg-btn{margin-left:auto;font-size:12px;padding:3px 10px} .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{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px}
.switch input{width:18px;height:18px;accent-color:var(--mint)} .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}
public/my.html
+6 -2
View File
@@ -4,7 +4,7 @@
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Member area | InstantAdPay</title> <title>Member area | InstantAdPay</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
<link rel="stylesheet" href="/assets/site.css?v=20260907s"> <link rel="stylesheet" href="/assets/site.css?v=20260907t">
</head> </head>
<body class="bo-body"> <body class="bo-body">
@@ -217,6 +217,10 @@
</div> </div>
<div class="nc-steps" id="ncSteps"></div> <div class="nc-steps" id="ncSteps"></div>
</div> </div>
<div class="card" id="lineTreeCard">
<div class="card-head"><h3>Your line at a glance</h3><span class="sub" id="treeSub"></span></div>
<div id="lineTree" class="line-tree"><p class="muted small">Loading your line…</p></div>
</div>
<div class="card" id="badgeCard" hidden> <div class="card" id="badgeCard" hidden>
<div class="card-head"><h3>Your achievements</h3><span class="sub">unlock as you build</span></div> <div class="card-head"><h3>Your achievements</h3><span class="sub">unlock as you build</span></div>
<div class="badges" id="badgeStrip"></div> <div class="badges" id="badgeStrip"></div>
@@ -666,7 +670,7 @@
</div> </div>
<script src="/assets/common.js?v=20260907s"></script> <script src="/assets/common.js?v=20260907s"></script>
<script src="/assets/wallet.js?v=20260907q"></script> <script src="/assets/wallet.js?v=20260907q"></script>
<script src="/assets/my.js?v=20260907r"></script> <script src="/assets/my.js?v=20260907t"></script>
<script src="/assets/chat.js?v=20260907l"></script> <script src="/assets/chat.js?v=20260907l"></script>
</body> </body>
</html> </html>