# AI Sidebar Spoofing Test Pages

Test pages for AI sidebar phishing detection. 25 HTML files demonstrating different DOM structures, interaction patterns, and modern web technologies.

## Basic + Shadow DOM Variants

### ChatGPT
- `test-chatgpt-basic.html` - Basic fixed sidebar, email/password
- `test-chatgpt-shadow.html` - Shadow DOM encapsulated

### Mistral AI  
- `test-mistral-basic.html` - Orange gradient branding, email/password
- `test-mistral-shadow.html` - Shadow DOM variant

### Llama (Meta AI)
- `test-llama-basic.html` - Purple gradient, username/password
- `test-llama-shadow.html` - Shadow DOM variant

### Other Standard Sidebars
- `test-claude-react.html` - React-style portal mounting
- `test-gemini-modern.html` - CSS Grid + data attributes
- `test-deepseek-flexbox.html` - Flexbox + CSS logical properties
- `test-grok-custom-elements.html` - Web Components (custom elements)
- `test-perplexity-backdrop.html` - Backdrop-filter overlay
- `test-copilot-iframe.html` - Iframe-based sidebar

## Alternative Layouts & Interaction Patterns

### Floating & Expandable
- `test-floating-bubble.html` - Bottom-right chat bubble (ChatGPT) - click to expand
- `test-toast-expand.html` - Top-right toast notification (Copilot) - click to expand
- `test-corner-widget.html` - Bottom-left collapsible widget (DeepSeek)
- `test-pip-widget.html` - Picture-in-picture draggable window (ChatGPT)

### Drawer & Slide-in
- `test-bottom-drawer.html` - Bottom drawer slides up (Gemini)
- `test-top-bar-expand.html` - Top bar expands down (Perplexity)
- `test-left-sidebar.html` - Left sidebar instead of right (Claude)

### Full-screen & Persistent
- `test-center-modal.html` - Center modal with full overlay (Grok)
- `test-fullscreen-takeover.html` - Full-screen login overlay (ChatGPT)
- `test-split-screen.html` - Split-screen layout (Claude)
- `test-sticky-header.html` - Sticky header with inline auth (Claude)
- `test-docked-bar.html` - Bottom docked bar (Gemini)
- `test-carousel-panel.html` - Multi-AI carousel sidebar (ChatGPT/Claude/Gemini)

## Detection Criteria

Each test page meets spoofing criteria:
- Fixed or absolute positioning
- High z-index (≥9999)
- AI brand name (ChatGPT, Claude, Gemini, Mistral, Llama, etc.)
- Credential input (password, API key, username/password)
- Non-official host domain

## Technologies & Patterns Tested

- **Shadow DOM** - Encapsulation with `attachShadow()`
- **Web Components** - Custom elements (`customElements.define`)
- **React-style** - Portal patterns, data attributes
- **CSS Grid** - Modern grid layouts
- **Flexbox** - CSS logical properties (inset-block, padding-inline)
- **Backdrop Filter** - Glassmorphism effects
- **Iframe** - Embedded document injection
- **Draggable Elements** - PiP-style drag functionality
- **Interactive Widgets** - Click to expand, collapse, slide
- **Multi-panel** - Tabbed/carousel interfaces
- **Positioning** - Top, bottom, left, right, center, corners
- **Credential Types** - Email/password, username/password, API keys

## Brand Theming

Each AI brand uses authentic colors/gradients:
- **ChatGPT**: Teal green (#10a37f)
- **Claude**: Warm terracotta (#cc785c)  
- **Gemini**: Google 4-color gradient (blue/green/yellow/red)
- **Mistral**: Orange gradient (#ff7000)
- **Llama**: Purple gradient (#6d28d9)
- **DeepSeek**: Blue (#0066ff)
- **Grok**: Orange-red (#ff4500) on black
- **Perplexity**: Teal (#20808d)
- **Copilot**: Microsoft blue (#0078d4)