<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Niqabberizer</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 20px;
    }
    #canvas-container {
      position: relative;
      display: inline-block;
    }
    canvas {
      border: 1px solid #ccc;
    }
    input, button {
      margin: 10px;
    }
  </style>
</head>
<body>
  <h1>Niqabberizer</h1>
  <input type="file" id="upload" accept="image/*" />
  <br />
  <button id="overlay-btn">Niqab</button>
  <button id="save-btn">Save</button>
  <button id="desaturate-btn">Desaturate</button>
  <br />
  <div id="canvas-container">
    <canvas id="canvas"></canvas>
  </div>

  <script>
    const uploadInput = document.getElementById('upload');
    const overlayBtn = document.getElementById('overlay-btn');
    const saveBtn = document.getElementById('save-btn');
    const desaturateBtn = document.getElementById('desaturate-btn');
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    let userImage = new Image();
    let overlayImage = new Image();
    let overlayVisible = false;

    // Load your overlay image here (replace 'overlay.png' with your image path)
    overlayImage.src = 'niqab.png';

    uploadInput.addEventListener('change', (e) => {
      const file = e.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = function (event) {
          userImage.onload = () => {
            let maxWidth = 1000;
            let maxHeight = 1000;
            let width = userImage.width;
            let height = userImage.height;

            // Calculate the new dimensions while maintaining the aspect ratio
            if (width > height) {
              if (width > maxWidth) {
                height *= maxWidth / width;
                width = maxWidth;
              }
            } else {
              if (height > maxHeight) {
                width *= maxHeight / height;
                height = maxHeight;
              }
            }

            canvas.width = width;
            canvas.height = height;
            ctx.drawImage(userImage, 0, 0, width, height);
            overlayVisible = false; // Reset overlay visibility
          };
          userImage.src = event.target.result;
        };
        reader.readAsDataURL(file);
      }
    });

    overlayBtn.addEventListener('click', () => {
      if (userImage.src) {
        if (overlayVisible) {
          // Redraw the user image to remove the overlay
          ctx.drawImage(userImage, 0, 0, canvas.width, canvas.height);
          overlayVisible = false;
        } else {
          // Draw the overlay
          let overlaySize = Math.min(canvas.width, canvas.height);
          let overlayX = (canvas.width - overlaySize) / 2;
          let overlayY = canvas.height - overlaySize;
          ctx.drawImage(overlayImage, overlayX, overlayY, overlaySize, overlaySize);
          overlayVisible = true;
        }
      }
    });

    desaturateBtn.addEventListener('click', () => {
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      const data = imageData.data;

      for (let i = 0; i < data.length; i += 4) {
        const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
        data[i] = avg; // red
        data[i + 1] = avg; // green
        data[i + 2] = avg; // blue
      }

      ctx.putImageData(imageData, 0, 0);
    });

    saveBtn.addEventListener('click', () => {
      const link = document.createElement('a');
      link.download = 'overlayed-image.png';
      link.href = canvas.toDataURL();
      link.click();
    });
  </script>
</body>
</html>