201 lines
6.1 KiB
Markdown
201 lines
6.1 KiB
Markdown
# ☕ 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.
|
|
|
|
|
|
|
|
## ✨ 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. Uses nginx automatically via Nixpacks
|
|
3. SSL/TLS certificates handled by Traefik
|
|
4. Configuration files included: `nixpacks.toml`, `coolify-nginx.conf`
|
|
|
|
#### 🔧 **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*
|