Inspiration

Women and girls are frequently targeted by online scams through everyday messages—such as fake job offers, phishing, impersonation, and image-based blackmail. Yet, most existing cybersecurity advice is long, complex, and easy to ignore. The idea for Shield was born to bridge this gap by delivering interactive, engaging, and bite-sized scam awareness.

What it does

Shield is an interactive educational web app that helps users spot online scams through gamified learning:

1. Read Real Situations: Users review realistic scenarios involving text messages, calls, emails, or QR codes.
2. Choose Safe or Risky: Users decide the best action, while the interactive mascot responds with encouraging or alert expressions.
3. Learn Red Flags: Every decision comes with a clear, straightforward explanation to reinforce safe digital habits.
4. Three Progressive Levels:
   • Easy: Classic scams with obvious warning signs.
   • Medium: Impersonation, fake pop-ups, and everyday online habits.
   • Hard: Lookalike domains, deceptive QR codes, and safe-looking threats paired with a 20-second timer.

Key Features

• Free & Private: No registration required, and 100% of data remains local to the browser.
• Works on Any Device: Web-based, lightweight, and fully responsive with support for both light and dark modes.
• Beginner Friendly: Helps users build safer online habits in just five minutes.

How we built it

Shield was built using standard HTML, CSS, and JavaScript without external datasets or heavy frameworks. AI assistance from Claude (Anthropic) was utilized for structuring scenarios and optimizing code. The project is hosted on GitHub Pages.

What's next

• Full Arabic language support to reach a broader audience.
• Expanding the scenario bank with more real-world situations.
• Introducing a dedicated Teacher & Parent Mode.

Built With

• claude
• css
• github
• html
• javascript