114 lines
4.9 KiB
HTML
114 lines
4.9 KiB
HTML
<!-- 活動列表頁 (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>社區活動列表123</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> |