<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
<div>
<label class="block text-sm font-bold text-gray-600 mb-1">單位名稱</label>
<input type="text" id="unitName" class="w-full p-2 border border-gray-300 focus:ring-2 focus:ring-blue-400 outline-none" value="香港小童群益會賽馬會屯門青少年綜合服務中心" oninput="updatePreview()">
</div>
<div>
<label class="block text-sm font-bold text-gray-600 mb-1">通告日期</label>
<input type="date" id="noticeDate" class="w-full p-2 border border-gray-300 focus:ring-2 focus:ring-blue-400 outline-none" oninput="updatePreview()">
</div>
</div>
<div id="activities-list" class="space-y-4 mb-6">
<!-- 活動項目會動態生成 -->
</div>
<button onclick="addActivity()" class="w-full py-2 bg-gray-100 border-2 border-dashed border-gray-300 rounded-xl text-gray-600 hover:bg-gray-200 transition mb-4 font-bold">+ 新增活動項目</button>
<button onclick="window.print()" class="w-full py-4 bg-blue-600 text-white rounded-2xl font-bold text-lg hover:bg-blue-700 shadow-lg transition">
列印或儲存為 PDF
</button>
</div>
<!-- 預覽區 -->
<div class="flex-1 bg-gray-200 p-4 rounded-2xl overflow-auto flex justify-center items-start min-h-[600px]">
<div id="preview-container" class="a4-paper origin-top scale-[0.5] md:scale-[0.6] lg:scale-[0.5] xl:scale-[0.7]">
<div class="text-center mb-10">
<h1 class="text-3xl font-bold tracking-[0.3em] mb-4">香港小童群益會</h1>
<div class="text-xl mb-6">
單位：<span id="p-unit" class="border-b-2 border-black min-w-[300px] inline-block px-4 font-bold"></span>
</div>
<h2 class="text-5xl font-bold tracking-widest mt-8 relative inline-block">
服務取消通告
<div class="absolute -bottom-2 left-0 w-full h-1 bg-black"></div>
</h2>
</div>
<p class="text-xl leading-relaxed text-justify mb-10 font-bold">
謹通知以下活動，因下列原因，予以取消，不便之處，敬請原諒！如有疑問，請聯絡本單位櫃位職員或活動負責人。
</p>
<table class="w-full border-collapse border-[2px] border-black mb-16 text-center text-xl">
<thead>
<tr class="bg-gray-50 border-b-2 border-black h-14">
<th class="border-r-2 border-black w-[8%]"></th>
<th class="border-r-2 border-black w-[32%]">活動名稱</th>
<th class="border-r-2 border-black w-[18%]">活動編號</th>
<th class="border-r-2 border-black w-[18%]">活動日期</th>
<th class="w-[24%]">取消原因</th>
</tr>
</thead>
<tbody id="p-table-body">
<!-- 表格內容 -->
</tbody>
</table>
<div class="flex flex-col items-end mt-20 pr-10">
<div class="text-right space-y-4">
<div class="text-2xl font-bold">香港小童群益會</div>
<div class="text-xl font-bold">
<span id="p-unit-footer" class="border-b-2 border-black min-w-[280px] inline-block px-4 text-center"></span> ( 單位 ) 啟
</div>
</div>
<div id="p-date" class="text-xl font-bold mt-10"></div>
</div>
</div>
</div>
</div>
<script>
let activities = [{ name: '', code: '', date: '', reason: '' }];
const reasons = ["活動人數不足", "因天氣惡劣關係", "負責職員病假", "場地維修/突發狀況", "導師因事請假"];
function init() {
document.getElementById('noticeDate').valueAsDate = new Date();
renderInputs();
updatePreview();
}
function renderInputs() {
const container = document.getElementById('activities-list');
container.innerHTML = activities.map((act, i) => `
<div class="p-4 bg-blue-50/50 rounded-xl relative border border-blue-100">
<button onclick="removeActivity(${i})" class="absolute top-2 right-2 text-gray-400 hover:text-red-500">✕</button>
<div class="grid grid-cols-1 gap-2 mt-2">
<input type="text" placeholder="活動名稱" class="p-2 text-sm border rounded" value="${act.name}" oninput="updateAct(${i}, 'name', this.value)">
<div class="grid grid-cols-2 gap-2">
<input type="text" placeholder="活動編號" class="p-2 text-sm border rounded" value="${act.code}" oninput="updateAct(${i}, 'code', this.value)">
<input type="text" placeholder="活動日期" class="p-2 text-sm border rounded" value="${act.date}" oninput="updateAct(${i}, 'date', this.value)">
</div>
<div class="flex gap-2">
<input type="text" placeholder="原因" class="p-2 text-sm border rounded flex-1" value="${act.reason}" oninput="updateAct(${i}, 'reason', this.value)">
<select class="p-2 text-xs border rounded w-24" onchange="updateAct(${i}, 'reason', this.value); renderInputs(); updatePreview();">
<option value="">快速選擇</option>
${reasons.map(r => `<option value="${r}">${r}</option>`).join('')}
</select>
</div>
</div>
</div>
`).join('');
}
function updateAct(i, field, val) {
activities[i][field] = val;
updatePreview();
}
function addActivity() {
activities.push({ name: '', code: '', date: '', reason: '' });
renderInputs();
updatePreview();
}
function removeActivity(i) {
if (activities.length > 1) {
activities.splice(i, 1);
renderInputs();
updatePreview();
}
}
function updatePreview() {
const unit = document.getElementById('unitName').value;
const date = document.getElementById('noticeDate').value;
const dateObj = new Date(date);
document.getElementById('p-unit').innerText = unit || "__________________";
document.getElementById('p-unit-footer').innerText = unit || "__________________";
document.getElementById('p-date').innerText = date ? `${dateObj.getFullYear()} 年 ${dateObj.getMonth() + 1} 月 ${dateObj.getDate()} 日` : " 年 月 日";
let html = '';
const displayList = [...activities];
while(displayList.length < 4) displayList.push({ name: '', code: '', date: '', reason: '' });
displayList.forEach((act, i) => {
html += `
<tr class="h-20 border-b border-black">
<td class="border-r border-black font-bold">${i + 1}.</td>
<td class="border-r border-black px-2 leading-tight font-bold">${act.name}</td>
<td class="border-r border-black font-bold">${act.code}</td>
<td class="border-r border-black font-bold">${act.date}</td>
<td class="px-2 leading-tight font-bold">${act.reason}</td>
</tr>
`;
});
document.getElementById('p-table-body').innerHTML = html;
}
init();
</script>
資料輸入區 (圓體版)