Editor Support

Co-authored-by: Copilot <copilot@github.com>
2026-05-05 15:42:30 -05:00
parent 9f7c078ccc
commit 29154bd651
32 changed files with 3698 additions and 17 deletions
@@ -0,0 +1,115 @@
+# 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