Add /training page with four self-hosted walkthrough videos

- Videos loudness-normalized to -16 LUFS (originals were ~-33 LUFS).
- Static file serving rewritten to stream with HTTP Range support so
  video seeking works; .mp4/.webm MIME types added.
- Training nav links on homepage and /start, plus a first-time callout
  on /start; training page views tracked per source in admin analytics.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

public/admin.html

@@ -2,7 +2,7 @@
 <section id="loginView" class="login-panel"><div class="brand" style="margin-bottom:22px"><div class="brand-mark">RM</div><span>Crypto Team Build<small>Sponsor Router Admin</small></span></div><h1>Team Admin</h1><p>Manage the current sponsor, qualification queue, and onboarding settings.</p><form id="loginForm"><div class="field"><label for="password">Admin password</label><input id="password" class="input" type="password" autocomplete="current-password" required></div><button class="btn btn-primary" style="width:100%">Sign in</button><div id="loginError" class="micro" style="color:var(--danger)"></div></form></section>
 <section id="adminView" class="admin hidden"><div class="admin-top"><div><div class="eyebrow">Sponsor router</div><h1>Crypto Team Build Admin</h1></div><div class="nav-actions"><a class="btn btn-secondary" href="/start" target="_blank">View Live Page ↗</a><button id="logoutBtn" class="btn btn-secondary">Log out</button></div></div>
 <div class="admin-grid"><div class="stack"><div class="table-card"><div style="display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px"><div><h2 style="margin:0">Sponsor Queue</h2><p style="color:var(--muted);margin:4px 0 0;font-size:13px">Mark a sponsor qualified to automatically activate the next waiting position.</p></div></div><div class="table-wrap"><table class="table"><thead><tr><th>Order</th><th>Sponsor</th><th>Parent</th><th>Directs</th><th>Level</th><th>Status</th><th>Clicks</th><th>Actions</th></tr></thead><tbody id="sponsorRows"></tbody></table></div></div>
-<div class="table-card"><div style="margin-bottom:12px"><h2 style="margin:0">Traffic &amp; Conversions</h2><p style="color:var(--muted);margin:4px 0 0;font-size:13px">First-touch source per visitor session (referring domain or utm_source). Funnel: bridge page → start page → join click.</p></div><div id="funnelStats" class="funnel"></div><div class="table-wrap"><table class="table"><thead><tr><th>Source</th><th>Bridge views</th><th>Start views</th><th>Join clicks</th><th>Start → Join</th></tr></thead><tbody id="trafficRows"></tbody></table></div></div></div>
+<div class="table-card"><div style="margin-bottom:12px"><h2 style="margin:0">Traffic &amp; Conversions</h2><p style="color:var(--muted);margin:4px 0 0;font-size:13px">First-touch source per visitor session (referring domain or utm_source). Funnel: bridge page → start page → join click.</p></div><div id="funnelStats" class="funnel"></div><div class="table-wrap"><table class="table"><thead><tr><th>Source</th><th>Bridge views</th><th>Start views</th><th>Training views</th><th>Join clicks</th><th>Start → Join</th></tr></thead><tbody id="trafficRows"></tbody></table></div></div></div>
 <div class="stack"><div class="table-card"><h2 style="margin-top:0">Add Sponsor</h2><form id="addSponsorForm"><div class="form-grid"><div class="field"><label>ID</label><input name="id" class="input" required></div><div class="field"><label>Name</label><input name="name" class="input" required></div><div class="field"><label>Parent ID</label><input name="parentId" class="input"></div><div class="field"><label>Level</label><select name="level" class="select"><option>Scintilla</option><option>Ascensus</option><option>Fabrica</option><option>Culmen</option><option>Apex</option><option>Fastigium</option><option>Vertex</option><option>Corona</option></select></div></div><div class="field"><label>Notes</label><input name="notes" class="input"></div><button class="btn btn-teal" style="width:100%">Add to Queue</button></form></div>
 <div class="table-card"><h2 style="margin-top:0">Public Page Settings</h2><form id="configForm"><div class="field"><label>Site name</label><input name="siteName" class="input"></div><div class="field"><label>Program name</label><input name="programName" class="input"></div><div class="field"><label>Bridge headline</label><input name="bridgeHeadline" class="input"></div><div class="field"><label>Bridge subheadline</label><textarea name="bridgeSubheadline" class="input" rows="3"></textarea></div><div class="field"><label>Premium entry (POL)</label><input name="premiumEntryPol" class="input" type="number"></div><div class="field"><label>RM dApp referral base URL</label><input name="dappReferralBaseUrl" class="input" placeholder="https://app.thermcircle.com?ref="></div><div class="field"><label>Telegram/support URL (optional)</label><input name="telegramUrl" class="input"></div><div class="field"><label>Support message</label><textarea name="supportLabel" class="input" rows="3"></textarea></div><label style="text-transform:none;letter-spacing:0;margin:10px 0"><input type="checkbox" name="showSponsorName"> Show sponsor name publicly</label><label style="text-transform:none;letter-spacing:0;margin:10px 0"><input type="checkbox" name="showQueueProgress"> Show number waiting in queue</label><button class="btn btn-primary" style="width:100%;margin-top:8px">Save Settings</button></form></div></div></div></section>
 <div id="toast" class="toast"></div><script src="/admin.js"></script></body></html>

public/admin.js

@@ -8,8 +8,8 @@ function statusClass(s){return `status status-${s}`}
 function pct(n,d){return d?`${Math.round((n/d)*100)}%`:'—'}
 function renderAnalytics(){
   const src=(state.analytics&&state.analytics.sources)||{};
-  const tot={bridge:0,start:0,click:0};
-  const list=Object.entries(src).map(([name,r])=>{tot.bridge+=r.bridge||0;tot.start+=r.start||0;tot.click+=r.click||0;return{name,bridge:r.bridge||0,start:r.start||0,click:r.click||0}})
+  const tot={bridge:0,start:0,click:0,training:0};
+  const list=Object.entries(src).map(([name,r])=>{tot.bridge+=r.bridge||0;tot.start+=r.start||0;tot.click+=r.click||0;tot.training+=r.training||0;return{name,bridge:r.bridge||0,start:r.start||0,click:r.click||0,training:r.training||0}})
     .sort((a,b)=>b.click-a.click||b.start-a.start||b.bridge-a.bridge);
   document.getElementById('funnelStats').innerHTML=
     `<div class="fact"><small>Bridge views</small><strong>${tot.bridge}</strong></div>`+
@@ -17,7 +17,7 @@ function renderAnalytics(){
     `<div class="fact"><small>Join clicks</small><strong>${tot.click}</strong></div>`+
     `<div class="fact"><small>Bridge → Start</small><strong>${pct(tot.start,tot.bridge)}</strong></div>`+
     `<div class="fact"><small>Start → Join</small><strong>${pct(tot.click,tot.start)}</strong></div>`;
-  document.getElementById('trafficRows').innerHTML=list.map(r=>`<tr><td><strong>${esc(r.name)}</strong></td><td>${r.bridge}</td><td>${r.start}</td><td>${r.click}</td><td>${pct(r.click,r.start)}</td></tr>`).join('')||'<tr><td colspan="5" class="empty">No traffic recorded yet.</td></tr>';
+  document.getElementById('trafficRows').innerHTML=list.map(r=>`<tr><td><strong>${esc(r.name)}</strong></td><td>${r.bridge}</td><td>${r.start}</td><td>${r.training}</td><td>${r.click}</td><td>${pct(r.click,r.start)}</td></tr>`).join('')||'<tr><td colspan="6" class="empty">No traffic recorded yet.</td></tr>';
 }
 function esc(s){return String(s??'').replace(/[&<>'"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;',"'":'&#39;','"':'&quot;'}[c]))}
 function render(){

public/index.html

@@ -3,7 +3,7 @@
 <meta property="og:type" content="website"><meta property="og:site_name" content="Crypto Team Build Network"><meta property="og:title" content="The RM Circle Premium Team Build | Crypto Team Build Network"><meta property="og:description" content="Get your 2. Help your 2 get their 2. A team-first strategy built around qualification, depth, and duplication — follow the team roadmap with the current sponsor."><meta property="og:url" content="https://rmcircle.saasy.top/"><meta property="og:image" content="https://rmcircle.saasy.top/og-card.jpg"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="og:image:alt" content="The RM Circle Premium Team Build roadmap card — Crypto Team Build Network">
 <meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="The RM Circle Premium Team Build | Crypto Team Build Network"><meta name="twitter:description" content="Get your 2. Help your 2 get their 2. Build depth. Build freedom."><meta name="twitter:image" content="https://rmcircle.saasy.top/og-card.jpg"><link rel="stylesheet" href="/styles.css"></head>
 <body>
-<header class="wrap nav"><div class="brand"><div class="brand-mark">RM</div><span><span id="brandName">Crypto Team Build</span><small id="brandProgram">RM Circle Premium</small></span></div><div class="nav-actions"><a class="btn btn-secondary hide-mobile" href="#strategy">How it works</a><a class="btn btn-primary" href="/start">Get Started</a></div></header>
+<header class="wrap nav"><div class="brand"><div class="brand-mark">RM</div><span><span id="brandName">Crypto Team Build</span><small id="brandProgram">RM Circle Premium</small></span></div><div class="nav-actions"><a class="btn btn-secondary hide-mobile" href="#strategy">How it works</a><a class="btn btn-secondary" href="/training">Training</a><a class="btn btn-primary" href="/start">Get Started</a></div></header>
 <main>
 <section class="hero wrap"><div class="eyebrow">Premium • Polygon • Team Duplication</div><h1 id="bridgeHeadline"><span class="gold">Get Your 2.</span><br>Help Your 2 Get Their 2.</h1><p id="bridgeSubheadline">A team-first strategy built around qualification, depth, and duplication.</p><div class="hero-actions"><a class="btn btn-primary" href="/start">Show Me the Current Team Placement →</a><a class="btn btn-secondary" href="#strategy">See the Strategy</a></div><div class="micro">Independent team training resource • Participation involves risk • No income is guaranteed</div>
 <figure class="roadmap-figure" style="margin-top:34px"><a href="/roadmap.webp" target="_blank" rel="noopener"><img src="/roadmap.webp" alt="RM Circle Premium Team Build Roadmap — core strategy, step-by-step guide, premium levels, and duplication formula" width="1149" height="1369"></a><figcaption>The RM Circle is a team build project of the <strong>Crypto Team Build Network</strong>. This roadmap is the plan every member follows — tap to view full size.</figcaption></figure></section>
@@ -12,5 +12,5 @@
 <section class="section"><div class="wrap"><div class="section-head"><div class="eyebrow">Moving-link workflow</div><h2>Links retire. Recruiting keeps moving.</h2></div><div class="flow"><div class="flow-step"><b>Step 1</b><strong>Use link</strong><p>Share the current position's referral link.</p></div><div class="flow-step"><b>Step 2</b><strong>Get 2</strong><p>Place exactly two direct positions.</p></div><div class="flow-step"><b>Step 3</b><strong>Retire link</strong><p>Stop creating extra shallow legs.</p></div><div class="flow-step"><b>Step 4</b><strong>Help your 2</strong><p>Shift the team effort to their links.</p></div><div class="flow-step"><b>Step 5</b><strong>Repeat</strong><p>Keep the qualification wave moving down.</p></div></div></div></section>
 <section class="section"><div class="wrap"><div class="section-head"><div class="eyebrow">Depth over width</div><h2>2 → 4 → 8 → 16 → 32</h2><p>The first major team milestone is 30 correctly placed positions across the first four generations: 2 + 4 + 8 + 16.</p></div><div class="matrix" aria-label="Matrix growth illustration"><div class="matrix-group"><div class="people"><span class="person"></span><span class="person"></span></div><b>2</b></div><div class="matrix-group"><div class="people"><span class="person"></span><span class="person"></span><span class="person"></span><span class="person"></span></div><b>4</b></div><div class="matrix-group"><div class="people" id="p8"></div><b>8</b></div><div class="matrix-group"><div class="people" id="p16"></div><b>16</b></div></div><div class="notice"><strong>Team principle:</strong> once your two are in place, do not keep adding more directs to the same qualified link. Help the next positions become qualified so the matrix develops depth instead of extra shallow legs.</div></div></section>
 <section class="section"><div class="wrap"><div class="card" style="text-align:center;padding:34px"><div class="eyebrow">Ready to start?</div><h2 style="font-size:38px;margin:10px 0">See the current team placement.</h2><p style="max-width:680px;margin:0 auto 20px;color:var(--muted)">The onboarding page automatically shows the sponsor position the team is currently helping. Always use the sponsor shown there instead of an old screenshot or saved link.</p><a class="btn btn-primary" href="/start">Open Getting Started Instructions →</a></div></div></section>
-</main><footer class="wrap disclaimer">This independent team page is educational and is not an earnings guarantee or investment advice. Cryptocurrency and smart-contract participation involve risk, including possible loss of funds. Never use funds you cannot afford to lose. Results depend on actual participation, qualification, upgrades, smart-contract behavior, and the market value of POL.<div class="footer-links"><a href="/start">Getting Started</a><a href="/admin">Team Admin</a></div></footer>
+</main><footer class="wrap disclaimer">This independent team page is educational and is not an earnings guarantee or investment advice. Cryptocurrency and smart-contract participation involve risk, including possible loss of funds. Never use funds you cannot afford to lose. Results depend on actual participation, qualification, upgrades, smart-contract behavior, and the market value of POL.<div class="footer-links"><a href="/training">Training</a><a href="/start">Getting Started</a><a href="/admin">Team Admin</a></div></footer>
 <script src="/track.js"></script><script src="/bridge.js"></script></body></html>

public/start.html

@@ -3,10 +3,10 @@
 <meta property="og:type" content="website"><meta property="og:site_name" content="Crypto Team Build Network"><meta property="og:title" content="Get Started — The RM Circle Premium Team Build"><meta property="og:description" content="See the current team sponsor placement and step-by-step onboarding for the RM Circle Premium team build."><meta property="og:url" content="https://rmcircle.saasy.top/start"><meta property="og:image" content="https://rmcircle.saasy.top/og-card.jpg"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="og:image:alt" content="The RM Circle Premium Team Build roadmap card — Crypto Team Build Network">
 <meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Get Started — The RM Circle Premium Team Build"><meta name="twitter:description" content="See the current team sponsor and onboarding steps."><meta name="twitter:image" content="https://rmcircle.saasy.top/og-card.jpg"><link rel="stylesheet" href="/styles.css"></head>
 <body>
-<header class="wrap nav"><div class="brand"><div class="brand-mark">RM</div><span><span id="brandName">Crypto Team Build</span><small>Getting Started</small></span></div><div class="nav-actions"><a class="btn btn-secondary" href="/">← Strategy</a></div></header>
+<header class="wrap nav"><div class="brand"><div class="brand-mark">RM</div><span><span id="brandName">Crypto Team Build</span><small>Getting Started</small></span></div><div class="nav-actions"><a class="btn btn-secondary" href="/">← Strategy</a><a class="btn btn-secondary" href="/training">Training</a></div></header>
 <main class="sponsor-shell"><div class="wrap"><div class="section-head"><div class="eyebrow">Current placement</div><h1 style="font-size:clamp(34px,5vw,54px);margin:8px 0 10px">Use the sponsor shown on <span class="gold">this page.</span></h1><p>Team placements rotate as positions become qualified. Do not use an old screenshot or saved referral link.</p></div>
 <div class="sponsor-grid"><aside class="sponsor-card"><span class="live-badge"><span class="dot"></span> Current team sponsor</span><div class="sponsor-id" id="sponsorId">—</div><div class="sponsor-name" id="sponsorName">Loading current placement…</div><div id="progressArea"><div style="display:flex;justify-content:space-between;color:var(--muted);font-size:13px"><span>Qualification progress</span><strong id="progressText">0 / 2</strong></div><div class="progress-line"><span id="progressBar" style="width:0%"></span></div></div><div class="facts"><div class="fact"><small>Program</small><strong>Premium</strong></div><div class="fact"><small>Entry</small><strong><span id="entryPol">362</span> POL</strong></div><div class="fact"><small>Network</small><strong>Polygon</strong></div><div class="fact"><small>Gas token</small><strong>POL</strong></div></div><a id="joinButton" class="btn btn-primary" style="width:100%" href="#">Join With Current Sponsor →</a><button id="copyButton" class="btn btn-secondary" style="width:100%;margin-top:9px">Copy Sponsor ID</button><p class="micro" id="queueText" style="text-align:center"></p></aside>
-<section><div class="instruction-list"><article class="instruction"><div class="num">1</div><div><h3>Install or open MetaMask</h3><p>Use the official MetaMask website or your device's official app store. Never install a wallet from a link sent by a stranger.</p><div style="margin-top:10px"><a class="btn btn-secondary btn-sm" href="https://metamask.io/" target="_blank" rel="noopener noreferrer">Official MetaMask Site ↗</a></div></div></article>
+<section><div class="callout" style="margin-bottom:16px"><strong>First time?</strong> <a href="/training" style="color:var(--teal)">Watch the four training videos</a> — how the build works, creating your MetaMask wallet, funding it, and buying your position.</div><div class="instruction-list"><article class="instruction"><div class="num">1</div><div><h3>Install or open MetaMask</h3><p>Use the official MetaMask website or your device's official app store. Never install a wallet from a link sent by a stranger.</p><div style="margin-top:10px"><a class="btn btn-secondary btn-sm" href="https://metamask.io/" target="_blank" rel="noopener noreferrer">Official MetaMask Site ↗</a></div></div></article>
 <article class="instruction"><div class="num">2</div><div><h3>Use Polygon Mainnet</h3><p>In MetaMask, select Polygon. Polygon Mainnet uses chain ID <strong>137</strong>, and POL is the native gas token.</p></div></article>
 <article class="instruction"><div class="num">3</div><div><h3>Fund your wallet with POL</h3><p>Premium entry is <strong><span id="entryPol2">362</span> POL</strong>. Keep a small additional POL balance available for network gas. POL's USD value changes with the market.</p></div></article>
 <article class="instruction"><div class="num">4</div><div><h3>Use the current team sponsor</h3><p>Confirm that the sponsor ID shown by the RM Circle dApp matches <strong>ID <span id="sponsorIdInline">—</span></strong> before completing the transaction.</p></div></article>

public/track.js

@@ -13,6 +13,6 @@
   }
   window.ctbGetSource=getSource;
   const path=location.pathname.replace(/\/$/,'')||'/';
-  const page=path==='/'?'bridge':(path==='/start'?'start':null);
+  const page=path==='/'?'bridge':(path==='/start'?'start':(path==='/training'?'training':null));
   if(page)fetch('/api/public/track',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({event:page,source:getSource()})}).catch(()=>{});
 })();

public/training.html

@@ -0,0 +1,24 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="Step-by-step training videos for the RM Circle Premium team build — wallet setup, funding, and buying your position."><title>Training | Crypto Team Build</title>
+<link rel="canonical" href="https://rmcircle.saasy.top/training">
+<meta property="og:type" content="website"><meta property="og:site_name" content="Crypto Team Build Network"><meta property="og:title" content="Training — The RM Circle Premium Team Build"><meta property="og:description" content="Watch the step-by-step training: how the team build works, creating your MetaMask wallet, funding it, and buying your Premium position."><meta property="og:url" content="https://rmcircle.saasy.top/training"><meta property="og:image" content="https://rmcircle.saasy.top/og-card.jpg"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630">
+<meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Training — The RM Circle Premium Team Build"><meta name="twitter:description" content="Wallet setup, funding, and buying your Premium position — step by step."><meta name="twitter:image" content="https://rmcircle.saasy.top/og-card.jpg">
+<link rel="stylesheet" href="/styles.css"></head>
+<body>
+<header class="wrap nav"><div class="brand"><div class="brand-mark">RM</div><span><span id="brandName">Crypto Team Build</span><small>Training</small></span></div><div class="nav-actions"><a class="btn btn-secondary hide-mobile" href="/">← Strategy</a><a class="btn btn-primary" href="/start">Get Started</a></div></header>
+<main>
+<section class="section"><div class="wrap"><div class="section-head"><div class="eyebrow">Team training</div><h1 style="font-size:clamp(34px,5vw,54px);margin:8px 0 10px">Watch. Learn. <span class="gold">Duplicate.</span></h1><p>Four short videos take you from zero to your Premium position — in order. Watch them all before you join, and share this page with your two directs when it's their turn.</p></div>
+
+<div class="video-card" style="max-width:880px;margin:0 auto 26px"><div style="padding:6px 6px 0"><div class="eyebrow">Video 1 · 14 min</div><h2 style="margin:6px 0 6px">How the team build works</h2><p style="color:var(--muted);margin:0 0 12px">The full picture: the 2-direct strategy, qualification, the moving link, and how depth pays the team.</p></div><video class="video-frame" style="display:block;width:100%;height:auto;aspect-ratio:16/9" controls preload="metadata" src="/training/how_the_team_build_works.mp4"></video></div>
+
+<div class="video-card" style="max-width:880px;margin:0 auto 26px"><div style="padding:6px 6px 0"><div class="eyebrow">Video 2 · 3 min</div><h2 style="margin:6px 0 6px">Create your MetaMask wallet</h2><p style="color:var(--muted);margin:0 0 12px">Install MetaMask safely and set up your wallet. Never share your Secret Recovery Phrase with anyone.</p></div><video class="video-frame" style="display:block;width:100%;height:auto;aspect-ratio:16/9" controls preload="metadata" src="/training/create_metamask_wallet.mp4"></video></div>
+
+<div class="video-card" style="max-width:880px;margin:0 auto 26px"><div style="padding:6px 6px 0"><div class="eyebrow">Video 3 · 3 min</div><h2 style="margin:6px 0 6px">Funding your wallet</h2><p style="color:var(--muted);margin:0 0 12px">Get POL onto Polygon Mainnet — enough for the 362 POL Premium entry plus a little extra for gas.</p></div><video class="video-frame" style="display:block;width:100%;height:auto;aspect-ratio:16/9" controls preload="metadata" src="/training/funding_your_wallet.mp4"></video></div>
+
+<div class="video-card" style="max-width:880px;margin:0 auto 26px"><div style="padding:6px 6px 0"><div class="eyebrow">Video 4 · 5 min</div><h2 style="margin:6px 0 6px">Buying the Premium position</h2><p style="color:var(--muted);margin:0 0 12px">Connect to the RM Circle dApp with the current team sponsor and complete your Premium entry.</p></div><video class="video-frame" style="display:block;width:100%;height:auto;aspect-ratio:16/9" controls preload="metadata" src="/training/buying_the_premium_position.mp4"></video></div>
+
+<div class="callout" style="max-width:880px;margin:0 auto"><strong>Ready?</strong> Head to the <a href="/start" style="color:var(--teal)">Getting Started page</a> to see the current team sponsor before you buy — placements rotate as positions qualify.</div>
+<div class="callout warning" style="max-width:880px;margin:14px auto 0"><strong>Risk reminder:</strong> participation involves cryptocurrency and smart-contract risk. No income is guaranteed. Use only funds you can afford to lose.</div>
+</div></section>
+</main>
+<footer class="wrap disclaimer">This is an independent Crypto Team Build training resource. Always confirm transaction details in your wallet before signing. Never disclose your Secret Recovery Phrase.<div class="footer-links"><a href="/">Strategy</a><a href="/start">Getting Started</a><a href="/admin">Team Admin</a></div></footer>
+<script src="/track.js"></script><script src="/training.js"></script></body></html>

public/training.js

@@ -0,0 +1,8 @@
+(async function(){
+  try{
+    const r=await fetch('/api/public/config');
+    if(!r.ok)return;
+    const c=await r.json();
+    if(c.siteName){document.title=`Training | ${c.siteName}`;const bn=document.getElementById('brandName');if(bn)bn.textContent=c.siteName}
+  }catch(e){}
+})();