Marty Bostick
2323 lines
90 KiB
HTML
2323 lines
90 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Crypto Team Build Network — ClickBaitPays Training Hub</title>
|
||
<style>
|
||
:root {
|
||
--bg: #0f1117;
|
||
--card: #1a1d2e;
|
||
--card-hover: #212539;
|
||
--border: #2a2e45;
|
||
--accent: #6c5ce7;
|
||
--accent-glow: rgba(108,92,231,0.3);
|
||
--green: #00d68f;
|
||
--green-dim: rgba(0,214,143,0.12);
|
||
--red: #ff6b6b;
|
||
--yellow: #ffd93d;
|
||
--orange: #ff9f43;
|
||
--text: #e4e6f0;
|
||
--text-dim: #8a8fa8;
|
||
--text-muted: #5a5e7a;
|
||
--font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
--radius: 12px;
|
||
--radius-sm: 8px;
|
||
}
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html { scroll-behavior: smooth; }
|
||
body {
|
||
font-family: var(--font);
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════
|
||
HERO SECTION — Above the fold
|
||
══════════════════════════════════════════════════════════ */
|
||
.hero {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 40px 20px 60px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background:
|
||
radial-gradient(ellipse at 20% 50%, rgba(108,92,231,0.12) 0%, transparent 60%),
|
||
radial-gradient(ellipse at 80% 20%, rgba(0,214,143,0.06) 0%, transparent 50%),
|
||
var(--bg);
|
||
}
|
||
|
||
/* Decorative grid lines */
|
||
.hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image:
|
||
linear-gradient(rgba(108,92,231,0.04) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(108,92,231,0.04) 1px, transparent 1px);
|
||
background-size: 60px 60px;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.hero-content {
|
||
position: relative;
|
||
z-index: 1;
|
||
max-width: 800px;
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
/* Team badge */
|
||
.team-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
background: rgba(108,92,231,0.15);
|
||
border: 1px solid rgba(108,92,231,0.3);
|
||
border-radius: 100px;
|
||
padding: 8px 20px;
|
||
font-size: 0.82rem;
|
||
font-weight: 600;
|
||
color: #a78bfa;
|
||
letter-spacing: 0.3px;
|
||
margin-bottom: 24px;
|
||
}
|
||
.team-badge .dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: var(--green);
|
||
animation: pulse-dot 2s infinite;
|
||
}
|
||
@keyframes pulse-dot {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.4; }
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: clamp(2.2rem, 6vw, 3.5rem);
|
||
font-weight: 800;
|
||
line-height: 1.15;
|
||
margin-bottom: 16px;
|
||
color: #f1f5f9;
|
||
text-shadow: 0 2px 30px rgba(251,191,36,0.15);
|
||
}
|
||
.hero h1 .gradient-text {
|
||
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #f97316 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
text-shadow: none;
|
||
}
|
||
|
||
.hero-sub {
|
||
font-size: clamp(1rem, 2.2vw, 1.2rem);
|
||
color: var(--text-dim);
|
||
line-height: 1.6;
|
||
max-width: 620px;
|
||
margin: 0 auto 32px;
|
||
}
|
||
|
||
.hero-sub strong {
|
||
color: var(--text);
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* CTA buttons */
|
||
.hero-ctas {
|
||
display: flex;
|
||
gap: 14px;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 48px;
|
||
}
|
||
.hero-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 16px 36px;
|
||
border-radius: var(--radius);
|
||
font-size: 1.05rem;
|
||
font-weight: 700;
|
||
text-decoration: none;
|
||
transition: all .2s;
|
||
cursor: pointer;
|
||
border: none;
|
||
font-family: var(--font);
|
||
}
|
||
.hero-btn-primary {
|
||
background: linear-gradient(135deg,#f59e0b,#eab308);
|
||
color: #0f1117;
|
||
box-shadow: 0 0 30px rgba(245,158,11,0.35);
|
||
font-weight: 700;
|
||
}
|
||
.hero-btn-primary:hover {
|
||
background: linear-gradient(135deg,#fbbf24,#f59e0b);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 0 45px rgba(245,158,11,0.5);
|
||
}
|
||
.hero-btn-secondary {
|
||
background: var(--card);
|
||
color: var(--text);
|
||
border: 1px solid var(--border);
|
||
}
|
||
.hero-btn-secondary:hover {
|
||
background: var(--card-hover);
|
||
border-color: var(--accent);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* How it works — 4 steps */
|
||
.steps-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 14px;
|
||
max-width: 750px;
|
||
margin: 0 auto 40px;
|
||
}
|
||
/* Step cards — needs more visual weight */
|
||
.step-card {
|
||
background: var(--card);
|
||
border: 2px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 20px 14px;
|
||
text-align: center;
|
||
transition: border-color 0.2s, transform 0.2s;
|
||
}
|
||
.step-card:hover {
|
||
border-color: var(--accent);
|
||
transform: translateY(-2px);
|
||
}
|
||
.step-num {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
background: rgba(108,92,231,0.2);
|
||
color: var(--accent);
|
||
font-weight: 800;
|
||
font-size: 0.85rem;
|
||
margin-bottom: 10px;
|
||
}
|
||
.step-card h4 {
|
||
font-size: 0.82rem;
|
||
font-weight: 700;
|
||
margin-bottom: 4px;
|
||
}
|
||
.step-card p {
|
||
font-size: 0.72rem;
|
||
color: var(--text-muted);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* Team callout banner */
|
||
.team-callout {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 16px;
|
||
flex-wrap: wrap;
|
||
background: linear-gradient(135deg, rgba(108,92,231,0.12), rgba(0,214,143,0.06));
|
||
border: 1px solid rgba(108,92,231,0.25);
|
||
border-radius: var(--radius);
|
||
padding: 18px 24px;
|
||
margin: 0 auto 32px;
|
||
max-width: 620px;
|
||
text-align: center;
|
||
}
|
||
.team-callout .callout-icon {
|
||
font-size: 1.6rem;
|
||
}
|
||
.team-callout .callout-text {
|
||
font-size: 0.95rem;
|
||
line-height: 1.5;
|
||
}
|
||
.team-callout .callout-text strong {
|
||
color: #fff;
|
||
}
|
||
.team-callout a {
|
||
color: var(--accent);
|
||
font-weight: 700;
|
||
text-decoration: none;
|
||
white-space: nowrap;
|
||
border-bottom: 2px solid var(--accent);
|
||
transition: opacity 0.2s;
|
||
}
|
||
.team-callout a:hover {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* Quick stat pills */
|
||
.stat-pills {
|
||
display: flex;
|
||
gap: 12px;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 20px;
|
||
}
|
||
.stat-pill {
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 100px;
|
||
padding: 10px 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-size: 0.85rem;
|
||
}
|
||
.stat-pill .stat-val {
|
||
font-weight: 700;
|
||
color: var(--green);
|
||
font-size: 1rem;
|
||
}
|
||
.stat-pill .stat-val.accent {
|
||
color: var(--accent);
|
||
}
|
||
.stat-pill .stat-label {
|
||
color: var(--text-dim);
|
||
font-size: 0.78rem;
|
||
}
|
||
|
||
/* Hero footer link row */
|
||
.hero-links {
|
||
display: flex;
|
||
gap: 20px;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
font-size: 0.82rem;
|
||
}
|
||
.hero-links a {
|
||
color: var(--text-muted);
|
||
text-decoration: none;
|
||
transition: color 0.2s;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
.hero-links a:hover {
|
||
color: var(--accent);
|
||
}
|
||
.hero-links .sep {
|
||
color: var(--border);
|
||
}
|
||
|
||
/* Scroll hint */
|
||
.scroll-hint {
|
||
margin-top: 40px;
|
||
color: var(--text-muted);
|
||
font-size: 0.78rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 6px;
|
||
cursor: pointer;
|
||
transition: color 0.2s;
|
||
border: none;
|
||
background: none;
|
||
font-family: var(--font);
|
||
}
|
||
.scroll-hint:hover {
|
||
color: var(--text-dim);
|
||
}
|
||
.scroll-hint .arrow {
|
||
font-size: 1.2rem;
|
||
animation: bounce 2s infinite;
|
||
}
|
||
@keyframes bounce {
|
||
0%, 100% { transform: translateY(0); }
|
||
50% { transform: translateY(6px); }
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════
|
||
CALCULATOR SECTION — Collapsible
|
||
══════════════════════════════════════════════════════════ */
|
||
.calculator-section {
|
||
display: none;
|
||
padding: 16px;
|
||
}
|
||
.calculator-section.expanded {
|
||
display: block;
|
||
}
|
||
|
||
.section-divider {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
max-width: 1200px;
|
||
margin: 0 auto 20px;
|
||
padding: 0 4px;
|
||
}
|
||
.section-divider .line {
|
||
flex: 1;
|
||
height: 1px;
|
||
background: linear-gradient(90deg, transparent, var(--border), transparent);
|
||
}
|
||
.section-divider .label {
|
||
font-size: 0.72rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
color: var(--text-muted);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.calc-container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════
|
||
LEGACY STYLES (from original calculator, preserved)
|
||
══════════════════════════════════════════════════════════ */
|
||
.header {
|
||
text-align: center;
|
||
padding: 30px 16px 24px;
|
||
}
|
||
.header h1 {
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
background: linear-gradient(135deg, var(--accent), #a78bfa);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
.header p {
|
||
color: var(--text-dim);
|
||
margin-top: 6px;
|
||
font-size: 0.9rem;
|
||
}
|
||
.cta-bar {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
margin-top: 16px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.cta-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 12px 28px;
|
||
border-radius: var(--radius);
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
transition: all .2s;
|
||
cursor: pointer;
|
||
border: none;
|
||
font-family: var(--font);
|
||
}
|
||
.cta-btn-primary {
|
||
background: linear-gradient(135deg,#f59e0b,#eab308);
|
||
color: #0f1117;
|
||
box-shadow: 0 0 20px rgba(245,158,11,0.3);
|
||
font-weight: 700;
|
||
}
|
||
.cta-btn-primary:hover {
|
||
background: linear-gradient(135deg,#fbbf24,#f59e0b);
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 0 30px rgba(245,158,11,0.45);
|
||
}
|
||
.cta-btn-secondary {
|
||
background: var(--card);
|
||
color: var(--text);
|
||
border: 1px solid var(--border);
|
||
}
|
||
.cta-btn-secondary:hover {
|
||
background: var(--card-hover);
|
||
border-color: var(--accent);
|
||
}
|
||
.controls {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 12px;
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.control-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
}
|
||
.control-group label {
|
||
font-size: 0.72rem;
|
||
font-weight: 600;
|
||
color: var(--text-dim);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
.control-group .fixed-value {
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
color: var(--green);
|
||
padding: 8px 0;
|
||
}
|
||
.control-group .fixed-value .note {
|
||
font-size: 0.7rem;
|
||
font-weight: 400;
|
||
color: var(--text-muted);
|
||
}
|
||
.control-group input, .control-group select {
|
||
background: var(--bg);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-sm);
|
||
padding: 9px 12px;
|
||
color: var(--text);
|
||
font-size: 0.9rem;
|
||
font-family: var(--font);
|
||
outline: none;
|
||
transition: border-color 0.2s;
|
||
}
|
||
.control-group input:focus, .control-group select:focus {
|
||
border-color: var(--accent);
|
||
box-shadow: 0 0 0 3px var(--accent-glow);
|
||
}
|
||
.control-group input[type="number"] { -moz-appearance: textfield; }
|
||
.control-group input::-webkit-inner-spin-button, .control-group input::-webkit-outer-spin-button { -webkit-appearance: none; }
|
||
|
||
/* Hero quick links */
|
||
.hero-quick-links {
|
||
text-align: center;
|
||
margin-top: 6px;
|
||
margin-bottom: 22px;
|
||
}
|
||
.hero-login-link {
|
||
display: inline-block;
|
||
font-size: 0.82rem;
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
padding: 6px 18px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 20px;
|
||
transition: all 0.2s;
|
||
}
|
||
.hero-login-link:hover {
|
||
border-color: var(--accent);
|
||
color: var(--accent);
|
||
background: rgba(108,92,231,0.08);
|
||
}
|
||
|
||
.checkbox-group {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 0;
|
||
}
|
||
.checkbox-group label {
|
||
font-size: 0.82rem;
|
||
font-weight: 400;
|
||
text-transform: none;
|
||
letter-spacing: 0;
|
||
color: var(--text);
|
||
white-space: normal;
|
||
}
|
||
.checkbox-group input[type="checkbox"] {
|
||
width: 16px;
|
||
height: 16px;
|
||
accent-color: var(--accent);
|
||
}
|
||
.checkbox-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 12px 24px;
|
||
background: var(--bg);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-sm);
|
||
padding: 10px 14px;
|
||
margin-bottom: 0;
|
||
grid-column: 1 / -1;
|
||
}
|
||
.tg-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 6px 14px;
|
||
border-radius: var(--radius-sm);
|
||
background: linear-gradient(135deg, #1e96c8, #37aee2);
|
||
color: #fff;
|
||
text-decoration: none;
|
||
font-size: 0.82rem;
|
||
font-weight: 600;
|
||
transition: opacity 0.2s;
|
||
white-space: nowrap;
|
||
}
|
||
.tg-link:hover { opacity: 0.85; }
|
||
.tabs {
|
||
display: flex;
|
||
gap: 4px;
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 4px;
|
||
margin-bottom: 18px;
|
||
overflow-x: auto;
|
||
}
|
||
.tab-btn {
|
||
flex: 1;
|
||
padding: 9px 14px;
|
||
border: none;
|
||
border-radius: 8px;
|
||
background: transparent;
|
||
color: var(--text-dim);
|
||
font-size: 0.82rem;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
white-space: nowrap;
|
||
font-family: var(--font);
|
||
}
|
||
.tab-btn:hover { color: var(--text); background: var(--card-hover); }
|
||
.tab-btn.active { background: var(--accent); color: white; }
|
||
.results { display: none; }
|
||
.results.active { display: block; }
|
||
.summary-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||
gap: 10px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.summary-card {
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 16px;
|
||
text-align: center;
|
||
}
|
||
.summary-card .label {
|
||
font-size: 0.68rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
color: var(--text-dim);
|
||
font-weight: 600;
|
||
}
|
||
.summary-card .value {
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
margin-top: 5px;
|
||
}
|
||
.summary-card .value.green { color: var(--green); }
|
||
.summary-card .value.accent { color: var(--accent); }
|
||
.summary-card .value.yellow { color: var(--yellow); }
|
||
.summary-card .value.orange { color: var(--orange); }
|
||
.summary-card .sub {
|
||
font-size: 0.75rem;
|
||
color: var(--text-muted);
|
||
margin-top: 3px;
|
||
}
|
||
.chart-wrap {
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 20px;
|
||
margin-bottom: 20px;
|
||
overflow: hidden;
|
||
}
|
||
.chart-wrap h3 {
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
color: var(--text-dim);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
margin-bottom: 16px;
|
||
}
|
||
#chartContainer, #chartContainer2, #chartContainer3 {
|
||
width: 100%;
|
||
height: 320px;
|
||
position: relative;
|
||
}
|
||
#profitChart, #timelineChart, #compareChart {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.table-wrap {
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
overflow: hidden;
|
||
margin-bottom: 18px;
|
||
}
|
||
.table-wrap .table-title {
|
||
padding: 14px 18px 0;
|
||
font-size: 0.82rem;
|
||
font-weight: 600;
|
||
color: var(--text-dim);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 0.84rem;
|
||
}
|
||
thead th {
|
||
text-align: left;
|
||
padding: 12px 18px;
|
||
font-size: 0.7rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
color: var(--text-dim);
|
||
font-weight: 600;
|
||
border-bottom: 1px solid var(--border);
|
||
background: rgba(255,255,255,0.02);
|
||
}
|
||
tbody td {
|
||
padding: 10px 18px;
|
||
border-bottom: 1px solid rgba(42,46,69,0.5);
|
||
}
|
||
tbody tr:last-child td { border-bottom: none; }
|
||
tbody tr:hover { background: var(--card-hover); }
|
||
tbody tr.highlight td { background: var(--green-dim); font-weight: 600; }
|
||
tbody tr.endgame td { background: rgba(108,92,231,0.12); font-weight: 600; }
|
||
.num { text-align: right; font-variant-numeric: tabular-nums; }
|
||
.green-text { color: var(--green); }
|
||
.accent-text { color: var(--accent); }
|
||
.legend {
|
||
display: flex;
|
||
gap: 16px;
|
||
padding: 0 18px 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.legend-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 0.75rem;
|
||
color: var(--text-dim);
|
||
}
|
||
.legend-dot {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 3px;
|
||
flex-shrink: 0;
|
||
}
|
||
.legend-dot.green { background: var(--green); }
|
||
.legend-dot.accent { background: var(--accent); }
|
||
.legend-dot.yellow { background: var(--yellow); }
|
||
.legend-dot.orange { background: var(--orange); }
|
||
.scenario-row { cursor: pointer; transition: background 0.15s; }
|
||
.scenario-row:hover { background: var(--card-hover) !important; }
|
||
.scenario-row.active-row { background: rgba(108,92,231,0.15) !important; }
|
||
.shared-link-row {
|
||
display: flex;
|
||
gap: 4px;
|
||
}
|
||
.shared-link-row input {
|
||
flex: 1;
|
||
min-width: 0;
|
||
font-size: 0.78rem;
|
||
font-family: monospace;
|
||
color: var(--accent);
|
||
background: var(--bg);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-sm);
|
||
padding: 7px 10px;
|
||
outline: none;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.copy-sm-btn {
|
||
background: var(--accent);
|
||
color: #fff;
|
||
border: none;
|
||
padding: 7px 14px;
|
||
border-radius: var(--radius-sm);
|
||
cursor: pointer;
|
||
font-size: 0.78rem;
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
transition: opacity 0.2s;
|
||
}
|
||
.copy-sm-btn:hover { opacity: 0.85; }
|
||
.copy-sm-btn.copied { background: var(--green); }
|
||
.sub-hint {
|
||
font-size: 0.68rem;
|
||
color: var(--text-muted);
|
||
margin-top: 4px;
|
||
}
|
||
.plan-section {
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
margin: 16px 0 20px;
|
||
overflow: hidden;
|
||
}
|
||
.plan-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 12px 16px;
|
||
background: var(--card-hover);
|
||
border-bottom: 1px solid var(--border);
|
||
font-weight: 600;
|
||
font-size: 0.85rem;
|
||
}
|
||
.copy-btn {
|
||
background: var(--accent);
|
||
color: #fff;
|
||
border: none;
|
||
padding: 5px 14px;
|
||
border-radius: var(--radius-sm);
|
||
cursor: pointer;
|
||
font-size: 0.78rem;
|
||
font-weight: 600;
|
||
transition: opacity 0.2s;
|
||
}
|
||
.copy-btn:hover { opacity: 0.85; }
|
||
.copy-btn.copied { background: var(--green); }
|
||
.plan-output {
|
||
padding: 16px;
|
||
margin: 0;
|
||
font-size: 0.82rem;
|
||
line-height: 1.6;
|
||
color: var(--text);
|
||
white-space: pre-wrap;
|
||
font-family: var(--font);
|
||
max-height: 500px;
|
||
overflow-y: auto;
|
||
}
|
||
.calc-footer {
|
||
text-align: center;
|
||
padding: 24px 0 10px;
|
||
color: var(--text-muted);
|
||
font-size: 0.75rem;
|
||
}
|
||
.calc-footer a {
|
||
color: var(--accent);
|
||
text-decoration: none;
|
||
}
|
||
.calc-footer a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════
|
||
ROI DASHBOARD
|
||
ROI DASHBOARD
|
||
══════════════════════════════════════════════════════════ */
|
||
.roi-dashboard {
|
||
max-width: 720px;
|
||
margin: 0 auto;
|
||
padding: 10px 0;
|
||
}
|
||
.roi-dashboard h3 {
|
||
color: var(--accent);
|
||
font-size: 1.2rem;
|
||
margin: 0 0 4px;
|
||
}
|
||
.roi-subtitle {
|
||
font-size: 0.85rem;
|
||
color: var(--text-secondary);
|
||
margin: 0 0 20px;
|
||
}
|
||
.roi-inputs {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 12px;
|
||
margin-bottom: 20px;
|
||
}
|
||
@media (max-width: 560px) {
|
||
.roi-inputs { grid-template-columns: 1fr; }
|
||
}
|
||
.roi-field label {
|
||
display: block;
|
||
font-size: 0.78rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 5px;
|
||
}
|
||
.roi-field input,
|
||
.roi-field select {
|
||
width: 100%;
|
||
padding: 10px 12px;
|
||
border-radius: var(--radius-sm);
|
||
border: 1px solid var(--border);
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
font-size: 0.95rem;
|
||
font-family: inherit;
|
||
box-sizing: border-box;
|
||
}
|
||
.roi-field select {
|
||
cursor: pointer;
|
||
}
|
||
.roi-field input:focus,
|
||
.roi-field select:focus {
|
||
outline: none;
|
||
border-color: var(--accent);
|
||
box-shadow: 0 0 0 2px rgba(108,92,231,0.2);
|
||
}
|
||
|
||
.roi-stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 12px;
|
||
margin-bottom: 24px;
|
||
}
|
||
@media (max-width: 600px) {
|
||
.roi-stats { grid-template-columns: repeat(2, 1fr); }
|
||
}
|
||
.roi-stat-card {
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-sm);
|
||
padding: 14px 12px;
|
||
text-align: center;
|
||
}
|
||
.roi-stat-label {
|
||
font-size: 0.72rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.07em;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 6px;
|
||
}
|
||
.roi-stat-value {
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
color: var(--accent);
|
||
}
|
||
.roi-stat-bar {
|
||
height: 5px;
|
||
background: var(--border);
|
||
border-radius: 3px;
|
||
margin-top: 10px;
|
||
overflow: hidden;
|
||
}
|
||
.roi-bar-fill {
|
||
height: 100%;
|
||
width: 0%;
|
||
background: linear-gradient(90deg, #6c5ce7, #a78bfa);
|
||
border-radius: 3px;
|
||
transition: width 0.4s ease;
|
||
}
|
||
|
||
.roi-phase-tracker {
|
||
margin-bottom: 24px;
|
||
}
|
||
.roi-phase-title {
|
||
font-size: 0.92rem;
|
||
font-weight: 600;
|
||
color: var(--text);
|
||
margin-bottom: 12px;
|
||
}
|
||
.roi-ladder {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
}
|
||
.roi-ladder-step {
|
||
padding: 6px 14px;
|
||
border-radius: 20px;
|
||
font-size: 0.82rem;
|
||
font-weight: 600;
|
||
background: var(--bg);
|
||
border: 1px solid var(--border);
|
||
color: var(--text-muted);
|
||
opacity: 0.5;
|
||
}
|
||
.roi-location-badge {
|
||
background: linear-gradient(135deg,rgba(99,102,241,0.15),rgba(139,92,246,0.15));
|
||
border: 1px solid rgba(99,102,241,0.3);
|
||
border-radius: 8px;
|
||
padding: 8px 14px;
|
||
margin-bottom: 12px;
|
||
font-size: 0.9rem;
|
||
color: #e2e8f0;
|
||
display: inline-block;
|
||
}
|
||
.roi-location-badge span {
|
||
color: #818cf8;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
.roi-ladder-step.active {
|
||
background: rgba(108,92,231,0.2);
|
||
border-color: var(--accent);
|
||
color: var(--accent);
|
||
opacity: 1;
|
||
}
|
||
.roi-ladder-step.endgame {
|
||
border-color: #fbbf24;
|
||
color: #fbbf24;
|
||
opacity: 0.6;
|
||
}
|
||
.roi-ladder-step.endgame.active {
|
||
background: rgba(251,191,36,0.15);
|
||
border-color: #fbbf24;
|
||
color: #fbbf24;
|
||
opacity: 1;
|
||
}
|
||
.roi-ladder-step.passed {
|
||
opacity: 0.7;
|
||
color: #34d399;
|
||
border-color: #34d399;
|
||
}
|
||
|
||
.roi-milestones {
|
||
margin-bottom: 20px;
|
||
}
|
||
.roi-milestone-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
.roi-milestone-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 10px 14px;
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-sm);
|
||
font-size: 0.88rem;
|
||
}
|
||
.roi-milestone-icon {
|
||
font-size: 1.3rem;
|
||
flex-shrink: 0;
|
||
}
|
||
.roi-milestone-info {
|
||
flex: 1;
|
||
}
|
||
.roi-milestone-info .label {
|
||
font-weight: 600;
|
||
color: var(--text);
|
||
}
|
||
.roi-milestone-info .sub {
|
||
font-size: 0.8rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
.roi-milestone-checked .milestone-check {
|
||
color: #34d399;
|
||
}
|
||
.roi-milestone-check {
|
||
font-size: 1.1rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════
|
||
RESPONSIVE
|
||
══════════════════════════════════════════════════════════ */
|
||
@media (max-width: 768px) {
|
||
.hero {
|
||
padding: 30px 16px 50px;
|
||
min-height: calc(100vh - 20px);
|
||
}
|
||
.hero h1 {
|
||
font-size: 1.9rem;
|
||
}
|
||
.hero-ctas {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.hero-btn {
|
||
width: 100%;
|
||
max-width: 340px;
|
||
justify-content: center;
|
||
padding: 14px 24px;
|
||
}
|
||
.steps-row {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 10px;
|
||
}
|
||
.stat-pills {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.stat-pill {
|
||
width: 100%;
|
||
max-width: 300px;
|
||
justify-content: center;
|
||
}
|
||
.header h1 { font-size: 1.4rem; }
|
||
.controls { grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; }
|
||
.checkbox-row { gap: 8px; padding: 8px 10px; }
|
||
.summary-grid { grid-template-columns: repeat(2, 1fr); }
|
||
.summary-card .value { font-size: 1.15rem; }
|
||
.tab-btn { font-size: 0.75rem; padding: 7px 10px; }
|
||
table { font-size: 0.74rem; }
|
||
thead th, tbody td { padding: 8px 10px; }
|
||
#chartContainer, #chartContainer2, #chartContainer3 { height: 240px; }
|
||
.hero-links { flex-direction: column; align-items: center; gap: 10px; }
|
||
.hero-links .sep { display: none; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ══════════════════════════════════════════════════════════
|
||
HERO SECTION — Above the fold
|
||
══════════════════════════════════════════════════════════ -->
|
||
<section class="hero" id="heroSection">
|
||
<div class="hero-content">
|
||
|
||
<!-- Team badge -->
|
||
<div class="team-badge">
|
||
<span class="dot"></span>
|
||
Crypto Team Build Network — Exclusive
|
||
</div>
|
||
|
||
<!-- Headline -->
|
||
<h1><span class="gradient-text">Turn Clicks Into<br>a Passive Income Machine</span></h1>
|
||
|
||
<p class="hero-sub">
|
||
ClickBaitPays is an ad platform where you run small campaigns,
|
||
click a <strong>few ads a day</strong>, and earn more than you spend.
|
||
No hype — just a system that works if you <strong>work the system.</strong>
|
||
</p>
|
||
|
||
<!-- CTAs -->
|
||
<div class="hero-ctas">
|
||
<a class="hero-btn hero-btn-primary" id="heroSignupBtn" target="_blank" rel="noopener">
|
||
🚀 Join the Team
|
||
</a>
|
||
<button class="hero-btn hero-btn-secondary" id="heroCalcBtn">
|
||
📊 Explore the Calculator
|
||
</button>
|
||
</div>
|
||
<div class="hero-quick-links">
|
||
<a href="https://clickbaitpays.me/login.php" target="_blank" rel="noopener" class="hero-login-link">🔐 Log into ClickBaitPays</a>
|
||
</div>
|
||
|
||
<!-- 4-Step How It Works -->
|
||
<div class="steps-row">
|
||
<div class="step-card">
|
||
<div class="step-num">1</div>
|
||
<h4>Sign Up</h4>
|
||
<p>Create your free ClickBaitPays account under our team</p>
|
||
</div>
|
||
<div class="step-card">
|
||
<div class="step-num">2</div>
|
||
<h4>Deposit</h4>
|
||
<p>Add funds to purchase ad campaigns — starting as low as $14</p>
|
||
</div>
|
||
<div class="step-card">
|
||
<div class="step-num">3</div>
|
||
<h4>Click Ads</h4>
|
||
<p>View 3–20 ads per day (takes ~5 minutes)</p>
|
||
</div>
|
||
<div class="step-card">
|
||
<div class="step-num">4</div>
|
||
<h4>Get Paid</h4>
|
||
<p>Every ~19 days you earn more than the campaign cost — reinvest and scale</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Team Telegram callout -->
|
||
<div class="team-callout">
|
||
<span class="callout-icon">🏆</span>
|
||
<span class="callout-text">
|
||
Want to learn more about our winning team?
|
||
<strong>Join the conversation</strong> →
|
||
<a href="https://t.me/cryptoteambuild" target="_blank" rel="noopener">@cryptoteambuild</a>
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Quick Stat Pills -->
|
||
<div class="stat-pills">
|
||
<div class="stat-pill">
|
||
<span class="stat-val">$14</span>
|
||
<span class="stat-label">min start cost</span>
|
||
</div>
|
||
<div class="stat-pill">
|
||
<span class="stat-val">~19 days</span>
|
||
<span class="stat-label">per cycle</span>
|
||
</div>
|
||
<div class="stat-pill">
|
||
<span class="stat-val">$756</span>
|
||
<span class="stat-label">net / 19d with 1× L7</span>
|
||
</div>
|
||
<div class="stat-pill">
|
||
<span class="stat-val accent">$2,268</span>
|
||
<span class="stat-label">net / 19d with 3× L7</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer links -->
|
||
<div class="hero-links">
|
||
<a href="https://clickbaitpays.me/docs/getting_started_guide.pdf" target="_blank" rel="noopener">
|
||
📄 Getting Started Guide (PDF)
|
||
</a>
|
||
<span class="sep">•</span>
|
||
<a href="https://t.me/+mzXTku1wR7pkODBh" target="_blank" rel="noopener">
|
||
💬 Team Telegram
|
||
</a>
|
||
<span class="sep">•</span>
|
||
<a href="https://clickbaitpays.me/login.php" target="_blank" rel="noopener">
|
||
🔐 Log into ClickBaitPays
|
||
</a>
|
||
<span class="sep">•</span>
|
||
<span style="color:var(--text-muted);font-size:0.78rem;">
|
||
⚠️ You're buying ad campaigns, not investments — earnings come from viewing ads
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Scroll hint -->
|
||
<button class="scroll-hint" id="scrollHint" onclick="scrollToCalculator()">
|
||
<span class="arrow">↓</span>
|
||
<span>Full calculator & breakdown below</span>
|
||
</button>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════════════════════
|
||
CALCULATOR SECTION — Collapsible
|
||
══════════════════════════════════════════════════════════ -->
|
||
<div class="calculator-section" id="calculatorSection">
|
||
|
||
<div class="section-divider">
|
||
<span class="line"></span>
|
||
<span class="label">📊 Calculator & Training Tools</span>
|
||
<span class="line"></span>
|
||
</div>
|
||
|
||
<div class="calc-container">
|
||
<div class="header">
|
||
<h1>CBP What-If Calculator</h1>
|
||
<p>Full ladder modeling — profit timeline, referral earnings, and scenario comparison</p>
|
||
<div class="cta-bar" id="calcCtaBar">
|
||
<a class="cta-btn cta-btn-primary" id="calcSignupBtn" target="_blank" rel="noopener">
|
||
🚀 Sign Up with My Referral Link
|
||
</a>
|
||
<button class="cta-btn cta-btn-secondary" onclick="copyCalculatorLink()">
|
||
📄 Copy Calculator Link
|
||
</button>
|
||
<button class="cta-btn cta-btn-secondary" onclick="scrollToHero()">
|
||
🔝 Back to Overview
|
||
</button>
|
||
<a class="cta-btn cta-btn-secondary" href="https://clickbaitpays.me/login.php" target="_blank" rel="noopener" style="text-decoration:none;">
|
||
🔐 Log into ClickBaitPays
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="controls">
|
||
<div class="control-group">
|
||
<label>Number of people</label>
|
||
<input type="number" id="numPeople" value="1" min="1" max="100">
|
||
</div>
|
||
<div class="control-group">
|
||
<label>Your referral commission</label>
|
||
<div class="fixed-value">10% <span class="note">(fixed, not variable)</span></div>
|
||
<input type="hidden" id="commissionPct" value="10">
|
||
</div>
|
||
<div class="control-group">
|
||
<label>You gift up to level</label>
|
||
<select id="giftLevel">
|
||
<option value="0" selected>None (no gift)</option>
|
||
<option value="1">Level 1 ($14)</option>
|
||
<option value="2">Level 2 ($98)</option>
|
||
<option value="3">Level 3 ($263)</option>
|
||
<option value="4">Level 4 ($593)</option>
|
||
<option value="5">Level 5 ($1,253)</option>
|
||
</select>
|
||
</div>
|
||
<div class="control-group">
|
||
<label>They self-fund through level</label>
|
||
<select id="selfFundLevel">
|
||
<option value="0" selected>None (gift only)</option>
|
||
<option value="1">Level 1 ($14)</option>
|
||
<option value="2">Level 2 ($98)</option>
|
||
<option value="3">Level 3 ($263)</option>
|
||
<option value="4">Level 4 ($593)</option>
|
||
<option value="5">Level 5 ($1,253)</option>
|
||
</select>
|
||
</div>
|
||
<div class="checkbox-row">
|
||
<div class="checkbox-group">
|
||
<input type="checkbox" id="showReferral" checked>
|
||
<label for="showReferral">Show referral earnings (my 10%)</label>
|
||
</div>
|
||
<div class="checkbox-group">
|
||
<input type="checkbox" id="alreadyJoined">
|
||
<label for="alreadyJoined">Already joined (skip signup language)</label>
|
||
</div>
|
||
<a class="tg-link" href="https://t.me/+mzXTku1wR7pkODBh" target="_blank" rel="noopener">
|
||
💬 Sponsor Community
|
||
</a>
|
||
</div>
|
||
<div class="control-group" style="grid-column: 1 / -1;">
|
||
<label>Share this link <span style="font-weight:400;color:var(--text-muted);text-transform:none;letter-spacing:0;font-size:0.68rem;">(sends the plan as-is)</span></label>
|
||
<div style="max-width:520px;width:100%;margin:0 auto;">
|
||
<div class="shared-link-row">
|
||
<input type="text" id="sharedLink" readonly>
|
||
<button class="copy-sm-btn" id="copyLinkBtn" onclick="copySharedLink()">📄 Copy</button>
|
||
</div>
|
||
<div class="sub-hint">The referral opens the calculator with your username pre-loaded</div>
|
||
<div class="qr-row" style="margin-top: 12px; text-align: center;">
|
||
<img id="refQrCode" src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://cbp-calculator.saasy.top?ref=cryptoteambuild" alt="QR Code" style="width:160px;height:160px;border-radius:12px;border:2px solid var(--border);">
|
||
<div style="font-size:12px;color:var(--text-secondary);margin-top:6px;">📱 Scan to open calculator</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="shareablePlan" class="plan-section">
|
||
<div class="plan-header">
|
||
<span>📋 Referral Plan Preview</span>
|
||
<button class="copy-btn" id="copyPlanBtn" onclick="copyPlan()">📄 Copy Plan</button>
|
||
</div>
|
||
<pre id="planOutput" class="plan-output"></pre>
|
||
</div>
|
||
|
||
<div class="tabs">
|
||
<button class="tab-btn active" data-tab="overview">📊 Overview</button>
|
||
<button class="tab-btn" data-tab="timeline">📈 Profit Timeline</button>
|
||
<button class="tab-btn" data-tab="ladder">🪜 Full Ladder</button>
|
||
<button class="tab-btn" data-tab="comparison">⚖️ Compare</button>
|
||
<button class="tab-btn" data-tab="guide">📖 Sponsor Guide</button>
|
||
<button class="tab-btn" data-tab="progress">💰 My Progress</button>
|
||
</div>
|
||
|
||
<div class="results active" id="tab-overview">
|
||
<div class="summary-grid" id="summaryCards"></div>
|
||
<div class="chart-wrap">
|
||
<h3>📈 Cumulative Profit Over Time</h3>
|
||
<div id="chartContainer"><canvas id="profitChart"></canvas></div>
|
||
</div>
|
||
<div class="table-wrap" id="overviewPhaseWrap">
|
||
<div class="table-title">📍 Phase-by-Phase Journey</div>
|
||
<div class="legend">
|
||
<div class="legend-item"><div class="legend-dot green"></div> ROI achieved</div>
|
||
<div class="legend-item"><div class="legend-dot accent"></div> Endgame (3× L7)</div>
|
||
</div>
|
||
<table><thead><tr>
|
||
<th>Phase</th><th class="num">Cycles</th><th>Timeline</th>
|
||
<th class="num">Their Payout/Cycle</th>
|
||
<th class="num referral-col">Your 10% Cut/Cycle</th>
|
||
<th class="num">Cumulative to You</th>
|
||
</tr></thead><tbody id="overviewBody"></tbody></table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="results" id="tab-timeline">
|
||
<div class="chart-wrap">
|
||
<h3>📈 Monthly Profit Progression</h3>
|
||
<div id="chartContainer2"><canvas id="timelineChart"></canvas></div>
|
||
</div>
|
||
<div class="table-wrap">
|
||
<div class="table-title">📅 Month-by-Month Breakdown</div>
|
||
<table><thead><tr>
|
||
<th>Month</th><th>Active Phase</th>
|
||
<th class="num">Their Profit This Month</th>
|
||
<th class="num referral-col">Your 10% Commission/Month</th>
|
||
<th class="num">Your Cumulative</th>
|
||
</tr></thead><tbody id="timelineBody"></tbody></table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="results" id="tab-ladder">
|
||
<div class="table-wrap">
|
||
<div class="table-title">🪜 Complete Ladder — All Levels</div>
|
||
<table><thead><tr>
|
||
<th>Level</th><th>Activation Fee</th><th class="num">Campaign Cost</th>
|
||
<th class="num">Total Prerequisite</th><th class="num">Payout (After 10% Fee)</th>
|
||
<th class="num">Net Profit/Cycle</th><th class="num">Clicks/Day</th><th class="num">CPC</th>
|
||
</tr></thead><tbody id="ladderBody"></tbody></table>
|
||
</div>
|
||
<div class="table-wrap">
|
||
<div class="table-title">🪜 Your Ladder Progression (based on starting position)</div>
|
||
<table><thead><tr>
|
||
<th>Step</th><th>Required Capital</th><th class="num">Investment</th>
|
||
<th class="num">Return</th><th class="num">Profit</th>
|
||
<th class="num">Cycles</th><th>Est. Time</th>
|
||
</tr></thead><tbody id="ladderProgressionBody"></tbody></table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="results" id="tab-comparison">
|
||
<div class="table-wrap">
|
||
<div class="table-title">⚖️ All Scenarios Side by Side (per person)</div>
|
||
<table><thead><tr>
|
||
<th>Scenario</th><th class="num">Their Upfront</th><th class="num">Your Cost</th>
|
||
<th class="num">Time to 3× L7</th><th class="num">Year 1 Earnings</th>
|
||
<th class="num">Total to Endgame</th><th class="num">Monthly at 3× L7</th>
|
||
</tr></thead><tbody id="comparisonBody"></tbody></table>
|
||
</div>
|
||
<div class="chart-wrap">
|
||
<h3>⚖️ Scenario Comparison — Year 1 Earnings by Start</h3>
|
||
<div id="chartContainer3"><canvas id="compareChart"></canvas></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="results" id="tab-progress">
|
||
<div class="roi-dashboard">
|
||
<h3>💰 Your Personal ROI Dashboard</h3>
|
||
<p class="roi-subtitle">Track your progress from first deposit to 3× L7 endgame. All figures in USDT.</p>
|
||
|
||
<!-- Input Row -->
|
||
<div class="roi-inputs">
|
||
<div class="roi-field">
|
||
<label>Total Deposited (out-of-pocket)</label>
|
||
<input type="number" id="roiDeposits" placeholder="e.g. 450" step="10" min="0">
|
||
</div>
|
||
<div class="roi-field">
|
||
<label>Total Earnings (all-time, incl. pending)</label>
|
||
<input type="number" id="roiTotalEarned" placeholder="e.g. 371.33" step="0.01" min="0">
|
||
<small style="color:var(--text-muted);font-size:0.72rem;display:block;margin-top:3px;">From stats → Earnings → In Earned Wallets + Total Earned</small>
|
||
</div>
|
||
<div class="roi-field">
|
||
<label>Campaign Phase</label>
|
||
<select id="roiPhase">
|
||
<option value="" selected disabled>Select your phase...</option>
|
||
<option value="l1">L1 Only</option>
|
||
<option value="l2l1">L2 + L1</option>
|
||
<option value="l3l1">L3 + L1</option>
|
||
<option value="l4">L4 Only</option>
|
||
<option value="l4l3">L4 + L3 Hybrid</option>
|
||
<option value="l5">L5 Only</option>
|
||
<option value="l5l3">L5 + L3 Hybrid</option>
|
||
<option value="l6">L6 Only</option>
|
||
<option value="l6l3">L6 + L3 Hybrid</option>
|
||
<option value="l7solo">L7 Solo</option>
|
||
<option value="l7x3">3× L7 Endgame</option>
|
||
</select>
|
||
</div>
|
||
<div class="roi-field">
|
||
<label>Cycles Completed This Phase</label>
|
||
<input type="number" id="roiCyclesDone" placeholder="e.g. 2" step="1" min="0">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stats Cards Row -->
|
||
<div class="roi-stats">
|
||
<div class="roi-stat-card" id="roiStatROI">
|
||
<div class="roi-stat-label">ROI</div>
|
||
<div class="roi-stat-value">—</div>
|
||
<div class="roi-stat-bar"><div class="roi-bar-fill" id="roiBarROI"></div></div>
|
||
</div>
|
||
<div class="roi-stat-card" id="roiStatRecouped">
|
||
<div class="roi-stat-label">Recouped</div>
|
||
<div class="roi-stat-value">—</div>
|
||
</div>
|
||
<div class="roi-stat-card" id="roiStatRemaining">
|
||
<div class="roi-stat-label">To Breakeven</div>
|
||
<div class="roi-stat-value">—</div>
|
||
</div>
|
||
<div class="roi-stat-card" id="roiStatPhase">
|
||
<div class="roi-stat-label">Phase Progress</div>
|
||
<div class="roi-stat-value">—</div>
|
||
<div class="roi-stat-bar"><div class="roi-bar-fill" id="roiBarPhase"></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Phase Tracker -->
|
||
<div class="roi-phase-tracker">
|
||
<div class="roi-phase-title">🪜 Your Ladder — Where You Are vs Endgame</div>
|
||
<div class="roi-location-badge" id="roiLocationBadge">📌 You are here — <span id="roiHerePhase">—</span></div>
|
||
<div class="roi-ladder" id="roiLadder">
|
||
<div class="roi-ladder-step" data-phase="l1">L1</div>
|
||
<div class="roi-ladder-step" data-phase="l2l1">L2+L1</div>
|
||
<div class="roi-ladder-step" data-phase="l3l1">L3+L1</div>
|
||
<div class="roi-ladder-step" data-phase="l4">L4</div>
|
||
<div class="roi-ladder-step" data-phase="l4l3">L4+L3</div>
|
||
<div class="roi-ladder-step" data-phase="l5">L5</div>
|
||
<div class="roi-ladder-step" data-phase="l5l3">L5+L3</div>
|
||
<div class="roi-ladder-step" data-phase="l6">L6</div>
|
||
<div class="roi-ladder-step" data-phase="l6l3">L6+L3</div>
|
||
<div class="roi-ladder-step" data-phase="l7solo">L7</div>
|
||
<div class="roi-ladder-step endgame" data-phase="l7x3">🏆 3× L7</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Milestones -->
|
||
<div class="roi-milestones">
|
||
<div class="roi-phase-title">🏁 Milestones</div>
|
||
<div class="roi-milestone-list" id="roiMilestones"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="results" id="tab-guide">
|
||
<div style="max-width:680px;margin:0 auto;padding:8px 0;">
|
||
<h3 style="margin:0 0 10px;color:var(--accent);font-size:1.15rem;">📖 How to Use This Calculator as a Sponsor</h3>
|
||
<div style="background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;margin-bottom:16px;">
|
||
<strong style="color:var(--accent);">🧍♂️ Live Demo Mode (for their eyes)</strong>
|
||
<p style="margin:6px 0 0;font-size:0.88rem;line-height:1.5;">When you set the controls and send someone the share link, they see exactly what you configured — gift level, self-fund level, the full plan. They just open it and read. No account needed.</p>
|
||
</div>
|
||
<div style="background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;margin-bottom:16px;">
|
||
<strong style="color:var(--accent);">🎁 Gifting vs Self-Fund</strong>
|
||
<p style="margin:6px 0 0;font-size:0.88rem;line-height:1.5;">
|
||
<strong>Gift mode</strong> (default): "You gift up to Level X" — the plan says you covered those levels for them. Great for family.<br>
|
||
<strong>Self-fund mode</strong>: "They self-fund through Level X" — they pay for those levels themselves. Great for friends or social posts.<br>
|
||
Use both together for hybrid offers: e.g. gift L1-L3, they self-fund L4.
|
||
</p>
|
||
</div>
|
||
<div style="background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;margin-bottom:16px;">
|
||
<strong style="color:var(--accent);">✅ Already Joined (PIF)</strong>
|
||
<p style="margin:6px 0 0;font-size:0.88rem;line-height:1.5;">Check "Already joined" if someone signed up already and you transferred funds to their account. The plan strips all signup language and tells them to purchase the campaign themselves.</p>
|
||
</div>
|
||
<div style="background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;margin-bottom:16px;">
|
||
<strong style="color:var(--accent);">📤 Sharing</strong>
|
||
<p style="margin:6px 0 0;font-size:0.88rem;line-height:1.5;">
|
||
<strong>Link:</strong> The "Share this link" box copies a URL with your username pre-loaded. Send it in any chat.<br>
|
||
<strong>QR:</strong> Scan the QR code on mobile to open it yourself. Or screenshot it for in-person sharing.<br>
|
||
<strong>Plan text:</strong> The "Copy Plan" button copies the full message — paste it directly into Telegram, WhatsApp, or SMS.
|
||
</p>
|
||
</div>
|
||
<div style="background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;margin-bottom:16px;">
|
||
<strong style="color:var(--accent);">💬 Sponsor Community</strong>
|
||
<p style="margin:6px 0 0;font-size:0.88rem;line-height:1.5;">
|
||
Connect with other sponsors, share strategies, and help your referrals in the official Telegram group:<br>
|
||
<a href="https://t.me/+mzXTku1wR7pkODBh" target="_blank" rel="noopener" style="color:var(--accent);font-weight:600;">https://t.me/+mzXTku1wR7pkODBh</a>
|
||
</p>
|
||
</div>
|
||
<div style="background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;">
|
||
<strong style="color:var(--accent);">📌 Quick Tips</strong>
|
||
<ul style="margin:6px 0 0;font-size:0.88rem;line-height:1.6;padding-left:18px;">
|
||
<li>Set the calculator controls <em>before</em> copying the share link — it captures your settings</li>
|
||
<li>Toggle "Show referral earnings" on to show them how you get paid too (builds trust)</li>
|
||
<li>The plan auto-updates as you change settings — no refresh needed</li>
|
||
<li>Use the comparison tab to show them different start options side by side</li>
|
||
<li>Your referral link at the bottom stays the same regardless of settings</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="calc-footer">
|
||
Built exclusively for the Crypto Team Build Network • All figures in USDT • 10% withdrawal fee already factored into payouts •<br>
|
||
Referral link: <a href="https://clickbaitpays.me/?ref=cryptoteambuild" target="_blank" rel="noopener">https://clickbaitpays.me/?ref=cryptoteambuild</a> • <a href="https://t.me/+mzXTku1wR7pkODBh" target="_blank" rel="noopener">💬 Sponsor Community</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
|
||
<script>
|
||
// ══════════════════════════════════════════════════════════════════════
|
||
// CBP CALCULATOR — Full logic (unchanged from original)
|
||
// ══════════════════════════════════════════════════════════════════════
|
||
|
||
const LEVELS = [
|
||
{ level: 1, act: 1, camp: 13, total: 14, payout: 17.17, clicks: 3, cpc: 0.48, netProfit: 4.17 },
|
||
{ level: 2, act: 7, camp: 77, total: 84, payout: 101.74, clicks: 3, cpc: 2.83, netProfit: 24.74 },
|
||
{ level: 3, act: 15, camp: 150, total: 165, payout: 194.40, clicks: 3, cpc: 5.40, netProfit: 44.40 },
|
||
{ level: 4, act: 30, camp: 300, total: 330, payout: 388.80, clicks: 5, cpc: 6.48, netProfit: 88.80 },
|
||
{ level: 5, act: 60, camp: 600, total: 660, payout: 777.60, clicks: 6, cpc: 10.80, netProfit: 177.60 },
|
||
{ level: 6, act: 120, camp: 1200, total: 1320, payout: 1555.20,clicks: 10, cpc: 12.96, netProfit: 355.20 },
|
||
{ level: 7, act: 240, camp: 2400, total: 2640, payout: 3240.00,clicks: 20, cpc: 13.50, netProfit: 840.00 },
|
||
];
|
||
|
||
const HYBRIDS = {
|
||
'L1-only': { label: 'L1 Only', reinvest: 13, payout: 17.17, profit: 4.17, cycles: 9, months: 3.0, daysPer: 19 },
|
||
'L2+L1': { label: 'L2 + L1', reinvest: 90, payout: 118.91, profit: 28.91, cycles: 4, months: 2.5, daysPer: 19 },
|
||
'L3+L1': { label: 'L3 + L1', reinvest: 163, payout: 211.57, profit: 48.57, cycles: 4, months: 2.5, daysPer: 19 },
|
||
'L4+L3': { label: 'L4 + L3', reinvest: 450, payout: 583.20, profit: 133.20,cycles: 5, months: 3.0, daysPer: 19 },
|
||
'L5+L4': { label: 'L5 + L4', reinvest: 900, payout: 1166.40,profit: 266.40,cycles: 4, months: 2.0, daysPer: 19 },
|
||
'L6': { label: 'L6', reinvest: 1200, payout: 1555.20,profit: 355.20,cycles: 4, months: 2.0, daysPer: 19 },
|
||
'L7': { label: 'Single L7', reinvest: 2400, payout: 3240.00,profit: 840.00,cycles: 7, months: 3.0, daysPer: 19 },
|
||
'3xL7': { label: '3× L7 Endgame', reinvest: 7200, payout: 9720, profit: 2520, cycles: 1, months: 0.63, daysPer: 19 },
|
||
};
|
||
|
||
const LADDER_STEPS = [
|
||
{ step: 'L4 Funded', capital: 300, invest: 300, ret: 388.80, profit: 88.80, cycles: 5, months: 3.0 },
|
||
{ step: 'L5 Ready', capital: 660, invest: 660, ret: 777.60, profit: 177.60,cycles: 5, months: 3.0 },
|
||
{ step: 'L6 Ready', capital: 1320, invest: 1320, ret: 1555.20,profit: 355.20,cycles: 4, months: 2.0 },
|
||
{ step: 'L7 Ready', capital: 2640, invest: 2640, ret: 3240.00,profit: 840.00,cycles: 7, months: 3.0 },
|
||
{ step: '3× L7 Endgame',capital: 7200, invest: 7200, ret: 9720, profit: 2520, cycles: 0, months: 0 },
|
||
];
|
||
|
||
const THREE_L7_YOUR_CUT = 972;
|
||
|
||
function getLevelCost(upTo) {
|
||
if (upTo <= 0) return 0;
|
||
return LEVELS.slice(0, upTo).reduce((s, l) => s + l.total, 0);
|
||
}
|
||
|
||
function getEffectiveStart(gift, selfF) {
|
||
return Math.max(gift, selfF);
|
||
}
|
||
|
||
function getPhaseSequence(effectiveStart) {
|
||
if (effectiveStart >= 5) return ['L5+L4','L6','L7','3xL7'];
|
||
if (effectiveStart >= 4) return ['L4+L3','L5+L4','L6','L7','3xL7'];
|
||
if (effectiveStart >= 3) return ['L3+L1','L4+L3','L5+L4','L6','L7','3xL7'];
|
||
if (effectiveStart >= 2) return ['L2+L1','L3+L1','L4+L3','L5+L4','L6','L7','3xL7'];
|
||
return ['L1-only','L2+L1','L3+L1','L4+L3','L5+L4','L6','L7','3xL7'];
|
||
}
|
||
|
||
function estimateMonths(phases) {
|
||
let totalDays = 0;
|
||
for (const k of phases) {
|
||
if (k === '3xL7') break;
|
||
totalDays += HYBRIDS[k].cycles * HYBRIDS[k].daysPer;
|
||
}
|
||
return Math.round(totalDays / 30.4 * 10) / 10;
|
||
}
|
||
|
||
function estimateYear1Cum(phases, commPct, giftLevel) {
|
||
let cum = 0;
|
||
let daysLeft = 365;
|
||
for (const k of phases) {
|
||
if (k === '3xL7') break;
|
||
const p = HYBRIDS[k];
|
||
const yourCut = p.payout * (commPct / 100);
|
||
const cyclesFit = Math.min(p.cycles, Math.floor(daysLeft / p.daysPer));
|
||
cum += cyclesFit * yourCut;
|
||
daysLeft -= cyclesFit * p.daysPer;
|
||
if (daysLeft <= 0) break;
|
||
}
|
||
return Math.round(cum);
|
||
}
|
||
|
||
function buildMonthlyTimeline(phases, commPct) {
|
||
const months = [];
|
||
let cumProf = 0, cumComm = 0;
|
||
let m = 0;
|
||
for (const k of phases) {
|
||
if (k === '3xL7') {
|
||
for (let i = 0; i < 6; i++) {
|
||
m++;
|
||
const p = HYBRIDS[k];
|
||
const yourCut = p.payout * (commPct / 100);
|
||
cumProf += p.profit;
|
||
cumComm += yourCut;
|
||
months.push({ m, phase: p.label, prof: Math.round(p.profit), comm: Math.round(yourCut), cumComm: Math.round(cumComm) });
|
||
}
|
||
break;
|
||
}
|
||
const p = HYBRIDS[k];
|
||
const yourCut = p.payout * (commPct / 100);
|
||
for (let c = 0; c < p.cycles; c++) {
|
||
m++;
|
||
cumProf += p.profit;
|
||
cumComm += yourCut;
|
||
months.push({ m, phase: c === 0 ? p.label : '', prof: Math.round(p.profit), comm: Math.round(yourCut), cumComm: Math.round(cumComm) });
|
||
}
|
||
if (m >= 30) break;
|
||
}
|
||
return months;
|
||
}
|
||
|
||
function buildSCENARIOS() {
|
||
const levels = [
|
||
{ giftLvl: 1, selfLvl: 0, id: 'gift1', label: 'L1 Gift ($14)', yourCost: 14 },
|
||
{ giftLvl: 0, selfLvl: 1, id: 'self1', label: 'Self L1 ($14)', yourCost: 0 },
|
||
{ giftLvl: 2, selfLvl: 0, id: 'gift2', label: 'L1-L2 Gift ($98)', yourCost: 98 },
|
||
{ giftLvl: 0, selfLvl: 2, id: 'self2', label: 'Self L2 ($98)', yourCost: 0 },
|
||
{ giftLvl: 3, selfLvl: 0, id: 'gift3', label: 'L1-L3 Gift ($263)', yourCost: 263},
|
||
{ giftLvl: 0, selfLvl: 3, id: 'self3', label: 'Self L3 ($263)', yourCost: 0 },
|
||
{ giftLvl: 4, selfLvl: 0, id: 'gift4', label: 'L1-L4 Gift ($593)', yourCost: 593},
|
||
{ giftLvl: 0, selfLvl: 4, id: 'self4', label: 'Self L4 ($593)', yourCost: 0 },
|
||
{ giftLvl: 5, selfLvl: 0, id: 'gift5', label: 'L1-L5 Gift ($1,253)', yourCost:1253},
|
||
{ giftLvl: 0, selfLvl: 5, id: 'self5', label: 'Self L5 ($1,253)', yourCost: 0 },
|
||
];
|
||
return levels.map(s => {
|
||
const eff = Math.max(s.giftLvl, s.selfLvl);
|
||
const phases = getPhaseSequence(eff);
|
||
const t = Math.round(estimateMonths(phases));
|
||
const y = estimateYear1Cum(phases, 10, s.giftLvl);
|
||
const eg = phases.filter(k => k !== '3xL7')
|
||
.reduce((sum, k) => sum + HYBRIDS[k].payout * 0.10 * HYBRIDS[k].cycles, 0);
|
||
return { ...s, time: t, yr1: Math.round(y), totalEG: Math.round(eg), monthly: 1860 };
|
||
});
|
||
}
|
||
const SCENARIOS = buildSCENARIOS();
|
||
|
||
let chart1 = null, chart2 = null, chart3 = null;
|
||
|
||
function updateAll() {
|
||
const numPeople = parseInt(document.getElementById('numPeople').value) || 1;
|
||
const commPct = parseFloat(document.getElementById('commissionPct').value) || 10;
|
||
const giftLevel = parseInt(document.getElementById('giftLevel').value);
|
||
const selfLevel = parseInt(document.getElementById('selfFundLevel').value);
|
||
const showRef = document.getElementById('showReferral').checked;
|
||
|
||
const mult = commPct / 10;
|
||
const giftCost = getLevelCost(giftLevel);
|
||
const selfCost = getLevelCost(selfLevel);
|
||
const effective = getEffectiveStart(giftLevel, selfLevel);
|
||
const phases = getPhaseSequence(effective);
|
||
const totalMonths = estimateMonths(phases);
|
||
|
||
document.querySelectorAll('.referral-col').forEach(el => {
|
||
el.style.display = showRef ? '' : 'none';
|
||
});
|
||
|
||
const yr1Cum = estimateYear1Cum(phases, commPct, giftLevel) * numPeople;
|
||
const yr1PerPerson = estimateYear1Cum(phases, commPct, giftLevel);
|
||
const totalEG = Math.round(phases.filter(k => k !== '3xL7')
|
||
.reduce((s, k) => s + HYBRIDS[k].payout * (commPct / 100) * HYBRIDS[k].cycles, 0) * 10) / 10;
|
||
const monthlyPassive = Math.round(THREE_L7_YOUR_CUT * mult * numPeople);
|
||
|
||
let totalToEGPerPerson = 0;
|
||
for (const k of phases) {
|
||
if (k === '3xL7') break;
|
||
totalToEGPerPerson += HYBRIDS[k].payout * (commPct / 100) * HYBRIDS[k].cycles;
|
||
}
|
||
totalToEGPerPerson = Math.round(totalToEGPerPerson * 100) / 100;
|
||
|
||
let roiText = 'N/A', roiSub = '';
|
||
if (giftCost > 0) {
|
||
let cumCheck = 0;
|
||
for (const k of phases) {
|
||
if (k === '3xL7') break;
|
||
const p = HYBRIDS[k];
|
||
const yourCut = p.payout * (commPct / 100);
|
||
for (let i = 0; i < p.cycles; i++) {
|
||
cumCheck += yourCut;
|
||
if (cumCheck >= giftCost) {
|
||
const monthsTo = (phases.indexOf(k) * (p.daysPer / 30.4)) + (i + 1) * (p.daysPer / 30.4);
|
||
roiText = `~${Math.round(monthsTo * 10) / 10} months`;
|
||
roiSub = `during ${p.label}`;
|
||
break;
|
||
}
|
||
}
|
||
if (roiSub) break;
|
||
}
|
||
if (!roiSub) roiText = '~5.5 months';
|
||
}
|
||
|
||
const summaryHtml = `
|
||
<div class="summary-card">
|
||
<div class="label">Your Cost</div>
|
||
<div class="value accent">$${giftCost.toLocaleString()}</div>
|
||
<div class="sub">${numPeople > 1 ? `× ${numPeople} = $${(giftCost * numPeople).toLocaleString()}` : ''}</div>
|
||
</div>
|
||
<div class="summary-card">
|
||
<div class="label">Their Cost</div>
|
||
<div class="value yellow">$${selfCost.toLocaleString()}</div>
|
||
<div class="sub">per person</div>
|
||
</div>
|
||
<div class="summary-card">
|
||
<div class="label">Time to 3× L7</div>
|
||
<div class="value orange" style="font-size:1.3rem">~${totalMonths} months</div>
|
||
</div>
|
||
<div class="summary-card">
|
||
<div class="label">Year 1 Referral Earnings</div>
|
||
<div class="value green">$${yr1Cum.toLocaleString()}</div>
|
||
<div class="sub">${numPeople > 1 ? `$${yr1PerPerson.toLocaleString()} / person` : ''}</div>
|
||
</div>
|
||
<div class="summary-card">
|
||
<div class="label">ROI on Gift</div>
|
||
<div class="value green">${roiText}</div>
|
||
<div class="sub">${roiSub || (giftCost > 0 ? '' : 'no gift cost')}</div>
|
||
</div>
|
||
<div class="summary-card">
|
||
<div class="label">Monthly Passive (3× L7)</div>
|
||
<div class="value green">$${monthlyPassive.toLocaleString()}</div>
|
||
<div class="sub">${numPeople > 1 ? `$${Math.round(monthlyPassive / numPeople).toLocaleString()} / person` : 'per month'}</div>
|
||
</div>
|
||
`;
|
||
document.getElementById('summaryCards').innerHTML = summaryHtml;
|
||
|
||
let cumRunning = 0;
|
||
let roiHit = false;
|
||
let rows = '';
|
||
for (const k of phases) {
|
||
const p = HYBRIDS[k];
|
||
const yourCut = p.payout * (commPct / 100);
|
||
const cyclesNum = p.cycles;
|
||
if (!roiHit && giftCost > 0) {
|
||
for (let i = 0; i < cyclesNum; i++) cumRunning += yourCut;
|
||
if (cumRunning >= giftCost) roiHit = true;
|
||
}
|
||
const isRoi = giftCost > 0 && !roiHit ? true : false;
|
||
const cls = k === '3xL7' ? 'endgame' : (isRoi && roiHit ? 'highlight' : '');
|
||
rows += `<tr class="${cls}">
|
||
<td>${p.label}</td>
|
||
<td class="num">${k === '3xL7' ? 'every 19d' : `${cyclesNum}×`}</td>
|
||
<td>${k === '3xL7' ? 'ongoing' : `~${p.months} months`}</td>
|
||
<td class="num">$${p.payout.toFixed(2)}</td>
|
||
<td class="num green-text">$${yourCut.toFixed(2)}</td>
|
||
<td class="num">$${cumRunning.toFixed(2)}</td>
|
||
</tr>`;
|
||
}
|
||
document.getElementById('overviewBody').innerHTML = rows;
|
||
|
||
const chartData = [];
|
||
let chartCum = 0;
|
||
let chartMonth = 0;
|
||
for (const k of phases) {
|
||
const p = HYBRIDS[k];
|
||
const yourCut = p.payout * (commPct / 100);
|
||
const cycles = k === '3xL7' ? 6 : p.cycles;
|
||
for (let i = 0; i < cycles; i++) {
|
||
chartMonth++;
|
||
chartCum += yourCut;
|
||
chartData.push({ m: chartMonth, cum: Math.round(chartCum * 100) / 100 });
|
||
}
|
||
if (k === '3xL7') break;
|
||
}
|
||
|
||
const chartLabels = chartData.map(d => `M${d.m}`);
|
||
const chartValues = chartData.map(d => d.cum);
|
||
|
||
if (chart1) { chart1.destroy(); chart1 = null; }
|
||
if (chart2) { chart2.destroy(); chart2 = null; }
|
||
if (chart3) { chart3.destroy(); chart3 = null; }
|
||
|
||
const ctx1 = document.getElementById('profitChart').getContext('2d');
|
||
chart1 = new Chart(ctx1, {
|
||
type: 'line',
|
||
data: {
|
||
labels: chartLabels,
|
||
datasets: [{
|
||
label: `${numPeople > 1 ? `Total (${numPeople} people)` : 'Your'} Cumulative Referral Earnings`,
|
||
data: numPeople > 1 ? chartValues.map(v => v * numPeople) : chartValues,
|
||
borderColor: '#6c5ce7',
|
||
backgroundColor: 'rgba(108,92,231,0.1)',
|
||
fill: true,
|
||
tension: 0.3,
|
||
pointRadius: 3,
|
||
pointHoverRadius: 5,
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
plugins: {
|
||
legend: { labels: { color: '#8a8fa8', font: { size: 11 } } },
|
||
tooltip: { callbacks: { label: ctx => '$' + ctx.parsed.y.toLocaleString() } }
|
||
},
|
||
scales: {
|
||
x: { ticks: { color: '#5a5e7a', maxTicksLimit: 15, font: { size: 10 } }, grid: { color: '#2a2e4522' } },
|
||
y: { ticks: { color: '#5a5e7a', font: { size: 10 }, callback: v => '$' + v.toLocaleString() }, grid: { color: '#2a2e4522' } }
|
||
}
|
||
}
|
||
});
|
||
|
||
const monthly = buildMonthlyTimeline(phases, commPct);
|
||
let tRows = '';
|
||
let runningCum = 0;
|
||
for (const m of monthly) {
|
||
runningCum += m.comm * numPeople;
|
||
tRows += `<tr>
|
||
<td>Month ${m.m}</td>
|
||
<td>${m.phase}</td>
|
||
<td class="num">$${(m.prof * numPeople).toLocaleString()}</td>
|
||
<td class="num green-text">$${(m.comm * numPeople).toLocaleString()}</td>
|
||
<td class="num">$${runningCum.toLocaleString()}</td>
|
||
</tr>`;
|
||
}
|
||
document.getElementById('timelineBody').innerHTML = tRows;
|
||
|
||
const ctx2 = document.getElementById('timelineChart').getContext('2d');
|
||
chart2 = new Chart(ctx2, {
|
||
type: 'bar',
|
||
data: {
|
||
labels: monthly.map(m => `M${m.m}`),
|
||
datasets: [
|
||
{
|
||
label: 'Their Profit',
|
||
data: monthly.map(m => m.prof * numPeople),
|
||
backgroundColor: 'rgba(0,214,143,0.4)',
|
||
borderColor: '#00d68f',
|
||
borderWidth: 1,
|
||
borderRadius: 3,
|
||
},
|
||
{
|
||
label: 'Your Commission',
|
||
data: monthly.map(m => m.comm * numPeople),
|
||
backgroundColor: 'rgba(108,92,231,0.5)',
|
||
borderColor: '#6c5ce7',
|
||
borderWidth: 1,
|
||
borderRadius: 3,
|
||
}
|
||
]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
plugins: {
|
||
legend: { labels: { color: '#8a8fa8', font: { size: 11 } } },
|
||
tooltip: { callbacks: { label: ctx => '$' + ctx.parsed.y.toLocaleString() } }
|
||
},
|
||
scales: {
|
||
x: { ticks: { color: '#5a5e7a', maxTicksLimit: 20, font: { size: 10 } }, grid: { color: '#2a2e4522' } },
|
||
y: { ticks: { color: '#5a5e7a', font: { size: 10 }, callback: v => '$' + v.toLocaleString() }, grid: { color: '#2a2e4522' } }
|
||
}
|
||
}
|
||
});
|
||
|
||
let lRows = '';
|
||
for (const l of LEVELS) {
|
||
lRows += `<tr>
|
||
<td>Level ${l.level}</td>
|
||
<td>$${l.act}</td>
|
||
<td class="num">$${l.camp}</td>
|
||
<td class="num">$${l.total}</td>
|
||
<td class="num green-text">$${l.payout.toFixed(2)}</td>
|
||
<td class="num">$${l.netProfit.toFixed(2)}</td>
|
||
<td class="num">${l.clicks}</td>
|
||
<td class="num">$${l.cpc.toFixed(2)}</td>
|
||
</tr>`;
|
||
}
|
||
document.getElementById('ladderBody').innerHTML = lRows;
|
||
|
||
const ladderStart = effective;
|
||
let lpRows = '';
|
||
let started = false;
|
||
for (const s of LADDER_STEPS) {
|
||
const stepNum = LADDER_STEPS.indexOf(s) + 4;
|
||
if (stepNum <= ladderStart && ladderStart < 7) continue;
|
||
started = true;
|
||
const yourCut = s.ret * (commPct / 100);
|
||
lpRows += `<tr>
|
||
<td>${s.step}</td>
|
||
<td>$${s.capital.toLocaleString()}</td>
|
||
<td class="num">$${s.invest.toLocaleString()}</td>
|
||
<td class="num green-text">$${s.ret.toFixed(2)}</td>
|
||
<td class="num">$${s.profit.toFixed(2)}</td>
|
||
<td class="num">${s.cycles > 0 ? s.cycles + '×' : 'ongoing'}</td>
|
||
<td>${s.months > 0 ? `~${s.months} months` : 'forever'}</td>
|
||
</tr>`;
|
||
}
|
||
if (!lpRows) lpRows = '<tr><td colspan="7" style="text-align:center;color:var(--text-muted)">Already at endgame!</td></tr>';
|
||
document.getElementById('ladderProgressionBody').innerHTML = lpRows;
|
||
|
||
let cRows = '';
|
||
for (const s of SCENARIOS) {
|
||
const adj = mult;
|
||
cRows += `<tr class="scenario-row ${s.id === `gift${giftLevel}` || s.id === `self${selfLevel}` ? 'active-row' : ''}">
|
||
<td>${s.label}</td>
|
||
<td class="num">$${s.yourCost.toLocaleString()}</td>
|
||
<td class="num">$${s.yourCost.toLocaleString()}</td>
|
||
<td class="num">~${s.time} months</td>
|
||
<td class="num">$${Math.round(s.yr1 * adj * numPeople).toLocaleString()}</td>
|
||
<td class="num">$${Math.round(s.totalEG * adj * numPeople).toLocaleString()}</td>
|
||
<td class="num">$${Math.round(s.monthly * adj * numPeople).toLocaleString()}/mo</td>
|
||
</tr>`;
|
||
}
|
||
document.getElementById('comparisonBody').innerHTML = cRows;
|
||
|
||
const ctx3 = document.getElementById('compareChart').getContext('2d');
|
||
const compareLabels = SCENARIOS.map(s => s.label.replace('$', '').replace('(', '').replace(')', ''));
|
||
const compareData = SCENARIOS.map(s => Math.round(s.yr1 * mult * numPeople));
|
||
chart3 = new Chart(ctx3, {
|
||
type: 'bar',
|
||
data: {
|
||
labels: compareLabels,
|
||
datasets: [{
|
||
label: `Year 1 Earnings (${numPeople} people)`,
|
||
data: compareData,
|
||
backgroundColor: compareData.map((v, i) => {
|
||
const ids = [`gift${giftLevel}`, `self${selfLevel}`];
|
||
return ids.includes(SCENARIOS[i].id) ? 'rgba(108,92,231,0.7)' : 'rgba(90,94,122,0.3)';
|
||
}),
|
||
borderColor: compareData.map((v, i) => {
|
||
const ids = [`gift${giftLevel}`, `self${selfLevel}`];
|
||
return ids.includes(SCENARIOS[i].id) ? '#6c5ce7' : '#5a5e7a';
|
||
}),
|
||
borderWidth: 1,
|
||
borderRadius: 4,
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
indexAxis: 'y',
|
||
plugins: {
|
||
legend: { display: false },
|
||
tooltip: { callbacks: { label: ctx => '$' + ctx.parsed.x.toLocaleString() + ' / yr' } }
|
||
},
|
||
scales: {
|
||
x: { ticks: { color: '#5a5e7a', font: { size: 9 }, callback: v => '$' + v.toLocaleString() }, grid: { color: '#2a2e4522' } },
|
||
y: { ticks: { color: '#8a8fa8', font: { size: 9 } }, grid: { display: false } }
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// ─── Event Wiring ──────────────────────────────────────────
|
||
['numPeople','commissionPct','giftLevel','selfFundLevel','showReferral','alreadyJoined'].forEach(id => {
|
||
const el = document.getElementById(id);
|
||
el.addEventListener('input', updateAll);
|
||
el.addEventListener('change', updateAll);
|
||
});
|
||
|
||
// Tabs
|
||
document.querySelectorAll('.tab-btn').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
||
document.querySelectorAll('.results').forEach(r => r.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
document.getElementById('tab-' + btn.dataset.tab).classList.add('active');
|
||
setTimeout(() => { if (chart1) chart1.resize(); if (chart2) chart2.resize(); if (chart3) chart3.resize(); }, 50);
|
||
});
|
||
});
|
||
|
||
updateAll();
|
||
|
||
// ─── URL Param Helpers ──────────────────────────────────────
|
||
function getRefFromURL() {
|
||
const p = new URLSearchParams(window.location.search);
|
||
return p.get('ref') || '';
|
||
}
|
||
|
||
function getBaseUrl() {
|
||
let url = window.location.href.split('?')[0];
|
||
if (url.endsWith('/')) url = url.slice(0, -1);
|
||
return url;
|
||
}
|
||
|
||
function getShareUrl(refUser) {
|
||
const u = refUser || getRefFromURL() || 'cryptoteambuild';
|
||
return getBaseUrl() + '?ref=' + encodeURIComponent(u);
|
||
}
|
||
|
||
function updateSharedLinkBox() {
|
||
const refUser = getRefFromURL() || 'cryptoteambuild';
|
||
const shareUrl = getShareUrl(refUser);
|
||
document.getElementById('sharedLink').value = shareUrl;
|
||
const signupBtn = document.getElementById('calcSignupBtn');
|
||
if (signupBtn) signupBtn.href = `https://clickbaitpays.me/?ref=${refUser}`;
|
||
const qrImg = document.getElementById('refQrCode');
|
||
if (qrImg) qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(shareUrl)}`;
|
||
}
|
||
|
||
function copySharedLink() {
|
||
const input = document.getElementById('sharedLink');
|
||
const btn = document.getElementById('copyLinkBtn');
|
||
input.select();
|
||
navigator.clipboard.writeText(input.value).then(() => {
|
||
btn.textContent = '✅ Copied!';
|
||
btn.classList.add('copied');
|
||
setTimeout(() => { btn.textContent = '📄 Copy'; btn.classList.remove('copied'); }, 2000);
|
||
});
|
||
}
|
||
|
||
function copyCalculatorLink() {
|
||
const refUser = getRefFromURL() || 'cryptoteambuild';
|
||
const url = getShareUrl(refUser);
|
||
navigator.clipboard.writeText(url).then(() => {
|
||
const btn = document.querySelector('.cta-btn-secondary');
|
||
btn.textContent = '✅ Copied!';
|
||
setTimeout(() => { btn.innerHTML = '📄 Copy Calculator Link'; }, 2000);
|
||
});
|
||
}
|
||
|
||
// ─── Hero / Calculator Section Toggling ────────────────────
|
||
function openCalculator() {
|
||
document.getElementById('calculatorSection').classList.add('expanded');
|
||
document.getElementById('heroSection').style.minHeight = 'auto';
|
||
}
|
||
|
||
function scrollToCalculator() {
|
||
openCalculator();
|
||
setTimeout(() => {
|
||
document.getElementById('calculatorSection').scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
}, 100);
|
||
}
|
||
|
||
function scrollToHero() {
|
||
document.getElementById('heroSection').scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
}
|
||
|
||
// Hero CTA button
|
||
document.getElementById('heroCalcBtn').addEventListener('click', scrollToCalculator);
|
||
|
||
// Hero signup button — same logic as calculator signup
|
||
function updateHeroSignupBtn() {
|
||
const refUser = getRefFromURL() || 'cryptoteambuild';
|
||
const btn = document.getElementById('heroSignupBtn');
|
||
btn.href = `https://clickbaitpays.me/?ref=${refUser}`;
|
||
}
|
||
|
||
// Auto-open calculator if ?calc=1 in URL
|
||
(function init() {
|
||
const params = new URLSearchParams(window.location.search);
|
||
const refUser = params.get('ref') || 'cryptoteambuild';
|
||
if (params.get('calc') === '1') {
|
||
openCalculator();
|
||
}
|
||
updateHeroSignupBtn();
|
||
updateSharedLinkBox();
|
||
})();
|
||
|
||
// ─── Shareable Plan Generator ───────────────────────────────
|
||
function generatePlan() {
|
||
const numPeople = parseInt(document.getElementById('numPeople').value) || 1;
|
||
const giftLevel = parseInt(document.getElementById('giftLevel').value);
|
||
const selfLevel = parseInt(document.getElementById('selfFundLevel').value);
|
||
const refUser = getRefFromURL() || 'cryptoteambuild';
|
||
const refLink = `https://clickbaitpays.me/?ref=${refUser}`;
|
||
const giftCost = getLevelCost(giftLevel);
|
||
const selfCost = getLevelCost(selfLevel);
|
||
const effective = getEffectiveStart(giftLevel, selfLevel);
|
||
const phases = getPhaseSequence(effective);
|
||
const totalMonths = estimateMonths(phases);
|
||
const alreadyJoined = document.getElementById('alreadyJoined').checked;
|
||
|
||
updateSharedLinkBox();
|
||
|
||
let pifSteps = '';
|
||
if (giftCost > 0) {
|
||
let firstPayoutGuidance = '';
|
||
if (giftLevel >= 3) {
|
||
firstPayoutGuidance = `Your L2 and L3 are already activated and ready. Once that first L1 payout clears (~$17.17), put it toward buying the L2 campaign ($${LEVELS[1].camp}). Run L2 alongside L1 for a few cycles and you'll stack up toward L3 quickly.`;
|
||
} else if (giftLevel >= 2) {
|
||
firstPayoutGuidance = `Both campaigns are already running from day one. Once those first payouts clear (~$17.17 + $101.74), you'll have ~$118.91 to work with — reinvest in L2 + L1 again and the system feeds itself from here.`;
|
||
} else {
|
||
firstPayoutGuidance = `Once that first L1 payout clears (~$17.17), you can buy L1 again and run it back-to-back. Stack a few cycles and you'll have enough for L2 activation ($${LEVELS[1].total}).`;
|
||
}
|
||
|
||
const firstPhase = phases.filter(k => k !== '3xL7')[0];
|
||
const fp = HYBRIDS[firstPhase];
|
||
pifSteps = `\n**Before we start — connect with me first:**\n\nHere's how this works. When you're ready to get started:\n\n1. Join the Telegram sponsor group: https://t.me/+mzXTku1wR7pkODBh\n2. Announce in the group that **${refUser} is my sponsor** — just say it so I know who you are\n3. I'll find you in the group, confirm you're my referral, and transfer your Level 1 and Level 2 funds right then\n\n**Once the funds hit your account:**\n\n${giftLevel >= 2 ? `\n**Level 1 setup:**\n• Go to **"Activate Earnings"** → buy the Level 1 activation ($${LEVELS[0].act})\n• Go to **"Buy Ad Campaigns"** → purchase the Level 1 campaign ($${LEVELS[0].camp})\n\n**Level 2 setup:**\n• Go to **"Activate Earnings"** → buy the Level 2 activation ($${LEVELS[1].act})\n• Go to **"Buy Ad Campaigns"** → purchase the Level 2 campaign ($${LEVELS[1].camp})\n\n**Start clicking!** 3 ads per day for each campaign — both run together from day one. L1 pays out ~$${LEVELS[0].payout} and L2 pays out ~$${LEVELS[1].payout} after 12 days.` : `\n4. Go to **"Activate Earnings"** → buy the Level 1 activation ($${LEVELS[0].act}) if you don't already have it\n5. Go to **"Buy Ad Campaigns"** → purchase the Level 1 campaign ($${LEVELS[0].camp})\n6. Start clicking! ${LEVELS[0].clicks} ads per day for 12 days — the campaign pays out ~$${LEVELS[0].payout} after`}\n\n**What to do with that first payout:**\n\n${firstPayoutGuidance}\n\nFrom there, you follow the roadmap below — the system feeds itself, no new money needed.`;
|
||
}
|
||
|
||
let rawPlan = alreadyJoined
|
||
? `📋 Your ClickBaitPays Plan — Full Roadmap\n\nSo what's ClickBaitPays? It's an ad platform where you run small ad campaigns, click a few ads each day, and every ~19 days you get paid more than the campaign cost. You reinvest those payouts into bigger campaigns and scale up. It's simple, takes a few minutes a day, and you can do it from your phone.\n\nHere's a calculator I put together so you can play with the numbers yourself: https://cbp-calculator.saasy.top?ref=${refUser}\n\nCome back to that link anytime — it'll walk you through what's possible and the best plan forward as you grow.\n\n${giftCost > 0 ? `${pifSteps}` : ''}\n\nYour full roadmap to $3,960/month:\n\n${phases.filter(k => k !== '3xL7').map((k, i) => {
|
||
const p = HYBRIDS[k];
|
||
const pocketTotal = (p.profit * p.cycles).toFixed(2);
|
||
const availableAfterPocket = Math.round(p.profit * p.cycles * 100 + p.reinvest * 100) / 100;
|
||
const nextK = phases[phases.indexOf(k) + 1];
|
||
const nextReinvest = nextK && nextK !== '3xL7' ? HYBRIDS[nextK].reinvest : 0;
|
||
let unlockText = '';
|
||
if (nextK && nextK !== '3xL7' && availableAfterPocket >= nextReinvest) {
|
||
unlockText = `After ${p.cycles} cycles you have enough saved to unlock the next level, plus ~$${pocketTotal} pocketed along the way.`;
|
||
} else if (nextK && nextK !== '3xL7') {
|
||
const shortfall = Math.round((nextReinvest - availableAfterPocket) * 100) / 100;
|
||
unlockText = `After ${p.cycles} cycles you've pocketed ~$${pocketTotal}, but you'll need about $${shortfall.toFixed(2)} more to unlock the next level ($${nextReinvest}) — skip pocketing for one cycle to cover the gap.`;
|
||
} else {
|
||
unlockText = `After ${p.cycles} cycles you've pocketed ~$${pocketTotal} along the way.`;
|
||
}
|
||
return `**Phase ${i+1}: ${p.label}**\n${p.cycles} cycles, ~${p.months} months — $${p.payout.toFixed(2)}/cycle payout\n\nYou can play this phase two ways:\n\n🔹 **Pocket mode** — take the ~$${p.profit.toFixed(2)} profit each cycle as spending money (that's your balance after CBP's built-in fee, no extra charge if you keep it in your account to spend later). ${unlockText} Total time: ~${p.months} months. *(If you withdraw to a crypto wallet, CBP adds a 10% fee on the withdrawal amount.)*\n\n🔸 **Accelerate mode** — reinvest every penny instead of pocketing it. You reach the next level faster because nothing comes off the top. Total time is shorter, but you pocket nothing along the way.`;
|
||
}).join('\n\n')}\n\n**Phase ${phases.filter(k => k !== '3xL7').length+1}: 3× L7 Endgame** 🎯\nAll three L7 campaigns running at once\n$9,720.00/cycle payout → ~$3,960.00/month passive\nThis is the finish line\n\n${selfCost > 0 ? `**Your total self-fund: $${selfCost}**${selfCost > giftCost ? ` (you cover $${(selfCost - giftCost).toLocaleString()} after sponsor's gift)` : ''}` : ''}\n\nThe choice is yours — pocket spending money along the way, or reinvest everything to get to the endgame faster. Either way, no new money needed after the start. Just run the cycles, stack the profits, and level up.\n\nAs a side note — I also earn 10% of everything you get paid through this system, so eventually I'll get my gift back. But that's not why I'm doing this. I genuinely just want to pay it forward and help you get started. You win, I win — we both win together.\n\nJoin the sponsor community on Telegram to connect with other members and get help: https://t.me/+mzXTku1wR7pkODBh\n\nEstimated time to 3× L7 endgame: ~${totalMonths} months\n\nQuick Stats\n• Monthly at 3× L7: ~$3,960/mo passive\n• Each campaign cycle: 19 days\n• Min daily clicks: 3-20 (depending on level)\n• Reward per ad click: $0.48 - $13.50\n\nYour Referral Link\n${refLink}\n\nGood luck — the system works if you work the system. 💪`
|
||
: `📋 Your ClickBaitPays Plan\n\nSo what's ClickBaitPays? It's an ad platform where you run small ad campaigns, click a few ads each day, and every ~19 days you get paid more than the campaign cost. You reinvest those payouts into bigger campaigns and scale up. It's simple, takes a few minutes a day, and you can do it from your phone.\n\nHere's a calculator I put together so you can play with the numbers yourself: https://cbp-calculator.saasy.top?ref=${refUser}\n\nAfter you sign up, come back to that link — it'll walk you through what's possible and the best plan forward as you grow.\n\n${giftCost > 0 ? `With me as your sponsor, I'm covering **$${giftCost}** to get you started through Level ${giftLevel} (L${giftLevel === 1 ? '1 only' : `1-L${giftLevel}`}). You owe nothing for this — it's funded up front, and you keep 100% of your earnings.` : `I haven't pre-funded any levels on my end — you'll be building entirely on your own using the link below.`}\n\n${giftCost > 0 ? pifSteps : ''}\n\nYour full roadmap to $3,960/month:\n\n${phases.filter(k => k !== '3xL7').map((k, i) => {
|
||
const p = HYBRIDS[k];
|
||
const pocketTotal = (p.profit * p.cycles).toFixed(2);
|
||
const availableAfterPocket = Math.round(p.profit * p.cycles * 100 + p.reinvest * 100) / 100;
|
||
const nextK = phases[phases.indexOf(k) + 1];
|
||
const nextReinvest = nextK && nextK !== '3xL7' ? HYBRIDS[nextK].reinvest : 0;
|
||
let unlockText = '';
|
||
if (nextK && nextK !== '3xL7' && availableAfterPocket >= nextReinvest) {
|
||
unlockText = `After ${p.cycles} cycles you have enough saved to unlock the next level, plus ~$${pocketTotal} pocketed along the way.`;
|
||
} else if (nextK && nextK !== '3xL7') {
|
||
const shortfall = Math.round((nextReinvest - availableAfterPocket) * 100) / 100;
|
||
unlockText = `After ${p.cycles} cycles you've pocketed ~$${pocketTotal}, but you'll need about $${shortfall.toFixed(2)} more to unlock the next level ($${nextReinvest}) — skip pocketing for one cycle to cover the gap.`;
|
||
} else {
|
||
unlockText = `After ${p.cycles} cycles you've pocketed ~$${pocketTotal} along the way.`;
|
||
}
|
||
return `**Phase ${i+1}: ${p.label}**\n${p.cycles} cycles, ~${p.months} months — $${p.payout.toFixed(2)}/cycle payout\n\nYou can play this phase two ways:\n\n🔹 **Pocket mode** — take the ~$${p.profit.toFixed(2)} profit each cycle as spending money (that's your balance after CBP's built-in fee, no extra charge if you keep it in your account to spend later). ${unlockText} Total time: ~${p.months} months. *(If you withdraw to a crypto wallet, CBP adds a 10% fee on the withdrawal amount.)*\n\n🔸 **Accelerate mode** — reinvest every penny instead of pocketing it. You reach the next level faster because nothing comes off the top. Total time is shorter, but you pocket nothing along the way.`;
|
||
}).join('\n\n')}\n\n**Phase ${phases.filter(k => k !== '3xL7').length+1}: 3× L7 Endgame** 🎯\nAll three L7 campaigns running at once\n$9,720.00/cycle payout → ~$3,960.00/month passive\nThis is the finish line\n\n${selfCost > 0 ? `**Your total self-fund: $${selfCost}**${selfCost > giftCost ? ` (you cover $${(selfCost - giftCost).toLocaleString()} after sponsor's gift)` : ''}` : ''}\n\nThe choice is yours — pocket spending money along the way, or reinvest everything to get to the endgame faster. Either way, no new money needed after the start. Just run the cycles, stack the profits, and level up.\n\nAs a side note — I also earn 10% of everything you get paid through this system, so eventually I'll get my gift back. But that's not why I'm doing this. I genuinely just want to pay it forward and help you get started. You win, I win — we both win together.\n\nJoin the sponsor community on Telegram to connect with other members and get help: https://t.me/+mzXTku1wR7pkODBh\n\nEstimated time to 3× L7 endgame: ~${totalMonths} months\n\nQuick Stats\n• Monthly at 3× L7: ~$3,960/mo passive\n• Each campaign cycle: 19 days\n• Min daily clicks: 3-20 (depending on level)\n• Reward per ad click: $0.48 - $13.50\n\nYour Referral Link\n${refLink}\n\nUse this link to sign up — it's how your sponsor tracks your progress. If you have questions, reach out to them directly.\n\nGood luck — the system works if you work the system. 💪`;
|
||
|
||
document.getElementById('planOutput').innerHTML = rawPlan.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
|
||
document.getElementById('planOutput').dataset.rawPlan = rawPlan;
|
||
}
|
||
|
||
function copyPlan() {
|
||
const el = document.getElementById('planOutput');
|
||
const rawPlan = el.dataset.rawPlan || el.textContent;
|
||
navigator.clipboard.writeText(rawPlan).then(() => {
|
||
const btn = document.getElementById('copyPlanBtn');
|
||
btn.textContent = '✅ Copied!';
|
||
btn.classList.add('copied');
|
||
setTimeout(() => { btn.textContent = '📄 Copy Plan'; btn.classList.remove('copied'); }, 2000);
|
||
}).catch(() => {
|
||
const range = document.createRange();
|
||
range.selectNodeContents(el);
|
||
const sel = window.getSelection();
|
||
sel.removeAllRanges();
|
||
sel.addRange(range);
|
||
});
|
||
}
|
||
|
||
['numPeople','giftLevel','selfFundLevel','showReferral','alreadyJoined'].forEach(id => {
|
||
const el = document.getElementById(id);
|
||
el.addEventListener('input', generatePlan);
|
||
el.addEventListener('change', generatePlan);
|
||
});
|
||
|
||
setTimeout(generatePlan, 100);
|
||
|
||
// ─── ROI Dashboard ──────────────────────────────────────
|
||
function updateROI() {
|
||
const deposits = parseFloat(document.getElementById('roiDeposits').value) || 0;
|
||
const earned = parseFloat(document.getElementById('roiTotalEarned').value) || 0;
|
||
const phase = document.getElementById('roiPhase').value;
|
||
const cyclesDone = parseInt(document.getElementById('roiCyclesDone').value) || 0;
|
||
|
||
// If no inputs provided, show placeholder state
|
||
const hasInput = document.getElementById('roiDeposits').value.trim() !== '' || document.getElementById('roiTotalEarned').value.trim() !== '';
|
||
|
||
if (!hasInput) {
|
||
document.getElementById('roiStatROI').querySelector('.roi-stat-value').textContent = '—';
|
||
document.getElementById('roiStatRecouped').querySelector('.roi-stat-value').textContent = '—';
|
||
document.getElementById('roiStatRemaining').querySelector('.roi-stat-value').textContent = '—';
|
||
document.getElementById('roiBarROI').style.width = '0%';
|
||
document.getElementById('roiStatPhase').querySelector('.roi-stat-value').textContent = '—';
|
||
document.getElementById('roiBarPhase').style.width = '0%';
|
||
document.querySelectorAll('.roi-ladder-step').forEach(el => el.classList.remove('active', 'passed'));
|
||
document.getElementById('roiMilestones').innerHTML = '<div style="color:var(--text-muted);font-size:0.85rem;padding:10px 0;">Enter your numbers above to see your progress 🚀</div>';
|
||
saveROIData(deposits, earned, phase, cyclesDone);
|
||
return;
|
||
}
|
||
|
||
// Phase data: [cycles_this_phase, cycles_needed_for_next, profit_per_cycle, next_phase_label]
|
||
const PHASE_DATA = {
|
||
l1: { cycles: 9, profitPer: 1.72, nextLabel: 'L2+L1', needsCapital: 90 },
|
||
l2l1: { cycles: 4, profitPer: 11.89, nextLabel: 'L3+L1', needsCapital: 263 },
|
||
l3l1: { cycles: 4, profitPer: 21.16, nextLabel: 'L4 Only', needsCapital: 450 },
|
||
l4: { cycles: 5, profitPer: 58.32, nextLabel: 'L5 Only', needsCapital: 660 },
|
||
l4l3: { cycles: 5, profitPer: 133.20, nextLabel: 'L5+L3', needsCapital: 660 },
|
||
l5: { cycles: 4, profitPer: 116.64, nextLabel: 'L6 Only', needsCapital: 1320 },
|
||
l5l3: { cycles: 3, profitPer: 222.00, nextLabel: 'L6+L3', needsCapital: 1320 },
|
||
l6: { cycles: 4, profitPer: 155.52, nextLabel: 'L7 Solo', needsCapital: 2640 },
|
||
l6l3: { cycles: 3, profitPer: 399.60, nextLabel: 'L7 Solo', needsCapital: 2640 },
|
||
l7solo: { cycles: 7, profitPer: 840.00, nextLabel: '3× L7 Endgame', needsCapital: 7200 },
|
||
l7x3: { cycles: 999, profitPer: 2520.00, nextLabel: null, needsCapital: 0 },
|
||
};
|
||
|
||
// ROI stats — no cap, show over 100% when earned > deposited
|
||
const roiPct = deposits > 0 ? (earned / deposits) * 100 : 0;
|
||
const recouped = Math.min(earned, deposits);
|
||
const remaining = Math.max(deposits - earned, 0);
|
||
|
||
document.getElementById('roiStatROI').querySelector('.roi-stat-value').textContent = roiPct.toFixed(1) + '%';
|
||
// Green when past breakeven
|
||
const roiEl = document.getElementById('roiStatROI').querySelector('.roi-stat-value');
|
||
if (roiPct >= 100) {
|
||
roiEl.style.color = '#22c55e';
|
||
} else {
|
||
roiEl.style.color = '';
|
||
}
|
||
document.getElementById('roiStatRecouped').querySelector('.roi-stat-value').textContent = '$' + recouped.toFixed(2);
|
||
document.getElementById('roiStatRemaining').querySelector('.roi-stat-value').textContent = remaining > 0 ? '$' + remaining.toFixed(2) : '+$' + Math.abs(remaining).toFixed(2);
|
||
document.getElementById('roiBarROI').style.width = Math.min(roiPct, 100) + '%';
|
||
// Update label to reflect profit mode
|
||
document.getElementById('roiStatRemaining').querySelector('.roi-stat-label').textContent = remaining > 0 ? 'To Breakeven' : 'Pure Profit';
|
||
|
||
// Phase progress
|
||
const pd = PHASE_DATA[phase];
|
||
let phasePct = 0;
|
||
let phaseLabel = '';
|
||
if (phase === 'l7x3') {
|
||
phasePct = 100;
|
||
phaseLabel = '🏆 Endgame Reached';
|
||
} else {
|
||
phasePct = Math.min((cyclesDone / pd.cycles) * 100, 100);
|
||
phaseLabel = `Cycle ${cyclesDone} of ${pd.cycles}`;
|
||
}
|
||
document.getElementById('roiStatPhase').querySelector('.roi-stat-value').textContent = phaseLabel;
|
||
document.getElementById('roiBarPhase').style.width = phasePct + '%';
|
||
|
||
// Ladder visualization
|
||
const ladderOrder = ['l1','l2l1','l3l1','l4','l4l3','l5','l5l3','l6','l6l3','l7solo','l7x3'];
|
||
const phaseIndex = ladderOrder.indexOf(phase);
|
||
// Location badge
|
||
const phaseNames = {
|
||
l1:'L1 Only', l2l1:'L2 + L1', l3l1:'L3 + L1', l4:'L4 Only',
|
||
l4l3:'L4 + L3 Hybrid', l5:'L5 Only', l5l3:'L5 + L3 Hybrid',
|
||
l6:'L6 Only', l6l3:'L6 + L3 Hybrid', l7solo:'L7 Solo', l7x3:'3× L7 Endgame'
|
||
};
|
||
document.getElementById('roiHerePhase').textContent = phase && phaseNames[phase] ? phaseNames[phase] : '—';
|
||
|
||
document.querySelectorAll('.roi-ladder-step').forEach(el => {
|
||
el.classList.remove('active', 'passed');
|
||
const idx = ladderOrder.indexOf(el.dataset.phase);
|
||
if (idx < phaseIndex) el.classList.add('passed');
|
||
else if (idx === phaseIndex) el.classList.add('active');
|
||
});
|
||
|
||
// Milestones
|
||
const milestones = [];
|
||
if (earned >= 112.50) milestones.push({ icon: '✅', label: '25% ROI Recouped', sub: 'Quarter of your capital back' });
|
||
if (earned >= 225) milestones.push({ icon: '✅', label: '50% ROI Recouped', sub: 'Half your capital is back' });
|
||
if (earned >= 337.50) milestones.push({ icon: '✅', label: '75% ROI Recouped', sub: 'Three quarters there' });
|
||
if (earned >= deposits) milestones.push({ icon: '💰', label: '100% ROI — Breakeven!', sub: 'Everything from here is pure profit' });
|
||
|
||
if (phase === 'l5l3' || phaseIndex > ladderOrder.indexOf('l5l3'))
|
||
milestones.push({ icon: '🏅', label: 'L5 Active', sub: 'You reached the serious scaling tier' });
|
||
if (phase === 'l6l3' || phaseIndex > ladderOrder.indexOf('l6l3'))
|
||
milestones.push({ icon: '🏅', label: 'L6 Active', sub: 'Double-digit clicks/day territory' });
|
||
if (phase === 'l7solo' || phaseIndex > ladderOrder.indexOf('l7solo'))
|
||
milestones.push({ icon: '🌟', label: 'L7 — The Big One', sub: '$840/cycle profit, $270/day clicks' });
|
||
|
||
if (phase === 'l7x3')
|
||
milestones.push({ icon: '🏆', label: '3× L7 Endgame', sub: '$2,520/cycle profit — the machine is running' });
|
||
|
||
// Add next phase preview
|
||
if (pd.nextLabel && cyclesDone >= pd.cycles) {
|
||
milestones.push({
|
||
icon: '🚀',
|
||
label: `Ready for ${pd.nextLabel}`,
|
||
sub: `You need ~$${pd.needsCapital.toLocaleString()} in available funds to start`
|
||
});
|
||
}
|
||
|
||
// Show unearned milestones as dimmed
|
||
const allMilestones = [
|
||
{ icon: '🔘', label: '25% ROI Recouped', sub: '$112.50', earned: earned >= 112.50 },
|
||
{ icon: '🔘', label: '50% ROI Recouped', sub: '$225.00', earned: earned >= 225 },
|
||
{ icon: '🔘', label: '75% ROI Recouped', sub: '$337.50', earned: earned >= 337.50 },
|
||
{ icon: '💰', label: '100% ROI — Breakeven', sub: `$${deposits.toFixed(2)}`, earned: earned >= deposits },
|
||
];
|
||
// Add over-100% profit milestone if they're past breakeven
|
||
if (roiPct > 100) {
|
||
allMilestones.push({ icon: '📈', label: `Profit: ${(roiPct - 100).toFixed(1)}% Beyond Breakeven`, sub: `+$${(earned - deposits).toFixed(2)} pure profit`, earned: true });
|
||
}
|
||
|
||
if (phase === 'l7x3') {
|
||
allMilestones.push({ icon: '🏆', label: '3× L7 Endgame Reached', sub: '$2,520/cycle passive', earned: true });
|
||
} else if (pd.nextLabel) {
|
||
allMilestones.push({ icon: '🚀', label: `Ready for ${pd.nextLabel}`, sub: `Need ~$${pd.needsCapital.toLocaleString()}`, earned: cyclesDone >= pd.cycles });
|
||
}
|
||
|
||
document.getElementById('roiMilestones').innerHTML = allMilestones.map(m => `
|
||
<div class="roi-milestone-item${m.earned ? ' roi-milestone-checked' : ''}" style="${m.earned ? '' : 'opacity:0.5;'}">
|
||
<span class="roi-milestone-check" style="font-size:1.1rem;flex-shrink:0;">${m.icon}</span>
|
||
<div class="roi-milestone-info">
|
||
<div class="label">${m.label}</div>
|
||
<div class="sub">${m.sub}</div>
|
||
</div>
|
||
</div>
|
||
`).join('');
|
||
|
||
// Save to localStorage
|
||
saveROIData(deposits, earned, phase, cyclesDone);
|
||
}
|
||
|
||
// ─── localStorage persistence ──────────────────────────
|
||
function getROIStorageKey() {
|
||
const ref = getRefFromURL() || 'cryptoteambuild';
|
||
return 'cbp_roi_' + ref;
|
||
}
|
||
|
||
function saveROIData(deposits, earned, phase, cyclesDone) {
|
||
const key = getROIStorageKey();
|
||
const data = { deposits, earned, phase, cyclesDone };
|
||
try { localStorage.setItem(key, JSON.stringify(data)); } catch(e) {}
|
||
}
|
||
|
||
function loadROIData() {
|
||
const key = getROIStorageKey();
|
||
try {
|
||
const raw = localStorage.getItem(key);
|
||
if (raw) return JSON.parse(raw);
|
||
} catch(e) {}
|
||
return null;
|
||
}
|
||
|
||
// Wire up ROI inputs
|
||
['roiDeposits','roiTotalEarned','roiPhase','roiCyclesDone'].forEach(id => {
|
||
const el = document.getElementById(id);
|
||
el.addEventListener('input', updateROI);
|
||
el.addEventListener('change', updateROI);
|
||
});
|
||
|
||
// Load saved data on page load
|
||
const saved = loadROIData();
|
||
if (saved) {
|
||
document.getElementById('roiDeposits').value = saved.deposits || '';
|
||
document.getElementById('roiTotalEarned').value = saved.earned || '';
|
||
if (saved.phase) document.getElementById('roiPhase').value = saved.phase;
|
||
document.getElementById('roiCyclesDone').value = saved.cyclesDone !== undefined ? saved.cyclesDone : '';
|
||
}
|
||
|
||
// Initial render on page load (delayed to ensure DOM is ready)
|
||
setTimeout(updateROI, 150);
|
||
</script>
|
||
</body>
|
||
</html> |