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

Merge solo Inbox into Earn credits as a sub-tab; unread badge on Earn menu item

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-09-06 07:41:41 -05:00
parent 1ee0b5626e
commit b3be71135d
9 changed files with 98 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/my.js
+21 -5
View File
@@ -213,9 +213,9 @@
} }
// ── back-office menu: hash-routed panes ─────────────── // ── back-office menu: hash-routed panes ───────────────
const PANES = ['overview', 'line', 'buy', 'campaigns', 'inbox', 'earn', 'earnings', 'promo', 'wallet', 'profile']; const PANES = ['overview', 'line', 'buy', 'campaigns', 'earn', 'earnings', 'promo', 'wallet', 'profile'];
const TITLES = { overview: 'Overview', line: 'My line', buy: 'Buy packages', campaigns: 'Campaigns', const TITLES = { overview: 'Overview', line: 'My line', buy: 'Buy packages', campaigns: 'Campaigns',
inbox: 'Inbox', earn: 'Earn credits', earnings: 'Earnings', promo: 'Promo tools', earn: 'Earn credits', earnings: 'Earnings', promo: 'Promo tools',
wallet: 'Wallet & account', profile: 'Profile' }; wallet: 'Wallet & account', profile: 'Profile' };
function setPane(name) { function setPane(name) {
if (!PANES.includes(name)) name = 'overview'; if (!PANES.includes(name)) name = 'overview';
@@ -226,7 +226,7 @@
document.querySelectorAll('.bo-menu [data-pane]').forEach(b => document.querySelectorAll('.bo-menu [data-pane]').forEach(b =>
b.classList.toggle('on', b.dataset.pane === name)); b.classList.toggle('on', b.dataset.pane === name));
if ($('boTitle')) $('boTitle').textContent = TITLES[name]; if ($('boTitle')) $('boTitle').textContent = TITLES[name];
if (name === 'inbox') loadInbox(); if (name === 'earn') setEarnSub(earnSub); // refresh whichever sub-tab is active
if (name === 'profile') loadLineBanner(); if (name === 'profile') loadLineBanner();
document.getElementById('memberArea').classList.remove('side-open'); // close mobile drawer document.getElementById('memberArea').classList.remove('side-open'); // close mobile drawer
if (location.hash !== '#' + name) history.replaceState(null, '', '#' + name); if (location.hash !== '#' + name) history.replaceState(null, '', '#' + name);
@@ -434,9 +434,25 @@
// ── solo-ads inbox: list, read view, dwell-gated read reward ── // ── solo-ads inbox: list, read view, dwell-gated read reward ──
let ibTimer = null; let ibTimer = null;
function setInboxBadge(n) { function setInboxBadge(n) {
const b = $('inboxBadge'); for (const id of ['inboxBadge', 'inboxBadge2']) {
if (b) { b.hidden = !n; b.textContent = n; } const b = $(id);
if (b) { b.hidden = !n; b.textContent = n; }
}
} }
// Earn credits sub-tabs: Watch ads | Inbox
let earnSub = 'watch';
function setEarnSub(which) {
earnSub = which === 'inbox' ? 'inbox' : 'watch';
const w = $('earn-watch'), i = $('earn-inbox');
if (w) w.hidden = earnSub !== 'watch';
if (i) i.hidden = earnSub !== 'inbox';
document.querySelectorAll('.subtabs [data-earn]').forEach(b =>
b.classList.toggle('on', b.dataset.earn === earnSub));
if (earnSub === 'inbox') loadInbox();
else earnRefresh();
}
document.querySelectorAll('.subtabs [data-earn]').forEach(b =>
b.addEventListener('click', () => setEarnSub(b.dataset.earn)));
async function loadInbox() { async function loadInbox() {
try { try {
const r = await (await fetch('/api/my/inbox')).json(); const r = await (await fetch('/api/my/inbox')).json();
public/assets/site.css
+8
View File
@@ -357,6 +357,14 @@ textarea.ed-body{width:100%;min-height:180px;resize:vertical}
.ed-body a,.ib-rich a{color:var(--mint)} .ed-body a,.ib-rich a{color:var(--mint)}
.ed-body h3,.ib-rich h3,.ed-body h4,.ib-rich h4{margin:.5em 0 .3em} .ed-body h3,.ib-rich h3,.ed-body h4,.ib-rich h4{margin:.5em 0 .3em}
.ed-media{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0 0} .ed-media{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0 0}
/* ── earn sub-tabs (Watch ads | Inbox) ── */
.subtabs{display:flex;gap:6px;margin:0 0 16px;border-bottom:1px solid var(--line);padding-bottom:0}
.subtab{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);
font:inherit;font-weight:700;font-size:14px;padding:8px 14px;cursor:pointer;margin-bottom:-1px;
display:inline-flex;align-items:center;gap:7px}
.subtab:hover{color:var(--ink)}
.subtab.on{color:var(--mint);border-bottom-color:var(--mint)}
.subtab .pill{position:static}
/* ── solo-ads inbox ── */ /* ── solo-ads inbox ── */
.bo-menu .pill{margin-left:auto;background:var(--amber);color:#1a1206;font-size:11px;font-weight:800; .bo-menu .pill{margin-left:auto;background:var(--amber);color:#1a1206;font-size:11px;font-weight:800;
border-radius:999px;padding:1px 8px;line-height:1.5} border-radius:999px;padding:1px 8px;line-height:1.5}
public/contract.html
+4 -4
View File
@@ -5,7 +5,7 @@
<title>The contract | InstantAdPay</title> <title>The contract | InstantAdPay</title>
<meta name="description" content="Plain-language review of the InstantAdPay settlement contract: what it does, what nobody can change, what the operator can and cannot touch, and how to verify all of it yourself."> <meta name="description" content="Plain-language review of the InstantAdPay settlement contract: what it does, what nobody can change, what the operator can and cannot touch, and how to verify all of it yourself.">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap"> <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=20260905u"> <link rel="stylesheet" href="/assets/site.css?v=20260905v">
</head> </head>
<body> <body>
<div class="wrap"> <div class="wrap">
@@ -129,8 +129,8 @@
<div class="small">Advertising services with a performance referral program. Not an investment product; no income guarantees. Crypto transactions are irreversible. Never spend what you cannot afford.</div> <div class="small">Advertising services with a performance referral program. Not an investment product; no income guarantees. Crypto transactions are irreversible. Never spend what you cannot afford.</div>
</footer> </footer>
</div> </div>
<script src="/assets/common.js?v=20260905u"></script> <script src="/assets/common.js?v=20260905v"></script>
<script src="/assets/contract.js?v=20260905u"></script> <script src="/assets/contract.js?v=20260905v"></script>
<script src="/assets/chat.js?v=20260905u"></script> <script src="/assets/chat.js?v=20260905v"></script>
</body> </body>
</html> </html>
public/index.html
+5 -5
View File
@@ -5,7 +5,7 @@
<title>InstantAdPay: advertise and earn, locked in code</title> <title>InstantAdPay: advertise and earn, locked in code</title>
<meta name="description" content="Real ad packages with instant on-chain settlement. Every purchase pays the sponsor line in the same transaction, verifiable by anyone on the live ledger."> <meta name="description" content="Real ad packages with instant on-chain settlement. Every purchase pays the sponsor line in the same transaction, verifiable by anyone on the live ledger.">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap"> <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=20260905u"> <link rel="stylesheet" href="/assets/site.css?v=20260905v">
</head> </head>
<body> <body>
@@ -410,9 +410,9 @@
</div> </div>
</section> </section>
<script src="/assets/common.js?v=20260905u"></script> <script src="/assets/common.js?v=20260905v"></script>
<script src="/assets/wallet.js?v=20260905u"></script> <script src="/assets/wallet.js?v=20260905v"></script>
<script src="/assets/home.js?v=20260905u"></script> <script src="/assets/home.js?v=20260905v"></script>
<script src="/assets/chat.js?v=20260905u"></script> <script src="/assets/chat.js?v=20260905v"></script>
</body> </body>
</html> </html>
public/ledger.html
+4 -4
View File
@@ -5,7 +5,7 @@
<title>Live ledger | InstantAdPay</title> <title>Live ledger | InstantAdPay</title>
<meta name="description" content="Every purchase, payout, and pass-up on InstantAdPay, streamed straight from the blockchain with a verify link on every line."> <meta name="description" content="Every purchase, payout, and pass-up on InstantAdPay, streamed straight from the blockchain with a verify link on every line.">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap"> <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=20260905u"> <link rel="stylesheet" href="/assets/site.css?v=20260905v">
</head> </head>
<body> <body>
<div class="wrap"> <div class="wrap">
@@ -25,8 +25,8 @@
<div>InstantAdPay · <a href="/">how it works</a> · <a id="contractLink" href="#" target="_blank" rel="noopener">contract source ↗</a></div> <div>InstantAdPay · <a href="/">how it works</a> · <a id="contractLink" href="#" target="_blank" rel="noopener">contract source ↗</a></div>
</footer> </footer>
</div> </div>
<script src="/assets/common.js?v=20260905u"></script> <script src="/assets/common.js?v=20260905v"></script>
<script src="/assets/ledger.js?v=20260905u"></script> <script src="/assets/ledger.js?v=20260905v"></script>
<script src="/assets/chat.js?v=20260905u"></script> <script src="/assets/chat.js?v=20260905v"></script>
</body> </body>
</html> </html>
public/my.html
+48 -42
View File
@@ -4,7 +4,7 @@
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Member area | InstantAdPay</title> <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="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
<link rel="stylesheet" href="/assets/site.css?v=20260905u"> <link rel="stylesheet" href="/assets/site.css?v=20260905v">
</head> </head>
<body class="bo-body"> <body class="bo-body">
@@ -91,8 +91,7 @@
<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="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="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="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="inbox" type="button"><svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 8l9 6 9-6"/></svg>Inbox<span class="pill" id="inboxBadge" hidden></span></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="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="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="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="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>
@@ -291,43 +290,50 @@
</div> </div>
</div> </div>
<div class="pane" id="pane-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. Give one a real read and 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="pane" id="pane-earn" hidden> <div class="pane" id="pane-earn" hidden>
<div class="card"> <div class="subtabs" role="tablist">
<h3>Earn credits by viewing ads</h3> <button class="subtab on" data-earn="watch" type="button">Watch ads</button>
<p class="muted small">Each ad opens full screen in its own tab, pointed at the advertiser's <button class="subtab" data-earn="inbox" type="button">Inbox<span class="pill" id="inboxBadge2" hidden></span></button>
real site. A countdown runs while you watch; when it hits zero, pass a quick check and the </div>
view counts. Finish today's set, claim your credits, and spend them on banner and text
campaigns just like purchased ones.</p> <div class="earn-sub" id="earn-watch">
<p><span class="badge" id="earnProgress">…</span> <div class="card">
<span class="badge" id="earnBalance">…</span></p> <h3>Earn credits by viewing ads</h3>
<div class="card" style="background:rgba(4,8,7,.5)" id="earnStage"> <p class="muted small">Each ad opens full screen in its own tab, pointed at the advertiser's
<div id="earnAdBox" class="small muted" style="min-height:80px;display:grid;place-items:center"> real site. A countdown runs while you watch; when it hits zero, pass a quick check and the
Press the button to open the first ad in a new tab.</div> 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-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"> <p style="margin-top:14px">
<button class="btn" id="earnStartBtn" type="button">View today's ads</button> <a class="btn" id="ibVisit" target="_blank" rel="noopener nofollow">Visit the advertiser</a>
<button class="btn" id="earnClaimBtn" type="button" hidden>Claim today's credits</button> <button class="btn sec" id="ibClaimBtn" type="button" hidden>…</button></p>
</p> <p class="small muted" id="ibHint"></p>
<p class="small muted" id="earnHint"></p>
</div> </div>
</div> </div>
</div> </div>
@@ -442,9 +448,9 @@
</div> </div>
</div> </div>
<script src="/assets/common.js?v=20260905u"></script> <script src="/assets/common.js?v=20260905v"></script>
<script src="/assets/wallet.js?v=20260905u"></script> <script src="/assets/wallet.js?v=20260905v"></script>
<script src="/assets/my.js?v=20260905u"></script> <script src="/assets/my.js?v=20260905v"></script>
<script src="/assets/chat.js?v=20260905u"></script> <script src="/assets/chat.js?v=20260905v"></script>
</body> </body>
</html> </html>
public/tx.html
+3 -3
View File
@@ -4,7 +4,7 @@
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Transaction | InstantAdPay</title> <title>Transaction | InstantAdPay</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap"> <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=20260905u"> <link rel="stylesheet" href="/assets/site.css?v=20260905v">
</head> </head>
<body> <body>
<div id="nav"></div> <div id="nav"></div>
@@ -33,7 +33,7 @@
<p><a href="/ledger">← Back to the live ledger</a> · <a href="/contract">Read the contract review</a></p> <p><a href="/ledger">← Back to the live ledger</a> · <a href="/contract">Read the contract review</a></p>
</div> </div>
</section> </section>
<script src="/assets/common.js?v=20260905u"></script> <script src="/assets/common.js?v=20260905v"></script>
<script src="/assets/tx.js?v=20260905u"></script> <script src="/assets/tx.js?v=20260905v"></script>
</body> </body>
</html> </html>
public/view.html
+2 -2
View File
@@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Viewing ad — InstantAdPay</title> <title>Viewing ad — InstantAdPay</title>
<link rel="stylesheet" href="/assets/site.css?v=20260905u"> <link rel="stylesheet" href="/assets/site.css?v=20260905v">
<style> <style>
html,body{height:100%;margin:0;overflow:hidden} html,body{height:100%;margin:0;overflow:hidden}
.vw{display:flex;flex-direction:column;height:100vh;height:100dvh;background:var(--bg,#04110c);color:var(--ink,#e8fff7)} .vw{display:flex;flex-direction:column;height:100vh;height:100dvh;background:var(--bg,#04110c);color:var(--ink,#e8fff7)}
@@ -43,6 +43,6 @@
</div> </div>
<iframe class="vframe" id="vFrame" sandbox="allow-scripts allow-same-origin allow-forms allow-popups" referrerpolicy="no-referrer" title="Advertiser site"></iframe> <iframe class="vframe" id="vFrame" sandbox="allow-scripts allow-same-origin allow-forms allow-popups" referrerpolicy="no-referrer" title="Advertiser site"></iframe>
</div> </div>
<script src="/assets/view.js?v=20260905u"></script> <script src="/assets/view.js?v=20260905v"></script>
</body> </body>
</html> </html>
public/wall.html
+3 -3
View File
@@ -4,7 +4,7 @@
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Banner wall | InstantAdPay</title> <title>Banner wall | InstantAdPay</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap"> <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=20260905u"> <link rel="stylesheet" href="/assets/site.css?v=20260905v">
</head> </head>
<body> <body>
<div id="nav"></div> <div id="nav"></div>
@@ -26,7 +26,7 @@
</div> </div>
</div> </div>
</section> </section>
<script src="/assets/common.js?v=20260905u"></script> <script src="/assets/common.js?v=20260905v"></script>
<script src="/assets/wall.js?v=20260905u"></script> <script src="/assets/wall.js?v=20260905v"></script>
</body> </body>
</html> </html>