Checks the two hand-written encoders and every booth template without leaving the browser. Open index.html for the actual photobooth.
Structural checks against the spec, plus a full decode of the generated matrix back into the original text.
Point a phone camera at the code below as a final confirmation — it should offer to open https://example.com/flashbox.
Encodes synthetic frames, then hands the bytes to the browser's own GIF decoder. If the image below animates, the file is valid.
Every motif has to decode from its inline SVG before a template can stamp it, and no two of them may share an element id — they all end up in the same document, where url(#id) takes the first match.
The designs in /photo are printed frames with photo windows, and every window below was
lined up by hand against the artwork. The cards are drawn with each window filled in: if a coloured block sits
neatly inside its window, photos land inside the frame. Nothing in the code adjusts these — a design says
"as set" unless it has explicitly asked to be edge-traced. If a block sits wrong, open
frames-editor.html, drag it onto its window, and paste the numbers it prints
into js/frames.js.
Builds a card in code — a frame with three #a07979 windows and a stripe of artwork
deliberately crossing one of them — then runs it through the same path card-lab.html uses
and checks the pixels that come out.
Each template is rendered at preview size with a deliberately long caption, then checked for blank output, slots that fall outside the card, overlapping slots and a footer with room for two lines of type.