<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mossawir - Image Optimization App</title>
  <link href="plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
  <link href="style.css?v3" rel="stylesheet"> 
</head>
<body>

  <header>
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <div class="container-fluid">
      <a href="#" class="navLogo">
        <img src="images/komporess-white-logo.webp" class="img-fluid" alt="KompressImg - Ultimate Image Optimizor for Web and Apps" />
      </a>
      <p class="slogan">Optimize Your Assets For SEO</p>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      
    </div>
  </nav>
</header>


  <div class="container my-5"> 

    <div class="row">

      <div class="col-12 col-sm-12 col-md-4">
    <div class="card p-4">
      <!-- File Upload -->
      <input type="file" id="imageUpload" class="form-control" accept="image/*" multiple aria-label="Upload images">
      
      <!-- Output Formats -->
      <div class="mt-3">
        <label class="form-label">Select Output Formats:</label>
        <div>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="formatWebp" value="webp" checked>
            <label class="form-check-label" for="formatWebp">WEBP</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="formatPng" value="png">
            <label class="form-check-label" for="formatPng">PNG</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="formatJpg" value="jpeg">
            <label class="form-check-label" for="formatJpg">JPG</label>
          </div>
        </div>
      </div>

      <!-- Compression Slider -->
      <div class="mt-3">
        <label for="compressionSlider" class="form-label">Compression Level: <span id="sliderValue" class="slider-value">70%</span></label>
        <input type="range" class="form-range" id="compressionSlider" min="0" max="1" step="0.1" value="0.7" aria-label="Compression level">
      </div>

      <!-- Buttons -->
      <button id="convertBtn" class="btn btn-primary mt-3" aria-label="Convert Images">Convert Images</button>
      <button id="resetBtn" class="btn btn-danger mt-3" aria-label="Reset" disabled>Reset</button> 
    </div>

     <!-- Download All Section -->
     <div id="downloadAll" class="text-center mt-4"></div> 

  </div>
  <!-- col-4 -->

  <div class="col-12 col-sm-12 col-md-8">
    <!-- Converted Images Section -->
    <div id="convertedImages">
      <p class="alert alert-warning w-full mb-0">Upload images to optimize.</p>
    </div>
  </div>
  <!-- col-8 -->

  </div>
  <!-- row -->

   
  </div>
  <!-- container -->


<!-- Modal -->
<div id="imageModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <div id="twentytwenty-container">
      <img id="modalImageBefore" src="" alt="Before">
      <img id="modalImageAfter" src="" alt="After">
    </div>
    <div id="modalCompressionInfo"></div>
    <a id="modalDownloadBtn" class="btn btn-success">Download</a>
  </div>
</div>


  <!-- Scripts -->

  <script src="plugins/bootstrap/bootstrap.bundle.min.js"></script>
  
  <script src="plugins/jszip/jszip.min.js"></script>
  <script src="plugins/FileSaver/dist/FileSaver.min.js"></script>

  

  <script src="plugins/jquery/jquery-3.6.0.min.js"></script>
  <!-- twentytwenty CSS -->
  <link href="plugins/twentytwenty/css/twentytwenty.css" rel="stylesheet">

<!-- twentytwenty JS -->
<script src="plugins/twentytwenty/js/jquery.twentytwenty.js"></script>
<script src="plugins/twentytwenty/js/jquery.event.move.js"></script>

  <script src="app.js"></script>
</body>
</html>