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

# 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)

Set application as static site in Coolify
Enable "Is it a static site?" option
Uses nginx automatically via Nixpacks
SSL/TLS certificates handled by Traefik
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

# nixpacks.toml
[staticAssets]
"/" = "."

Manual Deployment

Upload all files to web server
Configure security headers (use provided configs)
Ensure HTTPS is enabled
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