Add referral link input + shareable plan generator

2026-07-10 16:04:51 +00:00
parent 592e2d08d7
commit ddffd649b4
1 changed files with 200 additions and 0 deletions
@@ -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>