# Quantitative Trading Platform - Interactive Mockup

A complete clickable mockup of the Quantitative Trading Platform showing the full user interface and workflow.

## Features

### 1. **Dashboard**
- Real-time portfolio performance metrics
- Interactive charts showing P&L, drawdown, win rate
- Recent trades table
- Top holdings overview

### 2. **Data Management**
- API connector status (Moomoo, alternative data)
- Data quality monitoring dashboard
- Rate limiting and connectivity indicators

### 3. **Strategy Engine**
- Active strategies overview (Live/Paper/Paused)
- Backtest results visualization
- Strategy creation interface
- Performance metrics (Sharpe ratio, win rate)

### 4. **Risk Management**
- Circuit breakers configuration
- Risk metrics dashboard (VaR, CVaR, volatility)
- Real-time risk monitoring
- Alert system for limit breaches

### 5. **Navigation & Workflow**
- Sidebar navigation with system status
- Responsive design (mobile/desktop)
- Interactive charts with mock data
- Form elements and configuration panels

## Technology Stack

- **HTML5** - Semantic markup
- **CSS3** - Custom dark theme with CSS variables
- **JavaScript** - Interactive elements and navigation
- **Bootstrap 5** - Responsive grid and components
- **Chart.js** - Interactive data visualization
- **Bootstrap Icons** - Icon set

## File Structure

```
prototype/
├── index.html              # Main HTML file
├── css/
│   └── style.css          # Custom styles
├── js/
│   ├── app.js             # Main application logic
│   └── mock-data.js       # Chart initialization and mock data
└── README.md              # This file
```

## Design Principles

### Dark Theme
- Professional trading platform aesthetic
- Reduced eye strain for extended use
- High contrast for data visualization

### Responsive Layout
- Sidebar collapses on mobile
- Charts resize appropriately
- Touch-friendly interactive elements

### Interactive Elements
- Clickable navigation between sections
- Form elements for configuration
- Real-time data updates (simulated)
- Toast notifications for user feedback

## How to Use

1. Open `index.html` in a modern web browser
2. Click sidebar navigation items to switch between sections
3. Interact with form elements and buttons
4. Charts display mock data that updates automatically

## Integration with Actual Platform

This mockup is designed to be reusable for the actual web application:

### CSS Reusability
- CSS variables for theming (`:root` custom properties)
- Modular class names
- Consistent design system

### JavaScript Structure
- Modular architecture
- State management pattern
- Chart initialization utilities

### HTML Templates
- Semantic markup
- Bootstrap classes for consistency
- Component-based structure

## Mock Data Features

- **Portfolio Chart**: Simulated 30-day performance
- **Data Quality**: Weekly completeness and latency trends
- **Backtest Results**: Multiple strategy comparisons
- **Risk Metrics**: Radar chart for risk assessment

## Browser Support

- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+

## Next Steps for Implementation

1. **Backend Integration**
   - Replace mock data with real API calls
   - Connect to Moomoo API connector
   - Implement user authentication

2. **Real-time Features**
   - WebSocket connections for live data
   - Server-sent events for updates
   - Push notifications for alerts

3. **Additional Features**
   - User preferences and settings
   - Export functionality (CSV, PDF)
   - Multi-user collaboration
   - Audit logging

## License

Proprietary - For internal use only