1) Hello World for OpenRouter API
Source: hello-openrouter.py
2) Image gallery: given a directory with photos, make an HTML gallery with descriptions:
1) HTML Page with the API keys
Prompt:
Generate a single self-contained HTML file that I will print on A4 to produce
cut-out "vouchers", one API key per participant.
## Configuration (top of the file)
Put all customisable content in one clearly-commented `<script>` block at the very
top of `<head>`, so a non-developer can edit it without touching the rest:
- `EYEBROW` — short header line for each voucher, `""` hides it
- `FIXED_TEXT` — the text repeated in every voucher; allow HTML (`<br>`, `<strong>`, `<code>`)
- `API_KEYS` — array of strings, one voucher per entry
- `VOUCHERS_PER_PAGE` — default 5
- `SHOW_NUMBERS` — if true, print a zero-padded "03 / 24" counter on each voucher
Render the vouchers from these constants in vanilla JS — no frameworks, no build
step, no external requests (it must work offline). HTML-escape the keys so they
paste in verbatim safely, but deliberately do **not** escape `FIXED_TEXT`.
## Layout
- `@page { size: A4; margin: 0 }`; each sheet is a `210mm × 297mm` div with ~9mm/11mm padding.
- Each sheet is a CSS grid: `grid-template-rows: repeat(var(--per-page), 1fr)`, gap 4mm.
Equal `1fr` rows matter — vouchers must be exactly the same height regardless of
text length, so cut positions never drift, including on a partly filled last page.
- `break-after: page` on each sheet, but `break-after: auto` on `:last-of-type` so
there's no trailing blank page. `break-inside: avoid` on vouchers.
- Voucher = rounded rectangle (4mm radius) with a 1px dashed border that doubles as
the cut guide, plus a small ✂ glyph notched into the top-right border.
- Inside each voucher, top to bottom: header row (eyebrow + counter, thin rule under
it), the fixed text, then the key box pushed to the bottom with `margin-top: auto`.
- Key box: light tinted fill, hairline border, 2mm radius, small uppercase "API KEY"
label, then the key in monospace ~9.5pt with `word-break: break-all` and
`user-select: all` (keys are long, e.g. 73-char OpenRouter keys).
## Visual direction
Restrained and print-first, ink-conscious, one accent colour used sparingly.
Palette as CSS custom properties:
`--ink #1c1f26`, `--ink-soft #5b6472`, `--rule #9aa3b0`, `--tint #f2f4f7`,
`--accent #1d5c73` (deep teal).
Set `print-color-adjust: exact` so the fills survive printing.
Typography — locally available stacks only, no webfonts:
- serif for the fixed text: `"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif`
- sans for UI/labels: `"Segoe UI", Roboto, Helvetica, Arial, sans-serif`
- mono for keys and the counter: `ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace`
Signature detail: a solid accent-coloured band (~2mm) down the left edge of each
voucher, so it reads as a ticket stub. Keep everything else quiet.
## Screen vs print
On screen: light grey page background, white sheets centred with a soft shadow, and
a sticky toolbar showing "N vouchers · M per page · P A4 sheets" plus a "Print sheets"
button. Hide the toolbar in `@media print` with `display: none`.
Handle the empty case: if `API_KEYS` is empty, show a short message pointing back to
the config block instead of a blank page.
2) Image generation: style prompt for the presentation
Create a minimalist flat editorial illustration in a hand-drawn style, using thick slightly irregular black outlines,
simplified abstract forms, a limited color palette, large flat color fields,
and a subtle paper-grain texture.
Keep the composition graphic and symbolic, with no realism, no shading, and no detailed rendering.
Background color: White
Main line: Black
Secondary lines: #097E74ff
Background shapes can be: #B6BE00ff