Refine referral activity site

Author: jinwandalaohu66

docs/activity/index.html

@@ -41,7 +41,7 @@
           <h1 class="activity-title reveal" id="activity-title" data-t="ruleTitle">邀请活动规则</h1>
           <section class="activity-block" aria-labelledby="reward-title">
             <h2 class="section-title" id="reward-title" data-t="rewardTitle">奖励档位</h2>
-            <div class="surface reward-list" data-array="rewards"></div>
+            <div class="rule-list" data-array="rewards"></div>
           </section>
           <p class="note reveal" data-t="note">奖励达到后请按 App 内邀请明细与后台记录联系兑换。为防止刷量，截图不能作为有效邀请依据。</p>
         </section>
@@ -54,7 +54,7 @@ <h2 class="section-title" id="valid-title" data-t="validTitle">什么是有效
 
           <section class="activity-block" aria-labelledby="other-title">
             <h2 class="section-title" id="other-title" data-t="otherTitle">其他活动</h2>
-            <div class="surface other-list" data-array="other"></div>
+            <div class="rule-list" data-array="other"></div>
           </section>
         </section>
       </div>

docs/index.html

@@ -245,6 +245,12 @@
       color: var(--ink);
     }
 
+    .pill-btn.ghost {
+      background: rgba(255, 255, 255, 0.14);
+      color: var(--white);
+      border: 1px solid rgba(255, 255, 255, 0.28);
+    }
+
     .pill-btn.warm {
       background: var(--warm);
       color: var(--orange);
@@ -705,6 +711,7 @@ <h1 id="hero-title" data-i18n="heroTitle">在 iPhone 上写 Python</h1>
               <span data-i18n="downloadCta">下载</span>
             </a>
             <a class="pill-btn light" href="docs/" data-i18n="docsCta">阅读文档</a>
+            <a class="pill-btn ghost" href="activity/" data-i18n="referralCta">邀请活动</a>
           </div>
         </div>
 
@@ -810,6 +817,7 @@ <h2 id="hero-card-title" data-i18n="cardTitle">开始使用</h2>
         subtitle: "在 iPhone 和 iPad 上编写 Python，构建 AppUI、小组件、Agent 工作流与 iOS 原生能力。",
         downloadCta: "下载",
         docsCta: "阅读文档",
+        referralCta: "邀请活动",
         cardTitle: "开始使用",
         cardAgentLabel: "安装 Agent Skills",
         agentSkillCopied: "已复制",
@@ -847,6 +855,7 @@ <h2 id="hero-card-title" data-i18n="cardTitle">开始使用</h2>
         subtitle: "Build AppUI, widgets, Agent workflows, and native iOS capabilities on iPhone and iPad.",
         downloadCta: "Download",
         docsCta: "Read the Docs",
+        referralCta: "Referral Program",
         cardTitle: "Get Started",
         cardAgentLabel: "Install Agent Skills",
         agentSkillCopied: "Copied",

docs/referral/referral.js

@@ -88,6 +88,11 @@ const iconPaths = {
   link: "M10 13a5 5 0 0 0 7.07 0l2-2a5 5 0 0 0-7.07-7.07l-1.2 1.2M14 11a5 5 0 0 0-7.07 0l-2 2A5 5 0 0 0 12 20.07l1.2-1.2",
   spark: "M12 2v5M12 17v5M4.22 4.22l3.54 3.54M16.24 16.24l3.54 3.54M2 12h5M17 12h5M4.22 19.78l3.54-3.54M16.24 7.76l3.54-3.54",
   clock: "M12 8v5l3 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z",
+  gift: "M20 12v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-8M2 8h20v4H2V8ZM12 8v13M12 8H8.5A2.5 2.5 0 1 1 11 5.5L12 8Zm0 0h3.5A2.5 2.5 0 1 0 13 5.5L12 8Z",
+  percent: "M19 5 5 19M7.5 8.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM16.5 19.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z",
+  crown: "M3 8l4.5 4L12 5l4.5 7L21 8l-2 11H5L3 8Z",
+  pen: "M17 3l4 4L8 20H4v-4L17 3Z",
+  community: "M16 20a4 4 0 0 0-8 0M12 13a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM22 20a3.5 3.5 0 0 0-5.4-2.95M17 11a3 3 0 1 0 0-6M2 20a3.5 3.5 0 0 1 5.4-2.95M7 11a3 3 0 1 1 0-6",
 };
 
 function routePath() {
@@ -145,10 +150,14 @@ function renderArray(node, t) {
   const key = node.dataset.array;
   const rows = t[key] || [];
   if (key === "rewards") {
-    node.innerHTML = rows.map(([left, right]) => `
-      <div class="reward-row reveal motion-surface">
-        <strong>${left}</strong>
-        <em>${right}</em>
+    const icons = ["gift", "percent", "crown"];
+    node.innerHTML = rows.map(([requirement, reward], index) => `
+      <div class="rule-row reveal">
+        <div class="rule-icon" aria-hidden="true">${svgIcon(icons[index] || "gift")}</div>
+        <div>
+          <strong>${reward}</strong>
+          <span>${requirement}</span>
+        </div>
       </div>
     `).join("");
     return;
@@ -179,13 +188,14 @@ function renderArray(node, t) {
     return;
   }
   if (key === "other") {
-    node.innerHTML = rows.map(([title, detail]) => `
-      <div class="other-row reveal motion-surface">
+    const icons = ["pen", "community"];
+    node.innerHTML = rows.map(([title, detail], index) => `
+      <div class="rule-row reveal">
+        <div class="rule-icon" aria-hidden="true">${svgIcon(icons[index] || "spark")}</div>
         <div>
           <strong>${title}</strong>
           <span>${detail}</span>
         </div>
-        <em>›</em>
       </div>
     `).join("");
   }