function copyResultImageToClipboard() {
  try {
    const $title = $("#title").clone().wrap('<div class="row"></div>');
    $("#result-page").prepend($title.parent());

    const backgroundColor =
      getComputedStyle($(".container")[0]).backgroundColor;
    htmlToImage.toBlob($("#result-page")[0], {
      skipFonts: true,
      preferredFontFormat: "woff2",
      backgroundColor: backgroundColor, // Set background color dynamically
    }).then((blob) => {
      navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
      showCopiedNotice();
      $title.parent().remove();
    }).catch((error) => {
      console.error("Error converting result page to image:", error);
      $title.parent().remove();
    });
  } catch (error) {
    console.error("Error copying result image to clipboard:", error);
  }
}

function showCopiedNotice() {
  const notice = $("<div>", {
    text: "Copied to clipboard!",
    css: {
      position: "fixed",
      bottom: "20px",
      right: "20px",
      padding: "10px 20px",
      backgroundColor: "rgba(0, 0, 0, 0.7)",
      color: "#fff",
      borderRadius: "5px",
      zIndex: 1000,
    },
  });

  $("body").append(notice);

  setTimeout(() => {
    notice.fadeOut(300, () => {
      notice.remove();
    });
  }, 3000);
}