A professional, full-featured cybersecurity toolkit combining secure password generation with multiple encryption cipher implementations. Built with vanilla JavaScript and featuring a stunning dual-theme UI.
Multiple Generation Modes:
- Random - Cryptographically strong passwords with customizable options
- Memorable - Word-based combinations easy to remember
- Passphrase - 4-6 word combinations (Diceware-style)
- PIN Codes - Numeric-only passwords
Customization Options:
- Adjustable length (8-64 characters)
- Character type selection (uppercase, lowercase, numbers, symbols)
- Exclude ambiguous characters (0, O, l, 1, I)
- Real-time strength meter with visual feedback
- Bulk generation (10 passwords at once)
- Copy to clipboard with one click
Six Different Cipher Implementations:
-
Caesar Cipher
- Classic shift cipher with customizable shift value (1-25)
- Educational demonstration of substitution ciphers
-
ROT13
- Special case of Caesar cipher with fixed 13-position shift
- Self-inverse property (encrypt = decrypt)
-
Base64
- Standard binary-to-text encoding
- Commonly used for data transfer
-
XOR Cipher
- Bitwise XOR encryption with custom key
- Symmetric encryption demonstration
-
Substitution Cipher
- Random alphabet substitution
- Classic cryptography technique
-
Reverse
- Simple text reversal
- Basic obfuscation method
Encryption Features:
- Encrypt/Decrypt mode toggle
- Custom key/shift input for applicable ciphers
- Copy encrypted/decrypted output
- Educational info boxes explaining each cipher
- Real-time processing
Dual Theme System:
- 🟢 Cyber Green - Hacker aesthetic (default)
- 🔵 Blue/Purple - Modern tech theme
- Smooth theme switching with rotation animation
Modern UI/UX:
- Glassmorphism design
- Animated gradient backgrounds
- Smooth transitions and hover effects
- Responsive layout (mobile-friendly)
- Toast notifications for user feedback
- Tab-based navigation
- Navigate to Password Generator tab
- Set desired password length using slider
- Select character types (uppercase, lowercase, numbers, symbols)
- Click "⚡ Generate Password"
- Copy password using clipboard button
- Advanced Options:
- Select password type (Random, Memorable, Passphrase, PIN)
- Generate 10 passwords at once
- Navigate to Encryption Tool tab
- Choose Encrypt or Decrypt mode
- Enter your text in the input field
- Select encryption method
- Enter key/shift value if required
- Click "🔐 Encrypt Text" or "🔓 Decrypt Text"
- Copy result using clipboard button
- Click the 🎨 button in the header to switch between Cyber Green and Blue/Purple themes
For Production Use:
- Use established encryption libraries (CryptoJS, TweetNaCl, Web Crypto API)
- Implement server-side password hashing (bcrypt, Argon2)
- Never store passwords in plain text
- Use HTTPS for all password transmissions
Password Best Practices:
- Never reuse passwords across services
- Use a dedicated password manager
- Enable two-factor authentication (2FA)
- Update passwords regularly
- Avoid dictionary words and personal information
The strength meter uses a comprehensive scoring system (0-100):
- Length: Rewards longer passwords (up to 25 points)
- Character Diversity: Scores based on character types used (up to 25 points)
- Uniqueness: Ratio of unique characters to total (up to 15 points)
- Entropy: Cryptographic strength calculation (up to 25 points)
- Pattern Penalties: Deductions for detected weaknesses
| Cipher | Type | Strength | Best Use Case |
|---|---|---|---|
| Caesar | Substitution | ⭐ | Educational demos |
| ROT13 | Substitution | ⭐ | Spoiler hiding |
| Base64 | Encoding | ⭐ | Data encoding |
| XOR | Symmetric | ⭐⭐ | Basic encryption |
| Substitution | Substitution | ⭐⭐ | Learning cryptography |
| Reverse | Transformation | ⭐ | Simple obfuscation |
Note: These ciphers are for educational purposes. For real security, use modern encryption standards (AES, RSA).
- HTML5 - Semantic structure
- CSS3 - Styling and animations
- CSS Variables for theming
- Flexbox & Grid layouts
- Keyframe animations
- Responsive design patterns
- Vanilla JavaScript - No dependencies
- DOM manipulation
- Cryptography implementations
- Event handling
- Clipboard API
This project demonstrates:
- ✅ Advanced DOM manipulation
- ✅ Cryptography algorithm implementation
- ✅ CSS animations and transitions
- ✅ Theme switching systems
- ✅ Responsive design principles
- ✅ Clean code architecture
- ✅ User experience optimization
- ✅ Chrome/Edge (latest)
- ✅ Firefox (latest)
- ✅ Safari (latest)
- ✅ Opera (latest)
- No external dependencies - Fast load times
- Optimized animations - 60fps smooth
- Efficient algorithms - Instant processing
- Local operation - No server calls (privacy-friendly)
- Password Strength Checker - Advanced password analysis tool
- Portfolio Website - Personal portfolio
Abdo - Freshman CS Student | Web Developer | Cybersecurity Enthusiast
- LinkedIn: Abdelkader Jidel
- Twitter/X: @dj_ab_do
- Email: [email protected]
- Portfolio: View Portfolio
© 2026 Abdo. All Rights Reserved.
This project is available for educational purposes. Feel free to fork, learn from, and build upon this code.
- Cryptography concepts from classical cipher studies
- Design inspiration from modern security tools
- UI/UX patterns from contemporary web applications
Planned features:
- Hash generators (MD5, SHA-256, SHA-512)
- AES encryption implementation
- Password strength analyzer integration
- Export/import password lists
- Password history with local storage
- Multi-language support
- Dark/Light mode toggle
None currently. Please report any bugs via GitHub issues.
- v1.0.0 (2026) - Initial release
- Password generator with 4 modes
- 6 encryption ciphers
- Dual theme system
- Responsive design
Built with ❤️ for learning cybersecurity concepts
Making password security accessible and understandable