Add referral link input + shareable plan generator
This commit is contained in:
Marty Bostick
+200
@@ -301,6 +301,72 @@
|
||||
thead th, tbody td { padding: 8px 10px; }
|
||||
#chartContainer { height: 240px; }
|
||||
}
|
||||
|
||||
/* Referral link input */
|
||||
.ref-link-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.ref-link-base {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-dim);
|
||||
white-space: nowrap;
|
||||
background: var(--bg);
|
||||
padding: 6px 8px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
|
||||
border-right: none;
|
||||
font-family: monospace;
|
||||
}
|
||||
.ref-link-row input {
|
||||
flex: 1;
|
||||
border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
/* Shareable plan section */
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -348,6 +414,21 @@
|
||||
<input type="checkbox" id="showReferral" checked>
|
||||
<label for="showReferral">Show referral earnings (my 10%)</label>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label>Your referral link (for shareable plan)</label>
|
||||
<div class="ref-link-row">
|
||||
<span class="ref-link-base">https://clickbaitpays.me/?ref=</span>
|
||||
<input type="text" id="refUsername" value="cryptoteambuild" placeholder="your username">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="shareablePlan" class="plan-section" style="display:none">
|
||||
<div class="plan-header">
|
||||
<span>📋 Shareable Plan for Referral</span>
|
||||
<button class="copy-btn" id="copyPlanBtn" onclick="copyPlan()">📄 Copy</button>
|
||||
</div>
|
||||
<pre id="planOutput" class="plan-output"></pre>
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
@@ -976,6 +1057,125 @@ document.querySelectorAll('.tab-btn').forEach(btn => {
|
||||
});
|
||||
|
||||
updateAll();
|
||||
|
||||
// ─── 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 = document.getElementById('refUsername').value.trim() || 'your-username';
|
||||
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);
|
||||
|
||||
// What sponsor covers
|
||||
let giftSection = '';
|
||||
if (giftCost > 0) {
|
||||
giftSection = `## What Your Sponsor Covers
|
||||
|
||||
Your sponsor is 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.`;
|
||||
} else {
|
||||
giftSection = `## What Your Sponsor Covers
|
||||
|
||||
Your sponsor has not pre-funded any levels — you'll be building entirely on your own using the link below.`;
|
||||
}
|
||||
|
||||
// What referral needs to do
|
||||
let selfFundSection = '';
|
||||
if (selfCost > 0) {
|
||||
selfFundSection = `\n\n## What You Need to Do
|
||||
|
||||
To reach endgame (3× L7 campaigns earning ~$3,960/mo passive), you'll need to self-fund through **Level ${selfLevel}**:
|
||||
|
||||
**Your total self-fund: $${selfCost}**
|
||||
${selfCost > giftCost ? `(You cover $${(selfCost - giftCost).toLocaleString()} beyond your sponsor's gift)` : ''}
|
||||
|
||||
### Your Payouts Per Cycle
|
||||
Each ad campaign runs for ~19 days. Here's what you earn at each phase:
|
||||
|
||||
| Phase | Investment | Payout/Cycle | Net Profit |
|
||||
|-------|:-:|:-:|:-:|
|
||||
${phases.filter(k => k !== '3xL7').map(k => {
|
||||
const p = HYBRIDS[k];
|
||||
return `| ${p.label} | $${p.reinvest.toLocaleString()} | $${p.payout.toFixed(2)} | $${p.profit.toFixed(2)} |`;
|
||||
}).join('\n')}
|
||||
|
||||
**Estimated time to 3× L7 endgame: ~${totalMonths} months**
|
||||
`;
|
||||
} else {
|
||||
selfFundSection = `\n\n## What You Need to Do
|
||||
|
||||
Once you receive your gift, simply **click your ads daily** and reinvest your profits. Here's your path:
|
||||
|
||||
| Phase | Payout/Cycle | Net Profit/Cycle |
|
||||
|-------|:-:|:-:|
|
||||
${phases.filter(k => k !== '3xL7').map(k => {
|
||||
const p = HYBRIDS[k];
|
||||
return `| ${p.label} | $${p.payout.toFixed(2)} | $${p.profit.toFixed(2)} |`;
|
||||
}).join('\n')}
|
||||
|
||||
Once you've accumulated enough profit, use it to activate the next level up. Rinse and repeat until you're running 3× L7 campaigns.
|
||||
|
||||
**Estimated time to 3× L7 endgame: ~${totalMonths} months**
|
||||
`;
|
||||
}
|
||||
|
||||
const plan = `📋 Your ClickBaitPays Plan
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
${giftSection}
|
||||
${selfFundSection}
|
||||
|
||||
\`\`\`
|
||||
📊 Quick Stats
|
||||
Monthly at 3× L7: ~$3,960/mo passive
|
||||
Reward per ad click: $0.48 - $13.50
|
||||
Each campaign cycle: 19 days
|
||||
Minimum daily clicks: 3-20 (depending on level)
|
||||
\`\`\`
|
||||
|
||||
## Your Referral Link
|
||||
${refLink}
|
||||
|
||||
Use this link to sign up — it's how your sponsor tracks your progress. If you have questions, reach out to them directly.
|
||||
|
||||
Good luck — the system works if you work the system. 💪`;
|
||||
|
||||
document.getElementById('planOutput').textContent = plan;
|
||||
document.getElementById('shareablePlan').style.display = 'block';
|
||||
}
|
||||
|
||||
function copyPlan() {
|
||||
const el = document.getElementById('planOutput');
|
||||
const text = el.textContent;
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
const btn = document.getElementById('copyPlanBtn');
|
||||
btn.textContent = '✅ Copied!';
|
||||
btn.classList.add('copied');
|
||||
setTimeout(() => { btn.textContent = '📄 Copy'; btn.classList.remove('copied'); }, 2000);
|
||||
}).catch(() => {
|
||||
// Fallback: select all
|
||||
const range = document.createRange();
|
||||
range.selectNodeContents(el);
|
||||
const sel = window.getSelection();
|
||||
sel.removeAllRanges();
|
||||
sel.addRange(range);
|
||||
});
|
||||
}
|
||||
|
||||
// Wire ref username listener
|
||||
document.getElementById('refUsername').addEventListener('input', generatePlan);
|
||||
// Also regenerate plan when other controls change
|
||||
['numPeople','giftLevel','selfFundLevel','showReferral'].forEach(id => {
|
||||
const el = document.getElementById(id);
|
||||
el.addEventListener('input', generatePlan);
|
||||
el.addEventListener('change', generatePlan);
|
||||
});
|
||||
|
||||
// Generate plan on initial load
|
||||
setTimeout(generatePlan, 100);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user