docs(nr-z4nw): mockup

docs/ui/nr-z4nw-room-code.html

@@ -0,0 +1,30 @@
+<!doctype html><html><head><meta charset=utf-8><meta name=viewport content='width=device-width'><title>Play together — one short room code</title><style>
+:root{--bg:#0c1420;--b2:#0e1826;--b3:#1d2c42;--txt:#dbe6f3;--muted:#7d8fa6;--steel:#4a76a8;--hi:#7fb0e3;--ice:#b9dcff;--line:rgba(130,170,215,.14);--ls:rgba(130,170,215,.32);--ok:#5fd3b0;--warn:#e9b65f;--err:#f2718a;--mono:ui-monospace,Menlo,monospace}
+*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--txt);font:14px/1.45 system-ui;padding:24px}
+h1{font-size:19px;margin:0 0 6px}.note{background:#13203a;border-left:3px solid var(--hi);padding:10px 14px;border-radius:6px;max-width:980px;margin:8px 0 18px}
+.lbl{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin:22px 0 8px}
+.row{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
+.top{display:flex;align-items:center;gap:10px;padding:8px 14px;border:1px solid var(--line);border-radius:10px 10px 0 0;background:var(--b2)}
+.logo{font-weight:800;letter-spacing:.12em;color:var(--ice)}.sp{flex:1}
+.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ls);background:var(--b3);color:var(--txt);padding:6px 12px;border-radius:9px;font:inherit;font-size:13px;cursor:default}
+.btn.p{background:var(--hi);color:#04111f;border-color:var(--hi);font-weight:600}.btn.g{background:transparent;border-color:transparent;color:var(--txt)}
+.btn.dis{opacity:.4}.btn.hl{box-shadow:0 0 0 2px var(--ice),0 0 18px rgba(80,150,230,.5)}
+.scr{width:100%;max-width:640px;border:1px solid var(--line);border-top:0;background:#000;height:210px;display:flex;align-items:center;justify-content:center;color:#345;font-family:var(--mono)}
+.bar{display:flex;gap:4px;flex-wrap:wrap;padding:6px;border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px;background:var(--b2);max-width:640px}
+.frame{max-width:640px;width:100%}
+.dlg{width:440px;max-width:100%;background:var(--b2);border:1px solid var(--ls);border-radius:16px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
+.dlg h2{margin:0 0 4px;font-size:17px}.dh{display:flex;align-items:center;gap:8px;margin-bottom:10px}.x{margin-left:auto;color:var(--muted)}
+.card{border:1px solid var(--ls);border-radius:12px;padding:12px 14px;margin:8px 0;background:var(--b3)}.card b{display:block;margin-bottom:2px}.card small{color:var(--muted)}
+.code{font-family:var(--mono);font-size:11.5px;word-break:break-all;background:#08101b;border:1px solid var(--line);border-radius:8px;padding:10px;color:var(--ice);max-height:92px;overflow:hidden;position:relative}
+.ta{font-family:var(--mono);font-size:11.5px;background:#08101b;border:1px dashed var(--ls);border-radius:8px;padding:10px;color:var(--muted);height:70px}
+.steps{display:flex;gap:6px;margin:4px 0 14px;font-size:12px;color:var(--muted)}.steps span{flex:1;border-top:3px solid var(--b3);padding-top:4px}.steps .on{border-color:var(--hi);color:var(--txt)}.steps .done{border-color:var(--ok)}
+.act{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:12px}
+.muted{color:var(--muted)}.ok{color:var(--ok)}.warn{color:var(--warn)}.err{color:var(--err)}
+.pill{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--ls);border-radius:99px;padding:3px 10px;font-size:12px}
+.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block}
+.alert{border-radius:10px;padding:10px 12px;margin-top:10px;font-size:13px}.alert.w{background:rgba(233,182,95,.12);border:1px solid rgba(233,182,95,.4)}.alert.e{background:rgba(242,113,138,.12);border:1px solid rgba(242,113,138,.4)}
+.hero{border:1px solid var(--line);border-top:0;background:linear-gradient(#16233a,#0e1729);padding:28px;border-radius:0 0 10px 10px;max-width:640px}
+.hero h2{margin:0 0 6px;font-size:22px}
+.bars{display:inline-flex;gap:2px;align-items:flex-end;height:14px}.bars i{width:4px;background:var(--ok);display:block}.bars i.off{background:var(--b3)}
+.ann{color:var(--warn);font-size:12px;margin-top:4px}
+.sec{font-size:16px;margin:0 0 4px}.big{font-family:var(--mono);font-size:40px;letter-spacing:.14em;color:var(--ice);text-align:center;background:#08101b;border:1px solid var(--line);border-radius:12px;padding:14px 8px;margin:6px 0}.inp{font-family:var(--mono);font-size:24px;letter-spacing:.14em;background:#08101b;border:1px solid var(--ls);border-radius:10px;padding:10px 12px;color:var(--ice)}.inp.ph{color:#3d4f66}.box{display:inline-flex;width:40px;height:50px;align-items:center;justify-content:center;font-family:var(--mono);font-size:24px;background:#08101b;border:1px solid var(--ls);border-radius:8px;color:var(--ice)}.box.f{border-color:var(--hi);box-shadow:0 0 0 2px rgba(127,176,227,.35)}.hy{display:inline-flex;align-items:center;color:var(--muted);padding:0 4px;font-size:22px}</style></head><body><h1>Play together — one short room code</h1><p class=note>The agreed design. The host is shown a six-character room code to read out (or copy); the joiner types it and the two connect. A code lasts 15 minutes and is renewed by itself. Every state is shown with its words exactly as they ship. The Play together button, the first window (Host this game / Join a game), the Connected view, the response-time words and the top-bar chip stay exactly as they are today. </p><div class=lbl>Host — waiting · after Copy invite message · someone joined · code ran out · joiner left · service out of reach · no direct path · service busy</div><div class=row><div class=dlg ><div class=dh><h2>Host this game</h2><span class=x>✕</span></div><div class=steps><span class='on'>1. Share the code</span><span class=''>2. Connected</span></div><p style='margin:0'>Tell the other player this code:</p><div class=big>K7Q-M4X</div><p class=muted style='margin:4px 0 0'>⟳ Waiting for the other player to type it…</p><div class=act><span class='btn g'>Cancel</span><span class='btn '>Copy invite message</span><span class='btn '>Copy code</span></div></div><div class=dlg ><div class=dh><h2>Host this game</h2><span class=x>✕</span></div><div class=steps><span class='on'>1. Share the code</span><span class=''>2. Connected</span></div><p style='margin:0'>Tell the other player this code:</p><div class=big>K7Q-M4X</div><p class=muted style='margin:4px 0 0'>⟳ Waiting for the other player to type it…</p><div class=act><span class='btn g'>Cancel</span><span class='btn '>✓ Invite copied</span><span class='btn '>Copy code</span></div><p class=muted style='font-size:12px;margin:8px 0 0'>Copied: “Play Super Mario Bros. 3 with me in NESER! Open https://neser.rmstdope.eu, press Play together, then Join a game, and type the code K7Q-M4X”</p></div><div class=dlg ><div class=dh><h2>Host this game</h2><span class=x>✕</span></div><div class=steps><span class='on'>1. Share the code</span><span class=''>2. Connected</span></div><p style='margin:0'>Tell the other player this code:</p><div class=big>K7Q-M4X</div><p class=muted style='margin:4px 0 0'>⟳ The other player is here — connecting…</p><div class=act><span class='btn g'>Cancel</span></div></div><div class=dlg ><div class=dh><h2>Host this game</h2><span class=x>✕</span></div><div class=steps><span class='on'>1. Share the code</span><span class=''>2. Connected</span></div><p style='margin:0'>Tell the other player this code:</p><div class=big>T9W-2HB</div><div class='alert w'>The old code ran out, so here is a new one.</div><p class=muted style='margin:4px 0 0'>⟳ Waiting for the other player to type it…</p><div class=act><span class='btn g'>Cancel</span><span class='btn '>Copy invite message</span><span class='btn '>Copy code</span></div></div><div class=dlg ><div class=dh><h2>Host this game</h2><span class=x>✕</span></div><div class=steps><span class='on'>1. Share the code</span><span class=''>2. Connected</span></div><p style='margin:0'>Tell the other player this code:</p><div class=big>T9W-2HB</div><div class='alert w'>The other player left before you were connected. Here is a new code.</div><p class=muted style='margin:4px 0 0'>⟳ Waiting for the other player to type it…</p><div class=act><span class='btn g'>Cancel</span><span class='btn '>Copy invite message</span><span class='btn '>Copy code</span></div></div><div class=dlg ><div class=dh><h2>Host this game</h2><span class=x>✕</span></div><div class=steps><span class='on'>1. Share the code</span><span class=''>2. Connected</span></div><div class='alert e'><b>Network play can't start right now.</b> NESER couldn't reach its meeting service on the internet. Check that this computer is online, then try again.</div><div class=act><span class='btn g'>Close</span><span class='btn p'>Try again</span></div></div><div class=dlg ><div class=dh><h2>Host this game</h2><span class=x>✕</span></div><div class=steps><span class='on'>1. Share the code</span><span class=''>2. Connected</span></div><div class='alert e'><b>Couldn't reach the other player.</b> Network play needs both computers on the same network (or the same VPN). Check that, then start again.</div><div class=act><span class='btn g'>Close</span><span class='btn p'>Start again</span></div></div><div class=dlg ><div class=dh><h2>Host this game</h2><span class=x>✕</span></div><div class=steps><span class='on'>1. Share the code</span><span class=''>2. Connected</span></div><div class='alert e'><b>Too many games are being started right now.</b> Wait a minute, then try again.</div><div class=act><span class='btn g'>Close</span><span class='btn p'>Try again</span></div></div></div><div class=lbl>Host — when the other player has a different NESER, the host is not told: their window keeps waiting, and the joiner tells them</div><div class=row></div><div class=lbl>Joiner — empty · connecting · wrong code · full · different NESER · service out of reach · too many wrong codes · service busy · no direct path · host left</div><div class=row><div class=dlg ><div class=dh><h2>Join a game</h2><span class=x>✕</span></div><div class=steps><span class='on'>1. Type the host's code</span><span class=''>2. Connected</span></div><p style='margin:0 0 8px'>Type the code the host tells you.</p><div class='inp ph'>ABC-DEF</div><p class=muted style='font-size:12px;margin:6px 0 0'>Codes never use I, O, 0 or 1.</p><div class=act><span class='btn g'>Cancel</span><span class='btn p dis'>Join</span></div></div><div class=dlg ><div class=dh><h2>Join a game</h2><span class=x>✕</span></div><div class=steps><span class='on'>1. Type the host's code</span><span class=''>2. Connected</span></div><p style='margin:0 0 8px'>Type the code the host tells you.</p><div class='inp'>K7Q-M4X</div><p class=muted style='font-size:12px;margin:6px 0 0'>Codes never use I, O, 0 or 1.</p><p class=muted style='margin:10px 0 0'>⟳ Connecting…</p><div class=act><span class='btn g'>Cancel</span></div></div><div class=dlg ><div class=dh><h2>Join a game</h2><span class=x>✕</span></div><div class=steps><span class='on'>1. Type the host's code</span><span class=''>2. Connected</span></div><p style='margin:0 0 8px'>Type the code the host tells you.</p><div class='inp'>K7Q-M4Y</div><p class=muted style='font-size:12px;margin:6px 0 0'>Codes never use I, O, 0 or 1.</p><div class='alert e'><b>There's no game with that code.</b> Check the code with the host and try again.</div><div class=act><span class='btn g'>Cancel</span><span class='btn p'>Join</span></div></div><div class=dlg ><div class=dh><h2>Join a game</h2><span class=x>✕</span></div><div class=steps><span class='on'>1. Type the host's code</span><span class=''>2. Connected</span></div><p style='margin:0 0 8px'>Type the code the host tells you.</p><div class='inp'>K7Q-M4X</div><p class=muted style='font-size:12px;margin:6px 0 0'>Codes never use I, O, 0 or 1.</p><div class='alert e'><b>That game already has two players.</b> Ask the host to start a new game and tell you the new code.</div><div class=act><span class='btn g'>Cancel</span><span class='btn p'>Join</span></div></div><div class=dlg ><div class=dh><h2>Join a game</h2><span class=x>✕</span></div><div class=steps><span class='on'>1. Type the host's code</span><span class=''>2. Connected</span></div><p style='margin:0 0 8px'>Type the code the host tells you.</p><div class='inp'>K7Q-M4X</div><p class=muted style='font-size:12px;margin:6px 0 0'>Codes never use I, O, 0 or 1.</p><div class='alert e'><b>Different versions of NESER.</b> You have NESER 1.3.0 (4f2a9c1), the host has 1.3.0 (b81e07d). You both need the same version to play together — reload the page on both computers.</div><div class=act><span class='btn g'>Close</span></div></div><div class=dlg ><div class=dh><h2>Join a game</h2><span class=x>✕</span></div><div class=steps><span class='on'>1. Type the host's code</span><span class=''>2. Connected</span></div><p style='margin:0 0 8px'>Type the code the host tells you.</p><div class='inp'>K7Q-M4X</div><p class=muted style='font-size:12px;margin:6px 0 0'>Codes never use I, O, 0 or 1.</p><div class='alert e'><b>Network play can't start right now.</b> NESER couldn't reach its meeting service on the internet. Check that this computer is online, then try again.</div><div class=act><span class='btn g'>Cancel</span><span class='btn p'>Join</span></div></div><div class=dlg ><div class=dh><h2>Join a game</h2><span class=x>✕</span></div><div class=steps><span class='on'>1. Type the host's code</span><span class=''>2. Connected</span></div><p style='margin:0 0 8px'>Type the code the host tells you.</p><div class='inp'>K7Q-M4Y</div><p class=muted style='font-size:12px;margin:6px 0 0'>Codes never use I, O, 0 or 1.</p><div class='alert e'><b>Too many wrong codes.</b> Check the code with the host, then press Start again.</div><div class=act><span class='btn g'>Close</span><span class='btn p'>Start again</span></div></div><div class=dlg ><div class=dh><h2>Join a game</h2><span class=x>✕</span></div><div class=steps><span class='on'>1. Type the host's code</span><span class=''>2. Connected</span></div><p style='margin:0 0 8px'>Type the code the host tells you.</p><div class='inp'>K7Q-M4X</div><p class=muted style='font-size:12px;margin:6px 0 0'>Codes never use I, O, 0 or 1.</p><div class='alert e'><b>Too many games are being started right now.</b> Wait a minute, then try again.</div><div class=act><span class='btn g'>Cancel</span><span class='btn p'>Join</span></div></div><div class=dlg ><div class=dh><h2>Join a game</h2><span class=x>✕</span></div><div class=steps><span class='on'>1. Type the host's code</span><span class=''>2. Connected</span></div><p style='margin:0 0 8px'>Type the code the host tells you.</p><div class='inp'>K7Q-M4X</div><p class=muted style='font-size:12px;margin:6px 0 0'>Codes never use I, O, 0 or 1.</p><div class='alert e'><b>Couldn't reach the other player.</b> Network play needs both computers on the same network (or the same VPN). Check that, then start again.</div><div class=act><span class='btn g'>Close</span><span class='btn p'>Start again</span></div></div><div class=dlg ><div class=dh><h2>Join a game</h2><span class=x>✕</span></div><div class=steps><span class='on'>1. Type the host's code</span><span class=''>2. Connected</span></div><p style='margin:0 0 8px'>Type the code the host tells you.</p><div class='inp'>K7Q-M4X</div><p class=muted style='font-size:12px;margin:6px 0 0'>Codes never use I, O, 0 or 1.</p><div class='alert e'><b>The host closed this game before you were connected.</b> Ask them to start a new one and tell you the new code.</div><div class=act><span class='btn g'>Cancel</span><span class='btn p'>Join</span></div></div></div><div class=lbl>Connected — unchanged from today</div><div class=row><div class=dlg ><div class=dh><h2>Join a game</h2><span class=x>✕</span></div><div class=steps><span class='done'>1. Type the host's code</span><span class='on'>2. Connected</span></div><p style='margin:0'><span class=dot></span> <b>Connected</b> to the host.</p><p style='margin:6px 0'><span class=pill>Response time 18 ms · <span class=ok>Great</span></span></p><p class=muted>The host will send the game next.</p><div class=act><span class='btn g'>Disconnect</span></div></div></div><div class=lbl>Phone-sized window — the same window as a sheet from the bottom; the phone shows its capital-letters keyboard</div><div class=row><div style='width:360px;border:1px solid var(--ls);border-radius:22px;overflow:hidden;background:var(--bg)'><div class=top style='border-radius:0'><span class=logo>NESER</span><span class=sp></span><span class='btn g'>👥</span><span class='btn g'>⚙</span></div><div style='height:120px;background:#000'></div><div class=dlg style='width:100%;border-radius:16px 16px 0 0;box-shadow:none'><div class=dh><h2>Host this game</h2><span class=x>✕</span></div><div class=steps><span class='on'>1. Share the code</span><span class=''>2. Connected</span></div><p style='margin:0'>Tell the other player this code:</p><div class=big>K7Q-M4X</div><p class=muted style='margin:4px 0 0'>⟳ Waiting for the other player to type it…</p><div class=act><span class='btn g'>Cancel</span><span class='btn '>Copy invite message</span><span class='btn '>Copy code</span></div></div></div><div style='width:360px;border:1px solid var(--ls);border-radius:22px;overflow:hidden;background:var(--bg)'><div class=top style='border-radius:0'><span class=logo>NESER</span><span class=sp></span><span class='btn g'>👥</span><span class='btn g'>⚙</span></div><div style='height:120px;background:#000'></div><div class=dlg style='width:100%;border-radius:16px 16px 0 0;box-shadow:none' ><div class=dh><h2>Join a game</h2><span class=x>✕</span></div><div class=steps><span class='on'>1. Type the host's code</span><span class=''>2. Connected</span></div><p style='margin:0 0 8px'>Type the code the host tells you.</p><div class='inp'>K7Q-M4X</div><p class=muted style='font-size:12px;margin:6px 0 0'>Codes never use I, O, 0 or 1.</p><div class=act><span class='btn g'>Cancel</span><span class='btn p'>Join</span></div></div><div style='background:#2a3445;height:150px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px'>Q W E R T Y … (capitals)</div></div></div></body></html>