engineering/www.unturf.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

zebra-report: wider screen-share layout, trim right-column prose

Browse source 
Mirror source c454164 — full-width body, 360px right column, 92vh
video, four notes cut to ~1/3 their length.
This commit is contained in:
russell@unturf.com 2026-06-01 20:06:12 -04:00
parent 78329ea04d
commit 4ad776b9d5
No known key found for this signature in database
1 changed files with 15 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

40
zebra-report/zebra-spaces.html
View file

@ -14,21 +14,21 @@
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: monospace; background: #fff; color: #000;
padding: 2rem; max-width: 1440px; margin: 0 auto;
padding: 1rem 1.5rem; max-width: none; margin: 0 auto;
}
/* two-column page on desktop: left = timeline (1fr, takes remaining
* space — will host the running event feed once v0.3 lands), right =
* controls (capped at 520px so they never get awkwardly wide on a
* full-screen monitor). Both columns get min-width:0 so they shrink
* without forcing a horizontal scrollbar. */
* space — hosts screen shares + the running event feed), right =
* controls (kept narrow so the screen share gets maximum pixels).
* Both columns get min-width:0 so they shrink without forcing a
* horizontal scrollbar. */
.page {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
gap: 2rem;
grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
gap: 1.25rem;
align-items: start;
}
.timeline {
border-right: 1px solid #ddd; padding-right: 2rem; min-height: 60vh;
border-right: 1px solid #ddd; padding-right: 1.25rem; min-height: 60vh;
min-width: 0; display: flex; flex-direction: column;
}
.controls { min-width: 0; }
@ -66,7 +66,7 @@
display: flex; flex-direction: column;
}
.screen-tile video {
width: 100%; height: auto; max-height: 80vh; display: block; background: #000;
width: 100%; height: auto; max-height: 92vh; display: block; background: #000;
}
.screen-tile .screen-meta {
background: #111; color: #ddd; font-size: 0.7rem; padding: 0.3rem 0.5rem;
@ -227,7 +227,7 @@
<div class="row">
<button id="btn-vault" class="small">backup / restore key</button>
<button id="btn-logout" class="small">log out</button>
<span class="note">your key lives only in this browser; back it up if you want it on another device or after clearing data. log out wipes it and generates a fresh identity.</span>
<span class="note">key lives in this browser only.</span>
</div>
<div id="vault-panel" class="vault-panel hidden">
<p class="note" style="margin-bottom:0.5rem"><strong>backup</strong> — pick a password; you'll get a text blob to save.</p>
@ -267,12 +267,7 @@
<div class="row" id="row-music-mode">
<label class="note"><input type="checkbox" id="music-mode"> music mode — raw mic, no echo/noise cancellation (for playing audio through it)</label>
</div>
<p class="note">
everyone joins as a listener. host (first to enter) can invite listeners to the
mic. co-hosts share mod powers but cannot remove the host. audio is end-to-end
encrypted (DTLS-SRTP); SDP is encrypted with the rendezvous code before reaching
the relay.
</p>
<p class="note">join as listener; host promotes to mic. end-to-end encrypted.</p>
</section>
<section id="sec-invite" class="hidden">
@ -297,11 +292,7 @@
<section id="sec-share" class="hidden">
<h2>share</h2>
<p class="note" style="margin-bottom:0.5rem">
anyone who opens this URL lands in this space (joins as listener).
the rendezvous code is embedded — share only with people you trust to
hear the room. self-contained: works offline, no server-side index.
</p>
<p class="note" style="margin-bottom:0.5rem">share only with people you trust to hear the room.</p>
<div class="row">
<input type="text" id="share-url" readonly>
<button id="btn-copy-share" class="small">copy</button>
@ -321,8 +312,7 @@
<div class="row">
<button id="btn-screen-share" class="invert">share screen</button>
<button id="btn-screen-stop" class="hidden">stop sharing</button>
<span class="note">shares a window or tab; if the picker offers an
"also share tab/system audio" checkbox the audio rides along.</span>
<span class="note">window or tab; tick "share audio" if offered.</span>
</div>
</section>
@ -1599,8 +1589,8 @@ logLine('', 'ready — pick a handle, type a rendezvous code, enter the space');
<footer style="margin:2.2rem auto 0;font-size:0.65rem;color:#999;line-height:1.7;word-break:break-all;font-family:monospace">
<span id="pi-seal" style="color:#777;cursor:default;user-select:none" title="">page integrity</span> &nbsp;·&nbsp; built <span class="stamp-date">2026-06-02</span><br>
md5 <span class="stamp-md5">9f18287a705bb3427c7dd969f4dbd6e9</span><br>
sha256 <span class="stamp-sha">43e630fa94aa51360da0e051ea8381f9255dc80cb8f016a210565c6035663a8c</span><br>
md5 <span class="stamp-md5">051db7e4a0ad45f749f2de691bb1f7c7</span><br>
sha256 <span class="stamp-sha">38861760202e2d6af7bc264bdf5243e2d25fa211af18c9bbd443f8867f9dd7a5</span><br>
<span style="color:#bbb">hashes are of this page with these two fields zeroed — to verify, blank them and re-hash</span><br>
<span style="color:#bbb">one self-contained file — <strong>save a copy</strong> and verify against these hashes; point at your own servers with ?signal= and ?turncred=, or <a href="host-your-own.html" style="color:#999">host your own community</a></span>
</footer>