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

# 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

Select a line: Tap on any line to select it
Show translation: Tap the pencil icon (✎) in the navbar to expand the selected line and show Chinese translation
Hide translation: Tap the pencil icon again to collapse
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