Files
linkspin/public/my.html
T

1057 lines
78 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Member area | LinkSpin</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700&family=Manrope:wght@500;700;800&display=swap">
<link rel="icon" type="image/png" href="/logo-icon.png">
<link rel="stylesheet" href="/assets/site.css?v=ls20260916a">
</head>
<body class="bo-body">
<!-- ── signed-out: centered auth ─────────────────────────── -->
<div id="bootSpin" class="boot-spin" aria-live="polite"><div class="ring"></div><p class="small muted">Loading your account…</p></div>
<div id="authArea" hidden>
<div class="wrap" style="max-width:560px">
<section class="hero" style="padding:64px 0 10px;text-align:left">
<p class="eyebrow">Member area</p>
<h1 style="font-size:34px">Sign <em>in</em></h1>
<p class="lead" id="introLead" style="font-size:16px">Join free with your email. Your wallet only
comes out when you buy a package or switch on payouts, and it stays yours the whole time.</p>
</section>
<label id="nlOptinRow" style="display:flex;gap:9px;align-items:flex-start;margin:0 4px 16px;font-size:13px;color:var(--muted,#8ba69c);cursor:pointer">
<input type="checkbox" id="nlOptin" checked style="margin-top:2px;flex:0 0 auto">
<span>Keep me posted with the LinkSpin newsletter (tips and updates). You can unsubscribe anytime.</span>
</label>
<div class="card" id="sponsorNote" style="border-color:var(--mint);text-align:center" hidden>
<p style="margin:0"><span class="muted small">You're joining the line of</span><br>
<b id="sponsorNoteName" style="font-size:19px;color:var(--mint)"></b></p>
</div>
<div class="card" id="magicCard" hidden>
<p id="mcFinish" class="small" style="color:var(--amber);margin:0 0 10px" hidden>Your wallet is signed in, but it has no account yet.
Add your email to finish setting up. Your wallet, member number and purchases stay attached.</p>
<h3>Sign in or join free</h3>
<p class="muted small">Type your email and we send a 6-digit code. No password to invent,
no password to forget. New emails get a free account automatically.</p>
<p><input id="mcEmail" type="email" placeholder="Email" autocomplete="email" style="width:100%"></p>
<input id="mcWebsite" class="hp-field" type="text" name="hp_field_x9" tabindex="-1" autocomplete="off" aria-hidden="true">
<div id="mcCheck" hidden></div>
<p id="mcCodeRow" hidden><input id="mcCode" inputmode="numeric" placeholder="6-digit code" style="width:100%"></p>
<button class="btn" id="mcSendBtn">Email me a code</button>
<button class="btn" id="mcVerifyBtn" hidden>Sign in</button>
<button class="btn sec small" id="mcResend" hidden>Send a fresh code</button>
</div>
<div id="passCards">
<div class="card">
<h3>Create your free account</h3>
<p><input id="suEmail" type="email" placeholder="Email" autocomplete="email" style="width:100%"></p>
<p><input id="suPass" type="password" placeholder="Password (8+ characters)" autocomplete="new-password" style="width:100%"></p>
<button class="btn" id="signupBtn">Join free</button>
</div>
<div class="card">
<h3>Log in</h3>
<p><input id="liEmail" type="email" placeholder="Email" autocomplete="email" style="width:100%"></p>
<p><input id="liPass" type="password" placeholder="Password" autocomplete="current-password" style="width:100%"></p>
<button class="btn sec" id="loginBtn">Log in</button>
</div>
</div>
<p class="small muted"><a href="/">← Back to the site</a></p>
<div class="card" id="adSlotLogin" hidden></div>
</div>
</div>
<!-- ── login ad interstitial: sponsor opens in a new tab, timer runs here ── -->
<div id="loginGate" class="lgate" hidden>
<div class="lgate-bar">
<span class="lg-brand">Instant<em>AdPay</em></span>
<span class="lgate-note small muted" id="lgStatus">Login ad sponsor — click "Open Ad" to begin.</span>
<span class="lg-timer mono" id="lgTimer" hidden>…</span>
<button class="btn small" id="lgContinue" type="button" hidden>Go to dashboard</button>
</div>
<div class="lgate-body">
<div class="lgate-card">
<p class="eyebrow">Today's login sponsor</p>
<div id="lgCreative"></div>
<p style="margin-top:18px"><button class="btn" id="lgOpen" type="button">Open Ad</button></p>
<p class="small muted">The ad opens in a new tab. The timer counts down right here —
when it hits zero, your dashboard button appears above.</p>
</div>
</div>
</div>
<!-- ── welcome tour: meet your 3-level line, then unlock welcome credits ── -->
<div id="gauntGate" class="lgate" hidden>
<div class="lgate-bar">
<span class="lg-brand">Instant<em>AdPay</em></span>
<span class="lgate-note small muted" id="ggNote">Welcome tour: meet the three levels your growth pays.</span>
<span class="lg-timer mono" id="ggTimer">…</span>
</div>
<div class="ggmeta small muted" id="ggWho"></div>
<iframe class="lgate-frame" id="ggFrame" sandbox="allow-scripts allow-same-origin allow-forms allow-popups" referrerpolicy="no-referrer" title="Team member site"></iframe>
<div class="lgate-bar" style="border-top:1px solid var(--line);border-bottom:0">
<span class="small muted" id="ggProgress"></span>
<button class="btn small" id="ggClaim" type="button" hidden>Claim your welcome credits</button>
</div>
</div>
<!-- ── onboarding: new members pick a username (profile optional) ── -->
<div id="onboardModal" class="modal-back" hidden>
<div class="modal-card">
<p class="eyebrow">Welcome to LinkSpin</p>
<h3 style="margin:.2em 0 .5em">Pick your username to continue</h3>
<p class="muted small">This is how your team sees you, and it becomes your invite link and your public page.
It is permanent once saved, so pick the one you want to be known by. We suggested one from your email; keep it or change it.</p>
<p><input id="obUsername" placeholder="Username (3-20 letters, numbers, _)" autocomplete="off" style="width:100%"></p>
<p class="muted small" style="margin:12px 0 4px">Optional — a short bio for your public page (you can skip this).</p>
<p><textarea id="obBio" rows="2" maxlength="600" placeholder="A short bio (optional)" style="width:100%"></textarea></p>
<p id="obErr" class="small" style="color:var(--bad)" hidden></p>
<p style="margin-top:14px;display:flex;gap:10px;justify-content:flex-end">
<button class="btn sec small" id="obSkip" type="button" hidden>Skip for now</button>
<button class="btn" id="obSave" type="button">Save &amp; continue</button>
</p>
</div>
</div>
<!-- ── sponsor message modal: unmissable on sign-in ── -->
<div id="msgModal" class="modal-back" hidden>
<div class="modal-card">
<p class="eyebrow" id="mmFrom">A message from your sponsor</p>
<h3 id="mmSubject" style="margin:.2em 0 .6em"></h3>
<div id="mmBody" class="promo-block ib-rich" style="max-height:50vh;overflow:auto"></div>
<p style="margin-top:16px;text-align:right"><button class="btn" id="mmAck" type="button">Got it</button></p>
</div>
</div>
<!-- ── signed-in: back-office shell ──────────────────────── -->
<div id="memberArea" class="bo" hidden>
<aside class="bo-side" id="boSide">
<a class="logo" href="/"><span class="wordmark"><svg viewBox="0 0 24 24" fill="none" stroke="#8cc8ff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12a8 8 0 0 1 14-5.3"/><path d="M18 3v4h-4"/><path d="M20 12a8 8 0 0 1-14 5.3"/><path d="M6 21v-4h4"/></svg>Link<b>Spin</b></span></a>
<span class="byline">Brought to you by the <b>Crypto Team Build Network</b></span>
<nav class="bo-menu" aria-label="Member menu">
<button data-pane="overview" class="on" type="button"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="8" height="8" rx="2"/><rect x="13" y="3" width="8" height="8" rx="2"/><rect x="3" y="13" width="8" height="8" rx="2"/><rect x="13" y="13" width="8" height="8" rx="2"/></svg>Overview</button>
<button data-pane="line" type="button"><svg viewBox="0 0 24 24"><circle cx="12" cy="7" r="3.2"/><circle cx="5" cy="17" r="2.6"/><circle cx="19" cy="17" r="2.6"/><path d="M12 10v3M12 13l-5 2M12 13l5 2"/></svg>My line</button>
<button data-pane="pipeline" type="button"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="5" height="16" rx="1.2"/><rect x="9.5" y="4" width="5" height="11" rx="1.2"/><rect x="16" y="4" width="5" height="7" rx="1.2"/></svg>Pipeline<span class="pill" id="pipeBadge" hidden></span></button>
<button data-pane="buy" type="button"><svg viewBox="0 0 24 24"><circle cx="9" cy="20" r="1.6"/><circle cx="17" cy="20" r="1.6"/><path d="M3 4h2l2.4 11.2A2 2 0 0 0 9.4 17h8.2a2 2 0 0 0 2-1.6L21 8H6"/></svg>Buy packages</button>
<button data-pane="rotator" type="button"><svg viewBox="0 0 24 24"><path d="M4 12a8 8 0 0 1 14-5.3"/><path d="M18 3v4h-4"/><path d="M20 12a8 8 0 0 1-14 5.3"/><path d="M6 21v-4h4"/></svg>Rotator</button>
<button data-pane="campaigns" type="button"><svg viewBox="0 0 24 24"><path d="M3 11l14-5v12L3 13v-2z"/><path d="M17 8a4 4 0 0 1 0 8M7 13v5a2 2 0 0 0 4 0v-3"/></svg>Campaigns</button>
<button data-pane="earn" type="button"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5v9M9 10c0-1.1 1.3-1.8 3-1.8s3 .7 3 1.8-1.3 1.6-3 1.8-3 .7-3 1.8 1.3 1.8 3 1.8 3-.7 3-1.8"/></svg>Earn credits<span class="pill" id="inboxBadge" hidden></span></button>
<button data-pane="earnings" type="button"><svg viewBox="0 0 24 24"><path d="M4 17l5-5 4 3 7-8"/><path d="M14 7h6v6"/></svg>Earnings</button>
<button data-pane="promo" type="button"><svg viewBox="0 0 24 24"><path d="M7 10s5-1 9-5v14c-4-4-9-5-9-5H5a2 2 0 0 1-2-2v0a2 2 0 0 1 2-2h2z"/><path d="M8 15l1 5h2l-1-5"/></svg>Promo tools</button>
<button data-pane="training" type="button"><svg viewBox="0 0 24 24"><path d="M3 5l9-2 9 2v11l-9 2-9-2z"/><path d="M12 3v13"/><path d="M9 11l3 2 3-2"/></svg>Training</button>
<button data-pane="wallet" type="button"><svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18"/><circle cx="16.5" cy="14.5" r="1.4"/></svg>Wallet</button>
<button data-pane="profile" type="button"><svg viewBox="0 0 24 24"><circle cx="12" cy="8.5" r="3.6"/><path d="M4.5 20c1.6-3.6 4.2-5.2 7.5-5.2s5.9 1.6 7.5 5.2"/></svg>Profile</button>
</nav>
<div class="bo-links" id="adSlotSide" hidden style="border-top:1px solid var(--line)"></div>
<div class="bo-links">
<span class="bo-cap">Team</span>
<a href="#" id="chatMenuBtn" class="bo-chat"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:-2px;margin-right:7px"><path d="M5 5h14a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H9l-4 4V6a1 1 0 0 1 1-1z"/></svg>Messages<span class="pill" id="chatNavBadge" hidden></span></a>
<a href="/admin" id="adminLink" hidden>Admin</a>
</div>
<div class="bo-links">
<span class="bo-cap">Legal</span>
<a href="/terms" target="_blank" rel="noopener">Terms</a>
<a href="/privacy" target="_blank" rel="noopener">Privacy</a>
<a href="/disclaimer" target="_blank" rel="noopener">Disclaimer</a>
</div>
<div class="bo-foot">
<span id="navWallet" class="small muted">…</span>
<a href="#" id="logoutLink" class="small">Log out</a>
</div>
</aside>
<div class="bo-main">
<header class="bo-top">
<button id="boBurger" aria-label="Menu" type="button">☰</button>
<h2 id="boTitle" style="margin:0">Overview</h2>
<span class="bo-rehearsal small" id="boRehearsal" hidden></span>
<div class="ad-strip" id="adStripTop" hidden></div>
</header>
<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>
<div><div class="nv" id="dbCredits">0</div><div class="lb">Ad credits</div><span class="chip flat" id="dbCreditsSub"></span></div>
</div>
<div class="statx c-cyan">
<div class="pl"><svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18"/><circle cx="16.5" cy="14.5" r="1.4"/></svg></div>
<div><div class="nv mono" id="dbEarned">0</div><div class="lb">POL earned</div><span class="chip" id="dbEarnedChip" hidden></span></div>
</div>
<div class="statx c-violet">
<div class="pl"><svg viewBox="0 0 24 24"><circle cx="12" cy="7" r="3.2"/><circle cx="5" cy="17" r="2.6"/><circle cx="19" cy="17" r="2.6"/><path d="M12 10v3M12 13l-5 2M12 13l5 2"/></svg></div>
<div><div class="nv" id="dbBuyers">0</div><div class="lb">Qualifying buyers</div><span class="chip" id="dbBuyersChip" hidden></span><span class="small muted" id="dbBuyersSub" style="display:block;margin-top:4px"></span></div>
</div>
<div class="statx c-amber">
<div class="pl"><svg viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M19 8v6M22 11h-6"/></svg></div>
<div><div class="nv" id="dbTeam">0</div><div class="lb">Joined your line</div><span class="chip warm" id="dbTeamChip" hidden></span></div>
</div>
</div>
<div class="card feat-top" id="featuredCard" hidden>
<div class="card-head"><h3>Featured</h3><span class="sub" id="featSub">member links in rotation</span></div>
<div id="featStrip" class="feat-strip"></div>
<div id="featCta" class="small" style="text-align:center;margin-top:10px"></div>
</div>
<div class="grid c2" style="margin-top:16px">
<div class="card">
<div class="card-head"><h3>Recent payouts</h3><span class="sub" id="chEarnSub">on-chain, newest last</span><a class="sub" href="#earnings" style="color:var(--mint);text-decoration:none;margin-left:12px">full history →</a></div>
<div class="barchart" id="chEarnBars"></div>
<div class="chart-x" id="chEarnX"></div>
</div>
<div class="card">
<div class="card-head"><h3>Credit composition</h3><span class="sub">live balances</span></div>
<div class="donut-wrap">
<svg id="chDonut" width="150" height="150" viewBox="0 0 42 42" role="img" aria-label="Credit composition"></svg>
<div class="donut-legend" id="chDonutLegend"></div>
</div>
</div>
</div>
<div class="grid c2">
<div class="card">
<div class="card-head"><h3>Today's viewing</h3><span class="sub">daily claim progress</span></div>
<div class="donut-wrap">
<svg id="chRing" width="130" height="130" viewBox="0 0 42 42" role="img" aria-label="Daily view progress"></svg>
<div class="donut-legend" id="chRingLegend"></div>
</div>
</div>
<div class="card">
<div class="card-head"><h3>Campaign delivery</h3><span class="sub" id="chCampSub">impressions per campaign</span></div>
<div class="barchart" id="chCampBars"></div>
<div class="chart-x" id="chCampX"></div>
</div>
</div>
<div class="card next-card" id="nextCard">
<div class="nc-head">
<div class="pl"><svg viewBox="0 0 24 24"><path d="M6 3v18"/><path d="M6 4h11l-2.5 4 2.5 4H6"/></svg></div>
<div>
<h3 style="margin:0">Your next move</h3>
<p class="muted small" id="nextMove" style="margin:5px 0 0">…</p>
</div>
</div>
<div class="nc-steps" id="ncSteps"></div>
<p class="small" id="launchMark" hidden style="margin:10px 0 0"></p>
<p class="small" id="tankNotice" hidden style="margin:10px 0 0"></p>
</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>
<p class="small muted" id="treeLegend" style="margin:10px 0 0;line-height:2"><span class="lt-node qualified" style="font-size:11px;padding:2px 8px">name</span> bought a $20+ package: counts as a qualifying buyer for their sponsor (on level 1, that is you) &nbsp;·&nbsp; <span class="lt-node" style="font-size:11px;padding:2px 8px">name<i class="lt-n">2</i></span> their own qualifying buyers &nbsp;·&nbsp; <span class="lt-node" style="font-size:11px;padding:2px 8px">name</span> joined, no $20+ buy yet &nbsp;·&nbsp; <span class="lt-node open" style="font-size:11px;padding:2px 8px">+ open</span> spot still open</p>
</div>
<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="badges" id="badgeStrip"></div>
</div>
<div class="grid c2">
<div class="card">
<h3>Recent activity</h3>
<div class="feed" id="ovFeed"><div class="row muted">Your line's joins, buys, and payouts land here.</div></div>
</div>
<div>
<div class="card">
<h3>Quick actions</h3>
<div class="qa">
<button type="button" data-goto="buy">🛒 Buy a package</button>
<button type="button" data-goto="earn">👁 View today's ads</button>
<button type="button" data-goto="campaigns">📣 Launch a campaign</button>
<button type="button" id="qaCopyInvite">🔗 Copy my invite link</button>
<button type="button" id="qaMsgSponsor" hidden>💬 Message my sponsor</button>
</div>
</div>
<div class="card"><h3>Earning levels</h3>
<p id="qualLine" class="muted small">…</p></div>
<div class="card" id="lbCard" hidden><div class="card-head"><h3>Leaderboard</h3><span class="sub"><a href="/leaderboard" target="_blank" rel="noopener" style="color:var(--mint);text-decoration:none">this week's contest</a></span></div>
<div id="lbList" class="small"></div></div>
<div class="card" id="newsCard" hidden><div class="card-head"><h3>What's new</h3><span class="sub"><a href="/whats-new" target="_blank" rel="noopener" style="color:var(--mint);text-decoration:none">release notes and roadmap</a></span></div>
<div id="newsList" class="small"></div></div>
<div class="card" id="promoCard"><h3>Have a promo code?</h3>
<p class="muted small" style="margin:6px 0 10px">Codes from partner sites add free ad credits to your account. One use per code.</p>
<div style="display:flex;gap:8px;flex-wrap:wrap"><input id="promoCode" type="text" placeholder="CODE" autocomplete="off" style="flex:1;min-width:140px;text-transform:uppercase"><button type="button" class="btn small" id="promoApply">Apply</button></div>
<p class="small" id="promoMsg" hidden style="margin:8px 0 0"></p></div>
</div>
</div>
<div class="card" id="adSlotOverview" hidden></div>
</div>
<div class="pane" id="pane-line" hidden>
<div class="card" id="sponsorMsgCard" hidden>
<h3>Your sponsor has your back</h3>
<p class="muted small">Questions getting started? Message your sponsor <b id="sponsorMsgName"></b> directly.
If they are online you chat live; if not, it lands in their inbox and they are notified.</p>
<p><button class="btn" id="lineMsgSponsor" type="button">Message your sponsor</button></p>
</div>
<div class="card">
<h3>Your invite link, live from day one</h3>
<p class="muted small">Share it anywhere, starting now. Everyone who joins through it becomes part of
your line, and you earn 50 percent of every ad package they ever buy, plus levels 2 and 3 as you
qualify. Just switch on payouts before your people start buying so every payment locks to you.</p>
<p class="mono" id="inviteLine">…</p>
<p>
<button class="btn small sec" id="copyInvite" hidden>Copy link</button>
<button class="btn small sec" id="copyPitch" hidden>Copy a ready-to-send message</button>
</p>
<p class="muted small" id="pitchPreview" hidden></p>
</div>
<div class="card" id="linkStatsCard">
<h3>Your links: what is working</h3>
<p class="muted small">Views, joins and qualifying buyers for each hook. Add <span class="mono">?v=instant</span>, <span class="mono">?v=adspend</span>, <span class="mono">?v=free</span>, <span class="mono">?v=ledger</span> or <span class="mono">?v=two</span> to the end of your link to pick the hook the page opens with.</p>
<div class="tablewrap"><table id="linkStatsTable" class="small"></table></div>
<p class="muted small" style="margin:14px 0 6px"><b>Where your visitors came from</b> (referring site of the first visit; "direct" is a typed or pasted link, a text message, or an email)</p>
<div class="tablewrap"><table id="linkSrcTable" class="small"></table></div>
</div>
<div class="card">
<h3>Your line</h3>
<p class="muted small">Everyone who joined through your link, newest first. When they buy their
first package of $20 or more, they count toward your qualification.</p>
<div id="rosterWrap"><p class="muted small" id="rosterEmpty">Nobody yet. Your link is ready above; share it and this list starts filling.</p></div>
</div>
<div class="card" id="tankCard">
<div class="card-head"><h3>Holding tank</h3><span class="sub" id="tankSub">members who arrived with no sponsor</span></div>
<p class="muted small">People who joined without a sponsor wait here. Adopt one and you become their sponsor: a chat opens, they get an email with your message, and their first purchase binds to you on the contract. First come. At most <b id="tankCap">2</b> open adoptions at a time, and an adoption goes back to the tank after <b id="tankTtl">7</b> days if they have not linked a wallet or bought.</p>
<p class="small" id="tankWhy" hidden></p>
<div id="tankMine"></div>
<div id="tankList"><p class="muted small">Loading…</p></div>
</div>
<div class="card" id="coachCard">
<h3>Coach your directs</h3>
<p class="muted small"><b>Reach your free referrals.</b> If there is no message from you to a free referral for 10 days, you get a warning; at 14 days they move to the holding tank so someone else can help them. A chat, a nudge, or tapping <b>Contacted them</b> resets the clock. Nothing on-chain ever moves.</p>
<p class="muted small">Where each person you referred sits on the ladder, who has gone quiet, and what to say next. <b>Nudge</b> opens a chat with the message already written; edit it if you like, then send. Quiet members also get one automatic reminder email per step from LinkSpin, so your nudge is the personal one.</p>
<p class="small" id="coachSummary"></p>
<div id="coachList"><p class="muted small">Loading…</p></div>
</div>
<div class="card" id="prospectCard">
<h3>People you have talked to</h3>
<p class="muted small">Your own follow-up list. Add anyone you mentioned LinkSpin to, give them a status and a follow-up day, and the next conversation stays in front of you. Only you can see this.</p>
<form id="prospectForm" style="display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin:0 0 12px">
<input id="ppName" placeholder="Name" maxlength="120" required style="flex:1;min-width:140px">
<input id="ppContact" placeholder="Phone, handle or email" maxlength="120" style="flex:1;min-width:160px">
<select id="ppStatus" style="min-width:130px"></select>
<input id="ppNext" type="date" title="Follow up on" style="min-width:150px">
<button class="btn small" type="submit">Add</button>
</form>
<div id="prospectList"><p class="muted small">Nobody on the list yet.</p></div>
</div>
<div class="card">
<h3>Your downline, three levels deep</h3>
<p class="muted small">Everyone below you across levels 1–3. The POL figure is what each person has paid you so far, straight from the ledger. You see email addresses for your
direct referrals only; deeper levels show username and ID. Message your direct referrals right here.</p>
<div id="lineageWrap"><p class="muted small">Loading…</p></div>
</div>
<div class="card" id="broadcastCard">
<h3>Message your team</h3>
<p class="muted small">Send one broadcast a day to your downline. It lands in their on-site inbox
and their email. Reaches the people who joined under you — they can't opt out of their sponsor,
so make it count.</p>
<p><select id="bcScope" style="width:100%">
<option value="direct">My direct referrals only (level 1)</option>
<option value="all">My whole downline (levels 1–3)</option>
</select></p>
<p class="small muted" style="margin:10px 0 4px">Start from a template:</p>
<div class="chips" id="bcTemplates" style="margin:0 0 10px"></div>
<p><input id="bcSubject" maxlength="160" placeholder="Subject" style="width:100%"></p>
<div class="ed-bar" aria-label="Formatting">
<button type="button" data-bc="bold" title="Bold"><b>B</b></button>
<button type="button" data-bc="italic" title="Italic"><i>I</i></button>
<button type="button" data-bc="underline" title="Underline"><u>U</u></button>
<button type="button" data-bcblock="h3" title="Heading">H</button>
<button type="button" data-bc="insertUnorderedList" title="Bullet list">• List</button>
<button type="button" id="bcLinkBtn" title="Insert link">🔗 Link</button>
</div>
<div id="bcEd" class="ed-body" contenteditable="true" data-ph="Write to your team…"></div>
<p style="margin-top:12px"><button class="btn" id="bcSendBtn" type="button">Send broadcast</button>
<span class="small muted" id="bcHint"></span></p>
</div>
<div class="card" id="upMsgCard" hidden>
<h3>Messages from your upline</h3>
<div id="upList"></div>
</div>
<div class="card ad-foot" id="adSlotPane-line" hidden></div>
</div>
<div class="pane" id="pane-pipeline" hidden>
<div class="card" id="pipeSoon" hidden>
<h3>Pipeline: coming soon</h3>
<p class="muted small" id="pipeSoonText">One board for everyone you are working with. Every prospect and every direct sits in a column by what they have actually done: talking, joined, wallet linked, payouts on, bought, building. The site moves the cards when the event happens on the ledger. You add the part it cannot know: a note, a follow-up date, and the message for that exact stage, sent through the chat you already have.</p>
<p class="muted small" id="pipeSoonEta"></p>
<p><a class="btn small sec" href="/whats-new" target="_blank" rel="noopener">See the roadmap</a></p>
</div>
<div id="pipeLive" hidden>
<div class="card" id="pipeDueCard">
<h3>Follow up today <span class="pill" id="pipeDueCount" hidden></span></h3>
<p class="muted small">Cards with a follow-up date of today or earlier. Cards flagged <b>stalled</b> have been quiet for three days or more.</p>
<div id="pipeDue"><p class="muted small">Nothing due. Set a follow-up date on any card and it shows up here.</p></div>
</div>
<div class="card">
<h3>Your board</h3>
<p class="muted small" id="pipeSummary">Every column is a stage the site can prove. Cards move on their own; open one to add a note, a follow-up date or a tag.</p>
<div class="pipe-board" id="pipeBoard"></div>
</div>
<div class="card" id="pipeCard" hidden>
<div style="display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap">
<div><h3 id="pipeCardName" style="margin:0 0 4px"></h3><p class="muted small" id="pipeCardMeta" style="margin:0"></p></div>
<button class="btn small sec" type="button" id="pipeCardClose">Close</button>
</div>
<p class="small" id="pipeCardNext" style="margin:10px 0 6px"></p>
<div class="promo-block" id="pipeSayBlock" hidden><div class="pb-head"><span class="pb-net">Message for this stage</span></div><div class="pb-text" id="pipeSay"></div>
<p style="margin:8px 0 0"><button class="btn small" type="button" id="pipeSend">Open chat with this message</button> <button class="btn small sec" type="button" id="pipeCopy">Copy message</button></p></div>
<div style="display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-top:12px" class="pipe-form">
<label class="small muted">Follow up on<br><input type="date" id="pipeFollow" class="small" style="width:100%"></label>
<label class="small muted">Tag<br><select id="pipeTag" class="small" style="width:100%"></select></label>
</div>
<label class="small muted" style="display:block;margin-top:10px">Your note<br><textarea id="pipeNote" rows="3" style="width:100%" maxlength="1000" placeholder="What you talked about, what they said, what is next."></textarea></label>
<p style="margin:10px 0 0"><button class="btn small" type="button" id="pipeSave">Save</button> <span class="muted small" id="pipeSaved"></span></p>
</div>
</div>
<div class="card ad-foot" id="adSlotPane-pipeline" hidden></div>
</div>
<div class="pane" id="pane-buy" hidden>
<div class="card">
<h3>Buy an ad package</h3>
<p class="muted small">Priced in dollars, settled from your wallet at the live rate. Credits mint
to this account instantly, and every payout in your sponsor line lands the moment you confirm.</p>
<p class="small" style="border:1px solid var(--line-strong);border-radius:10px;padding:10px 12px;margin:0 0 14px">
<b>Using Trust Wallet?</b> It blocks purchases that spend most of the POL in the wallet (a "drain your wallet" warning). Start with a smaller package, keep a little extra POL, or connect MetaMask, Phantom or SafePal instead. Extra POL always stays yours.</p>
<div id="buyFromWrap" class="small" hidden style="border:1px solid var(--line-strong);border-radius:10px;padding:10px 12px;margin:0 0 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap">
<b>Buy from</b>
<select id="buyFrom" class="input" style="max-width:340px"></select>
<span class="muted" id="buyFromHint">Your wallet app must be on this account when you confirm.</span>
</div>
<div class="tiles" id="boTiles"><div class="tile"><span class="muted small">Loading live prices…</span></div></div>
</div>
<div class="card" id="qsCard">
<h3>Qualified Start: your own positions</h3>
<p class="muted small">Qualification is earned by buyers you refer, and it is never for sale. But nothing stops you from being your own first buyers, openly. Link a second wallet of your own as a <b>position</b> under your account. When it buys a $20 or larger package, the contract counts it as a qualifying buyer, half the purchase comes straight back to your main wallet, and the credits it mints pool with yours. Two positions open level 2 the same day. Five open level 3.</p>
<ol class="small" style="margin:0 0 12px 18px;padding:0;line-height:1.6">
<li>Link your main wallet and switch on payouts (Wallet tab) so positions can register under you.</li>
<li>In your wallet app, create or switch to a <b>different account</b> (MetaMask: account menu, Add account. Trust or SafePal: switch wallet). Put enough POL in it for a $20 package plus gas.</li>
<li>Click <b>Add a position</b>, pick that account in the picker, and sign once.</li>
<li>Choose it under <b>Buy from</b> above and buy a $20 or larger package.</li>
</ol>
<p><button class="btn" id="qsAddBtn" type="button">Add a position</button>
<span class="small muted" id="qsHint"></span></p>
<div id="qsList" class="small"></div>
<p class="muted small" style="margin:12px 0 0">Your own money, your own wallets, a faster start. It is not an income promise: qualification only pays on future purchases in your line, and every purchase here is a real ad package you can spend.</p>
<p class="small" style="border:1px solid var(--line-strong);border-radius:10px;padding:8px 12px;margin:10px 0 0"><b>Positions are for qualifying.</b> Up to five per account, each registered directly under your main member. Once you are qualified, buy from your main wallet: that keeps your own sponsor paid in full, the same way your people's purchases pay you.</p>
</div>
<div class="card" id="qsCalcCard">
<h3>Qualified Start calculator</h3>
<p class="muted small">What it costs to open each level with your own positions, what comes straight back to your main wallet, and the ad credits you end up holding.</p>
<p style="display:flex;gap:12px;flex-wrap:wrap;align-items:center">
<label class="small">Positions <input type="number" id="qcN" min="1" max="10" value="2" style="width:80px;margin-left:6px"></label>
<label class="small">Package each <select id="qcPkg" style="margin-left:6px"><option value="20">$20 · 2,000 credits</option><option value="50">$50 · 5,500 credits</option><option value="100">$100 · 12,000 credits</option><option value="250">$250 · 32,500 credits</option></select></label>
</p>
<div id="qcOut" class="small"></div>
</div>
<div class="card ad-foot" id="adSlotPane-buy" hidden></div>
</div>
<div class="pane" id="pane-rotator" hidden>
<div class="card">
<h3>Your rotations</h3>
<p class="muted small">One short link, many destinations. Give each destination a weight and the link spreads visitors across them; pause any of them, set a fallback, and watch what each one gets. Every hit is counted with a bot filter, by country, source and device.</p>
<form id="rotNew" style="display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin:0 0 12px">
<label class="small muted">Name<br><input id="rotName" placeholder="Launch week offers" maxlength="80" required style="width:220px"></label>
<label class="small muted">Fallback (optional)<br><input id="rotFallback" placeholder="https://" style="width:260px"></label>
<button class="btn small" type="submit">Create rotation</button>
</form>
<div id="rotList"><p class="muted small">No rotations yet.</p></div>
</div>
<div class="card" id="rotCard" hidden>
<div style="display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap">
<div><h3 id="rotCardName" style="margin:0 0 4px"></h3><p class="mono small" id="rotCardLink" style="margin:0"></p></div>
<div><button class="btn small sec" type="button" id="rotCopy">Copy link</button> <button class="btn small sec" type="button" id="rotPause">Pause</button> <button class="btn small sec" type="button" id="rotDelete">Delete</button> <button class="btn small sec" type="button" id="rotClose">Close</button></div>
</div>
<p class="muted small" id="rotCardSum" style="margin:10px 0 6px"></p>
<div class="tw" style="overflow-x:auto"><table class="camp-table" id="rotDests"></table></div>
<form id="rotAdd" style="display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin:10px 0 0">
<label class="small muted">Destination URL<br><input id="rotUrl" placeholder="https://" required style="width:300px"></label>
<label class="small muted">Label<br><input id="rotLabel" placeholder="Bridge page A" maxlength="60" style="width:160px"></label>
<label class="small muted">Weight<br><input id="rotWeight" type="number" min="1" max="100" value="1" style="width:70px"></label>
<button class="btn small" type="submit">Add destination</button>
</form>
<div id="rotStats" style="margin-top:14px"></div>
</div>
<div class="card ad-foot" id="adSlotPane-rotator" hidden></div>
</div>
<div class="pane" id="pane-campaigns" hidden>
<div class="card" id="campGate" hidden>
<h3>Campaigns unlock with your first package</h3>
<p class="muted small">Campaigns spend the on-chain credits a package mints. Grab any package on the
<a href="/#packages">home page</a> and this tab turns into your campaign manager.</p>
</div>
<div class="card spend-banner" id="spendBanner" hidden>
<div class="lbl">Available to spend</div>
<div class="big"><span id="spendBig">0</span> <span class="unit">credits</span></div>
<div class="sub" id="spendSub"></div>
<div class="sub small" id="spendNote"></div>
<div class="rates" id="spendRates"></div>
</div>
<div class="card" id="whereCard">
<h3>Where your ads run</h3>
<p class="muted small">Every format has its own surfaces inside LinkSpin, and banner and text ads are also pushed into <b>Network Ad Space</b>, the Crypto Team Build Network's ad rotation that runs across the network's other member sites and tools. Impressions delivered out there are reconciled into your campaign stats here, so one budget works the whole network.</p>
<div class="tablewrap"><table class="small" id="whereTable">
<tr><th>Format</th><th>Shows up on</th></tr>
<tr><td>Banner</td><td>The ad viewer members open to earn (10-second dwell plus a human check), the home page, the live ledger, every member's Overview, the member-area sidebar tile, and the Network Ad Space rotation across the wider network.</td></tr>
<tr><td>Text ad</td><td>The ad viewer, the live ledger's text slot, and the Network Ad Space rotation.</td></tr>
<tr><td>Login ad</td><td>Full screen for every member who signs in, ten seconds, once a day per member.</td></tr>
<tr><td>Solo ad</td><td>Member inboxes under Earn credits, each read timed and rewarded, so the message actually gets opened.</td></tr>
<tr><td>Video ad</td><td>Watch videos and the Shorts feed under Earn credits, credited only on a completed watch.</td></tr>
<tr><td>Featured link</td><td>The Featured strip at the top of every member's Overview, for one, two or seven days.</td></tr>
<tr><td>Verified visits</td><td>A distinct member opens your site in a new tab, stays eight seconds and passes a check. Nobody counts twice.</td></tr>
</table></div>
</div>
<div class="card" id="campaignCard" hidden>
<h3>Your ad campaigns</h3>
<p class="muted small" id="rateLine">…</p>
<div id="campList"></div>
<h3 style="margin-top:18px">New campaign</h3>
<div class="grid c3">
<p><select id="cType" style="width:100%">
<option value="banner">Banner (per impression)</option>
<option value="text">Text ad (per impression)</option>
<option value="login">Login ad (per day)</option>
<option value="solo">Solo ad (inbox delivery)</option>
<option value="video">Video ad (watch to earn)</option>
<option value="featured">Featured link (rotation)</option>
<option value="visits">Verified visits (guaranteed unique)</option>
</select></p>
<p class="small muted" id="cWhere" style="margin:-4px 0 10px"></p>
<p><input id="cName" placeholder="Campaign name" style="width:100%"></p>
<p id="cBudgetRow"><input id="cBudget" type="number" placeholder="Budget (credits)" min="10" style="width:100%"></p>
<p id="cCapRow" style="grid-column:1/-1"><input id="cDailyCap" type="number" placeholder="Daily cap in credits (optional) — paces the budget across days" min="10" style="width:100%">
<span class="small muted">Network Ad Space can deliver a lot of impressions fast. A daily cap spreads a banner or text budget over days instead of hours.</span></p>
<div id="cGeoRow" style="grid-column:1/-1">
<span class="small muted">Show to:</span>
<label class="small" style="margin-left:10px"><input type="checkbox" class="geoTier" value="1" checked style="width:auto"> Tier 1 countries</label>
<label class="small" style="margin-left:10px"><input type="checkbox" class="geoTier" value="2" checked style="width:auto"> Tier 2</label>
<label class="small" style="margin-left:10px"><input type="checkbox" class="geoTier" value="3" checked style="width:auto"> Tier 3 (everyone else)</label>
<span class="small muted" id="cGeoHint" style="display:block;margin-top:4px">All three ticked = everyone. Untick tiers to narrow it. Geo applies to delivery on this site; a narrowed banner or text ad is kept off the worldwide partner network. IP geolocation by DB-IP.</span>
</div>
<div id="cSchedRow" style="grid-column:1/-1">
<div style="display:flex;gap:10px;flex-wrap:wrap">
<label class="small muted" style="flex:1 1 200px;display:block"><span id="cStartLbl">Start (optional)</span><input id="cStartAt" type="datetime-local" style="width:100%;margin-top:4px"></label>
<label class="small muted" style="flex:1 1 200px;display:block">End (optional)<input id="cEndAt" type="datetime-local" style="width:100%;margin-top:4px"></label>
</div>
<span class="small muted" id="cSchedHint">Leave both empty to start now and run until the budget is spent. Times are your local time. Anything left when a campaign ends goes back to Available.</span>
</div>
</div>
<p><input id="cTarget" placeholder="Target URL (https://…)" autocomplete="off" style="width:100%"></p>
<p class="small muted" style="margin-top:-6px">Banner and text targets are shown full screen in the
ad viewer, so those URLs must allow framing — we check them the moment you submit. Login and
solo links open in a fresh tab, so any working page is fine.</p>
<p id="cImageRow"><input id="cImage" placeholder="Image URL (banner/login ads)" autocomplete="off" style="width:100%"></p>
<p id="cSizeRow" hidden><select id="cSize" style="width:100%"></select></p>
<p id="cTitleRow" hidden><input id="cTitle" placeholder="Headline (max 60)" style="width:100%"></p>
<p id="cBodyRow" hidden><input id="cBody" placeholder="Ad text (max 140)" style="width:100%"></p>
<div id="cSoloRow" hidden>
<div class="ed-bar" aria-label="Formatting">
<button type="button" data-cmd="bold" title="Bold"><b>B</b></button>
<button type="button" data-cmd="italic" title="Italic"><i>I</i></button>
<button type="button" data-cmd="underline" title="Underline"><u>U</u></button>
<span class="ed-sep"></span>
<button type="button" data-block="h2" title="Heading">H<sub>2</sub></button>
<button type="button" data-block="h3" title="Subheading">H<sub>3</sub></button>
<button type="button" data-block="p" title="Normal text"></button>
<span class="ed-sep"></span>
<button type="button" data-cmd="insertUnorderedList" title="Bullet list">• List</button>
<button type="button" data-cmd="insertOrderedList" title="Numbered list">1. List</button>
<button type="button" id="edLinkBtn" title="Insert link">🔗 Link</button>
<span class="ed-sep"></span>
<button type="button" id="edImgBtn" title="Insert image">🖼 Image</button>
<button type="button" id="edVidBtn" title="Insert video">🎬 Video</button>
<span class="ed-sep"></span>
<button type="button" data-cmd="undo" title="Undo">↺</button>
<button type="button" data-cmd="redo" title="Redo">↻</button>
<button type="button" id="edRawBtn" title="Toggle raw text" style="margin-left:auto">Raw text</button>
</div>
<div id="cSoloEd" class="ed-body" contenteditable="true"
data-ph="Write it like an email worth reading. Bold the promise, list the proof, drop in an image or video, link the receipts."></div>
<textarea id="cSoloRaw" class="ed-body" hidden style="font-family:var(--mono);font-size:13px"></textarea>
<input type="file" id="cSoloFile" accept="image/png,image/jpeg,image/webp,image/gif,video/mp4,video/webm" hidden>
<span id="edMediaInfo" class="small muted"></span>
<p style="margin:12px 0 0"><input id="cCtaLabel" maxlength="30" style="width:100%"
placeholder="Call-to-action button label (default: Learn more) — the button opens your target URL"></p>
</div>
<p class="small muted" id="cSoloHint" hidden></p>
<div id="cVisitsRow" hidden>
<p><input id="cVisitTitle" maxlength="80" placeholder="Headline (what members see before visiting)" style="width:100%"></p>
<p><input id="cVisitCount" type="number" min="20" placeholder="How many verified visits?" style="width:100%"></p>
<p class="small muted" id="cVisitHint"></p>
</div>
<div id="cFeaturedRow" hidden>
<p><input id="cFeatTitle" maxlength="70" placeholder="Headline for your featured link" style="width:100%"></p>
<p class="small muted" style="margin-bottom:4px">Pick a start day (occupancy shown per day):</p>
<div id="cFeatDaysGrid" class="feat-days"></div>
<p style="margin-top:10px"><select id="cFeatDays" style="width:100%"></select></p>
<p class="small muted" id="cFeatHint"></p>
</div>
<div id="cVideoRow" hidden>
<p><input id="cVideoUrl" placeholder="Video URL (direct https link ending .mp4 or .webm)" autocomplete="off" style="width:100%"></p>
<p><input type="file" id="cVideoFile" accept="video/mp4,video/webm" hidden>
<button type="button" class="btn small sec" id="cVideoUploadBtn">Upload video</button>
<span id="cVideoInfo" class="small muted"></span></p>
<div id="cVideoPrev" hidden style="margin:8px 0"></div>
<p><input id="cVideoTitle" maxlength="80" placeholder="Video title (optional)" style="width:100%"></p>
<p><select id="cWatchSecs" style="width:100%"></select></p>
<p><input id="cVideoCta" maxlength="30" placeholder="Call-to-action label (default: Learn more)" style="width:100%"></p>
<p class="small muted" id="cVideoHint"></p>
</div>
<button class="btn" id="createCampBtn">Launch campaign</button>
</div>
<div class="card ad-foot" id="adSlotPane-campaigns" hidden></div>
</div>
<div class="pane" id="pane-earn" hidden>
<div class="subtabs" role="tablist">
<button class="subtab on" data-earn="watch" type="button">Watch ads</button>
<button class="subtab" data-earn="videos" type="button">Watch videos</button>
<button class="subtab" data-earn="visits" type="button">Verified visits</button>
<button class="subtab" data-earn="inbox" type="button">Inbox Ads<span class="pill" id="inboxBadge2" hidden></span></button>
</div>
<div class="earn-sub" id="earn-watch">
<div class="card">
<h3>Earn credits by viewing ads</h3>
<p class="small" style="border:1px solid var(--line-strong);border-radius:10px;padding:8px 12px;margin:0 0 10px"><b>You will never be shown your own ads here.</b> Everything you view, watch, visit or read on this tab comes from other members. Your own campaigns are seen by them, and by the wider network.</p>
<p class="muted small">Each ad opens full screen in its own tab, pointed at the advertiser's
real site. A countdown runs while you watch; when it hits zero, pass a quick check and the
view counts. Finish today's set, claim your credits, and spend them on banner and text
campaigns just like purchased ones.</p>
<p><span class="badge" id="earnProgress">…</span>
<span class="badge" id="earnBalance">…</span></p>
<div class="card" style="background:rgba(4,8,7,.5)" id="earnStage">
<div id="earnAdBox" class="small muted" style="min-height:80px;display:grid;place-items:center">
Press the button to open the first ad in a new tab.</div>
<p style="margin-top:14px">
<button class="btn" id="earnStartBtn" type="button">View today's ads</button>
<button class="btn" id="earnClaimBtn" type="button" hidden>Claim today's credits</button>
</p>
<p class="small muted" id="earnHint"></p>
</div>
</div>
</div>
<div class="earn-sub" id="earn-videos" hidden>
<div class="card">
<h3>Watch videos, earn credits</h3>
<p class="muted small">Watch a member's video for its required time and earn credits. The player
can't be skipped — the timer runs on our server. You never see your own videos.
Prefer a feed? <a href="/shorts">Open Shorts</a> for a full-screen, swipe-to-next experience.</p>
<p><span class="badge" id="vidProgress">…</span></p>
<div class="card" style="background:rgba(4,8,7,.5)" id="vidStage">
<div id="vidBox" class="small muted" style="min-height:120px;display:grid;place-items:center">
Press the button to load the first video.</div>
<div id="vidWrap" hidden style="max-width:560px;margin:0 auto">
<video id="vidPlayer" playsinline preload="auto" style="width:100%;border-radius:12px;background:#000"></video>
<p class="small muted" id="vidTimer" style="text-align:center;margin:8px 0 0"></p>
</div>
<p style="margin-top:14px">
<button class="btn" id="vidStartBtn" type="button">Load a video</button>
<a class="btn sec" id="vidCta" target="_blank" rel="noopener nofollow" hidden>Learn more</a>
</p>
<p class="small muted" id="vidHint"></p>
</div>
</div>
</div>
<div class="earn-sub" id="earn-visits" hidden>
<div class="card">
<h3>Verified visits, earn credits</h3>
<p class="muted small">Visit a member's site in a new tab, stay the required few seconds,
pass a quick check, and earn. Each site counts once for you — real, unique human visits.</p>
<p><span class="badge" id="vsProgress">…</span></p>
<div class="card" style="background:rgba(4,8,7,.5)">
<div id="vsBox" class="small muted" style="min-height:70px;display:grid;place-items:center">Press the button to load a site to visit.</div>
<div id="vsCheck" hidden style="margin-top:10px"><span class="prompt" id="vsPrompt"></span> <span id="vsOpts"></span></div>
<p style="margin-top:12px">
<button class="btn" id="vsStartBtn" type="button">Load a visit</button>
<a class="btn sec" id="vsVisit" target="_blank" rel="noopener nofollow" hidden>Open the site</a>
</p>
<p class="small muted" id="vsHint"></p>
</div>
</div>
</div>
<div class="earn-sub" id="earn-inbox" hidden>
<div class="card" id="inboxListCard">
<h3>Solo ads inbox</h3>
<p class="muted small">Full-message ads from members land here — each one delivered to you at
most once, never your own. Read one and click through to the advertiser to claim <span id="ibRewardNote">…</span>.</p>
<div id="ibList"><p class="muted small">Loading…</p></div>
</div>
<div class="card" id="inboxReadCard" hidden>
<p><a href="#" id="ibBack">← Back to inbox</a></p>
<h3 id="ibSubject"></h3>
<p class="small muted" id="ibMeta"></p>
<div id="ibMedia" hidden style="margin:12px 0"></div>
<div id="ibBody" class="promo-block ib-rich"></div>
<p style="margin-top:14px">
<a class="btn" id="ibVisit" target="_blank" rel="noopener nofollow">Visit the advertiser</a>
<button class="btn sec" id="ibClaimBtn" type="button" hidden>…</button></p>
<p class="small muted" id="ibHint"></p>
</div>
</div>
<div class="card ad-foot" id="adSlotPane-earn" hidden></div>
</div>
<div class="pane" id="pane-earnings" hidden>
<div id="activityArea" hidden>
<div class="grid c2">
<div class="card">
<h3>Earnings</h3>
<p class="muted small">Every payout the contract has sent to your wallet. Each line links to the transaction.</p>
<div class="feed" id="earnFeed"><div class="row muted">Nothing yet.</div></div>
</div>
<div class="card">
<h3>Your referrals</h3>
<p class="muted small">Activations and qualifying buys in your line.</p>
<div class="feed" id="refFeed"><div class="row muted">Nothing yet.</div></div>
</div>
</div>
<div class="card">
<h3>Your purchases</h3>
<div class="feed" id="buyFeed"><div class="row muted">Nothing yet.</div></div>
</div>
</div>
<div class="card" id="earnGate" hidden>
<h3>Your on-chain history starts with payouts</h3>
<p class="muted small">Once payouts are switched on, every payment, referral event, and purchase in
your line shows here with a verify link to the blockchain. Nothing to claim, nothing to request:
the money is already in your wallet when the line appears.</p>
</div>
<div class="card ad-foot" id="adSlotPane-earnings" hidden></div>
</div>
<div class="pane" id="pane-promo" hidden>
<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>
<span><button class="btn small sec" id="promoWallCopy" type="button">Copy wall link</button> <a class="btn small sec" id="promoWallOpen" href="#" target="_blank" rel="noopener">Open</a></span>
</div>
<div class="chips promo-pills" role="tablist" aria-label="Promo tools sections">
<button class="chip-t" data-promo="toolkit" type="button" role="tab">✨ AI Copy Engine</button>
<button class="chip-t on" data-promo="posts" type="button" role="tab">Social posts</button>
<button class="chip-t" data-promo="text" type="button" role="tab">Text a friend</button>
<button class="chip-t" data-promo="swipe" type="button" role="tab">Email swipes</button>
<button class="chip-t" data-promo="banners" type="button" role="tab">Banners</button>
<button class="chip-t" data-promo="wall" type="button" role="tab">Banner wall</button>
<button class="chip-t" data-promo="objections" type="button" role="tab">Objections</button>
<button class="chip-t" data-promo="videos" type="button" role="tab">Videos</button>
</div>
<div class="card promo-sec" id="promo-toolkit" hidden>
<div class="card-head"><h3>Your toolkit</h3><span class="sub" id="tkTierLine"></span></div>
<p class="muted small" style="margin:0 0 10px">Every badge unlocks more. Free tools are yours from day one; the AI Copy Engine opens at Surge, your first qualifying buyer.</p>
<div class="tk-tiers" id="tkTiers"></div>
<div id="tkEngine" style="margin-top:16px">
<div class="card-head"><h3>AI Copy Engine</h3><span class="sub" id="tkUsage"></span></div>
<div id="tkLocked" class="muted small" hidden></div>
<div id="tkForm" hidden>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin:0 0 8px">
<label class="small">What to write<select id="tkKind" style="width:100%"></select></label>
<label class="small">Angle<select id="tkAngle" style="width:100%"></select></label>
</div>
<label class="small">Brief (who it is for, what they said, what you want to say; or leave it blank)<textarea id="tkBrief" rows="3" style="width:100%" maxlength="800" placeholder="e.g. a friend who runs a safelist and says he never gets paid on time"></textarea></label>
<div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0"><button type="button" class="btn small" id="tkGo">Write it</button><span class="muted small" id="tkCostLine"></span></div>
<div id="tkOut" hidden><textarea id="tkText" rows="8" style="width:100%"></textarea>
<div style="display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 0"><button type="button" class="btn small sec" id="tkCopy">Copy</button><button type="button" class="btn small sec" id="tkAgain">Another take</button><button type="button" class="btn small" id="tkSendBc" hidden>Send to my team</button></div></div>
<div id="tkHistory" style="margin-top:14px"></div>
</div>
</div>
<div id="tkSpark" class="tk-sec">
<div class="card-head"><h3>Spark: campaign templates and handout</h3></div>
<div id="tkSparkLocked" class="muted small" hidden></div>
<div id="tkSparkBody" hidden>
<p class="muted small" style="margin:0 0 8px">One tap builds a campaign aimed at your invite link, funded from the credits you already hold. Edit or pause it any time under Campaigns.</p>
<div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 8px"><label class="small">Budget <input type="number" id="tkTplBudget" value="200" min="50" max="5000" style="width:90px"></label><span class="muted small">credits</span></div>
<div class="tk-grid">
<button type="button" class="btn small sec" data-tpl="banner">Banner 300x250</button>
<button type="button" class="btn small sec" data-tpl="leaderboard">Banner 728x90</button>
<button type="button" class="btn small sec" data-tpl="text">Text ad</button>
<button type="button" class="btn small sec" data-tpl="text2">Text ad, free angle</button>
</div>
<p class="small" style="margin:10px 0 0" id="tkHandoutLine"><a id="tkHandout" target="_blank" rel="noopener">Print your handout</a> <span class="muted">two per sheet, your QR and your link on each</span></p>
</div>
</div>
<div id="tkCircuit" class="tk-sec">
<div class="card-head"><h3>Circuit: Video Maker and split tester</h3></div>
<div id="tkCircuitLocked" class="muted small" hidden></div>
<div id="tkCircuitBody" hidden>
<p class="muted small" style="margin:0 0 8px">Every promo video, re-rendered with your own end card: your name, your link and your QR on the last four seconds. Made once, hosted for you, ready to download or post.</p>
<div id="tkVideos" class="tk-vids"></div>
<h4 style="margin:16px 0 6px">Which angle is pulling for you</h4>
<div id="tkSplit"></div>
</div>
</div>
<div id="tkNexus" class="tk-sec">
<div class="card-head"><h3>Nexus: Leader Ops</h3><span class="sub" id="tkTeamSub"></span></div>
<div id="tkNexusLocked" class="muted small" hidden></div>
<div id="tkNexusBody" hidden>
<div id="tkTeam"></div>
<div style="display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 0"><button type="button" class="btn small sec" id="tkDraftBc">Draft a team broadcast with the AI</button></div>
<h4 style="margin:16px 0 6px">Team credit grant</h4>
<p class="muted small" style="margin:0 0 6px">Move ad credits from your earned pool to anyone in your three levels. They get a message from you with it.</p>
<div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center"><select id="tkGrantTo" style="max-width:240px"></select><input type="number" id="tkGrantN" value="100" min="10" max="2000" style="width:90px"><button type="button" class="btn small" id="tkGrantGo">Send credits</button></div>
<h4 style="margin:16px 0 6px">Your partner code and kit</h4>
<div id="tkPartner"></div>
<p class="muted small" style="margin:8px 0 0">Co-branded join page: your bio (Profile) shows under your name on your invite page, so a visitor sees who is inviting them.</p>
</div>
</div>
</div>
<div class="card promo-sec" id="promo-posts">
<h3>Social posts, personalized with your link</h3>
<p class="muted small">Copy and paste, or post straight from here. Every post already carries your invite link,
so the credit is always yours. Angle links keep working when the matching hook pages ship.</p>
<div id="promoPosts"></div>
<div class="promo-bv">
<b>Want these in your own voice?</b>
<span class="muted small">Branded Voice writes posts, emails and stories the way you actually talk.</span>
<a class="btn small sec" href="https://mybrandedvoice.com" target="_blank" rel="noopener">mybrandedvoice.com</a>
</div>
</div>
<div class="card promo-sec" id="promo-text" hidden>
<h3>Text a friend</h3>
<p class="muted small">Short, low-pressure messages sized for a text. On your phone, <b>Text it</b> opens your
messaging app with the message ready, <b>WhatsApp</b> pre-fills it there, <b>Telegram</b> shares your link
with a lead-in, and <b>Copy</b> works for Messenger, Instagram DMs, anywhere.</p>
<div id="promoTexts"></div>
</div>
<div class="card promo-sec" id="promo-swipe" hidden>
<h3>Email swipes</h3>
<p class="muted small">Short, standard and long versions plus a follow-up. Subject line included. Edit freely, keep the honesty lines.</p>
<div id="promoSwipeWrap"></div>
</div>
<div class="card promo-sec" id="promo-banners" hidden>
<h3>Banners and graphics</h3>
<p class="muted small">Branded LinkSpin banners in every standard ad size, plus square, story and Telegram
group sizes. Open a size to see its banners. Pair one with your invite link. Download, or copy the image URL for ad networks.</p>
<div id="promoBanners" class="promo-banners"></div>
</div>
<div class="card promo-sec" id="promo-wall" hidden>
<h3>Your banner wall</h3>
<p class="muted small">A public page showing your line banner and your upline ladder, with your
join link front and center. Every visit puts eyes on your whole line — send traffic here and
the wall does the pitching.</p>
<p class="mono small" id="wallLine" style="overflow-wrap:anywhere">Set a username in Profile to claim your wall.</p>
<p><button class="btn small sec" id="wallCopy" type="button" hidden>Copy wall link</button>
<a class="btn small sec" id="wallOpen" target="_blank" rel="noopener" hidden>Open your wall</a></p>
</div>
<div class="card promo-sec" id="promo-objections" hidden>
<h3>Objection handling</h3>
<p class="muted small">The walls every builder hits, with answers that hold up. Open one: you get
<b>the truth</b>, so you never say something a prospect can poke a hole in, and a
<b>ready-to-send reply</b> with your link. Golden rule: lead with a real example, never a promise.</p>
<div id="promoObjections" class="obj-wrap"></div>
</div>
<div class="card promo-sec" id="promo-videos" hidden>
<h3>Hook videos</h3>
<p class="muted small">Short videos, one per angle, each with a matched invite link that lands on a
page continuing the same hook. Post the video with the matched link, or download it and use it anywhere.
Every caption below already carries your link.</p>
<div id="promoVideos"></div>
</div>
<div class="card ad-foot" id="adSlotPane-promo" hidden></div>
</div>
<div class="pane" id="pane-profile" hidden>
<div class="card">
<h3>Your profile</h3>
<p class="muted small">Your username is how other members see you: on the live ledger, in line
rosters, and on your personal invite link. Pick something you would put on a business card.</p>
<p><input id="pfUsername" placeholder="Username (3-20 letters, numbers, _)" style="width:100%;max-width:320px"></p>
<button class="btn" id="pfSaveBtn">Save username</button>
<p class="muted small" id="pfCurrent" style="margin-top:10px"></p>
</div>
<div class="card">
<h3>Avatar &amp; bio</h3>
<p class="muted small">Your face and your story, shown on your public profile page
(<span class="mono" id="pfBioLink">set a username to get your link</span>).</p>
<p><img id="pfAvatarPrev" alt="avatar" style="width:84px;height:84px;border-radius:50%;object-fit:cover;border:2px solid var(--line-strong)" hidden></p>
<p><input type="file" id="pfAvatarFile" accept="image/png,image/jpeg,image/webp,image/gif" hidden>
<button class="btn small sec" id="pfAvatarBtn" type="button">Upload avatar</button>
<span class="small muted" id="pfAvatarInfo"></span></p>
<p><textarea id="pfBio" rows="3" maxlength="600" placeholder="A short bio for your profile page…" style="width:100%"></textarea></p>
<p class="small muted" style="margin-bottom:4px">Social links (https URLs — shown on your public page):</p>
<div class="grid c2" style="gap:8px">
<input id="soc-facebook" placeholder="Facebook URL" style="width:100%">
<input id="soc-twitter" placeholder="X / Twitter URL" style="width:100%">
<input id="soc-youtube" placeholder="YouTube URL" style="width:100%">
<input id="soc-instagram" placeholder="Instagram URL" style="width:100%">
<input id="soc-tiktok" placeholder="TikTok URL" style="width:100%">
<input id="soc-telegram" placeholder="Telegram URL" style="width:100%">
<input id="soc-linkedin" placeholder="LinkedIn URL" style="width:100%">
<input id="soc-website" placeholder="Website URL" style="width:100%">
</div>
<p class="small muted" style="margin:10px 0 4px">Intro video on your public page (optional): a YouTube, Vimeo or direct .mp4 link. It plays right under your bio, before the line and the join button.</p>
<p><input id="soc-video" placeholder="https://www.youtube.com/watch?v=…" style="width:100%"></p>
<p style="margin-top:12px"><button class="btn" id="pfDetailsSave">Save profile</button>
<a class="btn small sec" id="pfViewBio" target="_blank" rel="noopener" hidden>View my page</a></p>
</div>
<div class="card">
<h3>Your line banner</h3>
<p class="muted small">Set a destination link (and a banner image for your wall), and every new
member joining your line meets it on their welcome tour: position 1 for your directs, position 2
for their people, position 3 below that — the same three levels the contract pays you on.</p>
<p><input id="lbTarget" placeholder="Destination URL (https://… — must allow framing)" style="width:100%"></p>
<p><input id="lbBanner" placeholder="Banner image URL (optional — or upload below)" style="width:100%"></p>
<p><input type="file" id="lbFile" accept="image/png,image/jpeg,image/webp,image/gif" hidden>
<button class="btn small sec" id="lbUploadBtn" type="button">Upload banner image</button>
<span class="small muted" id="lbUpInfo"></span></p>
<div id="lbPreview" hidden style="margin:8px 0"></div>
<p><button class="btn" id="lbSaveBtn">Save line banner</button></p>
<p class="muted small" id="lbCurrent"></p>
</div>
<div class="card" id="wallOffersCard">
<h3>Your wall: positions 2 and 3</h3>
<p class="muted small">Your public wall shows three ads. Position 1 is your line banner above. Positions 2 and 3
start out showing your upline (or LinkSpin). <b>Two qualifying buyers</b> make position 2 yours,
<b>five</b> make position 3 yours: your own links, your own offers, nobody else's ad on your page.
An unlocked slot you leave empty keeps showing your upline until you fill it.</p>
<p class="small" id="woStatus" style="color:var(--mint)"></p>
<div class="grid c2">
<div class="wo-slot" id="woSlot0">
<div class="wo-head"><b>Position 2</b> <span class="chip flat" id="woLock0"></span></div>
<p><input id="woTitle0" maxlength="60" placeholder="Label shown under the ad (optional)" style="width:100%"></p>
<p><input id="woTarget0" placeholder="Link (https://…)" style="width:100%"></p>
<p><input id="woBanner0" placeholder="Banner image URL (optional, or upload)" style="width:100%"></p>
<p><input type="file" class="wo-file" data-slot="0" accept="image/png,image/jpeg,image/webp,image/gif" hidden>
<button class="btn small sec wo-upload" data-slot="0" type="button">Upload image</button>
<span class="small muted" id="woInfo0"></span></p>
<div id="woPrev0" hidden style="margin:6px 0"></div>
</div>
<div class="wo-slot" id="woSlot1">
<div class="wo-head"><b>Position 3</b> <span class="chip flat" id="woLock1"></span></div>
<p><input id="woTitle1" maxlength="60" placeholder="Label shown under the ad (optional)" style="width:100%"></p>
<p><input id="woTarget1" placeholder="Link (https://…)" style="width:100%"></p>
<p><input id="woBanner1" placeholder="Banner image URL (optional, or upload)" style="width:100%"></p>
<p><input type="file" class="wo-file" data-slot="1" accept="image/png,image/jpeg,image/webp,image/gif" hidden>
<button class="btn small sec wo-upload" data-slot="1" type="button">Upload image</button>
<span class="small muted" id="woInfo1"></span></p>
<div id="woPrev1" hidden style="margin:6px 0"></div>
</div>
</div>
<p><button class="btn" id="woSaveBtn">Save wall positions</button></p>
</div>
<div class="card">
<h3>Sponsor chat</h3>
<p class="muted small">Your line can message you one-to-one for help, and you can message anyone
below you. When you are online you chat live; when you are away, messages wait in your inbox and
we email you. Turn this off and you stop taking live chats — people can still leave you a note,
you just reply on your own time.</p>
<label class="switch"><input type="checkbox" id="chatAvailToggle" checked>
<span>Available to chat with my line</span></label>
</div>
<div class="card">
<h3>Account details</h3>
<p class="muted small" id="pfDetails">…</p>
</div>
<div class="card ad-foot" id="adSlotPane-profile" hidden></div>
</div>
<div class="pane" id="pane-training" hidden>
<div class="card">
<h3>Training center</h3>
<p class="muted small">Everything to help you get started and grow: walkthrough videos and materials.
New lessons land here as they are added.</p>
</div>
<div class="chips" id="trainingPills" aria-label="Training sections" hidden></div>
<div id="trainingList"></div>
<div class="card ad-foot" id="adSlotPane-training" hidden></div>
</div>
<div class="pane" id="pane-wallet" hidden>
<div class="card" id="faucetCard" hidden>
<h3>Get test POL</h3>
<p class="muted small">This is the Polygon <b>Amoy testnet</b>, so purchases use valueless <b>test POL</b>, not real money.
Grab free test POL for your connected wallet from the Amoy faucet, then buy a package and watch the payouts
move on the live ledger exactly like mainnet will.</p>
<p><button class="btn" id="faucetBtn" type="button">Get free test POL</button>
<span class="small muted" id="faucetInfo"></span></p>
</div>
<div class="card">
<h3>Wallet connection</h3>
<p class="small" style="border:1px solid var(--line-strong);border-radius:10px;padding:8px 12px;margin:0 0 10px"><b>Everything here is POL on the Polygon network.</b> Packages are paid in POL and every payout lands as POL in this wallet. No other coin or chain is used, so keep the wallet on Polygon and keep a little POL for gas.</p>
<p class="muted small">Connected the wrong wallet, or stuck on a transaction prompt? Disconnect to clear the session, then reconnect or pick a different wallet.</p>
<p><button class="btn sec small" id="wcDisconnect" type="button">Disconnect wallet</button>
<span class="small muted" id="wcDisconnectInfo"></span></p>
</div>
<div class="card" id="posCard" hidden>
<h3>Your positions</h3>
<p class="muted small">Extra wallets you own, registered under your main member. Their credits pool with yours and each one that buys $20 or more counts toward your qualification.</p>
<div id="posList" class="small"></div>
<p style="margin:10px 0 0"><a class="btn sec small" href="#buy">Add or buy from a position</a></p>
</div>
<div class="grid c2">
<div class="card"><h3>Your account</h3>
<p id="posLine" class="muted small">…</p>
<p id="walletBal" class="small" hidden></p></div>
<div class="card"><h3>Ad credits</h3>
<p class="mono" style="font-size:26px;margin:0" id="creditLine">0</p>
<p class="muted small">1 credit = 1 cent of ad delivery across the network. Purchased credits are recorded on-chain; earned credits (viewing, promo codes, welcome bonus) live on your account. Only your campaigns can spend them.</p></div>
</div>
<div class="card" id="linkCard" hidden>
<h3>Link your wallet</h3>
<p class="muted small">Your earnings pay straight to your own wallet, so we need to know which one is yours.
One free signature links it. It cannot move funds or approve anything. Buying any package links it automatically too.</p>
<button class="btn" id="linkBtn">Connect &amp; link wallet</button>
</div>
<div class="card" id="activateCard" hidden>
<h3>Switch on payouts, free</h3>
<p class="muted small">One free transaction registers your linked wallet on-chain so commissions can reach it,
and it unlocks the full flow. Buying any package does this automatically.</p>
<button class="btn sec" id="activateBtn">Activate payouts</button>
</div>
<div class="card ad-foot" id="adSlotPane-wallet" hidden></div>
</div>
</main>
<footer class="bo-pagefoot">
<a href="/">Ad packages</a>
<a href="/ledger">Live ledger</a>
<a href="/contract">The contract</a>
</footer>
</div>
</div>
<!-- ── sponsor chat: slide-in drawer (threads list + 1:1 conversation) ── -->
<div id="chatDrawer" class="chat-drawer" hidden>
<div class="chat-head">
<button id="chatBack" class="chat-icon" type="button" hidden aria-label="Back to messages">‹</button>
<span id="chatDot" class="pres-dot" hidden></span>
<div class="chat-who"><b id="chatTitle">Messages</b><span id="chatStatus" class="small muted"></span></div>
<button id="chatMute" class="btn sec small" type="button" hidden>Mute</button>
<button id="chatClose" class="chat-icon" type="button" aria-label="Close">×</button>
</div>
<div id="chatThreads" class="chat-threads"><p class="muted small" style="padding:14px">Loading…</p></div>
<div id="chatConvo" class="chat-convo" hidden>
<div id="chatMsgs" class="chat-msgs"></div>
<div id="chatBanner" class="chat-banner" hidden></div>
<div class="chat-compose">
<textarea id="chatInput" rows="1" placeholder="Write a message…" maxlength="2000"></textarea>
<button id="chatSend" class="btn" type="button">Send</button>
</div>
</div>
</div>
<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=ls20260915a"></script>
<script src="/assets/chat.js?v=20260907l"></script>
</body>
</html>