azures04/crafatar
1
0
Fork 0
mirror of https://github.com/azures04/crafatar.git synced 2026-03-21 23:41:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

add try-it input & logic

Browse Source
This commit is contained in:
jomo 2015-10-17 20:31:09 +02:00
parent c6f4b038b2
commit 863402fb97
3 changed files with 51 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
lib/public/javascript/crafatar.js
View File

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

17
lib/public/stylesheets/style.css
View File

@ -61,6 +61,20 @@ a.sponsor {
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 {
background: inherit;
font-weight: bold;
@ -80,9 +94,6 @@ span[title] {
text-decoration: underline dotted;
}
thead {
font-weight: bold;
}
.row {
margin-right: auto;

24
lib/views/index.html.ejs
View File

@ -67,11 +67,25 @@
</div>
</div>
<section id="try">
<h2><a href="#try">Try it</a></h2>
<form id="tryit" action="#">
<div class="row">
<div class="col-md-11">
<input id="tryname" type="text" placeholder="Enter valid username or UUID">
</div>
<div class="col-md-1">
<input type="submit" value="Go!">
</div>
</div>
</form>
</section>
<section id="avatars">
<h2><a href="#avatars">Avatars</a></h2>
<div class="row">
<div class="col-md-2">
<img src="/avatars/853c80ef3c3749fdaa49938b674adae6?size=100" alt="jeb_'s avatar">
<img class="tryit" data-src="/avatars/$?size=100" src="/avatars/853c80ef3c3749fdaa49938b674adae6?size=100" alt="avatar">
</div>
<div class="col-md-10">
<div class="code">
@ -86,7 +100,7 @@
<h2><a href="#head-renders">Head Renders</a></h2>
<div class="row">
<div class="col-md-2">
<img src="/renders/head/853c80ef3c3749fdaa49938b674adae6" alt="jeb_'s head">
<img class="tryit" data-src="/renders/head/$" src="/renders/head/853c80ef3c3749fdaa49938b674adae6" alt="head">
</div>
<div class="col-md-10">
<div class="code">
@ -101,7 +115,7 @@
<h2><a href="#body-renders">Body Renders</a></h2>
<div class="row">
<div class="col-md-2">
<img src="/renders/body/853c80ef3c3749fdaa49938b674adae6" alt="jeb_'s body">
<img class="tryit" data-src="/renders/body/$" src="/renders/body/853c80ef3c3749fdaa49938b674adae6" alt="body">
</div>
<div class="col-md-10">
<div class="code">
@ -116,7 +130,7 @@
<h2><a href="#skins">Skins</a></h2>
<div class="row">
<div class="col-md-2">
<img src="/skins/853c80ef3c3749fdaa49938b674adae6" alt="jeb_'s skin">
<img class="tryit" data-src="/skins/$" src="/skins/853c80ef3c3749fdaa49938b674adae6" alt="skin">
</div>
<div class="col-md-10">
<div class="code">
@ -131,7 +145,7 @@
<h2><a href="#capes">Capes</a></h2>
<div class="row">
<div class="col-md-2">
<img src="/capes/069a79f444e94726a5befca90e38aaf5?default=853c80ef3c3749fdaa49938b674adae6" alt="Mojang cape">
<img class="tryit" data-src="/capes/$?default=853c80ef3c3749fdaa49938b674adae6" src="/capes/069a79f444e94726a5befca90e38aaf5?default=853c80ef3c3749fdaa49938b674adae6" alt="cape">
</div>
<div class="col-md-10">
<div class="code">