A phishing awareness training tool that simulates Gmail or Outlook. Personalized to you — enter your first name, company website, and email client, and the entire scenario is built around your real details. Learn to spot phishing emails by identifying red flags, reporting suspicious messages, and getting scored on your detection skills.
🔒 Everything runs in your browser. Nothing is sent to any server.
- Clone the repo
- Serve locally:
python3 -m http.server 8080 - Open
http://localhost:8080
No build step, no dependencies, no backend.
- Set up your persona — Enter your first name, company website, and pick your email client (Gmail or Outlook)
- Review your dossier — See your generated cast: your role, CEO, manager, and colleagues. These names will appear in your inbox.
- Check your inbox — A mix of phishing and legitimate emails, all referencing your real name and company domain
- Investigate — Open emails, click on any element to flag it as suspicious
- Make the call — Report as phishing or mark as safe. Skip and come back later.
- Learn — Review your flags after each email with detailed explanations
- Improve — Get an aggregate report showing your weakest areas
- Level up — Score 80%+ to advance to the next difficulty
- Onboarding flow — enter first name, company website, company name, email client
- Persona generator — builds a CEO, manager, and 3 colleagues from name pools
- Lookalike domains — generates 4 fake variants of your real domain (hyphen-word, homoglyph, subdomain abuse, typosquat) used as phishing sender domains
- Template substitution — all 7 scenarios use
{{variables}}so emails reference your real name, domain, and generated cast - Your Briefing — sidebar button reveals your dossier mid-game in case you forget who you are
- Gmail skin — Material Design, Primary/Social/Promotions tabs, three-dot menu → Report phishing
- Outlook skin — navy header, icon rail, Segoe UI, Focused/Other tabs, ribbon toolbar with Report split-button (click label or chevron → Report phishing), 3-line email rows, hover-to-checkbox row selection
- Skin-aware tutorial — the Report Phishing step shows the right mockup based on your chosen client
- 57 phishing techniques across 7 categories (sender, URL, content, attachment, context, header, visual)
- Adaptive difficulty — starts at Intermediate, adjusts based on your score. Must score 80%+ to advance.
- 3 difficulty levels — Beginner (obvious), Intermediate (moderate), Advanced (subtle)
- 7 scenarios — 51 unique emails across different scenario contexts
- Everything is clickable — flag any element in any email, phishing or legit
- Per-email review — immediate feedback on correct flags, false positives, and missed red flags
- Aggregate scoring — category breakdown showing your strongest and weakest areas
- Keyboard accessible — Tab/Enter navigation, Escape to close popups
- Progress tracking — progress bar in inbox, verdict badges on reviewed emails
- No setup required — static HTML/CSS/JS, works with any local server
⚠️ Progress is not saved. Refreshing or closing the page resets your session.
| Level | Emails | Phishing Ratio | Red Flags | Description |
|---|---|---|---|---|
| Beginner | 5 | 80/20 | 3-5 per email | Obvious: misspellings, wrong domains, broken grammar |
| Intermediate | 8 | 60/40 | 2-4 per email | Moderate: lookalike domains, URL mismatches, social engineering |
| Advanced | 10 | 40/60 | 1-2 per email | Subtle: one-character swaps, perfect grammar, context-only clues |
See docs/custom-scenarios.md for a step-by-step guide with a blank template. Scenarios are JSON files in data/scenarios/ — create one and wire it into the difficulty rotation.
See docs/deployment.md for instructions on deploying to Cloudflare Pages, GitHub Pages, Netlify, or any static host.
See the design document backlog for planned features including: localStorage persistence, Apple Mail skin, scenario builder UI, timed mode, team dashboard, and more.
Vanilla HTML, CSS, and JavaScript. Google Fonts and Material Icons via CDN. No frameworks, no build tools.
MIT
© 2026 Roy Natian