CyberGuard Security Toolkit

Inspiration

I wanted to build a lightweight, universal security dashboard that works 100% offline, without servers, APIs, or account requirements. Most online password tools leak data, log requests, or store information remotely. With CyberGuard, I pursued a fully client-side model with advanced security checks, real-time analysis, and a trustworthy process where nothing leaves the device.

The new update focuses heavily on password safety, including leak detection using a large local weak-password dataset, smarter scoring, and better visual explanations.

How I Built It

The tool is developed using HTML, CSS, and JavaScript, with fully client-side logic for security. Recent additions include:

• A 5,000+ entry common-password leak database loaded locally
• A rewritten strength analyzer with improved scoring logic
• A safer encryption module using AES-256, Base64, and XOR-based custom encryption
• A new method detection system that identifies AES/Base64/custom automatically
• A cleanHash implementation to prevent UTF-8 decoding errors
• Expanded recommendations based on entropy, character patterns, and leak detection
• Fully offline radar charts and visual UI using ECharts

All animations, cyber UI, matrix effects, and UI transitions are handcrafted without performance drops. The password analyzer updates in real time as the user types, calculating entropy, estimating crack time, evaluating multiple strength criteria, and rendering a radar chart for visual feedback. Additional modules include encryption and decryption using user-defined keys and a local history system stored through browser storage. The entire interface is built around a consistent cyber-themed design with lightweight animations and a responsive layout.

What I Learned

I strengthened my understanding of client-side cryptography, secure key handling, and building fully offline web tools. I learned to design structured UI modules that work together under a single dashboard and improved my workflow for implementing responsive layouts and animations without affecting performance. Designing modular UI + logic where multiple security tools run independently but share data

Challenges Faced

Implementing a fully client-side encryption system while keeping the interface beginner-friendly was one of the biggest challenges. Designing a user-defined key workflow for AES encryption required multiple iterations, especially because inconsistent key lengths caused decryption failures.

On top of that, integrating a large common-password dataset without slowing down the browser required careful optimization. Another major hurdle was fixing the AES UTF-8 decoder crash (“Malformed UTF-8 data”), which forced a redesign of how encrypted values are parsed and detected.

Balancing performance with a heavy cyber-themed UI — matrix animations, particle cursor, neon effects, radar charts, and real-time validation — was also difficult. Ensuring smooth performance on mobile devices proved challenging as well, since encryption operations and animations run simultaneously.

Future Improvements

• Massive Weak-Password Dataset: Expand leak detection to 100K+ passwords using a compressed binary format for faster lookup.
• Smarter Password Analysis: Real-world password-crack simulations using GPU-based timing models and entropy curves.
• Introduce more encryption options such as SHA-256 hashing with salting, RSA keys, and improved custom algorithms.
• Add an optional cloud-sync mode to securely back up encrypted passwords.
• Develop a browser extension version for real-time password strength analysis and encryption.

Result

CyberGuard is now a fully offline, client-side security suite that combines real-time password analysis with military-grade encryption. Users can analyze any password with detailed feedback: entropy, crack-time estimation, character breakdown, leak detection, and strength scoring.

The built-in Encryption Vault supports AES-256, Base64, and custom XOR encryption, along with smart method detection and a cleanHash system that prevents malformed UTF-8 decryption errors. A local password history system stores encrypted entries safely on the user’s device without transmitting any data externally.

With its cyberpunk UI, radar charts, neon animations, matrix background, and responsive design, CyberGuard offers a fast, visually engaging, and privacy-focused security experience ideal for everyday use, demonstrations, and educational purposes.

Note: This project is currently optimized for desktop browsers. Mobile responsiveness and layout adjustments will be included in upcoming updates.

Update: It is also compatible with with mobiles now.

Built With

• anime.js
• canvas
• cryptojs
• css
• custom
• html5
• javascript
• localstorage
• tailwindcss
• web