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

Board: the referral explainer plays on the card

Browse Source 
A 46 second video on how the referral mission works, on the card itself rather
than on a page nobody opens. It plays in place the way the teaser does on the
home page.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-09-23 07:57:21 -05:00
parent 97dbd66a5c
commit 36ef50830c
3 changed files with 19 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app.html
+2 -2
View File
@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Your board · PolHunter</title> <title>Your board · PolHunter</title>
<meta name="robots" content="noindex"> <meta name="robots" content="noindex">
<link rel="stylesheet" href="/style.css?v=14"> <link rel="stylesheet" href="/style.css?v=15">
</head> </head>
<body> <body>
<div class="wrap"> <div class="wrap">
@@ -47,6 +47,6 @@
<footer class="foot">Rewards are for completed missions, not income. The daily pool is limited; when it is spent, claims close until midnight Central. Cryptocurrency involves risk of loss.</footer> <footer class="foot">Rewards are for completed missions, not income. The daily pool is limited; when it is spent, claims close until midnight Central. Cryptocurrency involves risk of loss.</footer>
</div> </div>
<div class="modal" id="shareModal" hidden><div class="modal-card"><button class="modal-x" id="shareClose" type="button" aria-label="Close">×</button><div id="shareBody"></div></div></div> <div class="modal" id="shareModal" hidden><div class="modal-card"><button class="modal-x" id="shareClose" type="button" aria-label="Close">×</button><div id="shareBody"></div></div></div>
<script src="/app.js?v=14"></script> <script src="/app.js?v=15"></script>
</body> </body>
</html> </html>
public/app.js
+15
View File
@@ -64,8 +64,22 @@
+ '<p style="margin-top:10px"><span class="range">' + today + ' brought today</span> ' + '<p style="margin-top:10px"><span class="range">' + today + ' brought today</span> '
+ '<span style="color:var(--dim);font-size:12px">· ' + total + ' all time · ' + rf.earnedPol + ' POL earned</span></p>' + '<span style="color:var(--dim);font-size:12px">· ' + total + ' all time · ' + rf.earnedPol + ' POL earned</span></p>'
+ (people ? '<div class="ref-list">' + people + '</div>' : '<p style="color:var(--dim);font-size:12px;margin-top:10px">Nobody yet. One message is all it takes.</p>') + (people ? '<div class="ref-list">' + people + '</div>' : '<p style="color:var(--dim);font-size:12px;margin-top:10px">Nobody yet. One message is all it takes.</p>')
+ '<div class="ref-watch"><button class="btn ghost sm" type="button" id="refPlay">▶ Watch: how it works (46s)</button></div>'
+ '</div>'; + '</div>';
} }
// the explainer plays in place, the way the teaser does on the home page
function wireRefVideo() {
const b = $('refPlay'); if (!b) return;
b.addEventListener('click', () => {
const host = b.parentElement;
const v = document.createElement('video');
v.controls = true; v.autoplay = true; v.playsInline = true; v.className = 'ref-video';
v.poster = 'https://coolify-saasytop.nyc3.digitaloceanspaces.com/training/polhunter-bring-a-hunter.jpg?v=20260923a';
v.src = 'https://coolify-saasytop.nyc3.digitaloceanspaces.com/training/polhunter-bring-a-hunter.mp4?v=20260923a';
host.innerHTML = ''; host.appendChild(v);
v.play().catch(() => {});
});
}
const IAP = 'https://instantadpay.com'; const IAP = 'https://instantadpay.com';
function until(ms) { const s = Math.max(0, Math.round((ms - Date.now()) / 60000)); const h = Math.floor(s / 60), m = s % 60; return h ? h + 'h ' + m + 'm' : m + 'm'; } function until(ms) { const s = Math.max(0, Math.round((ms - Date.now()) / 60000)); const h = Math.floor(s / 60), m = s % 60; return h ? h + 'h ' + m + 'm' : m + 'm'; }
// no wallet on the InstantAdPay account yet: the three steps, in place of the missions // no wallet on the InstantAdPay account yet: the three steps, in place of the missions
@@ -105,6 +119,7 @@
else $('missions').innerHTML = (pool.spent ? '<div class="notice" style="grid-column:1/-1"><b>Today\u2019s POL pool is spent.</b> No more claims today. Claims reopen at midnight Central' + (pool.resetsAt ? ', in ' + until(pool.resetsAt) : '') + '.</div>' : '') else $('missions').innerHTML = (pool.spent ? '<div class="notice" style="grid-column:1/-1"><b>Today\u2019s POL pool is spent.</b> No more claims today. Claims reopen at midnight Central' + (pool.resetsAt ? ', in ' + until(pool.resetsAt) : '') + '.</div>' : '')
+ (board.missions.length ? board.missions.map(card).join('') : '<div class="card"><p>No missions are open right now. Check back soon.</p></div>'); + (board.missions.length ? board.missions.map(card).join('') : '<div class="card"><p>No missions are open right now. Check back soon.</p></div>');
if ($('refSlot')) $('refSlot').innerHTML = board.me.wallet ? referralCard() : ''; if ($('refSlot')) $('refSlot').innerHTML = board.me.wallet ? referralCard() : '';
wireRefVideo();
const rc = $('refCopy'); const rc = $('refCopy');
if (rc) rc.addEventListener('click', async () => { if (rc) rc.addEventListener('click', async () => {
const v = $('refLink').value; const v = $('refLink').value;
public/style.css
+2
View File
@@ -134,3 +134,5 @@ textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--
#refSlot .ref-card p,#refSlot .ref-card .codebox{grid-column:1} #refSlot .ref-card p,#refSlot .ref-card .codebox{grid-column:1}
#refSlot .ref-card .ref-list,#refSlot .ref-card>p:last-child{grid-column:2;grid-row:2/span 5;align-self:stretch;margin-top:0;border-top:0;border-left:1px solid var(--edge);padding-left:22px} #refSlot .ref-card .ref-list,#refSlot .ref-card>p:last-child{grid-column:2;grid-row:2/span 5;align-self:stretch;margin-top:0;border-top:0;border-left:1px solid var(--edge);padding-left:22px}
} }
.ref-watch{margin-top:14px}
.ref-video{width:100%;max-width:560px;border-radius:14px;display:block;background:#000}