Handle empty referral invite pages

Author: jinwandalaohu66

docs/i/index.html

@@ -39,8 +39,8 @@
       <div class="invite-layout">
         <section class="invite-hero" aria-labelledby="invite-title">
           <p class="eyebrow reveal" id="invite-title" data-t="invitedTitle">好友邀请你使用 PythonIDE</p>
-          <div class="invite-code" data-invite-code aria-label="邀请码">PY8K29</div>
-          <p class="summary reveal" data-t="invitedSummary">下载 App 后输入邀请码，即可建立邀请关系。</p>
+          <div class="invite-code" data-invite-code aria-label="获取邀请码">获取邀请码</div>
+          <p class="summary reveal" data-invite-summary data-t="invitedSummary">下载 App 后输入邀请码，即可建立邀请关系。</p>
 
           <div class="actions reveal">
             <a class="button primary" href="#" data-download>
@@ -55,6 +55,12 @@
               </svg>
               <span data-t="copyCode">复制邀请码</span>
             </button>
+            <a class="button secondary no-code-only" href="/activity/" data-no-code-rules hidden>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"></path>
+              </svg>
+              <span data-t="viewRules">查看活动规则</span>
+            </a>
           </div>
 
           <div class="divider" aria-hidden="true"></div>

docs/referral/referral.css

@@ -261,6 +261,29 @@ html[lang="en"] .language-toggle [data-lang="en"] {
   text-indent: 0.08em;
 }
 
+.invite-code.invite-placeholder {
+  font-family: var(--font);
+  font-size: clamp(40px, 11vw, 62px);
+  font-weight: 700;
+  letter-spacing: 0;
+  line-height: 1.12;
+  text-indent: 0;
+  white-space: normal;
+  cursor: pointer;
+  transition: opacity 220ms ease, transform 260ms var(--ease);
+}
+
+.invite-code.invite-placeholder:hover {
+  opacity: 0.78;
+  transform: translateY(-1px);
+}
+
+.invite-code.invite-placeholder:focus-visible {
+  outline: 2px solid var(--ink);
+  outline-offset: 8px;
+  border-radius: 8px;
+}
+
 .invite-code span {
   display: inline-block;
   animation: codeEnter 760ms var(--ease) both;
@@ -348,6 +371,15 @@ html[lang="en"] .language-toggle [data-lang="en"] {
   color: var(--ink);
 }
 
+.no-code-only[hidden],
+[data-copy-code][hidden] {
+  display: none;
+}
+
+body.invite-missing-code .invite-hero > .inline-link {
+  display: none;
+}
+
 .divider {
   width: 100%;
   height: 1px;
@@ -665,23 +697,23 @@ html[lang="en"] .language-toggle [data-lang="en"] {
     background: linear-gradient(180deg, transparent, var(--line), transparent);
   }
 
-  .eyebrow,
-  .summary,
   .activity-title,
   .note {
     text-align: left;
     margin-left: 0;
   }
 
   .invite-code {
-    margin-left: 0;
-    text-align: left;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
     text-indent: 0.18em;
     overflow: visible;
   }
 
   .actions {
-    margin-left: 0;
+    margin-left: auto;
+    margin-right: auto;
   }
 
   .desktop-only {

docs/referral/referral.js

@@ -1,4 +1,5 @@
 const APP_STORE_URL = "https://apps.apple.com/app/id6753987304";
+const APP_REFERRAL_URL = "pythonide://referral";
 
 const copy = {
   zh: {
@@ -11,6 +12,10 @@ const copy = {
     failed: "复制失败，请手动复制",
     invitedTitle: "好友邀请你使用 PythonIDE",
     invitedSummary: "下载 App 后输入邀请码，即可建立邀请关系。",
+    inviteEntryTitle: "PythonIDE 邀请",
+    inviteEntrySummary: "打开 App 后进入「我的」-「邀请好友」，即可查看并分享你的专属邀请码。",
+    getInviteCode: "获取邀请码",
+    noCodeToCopy: "当前页面没有邀请码",
     howWorks: "如何生效",
     viewRules: "查看活动规则",
     ruleTitle: "邀请活动规则",
@@ -51,6 +56,10 @@ const copy = {
     failed: "Copy failed. Please copy manually.",
     invitedTitle: "A friend invited you to PythonIDE",
     invitedSummary: "Download the app and enter this invite code to bind the referral.",
+    inviteEntryTitle: "PythonIDE Referral",
+    inviteEntrySummary: "Open the app, then go to Me - Invite Friends to find and share your personal invite code.",
+    getInviteCode: "Get Invite Code",
+    noCodeToCopy: "No invite code on this page.",
     howWorks: "How it counts",
     viewRules: "View rules",
     ruleTitle: "Referral Program Rules",
@@ -102,15 +111,20 @@ function routePath() {
 
 function inviteCodeFromPath() {
   const raw = routePath();
-  const url = new URL(raw, location.origin);
+  let url;
+  try {
+    url = new URL(raw, location.origin);
+  } catch {
+    return "";
+  }
   const parts = url.pathname.split("/").filter(Boolean);
   const code = parts[0] === "i" && parts[1] ? parts[1] : url.searchParams.get("code");
-  return normalizeCode(code || "PY8K29");
+  return normalizeCode(code);
 }
 
 function normalizeCode(value) {
   const cleaned = String(value || "").replace(/[\s-]+/g, "").toUpperCase();
-  return /^[A-Z0-9]{4,12}$/.test(cleaned) ? cleaned : "PY8K29";
+  return /^[A-Z0-9]{4,12}$/.test(cleaned) ? cleaned : "";
 }
 
 function initialLanguage() {
@@ -121,6 +135,10 @@ function initialLanguage() {
   return navigator.language && navigator.language.toLowerCase().startsWith("en") ? "en" : "zh";
 }
 
+function currentLanguage() {
+  return document.documentElement.dataset.lang === "en" ? "en" : "zh";
+}
+
 function setLanguage(lang) {
   const active = lang === "en" ? "en" : "zh";
   localStorage.setItem("referral_lang", active);
@@ -140,8 +158,7 @@ function setLanguage(lang) {
   document.querySelectorAll("[data-copy-feedback]").forEach((node) => {
     node.dataset.copyFeedback = t.copied;
   });
-  const code = document.querySelector("[data-invite-code]")?.dataset.inviteCode || inviteCodeFromPath();
-  renderInviteCode(code);
+  applyInvitePageState(inviteCodeFromPath(), t);
   setupReveal();
   setupPointerMotion();
 }
@@ -208,15 +225,69 @@ function svgIcon(name) {
 function renderInviteCode(code) {
   const target = document.querySelector("[data-invite-code]");
   if (!target) return;
+  if (!code) {
+    renderInvitePlaceholder(copy[currentLanguage()].getInviteCode);
+    return;
+  }
   target.dataset.inviteCode = code;
   target.dataset.length = String(code.length);
+  target.classList.remove("invite-placeholder");
   target.classList.toggle("compact", code.length >= 7);
   target.classList.toggle("ultra-compact", code.length >= 10);
+  target.removeAttribute("role");
+  target.removeAttribute("tabindex");
+  target.setAttribute("aria-label", `${copy[currentLanguage()].invalidCode} ${code}`);
   target.innerHTML = code.split("").map((char, index) => `<span style="--i:${index}">${char}</span>`).join("");
 }
 
+function renderInvitePlaceholder(label) {
+  const target = document.querySelector("[data-invite-code]");
+  if (!target) return;
+  target.dataset.inviteCode = "";
+  target.dataset.length = "0";
+  target.classList.remove("compact", "ultra-compact");
+  target.classList.add("invite-placeholder");
+  target.setAttribute("role", "button");
+  target.setAttribute("tabindex", "0");
+  target.setAttribute("aria-label", label);
+  target.textContent = label;
+}
+
+function applyInvitePageState(code, t) {
+  const target = document.querySelector("[data-invite-code]");
+  if (!target) {
+    document.body.classList.remove("invite-missing-code");
+    return;
+  }
+
+  const hasCode = Boolean(code);
+  document.body.classList.toggle("invite-missing-code", !hasCode);
+
+  const title = document.getElementById("invite-title");
+  if (title) title.textContent = hasCode ? t.invitedTitle : t.inviteEntryTitle;
+
+  const summary = document.querySelector("[data-invite-summary]");
+  if (summary) summary.textContent = hasCode ? t.invitedSummary : t.inviteEntrySummary;
+
+  const copyButton = document.querySelector("[data-copy-code]");
+  if (copyButton) copyButton.hidden = !hasCode;
+
+  const rulesButton = document.querySelector("[data-no-code-rules]");
+  if (rulesButton) rulesButton.hidden = hasCode;
+
+  if (hasCode) {
+    renderInviteCode(code);
+  } else {
+    renderInvitePlaceholder(t.getInviteCode);
+  }
+}
+
 async function copyInviteCode() {
   const code = document.querySelector("[data-invite-code]")?.dataset.inviteCode || inviteCodeFromPath();
+  if (!code) {
+    showToast(copy[currentLanguage()].noCodeToCopy);
+    return;
+  }
   try {
     await copyText(code);
     document.body.classList.add("code-copied");
@@ -232,6 +303,30 @@ async function copyInviteCode() {
   }
 }
 
+function openReferralInApp() {
+  const startedAt = Date.now();
+  let didHide = false;
+  const fallbackDelay = 900;
+  const onVisibilityChange = () => {
+    if (document.hidden) didHide = true;
+  };
+
+  document.addEventListener("visibilitychange", onVisibilityChange, { once: true });
+  window.setTimeout(() => {
+    document.removeEventListener("visibilitychange", onVisibilityChange);
+    if (!didHide && Date.now() - startedAt < 1800) {
+      window.location.href = APP_STORE_URL;
+    }
+  }, fallbackDelay);
+
+  window.location.href = APP_REFERRAL_URL;
+}
+
+function activateInvitePlaceholder() {
+  if (!document.body.classList.contains("invite-missing-code")) return;
+  openReferralInApp();
+}
+
 async function copyText(text) {
   if (navigator.clipboard && window.isSecureContext) {
     await navigator.clipboard.writeText(text);
@@ -316,10 +411,19 @@ function setupPointerMotion() {
 }
 
 function init() {
-  renderInviteCode(inviteCodeFromPath());
   document.querySelectorAll("[data-download]").forEach((node) => {
     node.setAttribute("href", APP_STORE_URL);
   });
+  const inviteCode = document.querySelector("[data-invite-code]");
+  if (inviteCode) {
+    inviteCode.addEventListener("click", activateInvitePlaceholder);
+    inviteCode.addEventListener("keydown", (event) => {
+      if (event.key !== "Enter" && event.key !== " ") return;
+      if (!document.body.classList.contains("invite-missing-code")) return;
+      event.preventDefault();
+      openReferralInApp();
+    });
+  }
   document.querySelectorAll("[data-copy-code]").forEach((node) => {
     node.addEventListener("click", copyInviteCode);
   });