# Year in Pixels - Mood Tracker

A React-based web application for tracking daily moods throughout the year using a visual "Year in Pixels" format. Track your mood with a simple Red-Amber-Green (RAG) system and visualize your year at a glance.

## Features

### 🎨 Visual Mood Tracking
- **Year in Pixels Grid**: 12 columns (months) × 31 rows (days) visual layout
- **RAG System**: Simple 3-color mood tracking (Red, Amber, Green)
- **Interactive Cells**: Click to cycle through moods or use paint mode for bulk editing
- **Today Highlight**: Current date is highlighted when viewing the current year

### ✨ User Experience
- **Drag Painting**: Select a color and drag across multiple days for quick entry
- **Responsive Design**: Works on desktop, tablet, and mobile devices
- **Dark Mode Support**: Automatic dark/light theme adaptation
- **Print Friendly**: Built-in print functionality for physical copies

### 💾 Data Management
- **Local Storage**: All data persists locally in your browser
- **Export Options**: Download your data as JSON or CSV
- **Import Support**: Upload previously exported JSON files
- **Year Navigation**: Switch between different years with preserved data

### ⚙️ Customization
- **Toggle Day Numbers**: Show/hide day numbers in cells
- **Compact Mode**: Reduced spacing for smaller displays
- **Show/Hide Legend**: Toggle mood color legend display
- **Year Reset**: Clear all entries for the current year

## Quick Start

### Local Development

1. **Clone and Install**
   ```bash
   git clone <repository-url>
   cd mood_tracker
   npm install
   ```

2. **Start Development Server**
   ```bash
   npm run dev
   ```
   Open [http://localhost:5173](http://localhost:5173) in your browser.

3. **Build for Production**
   ```bash
   npm run build
   npm run preview
   ```

### Docker Deployment

**Using Docker Compose (Recommended)**
```bash
docker-compose up -d
```
Access the app at [http://localhost:8080](http://localhost:8080)

**Using Docker directly**
```bash
docker build -t mood-tracker .
docker run -p 8080:80 mood-tracker
```

## How to Use

1. **Set Your Year**: Use the year selector to choose the year you want to track
2. **Track Your Mood**: Click on any day to cycle through moods (Empty → Green → Amber → Red → Empty)
3. **Paint Mode**: Select a color from the paint palette and drag across multiple days for quick entry
4. **View Stats**: See your mood summary (count of Green, Amber, Red days) at the top
5. **Export Data**: Save your progress as JSON or CSV files
6. **Import Data**: Upload previously exported JSON files to restore data

### Mood Colors
- **Green**: Good/positive mood days
- **Amber**: Neutral/okay mood days  
- **Red**: Difficult/negative mood days
- **Gray**: No entry/untracked days

## Technology Stack

- **Frontend**: React 18 with TypeScript
- **Styling**: Tailwind CSS
- **Build Tool**: Vite
- **Data Storage**: Browser localStorage
- **Deployment**: Docker with Nginx

## Browser Compatibility

- Modern browsers with ES2020+ support
- Chrome/Edge 80+, Firefox 72+, Safari 13.1+
- Mobile browsers (iOS Safari, Chrome Mobile)

## Data Privacy

- **100% Local**: All mood data is stored locally in your browser
- **No Server**: No data is sent to external servers
- **Export Control**: You control your data with export/import features
- **No Analytics**: No tracking or analytics included

## File Structure

```
mood_tracker/
├── src/
│   ├── App.tsx                      # Main app component
│   ├── YearInPixelsMoodTracker.tsx  # Core mood tracker component
│   ├── main.tsx                     # React app entry point
│   └── index.css                    # Global styles
├── public/                          # Static assets
├── Dockerfile                       # Multi-stage Docker build
├── docker-compose.yml              # Docker Compose configuration
├── nginx.conf                      # Nginx configuration
├── package.json                    # Dependencies and scripts
└── vite.config.ts                  # Vite build configuration
```

## Contributing

1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

## License

This project is open source and available under the [MIT License](LICENSE).