cardinale/screenshot-rename
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0728ae6592680431c285be1a15a6ecd7cd59fc2b
screenshot-rename/assets/session.html
T
Anthony Cardinale 0728ae6592 docs: enhance README and homepage with two screenshot plates 
- Add assets/before-after.png — Plate i: five real renames laid out as a
  typeset table; mulberry highlight on the description segment; visual
  callouts for the U+202F gap and the user-keyword preservation case
- Add assets/session.png — Plate ii: editorial paper frame around an
  ink-dark Claude Code session card showing user prompt, claude
  orchestration, parallel Haiku fan-out across ten batches, and the run
  receipt
- Keep the source HTMLs (assets/{before-after,session}.html) so the
  plates can be regenerated via headless Brave at 1600x1100
- README.md rewritten: centered hero with embedded plate i, dedicated
  "A session, end to end" section embedding plate ii, new highlights
  (multi-prefix, idempotent), new "What the parser accepts" table,
  gotchas extended to 13, real-world impact promoted to a 3-row table
- docs/index.html surgically extended (existing editorial CSS preserved):
  new .plate and .additions components, nav gets what's-new and session
  links, new section 04 "What's new" with three additions cards plus a
  run-iii receipt, original receipt relabeled run-ii, gotchas list
  extended with #11-13, new section 07 "The session" embedding plate ii,
  install renumbered to 08
- Image refs in docs/index.html use absolute gitea raw URLs so they
  resolve when served from gitea pages or viewed locally

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-04 11:14:12 -04:00

341 lines
12 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>screenshot-rename · session</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500;1,9..144,700&family=JetBrains+Mono:wght@400;500;600&display=block">
<style>
:root {
--paper: #f7f3ed;
--paper-2: #efe7d8;
--paper-3: #e8dfcd;
--ink: #1c1916;
--ink-2: #221e1a;
--ink-soft: #3c3530;
--ink-mute: #8d8478;
--accent: #7a1f3d;
--accent-soft: rgba(122,31,61,.10);
--accent-deep: #5d1730;
--rule: #d8cebf;
--rule-soft: #e6dfd2;
--term-paper: #ece4d2;
--term-mute: #a8a094;
--serif: "Fraunces", Georgia, serif;
--mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
width: 1600px;
height: 1100px;
background: var(--paper);
color: var(--ink);
font-family: var(--serif);
font-feature-settings: "ss01", "ss02", "kern";
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background-image:
radial-gradient(1100px 380px at 92% -10%, rgba(122,31,61,.06), transparent 60%),
radial-gradient(900px 320px at 0% 22%, rgba(0,0,0,.03), transparent 70%);
position: relative;
overflow: hidden;
}
body::before {
content: "";
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
pointer-events: none;
mix-blend-mode: multiply;
z-index: 0;
}
.frame {
position: relative;
z-index: 1;
padding: 70px 88px 64px;
height: 100%;
}
/* ───── Header ────────────────────────────────────── */
.head {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: end;
gap: 36px;
padding-bottom: 28px;
border-bottom: 1px solid var(--rule);
}
.eyebrow {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
display: flex; align-items: center; gap: 14px;
}
.eyebrow .bar { display: inline-block; width: 44px; height: 1px; background: var(--accent); }
.title {
font-family: var(--serif);
font-style: italic;
font-weight: 400;
font-variation-settings: "opsz" 144;
font-size: 76px;
line-height: 0.96;
letter-spacing: -0.022em;
margin: 0;
}
.title .ampersand { color: var(--accent); padding: 0 4px; font-weight: 300; }
.runtag {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--ink-mute);
text-transform: uppercase;
text-align: right;
}
.runtag .v { color: var(--ink); display: block; font-size: 13px; margin-top: 4px; letter-spacing: 0.06em; }
.sheet {
position: absolute;
top: 70px; right: 88px;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.22em;
color: var(--ink-mute);
text-transform: uppercase;
}
.sheet b { color: var(--accent); }
/* ───── Terminal card ─────────────────────────────── */
.terminal {
margin-top: 38px;
background: var(--ink);
color: var(--term-paper);
font-family: var(--mono);
font-size: 14px;
line-height: 1.7;
padding: 30px 38px 28px;
border-left: 3px solid var(--accent);
position: relative;
display: grid;
grid-template-columns: 80px 1fr;
gap: 22px 24px;
align-items: baseline;
}
.terminal::after {
content: "claude code · session 0a3f";
position: absolute;
top: 10px; right: 18px;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-mute);
}
.tag {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
text-align: right;
padding-top: 3px;
}
.tag.you { color: var(--accent); }
.tag.bash { color: #c8d3a3; }
.tag.cc { color: #d8a4b3; }
.tag.fan { color: var(--accent); }
.line { font-size: 15px; }
.line.you { color: var(--term-paper); font-style: italic; font-family: var(--serif); font-size: 18px; line-height: 1.45; font-weight: 400; }
.line.cc { color: var(--term-paper); font-size: 15px; line-height: 1.55; }
.line.cc em { color: #d8a4b3; font-style: normal; font-weight: 500; }
.line.bash { color: var(--term-mute); font-size: 13px; line-height: 1.65; }
.line.bash b { color: var(--term-paper); font-weight: 500; }
.line.bash .num { color: #e9c98c; }
.line.bash .com { color: #6f685d; font-style: italic; }
/* ───── Agent fan ─────────────────────────────────── */
.fan-wrap { padding: 4px 0 6px; }
.agents {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.agent {
background: var(--ink-2);
border: 1px solid #2c2722;
padding: 14px 16px 13px;
display: grid;
grid-template-columns: 22px 1fr auto;
gap: 12px;
align-items: center;
position: relative;
}
.agent .dot {
width: 10px; height: 10px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 3px rgba(122,31,61,.18);
justify-self: center;
}
.agent .id {
font-size: 13px;
color: var(--term-paper);
letter-spacing: 0.04em;
}
.agent .id b { color: #d8a4b3; font-weight: 500; }
.agent .ct {
font-size: 11px;
color: var(--term-mute);
letter-spacing: 0.06em;
}
.agent .ct .ok { color: var(--accent); font-weight: 600; padding-left: 2px; }
.agent .haiku-tag {
position: absolute;
top: -8px; left: 12px;
background: var(--ink);
font-size: 9px;
letter-spacing: 0.2em;
color: var(--accent);
padding: 0 6px;
text-transform: uppercase;
}
/* ───── Receipt strip beneath ─────────────────────── */
.receipt {
margin-top: 38px;
background: var(--paper-2);
border: 1px solid var(--rule);
padding: 28px 36px;
font-family: var(--mono);
font-size: 14px;
line-height: 1.7;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 36px;
position: relative;
}
.receipt::before, .receipt::after {
content: ""; position: absolute; left: 0; right: 0; height: 8px;
background-image: radial-gradient(circle at 6px 4px, var(--paper) 4px, transparent 4px);
background-size: 14px 8px;
background-repeat: repeat-x;
}
.receipt::before { top: -1px; }
.receipt::after { bottom: -1px; transform: scaleY(-1); }
.receipt .cell .k {
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-mute);
display: block;
margin-bottom: 6px;
}
.receipt .cell .v {
font-family: var(--serif);
font-style: italic;
font-variation-settings: "opsz" 96;
font-size: 32px;
line-height: 1.05;
color: var(--ink);
letter-spacing: -0.012em;
}
.receipt .cell .v .ok { color: var(--accent); font-weight: 500; }
.receipt .cell .v .small {
font-style: normal;
font-family: var(--mono);
font-size: 13px;
color: var(--ink-soft);
letter-spacing: 0.04em;
margin-left: 4px;
}
.colophon {
position: absolute;
bottom: 28px; right: 88px;
font-family: var(--serif);
font-style: italic;
font-size: 13px;
color: var(--ink-mute);
}
::selection { background: var(--accent); color: var(--paper); }
</style>
</head>
<body>
<div class="frame">
<div class="sheet">Sheet · <b>02 / 02</b></div>
<div class="head">
<div class="eyebrow"><span class="bar"></span>screenshot-rename · plate ii</div>
<h1 class="title">A&nbsp;session, <span class="ampersand">end&nbsp;to&nbsp;end</span></h1>
<div class="runtag">196 files · 10 agents · ~3 min<span class="v">claude code · 2026·05·04</span></div>
</div>
<div class="terminal">
<span class="tag you">you</span>
<div class="line you">rename all the cleanshots in <code style="font-family:var(--mono); font-size:15px; color:#e9c98c;">~/Documents/Screenshots/</code> based on their content.</div>
<span class="tag cc">claude</span>
<div class="line cc">I'll prep the folder, batch into ten files of 19, dispatch <em>parallel Haiku agents</em>, then plan and execute. Resizing Retinas first; extracting frames from <em>.mp4</em> and <em>.pdf</em>.</div>
<span class="tag bash">bash</span>
<div class="line bash"><span class="com"># 1 · prep</span><br>
python3 pipeline.py prep --src <span style="color:#e9c98c">~/Documents/Screenshots/</span><br>
→ <b><span class="num">196</span></b> source files · <b><span class="num">9</span></b> mp4/pdf frames · resized to <b>1568 px</b> · <b><span class="num">10</span></b> batches written
</div>
<span class="tag fan">fan-out</span>
<div class="line fan-wrap">
<div class="agents">
<div class="agent"><span class="haiku-tag">haiku</span><span class="dot"></span><span class="id">batch-<b>01</b></span><span class="ct">19/19 <span class="ok">✓</span></span></div>
<div class="agent"><span class="haiku-tag">haiku</span><span class="dot"></span><span class="id">batch-<b>02</b></span><span class="ct">19/19 <span class="ok">✓</span></span></div>
<div class="agent"><span class="haiku-tag">haiku</span><span class="dot"></span><span class="id">batch-<b>03</b></span><span class="ct">19/19 <span class="ok">✓</span></span></div>
<div class="agent"><span class="haiku-tag">haiku</span><span class="dot"></span><span class="id">batch-<b>04</b></span><span class="ct">19/19 <span class="ok">✓</span></span></div>
<div class="agent"><span class="haiku-tag">haiku</span><span class="dot"></span><span class="id">batch-<b>05</b></span><span class="ct">19/19 <span class="ok">✓</span></span></div>
<div class="agent"><span class="haiku-tag">haiku</span><span class="dot"></span><span class="id">batch-<b>06</b></span><span class="ct">19/19 <span class="ok">✓</span></span></div>
<div class="agent"><span class="haiku-tag">haiku</span><span class="dot"></span><span class="id">batch-<b>07</b></span><span class="ct">19/19 <span class="ok">✓</span></span></div>
<div class="agent"><span class="haiku-tag">haiku</span><span class="dot"></span><span class="id">batch-<b>08</b></span><span class="ct">19/19 <span class="ok">✓</span></span></div>
<div class="agent"><span class="haiku-tag">haiku</span><span class="dot"></span><span class="id">batch-<b>09</b></span><span class="ct">19/19 <span class="ok">✓</span></span></div>
<div class="agent"><span class="haiku-tag">haiku</span><span class="dot"></span><span class="id">batch-<b>10</b></span><span class="ct">10/10 <span class="ok">✓</span></span></div>
</div>
</div>
<span class="tag bash">bash</span>
<div class="line bash"><span class="com"># 2 · plan, then execute</span><br>
python3 pipeline.py plan --src <span style="color:#e9c98c">~/Documents/Screenshots/</span> &nbsp;→ <b><span class="num">189</span></b> renames · <b><span class="num">0</span></b> errors · <b><span class="num">0</span></b> collisions<br>
python3 pipeline.py execute --src <span style="color:#e9c98c">~/Documents/Screenshots/</span> &nbsp;→ audit <b><span class="num">195</span></b> = <b><span class="num">195</span></b> · <span style="color:#d8a4b3;">189&nbsp;✓</span>
</div>
</div>
<div class="receipt">
<div class="cell">
<span class="k">Agents in flight</span>
<span class="v">10<span class="small">parallel</span></span>
</div>
<div class="cell">
<span class="k">Renames committed</span>
<span class="v"><span class="ok">189</span><span class="small">/&nbsp;189 planned</span></span>
</div>
<div class="cell">
<span class="k">File-count audit</span>
<span class="v">195 <span style="color:var(--ink-mute);">=</span> 195 <span class="ok">✓</span></span>
</div>
<div class="cell">
<span class="k">Files lost</span>
<span class="v"><span class="ok">0</span><span class="small">zero overwrites</span></span>
</div>
</div>
<div class="colophon">Set in Fraunces &amp; JetBrains Mono. Plate ii of ii.</div>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink