From 43430c486beb0273d323014d055c31e453b7d8ea Mon Sep 17 00:00:00 2001
From: larry2701 <larry0932085724@gmail.com>
Date: Mon, 12 May 2025 17:29:54 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BE=8C=E5=8F=B0=E9=80=A3=E7=B5=90=E8=88=87?=
 =?UTF-8?q?=E6=9E=B6=E6=A7=8B=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Backstage/Activation.html |  41 +++++++
 Backstage/dashboard.html  | 111 +++++++++++++++++
 Backstage/main.html       | 248 ++++++++++----------------------------
 Backstage/sidebar.html    |  79 ++++++------
 4 files changed, 249 insertions(+), 230 deletions(-)
 create mode 100644 Backstage/Activation.html
 create mode 100644 Backstage/dashboard.html
diff --git a/Backstage/Activation.html b/Backstage/Activation.html
new file mode 100644
index 0000000..b90fa6d
--- /dev/null
+++ b/Backstage/Activation.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="zh-Hant">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>居民開通</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      background-color: #f0f0f0;
+      margin: 0;
+      padding: 20px;
+    }
+
+    .activation-container {
+      background-color: white;
+      border-radius: 8px;
+      padding: 20px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+
+    h1 {
+      text-align: center;
+      color: #333;
+    }
+
+    p {
+      color: #666;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="activation-container">
+    <h1>居民開通</h1>
+    <p>這裡是居民開通的頁面內容。</p>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Backstage/dashboard.html b/Backstage/dashboard.html
new file mode 100644
index 0000000..ab13896
--- /dev/null
+++ b/Backstage/dashboard.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="zh-Hant">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>儀表板內容</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        /* 這些樣式是從原 main.html 複製過來，專用於儀表板內容 */
+        body { font-family: Arial, sans-serif; padding: 20px; background-color: #f5fafa; margin:0; }
+        .top-banner { background: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1470&q=80') no-repeat center/cover; height: 100px; border-radius: 10px; margin-bottom: 20px; position: relative; }
+        .signin-btn { position: absolute; right: 20px; top: 30px; padding: 5px 15px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; }
+        .dashboard-content-grid { display: flex; gap: 20px; flex-wrap: wrap; /* Allow wrapping for responsiveness */ }
+        .left-panel { flex: 2; min-width: 300px; /* Ensure left panel has some width */ }
+        .card { background-color: white; border-radius: 10px; padding: 15px; margin-bottom: 20px; box-shadow: 0 0 5px rgba(0,0,0,0.05); }
+        .table { width: 100%; border-collapse: collapse; }
+        .table th, .table td { text-align: center; padding: 8px; border-bottom: 1px solid #eee; font-size: 14px; } /* Adjusted font size */
+        .table tr:hover { background-color: #f0f8ff; }
+        .right-panel { flex: 1; min-width: 250px; /* Ensure right panel has some width */ display: flex; flex-direction: column; gap: 20px; }
+        .weather, .chart-container { background-color: white; padding: 15px; border-radius: 10px; box-shadow: 0 0 5px rgba(0,0,0,0.05); }
+        .weather { display: flex; align-items: center; justify-content: space-between; color: #fff; background-color: #4ea8de; }
+        .weather .temp { font-size: 28px; font-weight: bold; }
+        .bottom-panel { display: flex; gap: 20px; flex-wrap: wrap; /* Allow wrapping */ }
+        .announcement, .schedule { flex: 1; min-width: 200px; /* Ensure min width */ }
+        .title-row { display: flex; justify-content: space-between; font-weight: bold; margin-bottom: 10px; }
+        .list-item { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #eee; font-size: 14px; }
+        .chart-container { position: relative; height: 350px; /* Adjusted height */ } /* Ensure chart container has dimensions */
+        .chart-container canvas { width: 100% !important; height: 100% !important; }
+    </style>
+</head>
+<body>
+    <div class="top-banner">
+        <button class="signin-btn">簽到</button>
+    </div>
+    <div class="dashboard-content-grid">
+        <div class="left-panel">
+            <div class="card">
+                <div style="font-weight: bold; color: #3b8eea; margin-bottom: 10px;">居民進出</div>
+                <table class="table">
+                     <thead><tr><th></th><th>居民</th><th>出入棟</th><th>日期</th><th>進入時間</th><th>出去時間</th><th>本日進出次數</th><th></th></tr></thead>
+                     <tbody>
+                        <tr><td></td><td>張XX</td><td>A棟</td><td>2022-06-05</td><td>16:02:18</td><td>11:24:05</td><td>3</td><td><a href="#">查看</a></td></tr>
+                        <tr><td></td><td>李XX</td><td>B棟</td><td>2022-05-30</td><td>11:05:32</td><td>06:17:23</td><td>3</td><td><a href="#">查看</a></td></tr>
+                        <tr><td></td><td>黃XX</td><td>A棟</td><td>2022-05-27</td><td>00:58:52</td><td>16:15:54</td><td>3</td><td><a href="#">查看</a></td></tr>
+                        <tr><td></td><td>張XX</td><td>A棟</td><td>2022-06-13</td><td>18:06:35</td><td>03:08:27</td><td>2</td><td><a href="#">查看</a></td></tr>
+                     </tbody>
+                </table>
+            </div>
+            <div class="bottom-panel">
+                <div class="announcement card">
+                    <div class="title-row"><span>公告</span><span style="color:#007bff">更多</span></div>
+                    <div class="list-item"><span>清潔日請勿倒垃圾</span><span>05/21</span></div>
+                    <div class="list-item"><span>施工注意事項</span><span>05/19</span></div>
+                    <div class="list-item"><span>社區防火演習</span><span>06/08</span></div>
+                    <div class="list-item"><span>電梯保養公告</span><span>05/17</span></div>
+                </div>
+                <div class="schedule card">
+                    <div class="title-row"><span>活動日程</span><span style="color:#007bff">更多</span></div>
+                    <div class="list-item"><span>社區健走活動</span><span>2022-06-08</span></div>
+                    <div class="list-item"><span>二手市集</span><span>2022-05-20</span></div>
+                    <div class="list-item"><span>兒童故事會</span><span>2022-05-23</span></div>
+                    <div class="list-item"><span>防災講座</span><span>2022-06-09</span></div>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="weather">
+                <div><div>2022年6月16日</div><div>天氣晴，適合外出散步</div></div>
+                <div class="temp">24°C</div>
+            </div>
+            <div class="chart-container">
+                <div style="font-weight: bold; color: #3b8eea; margin-bottom: 10px;">周進出統計</div>
+                <canvas id="myChart"></canvas>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const canvasElement = document.getElementById('myChart');
+            if (canvasElement) {
+                const ctx = canvasElement.getContext('2d');
+                if (ctx) { // Ensure context is valid
+                    new Chart(ctx, {
+                        type: 'bar',
+                        data: {
+                            labels: ['4/30', '5/1', '5/2', '5/3', '5/4', '5/5', '5/6'],
+                            datasets: [{
+                                label: '進出人數',
+                                data: [12, 19, 3, 5, 2, 8, 10],
+                                backgroundColor: 'rgba(75, 192, 192, 0.5)',
+                                borderColor: 'rgba(75, 192, 192, 1)',
+                                borderWidth: 1
+                            }]
+                        },
+                        options: {
+                            responsive: true,
+                            maintainAspectRatio: false,
+                            scales: { y: { beginAtZero: true } }
+                        }
+                    });
+                } else {
+                    console.error("無法取得 'myChart' canvas 的 2D context。");
+                }
+            } else {
+                // console.log("'myChart' canvas element 未找到。");
+            }
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Backstage/main.html b/Backstage/main.html
index d27a3a2..9e60f7a 100644
--- a/Backstage/main.html
+++ b/Backstage/main.html
@@ -4,213 +4,87 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>社區儀表板</title>
-  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-    body {
-      font-family: Arial, sans-serif;
-      background-color: #f5fafa;
-      display: flex;
-    }
-    .main {
-      flex: 1;
-      padding: 20px;
-    }
-    .top-banner {
-      background: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1470&q=80') no-repeat center/cover;
-      height: 100px;
-      border-radius: 10px;
-      margin-bottom: 20px;
-      position: relative;
-    }
-    .signin-btn {
-      position: absolute;
-      right: 20px;
-      top: 30px;
-      padding: 5px 15px;
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body { height: 100%; font-family: Arial, sans-serif; background-color: #f5fafa; overflow: hidden; }
+    .top-header {
+      height: 50px;
       background-color: #007bff;
       color: white;
-      border: none;
-      border-radius: 5px;
-      cursor: pointer;
-    }
-    .content {
-      display: flex;
-      gap: 20px;
-    }
-    .left-panel {
-      flex: 2;
-    }
-    .card {
-      background-color: white;
-      border-radius: 10px;
-      padding: 15px;
-      margin-bottom: 20px;
-      box-shadow: 0 0 5px rgba(0,0,0,0.05);
-    }
-    .table {
-      width: 100%;
-      border-collapse: collapse;
-    }
-    .table th, .table td {
-      text-align: center;
-      padding: 8px;
-      border-bottom: 1px solid #eee;
-    }
-    .table tr:hover {
-      background-color: #f0f8ff;
-    }
-    .right-panel {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      gap: 20px;
-    }
-    .weather, .chart {
-      background-color: white;
-      padding: 15px;
-      border-radius: 10px;
-      box-shadow: 0 0 5px rgba(0,0,0,0.05);
-    }
-    .weather {
       display: flex;
       align-items: center;
-      justify-content: space-between;
-      color: #fff;
-      background-color: #4ea8de;
-    }
-    .weather .temp {
-      font-size: 28px;
+      justify-content: center;
+      font-size: 18px;
       font-weight: bold;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      z-index: 999;
     }
-    .bottom-panel {
-      display: flex;
-      gap: 20px;
+    .sidebar-container {
+      position: fixed;
+      top: 50px;
+      left: 0;
+      width: 200px;
+      height: calc(100vh - 50px);
+      z-index: 998;
+      background-color: white; /* Fallback background for the container */
+      border-right: 1px solid #ddd;
     }
-    .announcement, .schedule {
-      flex: 1;
+    .sidebar-container iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
     }
-    .title-row {
-      display: flex;
-      justify-content: space-between;
-      font-weight: bold;
-      margin-bottom: 10px;
+    .main-content-area-wrapper {
+      margin-left: 200px; /* Width of sidebar */
+      padding-top: 50px; /* Height of header */
+      height: calc(100vh - 50px);
+      overflow: hidden; /* Contains the iframe properly */
     }
-    .list-item {
-      display: flex;
-      justify-content: space-between;
-      padding: 6px 0;
-      border-bottom: 1px solid #eee;
-      font-size: 14px;
-    }
-    .chart {
-        position: relative;
-        height: 500px;
-    }
-    .chart canvas {
-        width: 100% !important;
-        height: 100% !important;
+    #mainContentFrame {
+      width: 100%;
+      height: 100%;
+      border: none;
     }
   </style>
 </head>
 <body>
+  <div class="top-header">社區智慧管理系統</div>
+
   <div class="sidebar-container">
-    <iframe src="sidebar.html" style="width: 200px; height: 100vh; border: none;"></iframe>
+    <iframe src="sidebar.html" id="sidebarFrame"></iframe>
   </div>
-  <div class="main">
-    <div class="top-banner">
-      <button class="signin-btn">簽到</button>
-    </div>
-    <div class="content">
-      <div class="left-panel">
-        <div class="card">
-          <div style="font-weight: bold; color: #3b8eea; margin-bottom: 10px;">居民進出</div>
-          <table class="table">
-            <thead>
-              <tr>
-                <th></th>
-                <th>居民</th>
-                <th>出入棟</th>
-                <th>日期</th>
-                <th>進入時間</th>
-                <th>出去時間</th>
-                <th>本日進出次數</th>
-                <th></th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr><td></td><td>張XX</td><td>A棟</td><td>2022-06-05</td><td>16:02:18</td><td>11:24:05</td><td>3</td><td><a href="#">查看</a></td></tr>
-              <tr><td></td><td>李XX</td><td>B棟</td><td>2022-05-30</td><td>11:05:32</td><td>06:17:23</td><td>3</td><td><a href="#">查看</a></td></tr>
-              <tr><td></td><td>黃XX</td><td>A棟</td><td>2022-05-27</td><td>00:58:52</td><td>16:15:54</td><td>3</td><td><a href="#">查看</a></td></tr>
-              <tr><td></td><td>張XX</td><td>A棟</td><td>2022-06-13</td><td>18:06:35</td><td>03:08:27</td><td>2</td><td><a href="#">查看</a></td></tr>
-            </tbody>
-          </table>
-        </div>
-        <div class="bottom-panel">
-          <div class="announcement card">
-            <div class="title-row">
-              <span>公告</span>
-              <span style="color:#007bff">更多</span>
-            </div>
-            <div class="list-item"><span>清潔日請勿倒垃圾</span><span>05/21</span></div>
-            <div class="list-item"><span>施工注意事項</span><span>05/19</span></div>
-            <div class="list-item"><span>社區防火演習</span><span>06/08</span></div>
-            <div class="list-item"><span>電梯保養公告</span><span>05/17</span></div>
-          </div>
-          <div class="schedule card">
-            <div class="title-row">
-              <span>活動日程</span>
-              <span style="color:#007bff">更多</span>
-            </div>
-            <div class="list-item"><span>社區健走活動</span><span>2022-06-08</span></div>
-            <div class="list-item"><span>二手市集</span><span>2022-05-20</span></div>
-            <div class="list-item"><span>兒童故事會</span><span>2022-05-23</span></div>
-            <div class="list-item"><span>防災講座</span><span>2022-06-09</span></div>
-          </div>
-        </div>
-      </div>
-      <div class="right-panel">
-        <div class="weather">
-          <div>
-            <div>2022年6月16日</div>
-            <div>天氣晴，適合外出散步</div>
-          </div>
-          <div class="temp">24°C</div>
-        </div>
-        <div class="chart">
-          <div style="font-weight: bold; color: #3b8eea; margin-bottom: 10px;">周進出統計</div>
-          <canvas id="myChart"></canvas>
-        </div>
-      </div>
-    </div>
+
+  <div class="main-content-area-wrapper">
+    <iframe id="mainContentFrame" name="mainContentFrame" src="dashboard.html"></iframe>
   </div>
 
   <script>
-    const ctx = document.getElementById('myChart').getContext('2d');
-    const myChart = new Chart(ctx, {
-      type: 'bar',
-      data: {
-        labels: ['4/30', '5/1', '5/2', '5/3', '5/4', '5/5','5/6'],
-        datasets: [{
-          label: '進出人數',
-          data: [12, 19, 3, 5, 2, 8, 10],
-          backgroundColor: 'rgba(75, 192, 192, 0.5)',
-          borderColor: 'rgba(75, 192, 192, 1)',
-          borderWidth: 1
-        }]
-      },
-      options: {
-        responsive: true,
-        maintainAspectRatio: false,
-        scales: {
-          y: {
-            beginAtZero: true
-          }
+    window.addEventListener('message', function(event) {
+      // 對於 file:/// URLs, event.origin 可能為 "null"。
+      // 在正式伺服器環境，您必須檢查 event.origin。
+      // if (event.origin !== 'http://your-expected-origin.com') return;
+
+      // 安全性提示：在 file:/// 環境下，嚴格的來源檢查可能不可靠。
+      // 但可以檢查訊息是否來自期望的 iframe。
+      // if (event.source !== document.getElementById('sidebarFrame').contentWindow) {
+      //   console.warn('訊息來源非 sidebarFrame，已忽略。');
+      //   return;
+      // }
+
+      const message = event.data;
+      if (message && message.type === 'navigate' && typeof message.url === 'string') {
+        const mainContentFrame = document.getElementById('mainContentFrame');
+        if (mainContentFrame) {
+          console.log('Main page: 接收到導航請求 ->', message.url);
+          mainContentFrame.src = message.url;
+        } else {
+          console.error('錯誤: mainContentFrame 未找到!');
         }
+      } else {
+        // console.log('Main page: 接收到未知訊息或格式不符:', message);
       }
     });
   </script>
diff --git a/Backstage/sidebar.html b/Backstage/sidebar.html
index b9b905c..44f60d9 100644
--- a/Backstage/sidebar.html
+++ b/Backstage/sidebar.html
@@ -5,54 +5,47 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>功能列</title>
   <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-    .sidebar {
-      width: 200px;
-      background-color: white;
-      border-right: 1px solid #ddd;
-      padding-top: 20px;
-      height: 100vh;
-    }
-    .sidebar img {
-      display: block;
-      margin: 0 auto 20px;
-      width: 60px;
-      height: 60px;
-      border-radius: 50%;
-    }
-    .sidebar ul {
-      list-style: none;
-      padding-left: 0;
-    }
-    .sidebar ul li {
-      padding: 12px 20px;
-      color: #333;
-      cursor: pointer;
-    }
-    .sidebar ul li:hover, .sidebar ul li.active {
-      background-color: #e6f0f8;
-      color: #007bff;
-    }
+    html, body { height: 100%; margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; } /* Allow vertical scroll in sidebar */
+    .sidebar { /* height: 100%; removed as body handles height */ }
+    .sidebar img { display: block; margin: 20px auto; width: 60px; height: 60px; border-radius: 50%; }
+    .sidebar ul { list-style: none; padding-left: 0; margin-top:0; }
+    .sidebar ul li { padding: 12px 20px; color: #333; cursor: pointer; }
+    .sidebar ul li:hover, .sidebar ul li.active { background-color: #e6f0f8; color: #007bff; }
   </style>
 </head>
 <body>
   <div class="sidebar">
-    <img src="https://via.placeholder.com/60" alt="Logo" />
+    <img src="https://cdn-icons-png.freepik.com/512/4873/4873262.png" alt="Logo" />
     <ul>
-      <li class="active">首頁</li>
-      <li>居民開通</li>
-      <li>出入管理</li>
-      <li>緊急通報</li>
-      <li>訊息通知</li>
-      <li>水電服務</li>
-      <li>佈告欄</li>
-      <li>報表匯出</li>
-      <li>設定</li>
-    </ul>
+      <li class="active" onclick="requestNavigation('dashboard.html', this)">首頁</li>
+      <li onclick="requestNavigation('Activation.html', this)">居民開通</li>
+      <li onclick="requestNavigation('some_page1.html', this)">出入管理</li>
+      <li onclick="requestNavigation('some_page2.html', this)">緊急通報</li>
+      <li onclick="requestNavigation('some_page3.html', this)">訊息通知</li>
+      <li onclick="requestNavigation('some_page4.html', this)">水電服務</li>
+      <li onclick="requestNavigation('some_page5.html', this)">佈告欄</li>
+      <li onclick="requestNavigation('some_page6.html', this)">報表匯出</li>
+      <li onclick="requestNavigation('some_page7.html', this)">設定</li>
+      </ul>
   </div>
+
+  <script>
+    function requestNavigation(url, clickedElement) {
+      console.log('Sidebar: 發送導航請求 ->', url);
+      // 向父視窗 (main.html) 發送訊息
+      // 對於 file:/// 環境, targetOrigin 必須是 '*'
+      // 在正式伺服器環境，應指定父視窗的確切來源 (e.g., 'http://yourdomain.com')
+      parent.postMessage({ type: 'navigate', url: url }, '*');
+
+      // 更新側邊欄本地的 active class
+      const listItems = document.querySelectorAll('.sidebar ul li');
+      listItems.forEach(item => {
+        item.classList.remove('active');
+      });
+      if (clickedElement) {
+        clickedElement.classList.add('active');
+      }
+    }
+  </script>
 </body>
 </html>
\ No newline at end of file

居民	出入棟	日期	進入時間	出去時間	本日進出次數
張XX	A棟	2022-06-05	16:02:18	11:24:05	3	查看
李XX	B棟	2022-05-30	11:05:32	06:17:23	3	查看
黃XX	A棟	2022-05-27	00:58:52	16:15:54	3	查看
張XX	A棟	2022-06-13	18:06:35	03:08:27	2	查看