diff --git a/index.html b/index.html index 861fd27..7a1b8b0 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ 兜爸心选 · 孕育陪伴 - + @@ -1544,6 +1544,7 @@

记一下

+

— · 今天已记 4 条

@@ -1564,6 +1565,18 @@ 删掉后 .quick-row 由 4 列改成 3 列，见 style.css -->
+ +
+ +
+
+
+
先记这件花一分钟就好
+
+
全部孕期工具
diff --git a/js/app.js b/js/app.js index d73dc05..680c442 100644 --- a/js/app.js +++ b/js/app.js @@ -3,7 +3,7 @@ (function () { 'use strict'; /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */ - var VER = '26100165'; + var VER = '26100166'; const $ = (s, c) => (c || document).querySelector(s); const $$ = (s, c) => Array.from((c || document).querySelectorAll(s)); @@ -541,7 +541,9 @@ nav 排到 .sheet 前面之后那条规则永远不再命中，圆钮会直接不转 —— 而且 这种「动画没了」的回归 jsdom 根本量不到，只能靠这段注释和下面那条断言钉住。 ⚠️ 别图省事删掉这两行改回兄弟选择器，除非你把 nav 也挪回文件末尾。 */ + let sheetPaint = null; // 「记一下」今天卡 + 先记这件（定义在今日脚印那段，依赖 _fpData / todoLine） function openSheet() { + if (sheetPaint) try { sheetPaint(); } catch (e) { /* 只是装饰层，出错不挡弹窗 */ } scrim.classList.add('show'); sheet.classList.add('show'); phoneEl.classList.add('sheet-open'); @@ -4414,6 +4416,57 @@ if (sub) sub.textContent = n ? '完成任意一件，今天的第一只小脚丫就会印上来' : '去上面的工具记一笔，今天的第一只小脚丫就会印上来'; } + /* 「记一下」弹窗上半部分（2026-10-02 用户：「有点单薄」）。数据只认 _fpData（今日脚印接口）， + used = 今天用过的工具，unused = 还没用的；拿不到就把两块藏起来，退回原来的「标题 + 宫格」。 */ + sheetPaint = function () { + const n = new Date(Date.now() + 8 * 3600e3); // 北京时间 + const wd = '日一二三四五六'[n.getUTCDay()]; + const wk = state.week ? '孕 ' + state.week + ' 周' + (state.day ? ' +' + state.day + ' 天' : '') + ' · ' : ''; + $('#skSub').textContent = wk + (n.getUTCMonth() + 1) + '月' + n.getUTCDate() + '日 周' + wd; + const r = _fpMode === 'rows' || _fpMode === 'guide' ? (_fpData || {}) : null; + const today = $('#skToday'), next = $('#skNext'); + today.classList.toggle('hide', !r); + next.classList.add('hide'); + $$('#appsGrid .app').forEach(b => b.classList.remove('is-done')); + if (!r) return; + const used = (r.used || []).filter(u => u.appName), unused = r.unused || []; + const total = used.length + unused.length; + const nm = state.babyName || '宝宝'; + $('#skNum').textContent = used.length; + $('#skArc').style.strokeDasharray = (total ? used.length / total * 113.1 : 0).toFixed(1) + ' 113.1'; + $('#skLine').textContent = used.length ? '今天已经记了 ' + used.length + ' 项' : '今天还没有记录'; + const done = $('#skDone'); + done.textContent = ''; + if (used.length) { + used.slice(0, 4).forEach(u => { const c = document.createElement('i'); c.textContent = u.appName; done.appendChild(c); }); + if (used.length > 4) done.append('等 ' + used.length + ' 项'); + } else done.textContent = '记下一笔，就是' + nm + '今天的第一只小脚丫'; + /* 宫格里今天用过的工具打个小勾 */ + const usedIds = new Set(used.map(u => u.identifier).filter(Boolean)); + $$('#appsGrid .app').forEach(b => { if (usedIds.has(decodeURIComponent(b.dataset.id || ''))) b.classList.add('is-done'); }); + /* 先记这件：前 2 个还没用的 */ + const box = $('#skCards'); + box.innerHTML = ''; + unused.slice(0, 2).forEach((u, i) => { + const ident = u.identifier || '', app = ident ? APP_BY_ID[ident] : null; + const href = u.url || (app && app.url) || ''; + const name = u.appName || (app && app.name) || ''; + if (!href || !name) return; + const [t, d] = todoLine(name); + const logo = (app && (app.logo || app.icon)) || ''; + const c = document.createElement('button'); + c.type = 'button'; + c.className = 'sk-card ripple c' + i; + c.innerHTML = (logo ? '' : '') + '去记 ›'; + if (logo) c.querySelector('img').src = logo; else c.querySelector('.sk-l').textContent = name.slice(0, 1); + c.querySelector('b').textContent = t; + c.querySelector('em').textContent = d; + c.addEventListener('click', () => jumpApp(href, (app && app.identifier) || ident)); + box.appendChild(c); + }); + next.classList.toggle('hide', !box.childElementCount); + }; + /* 加载中的中性占位（不是假数据）：与 index.html 里那条首屏占位同构 */ function pendingFootprintStep() { const d = document.createElement('div'); d.className = 'step'; diff --git a/mama-box.css b/mama-box.css index c6c2913..dfb608f 100644 --- a/mama-box.css +++ b/mama-box.css @@ -3747,3 +3747,38 @@ a.skip:focus{left:16px;top:16px} .whl .whp-hug{height:26px;padding:0 10px;font-size:12px} @media (prefers-reduced-motion:reduce){.whs-star i,.whs-star.on::after,.whf-q.in{animation:none!important}} .whf-nav button{display:grid;place-items:center;padding:0;line-height:1} + +/* ================= 「记一下」弹窗加厚（2026-10-02）================= + 用户：「点记一下那个弹窗……现在有点单薄」。标题下加日期孕周；宫格上面加「今天卡」和「先记这件」两张大卡。 */ +.sheet-head p.sk-sub{margin-top:6px;font-size:13px;color:#9C8F88;letter-spacing:.2px} +.sk-today{display:flex;align-items:center;gap:14px;margin:0 4px;padding:14px 16px;border-radius:20px; + background:linear-gradient(120deg,#FFF3EC,#FDEEF0);box-shadow:inset 0 0 0 1px #F6E2DA} +.sk-today.hide,.sk-next.hide{display:none} +.sk-ring{position:relative;flex:none;width:52px;height:52px} +.sk-ring svg{width:100%;height:100%;transform:rotate(-90deg)} +.sk-ring circle{fill:none;stroke:#F6DED5;stroke-width:4.5} +.sk-ring .sk-arc{stroke:#E8836B;stroke-linecap:round;stroke-dasharray:0 113.1;transition:stroke-dasharray .8s var(--ease)} +.sk-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:18px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums} +.sk-tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px} +.sk-tt>b{font-size:15.5px;font-weight:700;color:var(--ink)} +.sk-tt>span{display:flex;flex-wrap:wrap;gap:5px;font-size:12px;color:#9C8F88;line-height:1.5} +.sk-tt>span i{font-style:normal;font-size:11.5px;font-weight:600;color:#B0604C;background:#fff;padding:2px 8px 2px 18px;border-radius:99px;position:relative} +.sk-tt>span i::before{content:"";position:absolute;left:7px;top:50%;width:6px;height:3px;margin-top:-3px;border:solid #E8836B;border-width:0 0 1.6px 1.6px;transform:rotate(-45deg)} +.sk-next .apps-head{margin-top:20px;margin-bottom:10px} +.sk-hint{margin-left:8px;font-size:12px;font-weight:500;color:#B7A69C} +.sk-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 4px} +.sk-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:128px;padding:14px 14px 12px;border-radius:20px;text-align:left; + background:#fff;box-shadow:0 6px 18px rgba(120,80,60,.07),inset 0 0 0 1px #F1E6DF;overflow:hidden} +.sk-card.c0{background:linear-gradient(160deg,#FFF6F0,#fff 70%)} +.sk-card.c1{background:linear-gradient(160deg,#F3F6FF,#fff 70%)} +.sk-card img,.sk-card .sk-l{width:38px;height:38px;border-radius:12px;object-fit:contain;margin-bottom:6px} +.sk-card .sk-l{display:grid;place-items:center;background:#F4E5DE;color:#B0604C;font-weight:800} +.sk-card b{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.3} +.sk-card em{font-style:normal;font-size:11.5px;line-height:1.45;color:#9C8F88;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} +.sk-go{margin-top:auto;padding-top:8px;font-size:12px;font-weight:700;color:#C2614A} +.sk-card:active{transform:scale(.98)} +/* 宫格：今天用过的打个小勾 */ +.apps-grid .app{position:relative} +.apps-grid .app.is-done::after{content:"";position:absolute;top:-3px;right:calc(50% - 33px);width:18px;height:18px;border-radius:50%; + background:#5BB58A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.5L12 5.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:0 0 0 2px #FAF5F1} +.apps-head.for-all{margin-top:22px}