# iPhone screenshot gallery

A standalone gallery of all 44 CareTrack iOS screenshots and captured states. All patient data is synthetic. The gallery supports English and French, search across both languages, app-section filters, a keyboard-accessible enlarged viewer, and individual image downloads.

## Open the gallery

From the repository root:

```sh
pnpm screenshots:serve
```

Open [localhost:8083](http://localhost:8083/). You can also open `index.html` directly. Deploy or copy the whole `docs/iphone-gallery` directory to any static host. No dependencies or build step are needed to view it.

## Files

- `index.html`: page markup.
- `styles.css`: responsive layout, touch targets, safe-area padding, and reduced-motion support.
- `gallery.js`: search, filters, English/French translations, and the native HTML dialog viewer.
- `catalog.json`: screenshot titles, categories, and capture languages.
- `data.js` and `screens.json`: generated image metadata and measured file sizes.
- `assets/screens/`: full-size, lossless WebP images with the photographic device frame.
- `assets/previews/`: smaller WebP previews. Full-size images load only when you open the viewer.
- `tools/optimize.py`: reproducible image framing and compression.

The original app captures are **1170 × 2532**, taken on an **iPhone 16e simulator running iOS 18.6**. The presentation frame is the compatible **iPhone 12–13 Pro portrait product bezel**, from [Apple Frames](https://github.com/viticci/frames-cli), rather than Simulator window artwork. The finished framed images are **1400 × 2700**. The app screenshot is placed at its original pixel size, without stretching or resampling. The hardware bezel covers the normal notch and rounded screen corners.

Only the finished iOS screenshot mockups are included here. The bare Apple artwork is not bundled. Apple owns the device artwork; see [Apple Design Resources](https://developer.apple.com/design/resources/) and its accompanying license for artwork usage.

## Measured image sizes

| Image set                             |     Bytes | Decimal MB |
| ------------------------------------- | --------: | ---------: |
| Original unframed PNG captures        | 7,073,261 |       7.07 |
| Full-size framed lossless WebP images | 3,334,114 |       3.33 |
| Small previews                        | 1,069,246 |       1.07 |
| All gallery images                    | 4,403,360 |       4.40 |

Full-size framed images use **52.9% less space** than the original PNGs. The complete image set, including previews, uses **37.7% less space**. Previews are 480 × 926 at WebP quality 85. The full images use lossless WebP, preserving the composed image pixels exactly. Original PNG captures remain in the previous screenshot output folder outside this repository.

## Regenerate images

The optimizer requires Python with Pillow and the `cwebp` command-line tool. Supply your original captures and a licensed compatible 1400 × 2700 product bezel:

```sh
python3 docs/iphone-gallery/tools/optimize.py /path/to/original-captures --frame /path/to/compatible-product-bezel.png
pnpm exec oxfmt --write docs/iphone-gallery/data.js docs/iphone-gallery/screens.json
```

The script validates the source dimensions, rebuilds both image sizes, and records the actual byte totals. Update the table above after regenerating assets.

## Verify the page

```sh
pnpm exec tsc -p docs/iphone-gallery/tsconfig.json
pnpm exec oxlint docs/iphone-gallery/gallery.js docs/iphone-gallery/data.js
pnpm exec oxfmt --check docs/iphone-gallery package.json
```

Responsive layout follows [MDN media-query guidance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Media_queries). The enlarged viewer uses the browser's [native dialog element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog) for focus containment and Escape-to-close behavior.