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

Wall page: mint QR, achievement badge, admin-ad backfill, join gated on views

Browse Source 
- QR is mint-green (still high-contrast for reliable scanning).
- The wall shows the owner's achievement badge next to their avatar.
- Positions 2 & 3 fill with upline line-banners, then ADMIN ADS when there's no
  upline (configurable via data/admin-wall-ads.json; sensible default) so the
  wall is never sparse.
- "Join free through this wall" is disabled until the visitor has viewed every
  ad on the wall, with a "X/Y viewed" prompt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-09-07 08:35:44 -05:00
parent a4119d652d
commit 0dbd99f69e
11 changed files with 59 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/site.css
+2
View File
@@ -376,6 +376,8 @@ textarea{resize:vertical;font:inherit}
/* ── bio header (wall/profile page) ── */
.bio-head{display:flex;gap:22px;align-items:center;flex-wrap:wrap;padding:8px 0 4px}
.bio-avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;border:2px solid var(--mint);flex:0 0 auto}
.bio-badge{width:74px;height:74px;border-radius:12px;object-fit:cover;flex:0 0 auto;border:1px solid var(--line-strong)}
.btn.disabled{opacity:.45;pointer-events:none;filter:grayscale(.3)}
.bio-meta{flex:1;min-width:220px}
.bio-socials{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.bio-socials a{font-size:12px;font-weight:700;color:var(--mint);border:1px solid var(--line-strong);
public/assets/wall.js
+13 -2
View File
@@ -16,6 +16,7 @@
title.innerHTML = safeName;
IAP.$('bioHead').hidden = false;
if (w.avatarUrl) { const av = IAP.$('bioAvatar'); av.src = w.avatarUrl; av.hidden = false; }
if (w.badge) { const bb = IAP.$('bioBadge'); if (bb) { bb.src = w.badge.img; bb.title = w.badge.label + ' badge'; bb.hidden = false; } }
IAP.$('bioText').textContent = w.bio || 'Building a team on InstantAdPay — join through this page and you\'re in my line.';
if (w.qrUrl) IAP.$('bioQr').src = w.qrUrl;
// social links
@@ -27,7 +28,6 @@
sc.innerHTML = links.join('');
}
IAP.$('wallCtaHead').textContent = 'Join ' + w.name + '’s line';
IAP.$('wallJoin').href = w.joinUrl;
// per-wall viewed-position memory (survives revisits; anonymous-friendly)
const VKEY = 'iap-wall-' + name;
let viewed = {};
@@ -35,6 +35,16 @@
const DWELL = 10;
const grid = IAP.$('wallGrid');
grid.innerHTML = '';
// join is gated: you must view every ad on the wall before you can join
const joinBtn = IAP.$('wallJoin'), gate = IAP.$('wallGate');
function updateGate() {
const viewable = w.ladder.filter(m => m.targetUrl).length;
const seen = w.ladder.filter((m, i) => m.targetUrl && viewed[i]).length;
if (viewable > 0 && seen < viewable) {
joinBtn.classList.add('disabled'); joinBtn.removeAttribute('href');
if (gate) { gate.hidden = false; gate.textContent = 'View all ' + viewable + ' ads above to unlock joining (' + seen + '/' + viewable + ' viewed).'; }
} else { joinBtn.href = w.joinUrl; joinBtn.classList.remove('disabled'); if (gate) gate.hidden = true; }
}
w.ladder.forEach((m, i) => {
const d = document.createElement('div');
d.className = 'wall-card';
@@ -64,11 +74,12 @@
clearInterval(t);
viewed[i] = 1;
try { localStorage.setItem(VKEY, JSON.stringify(viewed)); } catch (e) {}
done();
done(); updateGate();
}, 1000);
});
act.appendChild(btn);
}
grid.appendChild(d);
});
updateGate();
})();
public/contract.html
+2 -2
View File
@@ -16,7 +16,7 @@
<meta name="twitter:image" content="https://instantadpay.com/banners/iap-hero-1200x630.png">
<meta name="theme-color" content="#043b2f">
<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=20260906m">
<link rel="stylesheet" href="/assets/site.css?v=20260907s">
</head>
<body>
<div class="wrap">
@@ -140,7 +140,7 @@
<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>
</div>
<script src="/assets/common.js?v=20260907n"></script>
<script src="/assets/common.js?v=20260907s"></script>
<script src="/assets/contract.js?v=20260906m"></script>
<script src="/assets/chat.js?v=20260906m"></script>
</body>
public/index.html
+2 -2
View File
@@ -19,7 +19,7 @@
<meta name="twitter:image" content="https://instantadpay.com/banners/iap-hero-1200x630.png">
<meta name="theme-color" content="#043b2f">
<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=20260906m">
<link rel="stylesheet" href="/assets/site.css?v=20260907s">
</head>
<body>
@@ -437,7 +437,7 @@
</div>
</section>
<script src="/assets/common.js?v=20260907n"></script>
<script src="/assets/common.js?v=20260907s"></script>
<script src="/assets/wallet.js?v=20260907q"></script>
<script src="/assets/home.js?v=20260906m"></script>
<script src="/assets/chat.js?v=20260906m"></script>
public/ledger.html
+2 -2
View File
@@ -16,7 +16,7 @@
<meta name="twitter:image" content="https://instantadpay.com/banners/iap-hero-1200x630.png">
<meta name="theme-color" content="#043b2f">
<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=20260906m">
<link rel="stylesheet" href="/assets/site.css?v=20260907s">
</head>
<body>
<div class="wrap">
@@ -36,7 +36,7 @@
<div>InstantAdPay · <a href="/">how it works</a> · <a id="contractLink" href="#" target="_blank" rel="noopener">contract source ↗</a></div>
</footer>
</div>
<script src="/assets/common.js?v=20260907n"></script>
<script src="/assets/common.js?v=20260907s"></script>
<script src="/assets/ledger.js?v=20260906m"></script>
<script src="/assets/chat.js?v=20260906m"></script>
</body>
public/my.html
+2 -2
View File
@@ -4,7 +4,7 @@
<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=20260907o">
<link rel="stylesheet" href="/assets/site.css?v=20260907s">
</head>
<body class="bo-body">
@@ -664,7 +664,7 @@
</div>
</div>
</div>
<script src="/assets/common.js?v=20260907n"></script>
<script src="/assets/common.js?v=20260907s"></script>
<script src="/assets/wallet.js?v=20260907q"></script>
<script src="/assets/my.js?v=20260907r"></script>
<script src="/assets/chat.js?v=20260907l"></script>
public/shorts.html
+1 -1
View File
@@ -4,7 +4,7 @@
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Shorts | 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=20260906m">
<link rel="stylesheet" href="/assets/site.css?v=20260907s">
<style>
html,body{height:100%;margin:0;overflow:hidden;background:#000}
.sh{position:fixed;inset:0;display:flex;flex-direction:column;background:#000;color:var(--ink,#e8fff7)}
public/tx.html
+2 -2
View File
@@ -4,7 +4,7 @@
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<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="/assets/site.css?v=20260906m">
<link rel="stylesheet" href="/assets/site.css?v=20260907s">
</head>
<body>
<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>
</div>
</section>
<script src="/assets/common.js?v=20260907n"></script>
<script src="/assets/common.js?v=20260907s"></script>
<script src="/assets/tx.js?v=20260906m"></script>
</body>
</html>
public/view.html
+1 -1
View File
@@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Viewing ad — InstantAdPay</title>
<link rel="stylesheet" href="/assets/site.css?v=20260906m">
<link rel="stylesheet" href="/assets/site.css?v=20260907s">
<style>
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)}
public/wall.html
+5 -3
View File
@@ -5,7 +5,7 @@
<title>Banner wall | InstantAdPay</title>
<!--OG-->
<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=20260906m">
<link rel="stylesheet" href="/assets/site.css?v=20260907s">
</head>
<body>
<div id="nav"></div>
@@ -13,6 +13,7 @@
<div class="wrap" style="max-width:920px">
<div class="bio-head" id="bioHead" hidden>
<img id="bioAvatar" class="bio-avatar" alt="" hidden>
<img id="bioBadge" class="bio-badge" alt="achievement badge" hidden>
<div class="bio-meta">
<p class="eyebrow">Member profile</p>
<h2 id="wallTitle" style="margin:.1em 0">Loading…</h2>
@@ -31,12 +32,13 @@
<h3 id="wallCtaHead">Join this line</h3>
<p class="muted small">Free to join with just an email. Your wallet only comes out if you buy —
and payments go straight to member wallets, never through an admin.</p>
<p id="wallGate" class="small" style="color:var(--amber);font-weight:600" hidden></p>
<p><a class="btn" id="wallJoin">Join free through this wall</a></p>
<p class="small muted"><a href="/ledger">Watch the live ledger</a> · <a href="/contract">Read the contract</a></p>
</div>
</div>
</section>
<script src="/assets/common.js?v=20260907n"></script>
<script src="/assets/wall.js?v=20260906m"></script>
<script src="/assets/common.js?v=20260907s"></script>
<script src="/assets/wall.js?v=20260907s"></script>
</body>
</html>