NFC/static/index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>NFC tag writer</title>
<style>
  :root {
    color-scheme: light dark;
    --bg: #f5f6f8; --card: #fff; --fg: #1d2330; --muted: #6b7280; --border: #d9dde3;
    --accent: #2563eb; --ok: #15803d; --err: #b91c1c; --warn: #b45309;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0f1218; --card: #171b23; --fg: #e5e7eb; --muted: #9aa3b2; --border: #2a303c;
      --accent: #3b82f6; --ok: #22c55e; --err: #f87171; --warn: #fbbf24;
    }
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  body {
    margin: 0; padding: 48px 16px; display: flex; justify-content: center;
    font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--bg); color: var(--fg);
  }
  main {
    width: 100%; max-width: 560px; padding: 20px 22px;
    background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  }
  h1 { font-size: 18px; margin: 0 0 14px; }
  .status {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px;
    font-size: 14px; border: 1px solid var(--border); border-radius: 8px;
  }
  .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
  .dot.ok { background: var(--ok); }
  .dot.warn { background: var(--warn); }
  .dot.err { background: var(--err); }
  dl {
    display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px;
    margin: 10px 4px 0; font-size: 13px;
  }
  dt { color: var(--muted); }
  dd { margin: 0; overflow-wrap: anywhere; }
  .mono { font-family: ui-monospace, Consolas, monospace; }
  .note { color: var(--warn); }
  form { display: flex; gap: 8px; margin-top: 18px; }
  input {
    flex: 1; min-width: 0; padding: 9px 11px; font: inherit; color: inherit;
    background: transparent; border: 1px solid var(--border); border-radius: 8px;
  }
  input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
  button {
    padding: 9px 18px; font: inherit; font-weight: 600; color: #fff;
    background: var(--accent); border: 0; border-radius: 8px; cursor: pointer;
  }
  button.secondary { color: var(--fg); background: transparent; border: 1px solid var(--border); font-weight: 500; }
  button:disabled { opacity: .45; cursor: not-allowed; }
  details { margin: 8px 4px 0; font-size: 13px; }
  summary { color: var(--muted); cursor: pointer; }
  pre { max-height: 180px; overflow: auto; margin: 6px 0 0; padding: 8px 10px; font-size: 12px; border: 1px solid var(--border); border-radius: 8px; }
  .hint { margin: 6px 2px 0; font-size: 12px; color: var(--muted); }
  .msg { min-height: 1.4em; margin-top: 12px; font-size: 14px; }
  .msg.ok { color: var(--ok); }
  .msg.err { color: var(--err); }
</style>
</head>
<body>
<main>
  <h1>NFC tag writer</h1>
  <div class="status"><span class="dot" id="dot"></span><span id="status">Connecting…</span></div>
  <dl id="tag" hidden>
    <dt>UID</dt><dd class="mono" id="uid"></dd>
    <dt>Type</dt><dd id="kind"></dd>
    <dt>Memory</dt><dd id="memory"></dd>
    <dt>Content</dt><dd id="content"></dd>
  </dl>
  <details id="raw-box" hidden><summary id="raw-title">Raw memory</summary><pre class="mono" id="raw"></pre></details>
  <form id="form">
    <input id="text" placeholder="https://buildfor.life or any text" autocomplete="off" autofocus>
    <button id="read" type="button" class="secondary" disabled>Read</button>
    <button id="program" type="submit" disabled>Program</button>
  </form>
  <p class="hint">Links (https://, www., tel:, mailto:, geo: …) are written as a link, anything else as plain text. Read puts the tag's content into the field, so you can copy it to another tag.</p>
  <div class="msg" id="msg" role="status"></div>
</main>
<script>
  const $ = id => document.getElementById(id);
  let busy = false, canWrite = false, present = false;

  function setStatus(level, text) {
    $("dot").className = "dot " + level;
    $("status").textContent = text;
  }

  function setMsg(level, text) {
    $("msg").className = "msg " + level;
    $("msg").textContent = text;
  }

  // One line per 4-byte page: page number, hex bytes, printable ASCII.
  function pageDump(raw) {
    const lines = [];
    for (let i = 0; i < raw.length; i += 4) {
      const page = raw.slice(i, i + 4);
      const hex = page.map(b => b.toString(16).toUpperCase().padStart(2, "0")).join(" ");
      const ascii = page.map(b => (b >= 0x20 && b < 0x7f ? String.fromCharCode(b) : ".")).join("");
      lines.push(`${String(i / 4).padStart(3)}  ${hex.padEnd(11)}  ${ascii}`);
    }
    return lines.join("\n");
  }

  function fillText(t) {
    const r = t.records[0];
    return r && (r.kind === "URL" || r.kind === "Text") ? r.value : null;
  }

  function renderTag(t) {
    $("uid").textContent = t.uid;
    $("kind").textContent = t.kind;
    $("memory").textContent = t.capacity != null
      ? `${t.used ?? "?"} of ${t.capacity} bytes used${t.writable ? "" : ", read-only"}`
      : "—";
    const c = $("content");
    c.replaceChildren();
    t.records.forEach((r, i) => {
      if (i) c.append(document.createElement("br"));
      c.append(`${r.kind}: `);
      if (r.kind === "URL" && /^https?:\/\//i.test(r.value)) {
        c.append(Object.assign(document.createElement("a"), { href: r.value, target: "_blank", textContent: r.value }));
      } else {
        c.append(r.value);
      }
    });
    if (!t.records.length && t.formatted && !t.read_failed) c.append("empty");
    if (t.note) {
      if (t.records.length) c.append(document.createElement("br"));
      c.append(Object.assign(document.createElement("span"), { className: "note", textContent: t.note }));
    }
    $("raw-box").hidden = !t.raw.length;
    $("raw-title").textContent = `Raw memory (${t.raw.length / 4} pages)`;
    const dump = pageDump(t.raw);
    if ($("raw").textContent !== dump) $("raw").textContent = dump;
  }

  function render(s) {
    present = s.state === "card";
    $("tag").hidden = !present;
    if (!present) $("raw-box").hidden = true;
    canWrite = false;
    if (s.state === "no_reader" || s.state === "error") {
      setStatus("err", s.message);
    } else if (s.state === "no_card") {
      setStatus("warn", s.reader + " — place a tag on the reader");
    } else {
      const t = s.tag;
      canWrite = t.formatted && t.writable && t.capacity != null && !t.note;
      setStatus(canWrite ? "ok" : "warn", s.reader + " — tag present");
      renderTag(t);
    }
    $("program").disabled = busy || !canWrite;
    $("read").disabled = busy || !present;
  }

  async function refresh() {
    try {
      render(await (await fetch("/api/status")).json());
    } catch {
      setStatus("err", "Cannot reach the local NFC service — is nfc-writer-web running?");
      $("tag").hidden = $("raw-box").hidden = true;
      $("program").disabled = $("read").disabled = true;
    }
  }

  async function poll() {
    if (!busy) await refresh();
    setTimeout(poll, 800);
  }

  // Run one reader job: disable the buttons, show progress on `button`, then refresh the status.
  async function job(button, label, url, body, done) {
    busy = true;
    $("program").disabled = $("read").disabled = true;
    const idle = button.textContent;
    button.textContent = label;
    setMsg("", "");
    try {
      const res = await fetch(url, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });
      const reply = await res.json();
      if (res.ok) done(reply);
      else setMsg("err", reply.error || `Error ${res.status}`);
    } catch (err) {
      setMsg("err", "Request failed: " + err);
    }
    busy = false;
    button.textContent = idle;
    await refresh();
  }

  $("form").addEventListener("submit", e => {
    e.preventDefault();
    if (busy || !canWrite) return;
    job($("program"), "Programming…", "/api/program", { text: $("text").value }, r =>
      setMsg("ok", `✓ Wrote ${r.record.kind}: ${r.record.value} (${r.bytes} of ${r.capacity} bytes, verified)`));
  });

  $("read").addEventListener("click", () => {
    if (busy || !present) return;
    job($("read"), "Reading…", "/api/read", {}, t => {
      renderTag(t);
      const n = t.records.length, fill = fillText(t);
      if (fill !== null) {
        $("text").value = fill;
        setMsg("ok", `✓ Read ${t.uid}: ${n} record${n === 1 ? "" : "s"}. The first one is now in the field: put another tag on and press Program to copy it.`);
      } else if (n) {
        setMsg("ok", `✓ Read ${t.uid}: ${n} record(s), none of them a link or text.`);
      } else if (t.note) {
        setMsg("err", `Read ${t.uid} (${t.kind}): UID only, no NDEF content.`);
      } else {
        setMsg("ok", `✓ Read ${t.uid}: the tag is empty.`);
      }
    });
  });

  poll();
</script>
</body>
</html>