# Testing Layer Transforms - Product 404R

## Quick Test Guide

I've created **product 404R** as a demonstration of the layer transform feature. It uses the same images as product 404 but flips the door and hardware layers horizontally to show a right-hinge configuration.

## Test URLs

**Left-Hinge (Original):**
```
http://localhost:8080/quiz/product/404
```

**Right-Hinge (Flipped):**
```
http://localhost:8080/quiz/product/404R
```

## What to Look For

When you compare both products:

1. **Base layer** - Should be identical (house/background doesn't flip)
2. **Door layer** - Should be mirrored left-to-right
3. **Hardware layer** - Should be mirrored to match door position
4. **Foreground layer** - Should be identical (plants don't flip)

## Image Files Used

Both products use the same image files from:
```
/static/images/window/storm-window/404/
  ├── door-white.png
  ├── door-black.png
  └── (other color variants)

/static/images/window/storm-window/layers/
  ├── base.jpg
  ├── hardware.png
  └── foreground.png
```

**Zero additional images needed!** The flip is pure CSS.

## Configuration Difference

### Product 404 (Left-Hinge)
```json
"imageConfig": {
  "useCanvasAPI": true
}
```

### Product 404R (Right-Hinge)
```json
"imageConfig": {
  "useCanvasAPI": true,
  "layerTransforms": {
    "door": "flip-horizontal",
    "hardware": "flip-horizontal"
  }
}
```

## Color Variations

Both products support all color options:
- Black
- White
- Bronze
- Sandstone

Select different colors in the dropdown to see the door layer change while maintaining the flip.

## Technical Notes

- **Performance**: Instant rendering, GPU-accelerated CSS transform
- **Storage**: No duplicate images required
- **Bandwidth**: Same image files downloaded once and reused
- **Compatibility**: Works in all modern browsers

## Use Cases

This same technique can be applied to:
- Storm doors with different hinge sides
- Windows with operable panels on left vs right
- Sliding doors/windows that open from different sides
- Any product where a mirror variant is needed

## Next Steps

1. Restart your Flask server to load the new product data
2. Visit both URLs to compare
3. Try different color selections
4. Open browser DevTools to see the CSS classes applied:
   - `.layer-flip-horizontal` on door and hardware layers for 404R
   - No transform classes on 404

## Production Usage

When ready for production:
1. Design all "left-hinge" (or default orientation) images
2. Add product entries for "right-hinge" variants with `layerTransforms`
3. No need to create separate images!
4. Consider naming convention: 404, 404R, 404L, etc.
