index.htm

<!DOCTYPE html>
<html>
<head>
    <title>Minecraft Armor stand</title>
    <meta charset="utf-8">
    <meta name="description" content="Create poses for Minecraft armor stands in a breeze! Free, fast, open source.">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="js/colpick.css">
    <link rel="icon" type="image/png" href="images/icon.png">

    <link href='https://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script data-goatcounter="https://haselkern.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
</head>
<body>
    <script src="js/colpick.js"></script>
    <script src="js/main.js"></script>

    <div id="gl"></div>

    <div class="right card">

        <div class="padding underline">
            <h1>MINECRAFT ARMOR STAND</h1>
            <center>
                <a href="https://github.com/haselkern/Minecraft-ArmorStand" target="_blank"><img src="images/github.png" alt="GitHub" title="GitHub" /></a>
                <a href="https://www.twitter.com/haselcode" target="_blank"><img src="images/twitter.png" alt="Twitter" title="Twitter" /></a>
                <a href="https://haselkern.com/armorstand" target="_blank"><img src="images/help.png" alt="haselkern.com/armorstand" title="help" /></a>
            </center>
        </div>

        <div class="padding underline">
            <select id="mcversion">
				<option value="1.21">Minecraft 1.21 and above</option>
				<option value="1.20.5">Minecraft 1.20.5 &amp; 1.20.6</option>
				<option value="1.16">Minecraft 1.16 to 1.20.4</option>
				<option value="1.14">Minecraft 1.14 &amp; 1.15</option>
				<option value="1.13">Minecraft 1.13</option>
                <option value="1.11">Minecraft 1.11 &amp; 1.12</option>
                <option value="1.9">Minecraft 1.9 &amp; 1.10</option>
                <option value="1.8">Minecraft 1.8</option>
            </select>
        </div>

        <div class="padding underline">
            <label><input type="checkbox" name="invisible">Invisible</label><br>
            <label><input type="checkbox" name="invulnerable">Invulnerable</label><br>
            <label><input type="checkbox" name="persistencerequired">PersistenceRequired</label><br>
            <label><input type="checkbox" name="nobaseplate">No Base Plate</label><br>
            <label><input type="checkbox" name="nogravity">No Gravity</label><br>
            <label><input type="checkbox" name="showarms">Show Arms</label><br>
            <label><input type="checkbox" name="small">Small</label><br>
            <label><input type="checkbox" name="marker">Marker</label><br>
			<div id="centercorrected">
				<label><input type="checkbox" id="center-corrected" name="center-corrected">Center-corrected</label><br>
			</div>
        </div>

        <div class="padding underline">
            <table class="rotations">
                <tr>
                    <td>Rotation:</td>
                    <td colspan="3"><input type="range" name="rotation" min="0" max="360" value="0"></td>
                </tr>
                <tr>
                    <td>Head:</td>
                    <td><input type="range" name="headX" min="0" max="360" value="0"></td>
                    <td><input type="range" name="headY" min="0" max="360" value="0"></td>
                    <td><input type="range" name="headZ" min="0" max="360" value="0"></td>
                </tr>
                <tr>
                    <td>Body:</td>
                    <td><input type="range" name="bodyX" min="0" max="360" value="0"></td>
                    <td><input type="range" name="bodyY" min="0" max="360" value="0"></td>
                    <td><input type="range" name="bodyZ" min="0" max="360" value="0"></td>
                </tr>
                <tr>
                    <td>Left Leg:</td>
                    <td><input type="range" name="leftLegX" min="0" max="360" value="0"></td>
                    <td><input type="range" name="leftLegY" min="0" max="360" value="0"></td>
                    <td><input type="range" name="leftLegZ" min="0" max="360" value="0"></td>
                </tr>
                <tr>
                    <td>Right Leg:</td>
                    <td><input type="range" name="rightLegX" min="0" max="360" value="0"></td>
                    <td><input type="range" name="rightLegY" min="0" max="360" value="0"></td>
                    <td><input type="range" name="rightLegZ" min="0" max="360" value="0"></td>
                </tr>
            </table>
            <div id="inputarms">
                <table class="rotations">
                        <tr>
                            <td>Left Arm:</td>
                            <td><input type="range" name="leftArmX" min="0" max="360" value="0"></td>
                            <td><input type="range" name="leftArmY" min="0" max="360" value="0"></td>
                            <td><input type="range" name="leftArmZ" min="0" max="360" value="0"></td>
                        </tr>
                        <tr>
                            <td>Right Arm:</td>
                            <td><input type="range" name="rightArmX" min="0" max="360" value="0"></td>
                            <td><input type="range" name="rightArmY" min="0" max="360" value="0"></td>
                            <td><input type="range" name="rightArmZ" min="0" max="360" value="0"></td>
                        </tr>
                </table>
            </div>
        </div>

        <div class="padding underline">
            <label><input type="checkbox" name="useequipment">Enable equipment</label><br>
            <div id="customequipment">
                <p>
                    Enter the text id of an item (for example <i>stone</i> or <i>iron_sword</i>) into the appropriate slots. You can enter an arbitrary item for the head or hand, but the other slots must contain an appropriate item.
                </p>

                <input type="text" class="equipment" name="equipHandRight" placeholder="Item in right hand">
                <input type="text" class="equipment" id="equipHandLeft" name="equipHandLeft" placeholder="Item in left hand">

                <input type="text" class="equipment" name="equipShoes" placeholder="Boots" list="list-shoes">
                <datalist id="list-shoes">
                    <option value="netherite_boots">
                    <option value="diamond_boots">
                    <option value="golden_boots">
                    <option value="iron_boots">
                    <option value="chainmail_boots">
                    <option value="leather_boots">
                </datalist>
                <div class="colorfield" id="boots_color"></div>

                <input type="text" class="equipment" name="equipLeggings" placeholder="Leggings" list="list-leggings">
                <datalist id="list-leggings">
                    <option value="netherite_leggings">
                    <option value="diamond_leggings">
                    <option value="golden_leggings">
                    <option value="iron_leggings">
                    <option value="chainmail_leggings">
                    <option value="leather_leggings">
                </datalist>
                <div class="colorfield" id="leggings_color"></div>

                <input type="text" class="equipment" name="equipChestplate" placeholder="Chestplate" list="list-chestplate">
                <datalist id="list-chestplate">
                    <option value="netherite_chestplate">
                    <option value="diamond_chestplate">
                    <option value="golden_chestplate">
                    <option value="iron_chestplate">
                    <option value="chainmail_chestplate">
                    <option value="leather_chestplate">
                    <option value="elytra">
                </datalist>
                <div class="colorfield" id="chestplate_color"></div>

                <input type="text" class="equipment" name="equipHelmet" placeholder="Helmet" list="list-helmet">
                <datalist id="list-helmet">
                    <option value="netherite_helmet">
                    <option value="diamond_helmet">
                    <option value="golden_helmet">
                    <option value="iron_helmet">
                    <option value="chainmail_helmet">
                    <option value="leather_helmet">
                    <option value="turtle_helmet">
                </datalist>
                <div class="colorfield" id="helmet_color"></div>

                <br>Helmet specifies
                <select id="equipCustomHeadMode">
                    <option value="item">Item Name</option>
                    <option value="player">Player Name</option>
                    <option value="url">Image URL</option>
                    <option value="givecode">Give Code</option>
                </select>

                <div id="minecraft-heads">
                    <br>
                    You can find lots of different heads here. Pick one and copy the <i>Give-Code</i> into the helmet field:
                    <br>
                    <a href="http://minecraft-heads.com/" target="_blank"><img src="images/mc-heads.png" alt="minecraft-heads.com" /></a>
                </div>
            </div>
        </div>

        <div class="padding underline">
            <input type="text" name="customname" id="customname" placeholder="Custom name">
            <label><input type="checkbox" name="showcustomname">Show custom name</label><br>
			<div id="namecustomization">
				<p>
					In 1.13, you can now add formats to the name tags.
					Enter the color id (for example red, dark_blue) in the name color field to give it a color.
				</p>
				<input type="text" name="namecolor" id="namecolor" placeholder="Name color" list="list-colors">
				<datalist id="list-colors">
					<option value="aqua">
					<option value="black">
					<option value="blue">
					<option value="dark_aqua">
					<option value="dark_blue">
					<option value="dark_gray">
					<option value="dark_green">
					<option value="dark_purple">
					<option value="dark_red">
					<option value="gold">
					<option value="gray">
					<option value="green">
					<option value="light_purple">
					<option value="red">
					<option value="white">
					<option value="yellow">
				</datalist>
				<div>
					<label><input type="checkbox" id="namebold" name="namebold">Bold</label>
					<label><input type="checkbox" id="nameitalic" name="nameitalic">Italic</label>
					<label><input type="checkbox" id="nameobfuscated" name="nameobfuscated">Obfuscated</label>
					<label><input type="checkbox" id="namestrikethrough" name="namestrikethrough">Strikethrough</label>
				</div>
			</div>
        </div>

        <div class="padding underline">
            <p>
                Add scoreboard tags to your armor stand.<br/>
                When adding multiple tags, make sure they are separated by a comma ' , '
            </p>
            <input type="text" name="scoreboardtags" id="scoreboardtags" placeholder="Tag1, Tag2">
        </div>

        <div class="padding">
            <!-- THANK YOU to reddit user Oozebull for this part. -->
            <label><input type="checkbox" id="slashgive" name="slashgive">Make /give</label>
            <label><input type="checkbox" name="usedisabledslots">Lock Slot Interaction</label>
            <div id="disabledslots">
                <div>
                    <span class="first">&nbsp;</span>
                    <span class="sprite" style="background-position: 0px   0px"></span>
                    <span class="sprite" style="background-position: 0px -16px"></span>
                    <span class="sprite" style="background-position: 0px -32px"></span>
                    <span class="sprite" style="background-position: 0px -48px"></span>
                    <span class="sprite" style="background-position: 0px -64px"></span>
                    <span class="sprite offhand" style="background-position: 0px -80px"></span>
                </div>

                <div>
                    <span class="first">Remove</span>
                    <span><input id="dH" type="checkbox"></input></span>
                    <span><input id="dC" type="checkbox"></input></span>
                    <span><input id="dL" type="checkbox"></input></span>
                    <span><input id="dB" type="checkbox"></input></span>
                    <span><input id="dW" type="checkbox"></input></span>
                    <span><input id="dO" type="checkbox"></input></span>
                </div>
                <div>
                    <span class="first">Replace</span>
                    <span><input id="rH" type="checkbox"></input></span>
                    <span><input id="rC" type="checkbox"></input></span>
                    <span><input id="rL" type="checkbox"></input></span>
                    <span><input id="rB" type="checkbox"></input></span>
                    <span><input id="rW" type="checkbox"></input></span>
                    <span><input id="rO" type="checkbox"></input></span>
                </div>
                <div>
                    <span class="first">Place</span>
                    <span><input id="pH" type="checkbox"></input></span>
                    <span><input id="pC" type="checkbox"></input></span>
                    <span><input id="pL" type="checkbox"></input></span>
                    <span><input id="pB" type="checkbox"></input></span>
                    <span><input id="pW" type="checkbox"></input></span>
                    <span><input id="pO" type="checkbox"></input></span>
                </div>
            </div>
        </div>

        <div class="code">
            <div id="code-copy-hint">click to copy</div>
            <div id="code"></div>
        </div>
        <div id="codeinfo" class="padding">
            <b>Please note:</b>
            This command is too long to be executed from chat. You need to place it inside a command block. (see below)
        </div>

    </div>

    <div class="right card">
        <span style="cursor: pointer;" onclick="javascript:$('#saveandload').slideToggle();">
            + Save and Load
        </span>	
        <div id="saveandload">
            <div class="padding">
                <div id="save" class="padding underline">
                    <p>
                        Save your current armor stand creation
                    </p>
                    <input type="text" name="creationname" id="creationname" placeholder="My armor stand"/>
                    <button style="display:inline-block" id="savecreation" onclick="javascript:saveData();">Save Creation</button><br>
                </div>
                <div id="load" class="padding underline">
                    <p id="loadmessage">
                        Load your saved creations
                    </p>
                    <div id="loadlistopts">
                        <select id="loadlist"></select>
                        <button id="loadcreation" style="display:inline-block;" onclick="javascript:loadData($(`#loadlist`).val());">Load Creation</button>
                        <button id="deletesave" style="display:inline-block;" onclick="javascript:deleteSave($(`#loadlist`).val());">Delete Creation</button><br>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="right card">
        <span style="cursor: pointer;" onclick="javascript:$('#getcommandblock').slideToggle();">
            + Obtain a command block
        </span>	
        <br>
        <div id="getcommandblock">
            <div class="padding">
                If your command is longer than 256 characters (100 before Minecraft 1.11), it needs to be executed with a <i>command block</i>. Obtain one by typing:
            </div>
            <div class="code">
                /give @p minecraft:command_block
            </div>
        </div>
    </div>

    <div class="right card">
        <span class="" style="cursor: pointer;" onclick="javascript:$('#troubleshooting').slideToggle();">
        + Troubleshooting
        </span>
        <div id="troubleshooting">
            <p>
                <b>This thing uses WebGL!</b>
                If you don't see anything on the left enable WebGL in your browser or visit the <a href="http://get.webgl.org/">official WebGL website</a> to troubleshoot problems.
            </p>
        </div>
    </div>


</body>
</html>