joinzone.html

---
title: Join Zone
layout: page
class: header--white
permalink: /joinzone/

nav: 

---

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />

<script>
  (function () {
    const url = new URL(window.location.href);
    const codePattern = /^[A-Za-z0-9_-]{32,}$/;

    const hashValue = (url.hash || "").replace(/^#/, "").trim();
    const queryValue = (url.searchParams.get("invite") || url.searchParams.get("code") || "").trim();

    const looksLikeCode = (value) => codePattern.test(value);
    const inviteCode = looksLikeCode(queryValue) ? queryValue : (looksLikeCode(hashValue) ? hashValue : "");

    if (!inviteCode) {
      window.location.replace((url.origin + url.pathname).replace(/\/joinzone\/?$/, "/"));
      return;
    }

    // Backwards compatibility: turn /joinzone/#<code> into /joinzone/?invite=<code>
    // so the hash remains available for popups like #download-app.
    if (!looksLikeCode(queryValue) && looksLikeCode(hashValue)) {
      url.hash = "";
      url.searchParams.set("invite", inviteCode);
      history.replaceState({}, "", url.toString());
    }

    window.__joinzoneInviteCode = inviteCode;
  })();

  function CopyToClipboard(id) {
    var el = document.getElementById(id);
    var text = (el && (el.textContent || el.innerText) || "").trim();
    var copyButton = document.getElementById("cc-copy");

    function showNotification() {
      if (!copyButton) return;
      if (copyButton._restoreTimer) {
        clearTimeout(copyButton._restoreTimer);
      }
      copyButton.classList.add("is-copied");
      copyButton.innerHTML = '<span class="joinzone__copied-text" aria-live="polite">Copied!</span>';
      copyButton._restoreTimer = setTimeout(function () {
        copyButton.classList.remove("is-copied");
        copyButton.innerHTML = '<span class="material-symbols-outlined" aria-hidden="true">content_copy</span>';
      }, 2000);
    }

    function legacyCopy(value) {
      var tempInput = document.createElement("textarea");
      tempInput.value = value;
      tempInput.setAttribute("readonly", "");
      tempInput.style.position = "fixed";
      tempInput.style.top = "0";
      tempInput.style.left = "0";
      tempInput.style.opacity = "0";
      document.body.appendChild(tempInput);
      tempInput.select();
      try {
        document.execCommand("copy");
        showNotification();
      } catch (err) {
        console.error("Could not copy text: ", err);
      }
      document.body.removeChild(tempInput);
    }

    if (!text) return;

    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(text).then(showNotification, function (err) {
        console.error("Could not copy text: ", err);
        legacyCopy(text);
      });
    } else {
      legacyCopy(text);
    }
  }

</script>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const getInviteCode = () => window.__joinzoneInviteCode || "";

    const inviteCode = getInviteCode();
    if (!inviteCode) return;

    const deepLink = "ddrive://invite/" + inviteCode;
    const joinCodeEl = document.getElementById("joincode");
    if (joinCodeEl) joinCodeEl.textContent = inviteCode;

    const isAndroid = /Android/i.test(navigator.userAgent);
    const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
    const isMobile = isAndroid || isIOS;

    const cfgEl = document.getElementById("joinzone-config");
    const iosStoreUrl = (cfgEl && cfgEl.dataset && cfgEl.dataset.iosStoreUrl) || "";
    const androidStoreUrl = (cfgEl && cfgEl.dataset && cfgEl.dataset.androidStoreUrl) || "";
    const downloadCenterUrl = (cfgEl && cfgEl.dataset && cfgEl.dataset.downloadCenterUrl) || "/download/";
    const downloadUrl = isIOS ? iosStoreUrl : (isAndroid ? androidStoreUrl : downloadCenterUrl);

    document.querySelectorAll("[data-joinzone-download]").forEach((link) => {
      link.setAttribute("href", downloadUrl || downloadCenterUrl);
      link.setAttribute("target", "_blank");
      link.setAttribute("rel", "noopener");
    });

    const desktopModal = document.getElementById("joinzone-openapp-modal");
    const mobileStatus = document.getElementById("joinzone-mobile-status");
    const fallback = document.getElementById("joinzone-fallback");

    function attemptOpenApp(url) {
      try {
        window.location.href = url;
      } catch (e) {}

      // If the app didn't open (blocked, not installed, or user canceled), reveal a fallback CTA.
      setTimeout(function () {
        if (fallback) fallback.hidden = false;
      }, 1500);
    }

    document.querySelectorAll("[data-joinzone-openinapp]").forEach((link) => {
      link.setAttribute("href", deepLink);
      link.addEventListener("click", function (e) {
        e.preventDefault();
        attemptOpenApp(deepLink);
      });
    });

    document.querySelectorAll("[data-joinzone-close]").forEach((button) => {
      button.addEventListener("click", function () {
        if (desktopModal) desktopModal.hidden = true;
      });
    });

    if (isMobile) {
      if (mobileStatus) mobileStatus.hidden = false;
      attemptOpenApp(deepLink);
    } else {
      if (desktopModal) desktopModal.hidden = false;
    }
  });
</script>

<div
  id="joinzone-config"
  hidden
  data-ios-store-url="{{ site.download.app.ios }}"
  data-android-store-url="{{ site.download.app.android }}"
  data-download-center-url="{{ site.links.collab_download.url }}"
></div>

<div class="joinzone-openapp-modal" id="joinzone-openapp-modal" hidden>
  <div class="joinzone-openapp-modal__backdrop" data-joinzone-close></div>
  <div class="joinzone-openapp-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="joinzone-openapp-title">
    <button type="button" class="joinzone-openapp-modal__close" data-joinzone-close aria-label="Close">×</button>
    <h3 class="joinzone-openapp-modal__title" id="joinzone-openapp-title">Join in Diode</h3>
    <p class="joinzone-openapp-modal__text">Click below to open the Diode app and join this Zone.</p>
    <div class="joinzone-openapp-modal__actions">
      <a class="btn" href="#" role="button" data-joinzone-openinapp>Join in Diode Collab</a>
      <a class="btn btn--blank" href="#close" data-joinzone-close>Continue on Web</a>
    </div>
    <p class="joinzone-openapp-modal__note">No app? <a href="{{ site.links.collab_download.url }}" data-joinzone-download data-joinzone-close target="_blank" rel="noopener">Download Diode</a></p>
  </div>
</div>

<div class="text-center joinzone">
  <h2 class="title">Join Code</h2>
  <hr class="title_line">
  <p class="subtitle">Click the "Join" button on the Zones page in Diode and enter this Join Code!</p>

  <div class="joinzone__code-row">
    <h3 class="joincode" id="joincode"></h3>
    <button type="button" onclick="CopyToClipboard('joincode')" class="joinzone__copy-icon" id="cc-copy" aria-label="Copy join code" title="Copy join code">
      <span class="material-symbols-outlined" aria-hidden="true">content_copy</span>
    </button>
  </div>

  <div class="joinzone__actions">
    <a class="btn btn--blank" href="#" role="button" data-joinzone-openinapp>Join in Diode Collab</a>
  </div>

  <div class="joinzone__status" id="joinzone-mobile-status" hidden>
    Opening Diode…
  </div>

  <div class="joinzone__fallback" id="joinzone-fallback" hidden>
    <p>If Diode didn’t open, you can use the Join Code above or download the app.</p>
    <a class="btn btn--bordered" href="{{ site.links.collab_download.url }}" data-joinzone-download target="_blank" rel="noopener">Download</a>
  </div>

  <br/><br/>
  <img style="display:block; margin-left:auto; margin-right: auto; width: 520px;" src="{{ 'joinzone/joincode-entry-example.gif' | prepend: site.path.images | relative_url}}" alt="how to join zone with join code">
  <p class="download-prompt">Need Diode?</p>
  <div>
    <a href="{{ site.links.collab_download.url }}" class="btn btn--bordered" target="_blank" rel="noopener">Download</a>
  </div>
</div>