From 038207d58537287f85f7cc62bd3bdd31c99f73d5 Mon Sep 17 00:00:00 2001
From: Karlcarlo <karlcarlo@163.com>
Date: Sun, 4 Oct 2026 08:44:28 +0000
Subject: [PATCH] =?UTF-8?q?feat(=E9=A6=96=E9=A1=B5=E5=A4=B4=E5=9B=BE):=20?=
 =?UTF-8?q?=E7=82=B9=E6=98=9F=E5=BA=A7=E5=B0=8F=E7=89=8C=E5=BC=B9=E5=87=BA?=
 =?UTF-8?q?=E6=98=9F=E5=BA=A7=E5=AE=9D=E5=AE=9D=E2=80=94=E2=80=94=E5=B9=B8?=
 =?UTF-8?q?=E8=BF=90=E8=89=B2=E3=80=81=E6=80=A7=E6=A0=BC=E3=80=81=E5=8F=AF?=
 =?UTF-8?q?=E8=83=BD=E5=96=9C=E6=AC=A2=E7=9A=84=E8=81=8C=E4=B8=9A=EF=BC=8C?=
 =?UTF-8?q?=E4=BA=A4=E7=95=8C=E5=8F=AF=E5=88=87=E6=8D=A2=20(v26100425)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 index.html    | 33 ++++++++++++++++++++++--
 js/app.js     | 70 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 js/hero-fx.js |  5 ++++
 mama-box.css  | 36 +++++++++++++++++++++++++-
 4 files changed, 140 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 57b64f6..2ebd756 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
 <meta name="mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <title>兜爸心选 · 孕育陪伴</title>
-<!-- V:26100424 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
+<!-- V:26100425 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
 <link rel="stylesheet" href="mama-box.css">
 <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
 <!-- 共享助手：授权/跳商城/位置上报（分享卡片同步，见 docs/h5-auth-standard.md 第四节） -->
@@ -67,7 +67,7 @@
              .hero-fx 是阳光光束 + 水波焦散的画布，叠在宝宝之上、文字之下。 -->
         <!-- 2026-10-04 羊水深度层（js/hero-fx.js deep()）：背景透过水的折射晃动 + 暗流 + 景深暗角 + 远处微粒，正常混合、在宝宝下面 -->
         <canvas class="hero-water" id="heroWater" aria-hidden="true"></canvas>
-        <div class="hero-baby" id="heroBaby" aria-hidden="true">
+        <div class="hero-baby" id="heroBaby">
           <img class="hero-kid hero-kid-still" id="heroStill" alt="" decoding="async">
           <img class="hero-kid" id="heroKid" alt="" decoding="async">
         </div>
@@ -1768,6 +1768,35 @@
     <div class="modal-foot"><button class="dl-btn main" id="bxAddrSave">提交</button></div>
   </section>
 
+  <!-- 星座宝宝（2026-10-04）：点头图孕囊旁的「xx宝宝」小牌打开（js/hero-fx.js 派发 mb-zodiac → app.js 填内容 + openModal）。
+       幸运色 → 性格 → 适合的职业；预产期落在星座交界时顶部给两个可切换的小标签。内容是星座小趣味，底部写明。 -->
+  <section class="modal zd-modal" id="modalZodiac" data-autofocus="off" role="dialog" aria-modal="true" aria-labelledby="zdName">
+    <div class="zd-glow" id="zdGlow" aria-hidden="true"></div>
+    <button class="modal-x" data-modal="close" aria-label="关闭">
+      <svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg>
+    </button>
+    <div class="zd-head">
+      <span class="zd-star" aria-hidden="true"><svg viewBox="0 0 12 12" width="14" height="14"><path d="M6 .6c.4 2.9 1.5 4 4.4 4.4v.1C7.5 5.5 6.4 6.6 6 9.4h-.1C5.5 6.6 4.4 5.5 1.6 5.1V5C4.4 4.6 5.5 3.5 5.9.6z" fill="currentColor"/></svg></span>
+      <h3 id="zdName"></h3>
+      <p class="zd-range" id="zdRange"></p>
+      <div class="zd-switch" id="zdSwitch" hidden></div>
+    </div>
+    <div class="zd-sec zd-color">
+      <i class="zd-sw" id="zdSw" aria-hidden="true"></i>
+      <div><span class="zd-label">宝宝幸运色</span><b id="zdColor"></b><p id="zdColorTip"></p></div>
+    </div>
+    <div class="zd-sec">
+      <span class="zd-label">宝宝的性格</span>
+      <div class="zd-tags" id="zdTraits"></div>
+      <p class="zd-para" id="zdPara"></p>
+    </div>
+    <div class="zd-sec">
+      <span class="zd-label">长大后可能会喜欢的职业</span>
+      <div class="zd-jobs" id="zdJobs"></div>
+    </div>
+    <p class="zd-foot">星座小趣味，听听就好 —— 每个宝宝都是独一无二的小宇宙</p>
+  </section>
+
   <!-- 意见反馈（2026-10-04）。类型 → 描述 → 截图（选填，最多 3 张，走 /api/upload）→ 联系方式（选填）→ 提交。
        底部「我提交过的」列出最近几条和处理状态 / 回复（运营在管理端 PUT /api/mama-box/feedbacks/{id} 标记）。 -->
   <section class="modal fb-modal" id="modalFeedback" data-autofocus="off" role="dialog" aria-modal="true" aria-labelledby="fbTitle">
diff --git a/js/app.js b/js/app.js
index 48f14ed..b3d4107 100644
--- a/js/app.js
+++ b/js/app.js
@@ -3,7 +3,7 @@
 (function () {
   'use strict';
   /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
-  var VER = '26100424';
+  var VER = '26100425';
   const $ = (s, c) => (c || document).querySelector(s);
   const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
 
@@ -839,6 +839,74 @@
   }));
   modalScrim.addEventListener('click', closeModal);
 
+  /* ================= 星座宝宝弹窗（2026-10-04） =================
+     用户：「点开『巨蟹宝宝』之后弹窗：宝宝幸运色（珍珠白、湖水蓝……）、宝宝的性格（说几句好话）、宝宝适合的职业」。
+     头图小牌在 js/hero-fx.js，点了派发 mb-zodiac {names:['巨蟹'] 或交界时 ['巨蟹','狮子']}，这里填内容并打开。
+     文案只往好处说、不下结论（「可能会喜欢」），底部写明是星座小趣味。 */
+  const ZODIAC = {
+    水瓶: ['1.20 – 2.18', '冰川蓝', '#7FB8D6', '像晴天里的冰川，清透又有灵气', ['聪明', '有主见', '点子多'],
+      '这个时候出生的宝宝，小脑袋里总装着新奇的想法，对世界充满好奇。待人真诚友善，长大后会有很多好朋友，也常常是那个让大家眼前一亮的人。',
+      ['科学家', '发明家', '程序员', '产品设计师', '天文学家']],
+    双鱼: ['2.19 – 3.20', '薰衣草紫', '#A88BC9', '温柔又梦幻，像一首轻轻的摇篮曲', ['温柔', '有想象力', '善解人意'],
+      '这个时候出生的宝宝，心思细腻、特别会体贴人，常常能察觉到你的小情绪。想象力丰富，喜欢画画、听故事，是天生的小艺术家。',
+      ['画家', '音乐人', '作家', '心理咨询师', '医生']],
+    白羊: ['3.21 – 4.19', '珊瑚红', '#F2685A', '像初升的太阳，热乎乎、亮堂堂', ['活泼', '勇敢', '热情'],
+      '这个时候出生的宝宝，天生活泼开朗、精力满满，想到就去做，什么都愿意试一试。笑起来特别有感染力，走到哪儿都能把快乐带到哪儿。',
+      ['运动员', '飞行员', '创业者', '主持人', '外科医生']],
+    金牛: ['4.20 – 5.20', '抹茶绿', '#9BBF7A', '像春天的草地，安心又治愈', ['踏实', '温和', '有耐心'],
+      '这个时候出生的宝宝，性格温和、做事稳稳当当，是让爸爸妈妈特别省心的小可爱。很会享受生活里的美好，对好吃的、好看的东西格外敏感。',
+      ['美食家', '建筑师', '珠宝设计师', '园艺设计师', '金融分析师']],
+    双子: ['5.21 – 6.21', '柠檬黄', '#F4D35E', '像一颗跳跳糖，明快又俏皮', ['机灵', '好奇', '会表达'],
+      '这个时候出生的宝宝，反应快、小嘴甜，学说话往往比别的宝宝早。对什么都好奇，十万个为什么能问个不停，和谁都能很快玩到一起。',
+      ['记者', '主持人', '翻译', '作家', '新媒体创作者']],
+    巨蟹: ['6.22 – 7.22', '珍珠白', '#F3EDE3', '像月光一样柔和，温润有光泽', ['温柔', '贴心', '重感情'],
+      '这个时候出生的宝宝，特别恋家、黏爸爸妈妈，是暖暖的小棉袄。心地柔软、懂得照顾别人，长大后会是家人和朋友最安心的依靠。',
+      ['医生', '教师', '营养师', '室内设计师', '幼教老师']],
+    狮子: ['7.23 – 8.22', '琥珀金', '#E8A33D', '像夏天的阳光，明亮又大方', ['阳光', '自信', '大方'],
+      '这个时候出生的宝宝，天生自带光芒，笑容灿烂、落落大方，从小就不怕生。有主见、讲义气，常常是小伙伴里的「孩子王」。',
+      ['演员', '导演', '企业家', '律师', '主持人']],
+    处女: ['8.23 – 9.22', '奶油杏', '#F1D3B3', '像刚出炉的面包，温暖又干净', ['细心', '认真', '聪明'],
+      '这个时候出生的宝宝，观察力特别好，一点点小变化都逃不过他的眼睛。做事认真有条理，学东西又快又扎实，是让人放心的小学霸。',
+      ['医生', '科研人员', '编辑', '药剂师', '会计师']],
+    天秤: ['9.23 – 10.23', '樱花粉', '#F4B6C2', '像四月的樱花，温柔又优雅', ['优雅', '友善', '审美好'],
+      '这个时候出生的宝宝，长得秀气、性格随和，特别讨人喜欢。天生懂礼貌、爱和平，审美也好，小小年纪就知道什么是好看。',
+      ['设计师', '外交官', '律师', '策展人', '时尚买手']],
+    天蝎: ['10.24 – 11.22', '玫瑰酒红', '#B0485C', '像一颗红宝石，深邃又有力量', ['专注', '坚韧', '重情义'],
+      '这个时候出生的宝宝，眼神里有一股专注劲儿，认定的事情会坚持到底。外表安静、内心热烈，对家人朋友特别真心，是最靠得住的那个人。',
+      ['心理学家', '科研人员', '外科医生', '投资人', '侦探小说家']],
+    射手: ['11.23 – 12.21', '落日橙', '#F29B4B', '像旅途中的落日，自由又温暖', ['乐观', '爱自由', '幽默'],
+      '这个时候出生的宝宝，天性乐观、笑点很低，是家里的开心果。喜欢跑跑跳跳、到处探索，对远方充满向往，长大后会去看很大的世界。',
+      ['旅行家', '探险家', '大学老师', '体育教练', '外交官']],
+    摩羯: ['12.22 – 1.19', '松石绿', '#3E9A88', '像山间的松林，沉稳又有力量', ['踏实', '有责任心', '目标感强'],
+      '这个时候出生的宝宝，小小年纪就很懂事，做事有始有终、不轻易放弃。安静里藏着大大的志向，一步一个脚印，未来一定会很了不起。',
+      ['工程师', '建筑师', '科学家', '管理者', '法官']]
+  };
+  (function () {
+    const M = $('#modalZodiac'); if (!M) return;
+    function fill(n) {
+      const z = ZODIAC[n]; if (!z) return;
+      M.style.setProperty('--zc', z[2]);
+      $('#zdName').textContent = n + '宝宝';
+      $('#zdRange').textContent = z[0] + ' · 按预产期推算';
+      $('#zdColor').textContent = z[1]; $('#zdColorTip').textContent = z[3];
+      const T = $('#zdTraits'); T.innerHTML = ''; z[4].forEach(t => T.appendChild(el('span', '', t)));
+      $('#zdPara').textContent = z[5];
+      const J = $('#zdJobs'); J.innerHTML = ''; z[6].forEach(t => J.appendChild(el('span', '', t)));
+    }
+    window.addEventListener('mb-zodiac', e => {
+      const names = (e.detail && e.detail.names || []).filter(n => ZODIAC[n]); if (!names.length) return;
+      const sw = $('#zdSwitch'); sw.innerHTML = '';
+      sw.hidden = names.length < 2;
+      if (names.length > 1) names.forEach((n, i) => {
+        const b = el('button', i ? '' : 'on', n + '宝宝'); b.type = 'button';
+        b.addEventListener('click', () => { $$('button', sw).forEach(x => x.classList.toggle('on', x === b)); fill(n); });
+        sw.appendChild(b);
+      });
+      fill(names[0]);
+      openModal('modalZodiac');
+    });
+  })();
+
   /* ================= 意见反馈（2026-10-04） =================
      用户：「在我的页面里加一个客服反馈，功能上的反馈、功能上的建议」。
      入口：「我的」常用服务 #meFeedback；「帮助与反馈」里的「提交反馈或建议」行（data-fb）。
diff --git a/js/hero-fx.js b/js/hero-fx.js
index e21f5fa..0f0b759 100644
--- a/js/hero-fx.js
+++ b/js/hero-fx.js
@@ -78,6 +78,9 @@
   const zEl = document.createElement('span');
   zEl.className = 'hero-zod'; zEl.setAttribute('aria-hidden', 'true');
   box.appendChild(zEl);
+  zEl.setAttribute('role', 'button'); zEl.removeAttribute('aria-hidden');
+  let zNames = [];
+  zEl.addEventListener('click', e => { e.stopPropagation(); if (zNames.length) window.dispatchEvent(new CustomEvent('mb-zodiac', { detail: { names: zNames } })); });
   function renderZod(d) {
     const due = d && !d.empty && !d.postpartum && d.due;
     if (!due) { zEl.classList.remove('is-on'); return; }
@@ -86,6 +89,8 @@
     // 图标用自绘四角星：星座符号（♋ 之类）在部分安卓上没有字形，会显示成方框
     zEl.innerHTML = '<i><svg viewBox="0 0 12 12" width="8" height="8"><path d="M6 .6c.4 2.9 1.5 4 4.4 4.4v.1C7.5 5.5 6.4 6.6 6 9.4h-.1C5.5 6.6 4.4 5.5 1.6 5.1V5C4.4 4.6 5.5 3.5 5.9.6z" fill="currentColor"/></svg></i>' +
       '<b>' + pair.map(x => x[2]).join('·') + '宝宝</b>';
+    zNames = pair.map(x => x[2]);
+    zEl.setAttribute('aria-label', zNames.join('·') + '宝宝，点开看看');
     zEl.classList.add('is-on');
   }
   function onPreg(d) { show(stageOf(force != null ? +force : (d && d.week))); renderZod(d); }
diff --git a/mama-box.css b/mama-box.css
index 4ea102c..c25e0f8 100644
--- a/mama-box.css
+++ b/mama-box.css
@@ -4533,7 +4533,7 @@ a.skip:focus{left:16px;top:16px}
 /* ============ 2026-10-04 头图星座牌（js/hero-fx.js renderZod） ============
    挂在 .hero-baby 右下角的空角里，随孕囊一起浮。小、轻、像一枚贴在羊水外的玻璃标签：
    磨砂半透明底 + 发丝细边；左边一枚奶油色小圆里一颗自绘四角星（不用 ♋ 一类符号：部分安卓没字形会成方框），右边 11px 字、字距拉开。 */
-.hero-zod{position:absolute;right:-2%;bottom:3%;z-index:4;display:inline-flex;align-items:center;gap:5px;
+.hero-zod{position:absolute;right:-2%;bottom:3%;z-index:4;pointer-events:auto;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
   height:20px;padding:0 9px 0 3px;border-radius:999px;white-space:nowrap;
   background:linear-gradient(135deg,rgba(255,255,255,.26),rgba(255,255,255,.10));border:.5px solid rgba(255,255,255,.55);
   -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 4px 14px rgba(120,35,20,.16);
@@ -4543,3 +4543,37 @@ a.skip:focus{left:16px;top:16px}
   font-style:normal}
 .hero-zod svg{display:block;margin-top:.5px}
 .hero-zod b{font-size:10.5px;font-weight:600;letter-spacing:1.2px;color:#FFF7EE;text-shadow:0 1px 2px rgba(120,35,20,.25)}
+
+.hero-zod::before{content:"";position:absolute;inset:-10px -6px}        /* 牌子只有 20px 高，点击区放大一圈 */
+.hero-zod:active{transform:scale(.96)}
+
+/* ============ 2026-10-04 星座宝宝弹窗 #modalZodiac ============
+   米白底；顶部一团幸运色的柔光（--zc，JS 按星座写）；三段用细线分隔，字号克制（标题 20、正文 13.5）。 */
+.zd-modal{--zc:#E8A33D;overflow:hidden;padding-top:26px;max-height:88vh;overflow-y:auto}
+.zd-glow{position:absolute;left:50%;top:-120px;width:340px;height:220px;margin-left:-170px;border-radius:50%;
+  background:radial-gradient(closest-side,var(--zc),transparent);opacity:.32;filter:blur(8px);pointer-events:none}
+.zd-modal .modal-x{position:absolute;right:16px;top:16px;z-index:2}
+.zd-head{position:relative;text-align:center}
+.zd-star{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--zc);color:color-mix(in srgb,var(--zc) 55%,#7A5240);
+  box-shadow:0 4px 14px rgba(150,80,50,.14)}
+.zd-head h3{margin:8px 0 2px;font-size:20px;font-weight:800;letter-spacing:2px;color:var(--ink)}
+.zd-range{margin:0;font-size:11.5px;letter-spacing:.5px;color:var(--muted)}
+.zd-switch[hidden]{display:none}
+.zd-switch{display:inline-flex;gap:4px;margin-top:10px;padding:3px;border-radius:999px;background:rgba(255,255,255,.75);border:.5px solid #EFE3DA}
+.zd-switch button{height:24px;padding:0 12px;border:0;border-radius:999px;background:none;font-size:12px;color:var(--muted)}
+.zd-switch button.on{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 1px 4px rgba(120,70,50,.12)}
+.zd-sec{position:relative;margin-top:16px;padding-top:14px;border-top:.5px solid #EADDD3}
+.zd-label{display:block;margin-bottom:8px;font-size:11.5px;font-weight:700;letter-spacing:1.5px;color:#B49A8A}
+.zd-color{display:flex;align-items:center;gap:14px}
+.zd-color .zd-label{margin-bottom:3px}
+.zd-sw{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:var(--zc);
+  box-shadow:inset 0 -6px 12px rgba(0,0,0,.08),inset 0 4px 8px rgba(255,255,255,.45),0 0 0 4px #fff,0 4px 14px rgba(120,70,50,.16)}
+.zd-color b{display:block;font-size:16px;font-weight:800;letter-spacing:1px;color:var(--ink)}
+.zd-color p{margin:3px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
+.zd-tags{display:flex;gap:6px;margin-bottom:8px}
+.zd-tags span{padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;color:var(--ink-2);
+  background:color-mix(in srgb,var(--zc) 16%,#fff);border:.5px solid color-mix(in srgb,var(--zc) 35%,#fff)}
+.zd-para{margin:0;font-size:13.5px;line-height:1.75;color:var(--ink-2)}
+.zd-jobs{display:flex;flex-wrap:wrap;gap:7px}
+.zd-jobs span{padding:6px 12px;border-radius:10px;background:#fff;font-size:12.5px;color:var(--ink-2);box-shadow:0 1px 3px rgba(120,70,50,.08)}
+.zd-foot{margin:18px 0 2px;text-align:center;font-size:11px;color:#BCAEA4}