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">
|
|
|
|
|
|
<label for="date" class="form-label">日期與時間</label>
|
|
|
|
|
|
<input type="datetime-local" class="form-control" id="date" 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-4">
|
|
|
|
|
|
<label for="needRegister" class="form-label">是否需統計報名人數？</label>
|
|
|
|
|
|
<select id="needRegister" class="form-select">
|
|
|
|
|
|
<option value="否" selected>否</option>
|
|
|
|
|
|
<option value="是">是</option>
|
|
|
|
|
|
</select>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="d-grid gap-2">
|
|
|
|
|
|
<button type="submit" class="btn btn-success">送出申請</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</form>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
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>
|
|
|
|
|
|
function submitActivity(event) {
|
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
|
|
|
|
const title = document.getElementById('title').value;
|
|
|
|
|
|
const date = document.getElementById('date').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;
|
|
|
|
|
|
|
|
|
|
|
|
let message = `活動申請已送出\n名稱：${title}\n時間：${date}\n地點：${location}\n描述：${description}\n需報名統計：${needRegister}`;
|
|
|
|
|
|
if (poster) {
|
|
|
|
|
|
message += `\n檔案名稱：${poster.name}`;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
alert(message);
|
|
|
|
|
|
// 實際上傳邏輯可加入這裡（例如：透過 fetch 上傳 FormData）
|
|
|
|
|
|
|
|
|
|
|
|
history.back();
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
