<!doctype html>
<html lang="en" class="boot">
<head>
<meta charset="utf-8">
<title>__NAME__</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
<meta name="theme-color" content="#05060f">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="__NAME__">
<link rel="apple-touch-icon" href="./icons/apple-touch-icon.png">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%2305060f'/%3E%3Ccircle cx='11' cy='16' r='4' fill='none' stroke='%2300f0ff' stroke-width='2.5'/%3E%3Ccircle cx='23' cy='16' r='4' fill='none' stroke='%2300f0ff' stroke-width='2.5'/%3E%3Cpath d='M15 16 h2' stroke='%2300f0ff' stroke-width='2.5'/%3E%3C/svg%3E">
<link rel="manifest" href="./manifest.webmanifest">
<link rel="stylesheet" href="./style.css">
</head>
<body class="soc-menu">
<div id="hud">
  <div id="logo">__NAME__</div>
  <div id="spacer"></div>
  <button id="copybtn" title="Copy invite link" data-i18n="hud.invite" data-i18n-attr="title:hud.invite.title">⧉ invite</button>
  <div id="status"><span id="statdot"></span><span id="stattext" data-i18n="hud.offline">offline</span></div>
</div>

<!-- the room: roster + notes. Demo shell — gut it and build your app here. -->
<div id="main" class="hidden">
  <div id="rosterbox">
    <div class="sub" data-i18n="roster.title">here now</div>
    <div id="roster"></div>
  </div>
  <div id="notesbox">
    <div id="notes"><div class="hint" data-i18n="notes.empty">nothing yet — say something</div></div>
    <form id="noteform">
      <input id="noteinput" maxlength="280" placeholder="write a note…" autocomplete="off" data-i18n-attr="placeholder:notes.placeholder">
      <button id="sendbtn" type="submit" data-i18n="notes.send">send</button>
    </form>
  </div>
</div>

<!-- boot splash: shown from first paint until main decides gate vs auto-join -->
<div id="ovSplash" class="overlay">
  <div class="panel">
    <div class="title">__NAME__</div>
    <p id="splashmsg" class="sub"></p>
  </div>
</div>

<!-- join screen: only the unnamed first-timer ever sees it -->
<div id="ovJoin" class="overlay">
  <div class="panel">
    <div class="title">__NAME__</div>
    <div class="sub" data-i18n="join.sub">a serverless p2p room</div>
    <input id="nick" maxlength="24" placeholder="your name" autocomplete="off" autocapitalize="off" spellcheck="false" data-i18n-attr="placeholder:join.nick">
    <button id="joinbtn" class="big" data-i18n="join.go">Join the room</button>
    <div class="hint" data-i18n="join.hint">share the URL — anyone with the link is in the room</div>
  </div>
</div>

<div id="toast"></div>

<script defer src="./assets/main.js"></script>
</body>
</html>