jone/mama-box
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: jone:69421dc8cc39a9c2aae1717cd2f680faa670d41a
Branches Tags
jone:main jone:preview
...
compare: jone:5afbfba0fc24ee373fe0b2f5d0d74e2526a9f88f
Branches Tags
jone:main jone:preview

5 Commits
69421dc8cc ... 5afbfba0fc

Author SHA1 Message Date
deploy
5afbfba0fc 首页宝宝踢：脚趾放大、边缘收紧（v26110647） 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
 2026-11-07 10:16:19 +00:00
deploy
fab95c6c0b 首页宝宝踢：脚印改成脚掌轮廓 + 五个脚趾（v26110646） 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
 2026-11-07 10:15:25 +00:00
deploy
95c274a074 首页宝宝踢：脚印改实心软边压痕，看得出来（v26110645） 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
 2026-11-07 10:14:19 +00:00
deploy
fa3ba191f2 首页宝宝踢：15～25 秒一次、20 周起以小脚为主、力度加大、脚印更明显（v26110644） 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
 2026-11-07 10:12:39 +00:00
deploy
9063e52e10 v26110643 测一测答题/结果页加底色和卡片设计（不再纯白） 
- 新增 topic/_shared/quiz-skin.css：主色浅底渐变 + 柔光 + 小圆点底纹，题目卡白卡+顶部色条，选项白卡带阴影
- guangchang/ceshi（30 个测试）和 topic/ceshi、duiyou、yali、yinshi、zhunbei 共 6 页引入

Co-Authored-By: AI 助手 <noreply@local>
 2026-11-07 08:18:03 +00:00
10 changed files with 79 additions and 19 deletions
Expand all files Collapse all files

1
guangchang/ceshi/index.html
View File

@@ -231,6 +231,7 @@ mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padd
.fade.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fade,.stage,.view.on,.mask.on{opacity:1;transform:none;transition:none;animation:none}}
</style>
<link rel="stylesheet" href="../../topic/_shared/quiz-skin.css?v=26110643"><!-- 11-07 答题页底色 / 卡片 -->
</head>
<body>
<svg class="hide" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">

4
index.html
View File

@@ -9,7 +9,7 @@
<title>兜爸心选 · 孕育陪伴</title>
<!-- 11-04 UGC 总开关（孕妈广场 + 测一测，后台 /box_bm/plaza 顶部切换），见 js/ugc.js -->
<script src="js/ugc.js?v=26110702"></script>
<!-- V:26110642 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26110647 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<link rel="stylesheet" href="mama-box.css">
<link rel="stylesheet" href="night.css?v=26110608">
<link rel="stylesheet" href="js/wh-cm.css?v=26110642">
@@ -2732,7 +2732,7 @@ html.night .rs-pan .rp-card{background:rgba(255,255,255,.06);border-color:rgba(2
})();
</script>
<!-- 2026-10-03 首页彩蛋：宝宝在肚皮底下动（独立文件，删掉这一行即整体下线；开关在「隐私权限」） -->
<script src="js/bump.js?v=26110487"></script>
<script src="js/bump.js?v=26110647"></script>
<!-- 2026-10-04 首页头图：按孕周换宝宝 + 阳光水波（独立文件） -->
<script src="js/hero-fx.js"></script>
<!-- 2026-10-05 首页头图：宝宝时不时动一动小手小脚（独立文件，删掉这一行即下线） -->

2
js/app.js
View File

@@ -3,7 +3,7 @@
(function () {
'use strict';
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
var VER = '26110642';
var VER = '26110647';
const $ = (s, c) => (c || document).querySelector(s);
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));

48
js/bump.js
View File

@@ -25,6 +25,7 @@
· 20～25 周「小鱼吐泡泡」：小、浅、一闪就没，常常连着两下；隔 10～25 秒才一次，周数越小越稀；滑过来也不追
· 26～33 周「拳打脚踢」：完整版——小脚丫 / 小拳头 / 膝盖 / 小屁股，中途还会再顶一下（11-05 用户：间隔改为 14～25 秒，原 4～8 秒）
· 34 周起「地方小了」：很少猛踢，多是一大片慢慢拱过去（翻身、屁股），节奏放慢（11-05 用户：间隔改为 14～25 秒，原 7～12 秒）
11-07 用户：「改成 15～25 秒一次，20 周之后都踢，力度大一点，能看出小脚印」→ 间隔统一 15～25 秒；三个阶段都以小脚丫为主（约 2/3），脚 amp 9.5→13，脚印加深放大。
孕周来自 app.js 的 mb-preg 事件（syncPregnancy 跑完后广播）。调试：URL 带 bumpweek=24 可强制按 24 周演示。
· 节奏（26 周起）：有时原地「哒哒哒」带节奏连踢几拍；有时踢完不歇，旁边紧接着再踢 1～2 下
开关：「我的 → 隐私权限 → 宝宝在肚皮下动」，存 localStorage 'mb_bump'（'0' = 关）；系统开了「减弱动态效果」也不出来。 */
@@ -63,7 +64,7 @@
/* ---------- 宝宝的各个部位：形状不同，动法不同（形状参数和 demo/bump 一致，脚趾去掉了；真实页面上停留时间加长到 3～5 秒，留够看见再伸手的时间） ---------- */
const PARTS = {
foot: { rx: 60, ry: 68, sharp: 2.5, amp: 9.5, dur: [3.6, 4.6] },
foot: { rx: 60, ry: 68, sharp: 2.5, amp: 13, dur: [3.6, 4.6] }, // 11-07 用户：「力度大一点，能看出小脚印」→ amp 9.5 → 13
fist: { rx: 44, ry: 44, sharp: 2.7, amp: 8, dur: [3, 3.8] },
knee: { rx: 48, ry: 80, sharp: 2.3, amp: 8.5, dur: [3.4, 4.2] },
butt: { rx: 92, ry: 78, sharp: 1.25, amp: 7, dur: [4, 5], roll: true },
@@ -83,10 +84,11 @@
/* ---------- 孕周 → 阶段 ---------- */
const STAGES = {
// drum：原地带节奏连踢的概率；chain：踢完不歇、旁边紧接着再踢的概率，最多连 chainMax 下（2026-10-04 用户：「有时会带点节奏、可以连续踢」）
// 11-05 起间隔统一 25～35 秒（gap() 读 GAP，这里各阶段的 gap 只作记录）
flutter: { order: ['flick', 'flick', 'tap', 'flick'], gap: [25, 35], kick: false, again: 0, double: .45, follow: false, drum: 0, chain: 0 },
active: { order: ORDER, gap: [25, 35], kick: true, again: .34, double: 0, follow: true, drum: .4, chain: .3, chainMax: 3 },
late: { order: ['roll', 'butt', 'foot', 'roll', 'knee'], gap: [25, 35], kick: false, again: .15, double: 0, follow: true, slow: true, drum: .22, chain: .15, chainMax: 2 }
// 11-05 起间隔统一 25～35 秒，11-07 改 15～25 秒（gap() 读 GAP，这里各阶段的 gap 只作记录）
/* 11-07 用户：「20 周之后都踢」→ 三个阶段都以小脚丫为主（约 2/3 是脚），20～25 周也会真踢、带脚印 */
flutter: { order: ['foot', 'tap', 'foot', 'flick', 'foot'], gap: [15, 25], kick: false, again: 0, double: .45, follow: false, drum: 0, chain: 0 },
active: { order: ['foot', 'fist', 'foot', 'knee', 'foot', 'butt'], gap: [15, 25], kick: true, again: .34, double: 0, follow: true, drum: .4, chain: .3, chainMax: 3 },
late: { order: ['foot', 'roll', 'foot', 'butt', 'foot', 'knee'], gap: [15, 25], kick: false, again: .15, double: 0, follow: true, slow: true, drum: .22, chain: .15, chainMax: 2 }
};
// 原地连踢的节奏型（每拍间隔，秒）：匀速「哒哒哒」、「哒哒—哒」、「哒—哒哒」、两下一组
const RHYTHMS = [[.42, .42, .42], [.3, .3, .75, .3], [.6, .28, .28], [.32, .9, .32], [.38, .38, .38, .38]];
@@ -97,7 +99,8 @@
// 两次之间隔多久：20～22 周最稀（再 +40%），越往后越接近本阶段的基准
/* 11-05 用户：「用户来到首页静止不动，至少停 25 秒、25～35 秒之间随机才踢一次，所有孕周都这样」→ 各阶段统一 25～35 秒，不再按阶段 / 20～22 周加长；
而且要「一直没动」：点屏幕、滑动都会把倒计时重新从 25～35 秒数起（见 restart() 调用处），回到首页、开关打开也从头数 */
const GAP = [25, 35];
/* 11-07 用户：「改成 15～25 秒一次」 */
const GAP = [15, 25];
const gap = () => GAP[0] + Math.random() * (GAP[1] - GAP[0]);
let lastInput = -1e9; /* 最近一次真正的手指 / 滚轮操作（图片加载、布局变化引起的 scroll 不算用户动了） */
const restart = () => { if (mode === 'wait') wait = gap(); };
@@ -453,17 +456,30 @@
}
cx.restore();
}
// 脚印：脚跟 / 足弓外沿 / 前掌 / 五个脚趾，单位坐标（脚尖朝 -y），整体缩到鼓包的 0.62
const FOOT = [[0, .42, .2], [.1, .12, .15], [-.02, -.18, .24], [-.17, -.5, .1], [-.04, -.57, .08], [.07, -.55, .07], [.16, -.5, .06], [.23, -.41, .055]];
/* 脚印（11-07 重画）：一整块脚掌轮廓（脚跟 → 内侧足弓收窄 → 前掌）+ 五个脚趾，单位坐标（脚尖朝 -y，大脚趾在 -x 一侧）。
11-07 用户：「力度大一点，能看出小脚印这种」→ 原来是 8 个极淡的软圆点（0.075），看不出是脚；
改成实心 + shadowBlur 软边的暖灰压痕（峰值约 0.34），左上错开一层白当受光沿，顶到一小半就开始显出来 */
const TOES = [[-.13, -.53, .1, .115], [.0, -.585, .075, .085], [.1, -.56, .066, .074], [.18, -.5, .058, .066], [.24, -.42, .05, .057]];
function soleShape(dx, dy) {
cx.beginPath();
cx.moveTo(dx, .52 + dy);
cx.bezierCurveTo(-.16 + dx, .52 + dy, -.17 + dx, .3 + dy, -.12 + dx, .16 + dy);
cx.bezierCurveTo(-.08 + dx, .05 + dy, -.21 + dx, -.08 + dy, -.21 + dx, -.22 + dy);
cx.bezierCurveTo(-.21 + dx, -.36 + dy, -.07 + dx, -.41 + dy, .04 + dx, -.385 + dy);
cx.bezierCurveTo(.16 + dx, -.36 + dy, .225 + dx, -.26 + dy, .205 + dx, -.12 + dy);
cx.bezierCurveTo(.185 + dx, .04 + dy, .15 + dx, .2 + dy, .14 + dx, .32 + dy);
cx.bezierCurveTo(.13 + dx, .46 + dy, .1 + dx, .52 + dy, dx, .52 + dy);
for (const [tx, ty, trx, try_] of TOES) { cx.moveTo(tx + dx + trx, ty + dy); cx.ellipse(tx + dx, ty + dy, trx, try_, 0, 0, 7); }
cx.fill();
}
function footprint(x, y, rx, ry, ang, k) {
if (k < .25) return;
const a = (k - .25) / .75, f = .62, dark = [], lite = [];
for (const [px, py, r] of FOOT) {
// 压痕：中性灰、很淡；左上角错开一点白，像皮肤底下被顶出的浅浅轮廓，而不是画上去的图案
dark.push([px * f, py * f, r * f * 1.5, 'rgba(70,62,58,' + (.075 * a).toFixed(3) + ')']);
lite.push([px * f - .03, py * f - .04, r * f * 1.2, 'rgba(255,255,255,' + (.12 * a).toFixed(3) + ')']);
}
blob(x, y, rx, ry, ang, dark.concat(lite));
if (k < .15) return;
const a = Math.min(1, (k - .15) / .6), f = .9;
cx.save(); cx.translate(x, y); cx.rotate(ang); cx.scale(rx * f, ry * f);
cx.shadowBlur = 3 * dpr;
cx.fillStyle = cx.shadowColor = 'rgba(255,255,255,' + (.3 * a).toFixed(3) + ')'; soleShape(-.025, -.03);
cx.fillStyle = cx.shadowColor = 'rgba(120,72,58,' + (.3 * a).toFixed(3) + ')'; soleShape(0, 0);
cx.restore();
}
function paint() {
cx.setTransform(dpr, 0, 0, dpr, 0, 0);

38
topic/_shared/quiz-skin.css Normal file
View File

@@ -0,0 +1,38 @@
/* 测一测 · 答题 / 结果页底色与卡片（2026-11-07 用户：「答题页面加一些设计感，加一些背景色，不要纯白色，所有答题页面都设计一下」）
共用页：guangchang/ceshi（30 个测试）+ topic/ceshi、duiyou、yali、yinshi、zhunbei，放在各页 <style> 之后覆盖。
· 底：主色浅底渐变 + 两团柔光 + 极淡小圆点，固定在 #scroll 背后（伪元素 position:fixed，iOS 上不跟着抖）；颜色全取各页的 --c / --cbg / --c2，换测试自动换色。
· 卡：题目卡白底 + 顶部主色渐变条 + 大引号水印；选项白卡带轻阴影（原来白底灰边，铺在白页上看不出层次）。
· 开始页原有自己的渐变，只把它的「渐到纯白」改成透明，露出这层底。 */
html,body{background:var(--cbg)}
#scroll{isolation:isolate}
#scroll:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(circle at 1px 1px,var(--c10) 1.2px,transparent 1.6px) 0 0/22px 22px,
radial-gradient(60% 38% at 100% 4%,var(--c2,color-mix(in srgb,var(--c) 28%,#fff)) 0%,transparent 70%),
radial-gradient(56% 34% at 0% 62%,color-mix(in srgb,var(--c2,color-mix(in srgb,var(--c) 28%,#fff)) 70%,#fff) 0%,transparent 72%),
radial-gradient(50% 30% at 96% 100%,rgba(255,255,255,.75) 0%,transparent 70%),
linear-gradient(180deg,var(--cbg) 0%,color-mix(in srgb,var(--cbg) 55%,#fff) 55%,var(--cbg) 100%)}
.bar.sh{background:color-mix(in srgb,var(--cbg) 82%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:var(--c10)}
#vStart.on{background:radial-gradient(120% 60% at 50% 0%,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 70%)}
/* ② 答题 */
.qtop .no b{font-size:20px}
.qcard{background:#fff;border-radius:26px;padding-top:24px;box-shadow:0 14px 34px -14px var(--c20),0 2px 6px var(--c06)}
.qcard:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--c),var(--c2,color-mix(in srgb,var(--c) 28%,#fff)))}
.qcard:after{width:150px;height:150px;right:-48px;top:-56px;background:radial-gradient(circle,var(--c10),transparent 70%)}
.qcard h2:before{content:"\201C";position:absolute;right:-6px;bottom:-34px;font:900 96px/1 Georgia,serif;color:var(--c06);pointer-events:none}
.opt{background:rgba(255,255,255,.92);border-color:transparent;box-shadow:0 4px 14px -6px var(--c20)}
.opt .l{background:var(--cbg);color:var(--c)}
.opt.sel{background:#fff;box-shadow:0 8px 20px -8px var(--c)}
.opt.ok{box-shadow:0 8px 20px -10px #2DB37D}.opt.no{box-shadow:none}
.exp{background:rgba(255,255,255,.88);box-shadow:0 4px 14px -8px var(--c20)}
.qtip{color:color-mix(in srgb,var(--c) 55%,#86909C)}
/* ③ 结果 */
.rcard{box-shadow:0 16px 36px -16px var(--c20)}
.read,.rv{background:rgba(255,255,255,.82);box-shadow:0 4px 14px -8px var(--c20)}
.rv .it{background:var(--cbg)}
.tp,.rec{background:rgba(255,255,255,.9);border-color:transparent;box-shadow:0 4px 14px -8px var(--c20)}
.oth{background:linear-gradient(110deg,#fff,rgba(255,255,255,.6) 80%)}
.btn.sec{background:rgba(255,255,255,.9)}
.foot{color:color-mix(in srgb,var(--c) 40%,#86909C)}

1
topic/ceshi/index.html
View File

@@ -176,6 +176,7 @@ mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padd
.fade.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fade,.stage,.view.on,.mask.on{opacity:1;transform:none;transition:none;animation:none}}
</style>
<link rel="stylesheet" href="../_shared/quiz-skin.css?v=26110643"><!-- 11-07 答题页底色 / 卡片 -->
</head>
<body>
<!-- 单色线性图标（每题一个场景图标 q-*） -->

1
topic/duiyou/index.html
View File

@@ -177,6 +177,7 @@ mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padd
.fade.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fade,.stage,.view.on,.mask.on{opacity:1;transform:none;transition:none;animation:none}}
</style>
<link rel="stylesheet" href="../_shared/quiz-skin.css?v=26110643"><!-- 11-07 答题页底色 / 卡片 -->
</head>
<body>
<!-- 单色线性图标（每题一个场景图标 q-*） -->

1
topic/yali/index.html
View File

@@ -195,6 +195,7 @@ mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padd
.care p{font-size:14.5px;line-height:1.8;color:var(--ink)}
.care p+p{margin-top:8px}
</style>
<link rel="stylesheet" href="../_shared/quiz-skin.css?v=26110643"><!-- 11-07 答题页底色 / 卡片 -->
</head>
<body>
<!-- 单色线性图标（每题一个场景图标 q-*） -->

1
topic/yinshi/index.html
View File

@@ -194,6 +194,7 @@ mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padd
.src{margin-top:10px;font-size:12px;color:var(--sub);line-height:1.6}
.warn{margin-top:20px;padding:10px 14px;border-radius:14px;background:var(--cbg);color:#4F7F2A;font-size:13px;line-height:1.6;text-align:center}
</style>
<link rel="stylesheet" href="../_shared/quiz-skin.css?v=26110643"><!-- 11-07 答题页底色 / 卡片 -->
</head>
<body>
<!-- 单色线性图标（每题一个场景图标 q-*） -->

1
topic/zhunbei/index.html
View File

@@ -195,6 +195,7 @@ mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padd
.fade.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fade,.stage,.view.on,.mask.on{opacity:1;transform:none;transition:none;animation:none}}
</style>
<link rel="stylesheet" href="../_shared/quiz-skin.css?v=26110643"><!-- 11-07 答题页底色 / 卡片 -->
</head>
<body>
<!-- 单色线性图标（每题一个场景图标 q-*） -->