Add footer connect prompt and audio

app.js

@@ -145,6 +145,41 @@ document.getElementById("copy-command").addEventListener("click", async () => {
   window.toastTimer = setTimeout(() => toast.classList.remove("show"), 1500);
 });
 
+const connectPrompt = document.getElementById("connect-prompt");
+const connectAudio = document.getElementById("connect-audio");
+const connectContinue = document.getElementById("connect-continue");
+const connectClose = document.getElementById("connect-close");
+const connectStay = document.getElementById("connect-stay");
+
+document.querySelectorAll(".connect-link").forEach((link) => {
+  link.addEventListener("click", async (event) => {
+    event.preventDefault();
+    connectContinue.href = link.href;
+    connectPrompt.hidden = false;
+    connectAudio.currentTime = 0;
+    try {
+      await connectAudio.play();
+    } catch {
+      toast.textContent = "Tap Open link when ready";
+      toast.classList.add("show");
+      clearTimeout(window.toastTimer);
+      window.toastTimer = setTimeout(() => toast.classList.remove("show"), 1500);
+    }
+  });
+});
+
+function closeConnectPrompt() {
+  connectPrompt.hidden = true;
+  connectAudio.pause();
+  connectAudio.currentTime = 0;
+}
+
+connectClose.addEventListener("click", closeConnectPrompt);
+connectStay.addEventListener("click", closeConnectPrompt);
+connectPrompt.addEventListener("click", (event) => {
+  if (event.target === connectPrompt) closeConnectPrompt();
+});
+
 window.addEventListener("resize", resize);
 resize();
 draw();

index.html

@@ -112,12 +112,25 @@
     <footer class="site-footer" aria-label="Project links">
       <p>Advanced Data Intelligence is built in theLAB orbit.</p>
       <nav>
-        <a href="https://thelabsource.com" target="_blank" rel="noreferrer">thelabsource.com</a>
-        <a href="https://advanced-data-inteliigence.com" target="_blank" rel="noreferrer">advanced-data-inteliigence.com</a>
+        <a class="connect-link" href="https://thelabsource.com" target="_blank" rel="noreferrer">thelabsource.com</a>
+        <a class="connect-link" href="https://advanced-data-inteliigence.com" target="_blank" rel="noreferrer">advanced-data-inteliigence.com</a>
       </nav>
     </footer>
   </main>
 
+  <div class="connect-prompt" id="connect-prompt" hidden>
+    <div class="connect-card" role="dialog" aria-modal="true" aria-labelledby="connect-title">
+      <button class="connect-close" id="connect-close" type="button" aria-label="Close">×</button>
+      <p class="kicker"><span></span> Connection</p>
+      <h2 id="connect-title">Hi! I'm glad you are interested in connecting. Let's connect!</h2>
+      <div class="connect-actions">
+        <a class="button primary" id="connect-continue" href="https://thelabsource.com" target="_blank" rel="noreferrer">Open link</a>
+        <button class="button" id="connect-stay" type="button">Stay here</button>
+      </div>
+    </div>
+  </div>
+
+  <audio id="connect-audio" preload="auto" src="https://serve.thelabsource.com/u/Qk8XQz.mp3"></audio>
   <div class="toast" id="toast" role="status" aria-live="polite">Copied</div>
   <script src="./app.js"></script>
 </body>

styles.css

@@ -508,6 +508,57 @@ code {
   font-weight: 700;
 }
 
+.connect-prompt {
+  position: fixed;
+  inset: 0;
+  z-index: 20;
+  display: grid;
+  place-items: center;
+  padding: 22px;
+  background: rgba(0, 0, 0, 0.62);
+  backdrop-filter: blur(18px);
+}
+
+.connect-prompt[hidden] {
+  display: none;
+}
+
+.connect-card {
+  position: relative;
+  width: min(720px, 100%);
+  padding: clamp(24px, 5vw, 46px);
+  border: 1px solid var(--line);
+  border-radius: 24px;
+  background:
+    linear-gradient(135deg, rgba(37,247,196,0.12), transparent 34%),
+    linear-gradient(315deg, rgba(245,182,74,0.12), transparent 34%),
+    rgba(8, 15, 22, 0.94);
+  box-shadow: 0 34px 140px rgba(0,0,0,0.6);
+}
+
+.connect-card h2 {
+  margin-bottom: 22px;
+  font-size: clamp(34px, 5vw, 64px);
+}
+
+.connect-close {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  width: 42px;
+  height: 42px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: rgba(255,255,255,0.04);
+  cursor: pointer;
+}
+
+.connect-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
 .toast {
   position: fixed;
   z-index: 10;