feat: create Chemex pour-over coffee timer with security and audio features
This commit is contained in:
commit
44beca8c0a
200
README.md
Normal file
200
README.md
Normal file
@ -0,0 +1,200 @@
|
||||
# ☕ 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*
|
||||
Loading…
x
Reference in New Issue
Block a user