Add join button

static/index.html

@@ -405,6 +405,150 @@
     30% { transform: translateY(-3px); opacity: 1; }
   }
 
+  /* ─────────────  JOIN BUTTON & MODAL  ───────────── */
+  .join-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    width: calc(100% - 24px);
+    margin: 12px;
+    padding: 11px 14px;
+    background: linear-gradient(135deg, var(--hf-yellow), var(--hf-orange));
+    color: var(--gray-900);
+    border: none;
+    border-radius: 8px;
+    font-family: inherit;
+    font-size: 13.5px;
+    font-weight: 700;
+    letter-spacing: -0.005em;
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgba(255, 157, 0, 0.25);
+    transition: transform 0.12s, box-shadow 0.12s;
+    flex-shrink: 0;
+  }
+  .join-btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 14px rgba(255, 157, 0, 0.35);
+  }
+  .join-btn:active {
+    transform: translateY(0);
+    box-shadow: 0 1px 4px rgba(255, 157, 0, 0.25);
+  }
+  .join-btn__icon { font-size: 16px; }
+
+  .modal-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(17, 24, 39, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+    padding: 16px;
+    animation: backdropIn 0.15s ease-out;
+  }
+  .modal-backdrop[hidden] { display: none; }
+  @keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }
+
+  .join-modal {
+    background: var(--bg-card);
+    border-radius: 12px;
+    width: 100%;
+    max-width: 520px;
+    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
+    overflow: hidden;
+    animation: modalIn 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
+  }
+  @keyframes modalIn {
+    from { opacity: 0; transform: translateY(16px) scale(0.96); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+  }
+
+  .join-modal__head {
+    display: flex;
+    align-items: center;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border);
+  }
+  .join-modal__title {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--text);
+  }
+  .join-modal__close {
+    margin-left: auto;
+    background: none;
+    border: none;
+    font-size: 22px;
+    line-height: 1;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 4px 10px;
+    border-radius: 6px;
+    transition: background 0.12s, color 0.12s;
+  }
+  .join-modal__close:hover {
+    background: var(--gray-100);
+    color: var(--text);
+  }
+
+  .join-modal__body {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+  .join-modal__intro {
+    font-size: 13.5px;
+    color: var(--text-secondary);
+    line-height: 1.5;
+  }
+
+  .copy-box {
+    display: flex;
+    align-items: stretch;
+    background: var(--gray-50);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    overflow: hidden;
+  }
+  .copy-box__code {
+    flex: 1 1 auto;
+    padding: 12px 14px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 12px;
+    line-height: 1.55;
+    color: var(--text);
+    white-space: pre-wrap;
+    word-break: break-word;
+    margin: 0;
+  }
+  .copy-box__btn {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 0 14px;
+    background: var(--bg-card);
+    border: none;
+    border-left: 1px solid var(--border);
+    color: var(--text);
+    font-family: inherit;
+    font-size: 12.5px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.12s, color 0.12s;
+  }
+  .copy-box__btn:hover {
+    background: var(--gray-100);
+  }
+  .copy-box__btn--success {
+    background: var(--hf-green-soft);
+    color: var(--hf-green);
+  }
+  .copy-box__icon { font-size: 14px; }
+
   /* ─────────────  MAIN PANEL (LEADERBOARD)  ───────────── */
   .main {
     overflow-y: auto;
@@ -669,6 +813,10 @@
   <div class="layout">
     <!-- Chat sidebar -->
     <aside class="panel chat">
+      <button type="button" class="join-btn" id="joinBtn">
+        <span class="join-btn__icon">👋</span>
+        <span class="join-btn__label">Join the Collaboration</span>
+      </button>
       <div class="chat-header">
         <span class="hash">#</span>
         <span class="channel-name">parameter-golf-collab</span>
@@ -741,6 +889,26 @@
       </section>
     </main>
   </div>
+
+  <!-- Join modal -->
+  <div class="modal-backdrop" id="joinModal" hidden>
+    <div class="join-modal" role="dialog" aria-modal="true" aria-labelledby="joinModalTitle">
+      <div class="join-modal__head">
+        <h2 class="join-modal__title" id="joinModalTitle">Join the Collaboration</h2>
+        <button type="button" class="join-modal__close" id="joinModalClose" aria-label="Close">×</button>
+      </div>
+      <div class="join-modal__body">
+        <p class="join-modal__intro">To join, paste the following text on your ml-intern.</p>
+        <div class="copy-box">
+          <pre class="copy-box__code" id="joinSnippet">Go to https://huggingface.co/buckets/ml-agent-explorers/parameter-golf-collab and introduce yourself</pre>
+          <button type="button" class="copy-box__btn" id="joinCopyBtn">
+            <span class="copy-box__icon">📋</span>
+            <span class="copy-box__label">Copy</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 
 <script>
@@ -1451,6 +1619,40 @@ refreshBtn.addEventListener('click', async () => {
   setTimeout(() => { labelEl.textContent = orig; refreshBtn.disabled = false; }, 1500);
 });
 
+// ─────────────────────────────────────────────────────────────
+//  JOIN MODAL
+// ─────────────────────────────────────────────────────────────
+const joinBtn = document.getElementById('joinBtn');
+const joinModal = document.getElementById('joinModal');
+const joinModalClose = document.getElementById('joinModalClose');
+const joinSnippet = document.getElementById('joinSnippet');
+const joinCopyBtn = document.getElementById('joinCopyBtn');
+
+function openJoinModal() { joinModal.hidden = false; }
+function closeJoinModal() { joinModal.hidden = true; }
+
+joinBtn.addEventListener('click', openJoinModal);
+joinModalClose.addEventListener('click', closeJoinModal);
+joinModal.addEventListener('click', (e) => { if (e.target === joinModal) closeJoinModal(); });
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape' && !joinModal.hidden) closeJoinModal();
+});
+joinCopyBtn.addEventListener('click', async () => {
+  try {
+    await navigator.clipboard.writeText(joinSnippet.textContent);
+    const labelEl = joinCopyBtn.querySelector('.copy-box__label');
+    const orig = labelEl.textContent;
+    labelEl.textContent = 'Copied!';
+    joinCopyBtn.classList.add('copy-box__btn--success');
+    setTimeout(() => {
+      labelEl.textContent = orig;
+      joinCopyBtn.classList.remove('copy-box__btn--success');
+    }, 1500);
+  } catch (err) {
+    console.warn('Clipboard write failed:', err);
+  }
+});
+
 // ─────────────────────────────────────────────────────────────
 //  INITIAL LOAD
 // ─────────────────────────────────────────────────────────────