kemoverse/web/templates/card_creator.html

{% 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 %}