File: /var/www/test/Installationlist/oldphp/previewold.php
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>網際網路接取服務申請書</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script src="fill_preview_data.js"></script>
<style>
body { font-family: "Microsoft JhengHei", sans-serif; font-size: 20px; margin: 24px; color: #111; }
table { border-collapse: collapse; width: 100%; margin-bottom: 20px; }
td, th { border: 1px solid #000; padding: 10px; vertical-align: top; }
.section-title { background: #f6f6f6; font-weight: bold; font-size: 22px; text-align: center; }
.label { font-weight: bold; width: 20%; background: #f7f7fa; }
.val { width: 30%; }
.nowrap { white-space: nowrap; }
.btn-group { margin: 28px 0; text-align: center; }
.btn { font-size: 22px; padding: 16px 40px; margin: 0 16px; cursor: pointer; border-radius: 8px; border:1px solid #aaa; background: #f5f5f5;font-weight: bold;}
.btn:hover { background: #e0e7ef; }
.logo-box { display: flex; align-items: center; justify-content: center; margin-bottom: 24px;}
.logo-text { margin-left: 18px; }
.device-table { table-layout: fixed; width: 100%;}
.device-table td.label { width: 18px; max-width: 22px; min-width: 16px;background: #f7f7fa; text-align: center; font-weight: bold; word-break: break-all; font-size: 16px;}
.device-table td.val { text-align: center; word-break: break-all;}
@media (max-width: 800px) { body { font-size: 15px; } td, th { font-size: 15px; } }
#given-months-list { white-space: pre-line;}
</style>
</head>
<body>
<div id="preview-main">
<div style="text-align:center; font-size:28px; font-weight:bold; margin-bottom:14px;">
網際網路接取服務申請書
</div>
<table>
<tr class="section-title"><td colspan="4">申請人基本資料</td></tr>
<tr>
<td class="label">用戶編號</td>
<td class="val" id="user_id_display"></td>
<td class="label">社區名稱</td>
<td class="val" id="member_display"></td>
</tr>
<tr>
<td class="label">申請人姓名</td>
<td class="val" id="applicant_name"></td>
<td class="label">住宅電話</td>
<td class="val" id="applicant_homenumber"></td>
</tr>
<tr>
<td class="label">身分證字號/統一編號</td>
<td class="val" id="applicant_usernumber"></td>
<td class="label">行動電話</td>
<td class="val" id="applicant_phone"></td>
</tr>
<tr>
<td class="label">裝機地址</td>
<td class="val" id="install_address" colspan="3"></td>
</tr>
<tr>
<td class="label">電子信箱</td>
<td class="val" colspan="3" id="applicant_email"></td>
</tr>
<tr>
<td class="label">申請速率</td>
<td class="val" id="speed"></td>
<td class="label">連接據點</td>
<td class="val" id="basenumber"></td>
</tr>
<tr>
<td class="label">連線帳號</td>
<td class="val" id="pppoeid"></td>
<td class="label">連線密碼</td>
<td class="val" id="pppoepw"></td>
</tr>
<tr>
</tr>
<tr>
<td class="label" >首裝優惠</td>
<td class="val" style="white-space:pre-wrap; word-break:break-word;" id="fistcount" colspan="3"></td>
</tr>
</table>
<table class="device-table">
<tr class="section-title">
<td colspan="15">設備資訊</td>
</tr>
<tr>
<td class="label" colspan="1">室<br>內<br>資<br>訊<br>箱<br>設<br>備</td>
<td class="val" id="info_box" colspan="4"></td>
<td class="label" colspan="1">室<br>內<br>網<br>路<br>設<br>備</td>
<td class="val" id="router_box" colspan="4"></td>
<td class="label" colspan="1">借<br>用<br>設<br>備<br>料<br>號</td>
<td class="val" id="use_box" colspan="4"></td>
</tr>
</table>
<table>
<tr class="section-title"><td colspan="4">收費項目明細</td></tr>
<tr>
<td style="width: 20%; font-weight:bold;">項目</td>
<td style="width: 25%;">品項</td>
<td style="width: 15%;">金額</td>
<td style="width: 40%;">設備料號/備註</td>
</tr>
<tbody id="fee-list"></tbody>
<tr>
<td colspan="2" style="text-align:right; font-weight:bold;">總計</td>
<td id="fee-total" style="font-weight:bold; color:red;"></td>
<td></td>
</tr>
</table>
<table>
<tr class="section-title"><td colspan="4">日期資訊</td></tr>
<tr>
<td style="font-weight:bold;">裝機日</td>
<td id="install-date"></td>
</tr>
<tr>
<td style="font-weight:bold;">起租日</td>
<td id="rental-start-date"></td>
</tr>
<tr>
<td style="font-weight:bold;">到期日</td>
<td id="rental-end-date"></td>
</tr>
<tr>
<td style="font-weight:bold;">贈送月份明細</td>
<td colspan="3" id="given-months-list"></td>
</tr>
<tr>
<td style="font-weight:bold;">贈送後到期日</td>
<td id="real-end-date"></td>
</tr>
</table>
<div class="btn-group">
<button class="btn" onclick="window.location.href='form.php'">回上一頁修改</button>
<button class="btn" onclick="window.location.href='confirm.php'">下一頁</button>
</div>
</div>
<script>
window.onload = () => {
if (typeof fillPreviewFromSession === 'function') {
fillPreviewFromSession(document);
} else {
console.error('fillPreviewFromSession 函式未載入');
}
};
</script>
</body>
</html>