92 lines
4.1 KiB
HTML
92 lines
4.1 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>
|
|||
|
|
|
|||
|
|
<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>
|