Test_Project_Web/rental-contract-pdf
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增管理員頁面、Word PDF 預覽、租賃日期欄位、SSL docker-compose

Browse Source 
- 新增 /admin.html：上傳/刪除範本，HTTP Basic Auth 保護
- Word 預覽改用 LibreOffice PDF 轉換，帶入表單參數即時顯示
- 新增租賃開始/結束年月日、租期年數佔位符支援
- 預覽 loading 遮罩，修正 hidden 被 CSS display:flex 覆蓋的問題
- 左右欄 UI 重構，右欄固定顯示 Word 預覽
- 新增 docker-compose.yml + nginx SSL reverse proxy
- admin 密碼改由 ADMIN_PASSWORD 環境變數設定

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
建喵
2026-05-15 23:02:33 +08:00
parent a318c18214
commit 89a4f891c2
17 changed files with 950 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
public/index.html
View File

@@ -13,54 +13,84 @@
<p class="eyebrow">Word to PDF</p>
<h1>租屋契約 PDF 產生器</h1>
</div>
<span id="connectionStatus" class="status-pill">連線中</span>
<div style="display:flex;gap:10px;align-items:center">
<a href="/admin.html" class="status-pill" style="text-decoration:none">管理員</a>
<span id="connectionStatus" class="status-pill">連線中</span>
</div>
</header>
<section class="workspace" aria-label="租屋契約資料">
<form id="contractForm" class="tool-panel">
<label class="field">
<span>Word 範本</span>
<select id="template" name="template" required></select>
</label>
<div class="left-col">
<form id="contractForm">
<div class="tool-panel">
<label class="field">
<span>Word 範本</span>
<select id="template" name="template" required></select>
</label>
<div class="field-grid">
<label class="field">
<span>每月租金</span>
<input name="monthlyRent" type="number" inputmode="numeric" min="1" step="1" value="8000" required>
</label>
<button id="submitButton" class="primary-button" type="submit">
產生 PDF
</button>
<label class="field">
<span>繳款日期</span>
<input name="paymentDay" type="number" inputmode="numeric" min="1" max="31" step="1" value="18" required>
</label>
<div class="result-inline" aria-label="PDF 結果">
<div>
<p class="eyebrow">PDF</p>
<h2 id="resultTitle">尚未產生</h2>
<p id="message" class="message">請輸入資料後產生 PDF。</p>
</div>
<div class="result-actions">
<button id="downloadButton" class="secondary-button" type="button" disabled>
下載 PDF
</button>
<button id="shareButton" class="secondary-button" type="button" disabled>
分享 PDF
</button>
</div>
</div>
</div>
<label class="field">
<span>保證金</span>
<input name="deposit" type="number" inputmode="numeric" min="1" step="1" value="16000" required>
</label>
<div class="tool-panel fields-panel">
<div class="field-grid">
<label class="field">
<span>每月租金</span>
<input name="monthlyRent" type="number" inputmode="numeric" min="1" step="1" value="8000" required>
</label>
<label class="field">
<span>繳款日期</span>
<input name="paymentDay" type="number" inputmode="numeric" min="1" max="31" step="1" value="18" required>
</label>
<label class="field">
<span>保證金</span>
<input name="deposit" type="number" inputmode="numeric" min="1" step="1" value="16000" required>
</label>
</div>
<div class="field-grid field-grid--2">
<label class="field">
<span>租賃開始日</span>
<input id="leaseStart" name="leaseStart" type="date" required>
</label>
<label class="field">
<span>租賃結束日</span>
<input id="leaseEnd" name="leaseEnd" type="date" required>
</label>
</div>
</div>
</form>
</div>
<div class="right-col">
<div class="preview-panel">
<p class="eyebrow">Word 預覽</p>
<div class="preview-wrap">
<iframe id="previewFrame" src="about:blank" title="Word 範本預覽"></iframe>
<div id="previewLoading" class="preview-loading" hidden>
<div class="preview-spinner"></div>
<span>載入中</span>
</div>
</div>
</div>
<button id="submitButton" class="primary-button" type="submit">
產生 PDF
</button>
</form>
<section class="result-panel" aria-label="PDF 結果">
<div>
<p class="eyebrow">PDF</p>
<h2 id="resultTitle">尚未產生</h2>
<p id="message" class="message">請輸入資料後產生 PDF。</p>
</div>
<div class="result-actions">
<button id="downloadButton" class="secondary-button" type="button" disabled>
下載 PDF
</button>
<button id="shareButton" class="secondary-button" type="button" disabled>
分享 PDF
</button>
</div>
</section>
</div>
</section>
</main>