Add JSON download button for card information in card creator

web/templates/card_creator.html

@@ -226,5 +226,29 @@ downloadBtn.addEventListener("click", () => {
   link.href = canvas.toDataURL("image/webp", 0.95);
   link.click();
 });
+
+// Create and place the JSON download button below the card download button
+const jsonBtn = document.createElement("button");
+jsonBtn.textContent = "Download Card Info";
+jsonBtn.style.marginTop = "0.5rem";
+jsonBtn.onclick = () => {
+  const cardData = {
+    name: nameInput.value,
+    pack: packInput.value,
+    power: powerInput.value,
+    charm: charmInput.value,
+    wit: witInput.value,
+    flavor: flavorInput.value,
+    artist: artistInput.value,
+    frame: frameSelect.value
+  };
+  const blob = new Blob([JSON.stringify(cardData, null, 2)], {type: "application/json"});
+  const link = document.createElement("a");
+  link.href = URL.createObjectURL(blob);
+  link.download = "kemoverse-card.json";
+  link.click();
+};
+// Place the button below the downloadBtn
+downloadBtn.parentNode.insertBefore(jsonBtn, downloadBtn.nextSibling);
 </script>
 {% endblock %}