<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>掃 ISBN → Notion 書庫</title>
<style>
body { font-family: system-ui, -apple-system, "Noto Sans TC", sans-serif; padding: 16px; max-width: 720px; margin: 0 auto; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
select, button, input { font-size: 16px; padding: 10px 12px; }
#result { white-space: pre-wrap; background:#f6f6f6; padding:12px; border-radius: 8px; }
.hint { color:#666; font-size: 14px; }
</style>
</head>
<body>
<h3>掃描 ISBN 匯入 Notion（ISBN + 版本 查重）</h3>
<div class="row">
<label>
版本：
<select id="edition">
<option value="平裝">平裝</option>
<option value="首刷限定版">首刷限定版</option>
</select>
</label>
<label>
ISBN（可貼上）：
<input id="isbn" placeholder="例如 9786263777835" inputmode="numeric" />
</label>
<button id="send">查詢 / 建立</button>
</div>
<p class="hint">
這個最小版先用「輸入/貼上 ISBN」跑流程。之後要加相機掃描，我再給你加上 html5-qrcode 的版本。
</p>
<div id="result">等待輸入 ISBN…</div>
<script>
const $ = (id) => document.getElementById(id);
$("send").addEventListener("click", async () => {
const isbnRaw = $("isbn").value.trim();
const edition = $("edition").value;
if (!isbnRaw) {
$("result").textContent = "請輸入 ISBN";
return;
}
$("result").textContent = "處理中…";
const r = await fetch("/api/scan", {
method: "POST",
headers: { "content-type": "application/json",
"Authorization": "ufhvjhfvof9848jv" },
body: JSON.stringify({ isbn: isbnRaw, edition })
});
const data = await r.json().catch(() => ({}));
if (!r.ok) {
$("result").textContent = "錯誤：\n" + JSON.stringify(data, null, 2);
return;
}
$("result").textContent = JSON.stringify(data, null, 2);
if (data.pageUrl) {
// Android 直接開 Notion 頁
window.open(data.pageUrl, "_blank");
}
});
</script>
</body>
</html>