website: demo household and the admin screenshots it produced

2026-10-20 09:57:49 +02:00
parent 4ef795a8a9
commit 2697adfa27
27 changed files with 805 additions and 0 deletions
@@ -0,0 +1,47 @@
+"""usage: contact_sheet.py SHOTS_DIR OUT_HTML — light and dark side by side, images inlined."""
+import base64
+import html
+import sys
+
+SHOTS, OUT = sys.argv[1], sys.argv[2]
+PAGES = [
+    ("overview", "Overview — 24 hours of a six-device household: total and blocked queries, and which device made them."),
+    ("activity", "Activity — recent queries, each with its client, result and route."),
+    ("query-detail", "Query detail — a blocked app-analytics lookup and the provenance that blocked it."),
+    ("clients", "Clients — each device by name and group; the kids' phone runs with safe search and extra lists."),
+    ("diagnostics", "Diagnostics — a resolved upstream episode: the primary DoH resolver was unreachable for about two minutes."),
+]
+
+
+def img(name, scheme):
+    with open(f"{SHOTS}/{name}-{scheme}.png", "rb") as f:
+        data = base64.b64encode(f.read()).decode()
+    return f'<figure><img alt="{name} {scheme}" src="data:image/png;base64,{data}"><figcaption>{scheme}</figcaption></figure>'
+
+
+rows = "\n".join(
+    f'<section><h2>{html.escape(caption)}</h2><div class="pair">{img(name, "light")}{img(name, "dark")}</div></section>'
+    for name, caption in PAGES
+)
+page = f"""<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
+<title>nxdns screenshots</title>
+<style>
+:root {{ --bg: #f6f6f7; --fg: #1d1d22; --muted: #66666e; --line: #d9d9de; }}
+@media (prefers-color-scheme: dark) {{ :root {{ --bg: #141417; --fg: #ececf0; --muted: #9a9aa3; --line: #2c2c33; }} }}
+body {{ margin: 0; padding: 24px 16px; background: var(--bg); color: var(--fg); font: 15px/1.5 system-ui, sans-serif; }}
+h1 {{ font-size: 20px; margin: 0 0 24px; }}
+h2 {{ font-size: 15px; font-weight: 500; margin: 32px 0 12px; }}
+.pair {{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }}
+@media (max-width: 800px) {{ .pair {{ grid-template-columns: 1fr; }} }}
+figure {{ margin: 0; }}
+img {{ width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; display: block; }}
+figcaption {{ color: var(--muted); font-size: 13px; margin-top: 4px; }}
+</style></head>
+<body><h1>nxdns admin — marketing screenshots (1440×900 @2x)</h1>
+{rows}
+</body></html>
+"""
+with open(OUT, "w") as f:
+    f.write(page)
+print(OUT)