feat: settings interactions (theme/mask/brightness/server-url), svg icons, seconds display, page transition

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

@@ -31,13 +31,13 @@ window.updateHomeCards = async function () {
   startTimeCardTicker();
 };
 
-// 内置大字时间卡：当前时间 + 日期
-// Builtin big time card: current time + date
+// 内置大字时间卡：当前时间（时:分 + 小号秒）+ 日期
+// Builtin big time card: current time (HH:MM + small seconds) + date
 function renderTimeCard() {
   const el = document.createElement('div');
   el.className = 'card time-card';
   const now = new Date();
-  el.innerHTML = `<div class="big">${fmtTime(now)}</div><div class="sub">${fmtDate(now)}</div>`;
+  el.innerHTML = `<div class="big"><span class="hm">${fmtTime(now)}</span><span class="sec">${fmtSec(now)}</span></div><div class="sub">${fmtDate(now)}</div>`;
   return el;
 }
 
@@ -56,13 +56,17 @@ function fmtTime(d) {
   return `${hh}:${mm}`;
 }
 
+function fmtSec(d) {
+  return `:${String(d.getSeconds()).padStart(2, '0')}`;
+}
+
 function fmtDate(d) {
   const days = ['日', '一', '二', '三', '四', '五', '六'];
   return `${d.getMonth() + 1}月${d.getDate()}日 周${days[d.getDay()]}`;
 }
 
-// 每 10s 刷新一次大字时间卡
-// Refresh the big time card every 10 seconds
+// 每秒刷新一次大字时间卡（含秒显）
+// Refresh the big time card every second (including the seconds display)
 let timeTicker = null;
 function startTimeCardTicker() {
   if (timeTicker) return;
@@ -70,9 +74,10 @@ function startTimeCardTicker() {
     const card = document.querySelector('.time-card');
     if (!card) return;
     const now = new Date();
-    card.querySelector('.big').textContent = fmtTime(now);
+    card.querySelector('.hm').textContent = fmtTime(now);
+    card.querySelector('.sec').textContent = fmtSec(now);
     card.querySelector('.sub').textContent = fmtDate(now);
-  }, 10000);
+  }, 1000);
 }
 
 // 原生媒体会话事件：有媒体时在中间栏渲染媒体卡，无媒体时降级重新布局