engineering/zebra-report
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

zebra-spaces: two-column layout — right=controls (50%), left=timeline (placeholder)

Browse source 
The control panel (identity, space, room, log) moves to a right column
occupying 50% of the page width. Left column is reserved for a timeline
to come; for now it shows a one-line placeholder. Stacks to single
column below 800px so mobile stays usable. Footer spans full width.
This commit is contained in:
Russell Ballestrini 2026-05-31 11:59:11 -04:00
parent a2d43e40c3
commit a038adde7b
No known key found for this signature in database
1 changed files with 35 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

39
web/zebra-spaces.html
View file

@ -14,7 +14,27 @@
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: monospace; background: #fff; color: #000;
padding: 2rem; max-width: 720px; margin: 0 auto;
padding: 2rem; max-width: 1440px; margin: 0 auto;
}
/* two-column page: left = timeline (blank for now, ~50%), right = controls.
* stacks below 800px so the controls stay usable on a phone. */
.page {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: start;
}
.timeline {
border-right: 1px solid #ddd; padding-right: 2rem; min-height: 60vh;
}
.timeline-placeholder {
font-size: 0.8rem; color: #999; padding: 1rem 0; line-height: 1.6;
}
@media (max-width: 800px) {
body { padding: 1rem; }
.page { grid-template-columns: 1fr; gap: 1rem; }
.timeline { border-right: none; border-bottom: 1px solid #ddd;
padding-right: 0; padding-bottom: 1rem; min-height: 0; }
}
h1 {
font-family: 'chunkfiveregular', serif;
@ -105,6 +125,14 @@
</head>
<body>
<div class="page">
<main class="timeline">
<p class="timeline-placeholder">timeline — coming soon</p>
</main>
<aside class="controls">
<h1>zebra spaces</h1>
<p class="sub">encrypted voice rooms &nbsp;·&nbsp; webrtc &nbsp;·&nbsp; rendezvous &nbsp;·&nbsp;
<a href="zebra-audio.html">1:1 call</a> &nbsp;·&nbsp;
@ -196,6 +224,9 @@
<div class="log" id="log"></div>
</section>
</aside>
</div>
<script>
(async () => {
const $ = (id) => document.getElementById(id);
@ -980,10 +1011,10 @@ logLine('', 'ready — pick a handle, type a rendezvous code, enter the space');
})();
</script>
<footer style="max-width:720px;margin:2.2rem auto 0;font-size:0.65rem;color:#999;line-height:1.7;word-break:break-all;font-family:monospace">
<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-05-31</span><br>
md5 <span class="stamp-md5">44e670719acc0c4214b0a3c880c15328</span><br>
sha256 <span class="stamp-sha">909f998b1e659881b4d99f63613d6024879a3a36ba51dc5507c7e4e2d1698199</span><br>
md5 <span class="stamp-md5">fa6e17c1461aba88dae3253450aa0824</span><br>
sha256 <span class="stamp-sha">9a371e4eafa1486ddf3a70b04030757aa14a4c1cf3e5b03ae355e3ca197ad364</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>