全空氣系統建議書｜沃特奇企業有限公司

<!doctype html>
<html lang=”zh-Hant”>
<head>
<meta charset=”utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
<title>沃特奇顧問式銷售建議書產生器</title>
<script src=”https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js”></script>
<style>
:root{–blue:#0f5b7f;–green:#6bb39b;–light:#f5f8fa;–line:#d7e0e5;–text:#1f2933;–muted:#64748b;–warn:#b45309}
body{font-family:”Noto Sans TC”,”Microsoft JhengHei”,Arial,sans-serif;margin:0;color:var(–text);background:#eef3f5;line-height:1.65}
.app{max-width:1180px;margin:auto;padding:24px}
.panel{background:#fff;border:1px solid var(–line);border-radius:16px;padding:22px;margin-bottom:18px;box-shadow:0 3px 12px rgba(15,91,127,.06)}
h1{color:var(–blue);margin:0 0 8px;font-size:30px} h2{color:var(–blue);border-left:6px solid var(–blue);padding-left:10px;margin-top:28px} h3{color:#17465d;margin-bottom:6px}
.muted{color:var(–muted)} .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
label{font-weight:600;font-size:14px} input,select,textarea{box-sizing:border-box;width:100%;padding:10px;border:1px solid #cbd5df;border-radius:10px;font-size:15px;background:white} textarea{min-height:80px}
button{background:var(–blue);color:#fff;border:none;border-radius:10px;padding:11px 18px;font-size:15px;cursor:pointer;margin:6px 6px 6px 0} button.secondary{background:#64748b} button.green{background:#478e75}
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0}.card{background:var(–light);border:1px solid var(–line);border-radius:12px;padding:14px}.score{font-size:28px;font-weight:800;color:var(–blue)}
table{width:100%;border-collapse:collapse;margin:12px 0;background:#fff} th,td{border:1px solid var(–line);padding:10px;vertical-align:top} th{background:#eef7f9;color:#17465d} .tag{display:inline-block;background:#e0f2f1;color:#075d4b;border-radius:999px;padding:3px 10px;margin:2px;font-size:13px}
.proposal{background:#fff;padding:34px;max-width:900px;margin:auto}.cover{text-align:center;padding:100px 20px}.cover h1{font-size:36px;letter-spacing:6px}.cover .brand{color:var(–green);font-size:26px;font-weight:800;margin-bottom:50px}.pagebreak{page-break-before:always}.note{background:#fff7ed;border-left:5px solid #f59e0b;padding:12px;margin:10px 0}
.printbar{position:sticky;top:0;z-index:9;background:#ffffffee;backdrop-filter:blur(6px);padding:8px;border-bottom:1px solid var(–line)}
@media print{body{background:#fff}.app>.panel:not(#proposalPanel),.printbar{display:none}.app{padding:0;max-width:none}.panel{box-shadow:none;border:none;padding:0}.proposal{max-width:none;padding:18mm}.pagebreak{page-break-before:always}button{display:none}}
@media(max-width:800px){.grid,.grid2,.kpi{grid-template-columns:1fr}.proposal{padding:18px}.cover{padding:50px 10px}}
</style>
</head>
<body>
<div class=”app”>
<div class=”panel”>
<h1>沃特奇｜顧問式銷售建議書產生器</h1>
<p class=”muted”>上傳 Google 表單回覆匯出的 Excel / CSV，系統會讀取第一筆客戶資料，計算推薦分數、空間數據、設備規格與預算區間，並產生可列印 / 另存 PDF 的建議書。</p>
<input type=”file” id=”fileInput” accept=”.xlsx,.xls,.csv” />
<button onclick=”loadDemo()” class=”secondary”>載入範例資料</button>
<button onclick=”generateProposal()” class=”green”>生成建議書</button>
<button onclick=”window.print()”>列印 / 另存 PDF</button>
</div>

<div class=”panel”>
<h2>資料校正區</h2>
<p class=”muted”>若 Google 表單是區間題，系統會自動取中間值；也可在此手動修正。</p>
<div class=”grid”>
<div><label>客戶姓名</label><input id=”customerName” value=”尊榮客戶”></div>
<div><label>空間坪數</label><input id=”areaPing” type=”number” step=”0.1″ value=”25″></div>
<div><label>房數</label><input id=”rooms” type=”number” value=”3″></div>
<div><label>廳數</label><input id=”living” type=”number” value=”1″></div>
<div><label>廚房數</label><input id=”kitchen” type=”number” value=”1″></div>
<div><label>常駐人數</label><input id=”people” type=”number” value=”3″></div>
<div><label>標準室內高度 m</label><input id=”heightM” type=”number” step=”0.1″ value=”2.6″></div>
<div><label>提案日期</label><input id=”proposalDate” type=”date”></div>
</div>
<div class=”grid2″ style=”margin-top:12px”>
<div><label>問卷摘要 / 特殊備註</label><textarea id=”notes”></textarea></div>
<div><label>已讀取的客戶回覆</label><textarea id=”rawAnswers” readonly></textarea></div>
</div>
</div>

<div id=”resultPanel” class=”panel” style=”display:none”>
<h2>推薦分數與方案落點</h2>
<div class=”kpi” id=”scoreCards”></div>
<div id=”recommendText”></div>
</div>

const planData = {
DH:{name:’A方案｜旗艦級智慧健康住宅方案’, product:’DH 五合一全熱除濕一體機’, range:’90分以上’, equipment:’設備：NT$250,000′, install:’抑菌管道及安裝：NT$105,000–120,000′, total:’預估總投資：NT$355,000–370,000 未稅’, label:’恆氧 × 恆濕 × 恆潔’},
HP:{name:’B方案｜舒適健康住宅方案’, product:’HP 三合一全熱除濕空氣清淨系統’, range:’75–89分’, equipment:’設備：NT$140,000–170,000′, install:’抑菌管道及安裝：NT$105,000–120,000′, total:’預估總投資：NT$245,000–290,000 未稅’, label:’換氣 × 除濕 × 空氣淨化’},
SLIM:{name:’C方案｜高效新風健康住宅方案’, p