悄悄话流星七改：去中线、细体字、首次一闪提示、内容卡流星划完再出且改小 (v26100171)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

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:26100170 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
+<!-- V:26100171 缓存版本标记：改 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 第四节） -->
@@ -1783,6 +1783,7 @@
       <button class="whv-all" id="whvAll" type="button">全部</button>
     </header>
     <div class="wsk-title" id="wskTitle"></div>
+    <p class="wsk-tip" id="wskTip"><i></i>点一下小星星，听听她们说了什么</p>
     <div class="wsc" id="wsc" aria-live="polite"></div>
     <h2 class="sr-only" id="whpTitle">同孕周悄悄话</h2>
     <div class="whd" id="whDrawer" aria-hidden="true">

js/app.js

@@ -3,7 +3,7 @@
 (function () {
   'use strict';
   /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
-  var VER = '26100170';
+  var VER = '26100171';
   const $ = (s, c) => (c || document).querySelector(s);
   const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
 
@@ -3387,7 +3387,7 @@
       }).join('');
     }
     function paintCard(it, i) {
-      card.innerHTML = '<p class="wsc-q">' + (it.mine ? '<em>我说的</em>' : '') + esc(it.text) + '</p>' +
+      card.innerHTML = '<span class="wsc-k">' + (it.mine ? '我说的' : '刚划过的那颗星说') + '</span><p class="wsc-q">' + esc(it.text) + '</p>' +
         '<div class="wsc-m"><span>孕 ' + it.week + ' 周的妈妈 · ' + esc(it.ago) + '</span>' + hugBtn(it) + '</div>' +
         '<button type="button" class="wsc-next" data-next="1">下一颗 <svg viewBox="0 0 24 24" width="13" height="13"><path d="M9 5l7 7-7 7" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg></button>';
       card.classList.remove('show');
@@ -3397,13 +3397,25 @@
       const au = $$('#whvAura i');
       au[0].style.backgroundColor = pal[0]; au[1].style.backgroundColor = pal[1];
     }
-    function stopMeteor() {
+    /* 七改（用户：「点一个流星底下就出现文字，好像就不用看流星上面写什么了」）：
+       内容卡改到流星划完才浮出来（小字回放 + 抱抱），先看流星、再看卡；中途换星就不出旧卡。 */
+    function stopMeteor(done) {
       if (!mt) return;
       cancelAnimationFrame(mt.raf);
       mt.el.remove();
       mt.btn.classList.remove('flare', 'gone');
       mt.btn.classList.add('seen');
+      const m = mt;
       mt = null;
+      if (done) paintCard(m.it, m.i);
+    }
+    /* 第一次进来：一闪一闪的提示，点过一次星星就永久收起 */
+    const TIP = 'mmbox.whtip.v1';
+    const tipEl = $('#wskTip');
+    function tip(on) {
+      if (on) { try { on = !localStorage.getItem(TIP); } catch (e) {} }
+      else { try { localStorage.setItem(TIP, '1'); } catch (e) {} }
+      tipEl.classList.toggle('show', !!on);
     }
     function launch(i) {
       const it = list()[i - 1];
@@ -3412,12 +3424,13 @@
       cur = i;
       seen.add(it.id);
       $$('.wsk-st.hint', page).forEach(x => x.classList.remove('hint'));
+      tip(false);
+      card.classList.remove('show');
       $$('.wsk-st.cur', page).forEach(x => x.classList.remove('cur'));
-      paintCard(it, i);
       const btn = $('.wsk-st[data-go="' + i + '"]', page);
-      if (!btn) return;
+      if (!btn) { paintCard(it, i); return; }
       btn.classList.add('cur');
-      if (RM) { btn.classList.add('seen'); return; }
+      if (RM) { btn.classList.add('seen'); paintCard(it, i); return; }
       const pr = page.getBoundingClientRect(), br = btn.getBoundingClientRect();
       const x0 = br.left + br.width / 2 - pr.left, y0 = br.top + br.height / 2 - pr.top;
       /* 瞄准左下（屏幕左边外、六成高处）：越靠左起步角度越陡，保证在屏幕里拖得够长 */
@@ -3434,9 +3447,9 @@
       const body = off.length ? off[n - 1] + fs[n - 1] * .6 : gap;
       const el = document.createElement('div');
       el.className = 'wmt' + (it.mine ? ' mine' : '');
-      el.innerHTML = '<i class="wmt-l"></i><i class="wmt-c"></i><i class="wmt-h"></i>' + chars.map((c, k) => '<span style="font-size:' + fs[k].toFixed(1) + 'px">' + esc(c) + '</span>').join('');
+      el.innerHTML = '<i class="wmt-l"></i><i class="wmt-h"></i>' + chars.map((c, k) => '<span style="font-size:' + fs[k].toFixed(1) + 'px">' + esc(c) + '</span>').join('');
       page.insertBefore(el, card);
-      const line = el.children[0], core = el.children[1], head = el.children[2], sp = $$('span', el);
+      const line = el.children[0], head = el.children[1], sp = $$('span', el);
       line.style.height = (f1 * 1.9).toFixed(0) + 'px';
       line.style.marginTop = (-f1 * .95).toFixed(0) + 'px';
       /* 节奏：星闪 420ms → 以约 90px/s 起步并缓缓提速，整句拖出来后再留 0.7 秒给眼睛 → 加速度猛增，1.3 秒内唰出屏幕 */
@@ -3454,8 +3467,8 @@
         const st = Math.min(1.6, Math.max(0, (v - .25) / .5));
         head.style.transform = at + ' scaleX(' + (1 + st * 1.6).toFixed(2) + ')';
         const tl = Math.min(s, body + 70 + 260 * st);
-        line.style.width = core.style.width = tl.toFixed(0) + 'px';
-        line.style.transform = core.style.transform = at;
+        line.style.width = tl.toFixed(0) + 'px';
+        line.style.transform = at;
         const fade = u < .6 ? 1 : Math.max(0, 1 - (u - .6) / .4);
         el.style.setProperty('--bl', (st * 1.6).toFixed(1) + 'px');
         sp.forEach((c, k) => {
@@ -3464,10 +3477,10 @@
           c.style.opacity = (Math.min(1, d / 26) * fade).toFixed(2);
           c.style.transform = 'translate(' + (x0 + dx * d).toFixed(1) + 'px,' + (y0 + dy * d).toFixed(1) + 'px) translate(-50%,-50%) rotate(' + rot.toFixed(1) + 'deg)';
         });
-        if (u >= 1) { stopMeteor(); return; }
+        if (u >= 1) { stopMeteor(true); return; }
         mt.raf = requestAnimationFrame(frame);
       };
-      mt = { el, btn, raf: requestAnimationFrame(frame) };
+      mt = { el, btn, it, i, raf: requestAnimationFrame(frame) };
     }
     function nextStar() {
       const l = list(), n = l.length;
@@ -3507,6 +3520,7 @@
       cur = 0;
       card.classList.remove('show');
       paintPage();
+      tip(true);
       page.classList.add('show');
       page.setAttribute('aria-hidden', 'false');
       drawer(false);

mama-box.css

@@ -3938,3 +3938,20 @@ a.skip:focus{left:16px;top:16px}
 .wsk-st.flare i{animation:wskFlare2 .42s ease-out forwards}
 @keyframes wskFlare2{0%{transform:scale(1)}55%{transform:scale(3.4);box-shadow:0 0 26px 14px #fff,0 0 60px 24px rgba(230,210,255,.7)}100%{transform:scale(2);box-shadow:0 0 20px 10px #fff}}
 .wsk-st.gone{opacity:0;transition:opacity .5s}
+/* 七改：去掉中线；字改细体更清楚；首次提示一闪一闪；内容卡在流星划完才出、改小 */
+.wmt span{font-weight:300;letter-spacing:.5px;text-shadow:0 0 6px rgba(255,255,255,.45),0 0 14px rgba(200,170,255,.45)}
+.wmt.mine span{font-weight:300}
+.wsk-tip{position:absolute;left:0;right:0;top:56%;z-index:3;margin:0;display:flex;align-items:center;justify-content:center;gap:8px;
+  font-size:14px;font-weight:300;letter-spacing:2px;color:#FFF3E2;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;
+  text-shadow:0 0 10px rgba(255,220,180,.7)}
+.wsk-tip.show{visibility:visible;animation:wskBlink 1.8s ease-in-out infinite}
+.wsk-tip i{width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 8px 3px rgba(255,235,210,.9)}
+@keyframes wskBlink{0%,100%{opacity:.25}50%{opacity:1}}
+.wsc{padding:12px 16px 11px;border-radius:16px}
+.wsc-k{display:block;font-size:11px;color:rgba(255,226,190,.7);letter-spacing:1px}
+.wsc-q{margin-top:4px;font-size:15px;line-height:1.5;font-weight:400;color:rgba(255,255,255,.92);padding-right:70px}
+.wsc-m{margin-top:6px;font-size:11.5px}
+.wsc-next{top:10px;height:26px}
+.wsc .whp-hug{height:26px;padding:0 10px;font-size:12px}
+@media (prefers-reduced-motion:reduce){.wsk-tip.show{animation:none;opacity:1}}
+.wmt-l{filter:blur(9px);background:linear-gradient(90deg,rgba(255,255,255,.5),rgba(220,200,255,.22) 30%,rgba(255,180,200,.08) 70%,transparent)}