URL-param based ref system: share link via ?ref=username

index.html

@@ -302,27 +302,40 @@
     #chartContainer { height: 240px; }
   }
 
-  /* Referral link input */
+  /* Shared link row */
-  .ref-link-row {
+  .shared-link-row {
     display: flex;
-    align-items: center;
     gap: 4px;
   }
-  .ref-link-base {
+  .shared-link-row input {
-    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-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;
+  }
+  .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;
   }
 
   /* Shareable plan section */
@@ -415,18 +428,19 @@
     <label for="showReferral">Show referral earnings (my 10%)</label>
   </div>
   <div class="control-group">
-    <label>Your referral link (for shareable plan)</label>
+    <label>Share this link (sends the plan as-is)</label>
-    <div class="ref-link-row">
+    <div class="shared-link-row">
-      <span class="ref-link-base">https://clickbaitpays.me/?ref=</span>
+      <input type="text" id="sharedLink" readonly>
-      <input type="text" id="refUsername" value="cryptoteambuild" placeholder="your username">
+      <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>
 </div>
 
-<div id="shareablePlan" class="plan-section" style="display:none">
+<div id="shareablePlan" class="plan-section">
   <div class="plan-header">
-    <span>📋 Shareable Plan for Referral</span>
+    <span>📋 Referral Plan Preview</span>
-    <button class="copy-btn" id="copyPlanBtn" onclick="copyPlan()">📄 Copy</button>
+    <button class="copy-btn" id="copyPlanBtn" onclick="copyPlan()">📄 Copy Plan</button>
   </div>
   <pre id="planOutput" class="plan-output"></pre>
 </div>
@@ -1058,12 +1072,46 @@ document.querySelectorAll('.tab-btn').forEach(btn => {
 
 updateAll();
 
+// ─── URL Param Helpers ──────────────────────────────────────────
+function getRefFromURL() {
+  const p = new URLSearchParams(window.location.search);
+  return p.get('ref') || '';
+}
+
+// ─── Shared Link Builder ────────────────────────────────────────
+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';
+  document.getElementById('sharedLink').value = getShareUrl(refUser);
+}
+
+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);
+  });
+}
+
 // ─── 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 refUser = getRefFromURL() || 'cryptoteambuild';
   const refLink = `https://clickbaitpays.me/?ref=${refUser}`;
   const giftCost = getLevelCost(giftLevel);
   const selfCost = getLevelCost(selfLevel);
@@ -1071,6 +1119,8 @@ function generatePlan() {
   const phases = getPhaseSequence(effective);
   const totalMonths = estimateMonths(phases);
 
+  updateSharedLinkBox();
+
   // What sponsor covers
   let giftSection = '';
   if (giftCost > 0) {
@@ -1144,7 +1194,6 @@ Use this link to sign up — it's how your sponsor tracks your progress. If you
 Good luck — the system works if you work the system. 💪`;
 
   document.getElementById('planOutput').textContent = plan;
-  document.getElementById('shareablePlan').style.display = 'block';
 }
 
 function copyPlan() {
@@ -1154,9 +1203,8 @@ function copyPlan() {
     const btn = document.getElementById('copyPlanBtn');
     btn.textContent = '✅ Copied!';
     btn.classList.add('copied');
-    setTimeout(() => { btn.textContent = '📄 Copy'; btn.classList.remove('copied'); }, 2000);
+    setTimeout(() => { btn.textContent = '📄 Copy Plan'; btn.classList.remove('copied'); }, 2000);
   }).catch(() => {
-    // Fallback: select all
     const range = document.createRange();
     range.selectNodeContents(el);
     const sel = window.getSelection();
@@ -1165,16 +1213,14 @@ function copyPlan() {
   });
 }
 
-// Wire ref username listener
+// Regenerate plan when controls change
-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
+// Generate on initial load
 setTimeout(generatePlan, 100);
 </script>
 </body>