# sohaibwaheed2006-beep/codealpha_phishingawarenesstraining architecture

> Architecture diagram of the GitHub repository sohaibwaheed2006-beep/codealpha_phishingawarenesstraining, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining
- Repository: https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining

## Overview

PhishGuard is a browser-based phishing-awareness course: learners review training content and attack examples, then test their knowledge in a quiz that can award a completion certificate. The README documents five course modules, real-world case studies, and quiz feedback; the available JavaScript excerpts show slide, example, and quiz interactions, including answer feedback and certificate display. The graph keeps content and interaction responsibilities distinct. Source excerpts are partial, so connections for unsampled features are limited to documented capabilities.

Main entry points: [`index.html`](https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/index.html) (Course page), [`app.js`](https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/app.js) (Quiz interaction), [`style.css`](https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/style.css) (Visual presentation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_content["Learning content"]
  node_course_page["Course page<br/>[index.html]"]
  node_phishing_basics["Phishing basics<br/>[index.html]"]
  node_email_detection["Email detection<br/>[index.html]"]
  node_website_detection["Website detection<br/>[index.html]"]
  node_social_engineering["Social engineering<br/>[index.html]"]
  node_defense_response["Defense and response<br/>[index.html]"]
  node_case_studies["Attack case studies<br/>[index.html]"]
  node_presentation["Visual presentation<br/>[style.css]"]
end

subgraph group_interactions["Course interactions"]
  node_slide_navigation["Slide navigation<br/>[app.js]"]
  node_example_interactions["Example interactions<br/>[app.js]"]
end

subgraph group_assessment["Assessment"]
  node_quiz_questions["Quiz questions<br/>[app.js]"]
  node_quiz_interaction["Quiz interaction<br/>[app.js]"]
  node_answer_feedback["Answer feedback<br/>[app.js]"]
  node_score_certificate["Score and certificate<br/>[app.js]"]
end

node_learner(("Learner"))

node_learner -->|"opens"| node_course_page
node_course_page -->|"presents"| node_phishing_basics
node_course_page -->|"presents"| node_email_detection
node_course_page -->|"presents"| node_website_detection
node_course_page -->|"presents"| node_social_engineering
node_course_page -->|"presents"| node_defense_response
node_course_page -->|"presents"| node_case_studies
node_course_page -->|"styled by"| node_presentation
node_learner -->|"selects slides"| node_slide_navigation
node_slide_navigation -->|"changes view"| node_course_page
node_learner -->|"expands examples"| node_example_interactions
node_example_interactions -->|"reveals details"| node_case_studies
node_learner -->|"answers questions"| node_quiz_interaction
node_quiz_interaction -->|"uses"| node_quiz_questions
node_quiz_interaction -->|"shows feedback"| node_answer_feedback
node_quiz_interaction -->|"shows results"| node_score_certificate

click node_course_page "https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/index.html"
click node_phishing_basics "https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/index.html"
click node_email_detection "https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/index.html"
click node_website_detection "https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/index.html"
click node_social_engineering "https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/index.html"
click node_defense_response "https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/index.html"
click node_case_studies "https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/index.html"
click node_presentation "https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/style.css"
click node_slide_navigation "https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/app.js"
click node_example_interactions "https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/app.js"
click node_quiz_questions "https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/app.js"
click node_quiz_interaction "https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/app.js"
click node_answer_feedback "https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/app.js"
click node_score_certificate "https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/app.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_course_page,node_phishing_basics,node_email_detection,node_website_detection,node_social_engineering,node_defense_response,node_case_studies,node_presentation toneBlue
class node_slide_navigation,node_example_interactions toneAmber
class node_quiz_questions,node_quiz_interaction,node_answer_feedback,node_score_certificate toneMint
class node_learner toneIndigo
```

## Components

### Learning content

- [Course page](https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/index.html): `index.html`
- [Phishing basics](https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/index.html): `index.html`
- [Email detection](https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/index.html): `index.html`
- [Website detection](https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/index.html): `index.html`
- [Social engineering](https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/index.html): `index.html`
- [Defense and response](https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/index.html): `index.html`
- [Attack case studies](https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/index.html): `index.html`
- [Visual presentation](https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/style.css): `style.css`

### Course interactions

- [Slide navigation](https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/app.js): `app.js`
- [Example interactions](https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/app.js): `app.js`

### Assessment

- [Quiz questions](https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/app.js): `app.js`
- [Quiz interaction](https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/app.js): `app.js`
- [Answer feedback](https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/app.js): `app.js`
- [Score and certificate](https://github.com/sohaibwaheed2006-beep/codealpha_phishingawarenesstraining/blob/main/app.js): `app.js`

### Other components

- **Learner**

## Connections

- Learner → Course page: opens
- Course page → Phishing basics: presents
- Course page → Email detection: presents
- Course page → Website detection: presents
- Course page → Social engineering: presents
- Course page → Defense and response: presents
- Course page → Attack case studies: presents
- Course page → Visual presentation: styled by
- Learner → Slide navigation: selects slides
- Slide navigation → Course page: changes view
- Learner → Example interactions: expands examples
- Example interactions → Attack case studies: reveals details
- Learner → Quiz interaction: answers questions
- Quiz interaction → Quiz questions: uses
- Quiz interaction → Answer feedback: shows feedback
- Quiz interaction → Score and certificate: shows results