🎭 A cyberpunk-themed password generator with real-time strength analysis and QR code generation
100% Client-Side • No Installation Required • Works Offline Report Bug • Request Feature
| Feature | Description |
|---|---|
| 🎲 Secure Generation | Cryptographically secure passwords using Web Crypto API |
| 📊 Real-time Analysis | Instant strength calculation with crack time estimation |
| 📱 QR Code Generation | Instant QR codes for easy password sharing |
| 🎨 Mr. Robot Theme | Cyberpunk aesthetic with glitch effects and matrix rain |
| 💾 Local History | Last 10 passwords saved locally (never sent to server) |
| ⚡ 100% Client-Side | Everything runs in your browser - no server needed |
| 🔒 Privacy First | No data collection, no analytics, no external requests |
| 📱 Responsive Design | Works perfectly on desktop, tablet, and mobile |
# Clone the repository
git clone https://github.com/Nyx-Off/WebPassCodeGenerator.git
# Open in browser
cd WebPassCodeGenerator
open index.html # macOS
# OR
start index.html # Windows
# OR
xdg-open index.html # Linux# Using Python
python -m http.server 8000
# Using PHP
php -S localhost:8000
# Using Node.js (http-server)
npx http-serverThat's it! 🎉 No dependencies to install, no build process, just open and use.
- Range: 4-128 characters
- Default: 16 characters
- Real-time slider with numeric input sync
- ✅ Lowercase:
a-z(26 characters) - ✅ Uppercase:
A-Z(26 characters) - ✅ Numbers:
0-9(10 characters) - ✅ Symbols:
!@#$%^&*()_+-=[]{}|;:,.<>?(28 characters)
- 🚫 Exclude Ambiguous: Remove
0O, 1l, I - 🔤 Begin with Letter: Force first character to be alphabetic
- ❌ Exclude Custom: Remove any specific characters
| Strength | Score | Entropy | Crack Time | Color |
|---|---|---|---|---|
| 🔴 Weak | < 30 | < 28 bits | Instant - Hours | Red |
| 🟡 Fair | 30-50 | 28-36 bits | Days - Months | Orange |
| 🟣 Good | 50-70 | 36-60 bits | Years - Centuries | Purple |
| 🟢 Strong | > 70 | > 60 bits | Millennia+ | Green |
WebPassCodeGenerator/
├── 📄 index.html # Main application
├── 📁 assets/
│ ├── 📁 css/
│ │ ├── main.css # Core styles & variables
│ │ ├── animations.css # Glitch, matrix rain, effects
│ │ └── components.css # UI components
│ └── 📁 js/
│ ├── app.js # Main application controller
│ ├── password-generator.js # Crypto generation engine
│ ├── strength-calculator.js # Strength & entropy analysis
│ └── ui-controller.js # UI state management
├── 📄 LICENSE # MIT License
└── 📄 README.md # This file
api/- PHP backend (QR codes work without this)includes/- PHP config (not needed)install.php- Installer (not needed).htaccess- Apache config (optional)
- ✅ Cryptographically Secure: Uses
crypto.getRandomValues() - ✅ No Network Requests: 100% offline capable
- ✅ No External Dependencies: Pure vanilla JavaScript
- ✅ Memory Safe: Passwords cleared from memory after use
- ✅ XSS Protected: All inputs sanitized
| Browser | Minimum Version | Tested |
|---|---|---|
| Chrome | 60+ | ✅ |
| Firefox | 53+ | ✅ |
| Safari | 11+ | ✅ |
| Edge | 79+ | ✅ |
| Opera | 47+ | ✅ |
- ⚡ Initial Load: < 100ms
- ⚡ Password Generation: < 1ms
- ⚡ QR Generation: < 50ms
- 📦 Total Size: ~50KB (excluding fonts)
- 🎯 Lighthouse Score: 100/100
Edit CSS variables in assets/css/main.css:
:root {
--color-accent: #9b59b6; /* Main purple */
--color-accent-dark: #6c3483; /* Dark purple */
--color-accent-light: #bb8fce; /* Light purple */
--color-success: #27ae60; /* Green */
--color-warning: #f39c12; /* Orange */
--color-danger: #e74c3c; /* Red */
}Edit assets/js/password-generator.js:
this.charsets = {
lowercase: 'abcdefghijklmnopqrstuvwxyz',
uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
numbers: '0123456789',
symbols: '!@#$%^&*()_+-=[]{}|;:,.<>?',
// Add custom sets:
custom: 'àéèêëñç' // Example: accented characters
};Edit timing in assets/css/animations.css:
/* Glitch effect speed */
.glitch { animation: glitch 1s infinite; }
/* Matrix rain speed */
setInterval(draw, 35); // in app.js| Shortcut | Action |
|---|---|
Ctrl/Cmd + G |
Generate new password |
Ctrl/Cmd + C |
Copy current password |
- Personal Security: Generate strong passwords for personal accounts
- Development: Create secure API keys and tokens
- System Administration: Generate root passwords and service accounts
- Team Sharing: QR codes for secure password distribution
- Offline Environments: Works without internet connection
Contributions make the open source community amazing! Any contributions are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Keep it client-side only
- Maintain the cyberpunk aesthetic
- Ensure mobile responsiveness
- Write clean, commented code
- Test across browsers
Distributed under the MIT License. See LICENSE for more information.
Samy - Nyx
- 🌐 Website: bensalemdev.fr
- 💼 GitHub: @Nyx-Off
- 📧 Contact: GitHub Issues
- Mr. Robot - Design inspiration
- qrcode.js - QR code generation
- Font Awesome - Icons
- Google Fonts - Typography
- The open source community 💜
- No Data Collection: We don't track, store, or transmit any data
- Local Storage Only: History saved in browser's localStorage
- Open Source: Audit the code yourself
- Report Security Issues: Create a private security advisory
- PWA support for offline mobile use
- Browser extension version
- Additional themes (Matrix, Tron, Blade Runner)
- Password strength tips
- Passphrase generation mode
- Export/Import password history
- Multi-language support
Made with 💜 and ☕ by Samy - Nyx
If you like this project, please ⭐ star it!