214 lines
6.5 KiB
HTML
214 lines
6.5 KiB
HTML
<!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%;
|
|
position: relative;
|
|
}
|
|
.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;
|
|
}
|
|
.msg-time {
|
|
display: block;
|
|
font-size: 0.75rem;
|
|
color: #888;
|
|
margin-top: 0.25rem;
|
|
}
|
|
.date-divider {
|
|
text-align: center;
|
|
font-size: 0.85rem;
|
|
color: #555;
|
|
margin: 1rem 0;
|
|
font-weight: bold;
|
|
}
|
|
</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="date-divider" id="todayDateDivider"></div>
|
|
|
|
<div class="message-left">
|
|
<div class="message resident-msg">
|
|
你好，今天有包裹嗎？
|
|
<span class="msg-time">09:00</span>
|
|
</div>
|
|
</div>
|
|
<div class="message-right">
|
|
<div class="message admin-msg">
|
|
您好，有一個郵件已放置櫃台。
|
|
<span class="msg-time">09:02</span>
|
|
</div>
|
|
</div>
|
|
<div class="message-left">
|
|
<div class="message resident-msg">
|
|
好的，謝謝您。
|
|
<span class="msg-time">09:03</span>
|
|
</div>
|
|
</div>
|
|
<div class="message-right">
|
|
<div class="message admin-msg">
|
|
不客氣，祝您愉快！
|
|
<span class="msg-time">09:04</span>
|
|
</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>
|
|
// 設定今天日期標籤
|
|
const today = new Date();
|
|
const todayStr = today.toLocaleDateString("zh-Hant", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
weekday: "long"
|
|
});
|
|
document.getElementById("todayDateDivider").textContent = "今天 - " + todayStr;
|
|
|
|
// 點選快速訊息填入輸入框
|
|
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();
|
|
const fileName = fileInput.files.length > 0 ? fileInput.files[0].name : "";
|
|
if (!msg && !fileName) {
|
|
alert("請輸入訊息或上傳圖片！");
|
|
return;
|
|
}
|
|
|
|
const chatBox = document.getElementById("chatBox");
|
|
|
|
// 建立訊息元素
|
|
const msgContainer = document.createElement("div");
|
|
msgContainer.className = "message-right";
|
|
|
|
const msgBubble = document.createElement("div");
|
|
msgBubble.className = "message admin-msg";
|
|
msgBubble.innerHTML = `${msg ? msg : ""}${fileName ? "<br><em>📎 " + fileName + "</em>" : ""}`;
|
|
|
|
const timeSpan = document.createElement("span");
|
|
timeSpan.className = "msg-time";
|
|
const now = new Date();
|
|
const hour = now.getHours().toString().padStart(2, "0");
|
|
const minute = now.getMinutes().toString().padStart(2, "0");
|
|
timeSpan.textContent = `${hour}:${minute}`;
|
|
|
|
msgBubble.appendChild(timeSpan);
|
|
msgContainer.appendChild(msgBubble);
|
|
chatBox.appendChild(msgContainer);
|
|
|
|
// 清空輸入
|
|
document.getElementById("messageInput").value = "";
|
|
fileInput.value = "";
|
|
fileNameDisplay.textContent = "";
|
|
|
|
// 自動捲到最底
|
|
chatBox.scrollTop = chatBox.scrollHeight;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |