fix: progress bar padding, time card stacked layout

app/src/main/assets/h5/css/app.css

@@ -171,28 +171,34 @@ body {
   justify-content: center;
 }
 
-.time-card .big {
+/* 小时 / 分钟：上下两行大字，等宽数字避免宽度抖动 */
-  font-size: clamp(26px, 3.5vw, 52px);
+/* Hour / minute: stacked large lines, tabular numerals avoid width jitter */
+.time-card .h,
+.time-card .m {
+  font-size: clamp(30px, 4vw, 54px);
   font-weight: 300;
-  line-height: 1;
+  line-height: 1.05;
-  /* 等宽数字：1 和 0 等宽，避免时间刷新时卡片宽度抖动 */
-  /* Tabular numerals: 1 and 0 are equal-width, avoiding card width jitter on refresh */
   font-variant-numeric: tabular-nums;
   font-feature-settings: "tnum";
 }
 
-/* 秒显：小号、弱化，紧跟时:分之后 */
+/* 秒显：小号、弱化，位于分钟下方 */
-/* Seconds: small and dim, trailing the HH:MM */
+/* Seconds: small and dim, below the minute */
 .time-card .sec {
-  font-size: 24px;
+  font-size: 18px;
   font-weight: 300;
   color: var(--text-dim);
-  margin-left: 2px;
+  margin-top: 4px;
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum";
 }
 
-.time-card .sub {
+/* 年月日星期：靠卡片底部，填充高处留白 */
-  margin-top: 8px;
+/* Full date: pinned to the card bottom, filling the tall space */
-  font-size: 14px;
+.time-card .date-full {
+  margin-top: auto;
+  padding-top: 8px;
+  font-size: 13px;
   color: var(--text-dim);
 }
 
@@ -287,7 +293,10 @@ body {
 /* Progress bar */
 .media-card .prog {
   margin-top: auto;
-  padding-top: 12px;
+  /* 不要用 padding-top：全局 box-sizing:border-box 下 padding 会吃掉 height，
+     导致 .bar 的 height:100% 变成 0 */
+  /* No padding-top: with box-sizing:border-box the padding eats the height,
+     making .bar's height:100% zero */
   height: 4px;
   border-radius: 999px;
   background: var(--glass-border);

app/src/main/assets/h5/js/pages/home.js

@@ -49,13 +49,17 @@ function renderCards(catalog) {
   });
 }
 
-// 内置大字时间卡：当前时间（时:分 + 小号秒）+ 日期
+// 内置大字时间卡：小时/分钟上下两行大字 + 秒小号 + 年月日星期
-// Builtin big time card: current time (HH:MM + small seconds) + date
+// Builtin big time card: hour/minute stacked large + small seconds + full date
 function renderTimeCard() {
   const el = document.createElement('div');
   el.className = 'card time-card';
   const now = new Date();
-  el.innerHTML = `<div class="big"><span class="hm">${fmtTime(now)}</span><span class="sec">${fmtSec(now)}</span></div><div class="sub">${fmtDate(now)}</div>`;
+  el.innerHTML = `
+    <div class="h">${fmtHour(now)}</div>
+    <div class="m">${fmtMinute(now)}</div>
+    <div class="sec">${fmtSec(now)}</div>
+    <div class="date-full">${fmtFullDate(now)}</div>`;
   return el;
 }
 
@@ -68,19 +72,21 @@ function renderGenericCard(id) {
   return el;
 }
 
-function fmtTime(d) {
+function fmtHour(d) {
-  const hh = String(d.getHours()).padStart(2, '0');
+  return String(d.getHours()).padStart(2, '0');
-  const mm = String(d.getMinutes()).padStart(2, '0');
+}
-  return `${hh}:${mm}`;
+
+function fmtMinute(d) {
+  return String(d.getMinutes()).padStart(2, '0');
 }
 
 function fmtSec(d) {
-  return `:${String(d.getSeconds()).padStart(2, '0')}`;
+  return String(d.getSeconds()).padStart(2, '0');
 }
 
-function fmtDate(d) {
+function fmtFullDate(d) {
   const days = ['日', '一', '二', '三', '四', '五', '六'];
-  return `${d.getMonth() + 1}月${d.getDate()}日 周${days[d.getDay()]}`;
+  return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日 周${days[d.getDay()]}`;
 }
 
 // 每秒刷新一次大字时间卡（含秒显）
@@ -92,9 +98,10 @@ function startTimeCardTicker() {
     const card = document.querySelector('.time-card');
     if (!card) return;
     const now = new Date();
-    card.querySelector('.hm').textContent = fmtTime(now);
+    card.querySelector('.h').textContent = fmtHour(now);
+    card.querySelector('.m').textContent = fmtMinute(now);
     card.querySelector('.sec').textContent = fmtSec(now);
-    card.querySelector('.sub').textContent = fmtDate(now);
+    card.querySelector('.date-full').textContent = fmtFullDate(now);
   }, 1000);
 }