1
0
Fork 0
mirror of https://github.com/haselkern/Minecraft-ArmorStand.git synced 2025-05-17 15:05:33 +00:00

CSS overhaul

I think it's pretty sweet.
This commit is contained in:
Lars Martens 2016-11-23 18:21:13 +01:00
parent 57d0cd3e9c
commit 2c80abc37c
4 changed files with 64 additions and 39 deletions

BIN
images/haselkern.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

View file

@ -27,23 +27,16 @@
<div class="right card">
<div class="padding underline">
<h1>MINECRAFT ARMORSTAND</h1>
<div class="padding">
<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,12 +93,14 @@
</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">
@ -128,15 +125,17 @@
</select>
</div>
</div>
<br>
<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>

View file

@ -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();
}

View file

@ -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{