templates/index.html

{% extends "base.html" %}

{% block content %}
    <div class="story-card">
        <h2 class="story-title">
            {{ story_emoji }} {{ selected_story_title.replace(story_emoji + " ", "") }}
            <span style="font-size: 0.8em; color: #7f8c8d;">Scene {{ current_scene_index + 1 }} of {{ total_scenes }}</span>
        </h2>

        <div class="progress-bar-container">
            <div class="progress-fill" style="width: {{ progress_percentage }}%;"></div>
        </div>
    </div>

    <div class="story-content-wrapper">
        <p>{{ scene_text }}</p>
    </div>

    <div class="audio-button-container">
        <!-- Use a dynamic ID for the button to avoid conflicts if multiple audio buttons were on a page -->
        <button class="audio-btn" id="audio-btn-{{ current_scene_index }}" onclick="playAudio('{{ scene_text | e }}', 'audio-btn-{{ current_scene_index }}')">
            🔊 Listen to Story
        </button>
    </div>

    <form action="{{ url_for('index') }}" method="POST" class="btn-group">
        <button type="submit" name="navigate_prev" class="btn nav-btn" {% if current_scene_index == 0 %}disabled{% endif %}>
            ⬅️ Previous
        </button>
        <button type="submit" name="navigate_next" class="btn nav-btn" {% if current_scene_index == total_scenes - 1 %}disabled{% endif %}>
            Next ➡️
        </button>
    </form>

    {% if current_scene_index == total_scenes - 1 %}
        <div style="text-align: center; padding: 2rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                    border-radius: 15px; color: white; margin: 2rem 0;">
            <h2>🎉 Story Complete!</h2>
            <p>You've finished this amazing journey. Thanks for reading!</p>
        </div>
    {% endif %}

{% endblock %}