82 lines
3.1 KiB
HTML
82 lines
3.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"/>
|
||
<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>
|
||
|
||
<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> |