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

Instantly headline, ad-product sections, animated level cycler

Browse Source 
Hero now reads Advertise and earn instantly. New Branded Voice sections:
ad-format showcase (3 live, 3 soon) and free-vs-package member benefits.
The earn-deeper diagram cycles levels 1-3, lighting the paying generation
with its percent; chips are clickable, auto-advance respects reduced
motion.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-09-04 13:35:43 -05:00
parent 8c8935fc15
commit 7bb1a78ca3
3 changed files with 144 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/home.js
+27
View File
@@ -67,6 +67,33 @@
IAP.$('ticker').hidden = false;
} catch (e) {}
}
// level cycler: chips + generation highlighting + auto-advance
const LVL = {
1: { pct: '50%', desc: 'Level 1 is open to every member: your direct referrals each pay you 50 percent of every package they ever buy, straight to your wallet.' },
2: { pct: '20%', desc: 'Bring 2 buyers of $20 or more and level 2 unlocks: 20 percent of every package your referrals’ referrals buy, on every purchase, forever.' },
3: { pct: '10%', desc: 'At 5 qualifying buyers, level 3 opens the third generation: 10 percent of everything they buy. Eight positions deep in this picture, and it keeps growing.' }
};
const viz = document.getElementById('genViz');
if (viz) {
const chips = [...document.querySelectorAll('.chips [data-lvl]')];
const setLvl = n => {
viz.dataset.lvl = n;
document.getElementById('vizPct').textContent = LVL[n].pct;
document.getElementById('lvlDesc').textContent = LVL[n].desc;
chips.forEach(ch => ch.classList.toggle('on', ch.dataset.lvl === String(n)));
};
let cur = 1;
let auto = null;
if (!matchMedia('(prefers-reduced-motion: reduce)').matches) {
auto = setInterval(() => { cur = cur % 3 + 1; setLvl(cur); }, 4200);
}
chips.forEach(ch => ch.addEventListener('click', () => {
if (auto) { clearInterval(auto); auto = null; } // a click takes the wheel
cur = Number(ch.dataset.lvl);
setLvl(cur);
}));
}
loadLadder();
loadStats();
loadTicker();
public/assets/site.css
+10
View File
@@ -123,6 +123,16 @@ h3{font-size:16.5px;margin:0 0 8px;font-weight:700}
.chip-t{border:1px solid var(--line-strong);border-radius:999px;padding:5px 16px;font-size:12.5px;color:var(--muted);font-family:var(--disp);font-weight:600}
.chip-t.on{background:var(--mint);color:var(--mint-ink);border-color:var(--mint)}
.iso{filter:drop-shadow(0 24px 50px rgba(0,0,0,.5))}
/* level cycler: light the paying generation */
#genViz .edge path{stroke:#22523f;transition:stroke .5s ease}
#genViz .node-o{fill:#122e25;stroke:#2f6b55;stroke-width:1.3;transition:stroke .5s ease,fill .5s ease}
#genViz .node-d{fill:#3f8f74;transition:fill .5s ease}
#genViz[data-lvl="1"] .e1 path,#genViz[data-lvl="2"] .e2 path,#genViz[data-lvl="3"] .e3 path{stroke:#43e8c3}
#genViz[data-lvl="1"] .g1 .node-o,#genViz[data-lvl="2"] .g2 .node-o,#genViz[data-lvl="3"] .g3 .node-o{stroke:#43e8c3;fill:#11362b}
#genViz[data-lvl="1"] .g1 .node-d,#genViz[data-lvl="2"] .g2 .node-d,#genViz[data-lvl="3"] .g3 .node-d{fill:#43e8c3}
.chips button{cursor:pointer;background:transparent;font:inherit}
.chips button.chip-t{border:1px solid var(--line-strong);color:var(--muted)}
.chips button.chip-t.on{background:var(--mint);color:var(--mint-ink);border-color:var(--mint)}
/* pricing tiles: mint discipline */
.tiles{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));align-items:stretch}
.tile{position:relative;background:linear-gradient(170deg,rgba(22,38,32,.55),rgba(10,18,15,.65));border:1px solid var(--line);