add try-it input & logic

lib/public/javascript/crafatar.js

@@ -1,3 +1,4 @@
+var valid_user_id = /^([0-9a-f-A-F-]{32,36}|[a-zA-Z0-9_]{1,16})$/; // uuid|username
 var xhr = new XMLHttpRequest();
 
 xhr.onload = function() {
@@ -38,6 +39,21 @@ document.addEventListener("DOMContentLoaded", function(event) {
     avatars.appendChild(avatars.children[Math.random() * i | 0]);
   }
 
+  var tryit = document.querySelector("#tryit");
+  var tryname = document.querySelector("#tryname");
+  var images = document.querySelectorAll(".tryit");
+  tryit.onsubmit = function(e) {
+    e.preventDefault();
+    tryname.value = tryname.value.trim();
+    var value = tryname.value || "853c80ef3c3749fdaa49938b674adae6";
+    if (!valid_user_id.test(value)) {
+      return;
+    }
+    for (var j = 0; j < images.length; j++) {
+      images[j].src = images[j].dataset.src.replace("$", value);
+    }
+  };
+
   xhr.open("GET", "https://status.mojang.com/check", true);
   xhr.send();
 });

lib/public/stylesheets/style.css

@@ -54,11 +54,25 @@ a.sponsor {
 }
 
 #documentation .row .col-md-2 {
-    text-align: center;
+  text-align: center;
 }
 
 #documentation .row > div {
-    padding: 15px;
+  padding: 15px;
+}
+
+#try input {
+  width: 100%;
+  background: #fff;
+  border: 1px solid #ddd;
+  padding: 0.3em;
+  line-height: 1.5em;
+  margin: 0px;
+}
+
+img.tryit {
+  -webkit-filter: drop-shadow(0px 0px 6px);
+  filter: drop-shadow(0px 0px 6px);
 }
 
 mark {
@@ -80,9 +94,6 @@ span[title] {
   text-decoration: underline dotted;
 }
 
-thead {
-  font-weight: bold;
-}
 
 .row {
   margin-right: auto;