12<html lang="en">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=device-width, initial-scale=1">6<title>oganesson demo</title>7<script src="relay.js"></script>8<script src="../neon/neon.js"></script>9<script src="../helium/helium.js"></script>10<script src="../argon/argon.js"></script>11<script src="../hydrogen/hydrogen.js"></script>12<script src="../xenon/xenon.js"></script>13<script src="../radon/radon.js"></script>14<script src="../oganesson/oganesson.js"></script>15<style>16 :root { --ink:#1d1b16; --paper:#f4efe4; --line:#d8cfbd; --gas:#6d28d9; --muted:#7a7263; }17 * { box-sizing:border-box; }18 body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.5 ui-serif, Georgia, serif; }19 main { max-width:640px; margin:0 auto; padding:40px 20px 80px; }20 h1 { font:600 13px/1 ui-monospace, Menlo, monospace; letter-spacing:.12em; text-transform:uppercase; margin:0 0 4px; }21 h1 b { color:var(--gas); }22 .sub { color:var(--muted); margin:0 0 28px; font-style:italic; }23 select { font:inherit; text-transform:none; margin-left:8px; }24 h2 { font:12px ui-monospace, Menlo, monospace; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin:24px 0 8px; }25 #here { display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0; min-height:28px; }26 #here li b { font-weight:normal; }27 #here li small { color:var(--muted); }28 #here li { font:12px ui-monospace, Menlo, monospace; border:1px solid var(--line); border-radius:99px; padding:2px 10px; max-width:18ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }29 textarea { width:100%; font:inherit; background:#fffdf8; border:1px solid var(--line); border-radius:6px; padding:8px 10px; min-height:60px; }30 #typing { font:12px ui-monospace, Menlo, monospace; color:var(--muted); min-height:1.5em; }31 #pad { position:relative; height:240px; background:#fffdf8; border:1px solid var(--line); border-radius:6px; overflow:hidden; }32 #pad i { position:absolute; width:10px; height:10px; margin:-5px; border-radius:50%; background:var(--gas); pointer-events:none; transition:left .1s, top .1s; }33</style>34</head>35<body>36<main nog-room="oganesson-demo">37 <h1><b>oganesson</b> demo</h1>38 <p class="sub">presence, typing and cursors that vanish. Open in two browsers.</p>3940 <h2>here now <select id="away"><option>online</option><option>away</option></select></h2>41 <ul id="here" nog-send="presence" nog-show="presence">42 <template><li><b nrn-profile="{pubkey}" nrn-field="name">{npub}</b> <small>{status}</small></li></template>43 </ul>4445 <h2>typing</h2>46 <textarea id="say" nog-send="typing" placeholder="type something (only the fact that you type is sent)"></textarea>47 <div id="typing" nog-show="typing">48 <template><span><b nrn-profile="{pubkey}" nrn-field="name">someone</b> is typing </span></template>49 </div>5051 <h2>cursors</h2>52 <div id="pad" nog-send="cursor" nog-on="pointermove" nog-rate="100" nog-show="cursor" nog-ttl="10">53 <template><i style="left:calc({x} * 100%); top:calc({y} * 100%)"></i></template>54 </div>55</main>56<script>57 // The heartbeat reads nog-status; send it now instead of waiting a minute.58 away.onchange = ()=>{59 here.setAttribute("nog-status", away.value)60 oganesson.send(here, away.value)61 }62</script>63</body>64</html>