waifu/kemoverse
waifu/kemoverse
3
2
Fork 3
Code Issues 12 Pull requests 1 Projects 1 Releases Packages Wiki Activity

Enhance card creator UI with instructions and clarifications for users

Browse source
This commit is contained in:
w 2025-07-20 00:17:28 -03:00
parent da68928f12
commit da27513334
1 changed files with 8 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
web/templates/card_creator.html
View file

@ -34,13 +34,18 @@
<h1 style="margin-bottom: 2rem;">Card Creator</h1> <h1 style="margin-bottom: 2rem;">Card Creator</h1>
<div style="display: flex; gap: 2rem; align-items: flex-start;"> <div style="display: flex; gap: 2rem; align-items: flex-start;">
<!-- Left: Inputs --> <!-- Left: Inputs -->
<div style="flex: 1;"> <div style="flex: 1;">
<p>Use this tool to create custom Kemoverse cards! Fill in the details below, upload your art, and generate a card image.</p>
<p>Note: The card ID is generated based on the details, so make sure to fill them out!</p>
<input type="text" id="nameInput" placeholder="Card Name" style="width: 100%; margin-bottom: 0.5rem;"><br> <input type="text" id="nameInput" placeholder="Card Name" style="width: 100%; margin-bottom: 0.5rem;"><br>
<input type="text" id="packInput" placeholder="Card Name" style="width: 100%; margin-bottom: 0.5rem;"><br> <input type="text" id="packInput" placeholder="Pack name" style="width: 100%; margin-bottom: 0.5rem;"><br>
<input type="number" id="powerInput" placeholder="⚡ Power" min="0" max="999" style="width: 100%; margin-bottom: 0.5rem;"><br> <input type="number" id="powerInput" placeholder="⚡ Power" min="0" max="999" style="width: 100%; margin-bottom: 0.5rem;"><br>
<input type="number" id="charmInput" placeholder="❤️ Charm" min="0" max="999" style="width: 100%; margin-bottom: 0.5rem;"><br> <input type="number" id="charmInput" placeholder="❤️ Charm" min="0" max="999" style="width: 100%; margin-bottom: 0.5rem;"><br>
<input type="number" id="witInput" placeholder="💫 Wit" min="0" max="999" style="width: 100%; margin-bottom: 0.5rem;"><br> <input type="number" id="witInput" placeholder="💫 Wit" min="0" max="999" style="width: 100%; margin-bottom: 0.5rem;"><br>
@ -55,6 +60,7 @@
<option value="v1_legendary.png">Legendary</option> <option value="v1_legendary.png">Legendary</option>
</select> </select>
<button id="downloadBtn" onclick="generateCard()">✨ Create Card</button> <button id="downloadBtn" onclick="generateCard()">✨ Create Card</button>
<p>All the processing is done in your browser, no data is sent to the server.</p>
</div> </div>
<!-- Right: SVG Card Output --> <!-- Right: SVG Card Output -->
<div id="cardOutput" style="flex: 1; border: 1px solid #ccc; border-radius: 16px; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1);"> <div id="cardOutput" style="flex: 1; border: 1px solid #ccc; border-radius: 16px; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">