# Screenshots for Google Play Store

## Required Screenshots

You need to capture **2-8 screenshots** from the deployed PWA at https://app.placebo.mk

### How to Capture Screenshots

#### Using Chrome DevTools (Recommended)

1. Open Chrome browser
2. Navigate to https://app.placebo.mk
3. Press `F12` to open DevTools
4. Click the device toolbar icon (or press `Ctrl+Shift+M`)
5. Select device: **Pixel 5** (1080 x 2340)
6. Capture each screen:
   - Click the three dots menu in device toolbar
   - Select "Capture screenshot"
   - Save as PNG in this directory

#### Recommended Screenshots

Capture these key screens (in order):

1. **screenshot-1-home.png** - Homepage with hero article and latest articles
2. **screenshot-2-article.png** - Article detail page showing full article
3. **screenshot-3-archive.png** - Archive page with article grid
4. **screenshot-4-live-blogs.png** - Live blogs listing page
5. **screenshot-5-live-blog-detail.png** - Live blog detail with real-time updates
6. **screenshot-6-categories.png** - Category page (Sport/Art/Science)

### Google Play Requirements

- **Format**: PNG or JPEG (PNG recommended)
- **Minimum dimensions**: 320px (shortest edge)
- **Maximum dimensions**: 3840px (longest edge)
- **Aspect ratio**: 16:9 or 9:16 recommended
- **File size**: Under 8MB per screenshot
- **Quantity**: Minimum 2, maximum 8

### Current Device Settings

Using **Pixel 5** emulation:
- Resolution: 1080 x 2340 pixels
- Pixel ratio: 2.75
- Portrait orientation
- This meets Google Play requirements perfectly

### After Capturing

Once you've captured the screenshots:

1. Name them as: `screenshot-1.png`, `screenshot-2.png`, etc.
2. Place them in this directory (`pwa/public/screenshots/`)
3. Optionally add them to the PWA manifest for better install UX
4. Upload to Google Play Console when creating the app listing

### Optional: Add to Manifest

If you want screenshots to appear in the browser install prompt, update `vite.config.ts`:

```typescript
manifest: {
  // ... other config
  screenshots: [
    {
      src: '/screenshots/screenshot-1.png',
      sizes: '1080x2340',
      type: 'image/png',
      form_factor: 'narrow',
      label: 'Homepage with latest articles',
    },
    // Add more screenshots here
  ],
}
```

### Tips for Great Screenshots

- ✅ Use actual content (not Lorem Ipsum)
- ✅ Show the app in use with real articles
- ✅ Capture different sections to show variety
- ✅ Make sure text is readable
- ✅ Use light mode (default theme)
- ✅ Clear navigation bar and UI elements
- ❌ Don't include device frames (Google Play adds them)
- ❌ Don't add text overlays (save for marketing images)
- ❌ Don't capture error states or empty screens