Update index.html

index.html

@@ -381,18 +381,18 @@
       position: fixed;
       bottom: 20px;
       right: 20px;
-      width: 44px;
-      height: 44px;
+      width: 48px;
+      height: 48px;
       border-radius: 50%;
-      background: rgba(15, 23, 42, 0.7);
-      border: 1px solid rgba(255, 255, 255, 0.15);
+      background: rgba(15, 23, 42, 0.8);
+      border: 1.5px solid rgba(255, 255, 255, 0.25);
       backdrop-filter: blur(8px);
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       color: #94a3b8;
-      opacity: 0.35;
+      opacity: 0.4;
       transition: all 0.2s;
       z-index: 500;
     }
@@ -402,38 +402,104 @@
       color: #fff;
     }
 
+    /* =========================================
+       螢幕密碼盤 Modal (專門解決桌布鍵盤焦點問題)
+       ========================================= */
     .modal-backdrop {
       display: none;
       position: fixed;
       inset: 0;
       background: rgba(0, 0, 0, 0.75);
-      backdrop-filter: blur(10px);
+      backdrop-filter: blur(12px);
       z-index: 2000;
       align-items: center;
       justify-content: center;
     }
-    .modal-box {
+    .pin-modal-box {
       background: #1e293b;
-      border: 1px solid rgba(255, 255, 255, 0.15);
-      border-radius: 16px;
-      padding: 28px;
-      width: 340px;
+      border: 1px solid rgba(255, 255, 255, 0.18);
+      border-radius: 20px;
+      padding: 24px 28px;
+      width: 320px;
       text-align: center;
       color: #fff;
+      box-shadow: 0 25px 50px rgba(0,0,0,0.6);
     }
-    .modal-box input {
-      width: 100%;
-      padding: 10px;
-      border-radius: 8px;
-      border: 1px solid #334155;
-      background: #0f172a;
-      color: #fff;
+    .pin-modal-box h3 {
       font-size: 1.2rem;
-      text-align: center;
-      letter-spacing: 6px;
-      margin: 15px 0 20px;
-      outline: none;
+      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;
+      height: 24px;
+      align-items: center;
+    }
+    .pin-dot {
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      border: 2px solid #64748b;
+      background: transparent;
+      transition: all 0.15s ease;
+    }
+    .pin-dot.filled {
+      background: #38bdf8;
+      border-color: #38bdf8;
+      box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
+      transform: scale(1.15);
+    }
+    .pin-dot.error {
+      background: #ef4444;
+      border-color: #ef4444;
+      box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
+    }
+
+    /* 數字鍵盤網格 */
+    .pin-keypad {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 10px;
+      margin-bottom: 16px;
+    }
+    .pin-btn {
+      height: 52px;
+      font-size: 1.35rem;
+      font-weight: 600;
+      border-radius: 12px;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      background: rgba(15, 23, 42, 0.7);
+      color: #f8fafc;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      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);
+      background: #38bdf8;
+      color: #0f172a;
+    }
+    .pin-btn.action-btn {
+      font-size: 1rem;
+      color: #94a3b8;
     }
+
     .btn {
       padding: 8px 16px;
       border-radius: 8px;
@@ -530,28 +596,48 @@
 
   <!-- 編輯模式浮動條 -->
   <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>
   </div>
 
   <!-- 齒輪按鈕 -->
-  <div class="settings-trigger" onclick="openAuthModal()" title="開啟看板設定">
-    <svg width="22" height="22" fill="currentColor" viewBox="0 0 24 24">
+  <div class="settings-trigger" onclick="openPinModal()" title="開啟看板設定">
+    <svg width="24" height="24" 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>
 
-  <!-- 密碼 Modal -->
-  <div class="modal-backdrop" id="authModal">
-    <div class="modal-box">
-      <h3>進入看板設定</h3>
-      <p style="color:#94a3b8; font-size:0.8rem; margin-top:6px;">請輸入管理員密碼</p>
-      <input type="password" id="authPassword" placeholder="PIN" maxlength="6" onkeydown="if(event.key==='Enter') verifyPassword()">
-      <div style="display:flex; justify-content:center; gap:8px;">
-        <button class="btn btn-secondary" onclick="closeAuthModal()">取消</button>
-        <button class="btn btn-primary" onclick="verifyPassword()">解鎖排版</button>
+  <!-- 螢幕數位按鍵鎖 (點擊/觸控輸入，完美克服桌布鍵盤攔截) -->
+  <div class="modal-backdrop" id="pinModal">
+    <div class="pin-modal-box">
+      <h3>管理員驗證</h3>
+      <p>請點擊螢幕按鈕輸入 PIN 碼 (預設 902)</p>
+      
+      <div class="pin-dots-display" id="pinDots">
+        <div class="pin-dot"></div>
+        <div class="pin-dot"></div>
+        <div class="pin-dot"></div>
+      </div>
+
+      <div class="pin-keypad">
+        <button class="pin-btn" onclick="pressKey('1')">1</button>
+        <button class="pin-btn" onclick="pressKey('2')">2</button>
+        <button class="pin-btn" onclick="pressKey('3')">3</button>
+        <button class="pin-btn" onclick="pressKey('4')">4</button>
+        <button class="pin-btn" onclick="pressKey('5')">5</button>
+        <button class="pin-btn" onclick="pressKey('6')">6</button>
+        <button class="pin-btn" onclick="pressKey('7')">7</button>
+        <button class="pin-btn" onclick="pressKey('8')">8</button>
+        <button class="pin-btn" onclick="pressKey('9')">9</button>
+        <button class="pin-btn action-btn" onclick="clearKey()">C</button>
+        <button class="pin-btn" onclick="pressKey('0')">0</button>
+        <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>
     </div>
   </div>
@@ -564,13 +650,12 @@
     </div>
 
     <div class="drawer-content">
-      <!-- 跨環境匯出/匯入工具箱 -->
       <div class="setting-block" style="border: 1px solid #38bdf8;">
         <h4>設定資料備份與同步 (Lively 專用)</h4>
-        <p style="font-size:0.8rem; color:#94a3b8;">在瀏覽器調整好後，點擊「匯出代碼」並複製；接著在桌面 Lively 桌布點開設定「匯入」，即可完美同步。</p>
+        <p style="font-size:0.8rem; color:#94a3b8;">可隨時匯出設定代碼進行備份，或匯入至其他電腦。</p>
         <div style="display:flex; gap:8px;">
-          <button class="btn btn-secondary" style="flex:1;" onclick="exportConfig()">📤 匯出設定代碼</button>
-          <button class="btn btn-primary" style="flex:1;" onclick="importConfig()">📥 匯入設定代碼</button>
+          <button class="btn btn-secondary" style="flex:1;" onclick="exportConfig()">📤 匯出代碼</button>
+          <button class="btn btn-primary" style="flex:1;" onclick="importConfig()">📥 匯入代碼</button>
         </div>
       </div>
 
@@ -741,22 +826,97 @@
     let appState = loadAppData();
     let isEditing = false;
     let isClassBreak = false;
+    let currentPin = "";
 
     function loadAppData() {
-      const saved = localStorage.getItem("classroom_dashboard_v5");
+      const saved = localStorage.getItem("classroom_dashboard_v6");
       return saved ? JSON.parse(saved) : DEFAULT_DATA;
     }
     function saveAppData() {
-      localStorage.setItem("classroom_dashboard_v5", JSON.stringify(appState));
+      localStorage.setItem("classroom_dashboard_v6", JSON.stringify(appState));
     }
 
-    // 匯出與匯入功能
+    // =========================================
+    // 螢幕 PIN 碼鍵盤控制邏輯
+    // =========================================
+    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);
+        }
+      }
+    }
+
+    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");
+        }
+      });
+    }
+
+    function verifyPinCode() {
+      if (currentPin === "902") {
+        closePinModal();
+        enterEditMode();
+      } else {
+        updatePinDots(true);
+        setTimeout(() => {
+          currentPin = "";
+          updatePinDots();
+        }, 500);
+      }
+    }
+
+    // 亦支援瀏覽器環境下的實體鍵盤
+    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 exportConfig() {
       const jsonStr = JSON.stringify(appState);
       navigator.clipboard.writeText(jsonStr).then(() => {
-        alert("✓ 設定代碼已成功複製到剪貼簿！請至 Lively 桌面開啟設定並點擊「匯入」。");
+        alert("✓ 設定代碼已複製到剪貼簿！");
       }).catch(() => {
-        prompt("請手動複製以下設定代碼：", jsonStr);
+        prompt("請手動複製設定代碼：", jsonStr);
       });
     }
 
@@ -770,12 +930,12 @@
             saveAppData();
             renderBoard();
             closeAdminDrawer();
-            alert("✓ 設定代碼匯入成功，已全面更新版面！");
+            alert("✓ 匯入成功！");
           } else {
-            alert("資料格式不完整，請確認是否完整複製代碼。");
+            alert("代碼格式不正確。");
           }
         } catch (e) {
-          alert("代碼解析失敗，請確認貼上的內容是否正確。");
+          alert("代碼解析失敗。");
         }
       }
     }
@@ -1069,23 +1229,6 @@
     updateClock();
     updateDailyQuote();
 
-    function openAuthModal() {
-      document.getElementById("authPassword").value = "";
-      document.getElementById("authModal").style.display = "flex";
-      document.getElementById("authPassword").focus();
-    }
-    function closeAuthModal() {
-      document.getElementById("authModal").style.display = "none";
-    }
-    function verifyPassword() {
-      if (document.getElementById("authPassword").value === "902") {
-        closeAuthModal();
-        enterEditMode();
-      } else {
-        alert("密碼錯誤");
-      }
-    }
-
     function enterEditMode() {
       isEditing = true;
       document.body.classList.add("is-editing");