templates/form_content.html

<div class="form-container">
    <div class="image-preview">
        <div id="preview-container"></div>
        <p id="preview-text">Image Preview</p>
    </div>
    <div class="form-fields">
        <form id="watermark-form" method="post" action="/upload" enctype="multipart/form-data">
            <div class="form-group">
                <label for="files">Images to be Watermarked:</label>
                <div class="file-input-wrapper">
                    <button class="btn-file-input" type="button">Choose files</button>
                    <input type="file" id="files" name="files" multiple style="display: none;">
                    <span class="file-name">No files selected</span>
                </div>
            </div>
            <div class="form-group">
                <label for="watermark-text">Watermark Text:</label>
                <input type="text" name="watermark_text" id="watermark-text">
            </div>
            <div class="form-group">
                <label for="text-position">Text Position:</label>
                <select name="text_position" id="text-position">
                    <option value="top-left">Top Left</option>
                    <option value="top-right">Top Right</option>
                    <option value="center">Center</option>
                    <option value="bottom-left">Bottom Left</option>
                    <option value="bottom-right">Bottom Right</option>
                </select>
            </div>
            <div class="form-group">
                <label for="text-transparency">Text Transparency (0-100):</label>
                <input type="range" name="text_transparency" id="text-transparency" value="100" min="0" max="100">
            </div>
            <div class="form-group">
                <label for="text-size">Text Size (0.1-5.0):</label>
                <input type="range" step="0.1" name="text_size" id="text-size" value="1.0" min="0.1" max="5.0">
            </div>
            <div class="form-group">
                <label for="watermark-image">Watermark Image:</label>
                <div class="file-input-wrapper">
                    <button class="btn-file-input" type="button">Choose file</button>
                    <input type="file" id="watermark-image" name="watermark_image" style="display: none;">
                    <span class="file-name">No file selected</span>
                </div>
            </div>
            <div class="form-group">
                <label for="image-position">Image Position:</label>
                <select name="image_position" id="image-position">
                    <option value="top-left">Top Left</option>
                    <option value="top-right">Top Right</option>
                    <option value="center">Center</option>
                    <option value="bottom-left">Bottom Left</option>
                    <option value="bottom-right">Bottom Right</option>
                </select>
            </div>
            <div class="form-group">
                <label for="image-transparency">Image Transparency (0-100):</label>
                <input type="range" name="image_transparency" id="image-transparency" value="100" min="0" max="100">
            </div>
            <div class="form-group">
                <label for="image-size">Image Size (0.1-5.0):</label>
                <input type="range" step="0.1" name="image_size" id="image-size" value="1.0" min="0.1" max="5.0">
            </div>
            <button type="submit">Apply Watermark</button>
        </form>
    </div>
</div>