Update index.html

index.html

@@ -2,8 +2,8 @@
 <html lang="zh-TW">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Classroom Focus OS - 旗艦極光看板</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>Classroom Focus OS - 班級旗艦極光看板</title>
   <style>
     :root {
       --bg-color: #050b14;
@@ -23,6 +23,9 @@
       --card-border: rgba(255, 255, 255, 0.12);
       --primary-text: #ffffff;
       --secondary-text: #94a3b8;
+      --accent-color: #38bdf8;
+      --badge-bg: rgba(255, 255, 255, 0.08);
+      --progress-bg: rgba(255, 255, 255, 0.1);
     }
     body[data-theme="aurora-fluid"] {
       --bg-color: #021a14;
@@ -30,6 +33,9 @@
       --card-border: rgba(52, 211, 153, 0.25);
       --primary-text: #ffffff;
       --secondary-text: #a7f3d0;
+      --accent-color: #34d399;
+      --badge-bg: rgba(52, 211, 153, 0.12);
+      --progress-bg: rgba(255, 255, 255, 0.12);
     }
     body[data-theme="star-meteor"] {
       --bg-color: #030712;
@@ -37,6 +43,9 @@
       --card-border: rgba(99, 102, 241, 0.25);
       --primary-text: #f3f4f6;
       --secondary-text: #9ca3af;
+      --accent-color: #818cf8;
+      --badge-bg: rgba(99, 102, 241, 0.15);
+      --progress-bg: rgba(255, 255, 255, 0.1);
     }
     body[data-theme="sunset-glow"] {
       --bg-color: #1a0b1c;
@@ -44,6 +53,9 @@
       --card-border: rgba(244, 114, 182, 0.25);
       --primary-text: #ffffff;
       --secondary-text: #fbcfe8;
+      --accent-color: #f472b6;
+      --badge-bg: rgba(244, 114, 182, 0.15);
+      --progress-bg: rgba(255, 255, 255, 0.1);
     }
     body[data-theme="gold-luxury"] {
       --bg-color: #0a0a0a;
@@ -51,6 +63,9 @@
       --card-border: rgba(234, 179, 8, 0.3);
       --primary-text: #fef08a;
       --secondary-text: #ca8a04;
+      --accent-color: #eab308;
+      --badge-bg: rgba(234, 179, 8, 0.15);
+      --progress-bg: rgba(255, 255, 255, 0.1);
     }
     body[data-theme="minimal-light"] {
       --bg-color: #e2e8f0;
@@ -59,6 +74,7 @@
       --card-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
       --primary-text: #0f172a;
       --secondary-text: #64748b;
+      --accent-color: #2563eb;
       --badge-bg: rgba(0, 0, 0, 0.06);
       --progress-bg: rgba(0, 0, 0, 0.08);
     }
@@ -68,6 +84,7 @@
       margin: 0;
       padding: 0;
       user-select: none;
+      -webkit-user-select: none;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", sans-serif;
     }
 
@@ -79,6 +96,7 @@
       color: var(--primary-text);
       position: relative;
       transition: background 0.4s ease;
+      touch-action: none;
     }
 
     #aurora-canvas {
@@ -157,16 +175,8 @@
       text-overflow: ellipsis;
       position: relative;
     }
-    .quote-capsule::before {
-      content: '❝ ';
-      color: #38bdf8;
-      font-weight: bold;
-    }
-    .quote-capsule::after {
-      content: ' ❞';
-      color: #38bdf8;
-      font-weight: bold;
-    }
+    .quote-capsule::before { content: '❝ '; color: #38bdf8; font-weight: bold; }
+    .quote-capsule::after { content: ' ❞'; color: #38bdf8; font-weight: bold; }
 
     #canvas-workspace {
       width: 100vw;
@@ -175,6 +185,7 @@
       top: 0;
       left: 0;
       z-index: 2;
+      touch-action: none;
     }
 
     .board-card {
@@ -189,6 +200,7 @@
       flex-direction: column;
       overflow: hidden;
       transition: border 0.2s, box-shadow 0.2s;
+      touch-action: none;
     }
 
     .board-card[data-cat="exam"] { --theme-color: #38bdf8; }
@@ -224,6 +236,7 @@
       flex-direction: column;
       justify-content: space-between;
       gap: 10px;
+      pointer-events: none;
     }
 
     .card-top {
@@ -340,19 +353,25 @@
 
     .is-editing .board-card {
       border: 1.5px dashed #38bdf8 !important;
-      cursor: move;
+      cursor: grab;
     }
+    .is-editing .board-card:active {
+      cursor: grabbing;
+    }
+
     .resize-handle {
       display: none;
       position: absolute;
-      right: 2px;
-      bottom: 2px;
-      width: 24px;
-      height: 24px;
+      right: 0px;
+      bottom: 0px;
+      width: 38px;
+      height: 38px;
       cursor: se-resize;
-      background: linear-gradient(135deg, transparent 50%, rgba(56, 189, 248, 0.8) 50%);
-      border-bottom-right-radius: 18px;
+      background: radial-gradient(circle at 75% 75%, #38bdf8 0%, transparent 65%);
+      border-bottom-right-radius: 20px;
       z-index: 10;
+      touch-action: none;
+      pointer-events: auto;
     }
     .is-editing .resize-handle {
       display: block;
@@ -381,8 +400,8 @@
       position: fixed;
       bottom: 20px;
       right: 20px;
-      width: 48px;
-      height: 48px;
+      width: 52px;
+      height: 52px;
       border-radius: 50%;
       background: rgba(15, 23, 42, 0.8);
       border: 1.5px solid rgba(255, 255, 255, 0.25);
@@ -395,16 +414,14 @@
       opacity: 0.4;
       transition: all 0.2s;
       z-index: 500;
+      touch-action: manipulation;
     }
-    .settings-trigger:hover {
+    .settings-trigger:hover, .settings-trigger:active {
       opacity: 1;
       transform: rotate(30deg);
       color: #fff;
     }
 
-    /* =========================================
-       螢幕密碼盤 Modal (專門解決桌布鍵盤焦點問題)
-       ========================================= */
     .modal-backdrop {
       display: none;
       position: fixed;
@@ -425,22 +442,11 @@
       color: #fff;
       box-shadow: 0 25px 50px rgba(0,0,0,0.6);
     }
-    .pin-modal-box h3 {
-      font-size: 1.2rem;
-      margin-bottom: 4px;
-    }
-    .pin-modal-box p {
-      font-size: 0.8rem;
-      color: #94a3b8;
-      margin-bottom: 16px;
-    }
-    
-    /* PIN 碼顯示點 */
     .pin-dots-display {
       display: flex;
       justify-content: center;
       gap: 12px;
-      margin-bottom: 20px;
+      margin: 16px 0 20px;
       height: 24px;
       align-items: center;
     }
@@ -463,8 +469,6 @@
       border-color: #ef4444;
       box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
     }
-
-    /* 數字鍵盤網格 */
     .pin-keypad {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
@@ -483,12 +487,12 @@
       display: flex;
       align-items: center;
       justify-content: center;
+      touch-action: manipulation;
       transition: all 0.15s ease;
     }
     .pin-btn:hover {
       background: rgba(56, 189, 248, 0.2);
       border-color: #38bdf8;
-      color: #fff;
     }
     .pin-btn:active {
       transform: scale(0.95);
@@ -507,6 +511,7 @@
       font-weight: 600;
       cursor: pointer;
       font-size: 0.85rem;
+      touch-action: manipulation;
     }
     .btn-primary { background: #38bdf8; color: #0f172a; }
     .btn-secondary { background: #334155; color: #fff; }
@@ -594,26 +599,26 @@
 
   <div id="canvas-workspace"></div>
 
-  <!-- 編輯模式浮動條 -->
+  <!-- 編輯狀態控制列 -->
   <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-secondary" onclick="openAdminDrawer()">作息與設定</button>
     <button class="btn btn-success" onclick="exitEditMode()">完成並鎖定</button>
   </div>
 
-  <!-- 齒輪按鈕 -->
+  <!-- 齒輪解鎖按鈕 -->
   <div class="settings-trigger" onclick="openPinModal()" title="開啟看板設定">
-    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+    <svg width="26" height="26" fill="currentColor" viewBox="0 0 24 24">
       <path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
     </svg>
   </div>
 
-  <!-- 螢幕數位按鍵鎖 (點擊/觸控輸入，完美克服桌布鍵盤攔截) -->
+  <!-- 螢幕數位按鍵鎖 -->
   <div class="modal-backdrop" id="pinModal">
     <div class="pin-modal-box">
       <h3>管理員驗證</h3>
-      <p>請點擊螢幕按鈕輸入 PIN 碼 (預設 902)</p>
+      <p style="font-size:0.8rem; color:#94a3b8; margin-top:4px;">請點擊螢幕按鈕輸入 PIN 碼 (902)</p>
       
       <div class="pin-dots-display" id="pinDots">
         <div class="pin-dot"></div>
@@ -636,9 +641,7 @@
         <button class="pin-btn action-btn" onclick="backspaceKey()">⌫</button>
       </div>
 
-      <div style="display:flex; justify-content:center;">
-        <button class="btn btn-secondary" style="width:100%;" onclick="closePinModal()">取消</button>
-      </div>
+      <button class="btn btn-secondary" style="width:100%;" onclick="closePinModal()">取消</button>
     </div>
   </div>
 
@@ -650,25 +653,18 @@
     </div>
 
     <div class="drawer-content">
-<!-- 跨環境免鍵盤同步工具箱 -->
+      <!-- 固化預設值與資料備份核心 -->
       <div class="setting-block" style="border: 1px solid #38bdf8;">
-        <h4>設定資料備份與同步 (免鍵盤方案)</h4>
-        <p style="font-size:0.8rem; color:#94a3b8;">在 Lively 桌面因系統防護無法使用 Ctrl+V 時，請使用以下兩種方式同步：</p>
+        <h4>永久固化排版 (解決重開機重設問題)</h4>
+        <p style="font-size:0.8rem; color:#94a3b8;">排版好後，點擊下方「固化為全新預設檔」��將下載的檔案直接取代原本的 `index.html`，重開機保證 100% 永不跑位。</p>
         
         <div style="display:flex; flex-direction:column; gap:8px;">
-          <!-- 方案 A：一鍵從系統剪貼簿讀取 -->
-          <div style="display:flex; gap:8px;">
-            <button class="btn btn-secondary" style="flex:1;" onclick="exportToClipboard()">📋 複製設定代碼</button>
-            <button class="btn btn-primary" style="flex:1;" onclick="importFromClipboard()">📥 一鍵讀取剪貼簿匯入</button>
-          </div>
-
-          <div style="text-align:center; font-size:0.75rem; color:#64748b;">— 或使用實體檔案傳遞 —</div>
+          <button class="btn btn-success" style="padding:10px; font-size:0.9rem;" onclick="exportAsHardcodedHtml()">⭐ 固化為全新預設檔 (下載 index.html)</button>
 
-          <!-- 方案 B：直接下載/讀取 JSON 實體檔 -->
           <div style="display:flex; gap:8px;">
-            <button class="btn btn-secondary" style="flex:1;" onclick="downloadConfigFile()">💾 下載設定檔 (.json)</button>
+            <button class="btn btn-secondary" style="flex:1;" onclick="downloadConfigFile()">💾 備份設定 (.json)</button>
             <label class="btn btn-primary" style="flex:1; text-align:center; cursor:pointer; margin:0; line-height:1.2;">
-              📂 選擇檔案匯入
+              📂 匯入設定檔
               <input type="file" id="configFileUploader" accept=".json" style="display:none;" onchange="importConfigFile(event)">
             </label>
           </div>
@@ -768,7 +764,7 @@
       "每一題訂正，都是在替自己補一個洞。",
       "不會的問題問出口，它就開始變成你的。",
       "進步常常藏在最不想面對的那個錯誤裡。",
-      "你不需要一次就學會，慢慢學，學會了就是你的。",
+      "你不需要一次就學會，你只需要沒停下來學。",
       "你現在的每一天，都是在替考場上的自己鋪路。",
       "別想一次追完所有進度，只要今天比昨天多懂一點。",
       "緊張是因為你在乎，把在乎換成多做一題。",
@@ -829,77 +825,142 @@
       "16:00-16:45"
     ];
 
+    // 本地預設種子（可透過一鍵固化功能直接改寫）
+    /*START_DEFAULT_DATA*/
     const DEFAULT_DATA = {
       theme: "dark-slate",
       schedule: DEFAULT_SCHEDULE,
       cards: [
-        { id: '1', title: "第一次定期評量", date: "2026-10-14", cat: "exam", highlight: false, x: 100, y: 150, w: 320, h: 260, totalSpan: 60 },
-        { id: '2', title: "校慶運動大會", date: "2026-11-14", cat: "sports", highlight: false, x: 100, y: 440, w: 320, h: 260, totalSpan: 90 },
+        { id: '1', title: "第一次定期評量", date: "2026-10-15", cat: "exam", highlight: false, x: 100, y: 150, w: 320, h: 260, totalSpan: 60 },
+        { id: '2', title: "校慶運動大會", date: "2026-11-20", cat: "sports", highlight: false, x: 100, y: 440, w: 320, h: 260, totalSpan: 90 },
         { id: '3', title: "國中教育會考", date: "2027-05-15", cat: "exam", highlight: true, x: 460, y: 150, w: 420, h: 550, totalSpan: 300 }
       ]
     };
+    /*END_DEFAULT_DATA*/
 
-    let appState = loadAppData();
+    const STORAGE_KEY = "classroom_focus_master_data";
+
+    let appState = loadInitialData();
     let isEditing = false;
     let isClassBreak = false;
     let currentPin = "";
 
-    function loadAppData() {
-      const saved = localStorage.getItem("classroom_dashboard_v6");
+    // =========================================
+    // IndexedDB 持久化雙重快取架構
+    // =========================================
+    function openDB() {
+      return new Promise((resolve) => {
+        const req = indexedDB.open("ClassroomFocusDB", 1);
+        req.onupgradeneeded = (e) => {
+          const db = e.target.result;
+          if (!db.objectStoreNames.contains("settings")) {
+            db.createObjectStore("settings");
+          }
+        };
+        req.onsuccess = (e) => resolve(e.target.result);
+        req.onerror = () => resolve(null);
+      });
+    }
+
+    async function saveToIndexedDB(data) {
+      const db = await openDB();
+      if (!db) return;
+      const tx = db.transaction("settings", "readwrite");
+      tx.objectStore("settings").put(data, "master_data");
+    }
+
+    async function loadFromIndexedDB() {
+      const db = await openDB();
+      if (!db) return null;
+      return new Promise((resolve) => {
+        const tx = db.transaction("settings", "readonly");
+        const req = tx.objectStore("settings").get("master_data");
+        req.onsuccess = () => resolve(req.result || null);
+        req.onerror = () => resolve(null);
+      });
+    }
+
+    function loadInitialData() {
+      const saved = localStorage.getItem(STORAGE_KEY);
       return saved ? JSON.parse(saved) : DEFAULT_DATA;
     }
+
+    async function initStorageSync() {
+      const idbData = await loadFromIndexedDB();
+      if (idbData && idbData.cards) {
+        appState = idbData;
+        saveAppData();
+        renderBoard();
+        document.body.setAttribute("data-theme", appState.theme);
+      }
+    }
+    initStorageSync();
+
     function saveAppData() {
-      localStorage.setItem("classroom_dashboard_v6", JSON.stringify(appState));
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(appState));
+      saveToIndexedDB(appState);
     }
 
     // =========================================
-    // 螢幕 PIN 碼鍵盤控制邏輯
+    // 固化為全新預設檔 (下載即可徹底解決跑位)
     // =========================================
+    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*/`;
+      
+      const newHtml = "<!DOCTYPE html>\n<html lang=\"zh-TW\">\n" + currentHtml.replace(regex, replacement) + "\n</html>";
+      
+      const blob = new Blob([newHtml], { type: "text/html;charset=utf-8" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `index.html`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+      
+      alert("✓ 固化成功！已為您下載最新的 `index.html`。\n請用這個檔案直接覆蓋 Lively 中的原檔，以後開機將原生讀取這份排版，永不重設！");
+    }
+
     function openPinModal() {
       currentPin = "";
       updatePinDots();
       document.getElementById("pinModal").style.display = "flex";
     }
-
     function closePinModal() {
       document.getElementById("pinModal").style.display = "none";
       currentPin = "";
     }
-
     function pressKey(num) {
       if (currentPin.length < 3) {
         currentPin += num;
         updatePinDots();
-        if (currentPin.length === 3) {
-          setTimeout(verifyPinCode, 150);
-        }
+        if (currentPin.length === 3) setTimeout(verifyPinCode, 150);
       }
     }
-
     function backspaceKey() {
       if (currentPin.length > 0) {
         currentPin = currentPin.slice(0, -1);
         updatePinDots();
       }
     }
-
     function clearKey() {
       currentPin = "";
       updatePinDots();
     }
-
     function updatePinDots(isError = false) {
       const dots = document.querySelectorAll(".pin-dot");
       dots.forEach((dot, idx) => {
         dot.className = "pin-dot";
-        if (isError) {
-          dot.classList.add("error");
-        } else if (idx < currentPin.length) {
-          dot.classList.add("filled");
-        }
+        if (isError) dot.classList.add("error");
+        else if (idx < currentPin.length) dot.classList.add("filled");
       });
     }
-
     function verifyPinCode() {
       if (currentPin === "902") {
         closePinModal();
@@ -913,46 +974,14 @@
       }
     }
 
-    // 亦支援瀏覽器環境下的實體鍵盤
-    window.addEventListener("keydown", (e) => {
-      const modal = document.getElementById("pinModal");
-      if (modal.style.display === "flex") {
-        if (e.key >= "0" && e.key <= "9") {
-          pressKey(e.key);
-        } else if (e.key === "Backspace") {
-          backspaceKey();
-        } else if (e.key === "Escape") {
-          closePinModal();
-        }
-      }
-    });
-
-    function exportToClipboard() {
-      const jsonStr = JSON.stringify(appState, null, 2);
-      navigator.clipboard.writeText(jsonStr).then(() => {
-        alert("✓ 設定代碼已複製到系統剪貼簿！回到桌面直接點擊「一鍵讀取剪貼簿匯入」即可。");
-      }).catch(() => {
-        downloadConfigFile(); // 若剪貼簿受阻，自動降級為檔案下載
-      });
-    }
-
-    async function importFromClipboard() {
-      try {
-        // 直接向 Windows 剪貼簿索取文字，跳過鍵盤 Ctrl+V
-        const text = await navigator.clipboard.readText();
-        if (!text || text.trim() === "") {
-          alert("剪貼簿目前沒有內容，請先在外部瀏覽器複製設定！");
-          return;
-        }
-        applyJsonConfig(text);
-      } catch (err) {
-        // 部分環境若限制 readText 權限，引導使用實體檔案
-        alert("受限於 Windows 桌面安全權限，無法直接讀取剪貼簿。請改用下方的「選擇檔案匯入」！");
-        document.getElementById("configFileUploader").click();
-      }
-    }
     function downloadConfigFile() {
-      const blob = new Blob([JSON.stringify(appState, null, 2)], { type: "application/json" });
+      const fullPackage = {
+        theme: appState.theme,
+        schedule: appState.schedule,
+        cards: appState.cards
+      };
+      const jsonStr = JSON.stringify(fullPackage, null, 2);
+      const blob = new Blob([jsonStr], { type: "application/json" });
       const url = URL.createObjectURL(blob);
       const a = document.createElement("a");
       a.href = url;
@@ -972,26 +1001,35 @@
         applyJsonConfig(e.target.result);
       };
       reader.readAsText(file);
-      event.target.value = ""; // 重設以允許重複選取相同檔案
+      event.target.value = "";
     }
 
-    // 統一解析與驗證配置核心
     function applyJsonConfig(jsonString) {
       try {
         const parsed = JSON.parse(jsonString);
         if (parsed.cards && parsed.theme) {
-          appState = parsed;
+          appState.theme = parsed.theme;
+          appState.cards = parsed.cards;
+          if (parsed.schedule && Array.isArray(parsed.schedule)) {
+            appState.schedule = parsed.schedule;
+          }
+
           saveAppData();
+          document.body.setAttribute("data-theme", appState.theme);
+          document.getElementById("themeSelect").value = appState.theme;
+
           renderBoard();
+          updateClock();
           closeAdminDrawer();
-          alert("✓ 設定已成功同步並套用至看板！");
+          alert("✓ 設定已成功匯入並寫入持久快取！");
         } else {
-          alert("設定檔內容格式不符，請確認是否為本系統匯出的檔案。");
+          alert("設定檔格式不符。");
         }
       } catch (e) {
-        alert("解析失敗，請確認檔案或剪貼簿內容是否為合法的 JSON 格式。");
+        alert("JSON 解析失敗。");
       }
     }
+
     function updateDailyQuote() {
       const now = new Date();
       const start = new Date(now.getFullYear(), 0, 0);
@@ -1075,65 +1113,73 @@
           <div class="resize-handle"></div>
         `;
 
-        makeDraggable(el, card);
-        makeResizable(el.querySelector('.resize-handle'), card, el);
+        attachTouchAndPointerEvents(el, card);
         ws.appendChild(el);
       });
     }
 
-    function makeDraggable(el, cardData) {
-      let isDragging = false;
-      let startX, startY, initLeft, initTop;
-
-      el.addEventListener('mousedown', (e) => {
-        if (!isEditing || e.target.classList.contains('resize-handle')) return;
-        isDragging = true;
-        startX = e.clientX;
-        startY = e.clientY;
-        initLeft = el.offsetLeft;
-        initTop = el.offsetTop;
-        el.style.zIndex = 100;
-
-        function onMouseMove(e) {
-          if (!isDragging) return;
-          const newX = Math.max(0, Math.min(window.innerWidth - el.offsetWidth, initLeft + (e.clientX - startX)));
-          const newY = Math.max(0, Math.min(window.innerHeight - el.offsetHeight, initTop + (e.clientY - startY)));
-          el.style.left = `${newX}px`;
-          el.style.top = `${newY}px`;
+    function attachTouchAndPointerEvents(cardEl, cardData) {
+      const resizeHandle = cardEl.querySelector('.resize-handle');
+
+      cardEl.addEventListener('pointerdown', (e) => {
+        if (!isEditing) return;
+        if (e.target === resizeHandle || e.target.classList.contains('resize-handle')) return;
+
+        e.preventDefault();
+        cardEl.setPointerCapture(e.pointerId);
+
+        let startX = e.clientX;
+        let startY = e.clientY;
+        let initLeft = cardEl.offsetLeft;
+        let initTop = cardEl.offsetTop;
+        cardEl.style.zIndex = 100;
+
+        function onPointerMove(ev) {
+          if (ev.pointerId !== e.pointerId) return;
+          ev.preventDefault();
+          const dx = ev.clientX - startX;
+          const dy = ev.clientY - startY;
+          const newX = Math.max(0, Math.min(window.innerWidth - cardEl.offsetWidth, initLeft + dx));
+          const newY = Math.max(0, Math.min(window.innerHeight - cardEl.offsetHeight, initTop + dy));
+
+          cardEl.style.left = `${newX}px`;
+          cardEl.style.top = `${newY}px`;
           cardData.x = newX;
           cardData.y = newY;
         }
 
-        function onMouseUp() {
-          isDragging = false;
-          el.style.zIndex = '';
-          window.removeEventListener('mousemove', onMouseMove);
-          window.removeEventListener('mouseup', onMouseUp);
+        function onPointerUp(ev) {
+          if (ev.pointerId !== e.pointerId) return;
+          try { cardEl.releasePointerCapture(e.pointerId); } catch(err) {}
+          cardEl.style.zIndex = '';
+          cardEl.removeEventListener('pointermove', onPointerMove);
+          cardEl.removeEventListener('pointerup', onPointerUp);
+          cardEl.removeEventListener('pointercancel', onPointerUp);
           saveAppData();
         }
 
-        window.addEventListener('mousemove', onMouseMove);
-        window.addEventListener('mouseup', onMouseUp);
+        cardEl.addEventListener('pointermove', onPointerMove);
+        cardEl.addEventListener('pointerup', onPointerUp);
+        cardEl.addEventListener('pointercancel', onPointerUp);
       });
-    }
-
-    function makeResizable(handle, cardData, cardEl) {
-      let isResizing = false;
-      let startW, startH, startX, startY;
 
-      handle.addEventListener('mousedown', (e) => {
+      resizeHandle.addEventListener('pointerdown', (e) => {
         if (!isEditing) return;
         e.stopPropagation();
-        isResizing = true;
-        startX = e.clientX;
-        startY = e.clientY;
-        startW = cardEl.offsetWidth;
-        startH = cardEl.offsetHeight;
-
-        function onMouseMove(e) {
-          if (!isResizing) return;
-          const newW = Math.max(240, startW + (e.clientX - startX));
-          const newH = Math.max(180, startH + (e.clientY - startY));
+        e.preventDefault();
+        resizeHandle.setPointerCapture(e.pointerId);
+
+        let startX = e.clientX;
+        let startY = e.clientY;
+        let startW = cardEl.offsetWidth;
+        let startH = cardEl.offsetHeight;
+
+        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;
@@ -1141,15 +1187,18 @@
           renderBoard();
         }
 
-        function onMouseUp() {
-          isResizing = false;
-          window.removeEventListener('mousemove', onMouseMove);
-          window.removeEventListener('mouseup', onMouseUp);
+        function onResizeUp(ev) {
+          if (ev.pointerId !== e.pointerId) return;
+          try { resizeHandle.releasePointerCapture(e.pointerId); } catch(err) {}
+          resizeHandle.removeEventListener('pointermove', onResizeMove);
+          resizeHandle.removeEventListener('pointerup', onResizeUp);
+          resizeHandle.removeEventListener('pointercancel', onResizeUp);
           saveAppData();
         }
 
-        window.addEventListener('mousemove', onMouseMove);
-        window.addEventListener('mouseup', onMouseUp);
+        resizeHandle.addEventListener('pointermove', onResizeMove);
+        resizeHandle.addEventListener('pointerup', onResizeUp);
+        resizeHandle.addEventListener('pointercancel', onResizeUp);
       });
     }