50 lines
2.5 KiB
Python
50 lines
2.5 KiB
Python
"""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, form=""):
|
||
with open(f"{SHOTS}/{name}-{scheme}{form}.png", "rb") as f:
|
||
data = base64.b64encode(f.read()).decode()
|
||
return f'<figure><img alt="{name} {scheme}{form}" src="data:image/png;base64,{data}"><figcaption>{scheme}{form}</figcaption></figure>'
|
||
|
||
|
||
rows = "\n".join(
|
||
f'<section><h2>{html.escape(caption)}</h2><div class="pair">{img(name, "light")}{img(name, "dark")}</div>'
|
||
f'<div class="pair phone">{img(name, "light", "-phone")}{img(name, "dark", "-phone")}</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; }}
|
||
.phone {{ grid-template-columns: repeat(2, minmax(0, 300px)); margin-top: 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, phone 390×844 @3x)</h1>
|
||
{rows}
|
||
</body></html>
|
||
"""
|
||
with open(OUT, "w") as f:
|
||
f.write(page)
|
||
print(OUT)
|