# ☕ Chemex Pour-Over Coffee Timer

A beautiful, interactive web application that guides you through the perfect Chemex pour-over coffee brewing process with precise timing, visual progress indicators, and audio notifications.

![Coffee Timer Preview](https://img.shields.io/badge/Status-Ready%20to%20Brew-brown?style=for-the-badge&logo=coffee)

## ✨ Features

### 🎯 **Guided Brewing Process**
- **Step-by-step instructions** for the perfect Chemex brew
- **Visual progress ring** showing timer completion
- **Real-time water weight tracking** (50g → 200g → 340g)
- **Optimized recipe**: 21g coffee, 340g water, 1:16 ratio

### ⏱️ **Advanced Timer System**
- **Independent step timers** - pause one step without affecting others
- **Pause/Resume functionality** for each brewing stage
- **Precise timing**: Bloom (45s), Second Pour (60s), Final Pour (60s), Drain (60s)
- **Visual feedback** with animated progress indicators

### 🔊 **Audio Notifications**
- **Pleasant chime sounds** when each timer completes
- **Harmonious C major chord** (C5, E5, G5 notes)
- **Gentle fade-in/out** for a non-jarring experience
- **Fallback audio** for browser compatibility

### 🛡️ **Security & Privacy**
- **Comprehensive security headers** (CSP, XSS protection, clickjacking prevention)
- **Input sanitization** and secure DOM manipulation
- **Privacy-friendly fonts** using Bunny Fonts instead of Google Fonts
- **GDPR compliant** - no tracking or data collection

### 📱 **Responsive Design**
- **Mobile-friendly** interface
- **Modern UI** with smooth animations
- **Accessible** color scheme and typography
- **Clean, minimalist** design focused on the brewing process

## 🚀 Quick Start

### Local Development
```bash
# Clone or download the project
cd Coffee

# Start a local web server
python -m http.server 8000

# Open in browser
open http://localhost:8000
```

### Deployment Options

#### 🌐 **Coolify (Recommended)**
1. Set application as **static site** in Coolify
2. Enable "Is it a static site?" option
3. Uses nginx automatically via Nixpacks
4. SSL/TLS certificates handled by Traefik
5. No additional configuration needed - auto-detected

#### 🔧 **Apache**
- Use `.htaccess` file for security headers
- Requires `mod_headers` module enabled

#### ⚡ **Nginx**
- Use `nginx.conf` for server configuration
- Security headers and file protection included

## 📁 Project Structure

```
Coffee/
├── index.html              # Main HTML file with security headers
├── style.css               # Responsive CSS with modern design
├── script.js               # Interactive timer logic with audio
├── README.md               # This documentation
├── security.md             # Security implementation details
├── .htaccess               # Apache security configuration
├── nginx.conf              # Nginx security configuration
├── coolify-nginx.conf      # Coolify-specific nginx config
└── nixpacks.toml           # Coolify deployment configuration
```

## 🎮 How to Use

### 1. **Setup Phase**
- Review the brewing parameters (21g coffee, 340g water, 1:16 ratio)
- Preheat your Chemex and filter
- Click **"Start Brewing"** to begin

### 2. **Brewing Steps**
Each step has its own independent timer:

**🌸 Bloom (45 seconds)**
- Pour 50g water evenly over grounds
- Wait for coffee to degas
- Timer shows progress with visual ring

**💧 Second Pour (60 seconds)**
- Pour to 200g total weight
- Slow, circular motions
- Avoid pouring on filter edges

**🎯 Final Pour (60 seconds)**
- Pour to final 340g weight
- Continue slow, circular technique
- Maintain steady flow rate

**⏳ Drain (60 seconds)**
- Let coffee drain completely
- Should take 30-60 seconds
- Remove filter when done

### 3. **Timer Controls**
- **⏸️ Pause**: Pause current step timer
- **▶️ Resume**: Continue from where you paused
- **⏭️ Next Step**: Move to next brewing stage
- **🔄 Reset**: Start over from beginning

### 4. **Audio Cues**
- Pleasant chime plays when each timer completes
- No need to watch the screen constantly
- Audio works in all modern browsers

## 🔧 Technical Details

### **Frontend Technologies**
- **HTML5** with semantic markup
- **CSS3** with custom properties and animations
- **Vanilla JavaScript** (ES6+) for interactivity
- **Web Audio API** for sound notifications

### **Security Features**
- Content Security Policy (CSP)
- XSS protection headers
- Clickjacking prevention
- Input sanitization
- Secure DOM manipulation

### **Performance**
- **Lightweight**: ~10KB total size
- **Fast loading**: Optimized assets
- **Smooth animations**: 60fps progress indicators
- **Efficient timers**: Minimal CPU usage

### **Browser Compatibility**
- **Modern browsers**: Chrome, Firefox, Safari, Edge
- **Mobile browsers**: iOS Safari, Chrome Mobile
- **Audio support**: Web Audio API (fallback included)
- **Responsive**: Works on all screen sizes

## 🛡️ Security

This project implements comprehensive security measures:

- **HTTP Security Headers**: X-Frame-Options, X-XSS-Protection, CSP
- **Input Validation**: All user inputs sanitized
- **Secure Coding**: No eval(), innerHTML, or unsafe DOM manipulation
- **Privacy Protection**: No tracking, GDPR compliant
- **Server Security**: Apache/Nginx configurations included

See `security.md` for detailed security implementation.

## 🚀 Deployment

### **Coolify Deployment**
```toml
# nixpacks.toml
[staticAssets]
"/" = "."
```

### **Manual Deployment**
1. Upload all files to web server
2. Configure security headers (use provided configs)
3. Ensure HTTPS is enabled
4. Test audio functionality

## 🤝 Contributing

This is a complete, production-ready coffee timer application. Feel free to:

- Fork the project for your own brewing needs
- Customize the recipe parameters
- Add new brewing methods
- Improve the design or functionality

## 📄 License

This project is open source and available under the MIT License.

## ☕ Enjoy Your Coffee!

Perfect pour-over coffee takes practice, patience, and precision. This timer helps you master the technique while enjoying the meditative process of manual brewing.

**Happy Brewing!** 🌟

---

*Made with ❤️ for coffee enthusiasts everywhere*