[UI-02] Campaign Selection Screen

{
  "cost": {
    "input_tokens": 15,
    "estimated_usd": 0.02373,
    "output_tokens": 1579
  },
  "model": "claude-sonnet-4-20250514",
  "status": "success",
  "transport": "anthropic_api",
  "latency_ms": 27360,
  "response_text": "# Campaign Selection Screen UI\n\nI'll design a campaign selection screen that allows users to browse and choose from available campaigns. Here's a comprehensive UI design:\n\n## Screen Layout\n\n### Header Section\n- **Title**: \"Select Campaign\"\n- **User profile icon** (top right)\n- **Back button** (top left)\n\n### Campaign Grid/List\n```\n┌─────────────────────────────────────┐\n│ 🎯 FEATURED CAMPAIGNS               │\n├─────────────────────────────────────┤\n│ ┌─────┐  ┌─────┐  ┌─────┐          │\n│ │ IMG │  │ IMG │  │ IMG │          │\n│ │     │  │     │  │     │          │\n│ └─────┘  └─────┘  └─────┘          │\n│   New     Active   Ending Soon      │\n├─────────────────────────────────────┤\n│ 📋 ALL CAMPAIGNS                    │\n├─────────────────────────────────────┤\n│ [Filter] [Sort] [Search]            │\n├─────────────────────────────────────┤\n│ Campaign List Items...              │\n└─────────────────────────────────────┘\n```\n\n## Campaign Card Design\n\n### Individual Campaign Card\n```\n┌──────────────────────────────────────┐\n│ [Campaign Image/Thumbnail]           │\n│                                      │\n│ Campaign Title                   🏆   │\n│ Brief description text...            │\n│                                      │\n│ 📅 Duration: 30 days                 │\n│ 🎁 Reward: $500 prize               │\n│ 👥 1.2k participants               │\n│                                      │\n│ Progress: ████████░░ 80%             │\n│                                      │\n│ [JOIN CAMPAIGN] [STATUS BADGE]       │\n└──────────────────────────────────────┘\n```\n\n## Key UI Elements\n\n### 1. Filter Options\n- **Status**: Active, Upcoming, Completed\n- **Category**: Photo, Video, Social, Review\n- **Duration**: 1-7 days, 1-4 weeks, 1+ months\n- **Reward Type**: Cash, Products, Points, Recognition\n\n### 2. Sort Options\n- Most Popular\n- Newest First\n- Ending Soon\n- Highest Reward\n- Best Match\n\n### 3. Campaign Status Badges\n- 🟢 **ACTIVE** (green)\n- 🟡 **STARTING SOON** (yellow)\n- 🔴 **ENDING SOON** (red)\n- ⚫ **COMPLETED** (gray)\n- 🔵 **JOINED** (blue)\n\n## Interactive Features\n\n### Campaign Preview Modal\nWhen tapping a campaign card:\n```\n┌──────────────────────────────────────┐\n│ ✕                               PREVIEW │\n├──────────────────────────────────────┤\n│ [Hero Image]                         │\n│                                      │\n│ Campaign Name                        │\n│ ⭐⭐⭐⭐⭐ 4.8 rating               │\n│                                      │\n│ 📝 Full Description                  │\n│ Lorem ipsum dolor sit amet...        │\n│                                      │\n│ 🎯 Objectives:                       │\n│ • Complete 5 tasks                   │\n│ • Submit creative content            │\n│ • Engage with community              │\n│                                      │\n│ 🏆 Rewards:                          │\n│ • 1st place: $500                    │\n│ • Top 10: $50 each                   │\n│ • All participants: 100 points       │\n│                                      │\n│ [JOIN CAMPAIGN]  [LEARN MORE]        │\n└──────────────────────────────────────┘\n```\n\n## Color Scheme & Styling\n\n### Primary Colors\n- **Background**: #F8F9FA (light gray)\n- **Cards**: #FFFFFF (white)\n- **Primary Action**: #007BFF (blue)\n- **Success**: #28A745 (green)\n- **Warning**: #FFC107 (yellow)\n- **Danger**: #DC3545 (red)\n\n### Typography\n- **Headers**: Bold, 18-24px\n- **Body Text**: Regular, 14-16px\n- **Captions**: Light, 12-14px\n\n## Responsive Design\n\n### Mobile Layout (< 768px)\n- Single column card layout\n- Collapsible filter sidebar\n- Sticky search bar\n- Swipeable featured campaigns\n\n### Tablet/Desktop (> 768px)\n- 2-3 column grid layout\n- Side panel filters\n- Expanded card previews\n- Hover effects\n\n## Accessibility Features\n\n### Screen Reader Support\n- Alt text for all images\n- ARIA labels for interactive elements\n- Semantic HTML structure\n\n### Keyboard Navigation\n- Tab order through campaigns\n- Enter to select/join\n- Escape to close modals\n\n### Visual Accessibility\n- High contrast mode support\n- Scalable text (up to 200%)\n- Clear focus indicators\n- Color-blind friendly badges\n\n## Loading States\n\n### Initial Load\n```\n┌──────────────────────────────────────┐\n│ ⟳ Loading campaigns...               │\n│                                      │\n│ ┌─────┐  ┌─────┐  ┌─────┐          │\n│ │ ░░░ │  │ ░░░ │  │ ░░░ │          │\n│ │ ░░░ │  │ ░░░ │  │ ░░░ │          │\n│ └─────┘  └─────┘  └─────┘          │\n└──────────────────────────────────────┘\n```\n\n### Empty State\n```\n┌──────────────────────────────────────┐\n│              🔍                      │\n│         No campaigns found           │\n│                                      │\n│   Try adjusting your filters or      │\n│      check back later for new        │\n│           campaigns!                 │\n│                                      │\n│        [CLEAR FILTERS]               │\n└──────────────────────────────────────┘\n```\n\nThis campaign selection screen provides users with a comprehensive view of available campaigns while maintaining ease of use and clear navigation paths."
}