2025-04-25 15:59:56 +08:00
|
|
|
|
<!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">
|
2025-05-23 17:49:09 +08:00
|
|
|
|
<label for="date" class="form-label">開始時間</label>
|
2025-04-25 15:59:56 +08:00
|
|
|
|
<input type="datetime-local" class="form-control" id="date" required>
|
|
|
|
|
|
</div>
|
2025-05-23 17:49:09 +08:00
|
|
|
|
<div class="mb-3">
|
|
|
|
|
|
<label for="endDate" class="form-label">結束時間</label>
|
|
|
|
|
|
<input type="datetime-local" class="form-control" id="endDate" required>
|
|
|
|
|
|
</div>
|
2025-04-25 15:59:56 +08:00
|
|
|
|
<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>
|
2025-05-23 17:49:09 +08:00
|
|
|
|
<div class="mb-3">
|
2025-04-25 15:59:56 +08:00
|
|
|
|
<label for="needRegister" class="form-label">是否需統計報名人數？</label>
|
|
|
|
|
|
<select id="needRegister" class="form-select">
|
|
|
|
|
|
<option value="否" selected>否</option>
|
|
|
|
|
|
<option value="是">是</option>
|
|
|
|
|
|
</select>
|
|
|
|
|
|
</div>
|
2025-05-23 17:49:09 +08:00
|
|
|
|
|
|
|
|
|
|
<div class="mb-3">
|
|
|
|
|
|
<label for="repeatOption" class="form-label">是否重複舉辦</label>
|
|
|
|
|
|
<select id="repeatOption" class="form-select" onchange="toggleRepeatFields()">
|
|
|
|
|
|
<option value="none" selected>否</option>
|
|
|
|
|
|
<option value="weekly">每週一次</option>
|
|
|
|
|
|
<option value="biweekly">每兩週一次</option>
|
|
|
|
|
|
<option value="monthly">每月一次</option>
|
|
|
|
|
|
</select>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="mb-3 d-none" id="repeatCountGroup">
|
|
|
|
|
|
<label for="repeatCount" class="form-label">重複次數（不含首次）</label>
|
|
|
|
|
|
<input type="number" class="form-control" id="repeatCount" min="1" value="1">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2025-04-25 15:59:56 +08:00
|
|
|
|
<div class="d-grid gap-2">
|
|
|
|
|
|
<button type="submit" class="btn btn-success">送出申請</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</form>
|
|
|
|
|
|
</div>
|
2025-05-23 17:49:09 +08:00
|
|
|
|
<br/><br/><br/><br/><br/>
|
2025-05-20 15:38:08 +08:00
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
2025-04-25 15:59:56 +08:00
|
|
|
|
<script>
|
2025-05-23 17:49:09 +08:00
|
|
|
|
function toggleRepeatFields() {
|
|
|
|
|
|
const option = document.getElementById('repeatOption').value;
|
|
|
|
|
|
const group = document.getElementById('repeatCountGroup');
|
|
|
|
|
|
group.classList.toggle('d-none', option === 'none');
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2025-04-25 15:59:56 +08:00
|
|
|
|
function submitActivity(event) {
|
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
|
|
|
|
const title = document.getElementById('title').value;
|
|
|
|
|
|
const date = document.getElementById('date').value;
|
2025-05-23 17:49:09 +08:00
|
|
|
|
const endDate = document.getElementById('endDate').value;
|
2025-04-25 15:59:56 +08:00
|
|
|
|
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;
|
2025-05-23 17:49:09 +08:00
|
|
|
|
const repeatOption = document.getElementById('repeatOption').value;
|
|
|
|
|
|
const repeatCount = document.getElementById('repeatCount').value;
|
|
|
|
|
|
|
|
|
|
|
|
if (new Date(endDate) <= new Date(date)) {
|
|
|
|
|
|
alert("結束時間必須晚於開始時間！");
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
let message = `活動申請已送出\n名稱：${title}\n開始時間：${date}\n結束時間：${endDate}\n地點：${location}\n描述：${description}\n需報名統計：${needRegister}`;
|
|
|
|
|
|
|
|
|
|
|
|
if (repeatOption !== 'none') {
|
|
|
|
|
|
const optionMap = {
|
|
|
|
|
|
weekly: '每週',
|
|
|
|
|
|
biweekly: '每兩週',
|
|
|
|
|
|
monthly: '每月'
|
|
|
|
|
|
};
|
|
|
|
|
|
message += `\n重複設定：${optionMap[repeatOption]}，共重複 ${repeatCount} 次`;
|
|
|
|
|
|
}
|
2025-04-25 15:59:56 +08:00
|
|
|
|
|
|
|
|
|
|
if (poster) {
|
|
|
|
|
|
message += `\n檔案名稱：${poster.name}`;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
alert(message);
|
|
|
|
|
|
// 實際上傳邏輯可加入這裡（例如：透過 fetch 上傳 FormData）
|
|
|
|
|
|
|
|
|
|
|
|
history.back();
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
