index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Block Display Generator – Minecraft Java Command Builder</title>
  <meta name="description" content="Create Minecraft block display commands with live transforms, degree-to-quaternion rotation, auto centering, block states, validation, and one-click copy.">
  <meta name="theme-color" content="#101713">
  <meta name="color-scheme" content="dark">
  <meta property="og:title" content="Minecraft Block Display Generator">
  <meta property="og:description" content="Build ready-to-use Minecraft Java block_display commands with visual transforms and automatic quaternion rotation.">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://yeshan-jun.github.io/block-display-generator/">
  <meta property="og:image" content="https://yeshan-jun.github.io/block-display-generator/assets/icons/icon-512.png">
  <meta name="twitter:card" content="summary">
  <link rel="canonical" href="https://yeshan-jun.github.io/block-display-generator/">
  <link rel="icon" href="./assets/icons/icon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="./assets/icons/icon-192.png">
  <link rel="manifest" href="./manifest.json">
  <link rel="stylesheet" href="./css/styles.css">
  <!-- VARIABLE1 -->
  <!-- VARIABLE2 -->
  <!-- VARIABLE3 -->
  <!-- VARIABLE4 -->
  <!-- VARIABLE5 -->
  <!-- VARIABLE6 -->
  <!-- VARIABLE7 -->
  <!-- VARIABLE8 -->
  <!-- VARIABLE9 -->
</head>
<body>
  <header class="site-header">
    <a class="brand" href="./" aria-label="Block Display Generator home">
      <span class="brand-mark" aria-hidden="true">
        <svg viewBox="0 0 32 32" role="img"><path d="M16 3 28 9.5v13L16 29 4 22.5v-13L16 3Zm0 3.3L8 10.6l8 4.3 8-4.3-8-4.3Zm-9 7v7.4l7.5 4v-7.4L7 13.3Zm10.5 11.4 7.5-4v-7.4l-7.5 4v7.4Z"/></svg>
      </span>
      <span>Block Display Generator</span>
    </a>
    <a class="github-link" href="https://github.com/yeshan-jun/block-display-generator" rel="nofollow noopener" target="_blank" aria-label="Open GitHub repository">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 .7a11.5 11.5 0 0 0-3.64 22.41c.58.1.79-.25.79-.56v-2.24c-3.22.7-3.9-1.37-3.9-1.37-.53-1.34-1.29-1.7-1.29-1.7-1.05-.72.08-.7.08-.7 1.16.08 1.78 1.2 1.78 1.2 1.03 1.77 2.71 1.26 3.37.96.1-.75.4-1.26.73-1.55-2.57-.29-5.27-1.28-5.27-5.68 0-1.26.45-2.28 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.16 1.18a10.95 10.95 0 0 1 5.76 0c2.2-1.49 3.16-1.18 3.16-1.18.63 1.59.23 2.76.11 3.05.74.81 1.19 1.83 1.19 3.09 0 4.41-2.71 5.38-5.29 5.67.42.36.79 1.06.79 2.15v3.19c0 .31.21.67.8.56A11.5 11.5 0 0 0 12 .7Z"/></svg>
      <span>GitHub</span>
    </a>
  </header>

  <main>
    <section class="intro" aria-labelledby="page-title">
      <h1 id="page-title">Minecraft Block Display Generator</h1>
      <p>Build a ready-to-use <code>block_display</code> command with visual transforms, automatic quaternion rotation, and block-state controls.</p>
    </section>

    <section class="generator-shell" aria-label="Block display command generator">
      <form class="controls-panel" id="generator-form" novalidate>
        <div class="control-section control-section-primary">
          <div class="section-heading">
            <div>
              <span class="eyebrow">Block</span>
              <h2>Choose what to display</h2>
            </div>
            <label class="compact-field">
              <span>Java version</span>
              <select id="minecraft-version" name="minecraft-version">
                <option value="26.2" selected>26.2</option>
                <option value="26.1">26.1</option>
                <option value="1.21.11">1.21.11</option>
                <option value="1.21.9">1.21.9</option>
                <option value="1.21.8">1.21.8</option>
                <option value="1.21.5">1.21.5</option>
                <option value="1.21.4">1.21.4</option>
                <option value="1.20.6">1.20.6</option>
                <option value="1.20.4">1.20.4</option>
                <option value="1.19.4">1.19.4</option>
              </select>
            </label>
          </div>

          <label class="field full-field">
            <span>Block ID</span>
            <div class="input-with-icon">
              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m21 21-4.35-4.35m1.35-5.15A6.5 6.5 0 1 1 5 11.5a6.5 6.5 0 0 1 13 0Z"/></svg>
              <input id="block-id" name="block-id" list="block-options" value="minecraft:stone" autocomplete="off" spellcheck="false" aria-describedby="block-help">
              <datalist id="block-options"></datalist>
            </div>
            <small id="block-help">Type a namespaced ID or search a common block.</small>
          </label>

          <div id="block-states" class="block-states" aria-live="polite"></div>

          <label class="field full-field custom-states-field">
            <span>Custom block states <em>optional</em></span>
            <input id="custom-states" name="custom-states" placeholder="facing=east,half=bottom" spellcheck="false">
          </label>
        </div>

        <div class="control-section">
          <div class="section-heading simple-heading">
            <div><span class="eyebrow">Position</span><h2>Place the entity</h2></div>
          </div>
          <div class="axis-grid">
            <label class="field"><span>X</span><input id="pos-x" value="~" inputmode="decimal" spellcheck="false"></label>
            <label class="field"><span>Y</span><input id="pos-y" value="~" inputmode="decimal" spellcheck="false"></label>
            <label class="field"><span>Z</span><input id="pos-z" value="~" inputmode="decimal" spellcheck="false"></label>
          </div>
        </div>

        <div class="control-section">
          <div class="section-heading">
            <div><span class="eyebrow">Scale</span><h2>Resize the block</h2></div>
            <label class="toggle-control"><input type="checkbox" id="lock-scale" checked><span>Lock ratio</span></label>
          </div>
          <div class="axis-grid">
            <label class="field"><span>X</span><input id="scale-x" type="number" value="1" min="0.001" step="0.1"></label>
            <label class="field"><span>Y</span><input id="scale-y" type="number" value="1" min="0.001" step="0.1"></label>
            <label class="field"><span>Z</span><input id="scale-z" type="number" value="1" min="0.001" step="0.1"></label>
          </div>
        </div>

        <div class="control-section two-column-section">
          <div>
            <div class="section-heading simple-heading"><div><span class="eyebrow">Rotation</span><h2>Rotate in degrees</h2></div></div>
            <div class="inline-grid rotation-grid">
              <label class="field"><span>Axis</span>
                <select id="rotation-axis">
                  <option value="x">X</option>
                  <option value="y" selected>Y</option>
                  <option value="z">Z</option>
                  <option value="custom">Custom</option>
                </select>
              </label>
              <label class="field"><span>Degrees</span><div class="suffix-input"><input id="rotation-degrees" type="number" value="0" step="15"><span>°</span></div></label>
            </div>
            <div class="axis-grid custom-axis" id="custom-axis" hidden>
              <label class="field"><span>Axis X</span><input id="axis-x" type="number" value="0" step="0.1"></label>
              <label class="field"><span>Axis Y</span><input id="axis-y" type="number" value="1" step="0.1"></label>
              <label class="field"><span>Axis Z</span><input id="axis-z" type="number" value="0" step="0.1"></label>
            </div>
          </div>
          <div>
            <div class="section-heading simple-heading"><div><span class="eyebrow">Anchor</span><h2>Control the origin</h2></div></div>
            <label class="field full-field">
              <span>Anchor preset</span>
              <select id="anchor">
                <option value="bottom-corner">Bottom corner</option>
                <option value="bottom-center">Bottom center</option>
                <option value="center" selected>Center</option>
                <option value="top-center">Top center</option>
                <option value="custom">Custom translation only</option>
              </select>
            </label>
          </div>
        </div>

        <div class="control-section">
          <div class="section-heading simple-heading"><div><span class="eyebrow">Translation</span><h2>Fine-tune the offset</h2></div></div>
          <div class="axis-grid">
            <label class="field"><span>X</span><input id="translation-x" type="number" value="0" step="0.05"></label>
            <label class="field"><span>Y</span><input id="translation-y" type="number" value="0" step="0.05"></label>
            <label class="field"><span>Z</span><input id="translation-z" type="number" value="0" step="0.05"></label>
          </div>
        </div>

        <div class="control-section entity-section">
          <label class="field full-field">
            <span>Entity tag</span>
            <input id="entity-tag" value="bdg_stone_001" spellcheck="false">
            <small>Used by the generated Update and Kill commands.</small>
          </label>
          <button type="button" class="secondary-button" id="reset-button">Reset</button>
        </div>
      </form>

      <aside class="preview-panel" aria-label="Preview and generated commands">
        <div class="preview-card">
          <div class="preview-header">
            <div><span class="eyebrow">Live preview</span><h2 id="preview-title">minecraft:stone</h2></div>
            <span class="version-chip" id="preview-version">Java 26.2</span>
          </div>
          <div class="scene" aria-label="3D transform preview">
            <div class="floor-grid"></div>
            <div class="origin-dot" title="Entity origin"></div>
            <div class="cube-wrap" id="preview-cube">
              <div class="cube">
                <div class="cube-face front"></div><div class="cube-face back"></div>
                <div class="cube-face right"></div><div class="cube-face left"></div>
                <div class="cube-face top"></div><div class="cube-face bottom"></div>
              </div>
            </div>
          </div>
          <div class="transform-readout">
            <div><span>Scale</span><strong id="readout-scale">1 × 1 × 1</strong></div>
            <div><span>Rotation</span><strong id="readout-rotation">0° · Y</strong></div>
            <div><span>Quaternion</span><strong id="readout-quaternion">0, 0, 0, 1</strong></div>
            <div><span>Translation</span><strong id="readout-translation">0, 0, 0</strong></div>
          </div>
        </div>

        <div id="status-panel" class="status-panel status-ready" role="status" aria-live="polite">
          <span class="status-icon" aria-hidden="true">✓</span>
          <div><strong>Ready for Minecraft Java 26.2</strong><span>Command inputs are valid.</span></div>
        </div>

        <div class="command-stack">
          <article class="command-card">
            <div class="command-heading"><div><span>Summon</span><small>Create the block display</small></div><button type="button" class="copy-button" data-copy="summon-command">Copy</button></div>
            <code id="summon-command" class="command-output"></code>
          </article>
          <article class="command-card">
            <div class="command-heading"><div><span>Update</span><small>Apply the current block and transform</small></div><button type="button" class="copy-button" data-copy="update-command">Copy</button></div>
            <code id="update-command" class="command-output"></code>
          </article>
          <article class="command-card">
            <div class="command-heading"><div><span>Remove</span><small>Kill displays with this tag</small></div><button type="button" class="copy-button" data-copy="kill-command">Copy</button></div>
            <code id="kill-command" class="command-output"></code>
          </article>
        </div>
        <div id="copy-feedback" class="copy-feedback" aria-live="polite"></div>
      </aside>
    </section>

    <section class="below-tool" aria-label="Block display generator guide">
      <div>
        <span class="eyebrow">Fast workflow</span>
        <h2>From block choice to working command</h2>
      </div>
      <ol class="steps">
        <li><strong>Choose a block</strong><span>Search a common ID or enter any valid Minecraft block ID and set its block states.</span></li>
        <li><strong>Transform visually</strong><span>Set scale, rotation in degrees, anchor, and translation while the preview updates instantly.</span></li>
        <li><strong>Copy the result</strong><span>Use Summon to create it, Update to change it, and Remove to clean up by entity tag.</span></li>
      </ol>
    </section>
  </main>

  <footer>© 2026 Block Display Generator</footer>
  <script type="module" src="./js/app.js"></script>
</body>
</html>