Your links: collapsed band per angle; Share button only where a share sheet exists

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-09-11 06:05:02 -05:00
parent f7c840dee4
commit f9b198a49b
3 changed files with 15 additions and 15 deletions
+9 -9
View File
@@ -113,19 +113,19 @@ window.IAPPromo = (function () {
for (const a of ANGLES) {
const url = angleLink(link, a.angle);
const hasVideo = VIDEOS.some(v => v.angle === a.angle);
const row = document.createElement('div');
row.className = 'angle-row';
row.innerHTML = '<div class="angle-txt"><div class="angle-head"><span class="angle-name">' + esc(a.name) + '</span><span class="angle-hook">' + esc(a.hook) + '</span>'
+ (hasVideo ? '<span class="angle-tag">video</span>' : '') + '</div>'
// one collapsed band per angle, like the banner kit: open the one you want
const row = document.createElement('details');
row.className = 'angle-row pb-acc';
row.innerHTML = '<summary><span><span class="angle-name">' + esc(a.name) + '</span> <span class="angle-hook">' + esc(a.hook) + '</span></span>'
+ (hasVideo ? '<span class="angle-tag">video</span>' : '') + '</summary>'
+ '<div class="angle-body"><div class="angle-txt">'
+ '<div class="muted small">' + esc(a.use) + '</div>'
+ '<a class="mono small angle-url" href="' + esc(url) + '" target="_blank" rel="noopener">' + esc(url) + '</a></div>'
+ '<div class="angle-btns"><a class="btn small sec" href="' + esc(url) + '" target="_blank" rel="noopener">Open</a><button class="btn small" type="button">Copy</button><button class="btn small sec" type="button">Share</button></div>';
+ '<div class="angle-btns"><a class="btn small sec" href="' + esc(url) + '" target="_blank" rel="noopener">Open</a><button class="btn small" type="button">Copy</button>'
+ (navigator.share ? '<button class="btn small sec" type="button">Share</button>' : '') + '</div></div>'; // Share = the phone's share sheet; desktops have none, so no button
const [copyBtn, shareBtn] = row.querySelectorAll('button');
copyBtn.onclick = async () => { try { await navigator.clipboard.writeText(url); status((a.name === 'General' ? 'Invite' : a.name) + ' link copied.', 'ok'); } catch (e) { status('Copy failed.', 'bad'); } };
shareBtn.onclick = async () => {
if (navigator.share) { try { await navigator.share({ title: 'InstantAdPay', text: a.hook, url }); return; } catch (e) { if (e && e.name === 'AbortError') return; } }
try { await navigator.clipboard.writeText(url); status('No share sheet here, so the link is copied.', 'ok'); } catch (e) { status('Copy failed.', 'bad'); }
};
if (shareBtn) shareBtn.onclick = async () => { try { await navigator.share({ title: 'InstantAdPay', text: a.hook, url }); } catch (e) { if (!(e && e.name === 'AbortError')) status('Could not open the share sheet.', 'bad'); } };
al.appendChild(row);
}
}
+4 -4
View File
@@ -627,12 +627,12 @@ img{max-width:100%}
/* ── promo tools (2026-09-09) ── */
.promo-strip{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 20px}
.angle-list{display:flex;flex-direction:column}
.angle-row{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--line)}
.angle-list{display:flex;flex-direction:column;gap:8px}
.angle-row.pb-acc>summary{padding:12px 14px;font-size:14.5px}
.angle-row .angle-body{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:0 14px 14px}
.angle-row .angle-txt{flex:1 1 320px;min-width:0}
.angle-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.angle-name{font-family:var(--disp);font-weight:700;font-size:15px}
.angle-hook{color:var(--mint);font-size:13px}
.angle-hook{color:var(--mint);font-size:13px;font-weight:500}
.angle-tag{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-strong);border-radius:999px;padding:1px 7px}
.angle-url{overflow-wrap:anywhere;margin-top:4px;display:block;color:var(--mint);text-decoration:none}
.angle-url:hover{text-decoration:underline}
+2 -2
View File
@@ -5,7 +5,7 @@
<title>Member area | InstantAdPay</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
<link rel="icon" type="image/png" href="/logo-icon.png">
<link rel="stylesheet" href="/assets/site.css?v=20260910j">
<link rel="stylesheet" href="/assets/site.css?v=20260911a">
</head>
<body class="bo-body">
@@ -881,7 +881,7 @@
</div>
<script src="/assets/common.js?v=20260910c"></script>
<script src="/assets/wallet.js?v=20260910a"></script>
<script src="/assets/promo.js?v=20260910b"></script>
<script src="/assets/promo.js?v=20260911a"></script>
<script src="/assets/my.js?v=20260910m"></script>
<script src="/assets/chat.js?v=20260907l"></script>
</body>