# 5 · AI-art prompt gallery page

**Time:** ~40 min · **Level:** beginner · **Needs:** an AI coding tool, 6-12 images you made or have the rights to use

## Goal
A static gallery site that shows your AI images **with the prompt, tool and settings next to each one**, so the page doubles as your personal prompt library and portfolio.

## Prompt (paste this)
```text
Build a static gallery website: index.html, styles.css, gallery.js and data.json
(no frameworks, no external requests, no web fonts).

- data.json holds an array of items: {"file":"images/01.jpg","title":"","alt":"","prompt":"","tool":"","model":"","date":"","notes":""}.
  Create 3 example entries with placeholder file names (images/01.jpg ... images/03.jpg).
- gallery.js loads data.json and renders a responsive masonry-style grid (CSS columns is fine).
  Lazy-load images. Clicking an image opens a lightbox with the large image, the full prompt,
  a "Copy prompt" button, and the tool/model/date. Keyboard accessible: Esc closes, arrow keys navigate.
- Add a filter by tag (add "tags": [] to each item) and a search box over title and prompt.
- Required fields must be handled gracefully if missing. alt text is shown to screen readers.
- Add a footer note: "Images generated with AI tools. Prompts shared for learning."
- Dark, gallery-wall look, generous spacing, works at 360px width.
- Since browsers block fetch() on file:// pages, include a README.txt explaining how to preview with
  "python3 -m http.server" in the folder, or by uploading to a static host.
Then list what I must replace before publishing (images, titles, alt text, credits).
```

## Expected result
A folder with 4 files. After you add your images to `images/` and edit `data.json`, you get a gallery with lightbox, copyable prompts and filtering.

## Troubleshooting
- **Gallery blank when double-clicking `index.html`:** browsers block `fetch()` on `file://`. Run `python3 -m http.server` in the folder and open `http://localhost:8000`, or ask the AI to embed the data in `gallery.js`.
- **Images huge and slow:** resize to ~1600 px wide and export as JPG/WebP before adding.
- **Missing or unclear rights:** only publish images you made and are allowed to share; check your tool's terms. Keep the "AI-generated" note.
- **Prompts look inconsistent:** write a one-line style guide ("always include: lens, light, palette") and reuse it.
- **Alt text empty:** describe what is visible in one sentence, not the prompt.

*Tested on: not yet tested (we'll update this)*