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(); load();
})(); })();
// Angle-matched landing: ?v=<hook> serves BOTH arrivals — link-clickers get the // Angle-matched landing: ?v=<hook> renders a NON-DISTRACTING squeeze step —
// hook video right on the page under the matched headline; people who already // matched headline, the hook video, one proceed button. Nothing else. Clicking
// watched it skip ahead. When the hook video ends, the page auto-advances to // through loads the full invite page (same path, no query); attribution
// the overview + join steps. Nobody ever leaves the site. // (angle:<hook>) is already stamped in sessionStorage by track.js.
(function(){ (function(){
var ANGLES={ 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'}, 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'}, 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'}, 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'} v:'/v/rmc-graveyard-290fabee9d.mp4',p:'/v/rmc-graveyard-poster.jpg'}
}; };
var a=ANGLES[new URLSearchParams(location.search).get('v')]; var a=ANGLES[new URLSearchParams(location.search).get('v')];
if(!a)return; if(!a)return;
var head=document.getElementById('angleHead'); var main=document.querySelector('main');
if(head){ if(!main)return;
var inv=document.getElementById('invId');var idTxt=inv?inv.outerHTML:''; // clear the stage: hide everything, including the nav's competing buttons
head.innerHTML=a.h; Array.prototype.forEach.call(main.children,function(el){el.style.display='none';});
var sub=document.getElementById('invSub'); var nav=document.querySelector('.nav-actions'); if(nav)nav.style.display='none';
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 s=document.createElement('section'); var s=document.createElement('section');
s.className='section'; s.style.paddingBottom='0'; s.id='hookVideo'; s.className='hero wrap';
s.innerHTML='<div class="wrap"><div class="section-head"><div class="eyebrow">Ninety seconds</div>'+ s.innerHTML='<h1 style="margin-top:10px">'+a.h+'</h1>'+
'<h2>Watch this first.</h2>'+ '<div class="video-card" style="max-width:860px;margin:22px auto 0">'+
'<p>Already seen it? <a href="#afterHook" id="hookSkip" style="color:var(--teal)">Skip to how it works ↓</a></p></div>'+ '<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="video-card" style="max-width:880px;margin:0 auto">'+ '<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>'+
'<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>'; '<div class="micro" style="margin-top:14px">Independent team training resource • Participation involves risk • No income is guaranteed</div>';
overviewSection.parentNode.insertBefore(s,overviewSection); main.appendChild(s);
overviewSection.id='afterHook'; var hp=document.getElementById('hookPlayer'),cta=document.getElementById('hookCta');
var hp=document.getElementById('hookPlayer'); if(hp&&cta)hp.addEventListener('ended',function(){
if(hp)hp.addEventListener('ended',function(){ cta.style.boxShadow='0 0 0 4px rgba(243,190,67,.45)';
overviewSection.scrollIntoView({behavior:'smooth',block:'start'}); cta.scrollIntoView({behavior:'smooth',block:'center'});
}); });
}
})(); })();