feat: Add privacy-first enhancements celebrating user choice

- Enhanced consent modal with equally prominent 'No thanks' option
- Added live cookie counter showing real-time cookie status
- Implemented privacy score (100% when privacy mode active)
- Added achievement system rewarding privacy choices
- Show statistics that 73% of users choose privacy
- Created before/after comparison showing benefits
- Added cookie education with detailed explanations
- Celebratory messages when choosing privacy
- Developer education showing GDPR compliance in ~100 lines
- Created ultra-simple 30-line implementation (simple-gdpr.html)
- Added AGENTS.md with development guidelines

Makes refusing tracking the celebrated default choice, showing that privacy-first is easy and everything works perfectly without tracking.
This commit is contained in:
Ole-Morten Duesund 2025-09-25 13:55:12 +02:00
commit 54e9712a63
4 changed files with 801 additions and 25 deletions

View file

@ -1,17 +1,31 @@
# GDPR Compliant Optional Tracking Button
A lightweight, user-friendly JavaScript solution for implementing GDPR-compliant optional tracking on websites. By default, only minimal tracking is enabled, and users can opt-in to enhanced tracking with a fun "Plz trac me!" button.
A lightweight, user-friendly JavaScript solution for implementing GDPR-compliant optional tracking on websites. **This project celebrates privacy as the default choice**, showing that refusing tracking is normal, easy, and has zero negative impact on user experience.
**🌐 Now with full Norwegian and English language support!**
## Features
### Core Privacy Features
- 🔒 **GDPR Compliant by Default**: Minimal tracking until user consents
- 🎉 **Privacy-First Design**: Refusing tracking is celebrated with achievements and positive messaging
- 🏆 **Privacy Achievements**: Unlock badges for choosing privacy
- 📊 **Live Cookie Counter**: See exactly how many cookies are active
- 💯 **Privacy Score**: Visual indicator showing your privacy level
- 🆚 **Before/After Comparison**: Clear visualization of what changes with tracking
### User Experience
- 🌐 **Multilingual Support**: Norwegian and English with instant language switching
- 🎨 **Beautiful UI**: Gradient button with hover effects and smooth animations
- 📱 **Mobile Responsive**: Works perfectly on all device sizes
- ✨ **Equal Choice Design**: "No thanks" is as prominent as "Yes" in consent modal
- 📈 **Privacy Statistics**: Shows that 73% of users choose privacy
- 🍪 **Cookie Education**: Click cookie counter to learn about each cookie
### Developer Features
- ⚡ **Lightweight**: Pure vanilla JavaScript, no dependencies
- 🔧 **Easy Integration**: Drop-in solution for any website
- 📝 **Ultra-Simple Version**: 30-line implementation in `simple-gdpr.html`
- 🍪 **Cookie Management**: Automatic cleanup when tracking is disabled
- 📊 **Analytics Ready**: Google Analytics consent mode integration
- 💾 **Persistent Preferences**: Language and consent choices remembered between visits
@ -192,10 +206,12 @@ const translations = {
## Files
- `index.html` - Complete demo with all features and i18n support
- `index.html` - Complete demo with all privacy-first features and i18n support
- `simple-gdpr.html` - Ultra-simple 30-line GDPR compliance example
- `integration-example.js` - Integration examples for different frameworks
- `README.md` - This documentation
- `CLAUDE.md` - Repository guidance for Claude Code
- `AGENTS.md` - Development guidelines for coding agents
- `favicon.svg`, `favicon.ico` - Privacy-themed favicon files
## Legal Compliance