Select Text read_text.html

merge_novel_videos.html

{% extends 'mk_novel.html' %}
{% block title %} - My Blog{% endblock %}
{% block content %}
<style>
    body {
        background-color: #2C2C2C;
        color: white;
        font-family: Arial, sans-serif;
    }

    /* Container to keep videos within the viewport and enable scrolling */
    .video-container {
        display: flex;
        gap: 10px; /* Space between videos */
        overflow-x: auto; /* Enables horizontal scrolling */
        max-width: 100vw; /* Ensure container does not exceed viewport width */
        padding: 20px;
        justify-content: flex-start;
        margin: 0 auto; /* Center container horizontally */
    }

    /* Styling for video items */
    .video-item {
        flex: 0 0 320px; /* Fixes each video item to a consistent width */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 10px;
        background-color: rgba(170, 160, 150, 0.5);
        border-radius: 5px;
        min-width: 300px; /* Sets a minimum width for the video items */
        max-width: 320px; /* Sets a maximum width for the video items */
    }

    /* Ensure video width fits within its container */
    video {
        width: 100%;
        max-width: 300px;
        height: auto;
    }
</style>

<main class="video-gallery">
    <!-- Form for selecting videos to concatenate -->
    <form action="/concatenate_novel" method="POST">
        <h2>Select 1st and 2nd Videos</h2>
        <div class="video-container">
            {% for video in mp4_files %}
                <div class="video-item">
                    <video controls>
                        <source src="{{ video }}" type="video/mp4">
                    </video>
                    <p>{{ video[-20:-4] }}</p>
                    <!-- Radio buttons for selecting 1st and 2nd video -->
                    <label>
                        <input type="radio" name="video1" value="{{ video }}" required>
                        Select as 1st Video
                    </label><br>
                    <label>
                        <input type="radio" name="video2" value="{{ video }}" required>
                        Select as 2nd Video
                    </label>
                </div>
            {% endfor %}
        </div>
        
        <button type="submit">Concatenate Videos</button>
    </form>
</main>
{% endblock %}