47 lines
1.6 KiB
Markdown
47 lines
1.6 KiB
Markdown
# 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
|