189 lines
5.1 KiB
HTML
189 lines
5.1 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%;
|
||
|
|
|
||
|
|
}
|
||
|
|
.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>
|