crafatar/lib/views/index.html.ejs
2020-03-21 12:10:13 +01:00

302 lines
15 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Crafatar A blazing fast API for Minecraft faces!</title>
<meta charset="utf-8">
<link rel="icon" sizes="16x16" type="image/png" href="/favicon.png">
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
<link rel="stylesheet" href="/stylesheets/style.css">
<meta name="description" content="A blazing fast API for Minecraft faces with support for avatars, skins, and 3D renders!">
<meta name="keywords" content="minecraft, avatar, renders, skins, uuid">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="copyright" content="Crafatar">
<meta name="language" content="en-US">
<meta name="robots" content="index">
<meta property="og:title" content="Crafatar">
<meta property="og:type" content="website">
<meta property="og:url" content="<%= domain %>">
<meta property="og:image" content="<%= domain %>/logo.png">
<meta property="og:description" content="blazing fast API for Minecraft faces with support for avatars, skins, and 3D renders!">
<meta property="og:determiner" content="a">
<meta property="og:locale" content="en_US">
<meta name="twitter:card" content="summary">
<meta name="twitter:creator" content="@Crafatar">
<script src="/javascript/crafatar.js"></script>
</head>
<body lang="en-US">
<a href="https://github.com/crafatar/crafatar" target="_blank" class="forkme">Fork me on GitHub</a>
<% if (config.sponsor.top_right) { %>
<%- config.sponsor.top_right %>
<% } %>
<div class="jumbotron">
<div class="container">
<h1>Crafatar</h1>
<h2>A blazing fast API for Minecraft faces!</h2>
<div id="avatar-wrapper">
<%# These are shuffled by JS %>
<div title="jomo's avatar" class="avatar jomo"></div>
<div title="jake_0's avatar" class="avatar jake_0"></div>
<div title="sk89q's avatar" class="avatar sk89q"></div>
<div title="md_5's avatar" class="avatar md_5"></div>
<div title="notch's avatar" class="avatar notch"></div>
<div title="jeb_'s avatar" class="avatar jeb"></div>
<div title="dinnerbone's avatar" class="avatar dinnerbone flipped"></div>
<div title="ez' avatar" class="avatar ez"></div>
<div title="grumm's avatar" class="avatar grumm flipped"></div>
<div title="themogmimer's avatar" class="avatar themogmimer"></div>
<div title="searge's avatar" class="avatar searge"></div>
<div title="xlson's avatar" class="avatar xlson"></div>
<div title="krisjelbring's avatar" class="avatar krisjelbring"></div>
<div title="aikar's avatar" class="avatar aikar"></div>
<div title="ammar2's avatar" class="avatar ammar2"></div>
<div title="marc's avatar" class="avatar marc"></div>
<div title="mollstam's avatar" class="avatar mollstam"></div>
<div title="evilseph's avatar" class="avatar evilseph"></div>
<div title="thinkofdeath's avatar" class="avatar thinkofdeath"></div>
</div>
</div>
</div>
<div class="container row">
<div class="col-md-9">
<section id="documentation">
<div id="alerts">
<div class="alert alert-warning" role="alert">
<h5>Crafatar is rate limited by Mojang!</h5>
Please consider installing your own instance of Crafatar!<br>
For more information visit <a href="https://github.com/crafatar/crafatar/issues/260">our issue tracker</a>.
</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 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 class="tryit" data-src="/avatars/$?size=100" src="/avatars/853c80ef3c3749fdaa49938b674adae6?size=100" alt="avatar">
</div>
<div class="col-md-10">
<div class="code">
<%= domain %>/avatars/<mark class="green">uuid</mark>
</div>
<p>Accepted <a href="#meta-parameters">modifiers</a>: <i><b>size</b>, <b>overlay</b>, <b>default</b></i>.</p>
</div>
</div>
</section>
<section id="head-renders">
<h2><a href="#head-renders">Head Renders</a></h2>
<div class="row">
<div class="col-md-2">
<img class="tryit" data-src="/renders/head/$" src="/renders/head/853c80ef3c3749fdaa49938b674adae6" alt="head">
</div>
<div class="col-md-10">
<div class="code">
<%= domain %>/renders/head/<mark class="green">uuid</mark>
</div>
<p>
Accepted <a href="#meta-parameters">modifiers</a>: <i><b>scale</b>, <b>overlay</b>, <b>default</b></i>.
</p>
</div>
</div>
</section>
<section id="body-renders">
<h2><a href="#body-renders">Body Renders</a></h2>
<div class="row">
<div class="col-md-2">
<img class="tryit" data-src="/renders/body/$" src="/renders/body/853c80ef3c3749fdaa49938b674adae6" alt="body">
</div>
<div class="col-md-10">
<div class="code">
<%= domain %>/renders/body/<mark class="green">uuid</mark>
</div>
<p>
Accepted <a href="#meta-parameters">modifiers</a>: <i><b>scale</b>, <b>overlay</b>, <b>default</b></i>.
</p>
</div>
</div>
</section>
<section id="skins">
<h2><a href="#skins">Skins</a></h2>
<div class="row">
<div class="col-md-2">
<img class="tryit" data-src="/skins/$" src="/skins/853c80ef3c3749fdaa49938b674adae6" alt="skin">
</div>
<div class="col-md-10">
<div class="code">
<%= domain %>/skins/<mark class="green">uuid</mark>
</div>
<p>Accepted <a href="#meta-parameters">modifiers</a>: <i><b>default</b></i>.</p>
</div>
</div>
</section>
<section id="capes">
<h2><a href="#capes">Capes</a></h2>
<div class="row">
<div class="col-md-2">
<img class="tryit" data-src="/capes/$?default=853c80ef3c3749fdaa49938b674adae6" src="/capes/069a79f444e94726a5befca90e38aaf5?default=853c80ef3c3749fdaa49938b674adae6" alt="cape">
</div>
<div class="col-md-10">
<div class="code">
<%= domain %>/capes/<mark class="green">uuid</mark>
</div>
<p>Accepted <a href="#meta-parameters">modifiers</a>: <i><b>default</b></i>.</p>
</div>
</div>
</section>
<hr>
<section id="meta">
<h2><a href="#meta">Meta</a></h2>
<p>
You can append <code>.png</code> or any other file extension to the URL path if you like to, but all images are PNG.
</p>
<section id="meta-attribution">
<h3><a href="#meta-attribution">Attribution</a></h3>
<p>
Attribution is not required, but it is <strong>encouraged</strong>.<br>
If you want to show some support for this (free!) service, place a notice like this somewhere:
<span class="code">
Thank you to &lt;a href="https://crafatar.com"&gt;Crafatar&lt;/a&gt; for providing avatars.
</span>
</p>
</section>
<section id="meta-parameters">
<h3><a href="#meta-parameters">URL Parameters</a></h3>
<p>
You can tweak images using <a href="https://en.wikipedia.org/wiki/Query_string" target="_blank">query string parameters</a>.<br>
Example: <code><%= domain %>/avatars/853c80ef3c3749fdaa49938b674adae6<mark class="blue">?</mark><mark class="green">size=4</mark><mark class="blue">&</mark><mark class="green">default=MHF_Steve</mark><mark class="blue">&</mark><mark class="green">overlay</mark></code>
</p>
<ul>
<li><b>size</b>: The size for avatars in pixels. <code><%= config.avatars.min_size %> - <%= config.avatars.max_size %></code>
<li><b>scale</b>: The scale factor for renders. <code><%= config.renders.min_scale %> - <%= config.renders.max_scale %></code>
<li><b>overlay</b>: Apply the <span title="Also known as 'hat' or 'jacket' or 'helm'">overlay</span> to the avatar. Presence of this parameter implies <code>true</code>. This option was previously known as <code>helm</code>.
<li>
<b>default</b>: The fallback to be used when the requested image cannot be served. You can use a <span title="Make sure to properly percent-encode this!">custom URL</span>, any <mark class="green">uuid</mark>, or <code>MHF_Steve</code>/<code>MHF_Alex</code>.<br>
The option defaults to either <code>MHF_Steve</code> or <code>MHF_Alex</code>, depending on Minecraft's default for the requested UUID.
</ul>
</section>
<section id="meta-uuids">
<h3><a href="#meta-uuids">About UUIDs</a></h3>
<p>UUIDs may be any valid Mojang UUID in the blank or dashed format.</p>
<p>Malformed UUIDs are rejected.</p>
</section>
<section id="meta-usernames">
<h3><a href="#meta-usernames">About Usernames</a></h3>
<p>
By <a href="https://twitter.com/MojangSupport/status/964511258601865216" target="_blank">disabling</a> a legacy API in 2018, Mojang has made it practically impossible for Crafatar to support usernames. Please use UUIDs instead!
</p>
<p>All usernames are rejected.</p>
</section>
<section id="meta-caching">
<h3><a href="#meta-caching">About Caching</a></h3>
<p>
Crafatar checks for skin updates every <%= config.caching.local / 60 %> minutes.<br>
Images are cached in your browser for <%= config.caching.browser / 60 %> minutes until a new request to Crafatar is made.<br>
In addition, <span title="A CDN and caching proxy">CloudFlare</span> caches up to 2 hours on a per-url basis.
</p>
<p>When you changed your skin you can try clearing your browser cache to see the change faster.</p>
</section>
<section id="meta-cors">
<h3><a href="#meta-cors">CORS</a></h3>
<p>Crafatar supports Cross-Origin Resource Sharing, so you can make AJAX request from other sites!</p>
</section>
<section id="meta-http-headers">
<h3><a href="#meta-http-headers">HTTP Headers</a></h3>
<p>
Responses come with some custom HTTP headers, useful for debugging.<br>
Please note that these headers may be cached by <span title="A CDN and caching proxy">CloudFlare</span>.
</p>
<ul>
<li>
<b>X-Storage-Type</b>: Details about how the requested image was stored on the server
<ul>
<li><b>none</b>: No external requests. Player has no skin (cached)</li>
<li><b>cached</b>: No external requests. (skin cached)</li>
<li><b>checked</b>: Requested skin details, skin cached. (1 external request)<br>
This happens either when the user removed their skin or when it didn't change.</li>
<li><b>downloaded</b>: Requested skin details, skin downloaded. (2 external requests)</li>
<li><b>server error</b>: This can happen, for example, when Mojang's servers are down.<br>
If possible, a cached image is served instead.</li>
<li><b>user error</b>: You have done something wrong, such as requesting a malformed uuid.<br>
Check the response body for details.</li>
</ul>
<li>
<b>X-Request-ID</b>: The internal ID assigned to this request.<br>
If you think something is wrong with your request, please <a href="#contact">contact us</a> and provide this ID.
</ul>
</section>
</section>
<section id="contact">
<h2><a href="#contact">Contact</a></h2>
<ul>
<li>Follow us on twitter <a href="https://twitter.com/crafatar" target="_blank">@crafatar</a></li>
<li>Open an issue <a href="https://github.com/crafatar/crafatar/issues" target="_blank">on GitHub</a></li>
<li><a href="https://webchat.esper.net/?channels=crafatar" target="_blank">Join us</a> in <a href="irc://irc.esper.net/crafatar">#crafatar</a> on irc.esper.net</li>
</ul>
</section>
</section>
</div>
<div class="col-md-3">
<h4>Popular Crafatar users</h4>
<div class="list-group">
<a rel="nofollow" href="http://technicpack.net" target="_blank" class="list-group-item">Technic</a>
<a rel="nofollow" href="https://hypixel.net" target="_blank" class="list-group-item">Hypixel</a>
<a rel="nofollow" href="https://www.minecraft-index.com" target="_blank" class="list-group-item">MC Index</a>
<a rel="nofollow" href="https://www.minehq.com/hcteams/leaderboards" target="_blank" class="list-group-item">MineHQ</a>
<a rel="nofollow" href="https://shotbow.net" target="_blank" class="list-group-item">Shotbow</a>
<a rel="nofollow" href="https://mcuuid.net/" target="_blank" class="list-group-item">MCUUID</a>
<a href="https://github.com/crafatar/crafatar/wiki/Who-uses-crafatar%3F" target="_blank" class="list-group-item">and many more…</a>
</div>
<p>See also: <a rel="nofollow" href="https://github.com/crafatar/crafatar/wiki/What-people-say-about-Crafatar" target="_blank">what users say</a> about Crafatar</p>
<hr>
<h4>Crafatar Tools & Plugins</h4>
<div class="list-group">
<a rel="nofollow" href="https://xenforo.com/community/resources/associationmc.3232/" target="_blank" class="list-group-item">AssociationMc <i>(XenForo)</i></a>
<a rel="nofollow" href="https://github.com/yeahwhat-mc/discourse-yeahwhat" target="_blank" class="list-group-item">Minecraft Heads <i>(Discourse)</i></a>
<a rel="nofollow" href="http://vanillaforums.org/addon/crafatar-plugin" target="_blank" class="list-group-item">Crafatar Avatars <i>(Vanilla)</i></a>
<a rel="nofollow" href="https://www.spigotmc.org/resources/picture-login.4514/" target="_blank" class="list-group-item">Picture Login <i>(Bukkit)</i></a>
<a rel="nofollow" href="https://github.com/sk89q/Plumeria" target="_blank" class="list-group-item">Plumeria <i>(Discord)</i></a>
<a href="https://github.com/crafatar/crafatar/wiki/Who-uses-crafatar%3F#other-services-using-crafatar" target="_blank" class="list-group-item">and many more…</a>
</div>
<% if (config.sponsor.sidebar) { %>
<%- config.sponsor.sidebar %>
<% } %>
</div>
</div>
<footer id="footer">
<hr>
<div class="container row">
<p class="pull-right">Copyright Crafatar <%= new Date().getFullYear() %></p>
</div>
</footer>
</body>
</html>