From fb658d00dc23196309489c96fb82a5055f36bad5 Mon Sep 17 00:00:00 2001
From: w <waifuism@tutanota.com>
Date: Mon, 9 Jun 2025 01:02:48 -0300
Subject: [PATCH] first version of the card creator

---
 web/app.py                      |   4 +
 web/templates/card_creator.html | 134 ++++++++++++++++++++++++++++++++
 2 files changed, 138 insertions(+)
 create mode 100644 web/templates/card_creator.html

diff --git a/web/app.py b/web/app.py
index 61ed38f..9c5965c 100644
--- a/web/app.py
+++ b/web/app.py
@@ -66,6 +66,10 @@ def about():
 def submit_character():
     return render_template('submit.html')
 
+@app.route('/card_creator')
+def card():
+    return render_template('card_creator.html')
+
 
 if __name__ == '__main__':
     app.run(host='0.0.0.0', port=5000, debug=True)
diff --git a/web/templates/card_creator.html b/web/templates/card_creator.html
new file mode 100644
index 0000000..9d06fbb
--- /dev/null
+++ b/web/templates/card_creator.html
@@ -0,0 +1,134 @@
+{% extends "_base.html" %}
+
+{% block content %}
+<style>
+  #cardOutput svg {
+    width: 100%;
+    height: auto;
+    max-width: 400px;
+  }
+
+  button {
+    background: #6aa1ff;
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    font-weight: bold;
+    border-radius: 8px;
+    cursor: pointer;
+  }
+
+  button:hover {
+    background: #4c87e4;
+  }
+
+  input, textarea {
+    padding: 0.5rem;
+    font-size: 1rem;
+    border-radius: 8px;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+  }
+
+  input[type="file"] {
+    padding: 0;
+  }
+</style>
+<div class="container" style="max-width: 1100px; margin: auto; padding: 2rem;">
+
+  <h1 style="margin-bottom: 2rem;">Card Creator</h1>
+
+  <div style="display: flex; gap: 2rem; align-items: flex-start;">
+  
+    <!-- Left: Inputs -->
+    <div style="flex: 1;">
+      <input type="text" id="name" placeholder="Card Name" style="width: 100%; margin-bottom: 0.5rem;"><br>
+      <input type="number" id="power" placeholder="⚡ Power" min="0" max="999" style="width: 100%; margin-bottom: 0.5rem;"><br>
+      <input type="number" id="charm" placeholder="❤️ Charm" min="0" max="999" style="width: 100%; margin-bottom: 0.5rem;"><br>
+      <input type="number" id="popularity" placeholder="💫 Popularity" min="0" max="999" style="width: 100%; margin-bottom: 0.5rem;"><br>
+      <input type="text" id="rarity" placeholder="Rarity (R / SR / SSR)" style="width: 100%; margin-bottom: 0.5rem;"><br>
+      <textarea id="flavor" placeholder="Flavor text..." rows="4" style="width: 100%; margin-bottom: 0.5rem;"></textarea><br>
+      <input type="file" id="uploadArt" style="margin-bottom: 0.5rem;"><br>
+      <button onclick="generateCard()">✨ Create Card</button>
+    </div>
+ <!-- Right: SVG Card Output -->
+    <div id="cardOutput" style="flex: 1; border: 1px solid #ccc; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
+      <!-- SVG will go here -->
+    </div>
+  <!-- Hidden SVG Template -->
+  <template id="svgTemplate">
+    <!-- Paste your full SVG here, with placeholders like:
+         [Card Name], ⚡ 99, ❤️ 99, 💫 99, SSR, [Flavor Text], and [Art Image Here]
+    -->
+    <svg xmlns="http://www.w3.org/2000/svg" width="800" height="1120" viewBox="0 0 800 1120">
+      <defs>
+        <clipPath id="artClip">
+          <rect x="50" y="110" width="700" height="700" rx="20" ry="20"/>
+        </clipPath>
+      </defs>
+
+      <!-- Card Background -->
+      <rect x="0" y="0" width="800" height="1120" rx="40" ry="40" fill="#f9f9f9" stroke="#000" stroke-width="4"/>
+
+      <!-- Name Bar -->
+      <rect x="0" y="0" width="800" height="100" fill="#eee"/>
+      <text x="400" y="65" font-size="42" font-family="sans-serif" text-anchor="middle" fill="#222" id="cardName">[Card Name]</text>
+
+      <!-- Art Zone -->
+      <rect x="50" y="110" width="700" height="700" fill="#ddd"/>
+      <text x="400" y="470" font-size="24" font-family="sans-serif" text-anchor="middle" fill="#999" id="artPlaceholder">[Art Image Here]</text>
+
+      <!-- Stats -->
+      <text x="200" y="860" font-size="32" font-family="sans-serif" text-anchor="middle" fill="gold" id="powerStat">⚡ 99</text>
+      <text x="400" y="860" font-size="32" font-family="sans-serif" text-anchor="middle" fill="red" id="charmStat">❤️ 99</text>
+      <text x="600" y="860" font-size="32" font-family="sans-serif" text-anchor="middle" fill="blue" id="popularityStat">💫 99</text>
+
+      <!-- Flavor Text -->
+      <rect x="50" y="890" width="700" height="130" fill="#fff8e1" stroke="#000" stroke-width="1"/>
+      <text x="400" y="960" font-size="20" font-family="serif" text-anchor="middle" fill="#444" id="flavorText">[Flavor Text]</text>
+
+      <!-- Rarity Marker -->
+      <text x="750" y="70" font-size="48" font-family="sans-serif" text-anchor="end" fill="#a0a" id="rarityMark">SSR</text>
+
+      <!-- Series Footer -->
+      <text x="400" y="1110" font-size="18" font-family="sans-serif" text-anchor="middle" fill="#888">From the Fediverse Gacha Series</text>
+    </svg>
+  </template>
+</div>
+
+<script>
+function generateCard() {
+  const template = document.getElementById("svgTemplate");
+  const svg = template.content.cloneNode(true);
+
+  svg.getElementById("cardName").textContent = document.getElementById("name").value;
+  svg.getElementById("powerStat").textContent = `⚡ ${document.getElementById("power").value}`;
+  svg.getElementById("charmStat").textContent = `❤️ ${document.getElementById("charm").value}`;
+  svg.getElementById("popularityStat").textContent = `💫 ${document.getElementById("popularity").value}`;
+  svg.getElementById("rarityMark").textContent = document.getElementById("rarity").value;
+  svg.getElementById("flavorText").textContent = document.getElementById("flavor").value;
+
+  const artPlaceholder = svg.getElementById("artPlaceholder");
+  const file = document.getElementById("uploadArt").files[0];
+  if (file) {
+    const reader = new FileReader();
+    reader.onload = function(e) {
+      const img = document.createElementNS("http://www.w3.org/2000/svg", "image");
+      img.setAttributeNS(null, "href", e.target.result);
+      img.setAttributeNS(null, "x", 50);
+      img.setAttributeNS(null, "y", 110);
+      img.setAttributeNS(null, "width", 700);
+      img.setAttributeNS(null, "height", 700);
+      img.setAttributeNS(null, "clip-path", "url(#artClip)");
+      artPlaceholder.replaceWith(img);
+      document.getElementById("cardOutput").innerHTML = '';
+      document.getElementById("cardOutput").appendChild(svg);
+    };
+    reader.readAsDataURL(file);
+  } else {
+    document.getElementById("cardOutput").innerHTML = '';
+    document.getElementById("cardOutput").appendChild(svg);
+  }
+}
+</script>
+{% endblock %}
\ No newline at end of file