From 2c80abc37c6bf4f29b8c472086fe473898601f5f Mon Sep 17 00:00:00 2001
From: Lars Martens <lars.martens97@gmail.com>
Date: Wed, 23 Nov 2016 18:21:13 +0100
Subject: [PATCH] CSS overhaul I think it's pretty sweet.

---
 images/haselkern.png | Bin 0 -> 16201 bytes
 index.htm            |  91 +++++++++++++++++++++++++------------------
 js/main.js           |   5 ++-
 style.css            |   7 +++-
 4 files changed, 64 insertions(+), 39 deletions(-)
 create mode 100644 images/haselkern.png

diff --git a/images/haselkern.png b/images/haselkern.png
new file mode 100644
index 0000000000000000000000000000000000000000..eb73269a1801584f48628e6e37e9bdd2a889729f
GIT binary patch
literal 16201
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

literal 0
HcmV?d00001

diff --git a/index.htm b/index.htm
index 32baea3..11cc92b 100644
--- a/index.htm
+++ b/index.htm
@@ -26,24 +26,17 @@
     <div id="gl"></div>
 
     <div class="right card">
-
-        <h1>MINECRAFT ARMORSTAND</h1>
-        <div class="padding">
+        
+        <div class="padding underline">
+            <h1>MINECRAFT ARMORSTAND</h1>
             <center>
                 <a href="https://github.com/haselkern/Minecraft-ArmorStand" target="_blank"><img src="images/github.png" alt="GitHub" title="GitHub" /></a>
                 <a href="http://www.twitter.com/haselcode" target="_blank"><img src="images/twitter.png" alt="Twitter" title="Twitter" /></a>
+                <a href="http://haselkern.com" target="_blank"><img src="images/haselkern.png" alt="haselkern.com" title="other projects" /></a>
             </center>
-                <br>
-                <span class="padding" style="cursor: pointer;" onclick="javascript:$('#troubleshooting').slideToggle();">
-                + Troubleshooting
-                </span>
-                <div id="troubleshooting">
-                      <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.
-                </div>
         </div>
 
-        <div id="inputsection" class="padding">
-
+        <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>
@@ -51,7 +44,9 @@
             <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>
+        </div>
 
+        <div class="padding underline">
             <table class="rotations">
                 <tr>
                     <td>Rotation:</td>
@@ -98,45 +93,49 @@
                         </tr>
                 </table>
             </div>
-
-            
+        </div>
+        
+        <div class="padding underline">
             <label><input type="checkbox" name="useequipment">Enable equipment</label><br>
             <div id="customequipment">
-                <div class="padding">
+                <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="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="Shoes">
-                    <div class="colorfield" id="shoecolor"></div>
+                <input type="text" class="equipment" name="equipShoes" placeholder="Shoes">
+                <div class="colorfield" id="shoecolor"></div>
 
-                    <input type="text" class="equipment" name="equipLeggings" placeholder="Leggings">
-                    <div class="colorfield" id="leggingscolor"></div>
+                <input type="text" class="equipment" name="equipLeggings" placeholder="Leggings">
+                <div class="colorfield" id="leggingscolor"></div>
 
-                    <input type="text" class="equipment" name="equipChestplate" placeholder="Chestplate">
-                    <div class="colorfield" id="chestplatecolor"></div>
+                <input type="text" class="equipment" name="equipChestplate" placeholder="Chestplate">
+                <div class="colorfield" id="chestplatecolor"></div>
 
-                    <input type="text" class="equipment" name="equipHelmet" placeholder="Helmet">
-                    <div class="colorfield" id="helmetcolor"></div>
+                <input type="text" class="equipment" name="equipHelmet" placeholder="Helmet">
+                <div class="colorfield" id="helmetcolor"></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>
-                    </select>
-                </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>
+                </select>
             </div>
-            <br>
+        </div>
 
+        <div class="padding underline">
             <input type="text" name="customname" placeholder="Custom name">
             <label><input type="checkbox" name="showcustomname">Show custom name</label>
             <br>
+        </div>
 
+        <div class="padding">
             <!-- THANK YOU to reddit user Oozebull for this part. -->
             <label><input type="checkbox" name="usedisabledslots">Lock Slot Interaction</label>
-            <div id="disabledslots" class="padding">
+            <div id="disabledslots">
                 <div>
                     <span class="first">&nbsp;</span>
                     <span class="sprite" style="background-position: 0px   0px"></span>
@@ -171,16 +170,19 @@
                     <span><input id="pW" type="checkbox"></input></span>
                 </div>
             </div>
-
         </div>
 
         <div id="code" class="code"></div>
-        <div id="codeinfo" class="padding"></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 class="padding" style="cursor: pointer;" onclick="javascript:$('#getcommandblock').slideToggle();">
+        <span style="cursor: pointer;" onclick="javascript:$('#getcommandblock').slideToggle();">
             + Obtain a command block
         </span>
         <br>
@@ -193,5 +195,20 @@
             </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>
diff --git a/js/main.js b/js/main.js
index 57fc848..db7b992 100644
--- a/js/main.js
+++ b/js/main.js
@@ -350,7 +350,10 @@ function updateUI(){
 
 	$("#code").text(generateCode());
 	if(generateCode().length > 100){
-		$("#codeinfo").html("<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)");
+		$("#codeinfo").slideDown();
+	}
+	else{
+		$("#codeinfo").slideUp();
 	}
 
 
diff --git a/style.css b/style.css
index 8772948..f8d4c11 100644
--- a/style.css
+++ b/style.css
@@ -43,6 +43,7 @@ a{
 	box-shadow: 0 2px 4px #555555;
 	margin: 0.5em;
 	border-radius: 3px;
+	padding: 1em;
 }
 
 .right{
@@ -50,7 +51,11 @@ a{
 }
 
 .padding{
-	padding: 0.5em;
+	padding: 1em;
+}
+
+.underline{
+	border-bottom: 1px dashed #ddd;
 }
 
 .code{