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

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

public/assets/promo.js

@@ -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

@@ -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)}