Leecheng/CommunityAPP_UI
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

調整後台樣式

Browse Source
This commit is contained in:
larry2701 2025-05-19 17:06:28 +08:00
parent 7e16cabda4
commit eded4e9cbf
8 changed files with 876 additions and 307 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

189
Backstage/message.html Normal file
View File

@ -0,0 +1,189 @@
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8" />
<title>居民對話訊息</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<style>
.chat-box {
height: 70vh;
overflow-y: auto;
background-color: #f8f9fa;
padding: 1rem;
border: 1px solid #dee2e6;
border-radius: 0.5rem;
}
.message-left {
text-align: left;
}
.message-right {
text-align: right;
}
.message {
display: inline-block;
padding: 0.5rem 1rem;
margin: 0.25rem 0;
border-radius: 1rem;
max-width: 75%;
}
.resident-msg {
background-color: #ffffff;
border: 1px solid #ced4da;
}
.admin-msg {
background-color: #d1e7dd;
border: 1px solid #badbcc;
}
.canned-replies button {
margin: 0.25rem 0.25rem 0 0;
}
#messageInput {
height: calc(2.25rem + 0.5rem);
}
#sendBtn {
padding: 0.35rem 1rem;
}
/* 上傳按鈕樣式 */
.btn-upload {
padding: 0 0.75rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: 1px solid #ced4da;
border-radius: 0.375rem 0 0 0.375rem;
background-color: #fff;
color: #0d6efd;
transition: background-color 0.2s ease;
}
.btn-upload:hover {
background-color: #e7f1ff;
}
/* 檔名顯示 */
.file-name {
margin-top: 0.3rem;
font-style: italic;
color: #555;
min-height: 1.2rem;
}
/* 調整輸入組合整體圓角 */
.input-group>.btn-upload {
border-right: none;
}
.input-group>.form-control {
border-radius: 0 0.375rem 0.375rem 0;
}
</style>
</head>
<body>
<div class="container mt-4">
<div
class="d-flex justify-content-between align-items-center mb-3"
>
<h4 id="residentName">王小明</h4>
<a href="message_list.html" class="btn btn-outline-secondary"
>← 返回列表</a
>
</div>
<div class="chat-box mb-3" id="chatBox">
<div class="message-left">
<div class="message resident-msg">你好，今天有包裹嗎？</div>
</div>
<div class="message-right">
<div class="message admin-msg">您好，有一個郵件已放置櫃台。</div>
</div>
<div class="message-left">
<div class="message resident-msg">好的，謝謝您。</div>
</div>
<div class="message-right">
<div class="message admin-msg">不客氣，祝您愉快！</div>
</div>
</div>
<!-- 罐頭訊息選單 -->
<div class="canned-replies mb-2">
<small class="text-muted">快速訊息：</small><br />
<button class="btn btn-sm btn-outline-primary">
您好，請問有什麼需要協助的？
</button>
<button class="btn btn-sm btn-outline-primary">
已為您處理，請稍候查看。
</button>
<button class="btn btn-sm btn-outline-primary">
明天早上會有維修人員前來。
</button>
<button class="btn btn-sm btn-outline-primary">
若有其他問題，歡迎再聯繫我們。
</button>
</div>
<!-- 輸入區：上傳按鈕 + 輸入框 + 送出按鈕 -->
<div class="input-group mb-1">
<label for="fileUpload" class="btn-upload" title="上傳照片附件">📷</label>
<input
type="file"
id="fileUpload"
accept="image/*"
style="display: none"
/>
<input
type="text"
class="form-control"
placeholder="輸入訊息..."
id="messageInput"
/>
<button class="btn btn-primary" type="button" id="sendBtn">
送出
</button>
</div>
<!-- 顯示已選檔案名稱 -->
<div id="fileName" class="file-name"></div>
</div>
<script>
// 點擊罐頭訊息時自動填入輸入框
document.querySelectorAll(".canned-replies button").forEach((btn) => {
btn.addEventListener("click", () => {
document.getElementById("messageInput").value = btn.textContent;
});
});
// 顯示已選檔案名稱
const fileInput = document.getElementById("fileUpload");
const fileNameDisplay = document.getElementById("fileName");
fileInput.addEventListener("change", () => {
if (fileInput.files.length > 0) {
fileNameDisplay.textContent = "已選擇檔案: " + fileInput.files[0].name;
} else {
fileNameDisplay.textContent = "";
}
});
// 模擬送出訊息功能
document.getElementById("sendBtn").addEventListener("click", () => {
const msg = document.getElementById("messageInput").value.trim();
if (msg) {
alert("（模擬送出）訊息內容: " + msg);
document.getElementById("messageInput").value = "";
fileInput.value = "";
fileNameDisplay.textContent = "";
} else {
alert("請輸入訊息或上傳圖片！");
}
});
</script>
</body>
</html>

140
Backstage/message_list.html Normal file
View File

@ -0,0 +1,140 @@
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>居民列表</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
<div class="d-flex justify-content-between mb-3">
<h2>居民訊息列表</h2>
<button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#searchModal">搜尋居民</button>
</div>
<table class="table table-bordered table-hover">
<thead class="table-light">
<tr>
<th>姓名</th>
<th>房號</th>
<th>對話摘要</th>
<th>狀態</th>
<th>操作</th>
</tr>
</thead>
<tbody id="residentTable"></tbody>
</table>
<div class="d-flex justify-content-between align-items-center">
<div>第 <span id="currentPage">1</span> 頁，共 <span id="totalPages">1</span> 頁</div>
<div>
<button class="btn btn-sm btn-outline-secondary me-1" id="prevBtn">上一頁</button>
<button class="btn btn-sm btn-outline-secondary" id="nextBtn">下一頁</button>
</div>
</div>
</div>
<!-- 搜尋浮框 -->
<div class="modal fade" id="searchModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">搜尋居民</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<input type="text" id="searchInput" class="form-control" placeholder="輸入姓名或房號">
<ul class="list-group mt-2" id="searchResult"></ul>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
const residents = [
{ id: 1, name: "王小明", room: "A101", lastMessage: "...你好，今天有包裹嗎？", read: false },
{ id: 2, name: "林美麗", room: "B102", lastMessage: "...請問水費怎麼繳？", read: true },
{ id: 3, name: "張大雄", room: "A103", lastMessage: "...昨天的會議很好。", read: true },
{ id: 4, name: "李小龍", room: "B104", lastMessage: "...我明天不在家。", read: false },
{ id: 5, name: "周杰倫", room: "A105", lastMessage: "...冷氣修好了嗎？", read: true },
{ id: 6, name: "蔡依林", room: "B106", lastMessage: "...感謝管理員的協助。", read: false },
{ id: 7, name: "林志玲", room: "A107", lastMessage: "...還沒收到帳單。", read: true },
{ id: 8, name: "王力宏", room: "A108", lastMessage: "...燈壞了，已報修。", read: false },
{ id: 9, name: "陳小春", room: "B109", lastMessage: "...我週末會外出。", read: true },
{ id: 10, name: "五月天", room: "A110", lastMessage: "...下週有活動嗎？", read: false },
{ id: 11, name: "田馥甄", room: "B201", lastMessage: "...可以幫我收信嗎？", read: true },
{ id: 12, name: "鄧紫棋", room: "A202", lastMessage: "...今晚電梯會維修。", read: false }
];
const pageSize = 5;
let currentPage = 1;
function renderTable() {
const tbody = document.getElementById("residentTable");
tbody.innerHTML = "";
const startIndex = (currentPage - 1) * pageSize;
const pageResidents = residents.slice(startIndex, startIndex + pageSize);
pageResidents.forEach(r => {
const tr = document.createElement("tr");
const statusBadge = r.read
? `<span class="text-secondary">⚪ 已讀</span>`
: `<span class="text-warning">🟡 未讀</span>`;
const messageText = r.read ? r.lastMessage : `<strong>${r.lastMessage}</strong>`;
tr.innerHTML = `
<td>${r.name}</td>
<td>${r.room}</td>
<td>${messageText}</td>
<td>${statusBadge}</td>
<td><a href="message.html?id=${r.id}" class="btn btn-outline-secondary btn-sm">查看訊息</a></td>
`;
tbody.appendChild(tr);
});
const totalPages = Math.ceil(residents.length / pageSize);
document.getElementById("currentPage").textContent = currentPage;
document.getElementById("totalPages").textContent = totalPages;
document.getElementById("prevBtn").disabled = currentPage === 1;
document.getElementById("nextBtn").disabled = currentPage === totalPages;
}
document.getElementById("prevBtn").addEventListener("click", () => {
if (currentPage > 1) {
currentPage--;
renderTable();
}
});
document.getElementById("nextBtn").addEventListener("click", () => {
const totalPages = Math.ceil(residents.length / pageSize);
if (currentPage < totalPages) {
currentPage++;
renderTable();
}
});
document.getElementById("searchInput").addEventListener("input", function() {
const keyword = this.value.trim().toLowerCase();
const results = residents.filter(r =>
r.name.toLowerCase().includes(keyword) ||
r.room.toLowerCase().includes(keyword)
);
const resultList = document.getElementById("searchResult");
resultList.innerHTML = "";
results.forEach(r => {
const li = document.createElement("li");
li.className = "list-group-item list-group-item-action";
li.textContent = `${r.name} (${r.room})`;
li.onclick = () => window.location.href = `message.html?id=${r.id}`;
resultList.appendChild(li);
});
});
renderTable();
</script>
</body>
</html>

104
Backstage/notice_list.html Normal file
View File

@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>通報列表</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
<div class="d-flex justify-content-between mb-3">
<h2>居民通報列表</h2>
</div>
<table class="table table-bordered table-hover">
<thead class="table-light">
<tr>
<th>姓名</th>
<th>房號</th>
<th>通報類型</th>
<th>說明</th>
<th>通報時間</th>
<th>狀態</th>
<th>操作</th>
</tr>
</thead>
<tbody id="reportTable"></tbody>
</table>
<div class="d-flex justify-content-between align-items-center">
<div>第 <span id="currentPage">1</span> 頁，共 <span id="totalPages">1</span> 頁</div>
<div>
<button class="btn btn-sm btn-outline-secondary me-1" id="prevBtn">上一頁</button>
<button class="btn btn-sm btn-outline-secondary" id="nextBtn">下一頁</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
const reports = [
{ id: 1, name: "王小明", room: "A101", type: "火災", description: "微波爐爆炸起火救命", time: "2025-05-15 10:30", resolved: false },
{ id: 2, name: "林美麗", room: "B102", type: "地震", description: "被天花板壓住腳無發逃脫救命", time: "2025-05-14 09:10", resolved: true },
{ id: 3, name: "張大雄", room: "A103", type: "地震", description: "客廳窗戶破掉重傷", time: "2025-05-14 14:45", resolved: false },
{ id: 4, name: "李小龍", room: "B104", type: "水災", description: "廚房水淹進來救命", time: "2025-05-13 08:20", resolved: true },
{ id: 5, name: "周杰倫", room: "A105", type: "公共設施故障", description: "電梯門卡住", time: "2025-05-12 11:00", resolved: false },
{ id: 6, name: "蔡依林", room: "B106", type: "可疑人物", description: "持刀男子進到社區傷人", time: "2025-05-11 17:40", resolved: true }
];
const pageSize = 5;
let currentPage = 1;
function renderTable() {
const tbody = document.getElementById("reportTable");
tbody.innerHTML = "";
const startIndex = (currentPage - 1) * pageSize;
const pageReports = reports.slice(startIndex, startIndex + pageSize);
pageReports.forEach(r => {
const tr = document.createElement("tr");
const statusBadge = r.resolved
? `<span class="text-success">✅ 已讀</span>`
: `<span class="text-danger">🟠 未處理</span>`;
const descText = r.resolved ? r.description : `<strong>${r.description}</strong>`;
tr.innerHTML = `
<td>${r.name}</td>
<td>${r.room}</td>
<td>${r.type}</td>
<td>${descText}</td>
<td>${r.time}</td>
<td>${statusBadge}</td>
<td><a href="message.html?id=${r.id}" class="btn btn-outline-secondary btn-sm">聯絡住戶</a></td>
`;
tbody.appendChild(tr);
});
const totalPages = Math.ceil(reports.length / pageSize);
document.getElementById("currentPage").textContent = currentPage;
document.getElementById("totalPages").textContent = totalPages;
document.getElementById("prevBtn").disabled = currentPage === 1;
document.getElementById("nextBtn").disabled = currentPage === totalPages;
}
document.getElementById("prevBtn").addEventListener("click", () => {
if (currentPage > 1) {
currentPage--;
renderTable();
}
});
document.getElementById("nextBtn").addEventListener("click", () => {
const totalPages = Math.ceil(reports.length / pageSize);
if (currentPage < totalPages) {
currentPage++;
renderTable();
}
});
renderTable();
</script>
</body>
</html>

149
Backstage/notification.html Normal file
View File

@ -0,0 +1,149 @@
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>緊急通報</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
<h2 class="mb-4">警即通報</h2>
<form id="alertForm">
<div class="mb-3">
<label for="alert_type" class="form-label">通報類型</label>
<select id="alert_type" name="alert_type" class="form-select" required>
<option value="">-- 請選擇類型 --</option>
<option value="火災">🔥 火災</option>
<option value="地震">🌏 地震</option>
<option value="水災">💧 水災</option>
<option value="可疑人物">🕵️‍♂️ 可疑人物</option>
<option value="公共設施故障">⚠️ 公共設施故障</option>
<option value="其他">❓ 其他</option>
</select>
</div>
<div class="mb-3">
<label for="description" class="form-label">通報說明</label>
<textarea id="description" name="description" class="form-control" rows="4" placeholder="請簡要描述狀況..." required></textarea>
</div>
<button type="submit" class="btn btn-danger">送出通報</button>
</form>
<!-- 通報紀錄表格 -->
<h3 class="mt-5 mb-3">通報紀錄</h3>
<table class="table table-bordered table-hover">
<thead class="table-light">
<tr>
<th>#</th>
<th>通報類型</th>
<th>說明</th>
<th>時間</th>
</tr>
</thead>
<tbody id="alertTableBody"></tbody>
</table>
<!-- 分頁控制 -->
<div class="d-flex justify-content-between align-items-center">
<div>第 <span id="currentPage">1</span> 頁，共 <span id="totalPages">1</span> 頁</div>
<div>
<button class="btn btn-sm btn-outline-secondary me-1" id="prevPage">上一頁</button>
<button class="btn btn-sm btn-outline-secondary" id="nextPage">下一頁</button>
</div>
</div>
</div>
<script>
const dataList = [];
const rowsPerPage = 5;
let currentPage = 1;
function seedData() {
const types = ["火災", "地震", "暴力事件", "系統異常", "其他"];
const descriptions = [
"地下室起火冒煙，請盡速避難", "感受到劇烈搖晃，請盡速避難", "住戶報警有打鬥聲，請盡速避難", "監控系統異常重啟，請盡速避難",
"不明人士闖入大門，請盡速避難", "火警偵測器誤報，請盡速避難", "有怪味從機房飄出，請盡速避難", "外部施工導致震動，請盡速避難",
"停車場燈光全滅，請盡速避難", "水塔洩漏造成樓梯積水，請盡速避難"
];
for (let i = 0; i < 10; i++) {
const type = types[i % types.length];
const desc = descriptions[i % descriptions.length];
const time = `2025-05-16 0${i % 10}:0${i + 1}`;
dataList.push({ type, desc, time });
}
}
seedData();
const alertForm = document.getElementById("alertForm");
const tbody = document.getElementById("alertTableBody");
alertForm.addEventListener("submit", function(event) {
event.preventDefault();
const type = document.getElementById("alert_type").value;
const desc = document.getElementById("description").value;
if (!type || !desc) return;
const confirmSend = confirm("確認要送出通報嗎？");
if (confirmSend) {
alert("已送出");
const now = new Date();
const timestamp = now.getFullYear() + "-" +
String(now.getMonth() + 1).padStart(2, '0') + "-" +
String(now.getDate()).padStart(2, '0') + " " +
String(now.getHours()).padStart(2, '0') + ":" +
String(now.getMinutes()).padStart(2, '0');
dataList.push({ type, desc, time: timestamp });
alertForm.reset();
renderTable();
}
});
function renderTable() {
tbody.innerHTML = "";
const start = (currentPage - 1) * rowsPerPage;
const end = start + rowsPerPage;
const pageData = dataList.slice(start, end);
pageData.forEach((data, index) => {
const row = tbody.insertRow();
row.innerHTML = `
<td>${start + index + 1}</td>
<td>${data.type}</td>
<td>${data.desc}</td>
<td>${data.time}</td>
`;
});
const totalPages = Math.ceil(dataList.length / rowsPerPage);
document.getElementById("currentPage").textContent = currentPage;
document.getElementById("totalPages").textContent = totalPages;
document.getElementById("prevPage").disabled = currentPage === 1;
document.getElementById("nextPage").disabled = currentPage >= totalPages;
}
document.getElementById("prevPage").addEventListener("click", () => {
if (currentPage > 1) {
currentPage--;
renderTable();
}
});
document.getElementById("nextPage").addEventListener("click", () => {
const totalPages = Math.ceil(dataList.length / rowsPerPage);
if (currentPage < totalPages) {
currentPage++;
renderTable();
}
});
renderTable();
</script>
</body>
</html>

39
Backstage/resident_activation.html
View File

@ -63,13 +63,12 @@
<div class="col-md-3">
<input type="text" id="searchEmail" class="form-control" placeholder="搜尋 Email">
</div>
<div class="col-md-2">
<div class="col-md-3">
<input type="text" id="searchRoom" class="form-control" placeholder="搜尋房號">
</div>
<div class="col-md-3 d-flex gap-2">
<button class="btn btn-outline-primary w-100 rounded-pill" onclick="search()">搜尋</button>
</div>
<div class="col-md-2">
<button class="btn btn-outline-danger w-100 rounded-pill" onclick="deleteSelected()">刪除勾選</button>
</div>
<div class="col-md-2">
<button class="btn btn-outline-secondary w-100 rounded-pill" onclick="scanResident()">掃描住戶</button>
</div>
</div>
@ -82,6 +81,7 @@
<th>姓名</th>
<th>Email</th>
<th>聯絡電話</th>
<th>房號</th>
<th>操作</th>
</tr>
</thead>
@ -114,18 +114,18 @@
const pageSize = 10;
let currentPage = 1;
let residents = [
{ id: 1, name: "王小明", email: "xiaoming@example.com", phone: "0912-345-678" },
{ id: 2, name: "林美麗", email: "meili@example.com", phone: "0987-654-321" },
{ id: 3, name: "張大雄", email: "daxiong@example.com", phone: "0912-333-444" },
{ id: 4, name: "李小龍", email: "dragon@example.com", phone: "0900-111-222" },
{ id: 5, name: "周杰倫", email: "jay@example.com", phone: "0988-888-888" },
{ id: 6, name: "蔡依林", email: "jolin@example.com", phone: "0977-777-777"},
{ id: 7, name: "林志玲", email: "lin@example.com", phone: "0966-666-666" },
{ id: 8, name: "王力宏", email: "leehom@example.com", phone: "0955-555-555" },
{ id: 9, name: "陳小春", email: "chen@example.com", phone: "0911-111-111" },
{ id: 10, name: "五月天", email: "mayday@example.com", phone: "0922-222-222" },
{ id: 11, name: "田馥甄", email: "hebe@example.com", phone: "0933-333-333" },
{ id: 12, name: "鄧紫棋", email: "gem@example.com", phone: "0944-444-444" }
{ id: 1, name: "王小明", email: "xiaoming@example.com", phone: "0912-345-678", room: "A101" },
{ id: 2, name: "林美麗", email: "meili@example.com", phone: "0987-654-321", room: "A102" },
{ id: 3, name: "張大雄", email: "daxiong@example.com", phone: "0912-333-444", room: "B201" },
{ id: 4, name: "李小龍", email: "dragon@example.com", phone: "0900-111-222", room: "B202" },
{ id: 5, name: "周杰倫", email: "jay@example.com", phone: "0988-888-888", room: "C301" },
{ id: 6, name: "蔡依林", email: "jolin@example.com", phone: "0977-777-777", room: "C302" },
{ id: 7, name: "林志玲", email: "lin@example.com", phone: "0966-666-666", room: "D401" },
{ id: 8, name: "王力宏", email: "leehom@example.com", phone: "0955-555-555", room: "D402" },
{ id: 9, name: "陳小春", email: "chen@example.com", phone: "0911-111-111", room: "E501" },
{ id: 10, name: "五月天", email: "mayday@example.com", phone: "0922-222-222", room: "E502" },
{ id: 11, name: "田馥甄", email: "hebe@example.com", phone: "0933-333-333", room: "F601" },
{ id: 12, name: "鄧紫棋", email: "gem@example.com", phone: "0944-444-444", room: "F602" }
];
function renderTable(data) {
@ -143,6 +143,7 @@
<td>${r.name}</td>
<td>${r.email}</td>
<td>${r.phone}</td>
<td>${r.room}</td>
<td><button class="btn btn-outline-success btn-sm rounded-pill" onclick="showQRCode('https://yourdomain.com/activate?id=${r.id}')">開通</button></td>
`;
tbody.appendChild(row);
@ -173,10 +174,12 @@
function search() {
const nameInput = document.getElementById("searchName").value.toLowerCase();
const emailInput = document.getElementById("searchEmail").value.toLowerCase();
const roomInput = document.getElementById("searchRoom").value.toLowerCase();
const filtered = residents.filter(r =>
r.name.toLowerCase().includes(nameInput) &&
r.email.toLowerCase().includes(emailInput)
r.email.toLowerCase().includes(emailInput) &&
r.room.toLowerCase().includes(roomInput)
);
renderTable(filtered);

362
Backstage/resident_list.html
View File

@ -1,241 +1,177 @@
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>居民列表</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
.container.mt-4 {
flex-grow: 1;
padding-bottom: 70px;
}
#qrcodeModal .modal-body {
display: flex;
justify-content: center;
align-items: center;
}
nav.pagination-fixed {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #f8f9fa;
padding: 10px 0;
border-top: 1px solid #dee2e6;
z-index: 1000;
}
nav.pagination-fixed .pagination {
margin-bottom: 0;
}
/* Custom button styles applied to all .btn elements */
/* This will make .btn-sm elements larger than default Bootstrap .btn-sm */
.btn {
font-weight: 500;
font-size: 1rem; /* Overrides .btn-sm font-size if more specific or loaded later */
padding: 0.5rem 0.75rem; /* Overrides .btn-sm padding if more specific or loaded later */
transition: all 0.2s ease-in-out;
}
.btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
</style>
<meta charset="UTF-8">
<title>居民列表</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; }
.container.mt-4 { flex-grow: 1; padding-bottom: 70px; }
nav.pagination-fixed {
position: fixed; left: 0; bottom: 0; width: 100%;
background-color: #f8f9fa; padding: 10px 0; border-top: 1px solid #dee2e6; z-index: 1000;
}
nav.pagination-fixed .pagination { margin-bottom: 0; }
.btn {
font-weight: 500; font-size: 1rem;
padding: 0.5rem 0.75rem; transition: all 0.2s ease-in-out;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
</style>
</head>
<body>
<div class="container mt-4">
<h2 class="mb-4">居民列表</h2>
<div class="row g-2 mb-3">
<div class="col-4 col-md-2 col-lg-1">
<a href="resident_add.html" class="btn btn-outline-success w-100 rounded-pill">新增</a>
</div>
<div class="col-4 col-md-2 col-lg-1">
<a href="resident_import.html" class="btn btn-outline-info w-100 rounded-pill">匯入</a>
</div>
<div class="col-4 col-md-2 col-lg-1">
<button class="btn btn-outline-secondary w-100 rounded-pill" onclick="exportResidents()">匯出</button>
</div>
</div>
<div class="row g-2 mb-3">
<div class="col-sm-6 col-md-3 col-lg-2">
<input type="text" id="searchName" class="form-control" placeholder="搜尋姓名">
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<input type="text" id="searchEmail" class="form-control" placeholder="搜尋 Email">
</div>
<div class="col-6 col-md-2 col-lg-2">
<button class="btn btn-outline-primary w-100 rounded-pill" onclick="search()">搜尋</button>
</div>
<div class="col-6 col-md-2 col-lg-1">
<button class="btn btn-outline-danger w-100 rounded-pill" onclick="deleteSelected()">刪除勾選</button>
</div>
</div>
<table class="table table-striped table-bordered">
<thead class="table-dark">
<tr>
<th><input type="checkbox" id="selectAll" onclick="toggleAll(this)"></th>
<th>編號</th>
<th>姓名</th>
<th>Email</th>
<th>聯絡電話</th>
<th>操作</th>
</tr>
</thead>
<tbody id="residentTable"></tbody>
</table>
<div class="container mt-4">
<h2 class="mb-4">居民列表</h2>
<div class="row g-2 mb-3">
<div class="col-4 col-md-2 col-lg-1">
<a href="resident_add.html" class="btn btn-outline-success w-100 rounded-pill">新增</a>
</div>
<div class="col-4 col-md-2 col-lg-1">
<a href="resident_import.html" class="btn btn-outline-info w-100 rounded-pill">匯入</a>
</div>
<div class="col-4 col-md-2 col-lg-1">
<button class="btn btn-outline-secondary w-100 rounded-pill" onclick="exportResidents()">匯出</button>
</div>
</div>
<nav class="pagination-fixed">
<ul class="pagination justify-content-center" id="pagination"></ul>
</nav
<div class="modal fade" id="qrcodeModal" tabindex="-1" aria-labelledby="qrcodeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">開通 QR Code</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="關閉"></button>
</div>
<div class="modal-body">
<div id="qrcode"></div>
</div>
</div>
</div>
<div class="row g-2 mb-3">
<div class="col-sm-6 col-md-3 col-lg-2">
<input type="text" id="searchName" class="form-control" placeholder="搜尋姓名">
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<input type="text" id="searchEmail" class="form-control" placeholder="搜尋 Email">
</div>
<div class="col-6 col-md-2 col-lg-2">
<button class="btn btn-outline-primary w-100 rounded-pill" onclick="search()">搜尋</button>
</div>
<div class="col-6 col-md-2 col-lg-1">
<button class="btn btn-outline-danger w-100 rounded-pill" onclick="deleteSelected()">刪除勾選</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.min.js"></script>
<script>
const pageSize = 10;
let currentPage = 1;
let residents = [
{ id: 1, name: "王小明", email: "xiaoming@example.com", phone: "0912-345-678" },
{ id: 2, name: "林美麗", email: "meili@example.com", phone: "0987-654-321" },
{ id: 3, name: "張大雄", email: "daxiong@example.com", phone: "0912-333-444" },
{ id: 4, name: "李小龍", email: "dragon@example.com", phone: "0900-111-222" },
{ id: 5, name: "周杰倫", email: "jay@example.com", phone: "0988-888-888" },
{ id: 6, name: "蔡依林", email: "jolin@example.com", phone: "0977-777-777"},
{ id: 7, name: "林志玲", email: "lin@example.com", phone: "0966-666-666" },
{ id: 8, name: "王力宏", email: "leehom@example.com", phone: "0955-555-555" },
{ id: 9, name: "陳小春", email: "chen@example.com", phone: "0911-111-111" },
{ id: 10, name: "五月天", email: "mayday@example.com", phone: "0922-222-222" },
{ id: 11, name: "田馥甄", email: "hebe@example.com", phone: "0933-333-333" },
{ id: 12, name: "鄧紫棋", email: "gem@example.com", phone: "0944-444-444" }
];
<table class="table table-striped table-bordered">
<thead class="table-dark">
<tr>
<th><input type="checkbox" id="selectAll" onclick="toggleAll(this)"></th>
<th>編號</th>
<th>姓名</th>
<th>Email</th>
<th>聯絡電話</th>
<th>房號</th>
<th>操作</th>
</tr>
</thead>
<tbody id="residentTable"></tbody>
</table>
</div>
function renderTable(data) {
const tbody = document.getElementById("residentTable");
tbody.innerHTML = "";
<nav class="pagination-fixed">
<ul class="pagination justify-content-center" id="pagination"></ul>
</nav>
const start = (currentPage - 1) * pageSize;
const pageData = data.slice(start, start + pageSize);
<script>
const pageSize = 10;
let currentPage = 1;
pageData.forEach(r => {
const row = document.createElement("tr");
row.innerHTML = `
<td><input type="checkbox" class="row-checkbox" data-id="${r.id}"></td>
<td>${r.id}</td>
<td>${r.name}</td>
<td>${r.email}</td>
<td>${r.phone}</td>
<td>
<a href="resident_edit.html?id=${r.id}" class="btn btn-warning btn-sm me-1 rounded-pill">編輯</a>
<button class="btn btn-outline-danger btn-sm rounded-pill" onclick="deleteResident(${r.id})">刪除</button>
</td>
`;
tbody.appendChild(row);
});
let residents = [
{ id: 1, name: "王小明", email: "xiaoming@example.com", phone: "0912-345-678", room: "A101" },
{ id: 2, name: "林美麗", email: "meili@example.com", phone: "0987-654-321", room: "B102" },
{ id: 3, name: "張大雄", email: "daxiong@example.com", phone: "0912-333-444", room: "A103" },
{ id: 4, name: "李小龍", email: "dragon@example.com", phone: "0900-111-222", room: "B104" },
{ id: 5, name: "周杰倫", email: "jay@example.com", phone: "0988-888-888", room: "A105" },
{ id: 6, name: "蔡依林", email: "jolin@example.com", phone: "0977-777-777", room: "B106" },
{ id: 7, name: "林志玲", email: "lin@example.com", phone: "0966-666-666", room: "A107" },
{ id: 8, name: "王力宏", email: "leehom@example.com", phone: "0955-555-555", room: "A108" },
{ id: 9, name: "陳小春", email: "chen@example.com", phone: "0911-111-111", room: "B109" },
{ id: 10, name: "五月天", email: "mayday@example.com", phone: "0922-222-222", room: "A110" },
{ id: 11, name: "田馥甄", email: "hebe@example.com", phone: "0933-333-333", room: "B201" },
{ id: 12, name: "鄧紫棋", email: "gem@example.com", phone: "0944-444-444", room: "A202" }
];
renderPagination(data.length);
}
function renderTable(data) {
const tbody = document.getElementById("residentTable");
tbody.innerHTML = "";
const start = (currentPage - 1) * pageSize;
const pageData = data.slice(start, start + pageSize);
function renderPagination(totalItems) {
const totalPages = Math.ceil(totalItems / pageSize);
const pagination = document.getElementById("pagination");
pagination.innerHTML = "";
pageData.forEach(r => {
const row = document.createElement("tr");
row.innerHTML = `
<td><input type="checkbox" class="row-checkbox" data-id="${r.id}"></td>
<td>${r.id}</td>
<td>${r.name}</td>
<td>${r.email}</td>
<td>${r.phone}</td>
<td>${r.room || '-'}</td>
<td>
<a href="resident_edit.html?id=${r.id}" class="btn btn-warning btn-sm me-1 rounded-pill">編輯</a>
<button class="btn btn-outline-danger btn-sm rounded-pill" onclick="deleteResident(${r.id})">刪除</button>
</td>
`;
tbody.appendChild(row);
});
for (let i = 1; i <= totalPages; i++) {
const li = document.createElement("li");
li.className = "page-item" + (i === currentPage ? " active" : "");
li.innerHTML = `<a class="page-link" href="#" onclick="goToPage(${i})">${i}</a>`;
pagination.appendChild(li);
}
}
renderPagination(data.length);
}
function goToPage(page) {
currentPage = page;
search();
window.scrollTo(0, 0);
}
function renderPagination(totalItems) {
const totalPages = Math.ceil(totalItems / pageSize);
const pagination = document.getElementById("pagination");
pagination.innerHTML = "";
function search() {
const nameInput = document.getElementById("searchName").value.toLowerCase();
const emailInput = document.getElementById("searchEmail").value.toLowerCase();
for (let i = 1; i <= totalPages; i++) {
const li = document.createElement("li");
li.className = "page-item" + (i === currentPage ? " active" : "");
li.innerHTML = `<a class="page-link" href="#" onclick="goToPage(${i})">${i}</a>`;
pagination.appendChild(li);
}
}
const filtered = residents.filter(r =>
r.name.toLowerCase().includes(nameInput) &&
r.email.toLowerCase().includes(emailInput)
);
function goToPage(page) {
currentPage = page;
search();
window.scrollTo(0, 0);
}
renderTable(filtered);
}
function search() {
const nameInput = document.getElementById("searchName").value.toLowerCase();
const emailInput = document.getElementById("searchEmail").value.toLowerCase();
function toggleAll(source) {
const checkboxes = document.querySelectorAll(".row-checkbox");
checkboxes.forEach(cb => cb.checked = source.checked);
}
const filtered = residents.filter(r =>
r.name.toLowerCase().includes(nameInput) &&
r.email.toLowerCase().includes(emailInput)
);
function deleteSelected() {
if (!confirm("確定要刪除勾選的資料嗎？")) return;
renderTable(filtered);
}
const selected = document.querySelectorAll(".row-checkbox:checked");
const idsToDelete = Array.from(selected).map(cb => parseInt(cb.dataset.id));
function toggleAll(source) {
const checkboxes = document.querySelectorAll(".row-checkbox");
checkboxes.forEach(cb => cb.checked = source.checked);
}
residents = residents.filter(r => !idsToDelete.includes(r.id));
currentPage = 1;
search();
document.getElementById("selectAll").checked = false;
}
function deleteSelected() {
if (!confirm("確定要刪除勾選的資料嗎？")) return;
const selected = document.querySelectorAll(".row-checkbox:checked");
const idsToDelete = Array.from(selected).map(cb => parseInt(cb.dataset.id));
residents = residents.filter(r => !idsToDelete.includes(r.id));
currentPage = 1;
search();
document.getElementById("selectAll").checked = false;
}
function deleteResident(id) {
if (!confirm("確定要刪除此筆資料嗎？")) return;
residents = residents.filter(r => r.id !== id);
search();
}
function deleteResident(id) {
if (!confirm("確定要刪除此筆資料嗎？")) return;
residents = residents.filter(r => r.id !== id);
search();
}
function showQRCode(url) {
const qrContainer = document.getElementById("qrcode");
qrContainer.innerHTML = "";
new QRCode(qrContainer, {
text: url,
width: 200,
height: 200
});
function exportResidents() {
alert("直接匯出搜尋查出的結果，如果沒有搜尋就全部匯出");
}
const modal = new bootstrap.Modal(document.getElementById("qrcodeModal"));
modal.show();
}
function exportResidents() {
alert("直接匯出搜尋查出的結果，如果沒有搜尋就全部匯出");
}
// 初始化
search();
</script>
search(); // 初始化載入
</script>
</body>
</html>

169
Backstage/sidebar.html
View File

@ -2,7 +2,7 @@
<html lang="zh-Hant">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>功能列</title>
<style>
html, body {
@ -59,8 +59,34 @@
.has-submenu > .submenu-toggle {
display: flex;
justify-content: space-between;
align-items: center;
gap: 6px;
user-select: none;
}
.has-submenu > .submenu-toggle > span:first-child {
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.parent-badge {
min-width: 20px;
padding: 2px 6px;
font-size: 12px;
font-weight: bold;
color: white;
background-color: red;
border-radius: 10px;
text-align: center;
vertical-align: middle;
display: none;
}
.submenu-arrow {
font-size: 12px;
user-select: none;
}
.has-submenu ul {
@ -74,7 +100,7 @@
.has-submenu.open ul {
padding-top: 5px;
max-height: 200px; /* 您可以根據需要調整子選單展開的最大高度 */
max-height: 200px;
}
.has-submenu ul li {
@ -87,10 +113,6 @@
background-color: #deeaf6;
}
.submenu-arrow {
font-size: 12px;
}
.badge {
display: inline-block;
min-width: 20px;
@ -103,6 +125,10 @@
border-radius: 10px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 0;
}
.sidebar ul li .li-content {
@ -111,19 +137,13 @@
align-items: center;
}
/* ---- 這部分是為了讓 "未開通居民" 完整顯示而調整的樣式 ---- */
/* ---- 讓 "未開通居民" 等文字完整顯示 ---- */
.sidebar ul li .li-content > span:first-child {
flex-grow: 1; /* 允許文字部分伸展以佔用可用空間 */
min-width: 0; /* 在flex佈局中，這有助於正確處理溢出和 ellipsis */
/* white-space, overflow, text-overflow 將從下面的通用規則繼承 */
flex-grow: 1;
min-width: 0;
}
.sidebar ul li .li-content .badge {
flex-shrink: 0; /* 防止徽章被壓縮 */
}
/* ---- 調整結束 ---- */
.sidebar ul li .li-content span { /* 此規則同時應用於文字 span 和徽章 span */
.sidebar ul li .li-content span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@ -139,21 +159,46 @@
<li class="has-submenu">
<div class="submenu-toggle" onclick="toggleSubmenu(this)">
<span>住戶居民</span>
<span class="parent-badge"></span>
<span class="submenu-arrow">▼</span>
</div>
<ul>
<li onclick="requestNavigation('resident_activation.html', this)">
<div class="li-content">
<span>未開通居民</span>
<span class="badge">8</span>
<span class="badge" data-count="8">8</span>
</div>
</li>
<li onclick="requestNavigation('resident_list.html', this)">居民列表</li></ul>
<li onclick="requestNavigation('resident_list.html', this)">居民列表</li>
</ul>
</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 class="has-submenu">
<div class="submenu-toggle" onclick="toggleSubmenu(this)">
<span>警急通報</span>
<span class="parent-badge"></span>
<span class="submenu-arrow">▼</span>
</div>
<ul>
<li onclick="requestNavigation('notification.html', this)">發送通報</li>
<li onclick="requestNavigation('notice_list.html', this)">
<div class="li-content">
<span>居民通報</span>
<span class="badge" data-count="99">99</span>
</div>
</li>
</ul>
</li>
<li onclick="requestNavigation('message_list.html', this)">
<div class="li-content">
<span>訊息通知</span>
<span class="badge" data-count="99">99</span>
</div>
</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>
@ -171,37 +216,20 @@
allItems.forEach(item => item.classList.remove('active'));
// 為當前點擊的項目添加 active class
// 如果點擊的是子選單項，也將其父選單項目標記為 (視覺上) active (如果需要)
clickedElement.classList.add('active');
// 如果點擊的是子選單中的項目，並且希望父選單也保持某種 'active' 或 'open' 的視覺提示
// 目前的邏輯是點擊主選單項時移除其他 active，子選單項點擊時，父選單的 active 狀態會被移除
// 如果希望父選單在子選單 active 時也高亮，需要調整 class 邏輯
// 例如，只移除頂層 li 的 active，然後再設定。
// 但目前的 active class 主要是用於頂層 li，子選單項本身高亮。
// 如果父選單本身不是導航目標，只是個切換器，那它不應該有 active 狀態，除非子項被選中時特別標記
if (!clickedElement.closest('.has-submenu > .submenu-toggle')) { // 確保不是點擊 submenu-toggle 本身
const parentLi = clickedElement.closest('.sidebar > ul > li'); // 直接父 li
if (parentLi && parentLi !== clickedElement) { // 如果點擊的是子選單項
// 可以考慮不移除父 li 的 active，或者給父 li 一個不同的 "parent-active" class
// 目前邏輯：如果點擊的是子項，父項（如"住戶居民"的li）的 active 會被移除，然後子項獲得 active
// 為了清晰，讓頂層選單項（非子選單展開器）和子選單項競爭 active
const topLevelListItems = document.querySelectorAll('.sidebar > ul > li');
topLevelListItems.forEach(item => {
if(item !== parentLi || !parentLi.classList.contains('has-submenu')){ // 非 submenu 的父級 li
item.classList.remove('active');
}
});
if (parentLi && !parentLi.classList.contains('has-submenu')){
parentLi.classList.add('active');
} else if (!clickedElement.closest('.has-submenu ul')) { // 如果點擊的是頂層且非 submenu-toggle
clickedElement.classList.add('active');
}
} else if (clickedElement.closest('.sidebar > ul > li')) { // 點擊的是頂層 li
const topLevelListItems = document.querySelectorAll('.sidebar > ul > li');
topLevelListItems.forEach(item => item.classList.remove('active'));
clickedElement.classList.add('active');
}
// 處理父層active標示(僅當點擊子選單時)
if (clickedElement.closest('.has-submenu ul')) {
const parentLi = clickedElement.closest('.has-submenu');
if (parentLi) {
// 移除所有頂層 active，改由父層設定 active
document.querySelectorAll('.sidebar > ul > li').forEach(li => li.classList.remove('active'));
parentLi.classList.add('active');
}
} else {
// 點擊頂層 li
document.querySelectorAll('.sidebar > ul > li').forEach(li => li.classList.remove('active'));
clickedElement.classList.add('active');
}
}
@ -214,18 +242,41 @@
arrow.textContent = parentLi.classList.contains('open') ? '▲' : '▼';
}
// 當展開/收起子選單時，不要改變父選單項的 active 狀態
// 也不要觸發 requestNavigation
// event.stopPropagation(); // 如果 toggleSubmenu 是由事件直接調用且需要阻止冒泡
updateParentBadges();
}
// 初始化：確保第一個 'active' 的項目在加載時是正確的
// 或者，您可以根據載入的頁面來動態設定 active class
document.addEventListener('DOMContentLoaded', () => {
// 假設 'dashboard.html' 是首頁，它已經有 active class
// 如果需要更複雜的邏輯來根據當前 URL 設定 active class，可以在這裡添加
});
function updateParentBadges() {
const submenuParents = document.querySelectorAll('.has-submenu');
submenuParents.forEach(parent => {
const isOpen = parent.classList.contains('open');
const badgeContainer = parent.querySelector('.parent-badge');
const subBadges = parent.querySelectorAll('ul .badge');
let total = 0;
subBadges.forEach(badge => {
const raw = badge.getAttribute('data-count');
const val = parseInt(raw, 10);
if (!isNaN(val)) {
total += val;
}
});
if (!isOpen && total > 0) {
badgeContainer.textContent = total;
badgeContainer.style.display = 'inline-block';
} else {
badgeContainer.style.display = 'none';
badgeContainer.textContent = '';
}
});
}
// 初始化
document.addEventListener('DOMContentLoaded', () => {
updateParentBadges();
});
</script>
</body>
</html>

31
emergency-alert.html
View File

@ -49,13 +49,6 @@
.alert-btn:hover {
background-color: #c82333;
}
.status-message {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}
.sent { color: green; }
.fail { color: red; }
</style>
</head>
<body>
@ -68,12 +61,11 @@
</header>
<div class="alert-container">
<!-- 更換圖示來源（穩定連結） -->
<img src="https://cdn-icons-png.flaticon.com/512/564/564619.png" alt="警報圖示" class="illustration">
<p class="mb-3">若遇緊急情況，請選擇災害類型後立即通報。</p>
<div class="mb-4 text-start">
<div class="mb-3 text-start">
<label for="disasterType" class="form-label fw-bold">災害類型</label>
<select id="disasterType" class="form-select">
<option value="">請選擇...</option>
@ -86,25 +78,30 @@
</select>
</div>
<button class="btn btn-danger btn-lg w-100 alert-btn" onclick="sendAlert()">🚨 立即通報</button>
<div class="mb-4 text-start">
<label for="description" class="form-label fw-bold">簡易說明</label>
<textarea id="description" class="form-control" rows="3" placeholder="請輸入簡要說明，例如地點或狀況..."></textarea>
</div>
<div id="statusMessage" class="status-message"></div>
<button class="btn btn-danger btn-lg w-100 alert-btn" onclick="sendAlert()">🚨 立即通報</button>
</div>
<script>
function sendAlert() {
const status = document.getElementById('statusMessage');
const type = document.getElementById('disasterType').value;
const desc = document.getElementById('description').value.trim();
if (!type) {
status.innerHTML = '<span class="fail">⚠️ 請先選擇災害類型。</span>';
alert("⚠️ 請先選擇災害類型！");
return;
}
// 模擬送出
setTimeout(() => {
status.innerHTML = `<span class="sent">✅ 已通報「${type}」，請等待支援！</span>`;
}, 800);
if (!desc) {
alert("⚠️ 請輸入簡易說明！");
return;
}
alert(`✅ 已通報「${type}」\n說明：「${desc}」`);
}
</script>