# 2026 Weekly Challenge Calendar

A beautiful space-themed Progressive Web App (PWA) that presents 52 weekly challenges for your child throughout 2026. Each week unlocks a new challenge, creating an exciting year-long adventure!

## Features

- **Space Theme**: Stunning cosmic design with animated starfield and purple nebula effects
- **Pixel Art "2026"**: The number 2026 is formed by 52 interactive tiles, one for each week
- **Time-Locked Challenges**: Challenges only unlock on their designated date (Week 1 = Jan 1, Week 2 = Jan 8, etc.)
- **3D Cube Animation**: When opening a challenge, an animated 3D cube spins and opens to reveal the challenge
- **Confetti Celebration**: Colorful confetti bursts when a new challenge is unlocked
- **Sound Effects**: Audio feedback for interactions (unlock sounds, whoosh effects)
- **Progress Tracking**: Completed challenges are saved and shown with a golden checkmark
- **iPad Optimized**: Designed for touch interaction with pinch-to-zoom and pan

## Quick Start

### Running Locally

1. Open a terminal in this folder
2. Start a simple web server:
   ```bash
   python3 -m http.server 8080
   ```
3. Open `http://localhost:8080` in your browser

### Testing Mode

Add `?test=true` to the URL to unlock all weeks for testing:
```
http://localhost:8080?test=true
```

## Installing on iPad

### Step 1: Generate App Icons

1. Open `generate-icons.html` in a browser
2. Click "Download All Icons" to download the PNG icons
3. Move the downloaded icons to the `icons/` folder

### Step 2: Host the App

The app needs to be hosted on a web server to work as a PWA. Options:

**Option A: Local Network (for home use)**
1. Host on your computer: `python3 -m http.server 8080`
2. Find your computer's IP address
3. Access from iPad: `http://YOUR_IP:8080`

**Option B: Free Hosting Services**
- [GitHub Pages](https://pages.github.com/) - Free, just push to a GitHub repo
- [Netlify](https://netlify.com/) - Free, drag-and-drop deployment
- [Vercel](https://vercel.com/) - Free, easy deployment

### Step 3: Add to Home Screen

1. Open the app URL in **Safari** on the iPad
2. Tap the **Share** button (square with arrow)
3. Scroll down and tap **"Add to Home Screen"**
4. Name it "2026 Challenges" and tap **Add**
5. The app will now appear on the home screen with its own icon!

## Customizing Challenges

Edit `challenges.json` to add your own challenges. The format is:

```json
{
  "challenges": [
    {
      "week": 1,
      "unlockDate": "2026-01-01",
      "title": "Week 1",
      "challenge": "Your challenge text here!"
    }
  ]
}
```

Each week's `unlockDate` determines when that tile becomes clickable.

## File Structure

```
2026-challenges/
├── index.html          # Main app page
├── styles.css          # All styling and animations
├── app.js              # App logic and interactions
├── challenges.json     # Your 52 weekly challenges
├── manifest.json       # PWA configuration
├── service-worker.js   # Offline support
├── generate-icons.html # Tool to create app icons
└── icons/              # App icons for PWA
    └── icon.svg        # Source icon
```

## How It Works

- **Week Numbers**: Tiles are numbered 1-52, forming the "2026" pixel art shape
- **Unlock Logic**: Each week unlocks 7 days after the previous (Week 1 = Jan 1, Week 2 = Jan 8...)
- **States**: 
  - 🔒 **Locked** (grey): Date hasn't arrived yet
  - 💜 **Unlocked** (purple glow): Ready to open!
  - ✓ **Completed** (golden): Already opened

## Tips for Parents

1. **Keep it special**: Only let your child open the app once per week when a new challenge unlocks
2. **Celebrate together**: Watch the cube animation and confetti together!
3. **Customize**: Edit `challenges.json` with challenges specific to your child's interests
4. **Mix it up**: Include different types of challenges - creative, physical, learning, helping others

## Troubleshooting

**App won't install on iPad?**
- Make sure you're using Safari (not Chrome)
- The app must be served over HTTPS for the "Add to Home Screen" option to appear (except for localhost)

**Icons not showing?**
- Run `generate-icons.html` and download the icons
- Place them in the `icons/` folder

**Challenges not loading?**
- Check that `challenges.json` is valid JSON (use a JSON validator)
- Check browser console for errors

## Enjoy!

Have a wonderful 2026 filled with weekly adventures! 🚀✨