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