marty/instantadpay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e22021c266c4a8eb57b2f6d1596e1d34f43a8592
instantadpay/public/my.html
T
martbost e22021c266 Member identity, promo tools, back-office color, seeded inventory 
Real people, not numbers: usernames (unique, profile pane to set them),
shown across the ledger, activity, rosters, and the sidebar chip; vanity
invite links (/join/<username>) with late chain binding intact. Promo tools
pane ships Branded Voice share posts and an email swipe personalized with
each member's link. The earn viewer excludes a member's own campaigns, so
nobody earns from their own spend. Back office gains the cyan/violet/amber
accent family over the green base. Three house campaigns seeded so every
surface shows live inventory. Assets v=20260905i.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-09-05 06:28:17 -05:00

298 lines
16 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Member area | InstantAdPay</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
<link rel="stylesheet" href="/assets/site.css?v=20260905i">
</head>
<body class="bo-body">
<!-- ── signed-out: centered auth ─────────────────────────── -->
<div id="authArea">
<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>
<div class="card" id="magicCard" hidden>
<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>
<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">Crypto-native? You can also <a href="#" id="walletSigninLink">sign in with just your wallet</a>.
One free signature, no email needed.</p>
<p class="small muted"><a href="/">← Back to the site</a></p>
<div class="card" id="adSlotLogin" hidden></div>
</div>
</div>
<!-- ── signed-in: back-office shell ──────────────────────── -->
<div id="memberArea" class="bo" hidden>
<aside class="bo-side" id="boSide">
<a class="logo" href="/">Instant<b>AdPay</b></a>
<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="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="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</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="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">Site</span>
<a href="/">Ad packages</a>
<a href="/ledger">Live ledger</a>
<a href="/contract">The contract</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>
</header>
<main class="bo-content">
<div class="pane" id="pane-overview">
<div class="stats" style="margin-top:0">
<div class="stat"><div class="n" id="dbCredits">0</div><div class="l">Ad credits</div><div class="small muted" id="dbCreditsSub"></div></div>
<div class="stat"><div class="n mono" id="dbEarned">0</div><div class="l">POL earned</div></div>
<div class="stat"><div class="n" id="dbBuyers">0</div><div class="l">Qualifying buyers</div></div>
<div class="stat"><div class="n" id="dbTeam">0</div><div class="l">Joined your line</div></div>
</div>
<div class="card" id="nextCard">
<h3>Your next move</h3>
<p class="muted" id="nextMove">…</p>
<div id="qualBarWrap">
<div class="qualbar"><div id="qualFill"></div>
<span class="qb-mark" style="left:40%">2 · level 2</span>
<span class="qb-mark end">5 · level 3</span>
</div>
</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>
</div>
</div>
<div class="card"><h3>Earning levels</h3>
<p id="qualLine" class="muted small">…</p></div>
</div>
</div>
<div class="card" id="adSlotOverview" hidden></div>
</div>
<div class="pane" id="pane-line" hidden>
<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">
<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>
<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>
<div class="tiles" id="boTiles"><div class="tile"><span class="muted small">Loading live prices…</span></div></div>
</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="/#ladder-h">home page</a> and this tab turns into your campaign manager.</p>
</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>
</select></p>
<p><input id="cName" placeholder="Campaign name" style="width:100%"></p>
<p><input id="cBudget" type="number" placeholder="Budget (credits)" min="10" style="width:100%"></p>
</div>
<p><input id="cTarget" placeholder="Target URL (https://…)" style="width:100%"></p>
<p id="cImageRow"><input id="cImage" placeholder="Image URL (banner/login ads)" style="width:100%"></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>
<button class="btn" id="createCampBtn">Launch campaign</button>
</div>
</div>
<div class="pane" id="pane-earn" hidden>
<div class="card">
<h3>Earn credits by viewing ads</h3>
<p class="muted small">View today's set of member ads, each for a few seconds, and claim your
daily credits. Attention earns advertising here: your earned credits spend 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:120px;display:grid;place-items:center">
Press start to see the first ad.</div>
<p style="margin-top:14px">
<button class="btn" id="earnStartBtn" type="button">Start viewing</button>
<button class="btn" id="earnNextBtn" type="button" hidden disabled>Next ad</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="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>
<div class="pane" id="pane-promo" hidden>
<div class="card">
<h3>Share-ready posts, personalized with your link</h3>
<p class="muted small">Copy, paste anywhere, done. Every post already carries your invite link,
so the credit is always yours.</p>
<div id="promoPosts"></div>
</div>
<div class="card">
<h3>Email swipe</h3>
<p class="muted small" id="promoSwipeWrap"></p>
</div>
<div class="card">
<h3>Banners</h3>
<p class="muted small">Branded InstantAdPay banner sets are in production. They will land here
sized for every standard placement, pre-tagged with your link.</p>
</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>Account details</h3>
<p class="muted small" id="pfDetails">…</p>
<p class="muted small">More profile fields (avatar, bio, links) are on the roadmap.</p>
</div>
</div>
<div class="pane" id="pane-wallet" hidden>
<div class="grid c2">
<div class="card"><h3>Your account</h3>
<p id="posLine" class="muted small">…</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. Recorded on-chain. 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>
</main>
</div>
</div>
<script src="/assets/common.js?v=20260905i"></script>
<script src="/assets/wallet.js?v=20260905i"></script>
<script src="/assets/my.js?v=20260905i"></script>
<script src="/assets/chat.js?v=20260905i"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink