Upload index.html

index.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html lang="zh-TW">
-<head>
+<html lang="zh-TW"><head><script>window.huggingface={variables:{"SPACE_CREATOR_USER_ID":"675d88eddd3e9eeed66ba88f"}};</script>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <title>Classroom Focus OS - 班級旗艦極光看板</title>
@@ -598,19 +598,139 @@
     }
   </style>
 </head>
-<body data-theme="dark-slate">
+<body data-theme="dark-slate" class="is-editing">
 
-  <canvas id="aurora-canvas"></canvas>
+  <canvas id="aurora-canvas" width="1536" height="680"></canvas>
 
   <div class="top-bar">
     <div class="live-clock-line">
-      <div class="live-clock" id="liveClock">00:00:00</div>
+      <div class="live-clock" id="liveClock">08:58:48</div>
       <div class="period-indicator" id="periodIndicator">課堂專注模式</div>
     </div>
-    <div class="quote-capsule" id="dailyQuoteText">載入每日名言...</div>
+    <div class="quote-capsule" id="dailyQuoteText">緊張是因為你在乎，把在乎換成多做一題。</div>
   </div>
 
-  <div id="canvas-workspace"></div>
+  <div id="canvas-workspace"><div class="board-card " id="card-1" data-cat="exam" style="left: 1069px; top: 109.6px; width: 448.8px; height: 281.8px;">
+          <div class="card-inner">
+            <div class="card-top">
+              <div class="card-header-line">
+                <div class="cat-icon"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg></div>
+                <div class="card-title">第一次定期評量</div>
+              </div>
+              <div class="card-target-date">2026.10.14</div>
+            </div>
+
+            <div class="card-center-metric">
+              <span class="metric-number" style="font-size: 7.012500762939453rem;">25</span>
+              <span class="metric-unit">天</span>
+            </div>
+
+            <div class="card-dynamic-body" style="display: none;">
+              <div class="progress-track">
+                <div class="progress-fill" style="width: 58%;"></div>
+              </div>
+              <div class="metric-details">
+                <span>備考準備期進度：58%</span>
+                <span>約合 <b>3.6</b> 週</span>
+              </div>
+            </div>
+
+            <div class="card-badge-wrap">
+              <div class="status-capsule">倒數 25 天</div>
+            </div>
+          </div>
+          <div class="resize-handle"></div>
+        </div><div class="board-card " id="card-2" data-cat="sports" style="left: 1066.6px; top: 402px; width: 457.8px; height: 256.6px;">
+          <div class="card-inner">
+            <div class="card-top">
+              <div class="card-header-line">
+                <div class="cat-icon"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"></path><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"></path><path d="M4 22h16"></path><path d="M10 14.66V17c0 .55-.45 1-1 1H7v4h10v-4h-2c-.55 0-1-.45-1-1v-2.34c3.08-.63 5.4-3.3 5.4-6.66V4H4v4c0 3.36 2.32 6.03 5.4 6.66z"></path></svg></div>
+                <div class="card-title">校慶運動大會</div>
+              </div>
+              <div class="card-target-date">2026.11.14</div>
+            </div>
+
+            <div class="card-center-metric">
+              <span class="metric-number" style="font-size: 6.414999389648438rem;">56</span>
+              <span class="metric-unit">天</span>
+            </div>
+
+            <div class="card-dynamic-body" style="display: none;">
+              <div class="progress-track">
+                <div class="progress-fill" style="width: 38%;"></div>
+              </div>
+              <div class="metric-details">
+                <span>備考準備期進度：38%</span>
+                <span>約合 <b>8.0</b> 週</span>
+              </div>
+            </div>
+
+            <div class="card-badge-wrap">
+              <div class="status-capsule">倒數 56 天</div>
+            </div>
+          </div>
+          <div class="resize-handle"></div>
+        </div><div class="board-card highlight" id="card-3" data-cat="exam" style="left: 32px; top: 115px; width: 550.6px; height: 534px;">
+          <div class="card-inner">
+            <div class="card-top">
+              <div class="card-header-line">
+                <div class="cat-icon"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg></div>
+                <div class="card-title">國中教育會考</div>
+              </div>
+              <div class="card-target-date">2027.05.15</div>
+            </div>
+
+            <div class="card-center-metric">
+              <span class="metric-number" style="font-size: 7.5rem;">238</span>
+              <span class="metric-unit">天</span>
+            </div>
+
+            <div class="card-dynamic-body" style="display: flex;">
+              <div class="progress-track">
+                <div class="progress-fill" style="width: 21%;"></div>
+              </div>
+              <div class="metric-details">
+                <span>備考準備期進度：21%</span>
+                <span>約合 <b>34.0</b> 週</span>
+              </div>
+            </div>
+
+            <div class="card-badge-wrap">
+              <div class="status-capsule">倒數 238 天</div>
+            </div>
+          </div>
+          <div class="resize-handle"></div>
+        </div><div class="board-card highlight" id="card-1789777581106" data-cat="exam" style="left: 601.6px; top: 116.2px; width: 434.2px; height: 534px;">
+          <div class="card-inner">
+            <div class="card-top">
+              <div class="card-header-line">
+                <div class="cat-icon"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg></div>
+                <div class="card-title">全縣模擬考(1-4冊)</div>
+              </div>
+              <div class="card-target-date">2026.12.23</div>
+            </div>
+
+            <div class="card-center-metric">
+              <span class="metric-number" style="font-size: 6.784375190734863rem;">95</span>
+              <span class="metric-unit">天</span>
+            </div>
+
+            <div class="card-dynamic-body" style="display: flex;">
+              <div class="progress-track">
+                <div class="progress-fill" style="width: 5%;"></div>
+              </div>
+              <div class="metric-details">
+                <span>備考準備期進度：5%</span>
+                <span>約合 <b>13.6</b> 週</span>
+              </div>
+            </div>
+
+            <div class="card-badge-wrap">
+              <div class="status-capsule">倒數 95 天</div>
+            </div>
+          </div>
+          <div class="resize-handle"></div>
+        </div></div>
 
   <!-- 編輯狀態控制列 -->
   <div class="edit-banner" id="editBanner">
@@ -623,20 +743,20 @@
   <!-- 齒輪解鎖按鈕 -->
   <div class="settings-trigger" onclick="openPinModal()" title="開啟看板設定">
     <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"/>
+      <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"></path>
     </svg>
   </div>
 
   <!-- 螢幕數位按鍵鎖 -->
-  <div class="modal-backdrop" id="pinModal">
+  <div class="modal-backdrop" id="pinModal" style="display: none;">
     <div class="pin-modal-box">
       <h3>管理員驗證</h3>
       <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>
-        <div class="pin-dot"></div>
-        <div class="pin-dot"></div>
+        <div class="pin-dot filled"></div>
+        <div class="pin-dot filled"></div>
+        <div class="pin-dot filled"></div>
       </div>
 
       <div class="pin-keypad">
@@ -659,7 +779,7 @@
   </div>
 
   <!-- 後台側拉抽屜 -->
-  <div class="admin-drawer" id="adminDrawer">
+  <div class="admin-drawer" id="adminDrawer" style="display: flex;">
     <div class="drawer-header">
       <h3>看板與上下課作息設定</h3>
       <button class="btn btn-secondary" onclick="closeAdminDrawer()">關閉</button>
@@ -706,7 +826,75 @@
           <h4>倒數項目資料庫 (可複選多個高亮)</h4>
           <button class="btn btn-primary" onclick="addNewEvent()">+ 新增卡片</button>
         </div>
-        <div id="editorItemList" style="display:flex; flex-direction:column; gap:10px;"></div>
+        <div id="editorItemList" style="display:flex; flex-direction:column; gap:10px;"><div class="item-row">
+          <div class="item-inputs">
+            <input type="text" value="第一次定期評量" placeholder="名稱" onchange="appState.cards[0].title=this.value">
+            <input type="date" value="2026-10-14" onchange="appState.cards[0].date=this.value">
+          </div>
+          <div style="display:flex; justify-content:space-between; align-items:center;">
+            <select onchange="appState.cards[0].cat=this.value; renderBoard();">
+              <option value="exam" selected="">學業考試 (書本)</option>
+              <option value="sports">運動競賽 (獎盃)</option>
+              <option value="event">校慶活動 (旗幟)</option>
+              <option value="life">常態生活 (時鐘)</option>
+            </select>
+            <label style="font-size:0.8rem; color:#cbd5e1; display:flex; align-items:center; gap:4px; cursor:pointer;">
+              <input type="checkbox" onchange="toggleCardHighlight(0, this.checked)"> 重要高亮
+            </label>
+            <button class="btn btn-danger" style="padding:4px 8px;" onclick="removeCard(0)">刪除</button>
+          </div>
+        </div><div class="item-row">
+          <div class="item-inputs">
+            <input type="text" value="校慶運動大會" placeholder="名稱" onchange="appState.cards[1].title=this.value">
+            <input type="date" value="2026-11-14" onchange="appState.cards[1].date=this.value">
+          </div>
+          <div style="display:flex; justify-content:space-between; align-items:center;">
+            <select onchange="appState.cards[1].cat=this.value; renderBoard();">
+              <option value="exam">學業考試 (書本)</option>
+              <option value="sports" selected="">運動競賽 (獎盃)</option>
+              <option value="event">校慶活動 (旗幟)</option>
+              <option value="life">常態生活 (時鐘)</option>
+            </select>
+            <label style="font-size:0.8rem; color:#cbd5e1; display:flex; align-items:center; gap:4px; cursor:pointer;">
+              <input type="checkbox" onchange="toggleCardHighlight(1, this.checked)"> 重要高亮
+            </label>
+            <button class="btn btn-danger" style="padding:4px 8px;" onclick="removeCard(1)">刪除</button>
+          </div>
+        </div><div class="item-row">
+          <div class="item-inputs">
+            <input type="text" value="國中教育會考" placeholder="名稱" onchange="appState.cards[2].title=this.value">
+            <input type="date" value="2027-05-15" onchange="appState.cards[2].date=this.value">
+          </div>
+          <div style="display:flex; justify-content:space-between; align-items:center;">
+            <select onchange="appState.cards[2].cat=this.value; renderBoard();">
+              <option value="exam" selected="">學業考試 (書本)</option>
+              <option value="sports">運動競賽 (獎盃)</option>
+              <option value="event">校慶活動 (旗幟)</option>
+              <option value="life">常態生活 (時鐘)</option>
+            </select>
+            <label style="font-size:0.8rem; color:#cbd5e1; display:flex; align-items:center; gap:4px; cursor:pointer;">
+              <input type="checkbox" checked="" onchange="toggleCardHighlight(2, this.checked)"> 重要高亮
+            </label>
+            <button class="btn btn-danger" style="padding:4px 8px;" onclick="removeCard(2)">刪除</button>
+          </div>
+        </div><div class="item-row">
+          <div class="item-inputs">
+            <input type="text" value="全縣模擬考(1-4冊)" placeholder="名稱" onchange="appState.cards[3].title=this.value">
+            <input type="date" value="2026-12-23" onchange="appState.cards[3].date=this.value">
+          </div>
+          <div style="display:flex; justify-content:space-between; align-items:center;">
+            <select onchange="appState.cards[3].cat=this.value; renderBoard();">
+              <option value="exam" selected="">學業考試 (書本)</option>
+              <option value="sports">運動競賽 (獎盃)</option>
+              <option value="event">校慶活動 (旗幟)</option>
+              <option value="life">常態生活 (時鐘)</option>
+            </select>
+            <label style="font-size:0.8rem; color:#cbd5e1; display:flex; align-items:center; gap:4px; cursor:pointer;">
+              <input type="checkbox" checked="" onchange="toggleCardHighlight(3, this.checked)"> 重要高亮
+            </label>
+            <button class="btn btn-danger" style="padding:4px 8px;" onclick="removeCard(3)">刪除</button>
+          </div>
+        </div></div>
       </div>
     </div>
 
@@ -839,14 +1027,68 @@
 
     /*START_DEFAULT_DATA*/
     const DEFAULT_DATA = {
-      theme: "dark-slate",
-      schedule: DEFAULT_SCHEDULE,
-      cards: [
-        { 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 }
-      ]
-    };
+  "theme": "dark-slate",
+  "schedule": [
+    "08:15-09:00",
+    "09:10-09:55",
+    "10:10-10:55",
+    "11:05-11:50",
+    "13:10-13:55",
+    "14:05-14:50",
+    "15:05-15:50",
+    "16:00-16:45"
+  ],
+  "cards": [
+    {
+      "id": "1",
+      "title": "第一次定期評量",
+      "date": "2026-10-14",
+      "cat": "exam",
+      "highlight": false,
+      "x": 1069,
+      "y": 109.5999984741211,
+      "w": 448.800048828125,
+      "h": 281.800048828125,
+      "totalSpan": 60
+    },
+    {
+      "id": "2",
+      "title": "校慶運動大會",
+      "date": "2026-11-14",
+      "cat": "sports",
+      "highlight": false,
+      "x": 1066.60009765625,
+      "y": 402,
+      "w": 457.7999267578125,
+      "h": 256.5999755859375,
+      "totalSpan": 90
+    },
+    {
+      "id": "3",
+      "title": "國中教育會考",
+      "date": "2027-05-15",
+      "cat": "exam",
+      "highlight": true,
+      "x": 32,
+      "y": 115,
+      "w": 550.5999755859375,
+      "h": 534,
+      "totalSpan": 300
+    },
+    {
+      "id": "1789777581106",
+      "title": "全縣模擬考(1-4冊)",
+      "date": "2026-12-23",
+      "cat": "exam",
+      "highlight": true,
+      "x": 601.6000366210938,
+      "y": 116.19998168945312,
+      "w": 434.20001220703125,
+      "h": 534,
+      "totalSpan": 100
+    }
+  ]
+};
     /*END_DEFAULT_DATA*/
 
     const STORAGE_KEY = "classroom_focus_master_data";
@@ -1449,5 +1691,6 @@
 
     renderBoard();
   </script>
-</body>
+
+</body></html>
 </html>