Update index.html

index.html

@@ -199,11 +199,9 @@
       display: flex;
       flex-direction: column;
       overflow: hidden;
-      transition: border 0.2s, box-shadow 0.2s;
       touch-action: none;
     }
 
-    /* 4 大分類的主題代表色 */
     .board-card[data-cat="exam"] {
       --theme-color: #38bdf8;
       --num-color: #38bdf8;
@@ -236,7 +234,6 @@
       z-index: 2;
     }
 
-    /* 重點高亮卡片：覆蓋為極致琥珀金強調色 */
     .board-card.highlight {
       border: 1.8px solid #fbbf24;
       box-shadow: 0 16px 40px rgba(251, 191, 36, 0.28);
@@ -300,7 +297,6 @@
       padding-left: 2px;
     }
 
-    /* 數字文字色彩重新連動主題色 */
     .card-center-metric {
       flex: 1;
       display: flex;
@@ -341,7 +337,7 @@
       height: 100%;
       background: var(--theme-color);
       border-radius: 999px;
-      transition: width 0.4s ease;
+      transition: width 0.2s ease;
     }
     .metric-details {
       display: flex;
@@ -375,17 +371,18 @@
       cursor: grabbing;
     }
 
+    /* 放大把手並加強視覺指引 */
     .resize-handle {
       display: none;
       position: absolute;
       right: 0px;
       bottom: 0px;
-      width: 38px;
-      height: 38px;
+      width: 42px;
+      height: 42px;
       cursor: se-resize;
-      background: radial-gradient(circle at 75% 75%, #38bdf8 0%, transparent 65%);
-      border-bottom-right-radius: 20px;
-      z-index: 10;
+      background: radial-gradient(circle at 75% 75%, rgba(56, 189, 248, 0.9) 0%, transparent 68%);
+      border-bottom-right-radius: 24px;
+      z-index: 20;
       touch-action: none;
       pointer-events: auto;
     }
@@ -931,7 +928,7 @@
       document.body.removeChild(a);
       URL.revokeObjectURL(url);
       
-      alert("✓ 固化成功！請用剛下載的 `index.html` 直接覆蓋 Lively 資料夾內的原檔，開機將永久預設此版面。");
+      alert("✓ 固化成功！請用剛下載的 `index.html` 直接覆蓋原檔，開機將永久預設此版面。");
     }
 
     function openPinModal() {
@@ -1101,8 +1098,7 @@
               <span class="metric-unit">天</span>
             </div>
 
-            ${isTall ? `
-            <div class="card-dynamic-body">
+            <div class="card-dynamic-body" style="display: ${isTall ? 'flex' : 'none'};">
               <div class="progress-track">
                 <div class="progress-fill" style="width: ${progressPct}%;"></div>
               </div>
@@ -1111,7 +1107,6 @@
                 <span>約合 <b>${weeksLeft}</b> 週</span>
               </div>
             </div>
-            ` : ''}
 
             <div class="card-badge-wrap">
               <div class="status-capsule">${badgeText}</div>
@@ -1125,9 +1120,13 @@
       });
     }
 
+    // ========================================================
+    // 大屏觸控與滑鼠拖曳/縮放核心 (修復卡頓：拖動中不摧毀 DOM)
+    // ========================================================
     function attachTouchAndPointerEvents(cardEl, cardData) {
       const resizeHandle = cardEl.querySelector('.resize-handle');
 
+      // 1. 卡片移動拖曳
       cardEl.addEventListener('pointerdown', (e) => {
         if (!isEditing) return;
         if (e.target === resizeHandle || e.target.classList.contains('resize-handle')) return;
@@ -1170,6 +1169,7 @@
         cardEl.addEventListener('pointercancel', onPointerUp);
       });
 
+      // 2. 右下角角標拉伸縮放 (流暢優化：即時修改樣式，放開才全面儲存)
       resizeHandle.addEventListener('pointerdown', (e) => {
         if (!isEditing) return;
         e.stopPropagation();
@@ -1181,17 +1181,31 @@
         let startW = cardEl.offsetWidth;
         let startH = cardEl.offsetHeight;
 
+        const metricNum = cardEl.querySelector('.metric-number');
+        const dynamicBody = cardEl.querySelector('.card-dynamic-body');
+
         function onResizeMove(ev) {
           if (ev.pointerId !== e.pointerId) return;
           ev.preventDefault();
+
+          // 直覺計算全新寬度與高度
           const newW = Math.max(240, startW + (ev.clientX - startX));
           const newH = Math.max(180, startH + (ev.clientY - startY));
 
+          // 直接操作當前卡片樣式，不中斷事件流
           cardEl.style.width = `${newW}px`;
           cardEl.style.height = `${newH}px`;
           cardData.w = newW;
           cardData.h = newH;
-          renderBoard();
+
+          // 動態平滑調整大數字字級
+          const isTall = newH >= 360;
+          const fontScale = Math.min(newW / 4, newH / (isTall ? 3.8 : 2.5));
+          const fontSizeRem = Math.max(2.8, Math.min(fontScale / 16, 7.5));
+          if (metricNum) metricNum.style.fontSize = `${fontSizeRem}rem`;
+
+          // 動態顯示/隱藏進度條
+          if (dynamicBody) dynamicBody.style.display = isTall ? 'flex' : 'none';
         }
 
         function onResizeUp(ev) {
@@ -1200,7 +1214,10 @@
           resizeHandle.removeEventListener('pointermove', onResizeMove);
           resizeHandle.removeEventListener('pointerup', onResizeUp);
           resizeHandle.removeEventListener('pointercancel', onResizeUp);
+          
+          // 手指放開時，保存數據並重新校準極光焦點
           saveAppData();
+          renderBoard();
         }
 
         resizeHandle.addEventListener('pointermove', onResizeMove);
@@ -1209,7 +1226,7 @@
       });
     }
 
-    // 極光引擎 (支援多重高亮焦點光暈)
+    // 極光引擎 (多重高亮焦點光暈)
     const canvas = document.getElementById("aurora-canvas");
     const ctx = canvas.getContext("2d");
     let animId = null;
@@ -1226,7 +1243,6 @@
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       step += 0.008;
 
-      // 抓取所有被設為高亮的卡片
       const highlightCards = appState.cards.filter(c => c.highlight);
       const primaryHighlight = highlightCards[0];
       const focalX = primaryHighlight ? (primaryHighlight.x + primaryHighlight.w / 2) : canvas.width * 0.7;
@@ -1271,7 +1287,6 @@
         ctx.filter = "none";
       });
 
-      // 為所有複選高亮的卡片同時繪製共振金色光暈
       highlightCards.forEach(c => {
         const cx = c.x + c.w / 2;
         const cy = c.y + c.h / 2;
@@ -1391,7 +1406,6 @@
       });
     }
 
-    // 支援複選高亮
     function toggleCardHighlight(idx, isChecked) {
       appState.cards[idx].highlight = isChecked;
       renderBoard();