From f20633d980ccd0bf3db6fd6c6587946cbfc9560d Mon Sep 17 00:00:00 2001 From: Chris Ireland Date: Fri, 2 Jan 2015 23:48:45 +0000 Subject: [PATCH] Redesign website --- public/stylesheets/style.css | 44 +--- views/index.jade | 378 +++++++++++++++++++---------------- views/layout.jade | 4 +- 3 files changed, 212 insertions(+), 214 deletions(-) diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index e9ea87a..8b12cf1 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -89,44 +89,10 @@ h4 { box-shadow: 0 0 1px inset; } -.sideface { - width: 160px; - height: 160px; - display: inline-block; -} - -.sideface.Jake0oo0 { - background:url("/avatars/2d5aa9cdaeb049189930461fc9b91cc5?size=160"); -} -.sideface.Jake0oo0:hover { - background:url("/avatars/2d5aa9cdaeb049189930461fc9b91cc5?size=160&helm=true"); -} -.sideface.redstone_sheep { - background:url("/avatars/ae795aa86327408e92ab25c8a59f3ba1?size=160"); -} -.sideface.redstone_sheep:hover { - background:url("/avatars/ae795aa86327408e92ab25c8a59f3ba1?size=160&helm=true"); -} -.sideface.Notch { - background:url("/avatars/069a79f444e94726a5befca90e38aaf5?size=160"); -} -/* Notch please fid your skin -_- -.sideface.Notch:hover { - background:url("/avatars/069a79f444e94726a5befca90e38aaf5?size=160&helm=true"); -}*/ -.sideface.sk89q { - background:url("/avatars/0ea8eca3dbf647cc9d1ac64551ca975c?size=160"); -} -.sideface.sk89q:hover { - background:url("/avatars/0ea8eca3dbf647cc9d1ac64551ca975c?size=160&helm=true"); -} -.sideface.md_5 { - background:url("/avatars/af74a02d19cb445bb07f6866a861f783?size=160"); -} -.sideface.md_5:hover { - background:url("/avatars/af74a02d19cb445bb07f6866a861f783?size=160&helm=true"); -} - .errmsg { margin-top: 50px; -} \ No newline at end of file +} + +.jumbotron img { + margin: 5px; +} diff --git a/views/index.jade b/views/index.jade index 7b33bfb..55187f2 100644 --- a/views/index.jade +++ b/views/index.jade @@ -1,192 +1,224 @@ extends layout block content - .container(style= "margin-top: 70px;") - .row - .col-md-10 - a(id="crafatar", class="anchor") - a(href="#crafatar") - h1 Crafatar - hr - p Welcome to Crafatar, an API for Minecraft's faces! - - hr - a(id="documentation", class="anchor") - a(href="#documentation") - h2 Documentation - - a(id="avatars", class="anchor") - a(href="#avatars") - h3 Avatars - p - | Replace - mark.green id + .jumbotron + .container + h1 Crafatar + p A blazing fast API for Minecraft faces! + img(alt="Jake0oo0's Avatar", height="64", width="64", src="#{domain}/avatars/2d5aa9cdaeb049189930461fc9b91cc5?size=64&helm") + img(alt="redstone_sheep's Avatar", height="64", width="64", src="#{domain}/avatars/ae795aa86327408e92ab25c8a59f3ba1?size=64&helm") + img(alt="sk89q's Avatar", height="64", width="64", src="#{domain}/avatars/0ea8eca3dbf647cc9d1ac64551ca975c?size=64&helm") + img(alt="md_5's Avatar", height="64", width="64", src="#{domain}/avatars/af74a02d19cb445bb07f6866a861f783?size=64&helm") + img(alt="Jeb's Avatar", height="64", width="64", src="#{domain}/avatars/853c80ef3c3749fdaa49938b674adae6?size=64&helm") + img(alt="Notch's Avatar", height="64", width="64", src="#{domain}/avatars/069a79f444e94726a5befca90e38aaf5?size=64") + .container + section(id="documentation") + h2 Documentation + .row + section(id="avatars", class="anchor") + a(href="#avatars") + h3 Avatars + | Replace + mark.green id | with a Mojang UUID or username to get the related head. All images are PNGs. - .code - | #{domain}/avatars/ - mark.green id - | + .code + | #{domain}/avatars/ + mark.green id - a(id="avatar-parameters", class="anchor") - a(href="#avatar-parameters") - h3 Avatar Parameters - h4 size - p - | The size of the image in pixels, #{config.min_size} - #{config.max_size}.
- | Default is #{config.default_size}. - h4 default - p - | The image to be served when the id has no skin (404).
- | Valid options are - a(href="/avatars/00000000000000000000000000000000?default=steve") steve - | , - a(href="/avatars/00000000000000000000000000000000?default=alex") alex - | , or a custom URL.
- | The standard value is calculated based on the UUID (even = alex, odd = steve). Usernames always default to steve. - h4 helm - p - | Apply the "second" (hat) layer to the avatar.
- | The content of this parameter is ignored.
- | If you want to get the face only, remove the parameter. + section(id="avatars-parameters" class="anchor") + a(href="#avatars-parameters") + h4 Avatar Parameters + table(class="table table-bordered table-striped") + thead + tr + td parameter + td type + td default + td description + tbody + tr + td size + td integer + td #{config.default_size} + td The size of the image in pixels, #{config.min_size} - #{config.max_size}. + tr + td default + td string + td The standard value is calculated based on the UUID (even = alex, odd = steve). Usernames always default to steve. + td + | The image to be served when the id has no skin (404).
+ | Valid options are + a(href="/avatars/00000000000000000000000000000000?default=steve") steve + | , + a(href="/avatars/00000000000000000000000000000000?default=alex") alex + | , or a custom URL. + tr + td helm + td mixed + td null + td Apply the "second" (hat) layer to the avatar. - a(id="skins", class="anchor") - a(href="#skins") - h3 Skins - p - | You can also get the full skin file of a player.
- | Replace - mark.green id - | with a Mojang UUID or username to get the related skin.
- | The user's skin is returned, or the default image is served.
- | You can use the default parameter here as well. - .code - | #{domain}/skins/ - mark.green id + section(id="avatars-examples", class="anchor") + a(href="#avatars-examples") + h4 Avatars Examples + p Jeb's avatar by username, default size + .code #{domain}/avatars/jeb_ + p Jeb's avatar by UUID, default size + .code #{domain}/avatars/853c80ef3c3749fdaa49938b674adae6 + p Jeb's avatar, 64 × 64 + .code #{domain}/avatars/853c80ef3c3749fdaa49938b674adae6?size=64 + p Jeb's avatar, 64 × 64, with helmet + .code #{domain}/avatars/853c80ef3c3749fdaa49938b674adae6?size=64&helm + p Jeb's avatar, or fall back to steve + .code #{domain}/avatars/853c80ef3c3749fdaa49938b674adae6?default=steve + p + | Jeb's avatar, or fall back to + a(href="https://i.imgur.com/ozszMZV.png") a custom image + .code #{domain}/avatars/853c80ef3c3749fdaa49938b674adae6?default=https%3A%2F%2Fi.imgur.com%2FozszMZV.png - a(id="skin-parameters", class="anchor") - a(href="#skin-parameters") - h3 Skin Parameters - h4 default - p - | Same as the default for avatars. + section(id="skins" class="anchor") + a(href="#skins") + h3 Skins + p + | You can also get the full skin file of a player.
+ | Replace + mark.green id + | with a Mojang UUID or username to get the related skin.
+ | The user's skin is returned, or the default image is served.
+ | You can use the default parameter here as well. + .code + | #{domain}/skins/ + mark.green id - a(id="renders", class="anchor") - a(href="#renders") - h3 3D Renders - p - | Crafatar also provides support for 3D renders of Minecraft skins.
- | Please note that this feature is currently beta!
- | Replace - mark.green id - | with a Mojang UUID or username to get a render of the skin. - | The head render type returns a render of the skin's head. - .code - | #{domain}/renders/head/ - mark.green id - | The body render returns a render of the entire skin. - .code - | #{domain}/renders/body/ - mark.green id + section(id="skins-parameters" class="anchor") + a(href="#skins-parameters") + h4 Skin Parameters + table(class="table table-bordered table-striped") + thead + tr + td parameter + td type + td default + td description + tbody + tr + td default + td string + td The standard value is calculated based on the UUID (even = alex, odd = steve). Usernames always default to steve. + td + | The image to be served when the id has no skin (404).
+ | Valid options are + a(href="/skins/00000000000000000000000000000000?default=steve") steve + | , + a(href="/skins/00000000000000000000000000000000?default=alex") alex + | , or a custom URL. - a(id="render-parameters", class="anchor") - a(href="#render-parameters") - h3 Render Parameters - h4 scale - p - | The scale factor of the image #{config.min_scale} - #{config.max_scale}.
- | Default is #{config.default_scale}. The actual size differs between the type of render. - h4 helm - p - | Same as the helm for avatars, but it does not stand out (as it does ingame). - h4 default - p - | Same as the default for avatars. + section(id="skins-examples", class="anchor") + a(href="#skins-examples") + h4 Skins Examples + p Jeb's skin + .code #{domain}/skins/853c80ef3c3749fdaa49938b674adae6 + p Jeb's skin by username + .code #{domain}/skins/jeb_ + p Render of Jeb's Head - a(id="http-headers", class="anchor") - a(href="#http-headers") - h3 HTTP headers - p - | Responses come with these HTTP headers, useful for debugging.
- | Please note that these headers are cached by CloudFlare (CF-Cache-Status: HIT). + section(id="renders" class="anchor") + a(href="#renders") + h3 3D Renders + p + | Crafatar also provides support for 3D renders of Minecraft skins.
+ | Please note that this feature is currently beta!
+ | Replace + mark.green id + | with a Mojang UUID or username to get a render of the skin. + | The head render type returns a render of the skin's head. + .code + | #{domain}/renders/head/ + mark.green id + | The body render returns a render of the entire skin. + .code + | #{domain}/renders/body/ + mark.green id - a(id="response-time", class="anchor") - a(href="#response-time") - h4 Response-Time - p The time, in milliseconds, it took Crafatar to process the request. - a(id="x-storage-type", class="anchor") - a(href="#x-storage-type") - h4 X-Storage-Type - ul - li none: No external requests. Cached: User has no skin. - li cached: No external requests. Skin cached and stored locally. - li - | checked: 1 external request. Skin cached, checked for updates, no skin downloaded.
- | This happens either when the user removed their skin or when it didn't change. - li downloaded: 2 external requests. Skin changed or unknown, downloaded. - li - | error: This can happen, for example, when Mojang's servers are down.
- | If possible, an outdated image is served instead. + section(id="renders-parameters" class="anchor") + a(href="#renders-parameters") + h4 Render Parameters + table(class="table table-bordered table-striped") + thead + tr + td parameter + td type + td default + td description + tbody + tr + td scale + td integer + td #{config.default_scale}. The actual size differs between the type of render. + td The scale factor of the image #{config.min_scale} - #{config.max_scale}. + tr + td helm + td mixed + td null + td Apply the "second" (hat) layer to the avatar. - a(id="about-usernames", class="anchor") - a(href="#about-usernames") - h3 About usernames - p - | We strongly advise you to use UUIDs instead of usernames in production.
- | Usernames are deprecated by Mojang and you should only use usernames for testing.
- | Malformed usernames are rejected. + section(id="renders-examples", class="anchor") + a(href="#renders-examples") + h4 Render Examples + .code #{domain}/renders/head/853c80ef3c3749fdaa49938b674adae6 + p Render of Jeb's Body, with helmet, by username + .code #{domain}/renders/body/jeb_?helm - a(id="about-uuids", class="anchor") - a(href="#about-uuids") - h3 About UUIDs - p - | UUIDs may use the blank or dashed format.
- | Malformed UUIDs are rejected. + section(id="meta" class="anchor") + section(id="meta-http-headers" class="anchor") + a(href="#meta-http-headers") + h3 HTTP Headers + p + | Responses come with these HTTP headers, useful for debugging.
+ | Please note that these headers are cached by CloudFlare (CF-Cache-Status: HIT). - a(id="about-caching", class="anchor") - a(href="#about-caching") - h3 About caching - p - | Crafatar caches skins for #{config.local_cache_time/60} minutes before checking for skin changes.
- | Images are cached in your browser for #{config.browser_cache_time/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. + section(id="meta-response-time" class="anchor") + a(href="#meta-response-time") + h4 Response-Time + p The time, in milliseconds, it took Crafatar to process the request. + section(id="meta-x-storage-type" class="anchor") + a(href="#meta-x-storage-type") + h4 X-Storage-Type + ul + li none: No external requests. Cached: User has no skin. + li cached: No external requests. Skin cached and stored locally. + li + | checked: 1 external request. Skin cached, checked for updates, no skin downloaded.
+ | This happens either when the user removed their skin or when it didn't change. + li downloaded: 2 external requests. Skin changed or unknown, downloaded. + li + | error: This can happen, for example, when Mojang's servers are down.
+ | If possible, an outdated image is served instead. - a(id="examples", class="anchor") - a(href="#examples") - h3 Examples + section(id="meta-about-usernames" class="anchor") + a(href="#meta-about-usernames") + h3 About Usernames + p + | We strongly advise you to use UUIDs instead of usernames in production.
+ | Usernames are deprecated by Mojang and you should only use usernames for testing.
+ | Malformed usernames are rejected. - h4 Avatars - p Jeb's avatar by username, default size - .code #{domain}/avatars/jeb_ - p Jeb's avatar by UUID, default size - .code #{domain}/avatars/853c80ef3c3749fdaa49938b674adae6 - p Jeb's avatar, 64 × 64 - .code #{domain}/avatars/853c80ef3c3749fdaa49938b674adae6?size=64 - p Jeb's avatar, 64 × 64, with helmet - .code #{domain}/avatars/853c80ef3c3749fdaa49938b674adae6?size=64&helm - p Jeb's avatar, or fall back to steve - .code #{domain}/avatars/853c80ef3c3749fdaa49938b674adae6?default=steve - p - | Jeb's avatar, or fall back to - a(href="https://i.imgur.com/ozszMZV.png") a custom image - .code #{domain}/avatars/853c80ef3c3749fdaa49938b674adae6?default=https%3A%2F%2Fi.imgur.com%2FozszMZV.png + section(id="meta-about-uuids" class="anchor") + a(href="#meta-about-uuids") + h3 About UUIDs + p + | UUIDs may use the blank or dashed format.
+ | Malformed UUIDs are rejected. - h4 Skins - p Jeb's skin - .code #{domain}/skins/853c80ef3c3749fdaa49938b674adae6 - p Jeb's skin by username - .code #{domain}/skins/jeb_ - p Render of Jeb's Head + section(id="meta-about-caching" class="anchor") + a(href="#meta-about-caching") + h3 About Caching + p + | Crafatar caches skins for #{config.local_cache_time/60} minutes before checking for skin changes.
+ | Images are cached in your browser for #{config.browser_cache_time/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. - h4 Renders - .code #{domain}/renders/head/853c80ef3c3749fdaa49938b674adae6 - p Render of Jeb's Body, with helmet, by username - .code #{domain}/renders/body/jeb_?helm - - - .col-md-2.center - .sideface.redstone_sheep(title="redstone_sheep") - .sideface.Jake0oo0(title="Jake0oo0") - .sideface.Notch(title="Notch") - .sideface.sk89q(title="sk89q") - .sideface.md_5(title="md_5") \ No newline at end of file + footer + hr + p(class="pull-right") Copyright Craftatar 2014 diff --git a/views/layout.jade b/views/layout.jade index ee92dfe..3de284b 100644 --- a/views/layout.jade +++ b/views/layout.jade @@ -3,7 +3,7 @@ html head title= title link(rel="icon", sizes="16x16", type="image/png", href="/favicon.png") - link(href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css", rel="stylesheet") + link(href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css", rel="stylesheet") link(rel="stylesheet", href="/stylesheets/style.css") meta(name="description", content="Crafatar is a Minecraft avatar service with support for avatars, skins, and even renders!") meta(name="keywords", content="minecraft, avatar, renders, skins, uuid, username") @@ -16,4 +16,4 @@ html a.navbar-brand(href="/") Crafatar .navbar-header a.navbar-brand.twitter(href="https://twitter.com/Crafatar", target="_blank") crafatar - block content \ No newline at end of file + block content