From 5da526fc5c9a2e6a330590fad58881d6e21db3a0 Mon Sep 17 00:00:00 2001
From: Karlcarlo <karlcarlo@163.com>
Date: Thu, 1 Oct 2026 16:29:56 +0000
Subject: [PATCH] =?UTF-8?q?=E5=BA=95=E9=83=A8=E5=AF=BC=E8=88=AA=E6=94=B9?=
 =?UTF-8?q?=E7=89=88=EF=BC=88=E9=80=89=E4=B8=AD=E8=83=B6=E5=9B=8A+?=
 =?UTF-8?q?=E5=8D=87=E8=B5=B7=E7=9A=84=E8=AE=B0=E4=B8=80=E4=B8=8B=E5=9C=86?=
 =?UTF-8?q?=E9=92=AE=EF=BC=89=EF=BC=9B=E4=BB=8A=E6=97=A5=E8=84=9A=E5=8D=B0?=
 =?UTF-8?q?=E6=97=A0=E8=AE=B0=E5=BD=95=E6=97=B6=E6=98=BE=E7=A4=BA=E4=B8=A4?=
 =?UTF-8?q?=E6=9D=A1=E7=A4=BA=E4=BE=8B?=
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   |  5 +++--
 js/app.js    | 18 ++++++++++++++++--
 mama-box.css | 37 +++++++++++++++++++++++++++++++++++++
 3 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index e7da1db..5690731 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:26100140 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
+<!-- V:26100141 缓存版本标记：改 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 第四节） -->
@@ -397,7 +397,8 @@
             </div>
             <button class="fp-all" data-goto="archive">全部<i>›</i></button>
           </div>
-          <div class="steps fp-steps ripple" id="tlSteps" data-goto="archive" role="button" tabindex="0" aria-label="宝宝的今日脚印，查看完整档案">
+          <p class="fp-demo-t" id="fpDemoT" style="display:none"><i>✦</i>记上一笔，这里就会长成这样</p>
+        <div class="steps fp-steps ripple" id="tlSteps" data-goto="archive" role="button" tabindex="0" aria-label="宝宝的今日脚印，查看完整档案">
             <div class="step"><span class="st-time">今天</span><span class="st-dot"></span><span class="st-txt">正在获取今天的脚印…</span><span class="st-from"></span></div>
           </div>
           <div class="tl-guide fp-guide" id="tlGuide" style="display:none">
diff --git a/js/app.js b/js/app.js
index 22029b0..79100c9 100644
--- a/js/app.js
+++ b/js/app.js
@@ -3,7 +3,7 @@
 (function () {
   'use strict';
   /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
-  var VER = '26100140';
+  var VER = '26100141';
   const $ = (s, c) => (c || document).querySelector(s);
   const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
 
@@ -4051,7 +4051,17 @@
     tl.classList.toggle('no-ai', !txt);
     tl.classList.toggle('ai-warn', !!(r.digest && r.digest.warn));
     if (guide) guide.style.display = (mode === 'guide') ? '' : 'none';
-    if (mode === 'guide') { steps.style.display = 'none'; steps.innerHTML = ''; renderGuide(r); return; }
+    /* 2026-10-01 用户要求：还没脚印时先给两条「用过之后长这样」的示例。
+       ⚠️ 这是**明确标注的示例**（上方提示语 + 每张卡的「示例」角标 + 整体变淡），不是冒充真实记录；
+          别把它挪到 rows 分支里，也别去掉标注。 */
+    const demoT = $('#fpDemoT');
+    if (demoT) demoT.style.display = (mode === 'guide') ? '' : 'none';
+    steps.classList.toggle('is-demo', mode === 'guide');
+    if (mode === 'guide') {
+      steps.style.display = ''; steps.innerHTML = '';
+      FP_DEMO.forEach(row => { const el = buildFootprintStep(row); el.querySelector('.st-card').insertAdjacentHTML('beforeend', '<i class="st-demo">示例</i>'); steps.append(el); });
+      renderGuide(r); return;
+    }
     steps.style.display = '';
     steps.innerHTML = '';
     if (mode === 'pending') { steps.append(pendingFootprintStep()); return; }
@@ -4179,6 +4189,10 @@
     d.append(dot, card);
     return d;
   }
+  const FP_DEMO = [
+    { at: '09:12', label: '数胎动 12 次，小家伙今天特别活跃', app: '数胎动', detail: '1 小时内' },
+    { at: '20:30', label: '体重 58.6 kg，比上周稳稳 +0.3', app: '孕期体重', detail: '' },
+  ];
   const FP_FOOT = '<svg viewBox="0 0 16 22" width="12" height="16" aria-hidden="true"><ellipse cx="8.4" cy="13.6" rx="4.6" ry="6.6" fill="currentColor"/><circle cx="3.6" cy="4.6" r="1.7" fill="currentColor"/><circle cx="6.6" cy="2.6" r="1.6" fill="currentColor"/><circle cx="9.8" cy="2.4" r="1.5" fill="currentColor"/><circle cx="12.6" cy="3.8" r="1.3" fill="currentColor"/></svg>';
 
   /* 无足迹占位行：同构的一行，读屏和眼睛都不会把空卡当成坏卡。 */
diff --git a/mama-box.css b/mama-box.css
index 6781c28..9664fff 100644
--- a/mama-box.css
+++ b/mama-box.css
@@ -3207,3 +3207,40 @@ a.skip:focus{left:16px;top:16px}
 .gift2 .sb-faces i:nth-child(n+4){display:none}
 .gift2 .sb-row .pill-free{padding:5px 10px}
 .gift2 .unlock a{white-space:nowrap}
+
+/* 今日脚印 · 无记录时的两条示例（.is-demo） */
+.fp-demo-t{display:flex;align-items:center;gap:6px;margin:14px 0 -4px;font-size:12.5px;font-weight:700;color:#A57F70}
+.fp-demo-t i{font-style:normal;color:#F4A08A}
+.fp-demo-t em{font-style:normal;margin-left:auto;font-size:10.5px;font-weight:800;color:#C0704F;background:#FFF0E8;border-radius:6px;padding:2px 7px}
+.fp2 .fp-steps.is-demo .step{opacity:.72}
+.fp2 .fp-steps.is-demo .st-card{position:relative;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1.5px #F6DDD2;border:0;
+  background-image:repeating-linear-gradient(135deg,rgba(255,236,226,.5) 0 6px,transparent 6px 12px)}
+.st-demo{position:absolute;right:8px;top:8px;font-style:normal;font-size:10px;font-weight:800;color:#fff;background:#F4A08A;border-radius:6px;padding:1px 6px}
+.fp2 .fp-steps.is-demo + .fp-guide{margin-top:10px}
+
+/* ================= 底部导航 2026-10-01 改版 =================
+   白色磨砂药丸 + 选中项一颗暖色胶囊托底（图标+字一起包住，带一点弹跳）；
+   中间「记一下」升起成一颗带白圈的大圆钮，白圈和药丸同色 → 看着像从药丸里鼓出来的；圆钮外一圈呼吸光环。 */
+.tabbar{left:16px;right:16px;height:62px;border-radius:31px;padding:0 6px;
+  background:rgba(255,255,255,.94);
+  box-shadow:0 12px 32px rgba(170,90,60,.18),0 2px 6px rgba(170,90,60,.08),inset 0 0 0 1px rgba(255,220,205,.6)}
+.tab{gap:2px;color:#B4A79F;z-index:0}
+.tab::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:62px;height:50px;margin:-25px 0 0 -31px;border-radius:20px;
+  background:linear-gradient(160deg,#FFF0E8,#FFE0D3);box-shadow:inset 0 0 0 1px rgba(255,190,165,.45);
+  opacity:0;transform:scale(.6);transition:opacity .25s,transform .4s cubic-bezier(.3,1.6,.5,1)}
+.tab.is-active::before{opacity:1;transform:scale(1)}
+.tab.is-active{color:#F4593C}
+.tab.is-active .t-ico{transform:translateY(-1px);animation:tabPop .45s cubic-bezier(.3,1.6,.5,1)}
+@keyframes tabPop{0%{transform:scale(.7)}100%{transform:translateY(-1px) scale(1)}}
+.tab.is-active .t-txt{font-weight:800}
+.tab-fab::before{display:none}
+.tab-fab{justify-content:flex-end;padding-bottom:8px}
+.tab-fab .fab{position:absolute;left:50%;top:-22px;width:52px;height:52px;margin-left:-26px;
+  border:4px solid #fff;box-sizing:content-box;background:#fff;
+  box-shadow:0 -4px 10px rgba(170,90,60,.08),0 8px 18px rgba(244,89,60,.38)}
+.tab-fab .fab::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(244,89,60,.45);
+  animation:fabHalo 2.4s ease-out infinite;pointer-events:none}
+@keyframes fabHalo{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.35);opacity:0}}
+.tab-fab .t-txt{font-weight:800;color:#F4593C}
+.t-badge{top:6px;left:calc(50% + 9px);border-color:#fff;box-shadow:0 0 0 2px rgba(255,59,48,.18)}
+@media (prefers-reduced-motion:reduce){.tab-fab .fab::after,.tab.is-active .t-ico{animation:none}}