102 lines
4.6 KiB
HTML
102 lines
4.6 KiB
HTML
<!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>
|
||
|
||
|
||
<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>
|
||
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> |