first version of the card creator
This commit is contained in:
parent
2d7107e745
commit
fb658d00dc
2 changed files with 138 additions and 0 deletions
|
|
@ -66,6 +66,10 @@ def about():
|
||||||
def submit_character():
|
def submit_character():
|
||||||
return render_template('submit.html')
|
return render_template('submit.html')
|
||||||
|
|
||||||
|
@app.route('/card_creator')
|
||||||
|
def card():
|
||||||
|
return render_template('card_creator.html')
|
||||||
|
|
||||||
|
|
||||||
if __name__ == '__main__':
|
if __name__ == '__main__':
|
||||||
app.run(host='0.0.0.0', port=5000, debug=True)
|
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