136 lines
5.2 KiB
HTML
136 lines
5.2 KiB
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; 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="endDate" class="form-label">結束時間</label>
|
||
<input type="datetime-local" class="form-control" id="endDate" 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-3">
|
||
<label for="needRegister" class="form-label">是否需統計報名人數？</label>
|
||
<select id="needRegister" class="form-select">
|
||
<option value="否" selected>否</option>
|
||
<option value="是">是</option>
|
||
</select>
|
||
</div>
|
||
|
||
<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>
|
||
|
||
<div class="d-grid gap-2">
|
||
<button type="submit" class="btn btn-success">送出申請</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<br/><br/><br/><br/><br/>
|
||
|
||
<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>
|
||
function toggleRepeatFields() {
|
||
const option = document.getElementById('repeatOption').value;
|
||
const group = document.getElementById('repeatCountGroup');
|
||
group.classList.toggle('d-none', option === 'none');
|
||
}
|
||
|
||
function submitActivity(event) {
|
||
event.preventDefault();
|
||
|
||
const title = document.getElementById('title').value;
|
||
const date = document.getElementById('date').value;
|
||
const endDate = document.getElementById('endDate').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;
|
||
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} 次`;
|
||
}
|
||
|
||
if (poster) {
|
||
message += `\n檔案名稱：${poster.name}`;
|
||
}
|
||
|
||
alert(message);
|
||
// 實際上傳邏輯可加入這裡（例如：透過 fetch 上傳 FormData）
|
||
|
||
history.back();
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html> |