PhishGuard is an interactive, AI-inspired email threat analyzer built with HTML, CSS, and JavaScript. It allows users to paste email content and instantly evaluate its safety level, providing a detailed risk assessment, visual threat radar, and actionable recommendations.
This project demonstrates advanced front-end development skills including dynamic UI updates, animations, and real-time interactive visualizations, making it a strong addition to any web development portfolio.
- Real-Time Email Analysis: Paste suspicious emails and get immediate simulated analysis.
- Dynamic Risk Assessment: Displays a risk score (/100) with a verdict and tagline.
- Threat Radar: Visualizes threat vectors including suspicious links, sender spoofing, urgency tactics, and social engineering.
- Interactive Panels: Tabs for analysis, red flags, and recommended actions.
- Sample Emails: Preloaded examples for phishing, spear phishing, BEC, and safe emails.
- Animated Background & UI: Particle animations, animated meters, progress rings, and stylish buttons.
- Responsive Design: Works on desktops, tablets, and mobile devices.
- HTML5: Semantic structure and layout.
- CSS3: Modern styles, animations, and grid/flexbox layout.
- JavaScript: Dynamic interactions, simulated AI logic, canvas-based radar visualization, and state management.
- Fonts & Icons: Google Fonts (
Orbitron,Exo 2,VT323) for a tech-inspired UI.
-
Paste or load an example email in the Email Input Terminal.
-
Click “Initiate Threat Scan”.
-
The system simulates multiple scan stages with a loading overlay.
-
Results are displayed:
- Risk Score & Verdict
- Threat Radar for different threat vectors
- Analysis & Recommended Actions
-
Clear the input using the CLR button to start a new scan.
git clone <your-repo-url>Open index.html in any modern browser (Chrome, Edge, Firefox).
- Paste an email or load a sample email.
- Click Scan.
- Review the risk assessment and actionable insights.
- Front-End Web Development (HTML, CSS, JS)
- Responsive & Interactive UI Design
- Canvas Animations (Radar, Background Particles)
- State Management with JavaScript
- Creative Visualization of Data
- Integrate a real AI-based email analysis API.
- Add user authentication to store scan history.
- Export reports as PDF or CSV.
- Include dark/light theme toggle for better UX.
Disclaimer
PhishGuard is designed for educational and demonstration purposes only. The analysis results may not always be fully accurate because the project currently uses a free-tier AI API, which can have limitations in reliability, rate limits, and detection precision.
This tool should not be used as the sole basis for security decisions in real-world or production environments.
ScrambleR
- GitHub: [https://github.com/ScrambleR-H]
- LinkedIn: [www.linkedin.com/in/scrambler-hhh-7826b13a6]
Open source — free to use, modify, and share for personal and commercial projects.