# Visual Test Images - Layer Reference

## Image Overview

All images created with **800x600px** canvas dimensions for perfect alignment.

## Layers Created

### 1. **Base Layer** (`/layers/base.jpg`)
- **Sky blue background** (#87CEEB)
- **Green grass** at bottom
- **Tan house** with dark brown roof
- **Two side windows** with dividers
- **Door opening** in center (lighter tan rectangle)
- **Opaque JPG** - the foundation layer

### 2. **Door Layer** (`/404/door-{color}.png`)
Created in 4 colors:
- `door-white.png` - White door (#FFFFFF)
- `door-black.png` - Dark gray/black door (#2C2C2C)
- `door-bronze.png` - Bronze door (#8B6914)
- `door-tan.png` - Tan door (#D2B48C)

Each door has:
- **Rectangular shape** positioned in the door opening
- **Two decorative panels** (outlined rectangles)
- **Small black circle** on right side marking handle position
- **Transparent PNG** - shows house through transparent areas

### 3. **Hardware Layer** (`/layers/hardware.png`)
- **Gold circle** (#FFD700) for door handle
- **Bronze backplate** (#B8860B) behind handle
- **Light highlight** for 3D effect
- **Positioned on right side** (for left-hinge door)
- **Transparent PNG** - only handle visible

### 4. **Foreground Layer** (`/layers/foreground.png`)
- **Green bushes** at bottom corners (#228B22)
- **Pink flowers** with gold centers
- **Plants overlap bottom of door** realistically
- **Transparent PNG** - plants appear in front

## How They Stack (z-index order)

```
Layer 5: Foreground (plants) - On top, in front of everything
Layer 3: Hardware (handle)   - Above door
Layer 2: Door (colored)       - In door opening
Layer 1: Base (house)         - Background, always visible
```

## Left-Hinge vs Right-Hinge

### Product 404 (Left-Hinge)
- Door handle on **right side** of door
- Door opens to the right
- Uses images as created

### Product 404R (Right-Hinge) 
- Door and hardware layers **flipped horizontally**
- Door handle appears on **left side** of door
- Door opens to the left
- Same image files, just CSS transformed!

## Visual Features to Notice

1. **Door positioning**: The door rectangle fits perfectly in the lighter opening on the house
2. **Handle alignment**: The small black dot on the door matches the gold handle position
3. **Plants overlap**: The foreground plants appear in front of the door bottom
4. **Color changes**: Select different colors to see door change while everything else stays the same
5. **Flip effect**: Compare 404 vs 404R to see the door and handle swap sides

## Technical Details

- **Canvas size**: 800x600 pixels (all layers)
- **Format**: JPG for base (opaque), PNG for others (transparency)
- **Color depth**: RGB/RGBA
- **Positioning**: Centered with `object-fit: contain`

## Test Checklist

When viewing the products, verify:
- ✅ House background always visible
- ✅ Door fits in opening
- ✅ Door color changes when selected
- ✅ Gold handle appears on door
- ✅ Plants appear in front of door
- ✅ 404R has flipped door and handle
- ✅ No white gaps or misalignment

## File Locations

```
app/static/images/
└── window/
    └── storm-window/
        ├── 404/
        │   ├── door-white.png
        │   ├── door-black.png
        │   ├── door-bronze.png
        │   └── door-tan.png
        └── layers/
            ├── base.jpg
            ├── hardware.png
            └── foreground.png
```

## Creating Similar Images

Use the script `create_visual_test_images.py` as a template:
1. Set canvas dimensions (CANVAS_WIDTH, CANVAS_HEIGHT)
2. Design each layer with proper positioning
3. Use transparent PNGs for layered elements
4. Export base layer as JPG, others as PNG
5. Keep all layers at same canvas size