Refactor code structure for improved readability and maintainability

2026-03-27 01:39:09 -07:00
parent db30afb035
commit fc1eb2040c
4 changed files with 742 additions and 573 deletions
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="zh-CN">
+<html lang="zh-CN" data-theme="ink">
  <head>
    <meta charset="UTF-8" />
    <meta
@@ -21,7 +21,13 @@
      <div class="header-title">梅子的成语填字</div>
      <div class="header-right">
        <button class="icon-btn" id="btnSound">🔊</button>
-        <button class="icon-btn" id="btnBigFont">字</button>
+        <div class="theme-btn-wrap" id="themeBtnWrap">
+          <button class="icon-btn" id="btnTheme" title="切换主题">🌙</button>
+          <div class="theme-tooltip" id="themeTooltip">
+            新！点我切换白天/夜间模式 ✨
+            <div class="theme-tooltip-arrow"></div>
+          </div>
+        </div>
        <button class="icon-btn" id="btnCheckin">📅</button>
      </div>
    </div>
@@ -29,7 +35,7 @@
      <div class="info-item">今日&nbsp;<span id="statScore">0</span>分</div>
      <div class="info-divider"></div>
      <div class="info-item">
-        🔥&nbsp;<span id="statCombo">0</span>&nbsp;连击
+        <span id="flameIcon">🔥</span>&nbsp;<span id="statCombo">0</span>&nbsp;连击
      </div>
      <div class="info-divider"></div>
      <div class="info-item info-wb" id="btnWrongBook">
@@ -65,7 +71,7 @@
      <div class="modal">
        <div
          class="modal-header"
-          style="background: linear-gradient(135deg, #6b4f2a, #c8941a)"
+          style=""
        >
          <div class="streak-display" id="wbCount">0</div>
          <div class="streak-label">道错题待复习 📖</div>
@@ -86,7 +92,7 @@
      <div class="modal">
        <div
          class="modal-header"
-          style="background: linear-gradient(135deg, #2a7a52, #4caf50)"
+          style=""
        >
          <div style="font-size: 2.2rem">🎉</div>
          <div