# Background Customization Guide

## Overview

CompareKit generates images with randomized backgrounds and color schemes. You can customize these in `src/config/styles.json`.

---

## How to Change Backgrounds

### Location
Edit: `/Users/rogzim/Projects/CompareKit/src/config/styles.json`

Or on server: `/home/ziro2006/public_html/CompareKit/src/config/styles.json`

---

## Background Types

### 1. **Photorealistic Backgrounds**

These use blurred photo-style backgrounds with overlays.

```json
{
  "id": "modern-office-blur",
  "name": "Modern Office",
  "type": "photo",
  "blur": 12,          // Blur amount (0-20)
  "overlay": 0.4,      // Dark overlay opacity (0-1)
  "brightness": 0.8    // Overall brightness (0-1)
}
```

**Customization Tips:**
- **blur**: Higher = more blur (recommended: 10-15)
- **overlay**: Higher = darker (0.3-0.5 looks best)
- **brightness**: Lower = darker image (0.7-0.9 recommended)

**Example - Add a New Photo Background:**
```json
{
  "id": "sunset-workspace",
  "name": "Sunset Workspace",
  "type": "photo",
  "blur": 14,
  "overlay": 0.45,
  "brightness": 0.75
}
```

---

### 2. **Abstract/Gradient Backgrounds**

#### Gradient Mesh
```json
{
  "id": "gradient-mesh",
  "name": "Gradient Mesh",
  "type": "gradient",
  "colors": ["#667eea", "#764ba2", "#f093fb"],  // Add more colors!
  "style": "mesh"
}
```

**Add Your Own Gradient:**
```json
{
  "id": "custom-gradient",
  "name": "Custom Gradient",
  "type": "gradient",
  "colors": ["#FF6B6B", "#4ECDC4", "#45B7D1"],  // Your colors
  "style": "mesh"
}
```

---

#### Geometric Patterns
```json
{
  "id": "geometric-patterns",
  "name": "Geometric Patterns",
  "type": "pattern",
  "shape": "hexagon",           // Options: hexagon, grid, triangle, circle
  "colors": ["#4F46E5", "#7C3AED"]
}
```

**Available Shapes:**
- `hexagon` - Honeycomb pattern
- `grid` - Square grid
- `triangle` - Triangular tessellation
- `circle` - Circular dots

---

#### Particles & Waves
```json
{
  "id": "particle-systems",
  "name": "Particles",
  "type": "particles",
  "colors": ["#8B5CF6", "#A78BFA"]
}
```

```json
{
  "id": "wave-patterns",
  "name": "Waves",
  "type": "wave",
  "colors": ["#06B6D4", "#3B82F6"]
}
```

---

## Color Schemes

Color schemes affect the VS badge, borders, and text overlays.

### Structure
```json
{
  "id": "your-scheme-id",
  "name": "Display Name",
  "primary": "#1E40AF",    // Main color
  "secondary": "#3B82F6",  // Secondary accents
  "accent": "#60A5FA",     // Highlights
  "text": "#FFFFFF"        // Text color
}
```

### Pre-built Color Schemes
- **Corporate Professional** - Blue tones
- **Startup Energy** - Purple tones
- **Creative Flow** - Pink tones
- **Modern Minimal** - Black/gray
- **Ocean Breeze** - Cyan/teal
- **Forest Green** - Green tones
- **Sunset Orange** - Orange/warm
- **Royal Purple** - Deep purple
- **Electric Blue** - Bright blue
- **Ruby Red** - Red tones
- **Amber Warmth** - Yellow/orange
- **Teal Modern** - Teal tones
- **Indigo Tech** - Indigo

### Add Your Own Color Scheme
```json
{
  "id": "brand-colors",
  "name": "My Brand",
  "primary": "#FF0000",     // Your primary brand color
  "secondary": "#CC0000",   // Darker shade
  "accent": "#FF6666",      // Lighter shade
  "text": "#FFFFFF"         // White or contrasting color
}
```

---

## Quick Enhancement Examples

### Example 1: Add a Vibrant Neon Background
Add this to `backgrounds.abstract`:
```json
{
  "id": "neon-glow",
  "name": "Neon Glow",
  "type": "gradient",
  "colors": ["#FF00FF", "#00FFFF", "#FFFF00"],
  "style": "mesh"
}
```

### Example 2: Create a Dark Professional Look
Add this to `backgrounds.abstract`:
```json
{
  "id": "dark-professional",
  "name": "Dark Pro",
  "type": "gradient",
  "colors": ["#1a1a2e", "#16213e", "#0f3460"],
  "style": "mesh"
}
```

And matching color scheme:
```json
{
  "id": "dark-pro-scheme",
  "name": "Dark Professional",
  "primary": "#0f3460",
  "secondary": "#16213e",
  "accent": "#e94560",
  "text": "#eaeaea"
}
```

### Example 3: Pastel/Soft Colors
```json
{
  "id": "soft-pastel",
  "name": "Soft Pastel",
  "type": "gradient",
  "colors": ["#ffeaa7", "#dfe6e9", "#fab1a0"],
  "style": "mesh"
}
```

---

## How Randomization Works

The app randomly selects:
1. **One background** from either photorealistic OR abstract
2. **One color scheme** from the colorSchemes array
3. **Layout style** (side-by-side, stacked, etc.)

You can control randomization weights in `src/config/weights.json`.

---

## After Making Changes

### If editing locally:
1. Save `styles.json`
2. Upload to server: `/home/ziro2006/public_html/CompareKit/src/config/styles.json`
3. Restart the Node.js app in cPanel
4. Generate a new image to see changes

### If editing on server:
1. Edit via cPanel File Manager or SSH
2. Restart the Node.js app
3. Test!

---

## Pro Tips

### 1. **Use Color Tools**
- [Coolors.co](https://coolors.co/) - Generate color palettes
- [Adobe Color](https://color.adobe.com/) - Create color schemes
- [Gradient Generator](https://cssgradient.io/) - Test gradients

### 2. **Brand Consistency**
Create a color scheme matching your brand:
```json
{
  "id": "your-brand",
  "name": "Your Company",
  "primary": "#YOUR_PRIMARY",
  "secondary": "#YOUR_SECONDARY",
  "accent": "#YOUR_ACCENT",
  "text": "#FFFFFF"
}
```

### 3. **Test Multiple Styles**
Generate several images to see the variety. The randomizer will pick different combinations.

### 4. **Disable Unwanted Styles**
Simply remove entries from the JSON you don't want to use.

### 5. **Backup Before Editing**
Always keep a backup of your original `styles.json`!

---

## Color Palette Inspiration

### Tech/SaaS
```
Primary: #667eea (Purple-blue)
Secondary: #764ba2 (Deep purple)
Accent: #f093fb (Light purple)
```

### Professional/Corporate
```
Primary: #1E40AF (Navy blue)
Secondary: #3B82F6 (Bright blue)
Accent: #60A5FA (Sky blue)
```

### Creative/Design
```
Primary: #EC4899 (Hot pink)
Secondary: #F472B6 (Light pink)
Accent: #FBCFE8 (Pale pink)
```

### Eco/Green
```
Primary: #047857 (Forest green)
Secondary: #10B981 (Emerald)
Accent: #6EE7B7 (Mint)
```

---

## Need Help?

Check the generated images - the app randomly combines these backgrounds and colors to create unique designs every time!

**Happy customizing!** 🎨
