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; }
|
thead th, tbody td { padding: 8px 10px; }
|
||||||
#chartContainer { height: 240px; }
|
#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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -348,6 +414,21 @@
|
|||||||
<input type="checkbox" id="showReferral" checked>
|
<input type="checkbox" id="showReferral" checked>
|
||||||
<label for="showReferral">Show referral earnings (my 10%)</label>
|
<label for="showReferral">Show referral earnings (my 10%)</label>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
<!-- Tabs -->
|
<!-- Tabs -->
|
||||||
@@ -976,6 +1057,125 @@ document.querySelectorAll('.tab-btn').forEach(btn => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
updateAll();
|
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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user