<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WM Hair AI 智慧詢價</title>
<script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
<style>
body { font-family: sans-serif; padding: 20px; color: #333; }
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
select, input, textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
button { width: 100%; padding: 12px; background: #00b900; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; }
</style>
</head>
<body>
<h2>智慧詢價表單</h2>
<form id="quoteForm">
<input type="hidden" id="userId" name="userId">
<div class="form-group">
<label>手機號碼 (防護驗證)</label>
<input type="tel" id="phone" required placeholder="請輸入您的手機號碼">
</div>
<div class="form-group">
<label>預約項目 (可複選)</label>
<select id="service" multiple size="5" required>
<option value="洗剪">精緻洗剪 (含洗)</option>
<option value="單色全染">單色全染</option>
<option value="溫塑燙/縮毛矯正">溫塑燙/縮毛矯正</option>
<option value="一般冷燙">一般冷燙</option>
<option value="結構式護髮">結構式護髮</option>
</select>
<small>*區塊設計燙染請於下方備註，將由設計師人工報價</small>
</div>
<div class="form-group">
<label>目前髮長</label>
<select id="length">
<option value="S">S (耳上)</option>
<option value="M">M (肩上)</option>
<option value="L">L (胸上)</option>
<option value="XL">XL (胸下特長)</option>
</select>
</div>
<div class="form-group">
<label>特殊髮況/需求備註</label>
<textarea id="note" rows="3" placeholder="例如：有黑染過、想漂髮、想預約特定時段..."></textarea>
</div>
<button type="submit">送出預估報價</button>
</form>
<script>
// 初始化 LIFF
liff.init({ liffId: "您的_ 2009541353-o3jYee92" }).then(() => {
if (!liff.isLoggedIn()) { liff.login(); }
liff.getProfile().then(profile => {
document.getElementById('userId').value = profile.userId;
});
});
// 提交表單至 n8n Webhook
document.getElementById('quoteForm').addEventListener('submit', async (e) => {
e.preventDefault();
const data = {
userId: document.getElementById('userId').value,
phone: document.getElementById('phone').value,
services: Array.from(document.getElementById('service').selectedOptions).map(o => o.value),
length: document.getElementById('length').value,
note: document.getElementById('note').value
};
// 這裡填入您 n8n 的 Webhook URL
await fetch('https://wmquotesys.zeabur.app/webhook/quote-request', {
method: 'POST',
body: JSON.stringify(data),
headers: { 'Content-Type': 'application/json' }
});
liff.closeWindow();
});
</script>
</body>
</html>