# Episode Web Viewer

A simple Flask web application to view translated episodes with speaker color coding.

## Features

- **Mobile-first design**: Optimized for mobile devices with touch-friendly interface
- **Vertical line display**: Shows all dialogue lines in a scrollable vertical list
- **Selectable lines**: Tap any line to select it
- **Translation toggle**: Selected lines can be expanded to show Chinese translation
- **Speaker colors**: Lines are colored based on speaker (defined in `_colors.json`)
- **Episode navigation**: Side menu to jump between episodes
- **Minimal JavaScript**: Server-side rendering with minimal JS for interactions

## Running the App

```bash
# From the project root
uv run flask --app webapp/app run --host=0.0.0.0 --port=5000
```

Then open http://localhost:5000 in your browser.

## Usage

1. **Select a line**: Tap on any line to select it
2. **Show translation**: Tap the pencil icon (✎) in the navbar to expand the selected line and show Chinese translation
3. **Hide translation**: Tap the pencil icon again to collapse
4. **Switch episodes**: Tap the hamburger menu (☰) to open the side menu and select a different episode

## File Structure

```
webapp/
├── app.py              # Flask application
├── templates/
│   ├── base.html       # Base template with navbar and side menu
│   └── episode.html    # Episode page template
└── static/
    └── style.css       # Styles (mobile-first)
```

## Data Sources

- `_translated/*.json` - Episode data with English/Chinese translations
- `_colors.json` - Speaker to color mapping