marty/rm-circle-team-router
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Angle links render a pure squeeze step: headline + hook video + one proceed button; click-through loads the full invite page

Browse Source
This commit is contained in:
martbost
2026-08-22 08:45:11 -05:00
parent 570a9bc4a4
commit 0839e58dd1
1 changed files with 26 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/join.js
+24 -33
View File
@@ -102,48 +102,39 @@
load();
})();
// Angle-matched landing: ?v=<hook> serves BOTH arrivals — link-clickers get the
// hook video right on the page under the matched headline; people who already
// watched it skip ahead. When the hook video ends, the page auto-advances to
// the overview + join steps. Nobody ever leaves the site.
// Angle-matched landing: ?v=<hook> renders a NON-DISTRACTING squeeze step —
// matched headline, the hook video, one proceed button. Nothing else. Clicking
// through loads the full invite page (same path, no query); attribution
// (angle:<hook>) is already stamped in sessionStorage by track.js.
(function(){
var ANGLES={
pocket:{h:'You already <span class="gold">found the money</span>.',w:'You saw where it goes. Here’s how the flip actually works.',
pocket:{h:'You already <span class="gold">found the money</span>.',
v:'/v/rmc-pocket-change-b403fb2f75.mp4',p:'/v/rmc-pocket-change-poster.jpg'},
phone:{h:'Time your phone started <span class="gold">paying YOU</span>.',w:'You saw who’s profiting. Here’s how the phone starts paying you back.',
phone:{h:'Time your phone started <span class="gold">paying YOU</span>.',
v:'/v/rmc-phone-32ac648844.mp4',p:'/v/rmc-phone-poster.jpg'},
two:{h:'You know two people.<br><span class="gold">That’s all this takes.</span>',w:'You’ve got your two in mind. Here’s exactly what this is.',
two:{h:'You know two people.<br><span class="gold">That’s all this takes.</span>',
v:'/v/rmc-two-people-4102f2d719.mp4',p:'/v/rmc-two-people-poster.jpg'},
graveyard:{h:'This one runs on <span class="gold">teamwork</span> — not your transmission.',w:'You’ve buried enough hustles. Here’s why this one’s built different.',
graveyard:{h:'This one runs on <span class="gold">teamwork</span> — not your transmission.',
v:'/v/rmc-graveyard-290fabee9d.mp4',p:'/v/rmc-graveyard-poster.jpg'}
};
var a=ANGLES[new URLSearchParams(location.search).get('v')];
if(!a)return;
var head=document.getElementById('angleHead');
if(head){
var inv=document.getElementById('invId');var idTxt=inv?inv.outerHTML:'';
head.innerHTML=a.h;
var sub=document.getElementById('invSub');
if(sub)sub.innerHTML='Personally invited by <span class="gold">Member '+idTxt+'</span> — this page is their real position, read live from the blockchain.';
}
// the overview section becomes step two, with a bridge headline
var wh=document.getElementById('angleWatchHead'); if(wh)wh.textContent=a.w;
var overviewSection=null, ov=document.getElementById('angleVideo');
if(ov)overviewSection=ov.closest('section');
// insert the hook video as its own section ABOVE the overview
if(overviewSection&&overviewSection.parentNode){
var main=document.querySelector('main');
if(!main)return;
// clear the stage: hide everything, including the nav's competing buttons
Array.prototype.forEach.call(main.children,function(el){el.style.display='none';});
var nav=document.querySelector('.nav-actions'); if(nav)nav.style.display='none';
var s=document.createElement('section');
s.className='section'; s.style.paddingBottom='0'; s.id='hookVideo';
s.innerHTML='<div class="wrap"><div class="section-head"><div class="eyebrow">Ninety seconds</div>'+
'<h2>Watch this first.</h2>'+
'<p>Already seen it? <a href="#afterHook" id="hookSkip" style="color:var(--teal)">Skip to how it works ↓</a></p></div>'+
'<div class="video-card" style="max-width:880px;margin:0 auto">'+
'<video id="hookPlayer" class="video-frame" style="display:block;width:100%;height:auto;aspect-ratio:16/9" controls preload="metadata" poster="'+a.p+'" src="'+a.v+'"></video></div></div>';
overviewSection.parentNode.insertBefore(s,overviewSection);
overviewSection.id='afterHook';
var hp=document.getElementById('hookPlayer');
if(hp)hp.addEventListener('ended',function(){
overviewSection.scrollIntoView({behavior:'smooth',block:'start'});
s.className='hero wrap';
s.innerHTML='<h1 style="margin-top:10px">'+a.h+'</h1>'+
'<div class="video-card" style="max-width:860px;margin:22px auto 0">'+
'<video id="hookPlayer" class="video-frame" style="display:block;width:100%;height:auto;aspect-ratio:16/9" controls preload="metadata" poster="'+a.p+'" src="'+a.v+'"></video></div>'+
'<div class="hero-actions" style="margin-top:26px"><a id="hookCta" class="btn btn-primary" style="font-size:19px;padding:16px 34px;font-weight:800" href="'+location.pathname+'">Show me how it works →</a></div>'+
'<div class="micro" style="margin-top:14px">Independent team training resource • Participation involves risk • No income is guaranteed</div>';
main.appendChild(s);
var hp=document.getElementById('hookPlayer'),cta=document.getElementById('hookCta');
if(hp&&cta)hp.addEventListener('ended',function(){
cta.style.boxShadow='0 0 0 4px rgba(243,190,67,.45)';
cta.scrollIntoView({behavior:'smooth',block:'center'});
});
}
})();