From 05ce51300ead37d4362d6e15b6d0561e793d867d Mon Sep 17 00:00:00 2001
From: Karlcarlo <karlcarlo@163.com>
Date: Wed, 30 Sep 2026 13:29:07 +0000
Subject: [PATCH] =?UTF-8?q?feat(=E9=A6=96=E9=A1=B5):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E3=80=8C=E5=AE=9D=E5=AE=9D=E6=B6=88=E6=B6=88=E4=B9=90=E3=80=8D?=
 =?UTF-8?q?=E6=B8=B8=E6=88=8F=E6=8E=A8=E5=B9=BF=E5=85=A5=E5=8F=A3=20(v2609?=
 =?UTF-8?q?3014)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 工具托盘正下方一张糖果色大卡：「新游戏」角标 + 名字 + 玩法一句话 + 跳动的「开始玩」，
  右侧 3×3 待产用品小棋盘循环演示三连消除，角上星星闪烁。
- 点击走 jumpApp() 跳 https://beian3.douba.top/myxx/index.html（游戏由「母婴消消」维护，
  不需要身份参数，多带无害）；GAME_URL 为空时整块隐藏。
- 动效在 prefers-reduced-motion 下关闭；页面隐藏时棋盘动画暂停。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 index.html   | 20 +++++++++++++++++++-
 js/app.js    | 28 +++++++++++++++++++++++++++-
 mama-box.css | 39 +++++++++++++++++++++++++++++++++++++--
 3 files changed, 83 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index ac354b0..8ba7649 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:26093013 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
+<!-- V:26093014 缓存版本标记：改 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 第四节） -->
@@ -304,6 +304,24 @@
           </div>
         </section>
 
+        <!-- 宝宝消消乐 · 推广入口（2026-09-30）。用户原话：「做了一个消消乐小游戏（待产清单主题），
+             放到首页展示并推广，宝妈们业余时间玩，名字叫宝宝消消乐」。
+             放在工具托盘正下方：首屏滑一下就能看到。右侧 3×3 小棋盘是纯装饰动画
+             （每隔几秒一行三个同样的待产用品闪一下「消掉」再换新），JS 在 app.js gamePromo()。
+             游戏地址在 app.js 的 GAME_URL；为空时整块隐藏（.hide 默认）。点击走 jumpApp()，带身份跳转。 -->
+        <section class="game-promo hide" id="gamePromo">
+          <button class="gp-card ripple" id="gpCard" type="button" aria-label="开始玩宝宝消消乐">
+            <span class="gp-new">新游戏</span>
+            <span class="gp-text">
+              <span class="gp-name">宝宝消消乐</span>
+              <span class="gp-sub">奶瓶、尿不湿、小衣服……<br>三个一样就消掉，边玩边备齐待产包</span>
+              <span class="gp-cta">开始玩 <svg viewBox="0 0 24 24" width="12" height="12" aria-hidden="true"><path d="M8 5l8 7-8 7z" fill="currentColor"/></svg></span>
+            </span>
+            <span class="gp-board" id="gpBoard" aria-hidden="true"></span>
+            <span class="gp-spark s1" aria-hidden="true">✦</span><span class="gp-spark s2" aria-hidden="true">✦</span><span class="gp-spark s3" aria-hidden="true">✦</span>
+          </button>
+        </section>
+
         <!-- 孕期小知识（2026-09-30）。用户原话：「按她填写的孕周，比如孕 20 周 5 天，给她列出几个小模块，
              设计一定要漂亮、匹配母婴用户，最好是动态的；小知识匹配每周的每一天」。
              内容：assets/data/preg-tips.json（孕 4–40 周，每周 宝宝/妈妈/饮食/注意 四句 + 每天一条小知识，共 7 条），
diff --git a/js/app.js b/js/app.js
index 0afa80c..27190ed 100644
--- a/js/app.js
+++ b/js/app.js
@@ -3,7 +3,7 @@
 (function () {
   'use strict';
   /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
-  var VER = '26093013';
+  var VER = '26093014';
   const $ = (s, c) => (c || document).querySelector(s);
   const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
 
@@ -3109,6 +3109,32 @@
     }
   }
 
+  /* ================= 宝宝消消乐 · 推广入口（2026-09-30） =================
+     GAME_URL 为空 → 入口不显示。小棋盘：每 2.6 秒随机一行/一列先亮一下，再「消掉」换一批新的掉下来。 */
+  const GAME_URL = 'https://beian3.douba.top/myxx/index.html';   // 由「母婴消消」会话维护，部署在 47.120.70.60，不需要身份参数（多带无害）
+  const GAME_ID = 'baobao-xiaoxiaole';
+  (function gamePromo() {
+    const sec = $('#gamePromo'), board = $('#gpBoard');
+    if (!sec || !GAME_URL) return;
+    sec.classList.remove('hide');
+    $('#gpCard').addEventListener('click', () => jumpApp(GAME_URL, GAME_ID));
+    const ITEMS = ['🍼', '🧸', '👶', '🧦', '🛁', '🧴', '👕', '🎀'];
+    const rnd = () => ITEMS[Math.floor(Math.random() * ITEMS.length)];
+    const cells = [];
+    for (let i = 0; i < 9; i++) { const c = document.createElement('i'); c.textContent = rnd(); board.appendChild(c); cells.push(c); }
+    if (window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+    const LINES = [[0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8]];
+    setInterval(() => {
+      if (document.hidden) return;
+      const line = LINES[Math.floor(Math.random() * LINES.length)], e = rnd();
+      line.forEach(k => { cells[k].textContent = e; cells[k].classList.add('is-hint'); });
+      setTimeout(() => line.forEach(k => { cells[k].classList.remove('is-hint'); cells[k].classList.add('is-pop'); }), 700);
+      setTimeout(() => line.forEach(k => {
+        const c = cells[k]; c.textContent = rnd(); c.classList.remove('is-pop', 'is-in'); void c.offsetWidth; c.classList.add('is-in');
+      }), 1100);
+    }, 2600);
+  })();
+
   /* ================= 孕期小知识（2026-09-30） =================
      内容 assets/data/preg-tips.json：[{week, baby, mom, eat, care, days:[{t,d}×7]}]，孕 4–40 周。
      第几天 = state.day（0–6），和首页「孕 N 周 D 天」同一口径。
diff --git a/mama-box.css b/mama-box.css
index 4a2c4da..59cdf04 100644
--- a/mama-box.css
+++ b/mama-box.css
@@ -429,7 +429,7 @@ a.skip:focus{left:16px;top:16px}
       对齐的是内容，出血的是底色，这两件事要分开。
    ⚠️ 三块的圆角、底色、左右内边距改成在这里一处定义。以后要调，改这一条，
       别再回到各自的规则里单独写，那正是上一稿乱掉的原因。 */
-.daily-check,.tool-dock,.preg-tips,.today-line,.tree-hole,.shelf{
+.daily-check,.tool-dock,.game-promo,.preg-tips,.today-line,.tree-hole,.shelf{
   margin:0 -26px;padding:16px 26px 18px;border-radius:26px;
   background-color:#fff;
   /* ⚠️ 这两条是一对，缺一不可，而且必须一起看：
@@ -443,7 +443,7 @@ a.skip:focus{left:16px;top:16px}
 /* 块间距。给后两块，第一块的上间距另有规则（来信卡收放要用）。
    ⚠️ 这是**块与块之间**的缝。某一块自己内部觉得挤，要调的是那块的 padding，
       不是这里 —— 改这里会把三块的关系一起改掉。 */
-.tool-dock,.preg-tips,.today-line,.tree-hole,.shelf{margin-top:16px}
+.tool-dock,.game-promo,.preg-tips,.today-line,.tree-hole,.shelf{margin-top:16px}
 
 /* ===== 后两块的暖色渐变底（本批新增）=====
    用户原话：「在那个宝宝的今日脚印那块，稍微给背景它加一点渐变」
@@ -566,6 +566,41 @@ a.skip:focus{left:16px;top:16px}
 .dc-tag.is-warn{color:var(--alert);background:#FDECE8}
 .dc-row .chev{flex:0 0 auto;font-size:16px;margin-left:-4px}
 
+/* ============ 宝宝消消乐 · 推广入口（2026-09-30）============
+   糖果色渐变大卡：左边名字 + 一句玩法 + 「开始玩」胶囊，右边 3×3 小棋盘循环演示「三连消除」，
+   角上三颗星星闪烁。整张卡是一个按钮。动效在 prefers-reduced-motion 下关掉。 */
+.game-promo.hide{display:none}
+.gp-card{position:relative;display:flex;align-items:center;gap:10px;width:100%;overflow:hidden;
+  border:0;border-radius:22px;padding:16px 14px 16px 18px;text-align:left;font:inherit;color:#fff;
+  background:linear-gradient(125deg,#FF8FA3 0%,#FFB07C 55%,#FFD36E 100%);
+  box-shadow:0 10px 24px rgba(255,130,120,.28)}
+.gp-card::before{content:"";position:absolute;left:-40px;bottom:-60px;width:160px;height:160px;border-radius:50%;
+  background:rgba(255,255,255,.16)}
+.gp-card:active{transform:scale(.98)}
+.gp-new{position:absolute;left:0;top:0;font-size:10.5px;font-weight:800;color:#E4476A;background:#FFF3C4;
+  border-radius:0 0 12px 0;padding:3px 10px 3px 12px;letter-spacing:.5px}
+.gp-text{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;padding-top:8px}
+.gp-name{font-size:21px;font-weight:900;letter-spacing:.5px;text-shadow:0 2px 0 rgba(214,86,86,.35)}
+.gp-sub{margin-top:5px;font-size:12px;line-height:1.55;color:rgba(255,255,255,.95)}
+.gp-cta{margin-top:10px;display:inline-flex;align-items:center;gap:3px;border-radius:999px;padding:6px 14px;
+  font-size:13px;font-weight:800;color:#E4476A;background:#fff;box-shadow:0 4px 10px rgba(200,70,70,.2);
+  animation:gpBeat 2.2s ease-in-out infinite}
+@keyframes gpBeat{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.08)}90%{transform:scale(.97)}}
+.gp-board{position:relative;flex:0 0 auto;display:grid;grid-template-columns:repeat(3,30px);gap:4px;padding:6px;
+  border-radius:14px;background:rgba(255,255,255,.35);transform:rotate(4deg)}
+.gp-board i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#fff;
+  font-style:normal;font-size:18px;line-height:1;box-shadow:0 2px 0 rgba(220,120,100,.25);
+  transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .3s}
+.gp-board i.is-pop{transform:scale(1.3);opacity:0}
+.gp-board i.is-in{animation:gpDrop .45s cubic-bezier(.3,1.5,.5,1)}
+@keyframes gpDrop{from{transform:translateY(-16px);opacity:0}to{transform:none;opacity:1}}
+.gp-board i.is-hint{background:#FFF6D6;box-shadow:0 0 0 2px #FFD36E}
+.gp-spark{position:absolute;color:#fff;font-size:12px;animation:gpTw 1.8s ease-in-out infinite;opacity:0}
+.gp-spark.s1{right:12px;top:8px}.gp-spark.s2{right:120px;top:14px;animation-delay:.6s;font-size:9px}
+.gp-spark.s3{right:16px;bottom:10px;animation-delay:1.2s;font-size:10px}
+@keyframes gpTw{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
+@media (prefers-reduced-motion:reduce){.gp-cta,.gp-spark{animation:none}.gp-spark{opacity:.8}}
+
 /* ============ 孕期小知识（2026-09-30）============
    外壳是公共白色通栏。里面三层：
      ① .pt-today  今日小知识大卡：暖粉渐变 + 右上角一颗慢慢浮动的「宝宝大小」emoji（本周水果）；