first commit

2025-11-22 18:17:35 +08:00
commit d427916c6a
169 changed files with 15241 additions and 0 deletions
--- a/APP_ICON_DESIGN.md
+++ b/APP_ICON_DESIGN.md
@@ -0,0 +1,443 @@
+# 🎨 FocusBuddy App Icon Design
+
+**Date**: 2025-11-22
+**Status**: Design specification ready
+
+---
+
+## 🎯 Design Concept
+
+### Core Message
+The icon should convey:
+- **Focus**: Centered, calm attention
+- **Gentleness**: Soft, non-intimidating
+- **Support**: A friendly companion, not a strict taskmaster
+
+### Design Direction
+**"Gentle Focus Circle"** - A minimalist icon featuring concentric circles representing focused attention, with a soft color palette matching the app's Morandi aesthetic.
+
+---
+
+## 🎨 Visual Design
+
+### Primary Design Option: Focused Circle
+
+```
+┌─────────────────────┐
+│                     │
+│      ╭───────╮      │
+│    ╭─────────────╮  │
+│   │    ◉ ◉       │  │  <- Friendly "buddy" face
+│   │      ⌣        │  │     (subtle, optional)
+│    ╰─────────────╯  │
+│      ╰───────╯      │
+│                     │
+└─────────────────────┘
+```
+
+**Elements**:
+1. **Outer circle**: Soft gradient (#A7C4BC to #88C9A1)
+2. **Inner circle**: Lighter shade (#F8F6F2)
+3. **Center dot**: Primary color (#A7C4BC)
+4. **Optional**: Subtle friendly face (two dots for eyes, gentle curve for smile)
+
+### Alternative Design: Timer Symbol
+
+```
+┌─────────────────────┐
+│                     │
+│        ⏰           │
+│      ╱   ╲          │
+│     │  12  │        │  <- Minimalist clock
+│      ╲___╱          │      showing focus time
+│                     │
+└─────────────────────┘
+```
+
+---
+
+## 🎨 Color Specifications
+
+### Primary Palette (from app_colors.dart)
+```dart
+Background:  #F8F6F2  // Warm off-white
+Primary:     #A7C4BC  // Calm green
+Success:     #88C9A1  // Encouraging green
+Text:        #5B6D6D  // Soft gray
+```
+
+### Icon Color Strategy
+**Option A - Gradient Background**:
+- Background: Gradient from #A7C4BC (top) to #88C9A1 (bottom)
+- Center: #F8F6F2
+- Details: #5B6D6D
+
+**Option B - Solid Background**:
+- Background: #A7C4BC
+- Center circle: #F8F6F2
+- Accent: #88C9A1
+
+---
+
+## 📐 Technical Requirements
+
+### iOS Requirements
+| Size | Usage | File Name |
+|------|-------|-----------|
+| 1024×1024 | App Store | `AppIcon-1024.png` |
+| 180×180 | iPhone 3x | `AppIcon-180.png` |
+| 120×120 | iPhone 2x | `AppIcon-120.png` |
+| 167×167 | iPad Pro | `AppIcon-167.png` |
+| 152×152 | iPad 2x | `AppIcon-152.png` |
+| 76×76 | iPad 1x | `AppIcon-76.png` |
+
+### Android Requirements
+| Size | Density | Folder |
+|------|---------|--------|
+| 192×192 | xxxhdpi | `mipmap-xxxhdpi` |
+| 144×144 | xxhdpi | `mipmap-xxhdpi` |
+| 96×96 | xhdpi | `mipmap-xhdpi` |
+| 72×72 | hdpi | `mipmap-hdpi` |
+| 48×48 | mdpi | `mipmap-mdpi` |
+| 512×512 | Play Store | `playstore-icon.png` |
+
+### Design Guidelines
+- **iOS**: No transparency, no rounded corners (iOS adds them automatically)
+- **Android**: Can have transparency, adaptive icons recommended
+- **Safe area**: Keep important elements within 80% of canvas (avoid edges)
+- **Contrast**: Ensure icon is visible on both light and dark backgrounds
+
+---
+
+## 🛠️ Design Tools & Resources
+
+### Option 1: Figma (Recommended)
+**Steps**:
+1. Go to [Figma](https://www.figma.com) (free account)
+2. Create new file (1024×1024 canvas)
+3. Use the design specifications above
+4. Export all required sizes
+
+**Figma Template** (you can recreate):
+```
+Frame: 1024×1024
+├─ Background Rectangle (fill: linear gradient #A7C4BC → #88C9A1)
+├─ Outer Circle (800×800, center aligned)
+│  ├─ Fill: #A7C4BC
+│  └─ Opacity: 90%
+├─ Inner Circle (600×600, center aligned)
+│  ├─ Fill: #F8F6F2
+│  └─ Shadow: 0 4 20 rgba(0,0,0,0.1)
+└─ Center Dot (200×200, center aligned)
+   ├─ Fill: #A7C4BC
+   └─ Optional: Friendly face elements
+```
+
+### Option 2: Canva
+**Steps**:
+1. Go to [Canva](https://www.canva.com)
+2. Create custom size: 1024×1024
+3. Search templates: "app icon minimal"
+4. Customize with FocusBuddy colors
+5. Download as PNG
+
+### Option 3: Icon Generator Tools
+**Online Tools**:
+- [App Icon Generator](https://appicon.co/) - Upload 1024×1024, generates all sizes
+- [IconKitchen](https://icon.kitchen/) - Android adaptive icons
+- [MakeAppIcon](https://makeappicon.com/) - Generates iOS and Android sets
+
+---
+
+## 🎨 Detailed Design Specs
+
+### Design 1: Minimalist Focus Circle
+
+**SVG-like Description**:
+```xml
+<svg viewBox="0 0 1024 1024">
+  <!-- Background gradient -->
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#A7C4BC"/>
+      <stop offset="100%" style="stop-color:#88C9A1"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Background -->
+  <rect width="1024" height="1024" fill="url(#bg)"/>
+
+  <!-- Outer circle (focus ring) -->
+  <circle cx="512" cy="512" r="400"
+          fill="none" stroke="#F8F6F2" stroke-width="60"/>
+
+  <!-- Inner circle -->
+  <circle cx="512" cy="512" r="280" fill="#F8F6F2" opacity="0.95"/>
+
+  <!-- Center dot (the "focus point") -->
+  <circle cx="512" cy="512" r="80" fill="#A7C4BC"/>
+
+  <!-- Optional: Friendly face -->
+  <!-- Left eye -->
+  <circle cx="452" cy="480" r="20" fill="#5B6D6D" opacity="0.7"/>
+  <!-- Right eye -->
+  <circle cx="572" cy="480" r="20" fill="#5B6D6D" opacity="0.7"/>
+  <!-- Gentle smile (arc) -->
+  <path d="M 452 540 Q 512 570 572 540"
+        stroke="#5B6D6D" stroke-width="12"
+        fill="none" opacity="0.7" stroke-linecap="round"/>
+</svg>
+```
+
+### Design 2: Timer with Focus
+
+**Description**:
+```
+- Background: Solid #A7C4BC
+- Clock circle: #F8F6F2, 700×700
+- Clock hands: #5B6D6D
+  - Hour hand pointing at 12 (straight up)
+  - Minute hand at 25 (Pomodoro reference)
+- Center dot: Small circle #A7C4BC
+- Shadow: Subtle drop shadow for depth
+```
+
+---
+
+## 📝 Design Checklist
+
+### Before Creating
+- [ ] Review app's color scheme (app_colors.dart)
+- [ ] Decide on primary design concept
+- [ ] Sketch rough ideas on paper (optional)
+
+### During Design
+- [ ] Create 1024×1024 master file
+- [ ] Use exact color codes from app
+- [ ] Ensure visibility at small sizes (test at 48×48)
+- [ ] Keep design simple and recognizable
+- [ ] Test on light and dark backgrounds
+
+### After Design
+- [ ] Export 1024×1024 PNG (for iOS App Store)
+- [ ] Generate all required iOS sizes
+- [ ] Generate all required Android sizes
+- [ ] Test icon appearance on real devices (if possible)
+- [ ] Update Xcode assets (ios/Runner/Assets.xcassets)
+- [ ] Update Android resources (android/app/src/main/res)
+
+---
+
+## 🚀 Quick Start Guide
+
+### Fastest Method: Use Figma
+
+1. **Create Master Icon** (15 minutes)
+   ```
+   1. Go to figma.com → New file
+   2. Press 'F' for frame tool
+   3. Enter dimensions: 1024×1024
+   4. Create the design using shapes (circles, rectangles)
+   5. Apply colors from the spec above
+   ```
+
+2. **Export Master** (2 minutes)
+   ```
+   1. Select the frame
+   2. Right panel → Export
+   3. Format: PNG, 1x
+   4. Click Export
+   5. Save as: icon-1024.png
+   ```
+
+3. **Generate All Sizes** (5 minutes)
+   ```
+   1. Go to appicon.co
+   2. Upload icon-1024.png
+   3. Select iOS and Android
+   4. Download generated assets
+   5. Unzip the files
+   ```
+
+4. **Install Icons** (10 minutes)
+   - See installation instructions below
+
+---
+
+## 📦 Installation Instructions
+
+### iOS Installation
+
+1. **Locate Assets Folder**:
+   ```
+   ios/Runner/Assets.xcassets/AppIcon.appiconset/
+   ```
+
+2. **Replace Files**:
+   - Copy all generated iOS icons to this folder
+   - Ensure file names match Contents.json
+
+3. **Update Contents.json** (if needed):
+   ```json
+   {
+     "images": [
+       {
+         "size": "20x20",
+         "idiom": "iphone",
+         "filename": "Icon-20@2x.png",
+         "scale": "2x"
+       },
+       // ... more entries
+     ]
+   }
+   ```
+
+4. **Build and Test**:
+   ```bash
+   flutter clean
+   flutter build ios
+   ```
+
+### Android Installation
+
+1. **Locate Resource Folders**:
+   ```
+   android/app/src/main/res/
+   ├── mipmap-mdpi/
+   ├── mipmap-hdpi/
+   ├── mipmap-xhdpi/
+   ├── mipmap-xxhdpi/
+   └── mipmap-xxxhdpi/
+   ```
+
+2. **Replace ic_launcher.png**:
+   - Copy the corresponding size to each folder
+   - Name all files: `ic_launcher.png`
+
+3. **Update for Adaptive Icons** (Optional):
+   - Create `mipmap-anydpi-v26/ic_launcher.xml`
+   - Reference foreground and background layers
+
+4. **Build and Test**:
+   ```bash
+   flutter clean
+   flutter build apk
+   ```
+
+---
+
+## 🎨 Design Recommendations
+
+### Do's ✅
+- Keep it simple and recognizable
+- Use the app's color palette
+- Test visibility at small sizes
+- Ensure contrast with backgrounds
+- Make it friendly and approachable
+
+### Don'ts ❌
+- Don't use text (hard to read at small sizes)
+- Don't use complex gradients (may not scale well)
+- Don't use thin lines (invisible at 48×48)
+- Don't copy other apps' icons
+- Don't use photos or realistic images
+
+---
+
+## 🔍 Testing Your Icon
+
+### Visual Tests
+1. **Size Test**: View at 48×48 - is it still recognizable?
+2. **Background Test**: Place on white, black, and colored backgrounds
+3. **Neighboring Test**: View alongside other popular apps
+4. **Quick Glance Test**: Can you identify it in 1 second?
+
+### Technical Tests
+```bash
+# iOS: Check in simulator
+flutter run -d "iPhone 15 Pro"
+
+# Android: Check on device
+flutter install
+```
+
+---
+
+## 💡 Design Philosophy
+
+**FocusBuddy Icon Should Feel**:
+- 🧘 **Calm**: Soft colors, rounded shapes
+- 🤝 **Supportive**: Friendly, non-threatening
+- 🎯 **Focused**: Clear center point, minimal distractions
+- 💚 **Gentle**: Morandi palette, no harsh contrasts
+
+**Avoid**:
+- ⚠️ Aggressive colors (bright red, harsh orange)
+- ⚠️ Sharp angles (intimidating)
+- ⚠️ Complicated details (confusing)
+- ⚠️ Dark/depressing tones (discouraging)
+
+---
+
+## 📚 Resources
+
+### Color Inspiration
+- Current app palette: Morandi tones, calm greens
+- Reference: Calm app, Headspace (but make it unique!)
+
+### Design Inspiration
+- Search "minimalist app icon" on Dribbble
+- Look at productivity app icons on App Store
+- Browse "focus timer" apps for ideas
+
+### Tools
+- **Figma**: https://www.figma.com (free)
+- **Canva**: https://www.canva.com (free)
+- **AppIcon.co**: https://appicon.co (free generator)
+- **IconKitchen**: https://icon.kitchen (Android adaptive)
+
+---
+
+## 🎯 Next Steps
+
+1. **Design the Icon** (20-30 minutes)
+   - Use Figma or Canva
+   - Follow the specifications above
+   - Export 1024×1024 PNG
+
+2. **Generate All Sizes** (5 minutes)
+   - Use AppIcon.co to generate all required sizes
+   - Download the zip file
+
+3. **Install in Project** (10 minutes)
+   - Replace iOS assets
+   - Replace Android resources
+   - Test on simulators/devices
+
+4. **Document** (5 minutes)
+   - Save master file for future updates
+   - Note any design decisions
+   - Take screenshots for app store
+
+---
+
+## 📝 Final Checklist
+
+- [ ] Master icon created (1024×1024)
+- [ ] All iOS sizes generated
+- [ ] All Android sizes generated
+- [ ] iOS assets installed
+- [ ] Android resources installed
+- [ ] Tested on iOS simulator
+- [ ] Tested on Android emulator/device
+- [ ] Icon looks good at small size (48×48)
+- [ ] Icon matches app's design language
+- [ ] Master file saved for future updates
+
+---
+
+**Time Estimate**: 30-60 minutes total
+**Difficulty**: Beginner-friendly
+**Tools Needed**: Browser (Figma/Canva), no design experience required
+
+**Ready to design?** Follow the "Quick Start Guide" section above!