WIP: Card Creator #51
2 changed files with 138 additions and 0 deletions
|
|
@ -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)
|
||||
|
|
|
|||
134
web/templates/card_creator.html
Normal file
134
web/templates/card_creator.html
Normal file
|
|
@ -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 %}
|
||||
Loading…
Add table
Reference in a new issue