第一版2025_04_25
This commit is contained in:
parent
16239515e9
commit
c81af9e7fe
114
activities.html
Normal file
114
activities.html
Normal file
@ -0,0 +1,114 @@
|
||||
<!-- 活動列表頁 (list.html) -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-Hant">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<title>社區活動列表</title>
|
||||
<style>
|
||||
body { background-color: #f7f8fa; color: #333; padding-bottom: 80px; font-family: 'Noto Sans TC', sans-serif; }
|
||||
header { background-color: #9eaf9f; color: #fff; padding: 16px; font-size: 20px; font-weight: bold; text-align: center; position: relative; }
|
||||
.back-button { position: absolute; top: 12px; left: 16px; cursor: pointer; }
|
||||
.back-button img { width: 24px; height: 24px; filter: brightness(0) invert(1); }
|
||||
.activity-card { background-color: #fff; margin: 12px 16px; padding: 16px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
|
||||
.footer-nav { position: fixed; bottom: 0; left: 0; right: 0; background-color: #fff; border-top: 1px solid #ddd; display: flex; justify-content: space-around; padding: 8px 0; }
|
||||
.footer-nav a { text-decoration: none; font-size: 12px; color: #666; text-align: center; }
|
||||
.footer-nav img { width: 24px; height: 24px; margin-bottom: 4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="back-button"><img src="https://img.icons8.com/ios-filled/50/ffffff/left.png" onclick="history.back()" /></div>
|
||||
社區活動列表
|
||||
</header>
|
||||
|
||||
<!-- 新增的提交活動申請按鈕 -->
|
||||
<div class="text-end px-4 pt-3">
|
||||
<a href="activity-submit.html" class="btn btn-primary">➕ 提交活動申請</a>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<div class="activity-card">
|
||||
<div class="activity-title">🎉 社區春季市集</div>
|
||||
<div class="activity-time">時間：2025/04/27（日）10:00 - 16:00</div>
|
||||
<div class="activity-location">地點：中庭花園</div>
|
||||
<div class="d-flex justify-content-end mt-2">
|
||||
<a href="activity-detail.html?id=1" class="btn btn-outline-secondary btn-sm me-2">查看詳情</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="activity-card">
|
||||
<div class="activity-title">🎉 早晨瑜珈課程</div>
|
||||
<div class="activity-time">每週六 07:00 - 08:00</div>
|
||||
<div class="activity-location">地點：社區多功能教室</div>
|
||||
<div class="d-flex justify-content-end mt-2">
|
||||
<a href="activity-detail.html?id=2" class="btn btn-outline-secondary btn-sm me-2">查看詳情</a>
|
||||
<button class="btn btn-success btn-sm" onclick="openModal(2)">我要報名</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="activity-card">
|
||||
<div class="activity-title">🎉 二手書交換日</div>
|
||||
<div class="activity-time">2025/05/05（六）13:00 - 17:00</div>
|
||||
<div class="activity-location">地點：社區圖書區</div>
|
||||
<div class="d-flex justify-content-end mt-2">
|
||||
<a href="activity-detail.html?id=3" class="btn btn-outline-secondary btn-sm me-2">查看詳情</a>
|
||||
<button class="btn btn-success btn-sm" onclick="openModal(33)">我要報名</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 報名浮框 Modal -->
|
||||
<div class="modal fade" id="registerModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<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">
|
||||
<label for="peopleCount" class="form-label">選擇報名人數：</label>
|
||||
<select class="form-select" id="peopleCount">
|
||||
<option value="1">1 人</option>
|
||||
<option value="2">2 人</option>
|
||||
<option value="3">3 人</option>
|
||||
<option value="4">4 人</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||||
<button class="btn btn-primary" onclick="confirmRegister()">確認報名</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="navbar fixed-bottom navbar-light bg-light border-top">
|
||||
<div class="container justify-content-around">
|
||||
<a class="nav-link text-center" href="main.html"><div>🏠<br>首頁</div></a>
|
||||
<a class="nav-link text-center" href="#"><div>🚪<br>出入</div></a>
|
||||
<a class="nav-link text-center" href="message.html"><div>💬<br>訊息</div></a>
|
||||
<a class="nav-link text-center" href="#"><div>👤<br>住戶</div></a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
let currentActivityId = null;
|
||||
function openModal(id) {
|
||||
currentActivityId = id;
|
||||
const modal = new bootstrap.Modal(document.getElementById('registerModal'));
|
||||
modal.show();
|
||||
}
|
||||
|
||||
function confirmRegister() {
|
||||
const count = document.getElementById('peopleCount').value;
|
||||
alert(`已報名活動 ID ${currentActivityId}，人數：${count}`);
|
||||
bootstrap.Modal.getInstance(document.getElementById('registerModal')).hide();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
92
activity-detail.html
Normal file
92
activity-detail.html
Normal file
@ -0,0 +1,92 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-Hant">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>活動詳情</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body { background-color: #f7f8fa; font-family: 'Noto Sans TC', sans-serif; padding-bottom: 80px; }
|
||||
header { background-color: #9eaf9f; color: #fff; padding: 16px; font-size: 20px; font-weight: bold; text-align: center; position: relative; }
|
||||
.back-button { position: absolute; top: 12px; left: 16px; cursor: pointer; }
|
||||
.back-button img { width: 24px; height: 24px; filter: brightness(0) invert(1); }
|
||||
.detail-container { background-color: #fff; margin: 20px; padding: 20px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
|
||||
.detail-title { font-size: 20px; font-weight: bold; margin-bottom: 12px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="back-button"><img src="https://img.icons8.com/ios-filled/50/ffffff/left.png" onclick="history.back()" /></div>
|
||||
活動詳情
|
||||
</header>
|
||||
|
||||
<div class="detail-container" id="activityDetail"></div>
|
||||
|
||||
<!-- 報名浮框 Modal -->
|
||||
<div class="modal fade" id="registerModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<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">
|
||||
<label for="peopleCount" class="form-label">選擇報名人數：</label>
|
||||
<select class="form-select" id="peopleCount">
|
||||
<option value="1">1 人</option>
|
||||
<option value="2">2 人</option>
|
||||
<option value="3">3 人</option>
|
||||
<option value="4">4 人</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||||
<button class="btn btn-primary" onclick="confirmRegister()">確認報名</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
const activities = {
|
||||
1: { title: "🎉 社區春季市集", time: "2025/04/27（日）10:00 - 16:00", location: "中庭花園", desc: "市集將有手作小物、美食攤販及親子遊戲活動，歡迎全體住戶參與！", image: "https://picsum.photos/id/1011/600/300" },
|
||||
2: { title: "🧘♀️ 早晨瑜珈課程", time: "每週六 07:00 - 08:00", location: "社區多功能教室", desc: "由專業老師帶領，適合各年齡層，請自備瑜珈墊。", image: "https://picsum.photos/id/1015/600/300" },
|
||||
3: { title: "📚 二手書交換日", time: "2025/05/05（六）13:00 - 17:00", location: "社區圖書區", desc: "帶來你的二手書，一起交流閱讀樂趣！", image: "https://picsum.photos/id/1033/600/300" }
|
||||
};
|
||||
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const id = params.get("id");
|
||||
const activity = activities[id];
|
||||
const container = document.getElementById("activityDetail");
|
||||
|
||||
if (activity) {
|
||||
container.innerHTML = `
|
||||
<img src="${activity.image}" class="img-fluid rounded mb-3">
|
||||
<div class="detail-title">${activity.title}</div>
|
||||
<div class="text-muted mb-2">時間：${activity.time}</div>
|
||||
<div class="text-muted mb-3">地點：${activity.location}</div>
|
||||
<div class="mb-4">${activity.desc}</div>
|
||||
${
|
||||
id !== "1"
|
||||
? `<div class="text-center">
|
||||
<button class="btn btn-primary btn-lg" onclick="openModal(${id})">我要報名</button>
|
||||
</div>`
|
||||
: ""
|
||||
}
|
||||
`;
|
||||
} else {
|
||||
container.innerHTML = "<p class='text-center text-muted'>找不到該活動。</p>";
|
||||
}
|
||||
|
||||
function openModal(id) {
|
||||
const modal = new bootstrap.Modal(document.getElementById('registerModal'));
|
||||
modal.show();
|
||||
}
|
||||
|
||||
function confirmRegister() {
|
||||
const count = document.getElementById('peopleCount').value;
|
||||
alert(`已報名活動 ID ${id}，人數：${count}`);
|
||||
bootstrap.Modal.getInstance(document.getElementById('registerModal')).hide();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
82
activity-submit.html
Normal file
82
activity-submit.html
Normal file
@ -0,0 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-Hant">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<title>提交活動申請</title>
|
||||
<style>
|
||||
body { background-color: #f7f8fa; font-family: 'Noto Sans TC', sans-serif; }
|
||||
header { background-color: #9eaf9f; color: #fff; padding: 16px; font-size: 20px; font-weight: bold; text-align: center; position: relative; }
|
||||
.back-button { position: absolute; top: 12px; left: 16px; cursor: pointer; }
|
||||
.back-button img { width: 24px; height: 24px; filter: brightness(0) invert(1); }
|
||||
.form-container { padding: 24px 16px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="back-button"><img src="https://img.icons8.com/ios-filled/50/ffffff/left.png" onclick="history.back()" /></div>
|
||||
提交活動申請
|
||||
</header>
|
||||
|
||||
<div class="form-container">
|
||||
<form onsubmit="submitActivity(event)" enctype="multipart/form-data">
|
||||
<div class="mb-3">
|
||||
<label for="title" class="form-label">活動名稱</label>
|
||||
<input type="text" class="form-control" id="title" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="date" class="form-label">日期與時間</label>
|
||||
<input type="datetime-local" class="form-control" id="date" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="location" class="form-label">地點</label>
|
||||
<input type="text" class="form-control" id="location" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="description" class="form-label">活動描述</label>
|
||||
<textarea class="form-control" id="description" rows="4" required></textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="poster" class="form-label">上傳活動海報</label>
|
||||
<input type="file" class="form-control" id="poster" accept="image/*">
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="needRegister" class="form-label">是否需統計報名人數？</label>
|
||||
<select id="needRegister" class="form-select">
|
||||
<option value="否" selected>否</option>
|
||||
<option value="是">是</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="d-grid gap-2">
|
||||
<button type="submit" class="btn btn-success">送出申請</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function submitActivity(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const title = document.getElementById('title').value;
|
||||
const date = document.getElementById('date').value;
|
||||
const location = document.getElementById('location').value;
|
||||
const description = document.getElementById('description').value;
|
||||
const poster = document.getElementById('poster').files[0];
|
||||
const needRegister = document.getElementById('needRegister').value;
|
||||
|
||||
let message = `活動申請已送出\n名稱：${title}\n時間：${date}\n地點：${location}\n描述：${description}\n需報名統計：${needRegister}`;
|
||||
if (poster) {
|
||||
message += `\n檔案名稱：${poster.name}`;
|
||||
}
|
||||
|
||||
alert(message);
|
||||
// 實際上傳邏輯可加入這裡（例如：透過 fetch 上傳 FormData）
|
||||
|
||||
history.back();
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
166
bill.html
Normal file
166
bill.html
Normal file
@ -0,0 +1,166 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-Hant">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<title>繳費通知 - 社區管理 App</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: 'Noto Sans TC', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f7f8fa;
|
||||
color: #333;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #9eaf9f;
|
||||
color: #fff;
|
||||
padding: 16px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.back-button img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.section {
|
||||
background-color: #fff;
|
||||
margin: 12px 16px;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.bill-item {
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.bill-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.bill-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.bill-info span {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.bill-detail {
|
||||
font-size: 13px;
|
||||
color: #777;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.reminder {
|
||||
font-size: 13px;
|
||||
color: #c0392b;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ddd;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.footer-nav a {
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-nav img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="back-button">
|
||||
<img src="https://img.icons8.com/ios-filled/50/ffffff/left.png" alt="返回" title="回上一頁" onclick="history.back()" />
|
||||
</div>
|
||||
繳費通知
|
||||
</header>
|
||||
|
||||
<!-- 繳費通知清單 -->
|
||||
<section class="section">
|
||||
<h3 style="font-size: 16px; margin-bottom: 12px;">💰 繳費項目</h3>
|
||||
|
||||
<!-- 第二次催繳 -->
|
||||
<div class="bill-item">
|
||||
<div class="bill-info">
|
||||
<span>2025/04/22</span>
|
||||
<span>管理費 - $1,200</span>
|
||||
</div>
|
||||
<div class="bill-detail">繳費截止日：2025/04/30</div>
|
||||
<div class="reminder">第 2 次催繳</div>
|
||||
</div>
|
||||
|
||||
<!-- 第一次通知（不顯示催繳） -->
|
||||
<div class="bill-item">
|
||||
<div class="bill-info">
|
||||
<span>2025/04/20</span>
|
||||
<span>水費 - $340</span>
|
||||
</div>
|
||||
<div class="bill-detail">繳費截止日：2025/04/28</div>
|
||||
</div>
|
||||
|
||||
<!-- 第三次催繳 -->
|
||||
<div class="bill-item">
|
||||
<div class="bill-info">
|
||||
<span>2025/04/18</span>
|
||||
<span>停車費 - $2,000</span>
|
||||
</div>
|
||||
<div class="bill-detail">繳費截止日：2025/04/25</div>
|
||||
<div class="reminder">第 3 次催繳</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- 底部選單 -->
|
||||
<nav class="navbar fixed-bottom navbar-light bg-light border-top">
|
||||
<div class="container justify-content-around">
|
||||
<a class="nav-link text-center" href="main.html"><div>🏠<br>首頁</div></a>
|
||||
<a class="nav-link text-center" href="#"><div>🚪<br>出入</div></a>
|
||||
<a class="nav-link text-center" href="message.html"><div>💬<br>訊息</div></a>
|
||||
<a class="nav-link text-center" href="#"><div>👤<br>住戶</div></a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
182
edit-profile.html
Normal file
182
edit-profile.html
Normal file
@ -0,0 +1,182 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-Hant">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<title>個人資料修改</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: 'Noto Sans TC', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f7f8fa;
|
||||
color: #333;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #9eaf9f;
|
||||
color: #fff;
|
||||
padding: 16px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section {
|
||||
background-color: #fff;
|
||||
margin: 16px;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.btn-save {
|
||||
background-color: #4caf50;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 24px;
|
||||
border-radius: 24px;
|
||||
font-size: 16px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.btn-save:hover {
|
||||
background-color: #388e3c;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background-color: #ccc;
|
||||
color: #333;
|
||||
border: none;
|
||||
padding: 10px 24px;
|
||||
border-radius: 24px;
|
||||
font-size: 16px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.btn-cancel:hover {
|
||||
background-color: #aaa;
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ddd;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.footer-nav a {
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-nav img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.back-button img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
filter: brightness(0) invert(1); /* 白色 icon */
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="back-button">
|
||||
<img src="https://img.icons8.com/ios-filled/50/ffffff/left.png" alt="返回" title="回上一頁" onclick="history.back()" />
|
||||
</div>
|
||||
編輯個人資料
|
||||
</header>
|
||||
|
||||
<section class="section">
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="fullName" class="form-label">姓名</label>
|
||||
<input type="text" class="form-control" id="fullName" value="林小安">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="gender" class="form-label">性別</label>
|
||||
<select class="form-select" id="gender">
|
||||
<option selected>男</option>
|
||||
<option>女</option>
|
||||
<option>其他</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="birthday" class="form-label">生日</label>
|
||||
<input type="date" class="form-control" id="birthday" value="1995-05-01">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="phone" class="form-label">手機號碼</label>
|
||||
<input type="tel" class="form-control" id="phone" value="0912-345-678">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label">電子郵件</label>
|
||||
<input type="email" class="form-control" id="email" value="linxiaoan@gmail.com">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="carPlate" class="form-label">車牌號碼</label>
|
||||
<input type="text" class="form-control" id="carPlate" value="ABC-1234">
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button type="submit" class="btn-save">儲存</button>
|
||||
<button type="button" class="btn-cancel" onclick="history.back()">取消</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<!-- 底部選單 -->
|
||||
<nav class="navbar fixed-bottom navbar-light bg-light border-top">
|
||||
<div class="container justify-content-around">
|
||||
<a class="nav-link text-center" href="main.html"><div>🏠<br>首頁</div></a>
|
||||
<a class="nav-link text-center" href="#report"><div>🚪<br>出入</div></a>
|
||||
<a class="nav-link text-center" href="#bills"><div>💬<br>訊息</div></a>
|
||||
<a class="nav-link text-center" href="#"><div>👤<br>住戶</div></a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
112
emergency-alert.html
Normal file
112
emergency-alert.html
Normal file
@ -0,0 +1,112 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-Hant">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>警急通報</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<style>
|
||||
body {
|
||||
background-color: #f7f8fa;
|
||||
font-family: 'Noto Sans TC', sans-serif;
|
||||
}
|
||||
header {
|
||||
background-color: #9eaf9f;
|
||||
color: #fff;
|
||||
padding: 16px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.back-button img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
.alert-container {
|
||||
background-color: #fff;
|
||||
margin: 20px;
|
||||
padding: 30px 20px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
text-align: center;
|
||||
}
|
||||
.illustration {
|
||||
width: 140px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.alert-btn {
|
||||
background-color: #dc3545;
|
||||
border: none;
|
||||
}
|
||||
.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>
|
||||
|
||||
<header>
|
||||
<div class="back-button">
|
||||
<img src="https://img.icons8.com/ios-filled/50/ffffff/left.png" onclick="history.back()" />
|
||||
</div>
|
||||
警急通報
|
||||
</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">
|
||||
<label for="disasterType" class="form-label fw-bold">災害類型</label>
|
||||
<select id="disasterType" class="form-select">
|
||||
<option value="">請選擇...</option>
|
||||
<option value="火災">🔥 火災</option>
|
||||
<option value="地震">🌏 地震</option>
|
||||
<option value="水災">💧 水災</option>
|
||||
<option value="可疑人物">🕵️♂️ 可疑人物</option>
|
||||
<option value="公共設施故障">⚠️ 公共設施故障</option>
|
||||
<option value="其他">❓ 其他</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-danger btn-lg w-100 alert-btn" onclick="sendAlert()">🚨 立即通報</button>
|
||||
|
||||
<div id="statusMessage" class="status-message"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function sendAlert() {
|
||||
const status = document.getElementById('statusMessage');
|
||||
const type = document.getElementById('disasterType').value;
|
||||
|
||||
if (!type) {
|
||||
status.innerHTML = '<span class="fail">⚠️ 請先選擇災害類型。</span>';
|
||||
return;
|
||||
}
|
||||
|
||||
// 模擬送出
|
||||
setTimeout(() => {
|
||||
status.innerHTML = `<span class="sent">✅ 已通報「${type}」，請等待支援！</span>`;
|
||||
}, 800);
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
101
entry-verification.html
Normal file
101
entry-verification.html
Normal file
@ -0,0 +1,101 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-Hant">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>出入驗證</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<style>
|
||||
body {
|
||||
background-color: #f7f8fa;
|
||||
font-family: 'Noto Sans TC', sans-serif;
|
||||
}
|
||||
header {
|
||||
background-color: #9eaf9f;
|
||||
color: #fff;
|
||||
padding: 16px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.back-button img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
.verify-container {
|
||||
background-color: #fff;
|
||||
margin: 20px;
|
||||
padding: 30px 20px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
text-align: center;
|
||||
}
|
||||
.illustration {
|
||||
width: 160px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.status-message {
|
||||
margin-top: 20px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.success { color: green; }
|
||||
.fail { color: red; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="back-button">
|
||||
<img src="https://img.icons8.com/ios-filled/50/ffffff/left.png" onclick="history.back()" />
|
||||
</div>
|
||||
出入驗證
|
||||
</header>
|
||||
|
||||
<div class="verify-container">
|
||||
<!-- 美工圖：臉部辨識插圖 -->
|
||||
<img src="https://img.icons8.com/color/160/face-id.png" alt="Face ID" class="illustration">
|
||||
|
||||
<p class="mb-4">請點擊下方按鈕，啟動臉部或指紋辨識進行驗證</p>
|
||||
|
||||
<button class="btn btn-primary btn-lg w-100" onclick="startBiometric()">開始驗證</button>
|
||||
|
||||
<div id="statusMessage" class="status-message"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function startBiometric() {
|
||||
const status = document.getElementById('statusMessage');
|
||||
|
||||
if (!window.PublicKeyCredential) {
|
||||
status.innerHTML = '<span class="fail">❌ 此裝置不支援生物辨識。</span>';
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await navigator.credentials.get({
|
||||
publicKey: {
|
||||
challenge: new Uint8Array(32),
|
||||
allowCredentials: [],
|
||||
timeout: 60000,
|
||||
userVerification: "required"
|
||||
}
|
||||
});
|
||||
|
||||
status.innerHTML = '<span class="success">✅ 驗證成功，歡迎進入活動現場！</span>';
|
||||
} catch (err) {
|
||||
status.innerHTML = `<span class="fail">❌ 驗證失敗：${err.message}</span>`;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
172
feedback.html
Normal file
172
feedback.html
Normal file
@ -0,0 +1,172 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-Hant">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<title>意見回饋</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: 'Noto Sans TC', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f7f8fa;
|
||||
color: #333;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #9eaf9f;
|
||||
color: #fff;
|
||||
padding: 16px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section {
|
||||
background-color: #fff;
|
||||
margin: 16px;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.btn-save {
|
||||
background-color: #4caf50;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 24px;
|
||||
border-radius: 24px;
|
||||
font-size: 16px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.btn-save:hover {
|
||||
background-color: #388e3c;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background-color: #ccc;
|
||||
color: #333;
|
||||
border: none;
|
||||
padding: 10px 24px;
|
||||
border-radius: 24px;
|
||||
font-size: 16px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.btn-cancel:hover {
|
||||
background-color: #aaa;
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ddd;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.footer-nav a {
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-nav img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.back-button img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="back-button">
|
||||
<img src="https://img.icons8.com/ios-filled/50/ffffff/left.png" alt="返回" title="回上一頁" onclick="history.back()" />
|
||||
</div>
|
||||
意見回饋
|
||||
</header>
|
||||
|
||||
<section class="section">
|
||||
<form>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="feedbackType" class="form-label">是否匿名</label>
|
||||
<select class="form-select" id="feedbackType">
|
||||
<option selected>否</option>
|
||||
<option>是</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="feedbackType" class="form-label">意見類型</label>
|
||||
<select class="form-select" id="feedbackType">
|
||||
<option selected>建議</option>
|
||||
<option>問題</option>
|
||||
<option>其他</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="feedbackContent" class="form-label">內容</label>
|
||||
<textarea class="form-control" id="feedbackContent" rows="5" placeholder="請輸入您的意見或建議..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button type="submit" class="btn-save">送出</button>
|
||||
<button type="button" class="btn-cancel" onclick="history.back()">取消</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<!-- 底部選單 -->
|
||||
<nav class="navbar fixed-bottom navbar-light bg-light border-top">
|
||||
<div class="container justify-content-around">
|
||||
<a class="nav-link text-center" href="main.html"><div>🏠<br>首頁</div></a>
|
||||
<a class="nav-link text-center" href="#report"><div>🚪<br>出入</div></a>
|
||||
<a class="nav-link text-center" href="#bills"><div>💬<br>訊息</div></a>
|
||||
<a class="nav-link text-center" href="#"><div>👤<br>住戶</div></a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
42
first_page.html
Normal file
42
first_page.html
Normal file
@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-TW">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>登入頁面</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
|
||||
|
||||
<div class="bg-white rounded-2xl shadow-lg w-full max-w-sm p-8 space-y-6">
|
||||
<!-- 美工圖 -->
|
||||
<div class="flex justify-center">
|
||||
<img src="https://source.unsplash.com/160x160/?technology,app" alt="App Logo" class="rounded-full w-32 h-32 object-cover" />
|
||||
</div>
|
||||
|
||||
<!-- 標題 -->
|
||||
<h2 class="text-2xl font-bold text-center text-gray-800">歡迎回來</h2>
|
||||
|
||||
<!-- 登入表單 -->
|
||||
<form class="space-y-4">
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium text-gray-700">電子信箱</label>
|
||||
<input type="email" id="email" class="w-full mt-1 px-4 py-2 border rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500" placeholder="you@example.com" required />
|
||||
</div>
|
||||
<div>
|
||||
<label for="password" class="block text-sm font-medium text-gray-700">密碼</label>
|
||||
<input type="password" id="password" class="w-full mt-1 px-4 py-2 border rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500" placeholder="請輸入密碼" required />
|
||||
</div>
|
||||
|
||||
<!-- 登入按鈕 -->
|
||||
<button type="submit" class="w-full bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition">登入</button>
|
||||
</form>
|
||||
|
||||
<!-- 忘記密碼 -->
|
||||
<div class="text-center">
|
||||
<a href="#" class="text-sm text-indigo-600 hover:underline">忘記密碼？</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
383
main.html
Normal file
383
main.html
Normal file
@ -0,0 +1,383 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-Hant">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>社區通 - 手機版</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
background-color: #f8f9fa;
|
||||
padding-bottom: 80px; /* 防止被固定底部導航擋住 */
|
||||
}
|
||||
.card {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.nav-link {
|
||||
font-size: 14px;
|
||||
}
|
||||
.footer-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ddd;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.footer-nav a {
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-nav img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 頂部標題 -->
|
||||
<!-- 頂部標題 + 通知鈴鐺 -->
|
||||
<nav class="navbar navbar-light bg-white shadow-sm">
|
||||
<div class="container-fluid d-flex justify-content-between align-items-center">
|
||||
<span class="navbar-brand mb-0 h1">社區通</span>
|
||||
|
||||
<!-- 右側區塊：名字 + 通知鈴鐺 -->
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="me-3 fw-bold">林小安 您好</span> <!-- 名字靠右並貼近鈴鐺 -->
|
||||
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-light position-relative" type="button" id="notifDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
🔔
|
||||
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
|
||||
3
|
||||
<span class="visually-hidden">未讀通知</span>
|
||||
</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="notifDropdown">
|
||||
<li><a class="dropdown-item" href="#">[4/15] 管理費已出帳</a></li>
|
||||
<li><a class="dropdown-item" href="#">[4/14] 社區電梯保養通知</a></li>
|
||||
<li><a class="dropdown-item" href="#">[4/13] 新活動報名開始</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container mt-3">
|
||||
<!-- 公告區塊 -->
|
||||
<h5>📢 重要公告</h5>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">4/20 水塔清洗通知</h6>
|
||||
<p class="card-text">本週六早上9:00至下午3:00進行清洗，請提前儲水。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 功能快捷 -->
|
||||
|
||||
<style>
|
||||
.btn-outline-primary-green {
|
||||
border-color: #555555;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.btn-outline-primary-green img {
|
||||
filter: hue-rotate(90deg) brightness(0.8);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
|
||||
.btn-horizontal {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.btn-outline-primary-green img {
|
||||
filter: hue-rotate(90deg) brightness(0.8);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
opacity: 0.6; /* 半透明 */
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<h5 class="mt-4">🔧 功能選單</h5>
|
||||
|
||||
<div class="row text-center">
|
||||
|
||||
<!-- 報修 -->
|
||||
<div class="col-4 mb-4 d-flex">
|
||||
<a href="repair.html" class="btn btn-outline-primary-green w-100 py-3 h-100 d-flex flex-column align-items-center justify-content-center">
|
||||
<img src="https://img.icons8.com/ios-filled/48/cottage.png" alt="報修">
|
||||
<div>報修</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 郵件 -->
|
||||
<div class="col-4 mb-4 d-flex">
|
||||
<a href="parcel.html" class="btn btn-outline-primary-green w-100 py-3 h-100 d-flex flex-column align-items-center justify-content-center">
|
||||
<img src="https://img.icons8.com/ios-filled/48/cottage.png" alt="郵件">
|
||||
<div>郵件</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 訪客 -->
|
||||
<div class="col-4 mb-4 d-flex">
|
||||
<a href="visitor.html" class="btn btn-outline-primary-green w-100 py-3 h-100 d-flex flex-column align-items-center justify-content-center">
|
||||
<img src="https://img.icons8.com/ios-filled/48/handshake.png" alt="訪客">
|
||||
<div>訪客</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 繳費 -->
|
||||
<div class="col-4 mb-4 d-flex">
|
||||
<a href="bill.html" class="btn btn-outline-primary-green w-100 py-3 h-100 d-flex flex-column align-items-center justify-content-center">
|
||||
<img src="https://img.icons8.com/ios-filled/48/money.png" alt="繳費">
|
||||
<div>繳費</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 社區功能 -->
|
||||
<div class="col-4 mb-4 d-flex">
|
||||
<a href="activities.html" class="btn btn-outline-primary-green w-100 py-3 h-100 d-flex flex-column align-items-center justify-content-center">
|
||||
<img src="https://img.icons8.com/ios-filled/48/city-buildings.png" alt="社區互動">
|
||||
<div>社區互動</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- sos -->
|
||||
<div class="col-4 mb-4 d-flex">
|
||||
<a href="emergency-alert.html" class="btn btn-outline-primary-green w-100 py-3 h-100 d-flex align-items-center justify-content-center btn-horizontal">
|
||||
<img src="https://img.icons8.com/ios-filled/48/door-opened.png" alt="sos">
|
||||
<div>緊急通報</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- 廣告or-->
|
||||
<!-- 廣告輪播區 -->
|
||||
<div id="adCarousel" class="carousel slide my-4" data-bs-ride="carousel">
|
||||
<div class="carousel-inner rounded shadow-sm">
|
||||
<div class="carousel-item active">
|
||||
<img src="https://placehold.co/1200x600/5856D6/ffffff?text=限時折扣" class="d-block w-100" alt="限時折扣">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="https://placehold.co/1200x600/FF6F61/ffffff?text=社區清潔日+報名中" class="d-block w-100" alt="社區清潔日">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="https://placehold.co/1200x600/28B463/ffffff?text=停車位+申請倒數" class="d-block w-100" alt="停車位公告">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 左右箭頭 -->
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#adCarousel" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">上一張</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#adCarousel" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">下一張</span>
|
||||
</button>
|
||||
|
||||
<!-- 下方指示點 -->
|
||||
<div class="carousel-indicators">
|
||||
<button type="button" data-bs-target="#adCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="第1張"></button>
|
||||
<button type="button" data-bs-target="#adCarousel" data-bs-slide-to="1" aria-label="第2張"></button>
|
||||
<button type="button" data-bs-target="#adCarousel" data-bs-slide-to="2" aria-label="第3張"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
/* 文字跑馬燈的容器 */
|
||||
.marquee-container {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
color: black;
|
||||
padding: 10px 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* 設定跑馬燈的動畫 */
|
||||
.marquee-text {
|
||||
display: inline-block;
|
||||
animation: marquee 10s linear infinite;
|
||||
}
|
||||
|
||||
/* 動畫效果: 讓文字從右邊跑到左邊 */
|
||||
@keyframes marquee {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="marquee-container" style="background-color: #f0f0f0; padding: 10px;">
|
||||
<div class="marquee-text">公告:歡迎使用我們的社區通，請多加利用。謝謝您~ 如有問題可洽談管理室</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.scroll-container {
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-padding: 1rem;
|
||||
}
|
||||
|
||||
.scroll-container::-webkit-scrollbar {
|
||||
display: none; /* 手機上隱藏捲軸 */
|
||||
}
|
||||
|
||||
.activity-card {
|
||||
flex: 0 0 calc(28% + 8vw); /* 顯示約 3.5 張 */
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
||||
scroll-snap-align: start;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.activity-card img {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.activity-card .card-body {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.activity-card h6 {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.activity-card p {
|
||||
font-size: 0.85rem;
|
||||
color: #555;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.activity-card .btn-show-more {
|
||||
font-size: 0.8rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
display: inline-block;
|
||||
margin-top: 0.5rem;
|
||||
color: #5856D6;
|
||||
text-decoration: none;
|
||||
border: 1px solid #5856D6;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.activity-card .btn-show-more:hover {
|
||||
background-color: #5856D6;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- 活動區塊 -->
|
||||
<h5 id="events" class="mt-5 mb-3" style="text-align: left;">🎉 最新活動</h5>
|
||||
|
||||
<div class="scroll-container" style="text-align: left;">
|
||||
<!-- 卡片 1 -->
|
||||
<div class="activity-card">
|
||||
<img src="https://placehold.co/600x300/FF6F61/ffffff?text=中秋烤肉趴" alt="活動1">
|
||||
<div class="card-body">
|
||||
<h6>中秋烤肉趴</h6>
|
||||
<p>9/9 晚上 6 點開烤</p>
|
||||
<a href="#" class="btn btn-sm btn-primary">查看</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片 2 -->
|
||||
<div class="activity-card">
|
||||
<img src="https://placehold.co/600x300/28B463/ffffff?text=親子日遊園" alt="活動2">
|
||||
<div class="card-body">
|
||||
<h6>親子日遊園</h6>
|
||||
<p>玩具福袋等你拿！</p>
|
||||
<a href="#" class="btn btn-sm btn-success">報名</a>
|
||||
<a href="#" class="btn btn-sm btn-primary">查看</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片 3 -->
|
||||
<div class="activity-card">
|
||||
<img src="https://placehold.co/600x300/5856D6/ffffff?text=健康講堂" alt="活動3">
|
||||
<div class="card-body">
|
||||
<h6>健康講堂</h6>
|
||||
<p>醫師到場解說</p>
|
||||
<a href="#" class="btn btn-sm btn-success">報名</a>
|
||||
<a href="#" class="btn btn-sm btn-primary">查看</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片 4 -->
|
||||
<div class="activity-card">
|
||||
<img src="https://placehold.co/600x300/F39C12/ffffff?text=防災演習" alt="活動4">
|
||||
<div class="card-body">
|
||||
<h6>防災演習</h6>
|
||||
<p>模擬火災逃生</p>
|
||||
<a href="#" class="btn btn-sm btn-warning">詳情</a>
|
||||
<a href="#" class="btn-show-more">顯示更多</a> <!-- 顯示更多按鈕 -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片 5 -->
|
||||
<div class="activity-card">
|
||||
<img src="https://placehold.co/600x300/2E86C1/ffffff?text=園遊會" alt="活動5">
|
||||
<div class="card-body">
|
||||
<h6>社區園遊會</h6>
|
||||
<p>免費攤位吃到飽</p>
|
||||
<a href="#" class="btn btn-sm btn-secondary">去逛逛</a>
|
||||
<a href="#" class="btn-show-more">顯示更多</a> <!-- 顯示更多按鈕 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- 底部選單 -->
|
||||
<nav class="navbar fixed-bottom navbar-light bg-light border-top">
|
||||
<div class="container justify-content-around">
|
||||
<a class="nav-link text-center" href="main.html"><div>🏠<br>首頁</div></a>
|
||||
<a class="nav-link text-center" href="entry-verification.html"><div>🚪<br>出入</div></a>
|
||||
<a class="nav-link text-center" href="message.html"><div>💬<br>訊息</div></a>
|
||||
<a class="nav-link text-center" href="personal.html"><div>👤<br>住戶</div></a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
211
message.html
Normal file
211
message.html
Normal file
@ -0,0 +1,211 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-Hant">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<title>訊息中心</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: 'Noto Sans TC', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f7f8fa;
|
||||
color: #333;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #9eaf9f;
|
||||
color: #fff;
|
||||
padding: 16px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.back-button img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
padding: 16px;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.message {
|
||||
max-width: 75%;
|
||||
padding: 10px 16px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 16px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.message.user {
|
||||
background-color: #d0e9c6;
|
||||
align-self: flex-end;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.message.admin {
|
||||
background-color: #e0e0e0;
|
||||
align-self: flex-start;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
position: fixed;
|
||||
bottom: 56px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.chat-input input {
|
||||
flex: 1;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #ccc;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.chat-input button {
|
||||
background-color: #4caf50;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.chat-input button:hover {
|
||||
background-color: #388e3c;
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ddd;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.footer-nav a {
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-nav img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
position: fixed;
|
||||
bottom: 56px; /* 原本是這裡 */
|
||||
}
|
||||
.chat-input {
|
||||
position: fixed;
|
||||
bottom: 64px; /* 增加高度，避免壓到 navbar */
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
border-top: 1px solid #ddd;
|
||||
z-index: 10;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="back-button">
|
||||
<img src="https://img.icons8.com/ios-filled/50/ffffff/left.png" alt="返回" onclick="history.back()" />
|
||||
</div>
|
||||
訊息中心
|
||||
</header>
|
||||
|
||||
<!-- 聊天內容 -->
|
||||
<div class="chat-box">
|
||||
<div class="chat-container">
|
||||
<div class="message admin">您好，請記得繳交這個月的管理費。</div>
|
||||
<div class="message user">好的，謝謝通知！</div>
|
||||
<div class="message admin">提醒您 4/18 上午社區將進行水塔清洗，會暫停供水。</div>
|
||||
<div class="message user">了解！</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 輸入區 -->
|
||||
<div class="chat-input">
|
||||
<label for="imageUpload" class="btn btn-light p-0 m-0">
|
||||
<img src="https://img.icons8.com/ios-filled/24/image.png" alt="夾帶圖片" style="width: 24px; height: 24px; margin: 8px;" />
|
||||
</label>
|
||||
<input type="file" id="imageUpload" accept="image/*" style="display: none;" />
|
||||
|
||||
<input type="text" placeholder="輸入訊息..." />
|
||||
<button>發送</button>
|
||||
</div>
|
||||
|
||||
<!-- 底部選單 -->
|
||||
<nav class="navbar fixed-bottom navbar-light bg-light border-top">
|
||||
<div class="container justify-content-around">
|
||||
<a class="nav-link text-center" href="main.html"><div>🏠<br>首頁</div></a>
|
||||
<a class="nav-link text-center" href="#report"><div>🚪<br>出入</div></a>
|
||||
<a class="nav-link text-center" href="message.html"><div>💬<br>訊息</div></a>
|
||||
<a class="nav-link text-center" href="#"><div>👤<br>住戶</div></a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script>
|
||||
// 這裡可日後補上發送功能或 AJAX
|
||||
document.querySelector('.chat-input button').addEventListener('click', () => {
|
||||
const input = document.querySelector('.chat-input input');
|
||||
const text = input.value.trim();
|
||||
if (text !== '') {
|
||||
const msg = document.createElement('div');
|
||||
msg.className = 'message user';
|
||||
msg.textContent = text;
|
||||
document.querySelector('.chat-container').appendChild(msg);
|
||||
input.value = '';
|
||||
document.querySelector('.chat-box').scrollTop = document.querySelector('.chat-box').scrollHeight;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
173
parcel.html
Normal file
173
parcel.html
Normal file
@ -0,0 +1,173 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-Hant">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<title>信件包裹通知 - 社區管理 App</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: 'Noto Sans TC', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f7f8fa;
|
||||
color: #333;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #9eaf9f;
|
||||
color: #fff;
|
||||
padding: 16px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.back-button img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.section {
|
||||
background-color: #fff;
|
||||
margin: 12px 16px;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.parcel-item {
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.parcel-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.parcel-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.parcel-info span {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.receive-btn {
|
||||
margin-top: 10px;
|
||||
background-color: #4caf50;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 6px 12px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.receive-btn:hover {
|
||||
background-color: #388e3c;
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ddd;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.footer-nav a {
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-nav img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="back-button">
|
||||
<img src="https://img.icons8.com/ios-filled/50/ffffff/left.png" alt="返回" title="回上一頁" onclick="history.back()" />
|
||||
</div>
|
||||
信件包裹通知
|
||||
</header>
|
||||
|
||||
<!-- 包裹清單區塊 -->
|
||||
<section class="section">
|
||||
<h3 style="font-size: 16px; margin-bottom: 12px;">📦 待領包裹</h3>
|
||||
|
||||
<div class="parcel-item">
|
||||
<div class="parcel-info">
|
||||
<span>2025/04/16</span>
|
||||
<span>宅配 - 7-11 交貨便</span>
|
||||
</div>
|
||||
<div class="parcel-info">
|
||||
<span>收件人：林小安</span>
|
||||
<span>包裹編號：P20240416001</span>
|
||||
</div>
|
||||
<div class="parcel-info">
|
||||
<span>代收金額：$250</span>
|
||||
<span></span>
|
||||
</div>
|
||||
<button class="receive-btn" onclick="alert('您已確認領取此包裹。')">確認領取</button>
|
||||
</div>
|
||||
|
||||
<div class="parcel-item">
|
||||
<div class="parcel-info">
|
||||
<span>2025/04/14</span>
|
||||
<span>黑貓宅急便</span>
|
||||
</div>
|
||||
<div class="parcel-info">
|
||||
<span>收件人：林小安</span>
|
||||
<span>包裹編號：P20240414002</span>
|
||||
</div>
|
||||
<div class="parcel-info">
|
||||
<span>代收金額：$120</span>
|
||||
<span></span>
|
||||
</div>
|
||||
<button class="receive-btn" onclick="alert('您已確認領取此包裹。')">確認領取</button>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- 底部選單 -->
|
||||
<nav class="navbar fixed-bottom navbar-light bg-light border-top">
|
||||
<div class="container justify-content-around">
|
||||
<a class="nav-link text-center" href="main.html"><div>🏠<br>首頁</div></a>
|
||||
<a class="nav-link text-center" href="#"><div>🚪<br>出入</div></a>
|
||||
<a class="nav-link text-center" href="message.html"><div>💬<br>訊息</div></a>
|
||||
<a class="nav-link text-center" href="#"><div>👤<br>住戶</div></a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
277
personal.html
Normal file
277
personal.html
Normal file
@ -0,0 +1,277 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-Hant">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<title>社區管理 App - 首頁</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: 'Noto Sans TC', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f7f8fa;
|
||||
color: #333;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #9eaf9f;
|
||||
color: #fff;
|
||||
padding: 16px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header-icons {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 16px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.header-icons img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
filter: brightness(0) invert(1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.section {
|
||||
background-color: #fff;
|
||||
margin-bottom: 10px;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.profile-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.profile-section img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.profile-details h2 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.profile-details p {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.community-info p {
|
||||
font-size: 14px;
|
||||
margin: 6px 0;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.quick-menu {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
border-radius: 8px;
|
||||
background-color: #f1f1f1;
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.menu-item img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.menu-item p {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.notification-item {
|
||||
font-size: 14px;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.notification-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.logout-section {
|
||||
margin: 30px 20px 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logout-button {
|
||||
padding: 12px 24px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
border-radius: 24px;
|
||||
background-color: #f08080;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.logout-button:hover {
|
||||
background-color: #d46a6a;
|
||||
}
|
||||
|
||||
.logout-button img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ddd;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.footer-nav a {
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-nav img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.back-button img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="back-button">
|
||||
<img src="https://img.icons8.com/ios-filled/50/ffffff/left.png" alt="返回" title="回上一頁" onclick="history.back()" />
|
||||
</div>
|
||||
我的社區
|
||||
<div class="header-icons">
|
||||
<img src="https://img.icons8.com/ios-filled/50/appointment-reminders.png" alt="通知" title="通知" />
|
||||
<img src="https://img.icons8.com/ios-filled/50/qr-code.png" alt="條碼" title="我的條碼" />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 使用者資訊 -->
|
||||
<section class="section profile-section">
|
||||
<img src="https://via.placeholder.com/60" alt="頭像" />
|
||||
<div class="profile-details">
|
||||
<h2>林小安</h2>
|
||||
<p>住戶編號：B205</p>
|
||||
<p>社區：綠光花園</p>
|
||||
</div>
|
||||
<a href="edit-profile.html" class="btn btn-sm btn-outline-success"
|
||||
style="position: absolute; top: 8px; right: 16px; font-size: 13px; border-radius: 20px; padding: 4px 12px;">
|
||||
✏️ 修改
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<!-- 社區資訊 -->
|
||||
<section class="section community-info" style="position: relative;">
|
||||
<a href="feedback.html" class="btn btn-outline-secondary"
|
||||
style="position: absolute; top: 16px; right: 16px; padding: 6px 14px; font-size: 13px; border-radius: 20px;">
|
||||
📝 意見箱
|
||||
</a>
|
||||
<p><strong>社區地址：</strong>新北市板橋區幸福路 88 號</p>
|
||||
<p><strong>管理室電話：</strong>02-2233-4455</p>
|
||||
<p><strong>管委會 Email：</strong>service@garden-community.tw</p>
|
||||
</section>
|
||||
|
||||
<!-- 快速功能 -->
|
||||
<section class="section">
|
||||
<div class="quick-menu">
|
||||
<a href="bill.html" class="menu-item">
|
||||
<img src="https://img.icons8.com/ios-filled/50/bill.png" alt="繳費通知" />
|
||||
<p>繳費通知</p>
|
||||
</a>
|
||||
<a href="repair.html" class="menu-item">
|
||||
<img src="https://img.icons8.com/ios-filled/50/toolbox.png" alt="報修申請" />
|
||||
<p>報修申請</p>
|
||||
</a>
|
||||
<a href="parcel.html" class="menu-item">
|
||||
<img src="https://img.icons8.com/ios-filled/50/parcel.png" alt="包裹通知" />
|
||||
<p>包裹通知</p>
|
||||
</a>
|
||||
<a href="visitor.html" class="menu-item">
|
||||
<img src="https://img.icons8.com/ios-filled/50/visitor-male.png" alt="訪客" />
|
||||
<p>訪客</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 最新通知 -->
|
||||
<section class="section">
|
||||
<h3 style="font-size: 16px; margin-bottom: 10px;">📢 最新通知</h3>
|
||||
<div class="notification-item">水塔清洗公告（4/18 上午停水）</div>
|
||||
<div class="notification-item">您有 1 件包裹尚未領取</div>
|
||||
<div class="notification-item">電梯定期保養預告（4/20）</div>
|
||||
</section>
|
||||
|
||||
<!-- 登出 -->
|
||||
<section class="logout-section">
|
||||
<button class="logout-button">
|
||||
<img src="https://img.icons8.com/ios-filled/50/logout-rounded-left.png" alt="登出" />
|
||||
登出
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<!-- 底部導覽列 -->
|
||||
<nav class="navbar fixed-bottom navbar-light bg-light border-top">
|
||||
<div class="container justify-content-around">
|
||||
<a class="nav-link text-center" href="main.html"><div>🏠<br>首頁</div></a>
|
||||
<a class="nav-link text-center" href="#report"><div>🚪<br>出入</div></a>
|
||||
<a class="nav-link text-center" href="message.html"><div>💬<br>訊息</div></a>
|
||||
<a class="nav-link text-center" href="#"><div>👤<br>住戶</div></a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
176
repair.html
Normal file
176
repair.html
Normal file
@ -0,0 +1,176 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-Hant">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<title>報修申請 - 社區管理 App</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: 'Noto Sans TC', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f7f8fa;
|
||||
color: #333;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #9eaf9f;
|
||||
color: #fff;
|
||||
padding: 16px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.back-button img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.section {
|
||||
background-color: #fff;
|
||||
margin: 12px 16px;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
margin-top: 16px;
|
||||
background-color: #4caf50;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
font-size: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.submit-btn:hover {
|
||||
background-color: #388e3c;
|
||||
}
|
||||
|
||||
.record-item {
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.record-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ddd;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.footer-nav a {
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-nav img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="back-button">
|
||||
<img src="https://img.icons8.com/ios-filled/50/ffffff/left.png" alt="返回" title="回上一頁" onclick="history.back()" />
|
||||
</div>
|
||||
水電網路報修
|
||||
</header>
|
||||
|
||||
<!-- 報修表單 -->
|
||||
<section class="section">
|
||||
<h3 style="font-size: 16px; margin-bottom: 12px;">🛠️ 填寫報修單</h3>
|
||||
<form>
|
||||
<label class="form-label" for="repairType">報修類別</label>
|
||||
<select class="form-select" id="repairType" required>
|
||||
<option selected disabled>請選擇</option>
|
||||
<option>電力問題</option>
|
||||
<option>水管漏水</option>
|
||||
<option>網路異常</option>
|
||||
<option>其他</option>
|
||||
</select>
|
||||
|
||||
<label class="form-label" for="location">地點/房號</label>
|
||||
<input type="text" class="form-control" id="location" placeholder="如：B棟 3F" required>
|
||||
|
||||
<label class="form-label" for="description">問題描述</label>
|
||||
<textarea class="form-control" id="description" rows="3" placeholder="請簡要描述問題..." required></textarea>
|
||||
|
||||
<label class="form-label" for="photo">照片上傳（選填）</label>
|
||||
<input class="form-control" type="file" id="photo" accept="image/*">
|
||||
|
||||
<button type="submit" class="submit-btn" onclick="event.preventDefault(); alert('報修已提交！');">送出報修</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<!-- 已申報紀錄 -->
|
||||
<section class="section">
|
||||
<h3 style="font-size: 16px; margin-bottom: 12px;">📋 已申報紀錄</h3>
|
||||
|
||||
<div class="record-item">
|
||||
<div><strong>2025/04/20</strong> - 水管漏水</div>
|
||||
<div>地點：A棟 2F｜狀態：處理中</div>
|
||||
</div>
|
||||
|
||||
<div class="record-item">
|
||||
<div><strong>2025/04/18</strong> - 網路異常</div>
|
||||
<div>地點：C棟 5F｜狀態：已完成</div>
|
||||
</div>
|
||||
|
||||
<div class="record-item">
|
||||
<div><strong>2025/04/15</strong> - 電力問題</div>
|
||||
<div>地點：B棟 6F｜狀態：待處理</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 底部選單 -->
|
||||
<nav class="navbar fixed-bottom navbar-light bg-light border-top">
|
||||
<div class="container justify-content-around">
|
||||
<a class="nav-link text-center" href="main.html"><div>🏠<br>首頁</div></a>
|
||||
<a class="nav-link text-center" href="#"><div>🚪<br>出入</div></a>
|
||||
<a class="nav-link text-center" href="message.html"><div>💬<br>訊息</div></a>
|
||||
<a class="nav-link text-center" href="#"><div>👤<br>住戶</div></a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
156
visitor.html
Normal file
156
visitor.html
Normal file
@ -0,0 +1,156 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-Hant">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<title>訪客來訪 - 社區管理 App</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: 'Noto Sans TC', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f7f8fa;
|
||||
color: #333;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #9eaf9f;
|
||||
color: #fff;
|
||||
padding: 16px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.back-button img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.section {
|
||||
background-color: #fff;
|
||||
margin: 12px 16px;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.visitor-item {
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.visitor-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.visitor-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.visitor-info span {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.visitor-detail {
|
||||
font-size: 13px;
|
||||
color: #777;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ddd;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.footer-nav a {
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-nav img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="back-button">
|
||||
<img src="https://img.icons8.com/ios-filled/50/ffffff/left.png" alt="返回" title="回上一頁" onclick="history.back()" />
|
||||
</div>
|
||||
訪客來訪紀錄
|
||||
</header>
|
||||
|
||||
<!-- 訪客記錄清單 -->
|
||||
<section class="section">
|
||||
<h3 style="font-size: 16px; margin-bottom: 12px;">📝 訪客紀錄</h3>
|
||||
|
||||
<div class="visitor-item">
|
||||
<div class="visitor-info">
|
||||
<span>2025/04/22 14:35</span>
|
||||
<span>王小明</span>
|
||||
</div>
|
||||
<div class="visitor-detail">身分：朋友 ｜ 目的：拜訪林小安</div>
|
||||
</div>
|
||||
|
||||
<div class="visitor-item">
|
||||
<div class="visitor-info">
|
||||
<span>2025/04/21 10:20</span>
|
||||
<span>陳美麗</span>
|
||||
</div>
|
||||
<div class="visitor-detail">身分：水電師傅 ｜ 目的：維修浴室</div>
|
||||
</div>
|
||||
|
||||
<div class="visitor-item">
|
||||
<div class="visitor-info">
|
||||
<span>2025/04/20 17:45</span>
|
||||
<span>李建國</span>
|
||||
</div>
|
||||
<div class="visitor-detail">身分：外送員 ｜ 目的：送晚餐（Uber Eats）</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- 底部選單 -->
|
||||
<nav class="navbar fixed-bottom navbar-light bg-light border-top">
|
||||
<div class="container justify-content-around">
|
||||
<a class="nav-link text-center" href="main.html"><div>🏠<br>首頁</div></a>
|
||||
<a class="nav-link text-center" href="#"><div>🚪<br>出入</div></a>
|
||||
<a class="nav-link text-center" href="message.html"><div>💬<br>訊息</div></a>
|
||||
<a class="nav-link text-center" href="#"><div>👤<br>住戶</div></a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user