# WordPress.org Plugin Assets

This directory should contain the visual assets required for the WordPress.org plugin directory
listing.

## Required Assets

### Plugin Icons (Required)

- **icon-128x128.png** - Small plugin icon (128x128 pixels)
- **icon-256x256.png** - Large plugin icon (256x256 pixels)

### Plugin Banners (Recommended)

- **banner-772x250.png** - Standard banner (772x250 pixels)
- **banner-1544x500.png** - High-resolution banner (1544x500 pixels) - optional but recommended

### Screenshots (Referenced in README.txt)

- **screenshot-1.png** - Settings page showing API key configuration
- **screenshot-2.png** - Admin dashboard with getting started guide
- **screenshot-3.png** - Example of frontend script injection (browser dev tools)
- **screenshot-4.png** - Status indicator showing plugin active state

## Design Guidelines

### Brand Colors

Use Cookifi brand colors from the theme palette:

- **Primary**: Whiskey palette (warm orange/brown tones)
- **Base**: Armadillo palette (gray tones)

Reference: `packages/ui/common/src/styles.css`

### Icon Design

- Simple, recognizable symbol related to consent/privacy
- Use primary brand colors
- Ensure it's readable at small sizes (128x128)
- Maintain consistency with Cookifi branding

### Banner Design

- Include Cookifi logo
- Tagline: "Consent Management Platform for WordPress"
- Clean, professional design
- Highlight key features: GDPR, CCPA, Cookie Consent
- Use brand colors and typography (Roboto Variable)

### Screenshot Guidelines

- Use actual plugin UI (not mockups)
- Show real functionality
- Include annotations if helpful
- High quality (PNG format)
- Standard WordPress admin styling visible

## Tools for Creation

### Recommended Tools

- **Figma** - For designing icons and banners
- **Adobe Illustrator/Photoshop** - Professional graphics
- **Canva** - Quick banner creation
- **macOS Screenshot** - For actual plugin screenshots (Cmd+Shift+4)

### Export Settings

- Format: PNG
- Color space: sRGB
- Compression: Medium (balance quality and file size)
- Exact dimensions as specified above

## WordPress.org Validation

Before submission, validate assets:

1. Correct dimensions
2. PNG format
3. Reasonable file size (< 1MB each)
4. Professional quality
5. No offensive content
6. Properly licensed (you own rights or have permission)

## Screenshot Instructions

### How to Capture Screenshots

1. **Settings Page (screenshot-1.png)**

    - Navigate to Settings → Cookifi
    - Show the full settings form
    - Include "Get API Key" button and link
    - Show toggle options
    - Capture entire page including WordPress admin sidebar

2. **Admin Dashboard (screenshot-2.png)**

    - Show the getting started guide
    - Include status indicator
    - Show resources section
    - Capture clean, organized layout

3. **Script Injection (screenshot-3.png)**

    - Open website with plugin active
    - Open browser DevTools (Inspect Element)
    - Navigate to Network tab or view page source
    - Highlight the Cookifi script tag
    - Show data-apikey attribute

4. **Status Indicator (screenshot-4.png)**
    - Show plugin settings with "Active" status
    - Include visual indicator (green checkmark)
    - Show configured API key (partially masked)

## Current Status

🔴 **Assets Not Created Yet**

These assets need to be created before submitting to WordPress.org marketplace.

## Next Steps

1. Design icon and banners in Figma/Illustrator
2. Export at correct dimensions
3. Capture plugin screenshots
4. Place files in this directory
5. Test plugin zip includes assets
6. Validate on WordPress.org readme validator

## Notes

- These assets are **part of the plugin distribution** and will be committed to git
- WordPress.org guidelines: https://developer.wordpress.org/plugins/wordpress-org/plugin-assets/
- Assets should match the description in `README.txt`