Untitled

document.addEventListener("DOMContentLoaded", function () {
  const imageInput = document.getElementById("imageInput");
  const colorCodesContainer = document.getElementById("colorCodes");
  const getColorButton = document.getElementById("getColorButton");
  const imagePreview = document.getElementById("imagePreview");

  document
    .querySelector(".image-input-container")
    .addEventListener("click", function () {
      imageInput.click();
    });

  imageInput.addEventListener("change", function (e) {
    const file = e.target.files[0];
    if (file) {
      const fileName = file.name;
      document.querySelector(".text-gray-500").textContent = fileName;

      const reader = new FileReader();
      reader.onload = function () {
        imagePreview.src = reader.result;
        imagePreview.classList.remove("hidden");
      };
      reader.readAsDataURL(file);
    }
  });

  getColorButton.addEventListener("click", function () {
    const file = imageInput.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = function () {
        const image = new Image();
        image.src = reader.result;

        image.onload = function () {
          const canvas = document.createElement("canvas");
          const ctx = canvas.getContext("2d");
          canvas.width = image.width;
          canvas.height = image.height;
          ctx.drawImage(image, 0, 0, image.width, image.height);

          const imageData = ctx.getImageData(
            0,
            0,
            image.width,
            image.height
          ).data;
          const colorCounts = {};

          for (let i = 0; i < imageData.length; i += 4) {
            const color = `rgb(${imageData[i]}, ${imageData[i + 1]}, ${
              imageData[i + 2]
            })`;
            colorCounts[color] = (colorCounts[color] || 0) + 1;
          }

          const sortedColors = Object.keys(colorCounts).sort(
            (a, b) => colorCounts[b] - colorCounts[a]
          );

          colorCodesContainer.innerHTML = "";
          const maxColorsToShow = 10;

          for (
            let i = 0;
            i < Math.min(maxColorsToShow, sortedColors.length);
            i++
          ) {
            const color = sortedColors[i];
            const colorBox = document.createElement("div");
            colorBox.style.backgroundColor = color;
            colorBox.style.width = "50px";
            colorBox.style.height = "50px";
            colorBox.classList.add("rounded", "shadow", "color-code");
            colorBox.setAttribute("data-clipboard-text", color);
            colorBox.addEventListener("click", copyColorCode);

            colorCodesContainer.appendChild(colorBox);
          }
        };
      };
      reader.readAsDataURL(file);
    }
  });

  function copyColorCode(event) {
    const colorCode = event.target.getAttribute("data-clipboard-text");
    const tempTextArea = document.createElement("textarea");
    tempTextArea.value = colorCode;
    document.body.appendChild(tempTextArea);
    tempTextArea.select();
    document.execCommand("copy");
    document.body.removeChild(tempTextArea);

    const copyMessage = document.createElement("div");
    copyMessage.innerText = "Color code copied!";
    copyMessage.classList.add(
      "bg-green-300",
      "text-green-900",
      "text-sm",
      "py-2",
      "px-4",
      "rounded",
      "absolute",
      "bottom-0",
      "right-0",
      "mr-6",
      "mb-6"
    );
    document.body.appendChild(copyMessage);

    setTimeout(function () {
      copyMessage.remove();
    }, 2000);
  }
});