---
layout: appscms-feature
---

<div class="container-fluid mt-4">
  {%- assign boxColor =
  site.data[page.folderName][page.lang][page.fileName].color -%}
  <div class="custom-box" style="padding-top: 0px" data-color="{{boxColor}}">
    <div style="display: none" id="file-loader">
      <img
        src="/assets/images/spinner.gif"
        alt="loading..."
        {%-
        if
        site.crossorigin
        -%}
        crossorigin
        {%-
        endif
        -%}
      />
      <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"
            {%-
            if
            site.crossorigin
            -%}
            crossorigin
            {%-
            endif
            -%}
          />
          <span class="ml-1">CHOOSE FILES</span>
        </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
              {%-
              if
              site.crossorigin
              -%}
              crossorigin
              {%-
              endif
              -%}
              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
                {%-
                if
                site.crossorigin
                -%}
                crossorigin
                {%-
                endif
                -%}
                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:{{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>