Added a more user friendly legalese pages

2025-08-22 20:14:45 -04:00
parent 0bf00e3f00
commit fec7535c40
6 changed files with 544 additions and 304 deletions
--- a/client/app.js
+++ b/client/app.js
@@ -3,49 +3,86 @@ import { encryptString, decryptToString, toBlob } from "./crypto.js";
 const els = {};
 function $(id){ return document.getElementById(id); }

-// Bind after DOM is ready to avoid nulls
+// ---- Trusted Types policy & safe HTML setter ----
+const ttPolicy = (() => {
+  try {
+    if (window.trustedTypes) {
+      // Allow only our sanitized HTML chunks (legal pages). Strip scripts & inline handlers.
+      return window.trustedTypes.createPolicy("gc", {
+        createHTML: (s) =>
+          s
+            .replace(/<script[\s\S]*?<\/script>/gi, "")
+            .replace(/\son\w+=/gi, "") // remove inline event handlers
+      });
+    }
+  } catch {}
+  return null;
+})();
+function setHTML(el, html) {
+  if (!el) return;
+  if (ttPolicy) {
+    el.innerHTML = ttPolicy.createHTML(html);
+  } else {
+    // Very defensive fallback if TT creation is blocked: render as plain text.
+    el.textContent = html.replace(/<[^>]*>/g, "");
+  }
+}
+
+// ---- Hash routes map (SPA) ----
+const routes = {
+  "/": "feed",
+  "/privacy": "privacy.html",
+  "/gdpr": "gdpr.html",
+  "/terms": "terms.html"
+};
+
 window.addEventListener("DOMContentLoaded", () => {
  Object.assign(els, {
-    shardUrl: $("shardUrl"),
-    bearer: $("bearer"),
-    passphrase: $("passphrase"),
-    saveConn: $("saveConn"),
-    health: $("health"),
-    visibility: $("visibility"),
-    title: $("title"),
-    body: $("body"),
-    publish: $("publish"),
-    publishStatus: $("publishStatus"),
-    posts: $("posts"),
-    discordStart: $("discordStart"),
-    signIn: $("signIn"),
-    panic: $("panic"),
-    avatar: $("avatar"),
-    fp: $("fp"),
-    flash: $("flash"),
+    shardUrl: $("shardUrl"), bearer: $("bearer"), passphrase: $("passphrase"),
+    saveConn: $("saveConn"), health: $("health"), visibility: $("visibility"),
+    title: $("title"), body: $("body"), publish: $("publish"), publishStatus: $("publishStatus"),
+    posts: $("posts"), discordStart: $("discordStart"), signIn: $("signIn"), panic: $("panic"),
+    avatar: $("avatar"), fp: $("fp"), flash: $("flash"), banner: $("banner"),
+    feed: $("feed"), page: $("page"), pageContent: $("pageContent"),
  });

-  // Wire handlers (with logging so you can see it fires)
+  // Buttons
  on(els.saveConn, "click", onSaveConn);
  on(els.publish, "click", publish);
  on(els.discordStart, "click", discordStart);
  on(els.signIn, "click", deviceKeySignIn);
  on(els.panic, "click", panicWipe);

-  // Boot
+  // Route navigation (hash-based)
+  document.querySelectorAll('a[data-route]').forEach(a=>{
+    a.addEventListener('click', (e)=>{
+      if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return; // allow new tab etc.
+      // hash change will trigger render
+    });
+  });
+  window.addEventListener('hashchange', ()=>renderRoute(currentPath()));
+
  applyConfig();
-  checkHealth();
-  syncIndex();
-  sse();
-  renderAvatar();
+  updateLimitedModeUI();
+  init();
+  renderRoute(currentPath());
  flash("GC client loaded");
 });

-// ---------- small helpers ----------
+// ---------- init ----------
+async function init(){
+  await checkHealth(); await syncIndex(); sse(); await renderAvatar();
+}

-function on(el, ev, fn){ if (el) el.addEventListener(ev, (e)=>{ console.log(`[ui] ${ev}#${el.id}`); fn(e); }, false); }
+// ---------- helpers ----------
+function on(el, ev, fn){ if (el) el.addEventListener(ev, fn, false); }
 function flash(msg, ms=1800){ if(!els.flash) return; els.flash.textContent=msg; els.flash.style.display="block"; setTimeout(()=>els.flash.style.display="none", ms); }
 function norm(u){ return (u||"").replace(/\/+$/,""); }
+function currentPath(){
+  const h = location.hash || "#/";
+  const p = h.replace(/^#/, "");
+  return p || "/";
+}

 function defaultApiBase() {
  try { const qs = new URLSearchParams(window.location.search); const qApi = qs.get("api"); if (qApi) return qApi.replace(/\/+$/,""); } catch {}
@@ -58,8 +95,8 @@ function defaultApiBase() {
  } catch { return window.location.origin.replace(/\/+$/,""); }
 }

-const LS_KEY = "gc_client_config_v4";
-const POSTS_KEY = "gc_posts_index_v4";
+const LS_KEY = "gc_client_config_v6";
+const POSTS_KEY = "gc_posts_index_v6";
 const KEY_PKCS8 = "gc_key_pkcs8";
 const KEY_PUB_RAW = "gc_key_pub_raw";

@@ -73,193 +110,63 @@ function applyConfig(){
  els.bearer.value = cfg.bearer ?? "";
  els.passphrase.value = cfg.passphrase ?? "";
 }
+function isAuthorized(){ return !!cfg.bearer; }

-async function checkHealth(){
-  if (!cfg.url) { els.health.textContent="Set URL"; return; }
-  els.health.textContent="Checking…";
-  try { const r = await fetch(cfg.url + "/healthz"); els.health.textContent = r.ok ? "Connected ✔" : `Error: ${r.status}`; }
-  catch { els.health.textContent = "Not reachable"; }
+function setActiveTab(path){
+  const cur = path in routes ? path : "/";
+  document.querySelectorAll(".tabs a").forEach(a=>{
+    const href = new URL(a.href, location.origin).hash.replace(/^#/, "") || "/";
+    a.classList.toggle("active", href===cur);
+  });
+}
+function updateLimitedModeUI(){
+  const limited = !isAuthorized();
+  if (els.banner) els.banner.hidden = !limited;
+  if (els.visibility){
+    const priv = [...els.visibility.options].find(o => o.value === "private");
+    if (priv) { priv.disabled = limited; if (limited && els.visibility.value === "private") els.visibility.value = "public"; }
+  }
 }

+// ---------- router (hash-based) ----------
+async function renderRoute(path){
+  setActiveTab(path);
+  const target = routes[path] ?? "feed";
+  if (target === "feed"){
+    els.page.hidden = true;
+    els.feed.hidden = false;
+    return;
+  }
+  // Load static page into #pageContent (Trusted Types aware)
+  els.feed.hidden = true;
+  els.page.hidden = false;
+  setHTML(els.pageContent, "Loading…");
+  try{
+    const res = await fetch("./"+target, { cache:"no-store" });
+    const html = await res.text();
+    const m = html.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
+    setHTML(els.pageContent, m ? m[1] : html);
+  }catch{
+    setHTML(els.pageContent, `<p class="muted">Failed to load page.</p>`);
+  }
+}
+
+// ---------- health / posts / SSE ----------
+async function checkHealth(){
+  const base = cfg.url || defaultApiBase();
+  if (!base) { if (els.health) els.health.textContent="Set URL"; return; }
+  els.health.textContent="Checking…";
+  try { const r = await fetch(base + "/healthz"); els.health.textContent = r.ok ? "Connected ✔" : `Error: ${r.status}`; }
+  catch { els.health.textContent = "Not reachable"; }
+}
 function getPosts(){ try { return JSON.parse(localStorage.getItem(POSTS_KEY)) ?? []; } catch { return []; } }
 function setPosts(v){ localStorage.setItem(POSTS_KEY, JSON.stringify(v)); renderPosts(); }

-// ---------- avatar (canvas PNG, onerror-safe) ----------
-
-function b64uEncode(buf){ const bin = Array.from(new Uint8Array(buf)).map(b=>String.fromCharCode(b)).join(""); return btoa(bin).replace(/\+/g,"-").replace(/\//g,"_").replace(/=+$/,""); }
-function b64uDecodeToBytes(s){ s=s.replace(/-/g,"+").replace(/_/g,"/"); while(s.length%4) s+="="; const bin=atob(s); const out=new Uint8Array(bin.length); for(let i=0;i<bin.length;i++) out[i]=bin.charCodeAt(i); return out; }
-function b64urlToJSON(b){ return JSON.parse(new TextDecoder().decode(b64uDecodeToBytes(b))); }
-function parseGC2(tok){ try{ const p=tok.split("."); if(p.length!==3) return {}; const pl=b64urlToJSON(p[1]); return {sub:pl.sub||"", cnf:pl.cnf||""}; }catch{ return {}; } }
-async function sha256Hex(str){ const out = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(str)); return Array.from(new Uint8Array(out)).map(b=>b.toString(16).padStart(2,"0")).join(""); }
-function hexBytes(hex){ const u=new Uint8Array(hex.length/2); for(let i=0;i<u.length;i++) u[i]=parseInt(hex.substr(i*2,2),16); return u; }
-
-function identiconPNG(hex, size=64){
-  const cells=5, cell=Math.floor(size/cells), pad=Math.floor((size-cell*cells)/2);
-  const b=hexBytes(hex); const hue=b[0]/255*360; const bg=`hsl(${hue},35%,16%)`; const fg=`hsl(${(hue+180)%360},70%,60%)`;
-  const bits=[]; for(const x of b) for(let i=0;i<8;i++) bits.push((x>>i)&1);
-  const c=document.createElement("canvas"); c.width=c.height=size; const g=c.getContext("2d");
-  g.fillStyle=bg; g.fillRect(0,0,size,size);
-  let k=0;
-  for(let y=0;y<cells;y++){
-    for(let x=0;x<3;x++){
-      if(bits[k++]===1){
-        const px=pad+x*cell, py=pad+y*cell;
-        g.fillStyle=fg; g.fillRect(px,py,cell-1,cell-1);
-        const mx=pad+(cells-1-x)*cell;
-        if(cells-1-x!==x) g.fillRect(mx,py,cell-1,cell-1);
-      }
-    }
-  }
-  return c.toDataURL("image/png");
-}
-
-async function renderAvatar(){
-  if (!els.avatar) return;
-  let seed=null, label="(pseudonymous)";
-  if (cfg.bearer){ const p=parseGC2(cfg.bearer); seed=p.cnf||p.sub||null; if(p.sub) label=p.sub; }
-  if (!seed){ els.avatar.removeAttribute("src"); if (els.fp) els.fp.textContent="(pseudonymous)"; return; }
-  const hex=await sha256Hex(seed);
-  const url=identiconPNG(hex, 64);
-  els.avatar.onerror = ()=>{ els.avatar.removeAttribute("src"); if (els.fp) els.fp.textContent="(pseudonymous)"; };
-  els.avatar.src=url;
-  if (els.fp) els.fp.textContent=label+" (pseudonymous)";
-}
-
-// ---------- UI handlers ----------
-
-async function onSaveConn(){
-  const c = {
-    url: norm(els.shardUrl.value || defaultApiBase()),
-    bearer: els.bearer.value.trim(),
-    passphrase: els.passphrase.value,
-  };
-  saveConfig(c);
-  flash("Saved");
-  await checkHealth();
-  await syncIndex();
-  sse(true);
-  await renderAvatar();
-}
-
-async function panicWipe(){
-  flash("Wiping local state…");
-  try { if (cfg.url) await fetch(cfg.url + "/v1/session/clear", { method:"POST" }); } catch {}
-  localStorage.clear(); sessionStorage.clear(); caches?.keys?.().then(keys => keys.forEach(k => caches.delete(k)));
-  flash("Cleared — reloading"); setTimeout(()=>location.reload(), 300);
-}
-
-async function discordStart(){
-  if (!cfg.url){ alert("Set shard URL first."); return; }
-  flash("Starting Discord…");
-  const r = await fetch(cfg.url + "/v1/auth/discord/start", { headers: { "X-GC-3P-Assent":"1" }});
-  if (!r.ok){ alert("Discord SSO not available"); return; }
-  const j = await r.json();
-  location.href = j.url;
-}
-
-// ---------- device-key sign-in & PoP ----------
-
-async function getOrCreateKeyPair(){
-  const pkcs8 = sessionStorage.getItem(KEY_PKCS8);
-  const pubRaw = sessionStorage.getItem(KEY_PUB_RAW);
-  if (pkcs8 && pubRaw){
-    try{
-      const priv = await crypto.subtle.importKey("pkcs8", b64uDecodeToBytes(pkcs8), {name:"ECDSA", namedCurve:"P-256"}, true, ["sign"]);
-      const pub = await crypto.subtle.importKey("raw", b64uDecodeToBytes(pubRaw), {name:"ECDSA", namedCurve:"P-256"}, true, ["verify"]);
-      return { priv, pub, pubRawB64u: pubRaw };
-    }catch{}
-  }
-  const kp = await crypto.subtle.generateKey({name:"ECDSA", namedCurve:"P-256"}, true, ["sign","verify"]);
-  const pkcs8New = await crypto.subtle.exportKey("pkcs8", kp.privateKey);
-  const pubRawBytes = await crypto.subtle.exportKey("raw", kp.publicKey);
-  const pkcs8B64 = b64uEncode(pkcs8New);
-  const pubRawB64 = b64uEncode(pubRawBytes);
-  sessionStorage.setItem(KEY_PKCS8, pkcs8B64);
-  sessionStorage.setItem(KEY_PUB_RAW, pubRawB64);
-  return { priv: kp.privateKey, pub: kp.publicKey, pubRawB64u: pubRawB64 };
-}
-
-async function deviceKeySignIn(){
-  if (!cfg.url){ alert("Set shard URL first."); return; }
-  flash("Signing in…");
-  try{
-    const { priv, pubRawB64u } = await getOrCreateKeyPair();
-    const rc = await fetch(cfg.url + "/v1/auth/key/challenge", { method:"POST" });
-    if (!rc.ok) throw new Error("challenge "+rc.status);
-    const cj = await rc.json();
-    const msg = new TextEncoder().encode("key-verify\n"+cj.nonce);
-    const sig = await crypto.subtle.sign({name:"ECDSA", hash:"SHA-256"}, priv, msg); // DER
-    const body = JSON.stringify({ nonce:cj.nonce, alg:"p256", pub:pubRawB64u, sig:b64uEncode(sig) });
-    const rv = await fetch(cfg.url + "/v1/auth/key/verify", { method:"POST", headers:{"Content-Type":"application/json"}, body });
-    if (!rv.ok) throw new Error("verify "+rv.status);
-    const vj = await rv.json();
-    saveConfig({ bearer: vj.bearer, url: cfg.url, passphrase: cfg.passphrase });
-    applyConfig(); await renderAvatar(); await checkHealth(); await syncIndex(); sse(true);
-    flash("Signed in");
-  }catch(e){
-    console.error(e);
-    alert("Sign-in error: "+(e?.message||e));
-  }
-}
-
-async function signPoPHeaders(method, pathOnly, bodyBytes){
-  const pubRaw = sessionStorage.getItem(KEY_PUB_RAW);
-  const pkcs8 = sessionStorage.getItem(KEY_PKCS8);
-  if (!pubRaw || !pkcs8) return {};
-  const priv = await crypto.subtle.importKey("pkcs8", b64uDecodeToBytes(pkcs8), {name:"ECDSA", namedCurve:"P-256"}, false, ["sign"]);
-  const bodyHash = await crypto.subtle.digest("SHA-256", bodyBytes || new Uint8Array());
-  const hex = Array.from(new Uint8Array(bodyHash)).map(b=>b.toString(16).padStart(2,"0")).join("");
-  const ts = Math.floor(Date.now()/1000).toString();
-  const msg = new TextEncoder().encode(method.toUpperCase()+"\n"+pathOnly+"\n"+ts+"\n"+hex);
-  const sig = await crypto.subtle.sign({name:"ECDSA", hash:"SHA-256"}, priv, msg);
-  return { "X-GC-Key":"p256:"+pubRaw, "X-GC-TS":ts, "X-GC-Proof":b64uEncode(sig) };
-}
-
-async function fetchWithPoP(url, opts){
-  const u = new URL(url); const path = u.pathname; const method = (opts?.method||"GET").toUpperCase();
-  const bodyBuf = opts?.body instanceof Blob ? new Uint8Array(await opts.body.arrayBuffer())
-                 : (opts?.body instanceof ArrayBuffer ? new Uint8Array(opts.body) : new Uint8Array());
-  const pop = await signPoPHeaders(method, path, bodyBuf);
-  const headers = new Headers(opts?.headers||{});
-  if (cfg.bearer) headers.set("Authorization", "Bearer "+cfg.bearer);
-  for (const [k,v] of Object.entries(pop)) headers.set(k,v);
-  return fetch(url, { ...(opts||{}), headers });
-}
-
-// ---------- posts ----------
-
-function msg(t, err=false){ els.publishStatus.textContent=t; els.publishStatus.style.color = err ? "#ff6b6b" : "#8b949e"; }
-
-async function publish(){
-  if (!cfg.url) return msg("Set shard URL first.", true);
-  const title = els.title.value.trim(); const body = els.body.value; const vis = els.visibility.value;
-  try{
-    let blob, enc=false;
-    if (vis==="private"){
-      if (!els.passphrase.value) return msg("Set a passphrase for private posts.", true);
-      const payload = await encryptString(JSON.stringify({title,body}), els.passphrase.value);
-      blob = toBlob(payload); enc=true;
-    } else {
-      blob = toBlob(JSON.stringify({title,body}));
-    }
-    const headers = {"Content-Type":"application/octet-stream"};
-    if (enc) headers["X-GC-Private"]="1";
-    const tz = Intl.DateTimeFormat().resolvedOptions().timeZone; if (tz) headers["X-GC-TZ"]=tz;
-
-    const r = await fetchWithPoP((cfg.url||defaultApiBase()) + "/v1/object", { method:"PUT", headers, body: blob });
-    if (!r.ok) throw new Error(await r.text());
-    const j = await r.json();
-    const posts = getPosts();
-    posts.unshift({ hash:j.hash, title: title || "(untitled)", bytes:j.bytes, ts:j.stored_at, enc, author:j.author||null, tz:j.creator_tz||null });
-    setPosts(posts);
-    els.body.value=""; msg(`Published ${enc?"private":"public"} post. Hash: ${j.hash}`);
-  }catch(e){ msg("Publish failed: "+(e?.message||e), true); }
-}
-
 async function syncIndex(){
-  if (!cfg.url) return;
+  const base = cfg.url || defaultApiBase();
+  if (!base) return;
  try{
-    const r = await fetch(cfg.url + "/v1/index");
+    const r = await fetch(base + "/v1/index");
    if (!r.ok) throw new Error("index fetch failed");
    const entries = await r.json();
    setPosts(entries.map(e=>({hash:e.hash, title:"(title unknown — fetch)", bytes:e.bytes, ts:e.stored_at, enc:e.private, author:e.author||null, tz:e.creator_tz||null})));
@@ -268,10 +175,11 @@ async function syncIndex(){

 let sseCtrl;
 function sse(reset=false){
-  if (!cfg.url) return;
+  const base = cfg.url || defaultApiBase();
+  if (!base) return;
  if (sseCtrl){ sseCtrl.abort(); sseCtrl=undefined; if(!reset) return; }
  sseCtrl = new AbortController();
-  fetch(cfg.url + "/v1/index/stream", { signal:sseCtrl.signal }).then(async resp=>{
+  fetch(base + "/v1/index/stream", { signal:sseCtrl.signal }).then(async resp=>{
    if (!resp.ok) return;
    const reader = resp.body.getReader(); const dec = new TextDecoder(); let buf="";
    while(true){ const {value,done}=await reader.read(); if(done) break;
@@ -297,36 +205,142 @@ function sse(reset=false){
  }).catch(()=>{});
 }

-async function viewPost(p, pre){
-  pre.textContent="Loading…";
+// ---------- avatar (canvas PNG) ----------
+function b64uEncode(buf){ const bin = Array.from(new Uint8Array(buf)).map(b=>String.fromCharCode(b)).join(""); return btoa(bin).replace(/\+/g,"-").replace(/\//g,"_").replace(/=+$/,""); }
+function b64uDecodeToBytes(s){ s=s.replace(/-/g,"+").replace(/_/g,"/"); while(s.length%4) s+="="; const bin=atob(s); const out=new Uint8Array(bin.length); for(let i=0;i<bin.length;i++) out[i]=bin.charCodeAt(i); return out; }
+function b64urlToJSON(b){ return JSON.parse(new TextDecoder().decode(b64uDecodeToBytes(b))); }
+function parseGC2(tok){ try{ const p=tok.split("."); if(p.length!==3) return {}; const pl=b64urlToJSON(p[1]); return {sub:pl.sub||"", cnf:pl.cnf||""}; }catch{ return {}; } }
+async function sha256Hex(str){ const out = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(str)); return Array.from(new Uint8Array(out)).map(b=>b.toString(16).padStart(2,"0")).join(""); }
+function hexBytes(hex){ const u=new Uint8Array(hex.length/2); for(let i=0;i<u.length;i++) u[i]=parseInt(hex.substr(i*2,2),16); return u; }
+function identiconPNG(hex, size=64){
+  const cells=5, cell=Math.floor(size/cells), pad=Math.floor((size-cell*cells)/2);
+  const b=hexBytes(hex); const hue=b[0]/255*360; const bg=`hsl(${hue},35%,16%)`; const fg=`hsl(${(hue+180)%360},70%,60%)`;
+  const bits=[]; for(const x of b) for(let i=0;i<8;i++) bits.push((x>>i)&1);
+  const c=document.createElement("canvas"); c.width=c.height=size; const g=c.getContext("2d");
+  g.fillStyle=bg; g.fillRect(0,0,size,size);
+  let k=0;
+  for(let y=0;y<cells;y++){
+    for(let x=0;x<3;x++){
+      if(bits[k++]===1){
+        const px=pad+x*cell, py=pad+y*cell;
+        g.fillStyle=fg; g.fillRect(px,py,cell-1,cell-1);
+        const mx=pad+(cells-1-x)*cell;
+        if(cells-1-x!==x) g.fillRect(mx,py,cell-1,cell-1);
+      }
+    }
+  }
+  return c.toDataURL("image/png");
+}
+async function renderAvatar(){
+  if (!els.avatar) return;
+  let seed=null, label="(pseudonymous)";
+  if (cfg.bearer){ const p=parseGC2(cfg.bearer); seed=p.cnf||p.sub||null; if(p.sub) label=p.sub; }
+  if (!seed){ els.avatar.removeAttribute("src"); if (els.fp) els.fp.textContent="(pseudonymous)"; return; }
+  const hex=await sha256Hex(seed);
+  els.avatar.onerror = ()=>{ els.avatar.removeAttribute("src"); if (els.fp) els.fp.textContent="(pseudonymous)"; };
+  els.avatar.src=identiconPNG(hex, 64);
+  if (els.fp) els.fp.textContent=label+" (pseudonymous)";
+}
+
+// ---------- security / PoP ----------
+async function onSaveConn(){
+  const c = { url: norm(els.shardUrl.value || defaultApiBase()), bearer: els.bearer.value.trim(), passphrase: els.passphrase.value };
+  saveConfig(c); flash("Saved");
+  updateLimitedModeUI(); await checkHealth(); await syncIndex(); sse(true); await renderAvatar();
+}
+async function panicWipe(){
+  flash("Wiping local state…");
+  try { const base = cfg.url || defaultApiBase(); if (base) await fetch(base + "/v1/session/clear", { method:"POST" }); } catch {}
+  localStorage.clear(); sessionStorage.clear(); caches?.keys?.().then(keys => keys.forEach(k => caches.delete(k)));
+  flash("Cleared — reloading"); setTimeout(()=>location.reload(), 300);
+}
+async function discordStart(){
+  const base = cfg.url || defaultApiBase(); if (!base){ alert("Set shard URL first."); return; }
+  const r = await fetch(base + "/v1/auth/discord/start", { headers: { "X-GC-3P-Assent":"1" }});
+  if (!r.ok){ alert("Discord SSO not available"); return; }
+  const j = await r.json(); location.href = j.url;
+}
+async function getOrCreateKeyPair(){
+  const pkcs8 = sessionStorage.getItem(KEY_PKCS8); const pubRaw = sessionStorage.getItem(KEY_PUB_RAW);
+  if (pkcs8 && pubRaw){
+    try{
+      const priv = await crypto.subtle.importKey("pkcs8", b64uDecodeToBytes(pkcs8), {name:"ECDSA", namedCurve:"P-256"}, true, ["sign"]);
+      const pub = await crypto.subtle.importKey("raw", b64uDecodeToBytes(pubRaw), {name:"ECDSA", namedCurve:"P-256"}, true, ["verify"]);
+      return { priv, pub, pubRawB64u: pubRaw };
+    }catch{}
+  }
+  const kp = await crypto.subtle.generateKey({name:"ECDSA", namedCurve:"P-256"}, true, ["sign","verify"]);
+  const pkcs8New = await crypto.subtle.exportKey("pkcs8", kp.privateKey);
+  const pubRawBytes = await crypto.subtle.exportKey("raw", kp.publicKey);
+  const pkcs8B64 = b64uEncode(pkcs8New); const pubRawB64 = b64uEncode(pubRawBytes);
+  sessionStorage.setItem(KEY_PKCS8, pkcs8B64); sessionStorage.setItem(KEY_PUB_RAW, pubRawB64);
+  return { priv: kp.privateKey, pub: kp.publicKey, pubRawB64u: pubRawB64 };
+}
+async function deviceKeySignIn(){
+  const base = cfg.url || defaultApiBase(); if (!base){ alert("Set shard URL first."); return; }
+  flash("Signing in…");
  try{
-    const r = await fetch((cfg.url||defaultApiBase()) + "/v1/object/"+p.hash);
-    if (!r.ok) throw new Error("fetch failed "+r.status);
-    const buf = new Uint8Array(await r.arrayBuffer());
-    let text;
-    if (p.enc){
-      if (!els.passphrase.value) throw new Error("passphrase required");
-      text = await decryptToString(buf, els.passphrase.value);
-    } else { text = new TextDecoder().decode(buf); }
-    try{ const j=JSON.parse(text); pre.textContent=(j.title?`# ${j.title}\n\n`:"")+(j.body??text); }
-    catch{ pre.textContent=text; }
-  }catch(e){ pre.textContent="Error: "+(e?.message||e); }
+    const { priv, pubRawB64u } = await getOrCreateKeyPair();
+    const rc = await fetch(base + "/v1/auth/key/challenge", { method:"POST" });
+    if (!rc.ok) throw new Error("challenge "+rc.status);
+    const cj = await rc.json();
+    const msg = new TextEncoder().encode("key-verify\n"+cj.nonce);
+    const sig = await crypto.subtle.sign({name:"ECDSA", hash:"SHA-256"}, priv, msg);
+    const body = JSON.stringify({ nonce:cj.nonce, alg:"p256", pub:pubRawB64u, sig:b64uEncode(sig) });
+    const rv = await fetch(base + "/v1/auth/key/verify", { method:"POST", headers:{"Content-Type":"application/json"}, body });
+    if (!rv.ok) throw new Error("verify "+rv.status);
+    const vj = await rv.json();
+    saveConfig({ bearer: vj.bearer }); applyConfig(); updateLimitedModeUI();
+    await renderAvatar(); await checkHealth(); await syncIndex(); sse(true); flash("Signed in");
+  }catch(e){ console.error(e); alert("Sign-in error: "+(e?.message||e)); }
+}
+async function signPoPHeaders(method, pathOnly, bodyBytes){
+  const pubRaw = sessionStorage.getItem(KEY_PUB_RAW); const pkcs8 = sessionStorage.getItem(KEY_PKCS8);
+  if (!pubRaw || !pkcs8) return {};
+  const priv = await crypto.subtle.importKey("pkcs8", b64uDecodeToBytes(pkcs8), {name:"ECDSA", namedCurve:"P-256"}, false, ["sign"]);
+  const bodyHash = await crypto.subtle.digest("SHA-256", bodyBytes || new Uint8Array());
+  const hex = Array.from(new Uint8Array(bodyHash)).map(b=>b.toString(16).padStart(2,"0")).join("");
+  const ts = Math.floor(Date.now()/1000).toString();
+  const msg = new TextEncoder().encode(method.toUpperCase()+"\n"+pathOnly+"\n"+ts+"\n"+hex);
+  const sig = await crypto.subtle.sign({name:"ECDSA", hash:"SHA-256"}, priv, msg);
+  return { "X-GC-Key":"p256:"+pubRaw, "X-GC-TS":ts, "X-GC-Proof":b64uEncode(sig) };
+}
+async function fetchWithPoP(url, opts){
+  const u = new URL(url); const path = u.pathname; const method = (opts?.method||"GET").toUpperCase();
+  const bodyBuf = opts?.body instanceof Blob ? new Uint8Array(await opts.body.arrayBuffer())
+                 : (opts?.body instanceof ArrayBuffer ? new Uint8Array(opts.body) : new Uint8Array());
+  const pop = await signPoPHeaders(method, path, bodyBuf);
+  const headers = new Headers(opts?.headers||{});
+  if (cfg.bearer) headers.set("Authorization", "Bearer "+cfg.bearer);
+  for (const [k,v] of Object.entries(pop)) headers.set(k,v);
+  return fetch(url, { ...(opts||{}), headers });
 }

-async function saveBlob(p){
-  const r = await fetch((cfg.url||defaultApiBase()) + "/v1/object/"+p.hash);
-  if (!r.ok) return alert("download failed "+r.status);
-  const b = await r.blob(); const a=document.createElement("a"); a.href=URL.createObjectURL(b);
-  a.download=p.hash+(p.enc?".gcenc":".json"); a.click(); URL.revokeObjectURL(a.href);
+// ---------- compose / posts ----------
+function msg(t, err=false){ els.publishStatus.textContent=t; els.publishStatus.style.color = err ? "#ff6b6b" : "#8b949e"; }
+async function publish(){
+  const base = cfg.url || defaultApiBase(); if (!base) return msg("Set shard URL first.", true);
+  const title = els.title.value.trim(); const body = els.body.value; const vis = els.visibility.value;
+  if (!isAuthorized() && vis === "private"){ msg("Private posts require authorizing this device. Publishing as public.", true); els.visibility.value = "public"; }
+  try{
+    let blob, enc=false;
+    if (els.visibility.value==="private"){
+      if (!els.passphrase.value) return msg("Set a passphrase for private posts.", true);
+      const payload = await encryptString(JSON.stringify({title,body}), els.passphrase.value);
+      blob = toBlob(payload); enc=true;
+    } else { blob = toBlob(JSON.stringify({title,body})); }
+    const headers = {"Content-Type":"application/octet-stream"};
+    if (enc) headers["X-GC-Private"]="1";
+    const tz = Intl.DateTimeFormat().resolvedOptions().timeZone; if (tz) headers["X-GC-TZ"]=tz;
+    const r = await fetchWithPoP(base + "/v1/object", { method:"PUT", headers, body: blob });
+    if (!r.ok) throw new Error(await r.text());
+    const j = await r.json();
+    const posts = getPosts();
+    posts.unshift({ hash:j.hash, title: title || "(untitled)", bytes:j.bytes, ts:j.stored_at, enc, author:j.author||null, tz:j.creator_tz||null });
+    setPosts(posts);
+    els.body.value=""; msg(`Published ${enc?"private":"public"} post. Hash: ${j.hash}`);
+  }catch(e){ msg("Publish failed: "+(e?.message||e), true); }
 }
-
-async function delServer(p){
-  if (!confirm("Delete blob from server by hash?")) return;
-  const r = await fetchWithPoP((cfg.url||defaultApiBase()) + "/v1/object/"+p.hash, { method:"DELETE" });
-  if (!r.ok) return alert("delete failed "+r.status);
-  setPosts(getPosts().filter(x=>x.hash!==p.hash));
-}
-
 function renderPosts(){
  const posts = getPosts(); if (!els.posts) return; els.posts.innerHTML="";
  for (const p of posts){
@@ -350,3 +364,29 @@ function renderPosts(){
    els.posts.appendChild(div);
  }
 }
+async function viewPost(p, pre){
+  const base = cfg.url || defaultApiBase(); pre.textContent="Loading…";
+  try{
+    const r = await fetch(base + "/v1/object/"+p.hash);
+    if (!r.ok) throw new Error("fetch failed "+r.status);
+    const buf = new Uint8Array(await r.arrayBuffer());
+    let text;
+    if (p.enc){ if (!els.passphrase.value) throw new Error("passphrase required"); text = await decryptToString(buf, els.passphrase.value); }
+    else { text = new TextDecoder().decode(buf); }
+    try{ const j=JSON.parse(text); pre.textContent=(j.title?`# ${j.title}\n\n`:"")+(j.body??text); } catch{ pre.textContent=text; }
+  }catch(e){ pre.textContent="Error: "+(e?.message||e); }
+}
+async function saveBlob(p){
+  const base = cfg.url || defaultApiBase();
+  const r = await fetch(base + "/v1/object/"+p.hash);
+  if (!r.ok) return alert("download failed "+r.status);
+  const b = await r.blob(); const a=document.createElement("a"); a.href=URL.createObjectURL(b);
+  a.download=p.hash+(p.enc?".gcenc":".json"); a.click(); URL.revokeObjectURL(a.href);
+}
+async function delServer(p){
+  const base = cfg.url || defaultApiBase();
+  if (!confirm("Delete blob from server by hash?")) return;
+  const r = await fetchWithPoP(base + "/v1/object/"+p.hash, { method:"DELETE" });
+  if (!r.ok) return alert("delete failed "+r.status);
+  setPosts(getPosts().filter(x=>x.hash!==p.hash));
+}
--- a/client/gdpr.html
+++ b/client/gdpr.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8"/>
+  <title>GDPR Notice — GreenCoast</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1"/>
+  <link rel="stylesheet" href="./styles.css"/>
+</head>
+<body class="container">
+  <h1>GDPR Notice</h1>
+  <p class="muted">Effective: 2025-08-22</p>
+
+  <h2>Controller</h2>
+  <p>The operator of this shard acts as data controller. Contact: <em>dsapelli@yahoo.com</em>.</p>
+
+  <h2>Lawful bases</h2>
+  <ul>
+    <li><strong>Public posts:</strong> performance of service you request.</li>
+    <li><strong>Private posts:</strong> performance of service; encryption keys never leave your device.</li>
+    <li><strong>SSO (optional):</strong> your consent with the chosen provider.</li>
+  </ul>
+
+  <h2>Minimization & storage</h2>
+  <p>No user profile, no behavioral analytics. Objects are stored by content hash; server logs are minimized and scrubbed of IPs/UA where feasible.</p>
+
+  <h2>International transfers</h2>
+  <p>Content may be hosted where you deploy the shard. Using third-party SSO may transfer data to those providers’ regions.</p>
+
+  <h2>Data subject rights</h2>
+  <p>Access/erasure/rectification: We do not keep a server-side identity. Uploaders can delete objects by hash if they still possess authorization. Encrypted content cannot be decrypted server-side.</p>
+
+  <h2>Complaints</h2>
+  <p>You may lodge a complaint with your local supervisory authority.</p>
+
+  <p class="muted small">This document is informational and not legal advice.</p>
+  <p><a href="./index.html">Back</a></p>
+</body>
+</html>
--- a/client/index.html
+++ b/client/index.html
@@ -5,7 +5,7 @@
  <title>GreenCoast — Client</title>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <link rel="stylesheet" href="./styles.css"/>
-  <!-- Optional: set your API base explicitly -->
+  <!-- Optional: pin API base -->
  <!-- <meta name="gc-api-base" content="https://api-gc.fullmooncyberworks.com"> -->
  <style>
    #flash{position:fixed;right:12px;bottom:12px;background:#0b1222;border:1px solid #1f2937;color:#e5e7eb;
@@ -15,6 +15,12 @@
 <body>
  <header class="topbar">
    <div class="brand">GreenCoast</div>
+    <nav class="tabs">
+      <a data-route href="#/">Feed</a>
+      <a data-route href="#/privacy">Privacy</a>
+      <a data-route href="#/gdpr">GDPR</a>
+      <a data-route href="#/terms">Terms</a>
+    </nav>
    <div class="actions">
      <button id="signIn" type="button">Sign in (device key)</button>
      <button id="discordStart" type="button">Discord</button>
@@ -22,66 +28,119 @@
    </div>
  </header>

-  <div class="container">
-    <section class="card">
-      <h2>Connection</h2>
-      <div class="row">
-        <label>Shard URL</label>
-        <input id="shardUrl" placeholder="https://api-gc.fullmooncyberworks.com"/>
-      </div>
-      <div class="row">
-        <label>Bearer</label>
-        <input id="bearer" placeholder="gc2 token"/>
-      </div>
-      <div class="row">
-        <label>Passphrase</label>
-        <input id="passphrase" type="password" placeholder="••••••••"/>
-      </div>
-      <button id="saveConn" type="button">Save</button>
-      <div id="health" class="muted"></div>
-      <p class="muted">
-        We do not store PII or logs. Third-party SSO is optional and not endorsed for security.
-      </p>
-    </section>
-
-    <section class="card">
-      <h2>Your profile</h2>
-      <div class="profile">
-        <img id="avatar" alt="avatar" width="64" height="64"/>
-        <div class="profile-meta">
-          <div><code id="fp">(pseudonymous)</code></div>
-          <div class="muted">Avatar is derived locally from your device key.</div>
-        </div>
-      </div>
-    </section>
-
-    <section class="card">
-      <h2>Compose</h2>
-      <div class="row">
-        <label>Visibility</label>
-        <select id="visibility">
-          <option value="public">Public (plaintext)</option>
-          <option value="private">Private (E2EE via passphrase)</option>
-        </select>
-      </div>
-      <div class="row">
-        <label>Title</label>
-        <input id="title" placeholder="Optional title"/>
-      </div>
-      <div class="row">
-        <label>Body</label>
-        <textarea id="body" rows="6" placeholder="Write your post..."></textarea>
-      </div>
-      <button id="publish" type="button">Publish</button>
-      <div id="publishStatus" class="muted"></div>
-    </section>
-
-    <section class="card">
-      <h2>Posts (live index)</h2>
-      <div id="posts"></div>
-    </section>
+  <div id="banner" class="banner" hidden>
+    You are in <strong>anonymous (limited) mode</strong>. Only public text posts are available until you authorize this device.
  </div>

+  <!-- Three-column shell -->
+  <div class="shell">
+    <aside id="left" class="col">
+      <section class="card">
+        <h3>Profile</h3>
+        <div class="profile">
+          <img id="avatar" alt="avatar" width="56" height="56"/>
+          <div class="profile-meta">
+            <div><code id="fp">(pseudonymous)</code></div>
+            <div class="muted small">Avatar is derived locally.</div>
+          </div>
+        </div>
+      </section>
+
+      <section class="card">
+        <h3>Quick links</h3>
+        <ul class="links">
+          <li><a data-route href="#/">Feed</a></li>
+          <li><a data-route href="#/privacy">Privacy Policy</a></li>
+          <li><a data-route href="#/gdpr">GDPR</a></li>
+          <li><a data-route href="#/terms">Terms</a></li>
+        </ul>
+      </section>
+    </aside>
+
+    <main id="feed" class="col">
+      <section class="card">
+        <h2>Connection</h2>
+        <div class="row">
+          <label>Shard URL</label>
+          <input id="shardUrl" placeholder="https://api-gc.fullmooncyberworks.com"/>
+        </div>
+
+        <details id="adv" class="advanced">
+          <summary>Advanced (security)</summary>
+          <div class="row">
+            <label>Bearer (hidden)</label>
+            <input id="bearer" type="password" placeholder="gc2 token" autocomplete="off"/>
+          </div>
+          <div class="row">
+            <label>Passphrase</label>
+            <input id="passphrase" type="password" placeholder="••••••••" autocomplete="off"/>
+          </div>
+          <p class="muted small">
+            Security fields are local to your browser. We do not store PII or logs.
+            Third-party SSO is optional and not endorsed for security.
+          </p>
+        </details>
+
+        <button id="saveConn" type="button">Save</button>
+        <div id="health" class="muted"></div>
+      </section>
+
+      <section class="card">
+        <h2>Compose</h2>
+        <div class="row">
+          <label>Visibility</label>
+          <select id="visibility">
+            <option value="public">Public (plaintext)</option>
+            <option value="private">Private (E2EE via passphrase)</option>
+          </select>
+        </div>
+        <div class="row">
+          <label>Title</label>
+          <input id="title" placeholder="Optional title"/>
+        </div>
+        <div class="row">
+          <label>Body</label>
+          <textarea id="body" rows="6" placeholder="Write your post..."></textarea>
+        </div>
+        <button id="publish" type="button">Publish</button>
+        <div id="publishStatus" class="muted"></div>
+      </section>
+
+      <section class="card">
+        <h2>Posts (live index)</h2>
+        <div id="posts"></div>
+      </section>
+    </main>
+
+    <!-- Legal/other pages render here (SPA routing) -->
+    <main id="page" class="col" hidden>
+      <section class="card">
+        <div id="pageContent">Loading…</div>
+      </section>
+    </main>
+
+    <aside id="right" class="col">
+      <section class="card">
+        <h3>About</h3>
+        <p class="muted small">Zero-trust, E2EE optional, no analytics, no PII.</p>
+      </section>
+      <section class="card">
+        <h3>Legal</h3>
+        <ul class="links">
+          <li><a data-route href="#/privacy">Privacy</a></li>
+          <li><a data-route href="#/gdpr">GDPR</a></li>
+          <li><a data-route href="#/terms">Terms</a></li>
+        </ul>
+      </section>
+    </aside>
+  </div>
+
+  <footer class="footer">
+    <a data-route href="#/privacy">Privacy</a> ·
+    <a data-route href="#/gdpr">GDPR</a> ·
+    <a data-route href="#/terms">Terms</a>
+  </footer>
+
  <div id="flash"></div>

  <script type="module" src="./app.js"></script>
--- a/client/privacy.html
+++ b/client/privacy.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8"/>
+  <title>Privacy Policy — GreenCoast</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1"/>
+  <link rel="stylesheet" href="./styles.css"/>
+</head>
+<body class="container">
+  <h1>Privacy Policy</h1>
+  <p class="muted">Effective: 2025-08-22</p>
+
+  <h2>What we are</h2>
+  <p>GreenCoast is a zero-trust, end-to-end encrypted (E2EE) social platform. By default, we do not collect analytics, do not store personal data, and do not maintain server logs that identify users.</p>
+
+  <h2>Data we process</h2>
+  <ul>
+    <li><strong>Public posts:</strong> Stored as plaintext objects keyed by content hash. No account profile is required.</li>
+    <li><strong>Private posts:</strong> Encrypted <em>client-side</em> with a passphrase only you know. The server sees ciphertext only.</li>
+    <li><strong>Authorization:</strong> Device-key and/or third-party SSO (if you choose) issue a short-lived bearer. We do not persist profile data.</li>
+  </ul>
+
+  <h2>Third-party SSO</h2>
+  <p>If you use Discord/Google/etc., those providers may process your data under their own terms. We cannot vouch for their security.</p>
+
+  <h2>Cookies & local storage</h2>
+  <p>We use browser storage on your device to keep connection settings and, if you choose, session tokens. You can wipe them with “Panic wipe”.</p>
+
+  <h2>Security</h2>
+  <p>E2EE for private content, proof-of-possession on mutations, rate-limits, CSP/COOP/COEP, and optional hardware keys via WebAuthn (if enabled on your shard).</p>
+
+  <h2>Your rights</h2>
+  <p>Because we do not maintain user identities or server-side profiles, requests to access/correct/erase personal data typically do not apply. For encrypted content, we cannot decrypt it for you.</p>
+
+  <h2>Contact</h2>
+  <p>Email: <em>dsapelli@yahoo.com</em></p>
+
+  <p class="muted small">This page describes our reference shard. Self-hosted deployments may differ.</p>
+  <p><a href="./index.html">Back</a></p>
+</body>
+</html>
--- a/client/styles.css
+++ b/client/styles.css
@@ -1,19 +1,48 @@
-:root{--bg:#0f172a;--surface:#111827;--muted:#8b949e;--text:#e5e7eb;--accent:#22c55e;--card:#0b1222;--border:#1f2937}
+:root{
+  --bg:#0f172a;--surface:#111827;--muted:#8b949e;--text:#e5e7eb;--accent:#22c55e;
+  --card:#0b1222;--border:#1f2937;--tab:#0b1222;--tab-active:#1f2937
+}
 *{box-sizing:border-box}
-html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Ubuntu,"Helvetica Neue","Noto Sans",Arial,"Apple Color Emoji","Segoe UI Emoji"}
-.topbar{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--border);background:#0b1222;position:sticky;top:0;z-index:10}
-.topbar .brand{font-weight:700}
-.topbar .actions button{margin-left:.5rem}
-.container{max-width:980px;margin:1rem auto;padding:0 1rem}
+html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
+  font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Ubuntu,"Helvetica Neue","Noto Sans",Arial}
+a{color:#93c5fd;text-decoration:none}
+a:hover{text-decoration:underline}
+
+.topbar{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem;
+  border-bottom:1px solid var(--border);background:#0b1222;position:sticky;top:0;z-index:10}
+.brand{font-weight:700}
+.actions button{margin-left:.5rem}
+button{background:#134e4a;border:1px solid #0f766e;color:white;border-radius:.6rem;padding:.45rem .7rem;cursor:pointer}
+button:hover{filter:brightness(1.05)}
+
+.tabs{display:flex;gap:.25rem;margin:0 .75rem}
+.tabs a{padding:.35rem .6rem;border:1px solid var(--border);border-radius:.5rem;background:var(--tab)}
+.tabs a.active{background:var(--tab-active);border-color:#334155}
+
+.banner{background:#1f2937;color:#e5e7eb;border-bottom:1px solid var(--border);padding:.6rem 1rem}
+
+.shell{max-width:1100px;margin:1rem auto;display:grid;grid-template-columns:280px 1fr 300px;gap:1rem;padding:0 1rem}
+.col{min-width:0}
 .card{background:var(--card);border:1px solid var(--border);border-radius:.75rem;padding:1rem;margin-bottom:1rem}
 .row{display:flex;gap:.75rem;align-items:center;margin:.5rem 0}
 .row label{min-width:140px;color:#cbd5e1}
-.row input, .row select, textarea{flex:1;background:#0f172a;border:1px solid var(--border);border-radius:.5rem;padding:.6rem .7rem;color:var(--text)}
-button{background:#134e4a;border:1px solid #0f766e;color:white;border-radius:.6rem;padding:.5rem .75rem;cursor:pointer}
-button:hover{filter:brightness(1.05)}
-.muted{color:var(--muted)}
+.row input,.row select,textarea{flex:1;background:#0f172a;border:1px solid var(--border);border-radius:.5rem;padding:.55rem .65rem;color:var(--text)}
+.muted{color:var(--muted)} .small{font-size:.9rem}
 .profile{display:flex;align-items:center;gap:1rem}
 #avatar{border-radius:50%;border:1px solid var(--border);background:#0f172a;image-rendering:pixelated}
+
 .post{border:1px dashed var(--border);border-radius:.5rem;padding:.6rem .7rem;margin-bottom:.6rem}
 .post .meta{color:var(--muted);font-size:.9rem;margin-bottom:.25rem}
 .badge{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.05rem .5rem;font-size:.75rem;margin-left:.5rem}
+
+.advanced summary{cursor:pointer;color:#cbd5e1;margin:.25rem 0}
+.links{list-style:none;padding:0;margin:0}
+.links li{margin:.25rem 0}
+
+.footer{max-width:1100px;margin:1rem auto 2rem auto;padding:0 1rem;color:#94a3b8}
+
+@media (max-width: 980px){
+  .shell{grid-template-columns:1fr;gap:.75rem}
+  #left,#right{order:2}
+  #feed,#page{order:1}
+}
--- a/client/terms.html
+++ b/client/terms.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8"/>
+  <title>Terms of Service — GreenCoast</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1"/>
+  <link rel="stylesheet" href="./styles.css"/>
+</head>
+<body class="container">
+  <h1>Terms of Service</h1>
+  <p class="muted">Effective: 2025-08-22</p>
+
+  <h2>Service</h2>
+  <p>GreenCoast is provided “as-is”, with no warranties. You may self-host under the Unlicense. This reference shard has no paid plans.</p>
+
+  <h2>User content</h2>
+  <p>You are responsible for content you publish. Do not post illegal content or abuse others. We reserve the right to remove content that violates applicable law.</p>
+
+  <h2>Accounts & authorization</h2>
+  <p>Device-key and optional SSO are used to prove control of a device. We do not maintain user profiles.</p>
+
+  <h2>Third-party services</h2>
+  <p>If you connect SSO providers, your use of those services is governed by their terms and privacy policies.</p>
+
+  <h2>Limitation of liability</h2>
+  <p>To the fullest extent permitted by law, the operator is not liable for indirect or consequential damages.</p>
+
+  <h2>Changes</h2>
+  <p>We may update these Terms by posting a new version on this page.</p>
+
+  <p><a href="./index.html">Back</a></p>
+</body>
+</html>