marty/cbp-calculator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix checkbox layout, add Sponsor Guide tab + TG community links

Browse Source 
- Restructured checkbox row into clean flex layout (works on desktop & mobile)
- Removed duplicate checkbox instances from controls grid
- Added Telegram group link (t.me/+mzXTku1wR7pkODBh) in checkbox row, footer, and footer
- Updated PIF plan text: users must purchase the campaign themselves after transfer
- Added TG community link to all 3 plan templates (family, friend, post-join-PIF)
- New 'Sponsor Guide' tab: explains gift vs self-fund, already-joined, sharing, TG community, quick tips
- TG link now appears in: checkbox row button, plan text, footer, and sponsor guide tab
- Mobile responsive: checkbox-row gap/padding media query
This commit is contained in:
Marty Bostick
2026-07-11 12:57:50 +00:00
parent 3e35eb10ef
commit 3d8b8ade7c
1 changed files with 107 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+107 -10
View File
@@ -155,6 +155,7 @@
text-transform: none;
letter-spacing: 0;
color: var(--text);
white-space: nowrap;
}
.checkbox-group input[type="checkbox"] {
width: 16px;
@@ -162,6 +163,34 @@
accent-color: var(--accent);
}
/* Checkbox row (inline toggles) */
.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: 18px;
}
.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 */
.tabs {
display: flex;
@@ -333,6 +362,7 @@
body { padding: 10px; }
.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; }
@@ -470,15 +500,23 @@
<option value="5">Level 5 ($1,253)</option>
</select>
</div>
<div class="checkbox-group">
<input type="checkbox" id="showReferral" checked>
<label for="showReferral">Show referral earnings (my 10%)</label>
<!-- end controls grid -->
<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="checkbox-group">
<input type="checkbox" id="alreadyJoined">
<label for="alreadyJoined">Already joined (skip signup language)</label>
</div>
<div class="control-group">
<div class="control-group" style="grid-column: 1 / -1;">
<label>Share this link (sends the plan as-is)</label>
<div class="shared-link-row">
<input type="text" id="sharedLink" readonly>
@@ -506,6 +544,7 @@
<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>
</div>
<!-- Tab: Overview -->
@@ -635,9 +674,63 @@
</div>
</div>
<!-- Tab: Sponsor Guide -->
<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 style="text-align:center;padding:24px 0 10px;color:var(--text-muted);font-size:0.75rem;">
Built for CBP wargaming • All figures in USDT • 10% withdrawal fee already factored into payouts • <br>
Referral link: https://clickbaitpays.me/?ref=cryptoteambuild
Referral link: https://clickbaitpays.me/?ref=cryptoteambuild • <a href="https://t.me/+mzXTku1wR7pkODBh" target="_blank" rel="noopener" style="color:var(--accent);">💬 Sponsor Community</a>
</div>
</div>
@@ -1217,7 +1310,7 @@ Here's a calculator I put together so you can play with the numbers yourself: ht
Come back to that link anytime — it'll walk you through what's possible and the best plan forward as you grow.
${giftCost > 0 ? `Since you've already joined, I went back and funded your **Level ${giftLevel}** ($${giftCost}) — it's already set up on your account. You owe nothing for this.` : ''}
${giftCost > 0 ? `Since you've already joined, I transferred the funds to your account to cover **Level ${giftLevel}** ($${giftCost}) — it's sitting in your balance now. **Next step: you just need to go in and purchase the campaign yourself** so it starts running. Think of it like I loaded the gift card — you just gotta swipe it.` : ''}
Your full roadmap to $3,960/month:
@@ -1243,6 +1336,8 @@ ${selfCost > 0 ? `**Your total self-fund: $${selfCost}**${selfCost > giftCost ?
As 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.
Join the sponsor community on Telegram to connect with other members and get help: https://t.me/+mzXTku1wR7pkODBh
Estimated time to 3× L7 endgame: ~${totalMonths} months
Quick Stats
@@ -1289,6 +1384,8 @@ ${selfCost > 0 ? `**Your total self-fund: $${selfCost}**${selfCost > giftCost ?
As 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.
Join the sponsor community on Telegram to connect with other members and get help: https://t.me/+mzXTku1wR7pkODBh
Estimated time to 3× L7 endgame: ~${totalMonths} months
Quick Stats