a

webapp/README.md

@@ -0,0 +1,46 @@
+# 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

webapp/app.py

@@ -0,0 +1,95 @@
+"""Simple web app to display translated episodes with speaker colors."""
+
+import json
+import os
+from pathlib import Path
+
+from flask import Flask, render_template, abort
+
+app = Flask(__name__)
+
+# Configuration
+TRANSLATED_DIR = Path(__file__).parent.parent / "_translated"
+COLORS_FILE = Path(__file__).parent.parent / "_colors.json"
+
+
+def load_colors():
+    """Load speaker color mapping."""
+    if COLORS_FILE.exists():
+        with open(COLORS_FILE, "r", encoding="utf-8") as f:
+            return json.load(f)
+    return {}
+
+
+def get_episodes():
+    """Get list of all episodes from _translated folder."""
+    episodes = []
+    if TRANSLATED_DIR.exists():
+        for json_file in sorted(TRANSLATED_DIR.glob("*_translated.json")):
+            # Extract episode name from filename (e.g., "S02E01_translated.json" -> "S02E01")
+            episode_id = json_file.stem.replace("_translated", "")
+            episodes.append({
+                "id": episode_id,
+                "filename": json_file.name,
+                "title": episode_id
+            })
+    return episodes
+
+
+def load_episode(episode_id):
+    """Load a specific episode's data."""
+    json_file = TRANSLATED_DIR / f"{episode_id}_translated.json"
+    if not json_file.exists():
+        return None
+    
+    with open(json_file, "r", encoding="utf-8") as f:
+        return json.load(f)
+
+
+@app.route("/")
+def index():
+    """Redirect to first episode or show episode list."""
+    episodes = get_episodes()
+    if not episodes:
+        return "No episodes found", 404
+    
+    # Get first episode data
+    first_episode = episodes[0]
+    lines = load_episode(first_episode["id"])
+    colors = load_colors()
+    
+    return render_template(
+        "episode.html",
+        episodes=episodes,
+        current_episode=first_episode,
+        lines=lines,
+        colors=colors
+    )
+
+
+@app.route("/episode/<episode_id>")
+def episode(episode_id):
+    """Display a specific episode."""
+    lines = load_episode(episode_id)
+    if lines is None:
+        abort(404)
+    
+    episodes = get_episodes()
+    current_episode = {
+        "id": episode_id,
+        "filename": f"{episode_id}_translated.json",
+        "title": episode_id
+    }
+    colors = load_colors()
+    
+    return render_template(
+        "episode.html",
+        episodes=episodes,
+        current_episode=current_episode,
+        lines=lines,
+        colors=colors
+    )
+
+
+if __name__ == "__main__":
+    app.run(debug=True, host="0.0.0.0", port=5000)

webapp/static/style.css

@@ -0,0 +1,293 @@
+/* Reset and base styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html, body {
+    height: 100%;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    font-size: 16px;
+    line-height: 1.5;
+    background: #fff;
+    color: #333;
+    overflow-x: hidden;
+}
+
+/* Navbar */
+.navbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 56px;
+    background: #fff;
+    border-bottom: 1px solid #e0e0e0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 16px;
+    z-index: 1000;
+}
+
+.nav-btn {
+    width: 40px;
+    height: 40px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    transition: background 0.2s;
+}
+
+.nav-btn:hover {
+    background: #f5f5f5;
+}
+
+.nav-btn:active {
+    background: #e0e0e0;
+}
+
+.nav-btn svg {
+    width: 24px;
+    height: 24px;
+    stroke: #555;
+}
+
+.nav-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
+}
+
+/* Main content area */
+.main-content {
+    padding-top: 56px;
+    min-height: 100vh;
+}
+
+/* Lines container */
+.lines-container {
+    padding: 8px 0;
+}
+
+/* Individual line */
+.line {
+    padding: 10px 16px;
+    cursor: pointer;
+    transition: background 0.15s;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.line:hover {
+    background: #f9f9f9;
+}
+
+.line.selected {
+    background: #e3f2fd;
+}
+
+.english {
+    font-size: 16px;
+    line-height: 1.5;
+    color: inherit;
+}
+
+/* Translation card (expanded state) */
+.translation-card {
+    margin-top: 10px;
+    padding: 12px 16px;
+    background: #fff9e6;
+    border-radius: 8px;
+    border-left: 3px solid #ffc107;
+    animation: slideDown 0.2s ease-out;
+}
+
+.meta-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #ffe0b2;
+}
+
+.meta-timestamp {
+    font-size: 11px;
+    color: #999;
+    font-family: monospace;
+}
+
+.meta-speaker {
+    font-size: 11px;
+    font-weight: 600;
+    color: #666;
+}
+
+.translation-label {
+    font-size: 10px;
+    color: #999;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 4px;
+}
+
+.chinese {
+    font-size: 17px;
+    line-height: 1.6;
+    color: #333;
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Side menu */
+.side-menu-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s, visibility 0.3s;
+    z-index: 2000;
+}
+
+.side-menu-overlay.active {
+    opacity: 1;
+    visibility: visible;
+}
+
+.side-menu {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 280px;
+    max-width: 80vw;
+    background: #fff;
+    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+    transform: translateX(100%);
+    transition: transform 0.3s ease-out;
+    z-index: 2001;
+    display: flex;
+    flex-direction: column;
+}
+
+.side-menu.active {
+    transform: translateX(0);
+}
+
+.side-menu-header {
+    height: 56px;
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.side-menu-title {
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.close-btn {
+    width: 40px;
+    height: 40px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+}
+
+.close-btn:hover {
+    background: #f5f5f5;
+}
+
+.close-btn svg {
+    width: 24px;
+    height: 24px;
+    stroke: #555;
+}
+
+.episode-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 8px 0;
+}
+
+.episode-item {
+    display: block;
+    padding: 16px;
+    text-decoration: none;
+    color: #333;
+    border-bottom: 1px solid #f0f0f0;
+    transition: background 0.15s;
+}
+
+.episode-item:hover {
+    background: #f5f5f5;
+}
+
+.episode-item.active {
+    background: #e3f2fd;
+    font-weight: 500;
+}
+
+.episode-id {
+    font-size: 16px;
+}
+
+/* Empty state */
+.empty-state {
+    padding: 40px 16px;
+    text-align: center;
+    color: #999;
+}
+
+/* Mobile optimizations */
+@media (max-width: 480px) {
+    .line {
+        padding: 12px 16px;
+    }
+    
+    .english {
+        font-size: 17px;
+    }
+    
+    .chinese {
+        font-size: 18px;
+    }
+}
+
+/* Hide scrollbar but keep functionality */
+.episode-list::-webkit-scrollbar {
+    width: 6px;
+}
+
+.episode-list::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.episode-list::-webkit-scrollbar-thumb {
+    background: #ccc;
+    border-radius: 3px;
+}

webapp/templates/base.html

@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>{% block title %}Episodes{% endblock %}</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+</head>
+<body>
+    <!-- Navbar -->
+    <nav class="navbar">
+        <button class="nav-btn" id="translateBtn" title="Toggle Translation">
+            <svg viewBox="0 0 24 24" fill="none" stroke-width="2">
+                <path d="M12 20h9"/>
+                <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
+            </svg>
+        </button>
+        <span class="nav-title">{{ current_episode.title if current_episode else "Episodes" }}</span>
+        <button class="nav-btn" id="menuBtn" title="Episodes">
+            <svg viewBox="0 0 24 24" fill="none" stroke-width="2">
+                <path d="M3 12h18"/>
+                <path d="M3 6h18"/>
+                <path d="M3 18h18"/>
+            </svg>
+        </button>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="main-content">
+        {% block content %}{% endblock %}
+    </main>
+
+    <!-- Side Menu Overlay -->
+    <div class="side-menu-overlay" id="sideMenuOverlay"></div>
+
+    <!-- Side Menu -->
+    <aside class="side-menu" id="sideMenu">
+        <div class="side-menu-header">
+            <span class="side-menu-title">Episodes</span>
+            <button class="close-btn" id="closeMenuBtn">
+                <svg viewBox="0 0 24 24" fill="none" stroke-width="2">
+                    <path d="M18 6L6 18"/>
+                    <path d="M6 6l12 12"/>
+                </svg>
+            </button>
+        </div>
+        <div class="episode-list">
+            {% for ep in episodes %}
+            <a href="{{ url_for('episode', episode_id=ep.id) }}" 
+               class="episode-item {% if current_episode and current_episode.id == ep.id %}active{% endif %}">
+                <span class="episode-id">{{ ep.title }}</span>
+            </a>
+            {% endfor %}
+        </div>
+    </aside>
+
+    <!-- Minimal JavaScript for interactions -->
+    <script>
+        (function() {
+            // DOM Elements
+            const translateBtn = document.getElementById('translateBtn');
+            const menuBtn = document.getElementById('menuBtn');
+            const closeMenuBtn = document.getElementById('closeMenuBtn');
+            const sideMenu = document.getElementById('sideMenu');
+            const sideMenuOverlay = document.getElementById('sideMenuOverlay');
+            const lines = document.querySelectorAll('.line');
+
+            let selectedLine = null;
+            let expandedLine = null;
+
+            // Line selection
+            lines.forEach(line => {
+                line.addEventListener('click', function(e) {
+                    // Remove selected class from all lines
+                    lines.forEach(l => l.classList.remove('selected'));
+                    
+                    // Add selected class to clicked line
+                    this.classList.add('selected');
+                    selectedLine = this;
+                });
+            });
+
+            // Toggle translation on selected line
+            translateBtn.addEventListener('click', function() {
+                if (!selectedLine) {
+                    // If no line selected, select the first one
+                    if (lines.length > 0) {
+                        lines[0].classList.add('selected');
+                        selectedLine = lines[0];
+                    }
+                }
+
+                if (selectedLine) {
+                    const translationCard = selectedLine.querySelector('.translation-card');
+                    
+                    if (translationCard) {
+                        // If already expanded, collapse it
+                        translationCard.remove();
+                        expandedLine = null;
+                    } else {
+                        // Collapse any previously expanded line
+                        if (expandedLine) {
+                            const prevCard = expandedLine.querySelector('.translation-card');
+                            if (prevCard) prevCard.remove();
+                        }
+                        
+                        // Expand the selected line
+                        const chineseText = selectedLine.dataset.chinese;
+                        const timestamp = selectedLine.dataset.timestamp;
+                        const speaker = selectedLine.dataset.speaker;
+                        if (chineseText) {
+                            const card = document.createElement('div');
+                            card.className = 'translation-card';
+                            card.innerHTML = `
+                                <div class="meta-info">
+                                    <span class="meta-timestamp">${escapeHtml(timestamp)}</span>
+                                    <span class="meta-speaker">${escapeHtml(speaker)}</span>
+                                </div>
+                                <div class="translation-label">中文</div>
+                                <div class="chinese">${escapeHtml(chineseText)}</div>
+                            `;
+                            selectedLine.appendChild(card);
+                            expandedLine = selectedLine;
+                            
+                            // Scroll the expanded card into view smoothly
+                            setTimeout(() => {
+                                card.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                            }, 100);
+                        }
+                    }
+                }
+            });
+
+            // Open side menu
+            function openMenu() {
+                sideMenu.classList.add('active');
+                sideMenuOverlay.classList.add('active');
+                document.body.style.overflow = 'hidden';
+            }
+
+            // Close side menu
+            function closeMenu() {
+                sideMenu.classList.remove('active');
+                sideMenuOverlay.classList.remove('active');
+                document.body.style.overflow = '';
+            }
+
+            menuBtn.addEventListener('click', openMenu);
+            closeMenuBtn.addEventListener('click', closeMenu);
+            sideMenuOverlay.addEventListener('click', closeMenu);
+
+            // Helper: Escape HTML to prevent XSS
+            function escapeHtml(text) {
+                const div = document.createElement('div');
+                div.textContent = text;
+                return div.innerHTML;
+            }
+
+            // Close menu on escape key
+            document.addEventListener('keydown', function(e) {
+                if (e.key === 'Escape') {
+                    closeMenu();
+                }
+            });
+        })();
+    </script>
+</body>
+</html>

webapp/templates/episode.html

@@ -0,0 +1,22 @@
+{% extends "base.html" %}
+
+{% block title %}{{ current_episode.title }}{% endblock %}
+
+{% block content %}
+<div class="lines-container">
+    {% for line in lines %}
+    <div class="line" 
+         data-chinese="{{ line.chinese | escape }}"
+         data-timestamp="{{ line.timestamp }}"
+         data-speaker="{{ line.speaker }}">
+        <div class="english" {% if line.speaker in colors %}style="color: {{ colors[line.speaker] }}"{% endif %}>
+            {{ line.english }}
+        </div>
+    </div>
+    {% else %}
+    <div class="empty-state">
+        <p>No lines found in this episode.</p>
+    </div>
+    {% endfor %}
+</div>
+{% endblock %}