12<html lang="en">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=device-width, initial-scale=1">6<title>nobel: iodine demo</title>7<script src="relay.js"></script>8<script>9 // Recipient: ?to=npub...10 let q = new URLSearchParams(location.search)11</script>12<script src="../neon/neon.js"></script>13<script src="../helium/helium.js"></script>14<script src="../fluorine/fluorine.js"></script>15<script src="../argon/argon.js"></script>16<script src="../hydrogen/hydrogen.js"></script>17<script src="../xenon/xenon.js"></script>18<script src="../radon/radon.js"></script>19<script src="../iodine/iodine.js"></script>20<style>21 :root { --ink:#1d1b16; --paper:#f4efe4; --line:#d8cfbd; --gas:#6d28d9; --muted:#7a7263; }22 * { box-sizing:border-box; }23 body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.5 ui-serif, Georgia, serif; }24 main { max-width:640px; margin:0 auto; padding:40px 20px 80px; }25 h1 { font:600 13px/1 ui-monospace, Menlo, monospace; letter-spacing:.12em; text-transform:uppercase; margin:0 0 4px; }26 h1 b { color:var(--gas); }27 .sub { color:var(--muted); margin:0 0 28px; font-style:italic; }28 .me { font:12px ui-monospace, Menlo, monospace; color:var(--muted); margin-bottom:16px; overflow-wrap:anywhere; }29 .me b { color:var(--ink); }30 form { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }31 input, textarea, button { font:inherit; color:inherit; background:#fffdf8; border:1px solid var(--line); border-radius:6px; padding:8px 10px; }32 input { flex:1 1 100%; font:12px ui-monospace, Menlo, monospace; }33 textarea { flex:1; resize:vertical; min-height:44px; }34 button { cursor:pointer; font:12px ui-monospace, Menlo, monospace; text-transform:uppercase; letter-spacing:.08em; }35 button:hover { border-color:var(--gas); color:var(--gas); }36 ol { list-style:none; padding:0; margin:28px 0 0; border-top:1px solid var(--line); }37 li { padding:14px 0; border-bottom:1px solid var(--line); }38 li header { display:flex; gap:8px; align-items:baseline; font:12px ui-monospace, Menlo, monospace; color:var(--muted); }39 li header b { color:var(--ink); max-width:14ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }40 li p { margin:6px 0; white-space:pre-wrap; overflow-wrap:anywhere; }41 li a { color:var(--gas); }42 .log { font:12px ui-monospace, Menlo, monospace; color:var(--muted); min-height:1.5em; }43</style>44</head>45<body>46<main>47 <h1><b>iodine</b> demo</h1>48 <p class="sub">private messages (NIP-17 gift wraps) with xenon + helium + fluorine + neon + radon.</p>4950 <div class="me">you are <b id="npub">…</b></div>5152 <form id="send" nio-send>53 <input name="to" placeholder="recipient npub" required>54 <textarea name="content" placeholder="a private message" required></textarea>55 <button>Send</button>56 </form>57 <div class="log" id="log"></div>5859 <ol id="inbox" nio-inbox>60 <template>61 <li>62 <header>63 <b nrn-profile="{pubkey}" nrn-field="name">{npub}</b>64 <span>to <span class="to">{#p}</span></span>65 <time nne-ago="{created_at}">{ago}</time>66 </header>67 <p>{content}</p>68 </li>69 </template>70 </ol>71</main>72<script>73 send.to.value = q.get("to") ?? ""74 let status = (evt, text)=>log.textContent = text75 document.addEventListener("nio:sent", (evt)=>status(evt, "sent: " + evt.detail.results.map((r)=>`${r.ok ? "ok" : "failed"} ${r.relay}`).join(", ")))76 document.addEventListener("nio:error", (evt)=>status(evt, String(evt.detail.error)))77 document.addEventListener("nhy:event", (evt)=>{78 let f = evt.detail.fields79 if (f["#p"]) f["#p"] = neon.encode("npub", f["#p"]).slice(0, 16) + "…"80 })81 ;(window.nostr ?? helium.signer).getPublicKey().then((pk)=>npub.textContent = neon.encode("npub", pk))82</script>83</body>84</html>