diff --git a/web/templates/card_creator.html b/web/templates/card_creator.html
index 784aaa1..2af5e99 100644
--- a/web/templates/card_creator.html
+++ b/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);
{% endblock %}
\ No newline at end of file