# Dangerous Pi Frontend

Modern, lightweight web interface for Proxmark3 management built with Remix.js.

## Features

- **Cyberpunk Theme** - Dark mode default with light mode support
- **Responsive Design** - Mobile-first, works on all screen sizes
- **Real-time Updates** - SSE integration for live status
- **Lightweight** - Optimized for Pi Zero 2 W (< 150KB bundle)
- **Progressive Enhancement** - Works without JavaScript

## Tech Stack

- **Framework**: Remix v2 (React Router)
- **Styling**: Vanilla CSS (no framework, ~15KB)
- **Build**: Vite
- **TypeScript**: Full type safety

## Development

### Prerequisites

- Node.js 18+
- npm or yarn
- Backend running on http://localhost:8000

### Install Dependencies

```bash
npm install
```

### Start Development Server

```bash
npm run dev
```

Frontend will be available at http://localhost:3000

The dev server proxies API requests to the backend (http://localhost:8000).

### Build for Production

```bash
npm run build
```

### Start Production Server

```bash
npm start
```

## Project Structure

```
app/
├── routes/              # Page routes
│   ├── _index.tsx       # Dashboard (/)
│   ├── commands.tsx     # PM3 Commands (/commands)
│   ├── settings.tsx     # Settings (/settings)
│   └── logs.tsx         # Command Logs (/logs)
├── root.tsx             # Root layout
├── styles.css           # Global styles
└── entry.*.tsx          # Client/Server entry points
```

## Pages

### Dashboard (`/`)
- System status (CPU, memory, disk)
- PM3 connection status
- Quick actions
- Real-time SSE updates

### Commands (`/commands`)
- Execute PM3 commands
- Quick command buttons
- Terminal-style output
- Command history with ↑/↓ navigation

### Settings (`/settings`)
- General settings (auth, HTTPS)
- Wi-Fi configuration
- Advanced options (PM3 device, BLE)
- System actions (restart, shutdown)

### Logs (`/logs`)
- Command history table
- Export functionality (planned)
- System logs (planned)

## Design System

### Colors (Cyberpunk)
- **Primary**: Cyan (`#00ffff`)
- **Secondary**: Magenta (`#ff00ff`)
- **Accent**: Green (`#00ff88`)
- **Background**: Dark Blue (`#0a0e1a`)

### Typography
- **Sans**: System font stack (zero download)
- **Mono**: SF Mono, Monaco, Cascadia Code, etc.

### Components
- Buttons (primary, secondary, danger)
- Cards with hover effects
- Status badges with pulse animation
- Terminal-style code blocks
- Toast notifications
- Form inputs with focus states

## Theme System

Supports three modes:
- **dark** - Cyberpunk dark theme (default)
- **light** - Clean light theme
- **auto** - Follow system preference

Theme persisted in localStorage, toggled via header button.

## API Integration

### REST Endpoints
```typescript
// System
GET  /api/health
GET  /api/system/info
POST /api/system/session/create
GET  /api/system/config

// PM3
GET  /api/pm3/status
POST /api/pm3/command
GET  /api/pm3/commands/history
```

### SSE Events
```typescript
GET /sse/events

// Events:
- connected
- pm3_status
- update_available
- backup_complete
- ups_battery
```

## Performance Optimization

### Targets
- First Contentful Paint: < 1.5s
- Time to Interactive: < 3s
- Bundle Size: < 150KB gzipped

### Techniques
- Server-side rendering (SSR)
- CSS-only animations
- System fonts (no web fonts)
- Code splitting by route
- Minimal dependencies

## Accessibility

- WCAG 2.1 AA compliant
- Keyboard navigation
- Focus indicators
- ARIA labels
- Screen reader tested

## Testing Checklist

- [ ] Works without JavaScript
- [ ] Mobile responsive (320px+)
- [ ] Dark/light mode toggle
- [ ] SSE connection
- [ ] Command execution
- [ ] Session management
- [ ] Keyboard shortcuts
- [ ] Touch targets (44x44px)

## Browser Support

- Chrome/Edge 90+
- Firefox 88+
- Safari 14+
- Mobile browsers (iOS 14+, Android 10+)

## Deployment

### With Backend
The frontend should be built and served by the backend in production:

```bash
# Build frontend
cd app/frontend
npm run build

# Backend serves from build/client/
```

### Standalone (Development)
For development, run separately:

```bash
# Terminal 1: Backend
python -m app.backend.main

# Terminal 2: Frontend
cd app/frontend
npm run dev
```

## Contributing

See [UI_GUIDELINES.md](../../UI_GUIDELINES.md) for design principles and best practices.

## License

Part of the Dangerous Pi project. Built for [Dangerous Things](https://dangerousthings.com).