---
layout: feature
---
<div class="container-fluid">
    {%- assign boxColor = site.data[page.folderName][page.lang][page.fileName].color -%}
    <div class="custom-box" style="padding-bottom: 250px; padding-top: 0px;" data-color="{{boxColor}}">
        <div style="display:none;" id="file-loader">
            <img src="/assets/images/spinner.gif" alt="loading...">
            <p>Please Wait ,Loading Your file </p>
        </div>

        <div class="file-input">
            <div class="d-flex justify-content-center align-items-center ">
                <div id="Inputbox" class="boxes">
                    <img height="21px" width="21px"
                        src="/assets/images/add.svg">
                    <span class='ml-1'>CHOOSE FILE</span>
                </div>
                <div class="file-pick-dropdown">
                    <i class="fas arrow-sign fa-angle-down"></i>
                    <div class="file-picker-dropdown" style="display: none;">
                        <button id='filepicker'>
                            <img width="18px" height="18px" src="/assets/images/google-drive.png"
                                alt="google-drive-icon">
                        </button>
                        <button id="dropbox">
                            <img width="18px" height="18px" src="/assets/images/dropbox.png" alt="dropbox-icon">
                        </button>
                    </div>
                </div>

            </div>
            <p id="dropfile" class="text-dark">or drop your image here</p>
        </div>
    </div>
    <div class="workspace" style="display: none;">
        <div class="row">
            <div class="col-md-8">
                <div class="files-panel d-none">
                    <div id="saving-data" style="display: none;">
                        <img loading="lazy" src="/img/save.gif" alt="saving"> <span class="ml-2">Saving your
                            images...</span>
                    </div>

                    <!-- <label>
                        <p class="inputfiles-label"> Input files</p> -->
                    <input style="display: none;" onchange="fileOnChange()" type="file" id="file" multiple />
                    <!-- </label> -->

                    <div class="selectedFilesList text-left"></div>
                </div>

                <div class="files-container-box">
                    <div class="add-more-files">
                        <button class="btn add-more-files-button">
                            <input style="display: none;" onchange="fileOnChange2()" type="file" id="file2" multiple />
                            <img src="/assets/images/add.png" alt="add-more-files">
                            Add more files
                        </button>
                    </div>
                    <table class="table files-processing-list m-0"></table>
                </div>
                <div class="justify-content-end align-items-center bottom-section-container">

                    <div class="download-wrapper">
                        <button style="background-color:{{boxColor}};" id="download-zip">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
                                style="width: 20px; height:20px; margin-right:10px; fill:#fff;">
                                <path
                                    d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM382.6 302.6l-103.1 103.1C270.7 414.6 260.9 416 256 416c-4.881 0-14.65-1.391-22.65-9.398L129.4 302.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 306.8V128c0-17.69 14.33-32 32-32s32 14.31 32 32v178.8l49.38-49.38c12.5-12.5 32.75-12.5 45.25 0S395.1 290.1 382.6 302.6z">
                                </path>
                            </svg>
                            Download Zip</button>
                    </div>


                </div>
            </div>
            <div class="col-md-4">
                {{content}}
            </div>
        </div>
    </div>
</div>