diff --git a/lib/public/stylesheets/style.css b/lib/public/stylesheets/style.css index bb3200f..c80312f 100644 --- a/lib/public/stylesheets/style.css +++ b/lib/public/stylesheets/style.css @@ -27,6 +27,7 @@ a.forkme { -webkit-transform: rotate(45deg) translate(62px); transform: rotate(45deg) translate(62px); } + a.forkme:hover { color: #ddd; text-decoration: none; @@ -46,13 +47,39 @@ a.sponsor { font-size: 1rem; } -mark.green { +#documentation .row { + background: #eee; + border: 1px solid transparent; + border-radius: 0.25rem; +} + +#documentation .row .col-md-2 { + text-align: center; +} + +#documentation .row > div { + padding: 15px; +} + +mark { background: inherit; - color: #008000; font-weight: bold; padding: 0; } +mark.green { + color: #080; +} + +mark.blue { + color: #08f; +} + +span[title] { + cursor: help; + text-decoration: underline dotted; +} + thead { font-weight: bold; } @@ -71,13 +98,10 @@ h1 { } h2 { - font-size: 1.3rem; -} - -h3 { margin-top: 2em; } + h4 { margin-top: 1em; } @@ -96,109 +120,6 @@ h4 { position: relative; } -.code .example { - cursor: text; -} - -.code .example:hover { - color: #000; - text-decoration: underline; -} - -.preview-background { - background: #eee; - height: 220px; -} - -.code .example-wrapper .preview, .code .preview-placeholder { - display: none; - left: 0; - right: 0; - position: absolute; - bottom: -260px; - padding-left: 10px; - height: 220px; - background-position: 10px center; - background-repeat: no-repeat; - font-size: 14px; - font-family: "Helvetica Neue", Arial, sans-serif; - font-weight: 300; - color: #666; -} - -.code .preview-placeholder { - display: block; - font-weight: bold; - line-height: 200px; -} - -.code .preview-placeholder:hover { - /* fixes glitchy blinking */ - display: block !important; -} - -.code:hover .preview-placeholder { - display: none; -} - -.code .example-wrapper .preview i { - color: #aaa; -} - -.code .example-wrapper:hover .preview { - display: block; -} - -#avatar-example-1:hover .preview { - background-image: url("/avatars/853c80ef3c3749fdaa49938b674adae6"); -} -#avatar-example-2:hover .preview { - background-image: url("/avatars/853c80ef3c3749fdaa49938b674adae6?helm"); -} -#avatar-example-3:hover .preview { - background-image: url("/avatars/853c80ef3c3749fdaa49938b674adae6?size=128"); -} -#avatar-example-4:hover .preview { - background-image: url("/avatars/853c80ef3c3749fdaa49938b674adae6"); -} -#avatar-example-5:hover .preview { - background-image: url("/avatars/0?default=mhf_alex"); -} -#avatar-example-6:hover .preview { - background-image: url("/avatars/0?default=https%3A%2F%2Fi.imgur.com%2FocJVWAc.png"); -} - -#render-example-1:hover .preview { - background-image: url("/renders/body/853c80ef3c3749fdaa49938b674adae6?helm&scale=4"); -} -#render-example-2:hover .preview { - background-image: url("/renders/head/853c80ef3c3749fdaa49938b674adae6?scale=8"); -} - -#skin-example-1:hover .preview { - background-image: url("/skins/853c80ef3c3749fdaa49938b674adae6"); -} -#skin-example-2:hover .preview { - background-image: url("/skins/0?default=mhf_alex"); -} - -#cape-example-1:hover .preview { - background-image: url("/capes/61699b2ed3274a019f1e0ea8c3f06bc6"); -} -#cape-example-2:hover .preview { - background-image: url("/capes/af74a02d19cb445bb07f6866a861f783"); -} - -img.preload { - /* - preload hover images - browsers don't load 0x0 images - */ - position: fixed; - top: -9999px; - left: -9999px; -} - .jumbotron { padding: 1em 0 3em; } @@ -282,4 +203,4 @@ img.preload { .avatar.flipped { -webkit-transform: rotate(180deg); transform: rotate(180deg); -} +} \ No newline at end of file diff --git a/lib/views/index.html.ejs b/lib/views/index.html.ejs index 7b828ea..2f5bca1 100644 --- a/lib/views/index.html.ejs +++ b/lib/views/index.html.ejs @@ -5,7 +5,7 @@
| parameter | -type | -default | -description | -
| size | -integer | -<%= config.avatars.default_size %> | -The size of the image in pixels, <%= config.avatars.min_size %> - <%= config.avatars.max_size%>. | -
| default | -string | -The standard value is calculated based on the UUID (even = MHF_Alex, odd = MHF_Steve). - Usernames always default to MHF_Steve. |
- The image to be served when the player has no skin. - Valid options are any name or uuid, including MHF_Steve and MHF_Alex, or a custom URL. |
-
| helm | -null | -- | Apply the "second" layer (hat) to the avatar. | -
Jeb's avatar
-Jeb's avatar with helm
-Jeb's avatar, 128 × 128
-Jeb's avatar by UUID
-Jeb's avatar, or fall back to MHF_Alex (this example assumes jeb_ does not exist)
-Jeb's avatar, or fall back to a custom image (this example assumes jeb_ does not exist)
-Hover over the example URLs above for a preview!
+ <%= domain %>/avatars/uuidCrafatar also provides support for 3D renders of Minecraft skins.
- Please note that this feature is currently beta!
- The head render type returns a render of the skin's head.<%= domain %>/renders/head/uuidThe body render returns a render of the entire skin.<%= domain %>/renders/body/uuid
| parameter | -type | -default | -description | -
| scale | -integer | -<%= config.renders.default_scale %>. The actual size differs between the type of render. | -The scale factor of the image <%= config.renders.min_scale %> - <%= config.renders.max_scale %>. | -
| helm | -null | -- | Apply the "second" layer (hat) to the avatar. | -
| default | -string | -The standard value is calculated based on the UUID (even = MHF_Alex, odd = MHF_Steve). - Usernames always default to MHF_Steve. |
- The image to be served when the uuid has no skin. - Valid options are any uuid, including MHF_Steve and MHF_Alex, or a custom URL. |
-
Accepted parameters: size, helm, default.
+Jeb's body, with helmet, scale 4
-Jeb's head, by UUID, scale 8
-Hover over the example URLs above for a preview!
+ <%= domain %>/renders/head/uuidYou can also get the full skin file of a player.
- The user's skin is returned, or the default image is served.
- You can use the default parameter here as well.<%= domain %>/skins/uuid
| parameter | -type | -default | -description | -
| default | -string | -The standard value is calculated based on the UUID (even = MHF_Alex, odd = MHF_Steve). - Usernames always default to MHF_Steve. |
- The image to be served when the uuid has no skin. - Valid options are any uuid, including MHF_Steve and MHF_Alex, or a custom URL. |
-
Accepted parameters: scale, helm, default.
+Jeb's skin
-Jeb's skin, or fall back to MHF_Alex (this example assumes jeb_ does not exist)
-Hover over the example URLs above for a preview!
+ <%= domain %>/renders/body/uuidA cape endpoint is also available to get the active cape of a user.
- The user's cape is returned, otherwise a 404 is returned.
-
Accepted parameters: scale, helm, default.
+Accepted parameters: default.
+Accepted parameters: default.
+
+ In the examples above, you can generally use usernames instead of uuid. However, apart from the special cases MHF_Steve and MHF_Alex this is discouraged as explained below.
+ You can append .png or any other file extension to the URL path if you like to, but all images are PNG.
+
+ You can tweak images using query string parameters.
+ Example: <%= domain %>/avatars/853c80ef3c3749fdaa49938b674adae6?size=4&default=MHF_Steve&helm
Dinnerbone's Cape Mojang capes are not transparent...
-md_5's Cape
-Hover over the example URLs above for a preview!
-<%= config.avatars.min_size %> - <%= config.avatars.max_size %>
+ <%= config.renders.min_scale %> - <%= config.renders.max_scale %>
+ true.
+ MHF_Steve or MHF_Alex, depending on the requested UUID. All usernames default to MHF_Steve.
+ UUIDs may be any valid Mojang UUID in the blank or dashed format.
+Malformed UUIDs are rejected.
Crafatar supports CORS so you can make AJAX request from within the browser!
-Responses come with these HTTP headers, useful for debugging.
- Please note that these headers are cached by CloudFlare (CF-Cache-Status: HIT).
The time, in milliseconds, it took Crafatar to process the request.
-Details about how the requested image was stored on the server
+ +
+ We strongly advise you to use UUIDs instead of usernames! UUIDs never change while usernames do.
+ Looking up players by username has officially been deprecated by Mojang ever since UUIDs were introduced.
+ Crafatar uses a legacy API to retrieve skins for usernames that updates very slowly.
+ Skins come without any details, including whether a player uses the Alex or Steve skin model.
+ Additionally, Mojang has stated that this legacy interface may be disabled anytime, causing all requests to fail.
+
Malformed usernames are rejected.
+Crafatar caches skins for <%= config.caching.local / 60 %> minutes before checking for skin updates.
+ Images are cached in your browser for <%= config.caching.browser / 60 %> minutes until a new request to Crafatar is made.
+ When you changed your skin you can try clearing your browser cache to see the change faster.
Crafatar supports CORS, so you can make AJAX request from other sites!
+
+ Responses come with some custom HTTP headers, useful for debugging.
+ Please note that these headers are cached by CloudFlare (CF-Cache-Status: HIT).
+
The internal ID assigned to this request.
- If you think something is wrong with your request, please contact us and provide this ID.
- We strongly advise you to use UUIDs instead of usernames! UUIDs never change while usernames do.
- Looking up players by username has officially been deprecated by Mojang ever since UUIDs were introduced.
- Crafatar uses a legacy API to retrieve skins for usernames that updates very slowly.
- Skins come without any details, including whether a player uses the Alex or Steve skin model.
- Additionally, Mojang has stated that this legacy interface may be disabled anytime, causing all requests to fail.
- Malformed usernames are rejected.
-
UUIDs may use the blank or dashed format.
- Malformed UUIDs are rejected.
Crafatar caches skins for <%= config.caching.local / 60 %> minutes before checking for skin changes.
- Images are cached in your browser for <%= config.caching.browser / 60 %> minutes until a new request to Crafatar is made.
- When you changed your skin you can try clearing your browser cache to see the change faster.