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

125x125 sidebar banner (sized ad serving) + shorts report link

Browse Source 
- New 125x125 "square button" banner size; ad serve now filters by width/height,
  and the sidebar slot serves a 125x125 banner (empty until such inventory exists).
- Shorts reel gets a "report this short" link (posts to /api/report-ad).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-09-07 08:47:17 -05:00
parent 31a6560e9e
commit ae580b966c
14 changed files with 33 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ads.js
BIN
View File
Binary file not shown.
public/assets/common.js
+3 -2
View File
@@ -111,9 +111,10 @@ window.IAP = (function () {
const rl = el.querySelector('.ad-report'); const rl = el.querySelector('.ad-report');
if (rl) rl.addEventListener('click', e => { e.preventDefault(); reportAd(Number(rl.dataset.cid)); }); if (rl) rl.addEventListener('click', e => { e.preventDefault(); reportAd(Number(rl.dataset.cid)); });
} }
async function adSlot(type, elId) { async function adSlot(type, elId, opts) {
try { try {
const { ad } = await (await fetch('/api/ads/slot?type=' + type)).json(); const q = '/api/ads/slot?type=' + type + (opts && opts.width ? '&w=' + opts.width + '&h=' + opts.height : '');
const { ad } = await (await fetch(q)).json();
const el = $(elId); const el = $(elId);
if (!ad || !el) return; if (!ad || !el) return;
if (ad.imageUrl) { if (ad.imageUrl) {
public/assets/my.js
+1 -1
View File
@@ -1714,7 +1714,7 @@
// banner + text placements inside the back office (they ARE the audience) // banner + text placements inside the back office (they ARE the audience)
IAP.adSlot('banner', 'adSlotLogin'); IAP.adSlot('banner', 'adSlotLogin');
IAP.adSlot('banner', 'adSlotOverview'); IAP.adSlot('banner', 'adSlotOverview');
IAP.adSlot('text', 'adSlotSide'); IAP.adSlot('banner', 'adSlotSide', { width: 125, height: 125 }); // square button ad in the sidebar
render(); render();
})(); })();
public/assets/shorts.js
+8 -1
View File
@@ -21,7 +21,7 @@
$('shMsg').textContent = r.status.left <= 0 ? 'That\'s today\'s shorts. Come back tomorrow.' : 'No shorts in rotation right now. Check back soon.'; $('shMsg').textContent = r.status.left <= 0 ? 'That\'s today\'s shorts. Come back tomorrow.' : 'No shorts in rotation right now. Check back soon.';
return; return;
} }
st.token = r.token; st.secs = r.ad.watchSecs; st.token = r.token; st.secs = r.ad.watchSecs; st.adId = r.ad.id;
const v = $('shVideo'); const v = $('shVideo');
$('shMsg').hidden = true; v.hidden = false; $('shMsg').hidden = true; v.hidden = false;
v.src = r.ad.videoUrl; v.currentTime = 0; v.src = r.ad.videoUrl; v.currentTime = 0;
@@ -53,6 +53,13 @@
$('shNext').hidden = false; $('shNext').hidden = false;
} }
$('shNext').addEventListener('click', load); $('shNext').addEventListener('click', load);
$('shReport').addEventListener('click', e => {
e.preventDefault(); if (!st.adId) return;
const reason = (prompt('Report this short: broken, inappropriate, spam, scam, or other', 'inappropriate') || '').trim().toLowerCase();
if (!reason) return;
fetch('/api/report-ad', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ campaignId: st.adId, reason }) })
.then(() => { $('shReport').textContent = '✓ reported — thanks'; }).catch(() => {});
});
// presence enforcement: pause when the tab/window loses focus, resume on return // presence enforcement: pause when the tab/window loses focus, resume on return
document.addEventListener('visibilitychange', () => { document.addEventListener('visibilitychange', () => {
const v = $('shVideo'); if (!v || !v.src) return; const v = $('shVideo'); if (!v || !v.src) return;
public/assets/site.css
+3
View File
@@ -574,3 +574,6 @@ img{max-width:100%}
.lt-node.deep{color:var(--muted)} .lt-node.deep{color:var(--muted)}
.lt-node.qualified{border-color:#ffb238;color:#ffd15c;box-shadow:0 0 0 1px rgba(255,177,56,.35)} .lt-node.qualified{border-color:#ffb238;color:#ffd15c;box-shadow:0 0 0 1px rgba(255,177,56,.35)}
.lt-node.open{border-style:dashed;color:var(--muted);background:transparent} .lt-node.open{border-style:dashed;color:var(--muted);background:transparent}
.sh-report{display:block;text-align:center;margin-top:10px;color:rgba(255,255,255,.45);font-size:12px}
.sh-report:hover{color:rgba(255,255,255,.8)}
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="twitter:image" content="https://instantadpay.com/banners/iap-hero-1200x630.png">
<meta name="theme-color" content="#043b2f"> <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="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
<link rel="stylesheet" href="/assets/site.css?v=20260907s"> <link rel="stylesheet" href="/assets/site.css?v=20260907v">
</head> </head>
<body> <body>
<div class="wrap"> <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> <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=20260907s"></script> <script src="/assets/common.js?v=20260907v"></script>
<script src="/assets/contract.js?v=20260906m"></script> <script src="/assets/contract.js?v=20260906m"></script>
<script src="/assets/chat.js?v=20260906m"></script> <script src="/assets/chat.js?v=20260906m"></script>
</body> </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="twitter:image" content="https://instantadpay.com/banners/iap-hero-1200x630.png">
<meta name="theme-color" content="#043b2f"> <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="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
<link rel="stylesheet" href="/assets/site.css?v=20260907s"> <link rel="stylesheet" href="/assets/site.css?v=20260907v">
</head> </head>
<body> <body>
@@ -437,7 +437,7 @@
</div> </div>
</section> </section>
<script src="/assets/common.js?v=20260907s"></script> <script src="/assets/common.js?v=20260907v"></script>
<script src="/assets/wallet.js?v=20260907q"></script> <script src="/assets/wallet.js?v=20260907q"></script>
<script src="/assets/home.js?v=20260906m"></script> <script src="/assets/home.js?v=20260906m"></script>
<script src="/assets/chat.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="twitter:image" content="https://instantadpay.com/banners/iap-hero-1200x630.png">
<meta name="theme-color" content="#043b2f"> <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="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
<link rel="stylesheet" href="/assets/site.css?v=20260907s"> <link rel="stylesheet" href="/assets/site.css?v=20260907v">
</head> </head>
<body> <body>
<div class="wrap"> <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> <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=20260907s"></script> <script src="/assets/common.js?v=20260907v"></script>
<script src="/assets/ledger.js?v=20260906m"></script> <script src="/assets/ledger.js?v=20260906m"></script>
<script src="/assets/chat.js?v=20260906m"></script> <script src="/assets/chat.js?v=20260906m"></script>
</body> </body>
public/my.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>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=20260907t"> <link rel="stylesheet" href="/assets/site.css?v=20260907v">
</head> </head>
<body class="bo-body"> <body class="bo-body">
@@ -678,9 +678,9 @@
</div> </div>
</div> </div>
</div> </div>
<script src="/assets/common.js?v=20260907s"></script> <script src="/assets/common.js?v=20260907v"></script>
<script src="/assets/wallet.js?v=20260907q"></script> <script src="/assets/wallet.js?v=20260907q"></script>
<script src="/assets/my.js?v=20260907u"></script> <script src="/assets/my.js?v=20260907v"></script>
<script src="/assets/chat.js?v=20260907l"></script> <script src="/assets/chat.js?v=20260907l"></script>
</body> </body>
</html> </html>
public/shorts.html
+3 -2
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>Shorts | InstantAdPay</title> <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="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
<link rel="stylesheet" href="/assets/site.css?v=20260907s"> <link rel="stylesheet" href="/assets/site.css?v=20260907v">
<style> <style>
html,body{height:100%;margin:0;overflow:hidden;background:#000} 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)} .sh{position:fixed;inset:0;display:flex;flex-direction:column;background:#000;color:var(--ink,#e8fff7)}
@@ -40,9 +40,10 @@
<a class="btn small" id="shCta" target="_blank" rel="noopener nofollow" hidden>Learn more</a> <a class="btn small" id="shCta" target="_blank" rel="noopener nofollow" hidden>Learn more</a>
<button class="btn small sec" id="shNext" type="button" hidden>Next short →</button> <button class="btn small sec" id="shNext" type="button" hidden>Next short →</button>
</div> </div>
<a href="#" id="shReport" class="sh-report">⚠ report this short</a>
</div> </div>
</div> </div>
</div> </div>
<script src="/assets/shorts.js?v=20260907e"></script> <script src="/assets/shorts.js?v=20260907v"></script>
</body> </body>
</html> </html>
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"> <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=20260907s"> <link rel="stylesheet" href="/assets/site.css?v=20260907v">
</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=20260907s"></script> <script src="/assets/common.js?v=20260907v"></script>
<script src="/assets/tx.js?v=20260906m"></script> <script src="/assets/tx.js?v=20260906m"></script>
</body> </body>
</html> </html>
public/view.html
+1 -1
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=20260907s"> <link rel="stylesheet" href="/assets/site.css?v=20260907v">
<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)}
public/wall.html
+2 -2
View File
@@ -5,7 +5,7 @@
<title>Banner wall | InstantAdPay</title> <title>Banner wall | InstantAdPay</title>
<!--OG--> <!--OG-->
<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=20260907s"> <link rel="stylesheet" href="/assets/site.css?v=20260907v">
</head> </head>
<body> <body>
<div id="nav"></div> <div id="nav"></div>
@@ -38,7 +38,7 @@
</div> </div>
</div> </div>
</section> </section>
<script src="/assets/common.js?v=20260907s"></script> <script src="/assets/common.js?v=20260907v"></script>
<script src="/assets/wall.js?v=20260907s"></script> <script src="/assets/wall.js?v=20260907s"></script>
</body> </body>
</html> </html>
server.js
+1 -1
View File
@@ -1149,7 +1149,7 @@ const server = http.createServer(async (req, res) => {
// -- ad engine (spec §8b v1: banners, text, login ads) // -- ad engine (spec §8b v1: banners, text, login ads)
if (p === '/api/ads/slot' && req.method === 'GET') { if (p === '/api/ads/slot' && req.method === 'GET') {
const t = String(u.searchParams.get('type') || 'banner'); const t = String(u.searchParams.get('type') || 'banner');
const ad = await ads.serve(t); const ad = await ads.serve(t, { width: Number(u.searchParams.get('w')) || 0, height: Number(u.searchParams.get('h')) || 0 });
// login ads: the member clicks "Open Ad" (a real, counted click into a // login ads: the member clicks "Open Ad" (a real, counted click into a
// new tab) while the countdown runs on our interstitial page // new tab) while the countdown runs on our interstitial page
if (ad && t === 'login') ad.dwell = ads.rates().loginDwellSeconds || 10; if (ad && t === 'login') ad.dwell = ads.rates().loginDwellSeconds || 10;