Update index.html

index.html

@@ -203,10 +203,27 @@
       touch-action: none;
     }
 
-    .board-card[data-cat="exam"] { --theme-color: #38bdf8; }
-    .board-card[data-cat="sports"] { --theme-color: #f97316; }
-    .board-card[data-cat="event"] { --theme-color: #ec4899; }
-    .board-card[data-cat="life"] { --theme-color: #10b981; }
+    /* 4 大分類的主題代表色 */
+    .board-card[data-cat="exam"] {
+      --theme-color: #38bdf8;
+      --num-color: #38bdf8;
+      --num-glow: rgba(56, 189, 248, 0.35);
+    }
+    .board-card[data-cat="sports"] {
+      --theme-color: #f97316;
+      --num-color: #fb923c;
+      --num-glow: rgba(249, 115, 22, 0.35);
+    }
+    .board-card[data-cat="event"] {
+      --theme-color: #ec4899;
+      --num-color: #f472b6;
+      --num-glow: rgba(236, 72, 153, 0.35);
+    }
+    .board-card[data-cat="life"] {
+      --theme-color: #10b981;
+      --num-color: #34d399;
+      --num-glow: rgba(16, 185, 129, 0.35);
+    }
 
     .board-card::before {
       content: '';
@@ -219,9 +236,13 @@
       z-index: 2;
     }
 
+    /* 重點高亮卡片：覆蓋為極致琥珀金強調色 */
     .board-card.highlight {
       border: 1.8px solid #fbbf24;
-      box-shadow: 0 16px 40px rgba(251, 191, 36, 0.25);
+      box-shadow: 0 16px 40px rgba(251, 191, 36, 0.28);
+      --theme-color: #fbbf24;
+      --num-color: #fbbf24;
+      --num-glow: rgba(251, 191, 36, 0.45);
     }
     .board-card.highlight::before {
       background: #fbbf24;
@@ -262,7 +283,6 @@
     }
     .cat-icon svg { width: 20px; height: 20px; }
     .board-card.highlight .cat-icon {
-      color: #fbbf24;
       background: rgba(251, 191, 36, 0.16);
     }
     .card-title {
@@ -280,6 +300,7 @@
       padding-left: 2px;
     }
 
+    /* 數字文字色彩重新連動主題色 */
     .card-center-metric {
       flex: 1;
       display: flex;
@@ -294,15 +315,13 @@
       line-height: 1;
       letter-spacing: -2px;
       font-feature-settings: "tnum";
-      color: var(--primary-text);
-    }
-    .board-card.highlight .metric-number {
-      color: #fbbf24;
-      text-shadow: 0 0 30px rgba(251, 191, 36, 0.4);
+      color: var(--num-color);
+      text-shadow: 0 0 24px var(--num-glow);
     }
     .metric-unit {
       font-size: 1.2rem;
-      color: var(--secondary-text);
+      color: var(--theme-color);
+      opacity: 0.85;
       font-weight: 500;
     }
 
@@ -324,9 +343,6 @@
       border-radius: 999px;
       transition: width 0.4s ease;
     }
-    .board-card.highlight .progress-fill {
-      background: #fbbf24;
-    }
     .metric-details {
       display: flex;
       justify-content: space-between;
@@ -601,7 +617,7 @@
 
   <!-- 編輯狀態控制列 -->
   <div class="edit-banner" id="editBanner">
-    <span style="font-size:0.85rem; color:#38bdf8;">✦ 自由排版中：拖曳卡片或拉動右下角角標</span>
+    <span style="font-size:0.85rem; color:#38bdf8;">✦ 自由排版中：拖曳卡片或縮放邊角</span>
     <button class="btn btn-secondary" onclick="randomizeQuote()">隨機金句</button>
     <button class="btn btn-secondary" onclick="openAdminDrawer()">作息與設定</button>
     <button class="btn btn-success" onclick="exitEditMode()">完成並鎖定</button>
@@ -653,10 +669,9 @@
     </div>
 
     <div class="drawer-content">
-      <!-- 固化預設值與資料備份核心 -->
       <div class="setting-block" style="border: 1px solid #38bdf8;">
         <h4>永久固化排版 (解決重開機重設問題)</h4>
-        <p style="font-size:0.8rem; color:#94a3b8;">排版好後，點擊下方「固化為全新預設檔」，將下載的檔案直接取代原本的 `index.html`，重開機保證 100% 永不跑位。</p>
+        <p style="font-size:0.8rem; color:#94a3b8;">排版完成後，點擊下方「固化為全新預設檔」，下載覆蓋原本的 `index.html`，重開機保證 100% 永不跑位。</p>
         
         <div style="display:flex; flex-direction:column; gap:8px;">
           <button class="btn btn-success" style="padding:10px; font-size:0.9rem;" onclick="exportAsHardcodedHtml()">⭐ 固化為全新預設檔 (下載 index.html)</button>
@@ -691,7 +706,7 @@
 
       <div class="setting-block">
         <div style="display:flex; justify-content:space-between; align-items:center;">
-          <h4>倒數項目資料庫</h4>
+          <h4>倒數項目資料庫 (可複選多個高亮)</h4>
           <button class="btn btn-primary" onclick="addNewEvent()">+ 新增卡片</button>
         </div>
         <div id="editorItemList" style="display:flex; flex-direction:column; gap:10px;"></div>
@@ -825,7 +840,6 @@
       "16:00-16:45"
     ];
 
-    // 本地預設種子（可透過一鍵固化功能直接改寫）
     /*START_DEFAULT_DATA*/
     const DEFAULT_DATA = {
       theme: "dark-slate",
@@ -845,9 +859,6 @@
     let isClassBreak = false;
     let currentPin = "";
 
-    // =========================================
-    // IndexedDB 持久化雙重快取架構
-    // =========================================
     function openDB() {
       return new Promise((resolve) => {
         const req = indexedDB.open("ClassroomFocusDB", 1);
@@ -901,14 +912,10 @@
       saveToIndexedDB(appState);
     }
 
-    // =========================================
-    // 固化為全新預設檔 (下載即可徹底解決跑位)
-    // =========================================
     function exportAsHardcodedHtml() {
       let currentHtml = document.documentElement.outerHTML;
       const targetDataString = JSON.stringify(appState, null, 2);
       
-      // 正則精準替換 DEFAULT_DATA 變數區塊
       const regex = /\/\*START_DEFAULT_DATA\*\/[\s\S]*?\/\*END_DEFAULT_DATA\*\//;
       const replacement = `/*START_DEFAULT_DATA*/\n    const DEFAULT_DATA = ${targetDataString};\n    /*END_DEFAULT_DATA*/`;
       
@@ -924,7 +931,7 @@
       document.body.removeChild(a);
       URL.revokeObjectURL(url);
       
-      alert("✓ 固化成功！已為您下載最新的 `index.html`。\n請用這個檔案直接覆蓋 Lively 中的原檔，以後開機將原生讀取這份排版，永不重設！");
+      alert("✓ 固化成功！請用剛下載的 `index.html` 直接覆蓋 Lively 資料夾內的原檔，開機將永久預設此版面。");
     }
 
     function openPinModal() {
@@ -1021,7 +1028,7 @@
           renderBoard();
           updateClock();
           closeAdminDrawer();
-          alert("✓ 設定已成功匯入並寫入持久快取！");
+          alert("✓ 設定已成功匯入！所有排版、顏色與重點標記已即刻生效。");
         } else {
           alert("設定檔格式不符。");
         }
@@ -1202,6 +1209,7 @@
       });
     }
 
+    // 極光引擎 (支援多重高亮焦點光暈)
     const canvas = document.getElementById("aurora-canvas");
     const ctx = canvas.getContext("2d");
     let animId = null;
@@ -1218,9 +1226,11 @@
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       step += 0.008;
 
-      const highlightCard = appState.cards.find(c => c.highlight);
-      const focalX = highlightCard ? (highlightCard.x + highlightCard.w / 2) : canvas.width * 0.7;
-      const focalY = highlightCard ? (highlightCard.y + highlightCard.h / 2) : canvas.height * 0.4;
+      // 抓取所有被設為高亮的卡片
+      const highlightCards = appState.cards.filter(c => c.highlight);
+      const primaryHighlight = highlightCards[0];
+      const focalX = primaryHighlight ? (primaryHighlight.x + primaryHighlight.w / 2) : canvas.width * 0.7;
+      const focalY = primaryHighlight ? (primaryHighlight.y + primaryHighlight.h / 2) : canvas.height * 0.4;
 
       const colors = [
         { r: 16, g: 185, b: 129, a: 0.18 },
@@ -1261,17 +1271,20 @@
         ctx.filter = "none";
       });
 
-      if (highlightCard) {
-        const radGrad = ctx.createRadialGradient(focalX, focalY, 30, focalX, focalY, highlightCard.w * 0.85);
-        radGrad.addColorStop(0, "rgba(251, 191, 36, 0.18)");
+      // 為所有複選高亮的卡片同時繪製共振金色光暈
+      highlightCards.forEach(c => {
+        const cx = c.x + c.w / 2;
+        const cy = c.y + c.h / 2;
+        const radGrad = ctx.createRadialGradient(cx, cy, 30, cx, cy, c.w * 0.85);
+        radGrad.addColorStop(0, "rgba(251, 191, 36, 0.20)");
         radGrad.addColorStop(0.6, "rgba(56, 189, 248, 0.10)");
         radGrad.addColorStop(1, "rgba(0, 0, 0, 0)");
         
         ctx.beginPath();
-        ctx.arc(focalX, focalY, highlightCard.w * 0.85, 0, Math.PI * 2);
+        ctx.arc(cx, cy, c.w * 0.85, 0, Math.PI * 2);
         ctx.fillStyle = radGrad;
         ctx.fill();
-      }
+      });
 
       if (isClassBreak) {
         animId = requestAnimationFrame(renderAuroraWaves);
@@ -1362,14 +1375,14 @@
             <input type="date" value="${item.date}" onchange="appState.cards[${index}].date=this.value">
           </div>
           <div style="display:flex; justify-content:space-between; align-items:center;">
-            <select onchange="appState.cards[${index}].cat=this.value">
+            <select onchange="appState.cards[${index}].cat=this.value; renderBoard();">
               <option value="exam" ${item.cat==='exam'?'selected':''}>學業考試 (書本)</option>
               <option value="sports" ${item.cat==='sports'?'selected':''}>運動競賽 (獎盃)</option>
               <option value="event" ${item.cat==='event'?'selected':''}>校慶活動 (旗幟)</option>
               <option value="life" ${item.cat==='life'?'selected':''}>常態生活 (時鐘)</option>
             </select>
-            <label style="font-size:0.8rem; color:#cbd5e1; display:flex; align-items:center; gap:4px;">
-              <input type="checkbox" ${item.highlight ? 'checked':''} onchange="setHighlightCard(${index}, this.checked)"> 重要高亮
+            <label style="font-size:0.8rem; color:#cbd5e1; display:flex; align-items:center; gap:4px; cursor:pointer;">
+              <input type="checkbox" ${item.highlight ? 'checked':''} onchange="toggleCardHighlight(${index}, this.checked)"> 重要高亮
             </label>
             <button class="btn btn-danger" style="padding:4px 8px;" onclick="removeCard(${index})">刪除</button>
           </div>
@@ -1378,9 +1391,10 @@
       });
     }
 
-    function setHighlightCard(idx, isChecked) {
-      appState.cards.forEach((c, i) => c.highlight = (i === idx && isChecked));
-      renderDrawerEditor();
+    // 支援複選高亮
+    function toggleCardHighlight(idx, isChecked) {
+      appState.cards[idx].highlight = isChecked;
+      renderBoard();
     }
 
     function addNewEvent() {
@@ -1398,11 +1412,13 @@
         totalSpan: 100
       });
       renderDrawerEditor();
+      renderBoard();
     }
 
     function removeCard(idx) {
       appState.cards.splice(idx, 1);
       renderDrawerEditor();
+      renderBoard();
     }
 
     function saveAllSettings() {