02622a7fd1
web/room/messages.html: a member of a conversation in a page. It joins with a
proof of its own key, keys through the service's log with joule_moq_web_e2ee's
member (any member commits), seals each message before it is signed into its
receipt chain and posted, opens and verifies every message (wai_live_web's
Messages, live-messaging §11), shows threads, reactions, edits and
retractions, and acknowledges what it read.
web/room/call.html: a page's inbox, each invitation checked with its call
before it rings (callCheck); placing a call, ringing, accepting, declining and
cancelling; the call's media through the room page in a frame, which now takes
a grant handed to it (enter(role, { seed, answer })).
wai-live-web: the messaging records, receipts, acknowledgements, invitations
and answers a page signs, and Messages, verified against the corpus in its
tests. joule-moq-web: keyProofHttp, a proof naming no grant.
e2e/messaging.e2e.mjs (run by e2e/run.sh): the messaging scenario and the call
scenario.
Co-Authored-By: Claude Opus 5.5 <[email protected]>
61 lines
3 KiB
HTML
61 lines
3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Room call</title>
|
|
<link rel="icon" href="data:,">
|
|
<style>
|
|
:root { --bg: #f6f7f9; --fg: #15171a; --muted: #5d6470; --panel: #ffffff; --line: #d9dde3; --accent: #1f6f43; --warn: #8a4b00; }
|
|
@media (prefers-color-scheme: dark) { :root { --bg: #111317; --fg: #e8eaee; --muted: #9aa2ae; --panel: #1a1d23; --line: #2c313a; --accent: #6fd39b; --warn: #f0a957; } }
|
|
* { box-sizing: border-box; }
|
|
[hidden] { display: none !important; }
|
|
body { margin: 0; padding: 16px; background: var(--bg); color: var(--fg); font: 14px/1.45 system-ui, sans-serif; }
|
|
header { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 12px; }
|
|
h1 { font-size: 16px; margin: 0; }
|
|
h2 { font-size: 13px; margin: 0 0 6px; color: var(--muted); font-weight: 600; }
|
|
main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
|
|
@media (max-width: 760px) { main { grid-template-columns: minmax(0, 1fr); } }
|
|
section { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px; min-width: 0; }
|
|
#key { font-family: ui-monospace, monospace; font-size: 12px; overflow-wrap: anywhere; }
|
|
textarea { width: 100%; min-height: 4.5em; font: 12px ui-monospace, monospace; }
|
|
.controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
|
|
#status { color: var(--muted); }
|
|
#inbox { list-style: none; margin: 0; padding: 0; }
|
|
#inbox li { padding: 6px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
|
|
#inbox li[data-state="ringing"] { color: var(--accent); font-weight: 600; }
|
|
#inbox li[data-state="missed"] { color: var(--warn); }
|
|
iframe { width: 100%; height: 640px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
|
|
#log { white-space: pre-wrap; font-family: ui-monospace, monospace; font-size: 11px; color: var(--muted); max-height: 200px; overflow: auto; margin: 0; overflow-wrap: anywhere; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header><h1>Room call</h1><span id="status" role="status" aria-live="polite"></span></header>
|
|
<main>
|
|
<section>
|
|
<h2>Your key</h2>
|
|
<p id="key">making a key…</p>
|
|
<h2>Call</h2>
|
|
<label for="invitees">Keys to call, one per line</label>
|
|
<textarea id="invitees" spellcheck="false"></textarea>
|
|
<div class="controls">
|
|
<button id="place" type="button">Call</button>
|
|
<button id="cancel" type="button" hidden>Cancel the call</button>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<h2>Inbox</h2>
|
|
<ul id="inbox" aria-live="polite"></ul>
|
|
</section>
|
|
<section id="media" hidden style="grid-column: 1 / -1">
|
|
<h2>The call</h2>
|
|
<iframe id="room" title="The call's room" allow="camera; microphone; autoplay"></iframe>
|
|
</section>
|
|
<section style="grid-column: 1 / -1">
|
|
<h2>Log</h2>
|
|
<pre id="log"></pre>
|
|
</section>
|
|
</main>
|
|
<script type="module" src="./call.js"></script>
|
|
</body>
|
|
</html>
|