An interactive phishing awareness training application that helps users identify phishing emails vs legitimate ones.
- 12 Realistic Email Examples - 6 legitimate and 6 phishing emails
- Interactive Learning - Immediate feedback with detailed explanations
- Real Links - Evaluable URLs that demonstrate legitimate vs suspicious domains
- Performance Tracking - Separate scoring for legitimate vs phishing email detection
- Responsive Design - Works on desktop and mobile devices
- Single-Page App - No scrolling required, fits in viewport
phishing-simulator.html- Main application fileemails.json- Email samples database (easily customizable)
- Fork or create a new repository
- Upload both files to the repository root:
phishing-simulator.htmlemails.json
- Go to Settings > Pages
- Under "Source", select the branch (usually
main) - Click Save
- Your site will be live at:
https://[username].github.io/[repository-name]/phishing-simulator.html
- Follow steps 1-5 from Option 1
- Add a
CNAMEfile with your custom domain - Configure your DNS provider to point to GitHub Pages
- Access at your custom domain
Edit the emails.json file. Each email object contains:
{
"subject": "Email subject line",
"from": "Sender Name <[email protected]>",
"to": "[email protected]",
"date": "MM/DD/YYYY HH:MM AM/PM",
"icon": "Letter or emoji for sender icon",
"isPhishing": true or false,
"content": "HTML content of the email body",
"explanation": "Text explaining why this is legitimate or phishing"
}The application uses inline CSS. To customize colors, fonts, or layout:
- Open
phishing-simulator.html - Locate the
<style>section in the<head> - Modify CSS variables and classes as needed
Email content supports these CSS classes:
.email-brand-header- Branded header bar (Microsoft, PayPal, etc.).email-text- Body text paragraphs.email-list- Bulleted lists.email-button- Call-to-action buttons/links.email-footer- Footer text
Add modifiers like .paypal, .amazon, .google to .email-brand-header for brand-specific colors.
- Share the deployed URL with your team
- Recommend users complete all 12 examples
- Review common mistakes in team meetings
- Update
emails.jsonperiodically with new examples
- Read each email carefully
- Look for red flags:
- Suspicious sender domains
- Generic greetings
- Urgent/threatening language
- Requests for sensitive information
- Misspellings or poor grammar
- Suspicious link URLs (hover to preview)
- Click "Legit 👍" or "Phish 👎"
- Review the explanation
- Click "Next" to continue
- Review your final score and breakdown
- Official company domain (e.g., @microsoft.com, not @microsoft-security.net)
- Personalized greeting with your name
- Professional formatting and grammar
- No requests for passwords or sensitive data
- Reasonable timeframes (not "within 1 hour!")
- Contact information that can be verified
- Suspicious domain names (look-alikes, extra words, wrong TLDs)
- Generic greetings ("Dear User", "Dear Customer")
- Urgent threats ("account will be closed", "verify immediately")
- Requests for passwords, SSN, account numbers
- Poor grammar or spelling errors
- Mismatched or suspicious URLs
- Too good to be true offers
- Chrome/Edge (recommended)
- Firefox
- Safari
- Mobile browsers (iOS Safari, Chrome Mobile)
This training tool is provided as-is for educational purposes. Feel free to modify and adapt for your organization's needs.
To add new email examples:
- Fork the repository
- Edit
emails.jsonwith your new examples - Test locally by opening the HTML file
- Submit a pull request
For issues or questions:
- Check that both HTML and JSON files are in the same directory
- Verify JSON syntax is valid (use a JSON validator)
- Check browser console for error messages
- Ensure files are being served over HTTP/HTTPS (not file://)
Created as an open-source security awareness tool to help organizations train employees in phishing detection.