Overview: Getting-started stepper (username, link wallet, switch on payouts, first package) with one guided button per step; soft nudge, collapsible, never a gate
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
martbost
@@ -82,6 +82,7 @@ FACTS:
|
||||
- DAILY CLAIM STREAK: finishing the daily ad set and claiming pays 5 credits on day 1, 7 on day 2, 10 from day 3, and 25 on every 7th consecutive day; miss a day and it restarts. After the set, verified visits (up to 20 a day, 1 credit each) keep earning, and the credits are meant to be spent on a campaign.
|
||||
- BLOG (public, instantadpay.com/blog): Marty's coaching and teaching articles on building a line, advertising that pays, and daily habits; each article has its own page and can be shared; RSS at /blog/feed.xml. Members who want to write their own articles: not offered today.
|
||||
- ACHIEVEMENT BADGES ON TELEGRAM (2026-09-13): when a member unlocks Spark/Surge/Circuit/Nexus, their personalised badge image (username on the ribbon) is posted automatically to the team's Telegram payments topic and the main group, once per badge; members cannot trigger posts themselves (the 'Post to Telegram' button is admin-only); 'Share' opens a picker (X, Facebook, Telegram, WhatsApp, LinkedIn, Massifly (copies the post and opens the feed composer), the phone's own share menu, copy link, save image) that shares the member's public badge page instantadpay.com/b/<username>/<badge>, which shows the badge and their join link.
|
||||
- GETTING STARTED CARD (2026-09-14): the top of every new member's Overview shows four steps (username, link wallet, switch on payouts, first package) with the current one explained and one button that opens the right tab and highlights the control (Wallet tab > Link wallet; then Activate payouts). Encouragement only: it can be hidden, and members who only want to view ads and earn credits are never blocked. It disappears once all four are done.
|
||||
- LEADERBOARD + REFERRAL CONTEST (2026-09-14): instantadpay.com/leaderboard ranks members by ad packages sold to people they directly sponsor (dollar value, read from the chain; a member's own linked positions and second accounts never count). Periods: this week (Monday to Sunday, Central time), this month, all time. Weekly and monthly winners are recorded automatically at rollover, announced in Telegram, and the credit prizes set by the admin (a ladder: 1st 1,000 / 2nd 500 / 3rd 250 weekly, 5,000 / 2,500 / 1,000 monthly by default) are granted automatically to those positions; the prize text is shown on the page and on the Overview's Leaderboard card, which also shows the member's own rank. Prizes are credits or packages, never cash.
|
||||
- WHAT'S NEW / ROADMAP (2026-09-14): instantadpay.com/whats-new lists release notes (what shipped, dated, tagged new/improved/fixed) and the roadmap (planned / building, with rough ETAs). The Overview has a "What's new" card with the latest three notes and what is being built; a dot marks notes since the member's last look. Written by the admin in Admin > Releases.
|
||||
- HOLDING TANK ALERTS: when new members land in the tank, a note at the top of every member's Overview names them (usernames) and a post goes to the team's Telegram payments topic; adopt from My line > Holding tank (your own $20 package required).
|
||||
|
||||
@@ -472,12 +472,45 @@
|
||||
$('lbList').innerHTML = h; $('lbCard').hidden = false;
|
||||
} catch (e) {}
|
||||
}
|
||||
// Getting-started stepper: username -> wallet -> payouts -> first package. The current step gets one big
|
||||
// button that opens the right tab and pulses the control (Jim: "it wasn't obvious", 2026-09-14)
|
||||
function renderSteps(d) {
|
||||
const card = $('gsCard'); if (!card) return;
|
||||
const hasUser = !!d.username, hasWallet = !!d.address, hasPayouts = !!d.memberId, hasPackage = !!(d.memberId && (d.credits || 0) > 0);
|
||||
const steps = [
|
||||
{ k: 'user', t: 'Pick a username', done: hasUser },
|
||||
{ k: 'wallet', t: 'Link your wallet', done: hasWallet },
|
||||
{ k: 'payouts', t: 'Switch on payouts', done: hasPayouts },
|
||||
{ k: 'package', t: 'Your first package', done: hasPackage }
|
||||
];
|
||||
if (steps.every(x => x.done)) { card.hidden = true; return; }
|
||||
const cur = steps.find(x => !x.done);
|
||||
let collapsed = false; try { collapsed = localStorage.getItem('iap.gs.collapsed') === '1'; } catch (e) {}
|
||||
$('gsSub').innerHTML = steps.filter(x => x.done).length + ' of 4 done · <a href="#" id="gsToggle" style="color:var(--mint);text-decoration:none">' + (collapsed ? 'show' : 'hide') + '</a>';
|
||||
$('gsToggle').addEventListener('click', e => { e.preventDefault(); try { localStorage.setItem('iap.gs.collapsed', collapsed ? '0' : '1'); } catch (er) {} renderSteps(d); });
|
||||
$('gsSteps').hidden = collapsed; $('gsNow').hidden = collapsed;
|
||||
$('gsSteps').innerHTML = steps.map((x, i) => '<div class="gs-step' + (x.done ? ' done' : x === cur ? ' now' : '') + '"><span class="n">' + (x.done ? '✓' : i + 1) + '</span><span>' + x.t + '</span></div>').join('');
|
||||
const copy = {
|
||||
user: ['Pick your username', 'It becomes your invite link and your public page, and it is permanent.', 'Choose a username', () => showOnboard(true)],
|
||||
wallet: ['Link your wallet', 'Your payouts land in a wallet you control, so the site needs to know which one is yours. One free signature, no purchase. MetaMask recommended; Phantom users switch Polygon on first. Never held crypto? The wallet guide walks you through it.', 'Link my wallet', () => jumpTo('wallet', 'linkBtn')],
|
||||
payouts: ['Switch on payouts', 'One small transaction registers your wallet with the contract so commissions can reach it. Buying any package does this automatically.', 'Activate payouts', () => jumpTo('wallet', 'activateBtn')],
|
||||
package: ['Your first package', 'From $5. The $20 Activation package is the one that counts you as a qualifying buyer for your sponsor and unlocks adopting from the holding tank.', 'See packages', () => jumpTo('buy', null)]
|
||||
}[cur.k];
|
||||
$('gsNow').innerHTML = '<p><b>Next: ' + copy[0] + '</b>' + copy[1] + (cur.k === 'wallet' ? ' <a href="/wallets" target="_blank" rel="noopener" style="color:var(--mint)">Wallet guide</a>' : '') + '</p><button type="button" class="btn" id="gsGo">' + copy[2] + '</button>';
|
||||
$('gsGo').addEventListener('click', copy[3]);
|
||||
card.hidden = false;
|
||||
}
|
||||
function jumpTo(pane, id) {
|
||||
setPane(pane);
|
||||
setTimeout(() => { const el = id && $(id); if (!el) return; el.scrollIntoView({ behavior: 'smooth', block: 'center' }); el.classList.remove('pulse'); void el.offsetWidth; el.classList.add('pulse'); try { el.focus({ preventScroll: true }); } catch (e) {} }, 250);
|
||||
}
|
||||
async function loadDashboard() {
|
||||
try {
|
||||
loadNews(); loadLeaderboard();
|
||||
const d = await (await fetch('/api/my/dashboard')).json();
|
||||
if (d.error) return;
|
||||
chatSync(d);
|
||||
try { renderSteps(d); } catch (e) {}
|
||||
MYID = d.memberId || MYID;
|
||||
startLiveFeed();
|
||||
if (!window.__lbChecked) { // daily login bonus, once per session (server guards once/day)
|
||||
@@ -671,6 +704,7 @@
|
||||
setPane(location.hash.slice(1) || 'overview');
|
||||
$('campGate').hidden = !!me.memberId;
|
||||
$('earnGate').hidden = !!me.memberId;
|
||||
if (me.username && !me.address) { let shown = ''; try { shown = sessionStorage.getItem('iap.gs.walletHint'); sessionStorage.setItem('iap.gs.walletHint', '1'); } catch (e) {} if (shown !== '1') setTimeout(() => IAP.status('Next step when you are ready: link your wallet so your payouts have somewhere to land. The Getting started card at the top shows how.', 'ok'), 1200); }
|
||||
loadDashboard();
|
||||
|
||||
const who = [];
|
||||
|
||||
@@ -678,3 +678,15 @@ img{max-width:100%}
|
||||
.wo-slot.locked{opacity:.6}
|
||||
.wo-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
|
||||
.wo-slot img{max-width:100%;border-radius:8px}
|
||||
|
||||
/* getting-started stepper on the Overview (Jim could not find the wallet step, 2026-09-14) */
|
||||
.gs{border-color:rgba(67,232,195,.45)}
|
||||
.gs-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:4px 0 12px}
|
||||
.gs-step{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px;color:var(--muted);font-size:14px}
|
||||
.gs-step .n{flex:0 0 26px;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;border:1px solid var(--line);font-size:13px}
|
||||
.gs-step.done{color:var(--ink)} .gs-step.done .n{background:var(--mint);color:var(--mint-ink);border-color:var(--mint)}
|
||||
.gs-step.now{color:var(--ink);border-color:var(--mint);background:rgba(67,232,195,.07)} .gs-step.now .n{border-color:var(--mint);color:var(--mint)}
|
||||
.gs-now{display:flex;gap:14px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px}
|
||||
.gs-now p{margin:0;flex:1;min-width:240px;max-width:60ch} .gs-now p b{display:block;font-family:var(--disp);font-size:16px;margin-bottom:2px}
|
||||
@keyframes gsPulse{0%{box-shadow:0 0 0 0 rgba(67,232,195,.7)}70%{box-shadow:0 0 0 14px rgba(67,232,195,0)}100%{box-shadow:0 0 0 0 rgba(67,232,195,0)}}
|
||||
.pulse{animation:gsPulse 1.2s ease-out 4}
|
||||
|
||||
+7
-2
@@ -5,7 +5,7 @@
|
||||
<title>Member area | InstantAdPay</title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
|
||||
<link rel="icon" type="image/png" href="/logo-icon.png">
|
||||
<link rel="stylesheet" href="/assets/site.css?v=20260913a">
|
||||
<link rel="stylesheet" href="/assets/site.css?v=20260914a">
|
||||
</head>
|
||||
<body class="bo-body">
|
||||
|
||||
@@ -167,6 +167,11 @@
|
||||
<main class="bo-content">
|
||||
|
||||
<div class="pane" id="pane-overview">
|
||||
<div class="card gs" id="gsCard" hidden>
|
||||
<div class="card-head"><h3>Getting started</h3><span class="sub" id="gsSub"></span></div>
|
||||
<div class="gs-steps" id="gsSteps"></div>
|
||||
<div class="gs-now" id="gsNow"></div>
|
||||
</div>
|
||||
<div class="grid" style="grid-template-columns:repeat(auto-fit,minmax(215px,1fr));margin-top:0">
|
||||
<div class="statx">
|
||||
<div class="pl"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5v9M9.2 10c0-1 1.2-1.7 2.8-1.7s2.8.7 2.8 1.7-1.2 1.5-2.8 1.7-2.8.7-2.8 1.7 1.2 1.7 2.8 1.7 2.8-.7 2.8-1.7"/></svg></div>
|
||||
@@ -919,7 +924,7 @@
|
||||
<script src="/assets/common.js?v=20260914a"></script>
|
||||
<script src="/assets/wallet.js?v=20260911a"></script>
|
||||
<script src="/assets/promo.js?v=20260911a"></script>
|
||||
<script src="/assets/my.js?v=20260914b"></script>
|
||||
<script src="/assets/my.js?v=20260914c"></script>
|
||||
<script src="/assets/chat.js?v=20260907l"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user