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

Promo tools: 'Your links' block with the invite link + five angle links (who each is for, copy, share)

Browse Source 
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-09-10 15:30:10 -05:00
parent b4b9ac8680
commit f5fb195927
4 changed files with 54 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/promo.js
+32
View File
@@ -90,6 +90,15 @@ window.IAPPromo = (function () {
{ angle: 'ledger', title: 'No back office. No payday.', hook: 'Your last affiliate program paid you on the fifteenth. If it paid you.', caption: 'Your last affiliate program paid you on the fifteenth. If it paid you. Here the payroll is the blockchain: every payout is a public transaction, nothing is held, nobody can change the split. Open the ledger, then join free: {{LINK:ledger}}' },
{ angle: 'two', title: 'Two buyers open level two', hook: 'Two buyers. Then five. That is the whole ladder.', caption: 'Two buyers. Then five. That is the whole ladder. Level 1 pays from your first buyer, two qualifying buyers open level 2, five open level 3, all in the same transaction, straight to your wallet. Free to join: {{LINK:two}}' }
];
// the six front doors: the plain invite link plus one page per hook angle
const ANGLES = [
{ angle: '', name: 'General', hook: 'The whole picture', use: 'What InstantAdPay is, the payment split, join free. Use it when you have not said anything specific yet.' },
{ angle: 'instant', name: 'Instant', hook: 'Paid before the page reloads', use: 'For anyone burned by pending commissions. The page opens on the on-chain payout that lands in seconds.' },
{ angle: 'adspend', name: 'Ad spend', hook: 'You buy ads anyway', use: 'For marketers who already pay for traffic. Frames it as advertising that also pays your line when they buy.' },
{ angle: 'free', name: 'Free', hook: 'Costs nothing to try', use: 'For skeptics and beginners. Join free, earn credits by viewing, run a first campaign without spending.' },
{ angle: 'ledger', name: 'Ledger', hook: 'No back office, no payday', use: 'For people who have waited on a payout. Every payment is public on Polygonscan and nothing is ever held.' },
{ angle: 'two', name: 'Two', hook: 'Two buyers open level two', use: 'For team builders. The 2-then-5 qualification ladder and how a line stacks under you.' }
];
function fill(link, me) {
const token = (me && (me.username || me.refCode || me.memberId)) || '';
// invite strip
@@ -97,6 +106,29 @@ window.IAPPromo = (function () {
if ($('promoLinkCopy')) $('promoLinkCopy').onclick = async () => {
try { await navigator.clipboard.writeText(link); status('Link copied.', 'ok'); } catch (e) { status('Copy failed.', 'bad'); }
};
// angle links: one row per front door, copy + share
const al = $('promoAngles');
if (al && al.dataset.filled !== link) {
al.dataset.filled = link; al.innerHTML = '';
for (const a of ANGLES) {
const url = angleLink(link, a.angle);
const hasVideo = VIDEOS.some(v => v.angle === a.angle);
const row = document.createElement('div');
row.className = 'angle-row';
row.innerHTML = '<div class="angle-txt"><div class="angle-head"><span class="angle-name">' + esc(a.name) + '</span><span class="angle-hook">' + esc(a.hook) + '</span>'
+ (hasVideo ? '<span class="angle-tag">video</span>' : '') + '</div>'
+ '<div class="muted small">' + esc(a.use) + '</div>'
+ '<div class="mono small angle-url">' + esc(url) + '</div></div>'
+ '<div class="angle-btns"><button class="btn small" type="button">Copy</button><button class="btn small sec" type="button">Share</button></div>';
const [copyBtn, shareBtn] = row.querySelectorAll('button');
copyBtn.onclick = async () => { try { await navigator.clipboard.writeText(url); status((a.name === 'General' ? 'Invite' : a.name) + ' link copied.', 'ok'); } catch (e) { status('Copy failed.', 'bad'); } };
shareBtn.onclick = async () => {
if (navigator.share) { try { await navigator.share({ title: 'InstantAdPay', text: a.hook, url }); return; } catch (e) { if (e && e.name === 'AbortError') return; } }
try { await navigator.clipboard.writeText(url); status('No share sheet here, so the link is copied.', 'ok'); } catch (e) { status('Copy failed.', 'bad'); }
};
al.appendChild(row);
}
}
// posts
const posts = $('promoPosts');
if (posts && posts.dataset.filled !== link) {
public/assets/site.css
+10
View File
@@ -627,6 +627,16 @@ img{max-width:100%}
/* ── promo tools (2026-09-09) ── */
.promo-strip{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 20px}
.angle-list{display:flex;flex-direction:column}
.angle-row{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--line)}
.angle-row .angle-txt{flex:1 1 320px;min-width:0}
.angle-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.angle-name{font-family:var(--disp);font-weight:700;font-size:15px}
.angle-hook{color:var(--mint);font-size:13px}
.angle-tag{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-strong);border-radius:999px;padding:1px 7px}
.angle-url{overflow-wrap:anywhere;margin-top:4px}
.angle-btns{display:flex;gap:8px;flex-wrap:wrap}
.angle-btns .btn{margin-top:0}
.promo-pills{margin:4px 0 14px}
.promo-block .pb-head{display:flex;gap:8px;align-items:center;margin-bottom:8px;font-size:13.5px}
.promo-block .pb-net{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mint)}
public/my.html
+10 -5
View File
@@ -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=20260910h">
<link rel="stylesheet" href="/assets/site.css?v=20260910i">
</head>
<body class="bo-body">
@@ -625,9 +625,14 @@
</div>
<div class="pane" id="pane-promo" hidden>
<div class="card promo-strip">
<div><span class="eyebrow" style="margin:0 0 4px">Your invite link</span><div class="mono small" id="promoLink" style="overflow-wrap:anywhere">…</div></div>
<button class="btn small" id="promoLinkCopy" type="button">Copy link</button>
<div class="card" id="promoLinks">
<div class="card-head"><h3>Your links</h3><span class="sub">one invite link, six front doors</span></div>
<div class="promo-strip" style="padding:0 0 12px">
<div><span class="eyebrow" style="margin:0 0 4px">Your invite link</span><div class="mono small" id="promoLink" style="overflow-wrap:anywhere">…</div></div>
<button class="btn small" id="promoLinkCopy" type="button">Copy link</button>
</div>
<p class="muted small" style="margin:0 0 10px">Every link below is your invite link with an angle code on the end. Same account, same credit, different first page. Pick the one that matches what you said to the person, and Link stats on the Coaching pane shows which angles bring joins and buyers.</p>
<div id="promoAngles" class="angle-list"></div>
</div>
<div class="card promo-strip" id="promoWallStrip" hidden>
<div><span class="eyebrow" style="margin:0 0 4px">Your banner wall</span><div class="mono small" id="promoWallLink" style="overflow-wrap:anywhere">…</div></div>
@@ -876,7 +881,7 @@
</div>
<script src="/assets/common.js?v=20260910c"></script>
<script src="/assets/wallet.js?v=20260910a"></script>
<script src="/assets/promo.js?v=20260909b"></script>
<script src="/assets/promo.js?v=20260910a"></script>
<script src="/assets/my.js?v=20260910m"></script>
<script src="/assets/chat.js?v=20260907l"></script>
</body>