Web Pentest Tool - GitHub Copilot Instructions

Guide development of an educational web-based penetration testing tool. This project demonstrates security testing concepts through a modern, user-friendly interface designed for students and security professionals.

Project Overview

**Purpose**: Educational web application for demonstrating penetration testing concepts safely

**Technology Stack**:

**Architecture**: Frontend-only web application with simulated security scanning capabilities

**Target Audience**: Students and professionals learning about web security

Code Style Guidelines

When generating or reviewing code:

1. **JavaScript**:

- Use modern ES6+ features (arrow functions, destructuring, async/await)

- Implement class-based modular architecture

- Use event-driven programming patterns

- Separate presentation logic from business logic

- Include clear, educational comments

2. **HTML**:

- Follow semantic HTML5 structure

- Ensure accessibility attributes (ARIA labels, roles)

- Maintain clean document hierarchy

- Use descriptive IDs and classes

3. **CSS**:

- Implement responsive design for all device sizes

- Use CSS Grid and Flexbox for layouts

- Apply modern design patterns (glassmorphism effects)

- Maintain dark theme with gradient backgrounds

- Ensure accessible color contrasts (WCAG compliance)

- Add smooth animations and transitions

4. **General**:

- Keep code clean and readable

- Maintain proper indentation and formatting

- Document complex logic with comments

- Follow DRY (Don't Repeat Yourself) principles

Security Best Practices

**CRITICAL**: This is an educational tool. Always:

1. Include prominent educational disclaimers in UI and code

2. Simulate security tools rather than implementing actual exploitation

3. Focus on demonstrating concepts safely without real attack capabilities

4. Add proper authorization reminders before any scanning simulation

5. Never include actual exploit code or real vulnerability exploitation

6. Generate mock data for realistic demonstrations

7. Emphasize ethical hacking principles and legal boundaries

UI/UX Design Principles

Create interfaces with:

Component Architecture

Structure code following these patterns:

1. **Modular Design**:

- Class-based JavaScript components

- Each component handles specific functionality

- Clear interfaces between modules

2. **Separation of Concerns**:

- Keep HTML (structure), CSS (presentation), and JavaScript (behavior) separate

- Use CSS classes for styling, not inline styles

- Avoid mixing business logic with DOM manipulation

3. **Data Handling**:

- Generate mock data for realistic demonstrations

- Implement data validation and sanitization patterns

- Show proper error handling in examples

4. **Event Management**:

- Use event delegation where appropriate

- Implement clean event listener patterns

- Handle edge cases and errors gracefully

Development Priorities

When suggesting improvements or new features, prioritize:

1. **Educational Value**: Code should clearly demonstrate security concepts

2. **Security Awareness**: Emphasize best practices and ethical considerations

3. **Modern Standards**: Use current web development practices and APIs

4. **User Experience**: Intuitive interfaces with helpful feedback

5. **Accessibility**: Ensure all users can interact with the tool

6. **Documentation**: Comment code for learning purposes

7. **Maintainability**: Write clean, testable, extensible code

Example Usage Patterns

**Tool Simulation Structure**:

```javascript

class SecurityScanner {

constructor(target) {

this.target = target;

this.results = [];

}

async scan() {

// Simulate scanning with educational delays

// Generate mock results for demonstration

// Never perform actual security testing

}

displayResults() {

// Format and present findings educationally

}

}

```

**Educational Disclaimer Template**:

Always include in UI:

**Responsive Design Pattern**:

Use mobile-first CSS with breakpoints for tablet and desktop views

Constraints