diff --git a/core/classes/Seller.php b/core/classes/Seller.php new file mode 100644 index 0000000000000000000000000000000000000000..f433c8e998acc22447b1dcfebb89900a18fc8ca1 --- /dev/null +++ b/core/classes/Seller.php @@ -0,0 +1,26 @@ +<?php +class Seller{ + private $uuid; + private $username; + private $skin; + + public function __construct($uuid){ + $this->uuid = $uuid; + $json = file_get_contents('https://sessionserver.mojang.com/session/minecraft/profile/'.$uuid); + $profile = json_decode($json, true); + $this->username = $profile['name']; + + $properties = json_decode(base64_decode($profile['properties'][0]['value']), true); + $this->skin = $properties['textures']['SKIN']['url']; + } + + public function getUuid(){ + return $this->uuid; + } + public function getUsername(){ + return $this->username; + } + public function getSkin(){ + return $this->skin; + } +} \ No newline at end of file diff --git a/core/classes/Shop.php b/core/classes/Shop.php index 7e98de28a9ae3b6159b0fc56efdc6023d5d89f48..7563958400befbfabe6400dcdbd42d1d5efb45a0 100644 --- a/core/classes/Shop.php +++ b/core/classes/Shop.php @@ -35,6 +35,8 @@ public static function getShops($search=null){ for($i=0;$i<count($shops);$i++){ $item = yaml_parse($shops[$i]['itemConfig']); $shops[$i]['item'] = new Item(strtolower($item['item']['type'])); + $owner = json_decode($shops[$i]['owner'], true); + $shops[$i]['seller'] = new Seller($owner["owner"]); } return $shops; } diff --git a/index.php b/index.php index 6b155b507d430341d08db174a90001b6e8b9c3d6..ff1af6823b5006408617fcc059c19c1bc563351f 100644 --- a/index.php +++ b/index.php @@ -6,6 +6,7 @@ require_once "core/classes/Connexion.php"; // Ce fichier se charge de la connexion à la base de donnée require_once "core/classes/Shop.php"; require_once "core/classes/Item.php"; +require_once "core/classes/Seller.php"; require_once "core/controller/variables.php"; // Ce fichier se charge de récupérer les variables globales require_once "core/controller/functions.php"; // Et celui-ci des différentes fonctions diff --git a/pages/assets/css/minecraft-skinviewer.css b/pages/assets/css/minecraft-skinviewer.css new file mode 100644 index 0000000000000000000000000000000000000000..ec5719a441b48be2e90f3caca94fc14ecc88eebb --- /dev/null +++ b/pages/assets/css/minecraft-skinviewer.css @@ -0,0 +1,1359 @@ +/*! + * Copyright 2018 Robert Koszewski + * + * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + */ +@keyframes spin { + from { + transform: rotateY(360deg); + } + to { + transform: rotateY(0); + } +} +@keyframes waving { + 0% { + transform: rotateX(-2deg); + } + 50% { + transform: rotateX(2deg); + } + 100% { + transform: rotateX(-2deg); + } +} +.mc-face-viewer-4x { + image-rendering: optimizeSpeed; + /* Legal fallback */ + image-rendering: -moz-crisp-edges; + /* Firefox */ + image-rendering: -o-crisp-edges; + /* Opera */ + image-rendering: -webkit-optimize-contrast; + /* Safari */ + image-rendering: optimize-contrast; + /* CSS3 Proposed */ + image-rendering: crisp-edges; + /* CSS4 Proposed */ + image-rendering: pixelated; + /* CSS4 Proposed */ + -ms-interpolation-mode: nearest-neighbor; + /* IE8+ */ + background-size: 256px; + width: 32px; + height: 32px; + background-position: -32px -32px; + overflow: hidden; + display: inline-block; +} +.mc-face-viewer-4x::after { + content: " "; + width: 32px; + height: 32px; + background-size: 288px; + background-image: inherit; + background-position: -182px -38px; + overflow: hidden; + display: inline-block; +} +.mc-face-viewer-8x { + image-rendering: optimizeSpeed; + /* Legal fallback */ + image-rendering: -moz-crisp-edges; + /* Firefox */ + image-rendering: -o-crisp-edges; + /* Opera */ + image-rendering: -webkit-optimize-contrast; + /* Safari */ + image-rendering: optimize-contrast; + /* CSS3 Proposed */ + image-rendering: crisp-edges; + /* CSS4 Proposed */ + image-rendering: pixelated; + /* CSS4 Proposed */ + -ms-interpolation-mode: nearest-neighbor; + /* IE8+ */ + background-size: 512px; + width: 64px; + height: 64px; + background-position: -64px -64px; + overflow: hidden; + display: inline-block; +} +.mc-face-viewer-8x::after { + content: " "; + width: 64px; + height: 64px; + background-size: 576px; + background-image: inherit; + background-position: -364px -76px; + overflow: hidden; + display: inline-block; +} +.mc-skin-viewer-9x { + width: 72px; + height: 288px; + margin: 15px auto 40px auto; + perspective: 800px; + perspective-origin: 50% 100px; + transform-style: preserve-3d; + background-image: none !important; + image-rendering: optimizeSpeed; + /* Legal fallback */ + image-rendering: -moz-crisp-edges; + /* Firefox */ + image-rendering: -o-crisp-edges; + /* Opera */ + image-rendering: -webkit-optimize-contrast; + /* Safari */ + image-rendering: optimize-contrast; + /* CSS3 Proposed */ + image-rendering: crisp-edges; + /* CSS4 Proposed */ + image-rendering: pixelated; + /* CSS4 Proposed */ + -ms-interpolation-mode: nearest-neighbor; + /* IE8+ */ +} +.mc-skin-viewer-9x.hide-accessories .accessory { + display: none; +} +.mc-skin-viewer-9x.spin > .player { + animation: spin 12s infinite linear; +} +.mc-skin-viewer-9x .player { + transform-style: preserve-3d; +} +.mc-skin-viewer-9x .player .front, +.mc-skin-viewer-9x .player .back, +.mc-skin-viewer-9x .player .left, +.mc-skin-viewer-9x .player .right, +.mc-skin-viewer-9x .player .top, +.mc-skin-viewer-9x .player .bottom { + position: absolute; + background-size: 576px; + background-repeat: no-repeat; + backface-visibility: hidden; +} +.mc-skin-viewer-9x .player .accessory { + background-image: none; +} +.mc-skin-viewer-9x .player .accessory .front, +.mc-skin-viewer-9x .player .accessory .back, +.mc-skin-viewer-9x .player .accessory .left, +.mc-skin-viewer-9x .player .accessory .right, +.mc-skin-viewer-9x .player .accessory .top, +.mc-skin-viewer-9x .player .accessory .bottom { + backface-visibility: visible; +} +.mc-skin-viewer-9x .player > .head { + position: absolute; + transform-style: preserve-3d; + width: 72px; + height: 72px; + margin: 0 auto; + background-image: none !important; +} +.mc-skin-viewer-9x .player > .head .front, +.mc-skin-viewer-9x .player > .head .back, +.mc-skin-viewer-9x .player > .head .left, +.mc-skin-viewer-9x .player > .head .right, +.mc-skin-viewer-9x .player > .head .top, +.mc-skin-viewer-9x .player > .head .bottom { + width: 72px; + height: 72px; +} +.mc-skin-viewer-9x .player > .head .front { + background-position: -72px -72px; + transform: rotateX(0deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(36px); +} +.mc-skin-viewer-9x .player > .head .back { + background-position: -216px -72px; + transform: rotateX(0deg) rotateY(180deg) translateX(0px) translateY(0px) translateZ(36px); +} +.mc-skin-viewer-9x .player > .head .right { + background-position: 0px -72px; + transform: rotateX(0deg) rotateY(270deg) translateX(0px) translateY(0px) translateZ(36px); +} +.mc-skin-viewer-9x .player > .head .left { + background-position: -144px -72px; + transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(36px); +} +.mc-skin-viewer-9x .player > .head .top { + background-position: -72px 0px; + transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(36px); +} +.mc-skin-viewer-9x .player > .head .bottom { + background-position: -144px 0px; + transform: rotateX(270deg) rotateY(0deg) rotateZ(180deg) translateX(0px) translateY(0px) translateZ(36px); +} +.mc-skin-viewer-9x .player > .head > .accessory { + transform-style: preserve-3d; + transform: scale3d(1.125, 1.125, 1.125) translateY(-3.5px); +} +.mc-skin-viewer-9x .player > .head > .accessory > .front { + background-position: -360px -72px; +} +.mc-skin-viewer-9x .player > .head > .accessory > .back { + background-position: -504px -72px; +} +.mc-skin-viewer-9x .player > .head > .accessory > .right { + background-position: -288px -72px; +} +.mc-skin-viewer-9x .player > .head > .accessory > .left { + background-position: -432px -72px; +} +.mc-skin-viewer-9x .player > .head > .accessory > .top { + background-position: -360px 0px; +} +.mc-skin-viewer-9x .player > .head > .accessory > .bottom { + background-position: -432px 0px; +} +.mc-skin-viewer-9x .player > .body { + position: absolute; + transform-style: preserve-3d; + width: 72px; + height: 72px; + margin: 0 auto; + transform: translateY(72px); + background-image: none !important; +} +.mc-skin-viewer-9x .player > .body .front, +.mc-skin-viewer-9x .player > .body .back, +.mc-skin-viewer-9x .player > .body .left, +.mc-skin-viewer-9x .player > .body .right, +.mc-skin-viewer-9x .player > .body .top, +.mc-skin-viewer-9x .player > .body .bottom { + width: 72px; + height: 108px; +} +.mc-skin-viewer-9x .player > .body .left, +.mc-skin-viewer-9x .player > .body .right { + width: 36px; +} +.mc-skin-viewer-9x .player > .body .top, +.mc-skin-viewer-9x .player > .body .bottom { + height: 36px; +} +.mc-skin-viewer-9x .player > .body .front { + background-position: -180px -180px; + transform: rotateX(0deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(18px); +} +.mc-skin-viewer-9x .player > .body .back { + background-position: -288px -180px; + transform: rotateX(0deg) rotateY(180deg) translateX(0px) translateY(0px) translateZ(18px); +} +.mc-skin-viewer-9x .player > .body .right { + background-position: -144px -180px; + transform: rotateX(0deg) rotateY(270deg) translateX(0px) translateY(0px) translateZ(18px); +} +.mc-skin-viewer-9x .player > .body .left { + background-position: -252px -180px; + transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(54px); +} +.mc-skin-viewer-9x .player > .body .top { + background-position: -180px -144px; + transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(18px); +} +.mc-skin-viewer-9x .player > .body .bottom { + background-position: -252px -144px; + transform: rotateX(270deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(90px); +} +.mc-skin-viewer-9x .player > .body > .accessory { + transform-style: preserve-3d; + transform: scale3d(1.0625, 1.0625, 1.0625) translateY(-3.375px); +} +.mc-skin-viewer-9x .player > .body > .accessory > .front { + background-position: -180px -324px; +} +.mc-skin-viewer-9x .player > .body > .accessory > .back { + background-position: -288px -324px; +} +.mc-skin-viewer-9x .player > .body > .accessory > .right { + background-position: -144px -324px; +} +.mc-skin-viewer-9x .player > .body > .accessory > .left { + background-position: -252px -324px; +} +.mc-skin-viewer-9x .player > .body > .accessory > .top { + background-position: -180px -288px; +} +.mc-skin-viewer-9x .player > .body > .accessory > .bottom { + background-position: -252px -288px; +} +.mc-skin-viewer-9x .player > .left-arm, +.mc-skin-viewer-9x .player > .right-arm { + position: absolute; + transform-style: preserve-3d; + width: 36px; + height: 108px; + margin: 0 auto; + transform: translateY(72px) translateX(-36px); + background-image: none !important; +} +.mc-skin-viewer-9x .player > .left-arm .front, +.mc-skin-viewer-9x .player > .right-arm .front, +.mc-skin-viewer-9x .player > .left-arm .back, +.mc-skin-viewer-9x .player > .right-arm .back, +.mc-skin-viewer-9x .player > .left-arm .left, +.mc-skin-viewer-9x .player > .right-arm .left, +.mc-skin-viewer-9x .player > .left-arm .right, +.mc-skin-viewer-9x .player > .right-arm .right, +.mc-skin-viewer-9x .player > .left-arm .top, +.mc-skin-viewer-9x .player > .right-arm .top, +.mc-skin-viewer-9x .player > .left-arm .bottom, +.mc-skin-viewer-9x .player > .right-arm .bottom { + width: 36px; + height: 108px; +} +.mc-skin-viewer-9x .player > .left-arm .top, +.mc-skin-viewer-9x .player > .right-arm .top, +.mc-skin-viewer-9x .player > .left-arm .bottom, +.mc-skin-viewer-9x .player > .right-arm .bottom { + height: 36px; +} +.mc-skin-viewer-9x .player > .left-arm .front, +.mc-skin-viewer-9x .player > .right-arm .front { + background-position: -396px -180px; + transform: rotateX(0deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(18px); +} +.mc-skin-viewer-9x .player > .left-arm .back, +.mc-skin-viewer-9x .player > .right-arm .back { + background-position: -468px -180px; + transform: rotateX(0deg) rotateY(180deg) translateX(0px) translateY(0px) translateZ(18px); +} +.mc-skin-viewer-9x .player > .left-arm .right, +.mc-skin-viewer-9x .player > .right-arm .right { + background-position: -360px -180px; + transform: rotateX(0deg) rotateY(270deg) translateX(0px) translateY(0px) translateZ(18px); +} +.mc-skin-viewer-9x .player > .left-arm .left, +.mc-skin-viewer-9x .player > .right-arm .left { + background-position: -432px -180px; + transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(18px); +} +.mc-skin-viewer-9x .player > .left-arm .top, +.mc-skin-viewer-9x .player > .right-arm .top { + background-position: -396px -144px; + transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(18px); +} +.mc-skin-viewer-9x .player > .left-arm .bottom, +.mc-skin-viewer-9x .player > .right-arm .bottom { + background-position: -432px -144px; + transform: rotateX(270deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(90px); +} +.mc-skin-viewer-9x .player > .left-arm > .accessory, +.mc-skin-viewer-9x .player > .right-arm > .accessory { + transform-style: preserve-3d; + transform: scale3d(1.0625, 1.0625, 1.0625) translateY(-3.375px); +} +.mc-skin-viewer-9x .player > .left-arm > .accessory .front, +.mc-skin-viewer-9x .player > .right-arm > .accessory .front { + background-position: -396px -324px; +} +.mc-skin-viewer-9x .player > .left-arm > .accessory .back, +.mc-skin-viewer-9x .player > .right-arm > .accessory .back { + background-position: -468px -324px; +} +.mc-skin-viewer-9x .player > .left-arm > .accessory .right, +.mc-skin-viewer-9x .player > .right-arm > .accessory .right { + background-position: -360px -324px; +} +.mc-skin-viewer-9x .player > .left-arm > .accessory .left, +.mc-skin-viewer-9x .player > .right-arm > .accessory .left { + background-position: -432px -324px; +} +.mc-skin-viewer-9x .player > .left-arm > .accessory .top, +.mc-skin-viewer-9x .player > .right-arm > .accessory .top { + background-position: -396px -288px; +} +.mc-skin-viewer-9x .player > .left-arm > .accessory .bottom, +.mc-skin-viewer-9x .player > .right-arm > .accessory .bottom { + background-position: -432px -288px; +} +.mc-skin-viewer-9x .player > .right-arm { + transform: translateY(72px) translateX(72px) scaleX(-1); +} +.mc-skin-viewer-9x .player > .left-leg, +.mc-skin-viewer-9x .player > .right-leg { + position: absolute; + transform-style: preserve-3d; + width: 36px; + height: 108px; + margin: 0 auto; + transform: translateY(180px); + background-image: none !important; +} +.mc-skin-viewer-9x .player > .left-leg .front, +.mc-skin-viewer-9x .player > .right-leg .front, +.mc-skin-viewer-9x .player > .left-leg .back, +.mc-skin-viewer-9x .player > .right-leg .back, +.mc-skin-viewer-9x .player > .left-leg .left, +.mc-skin-viewer-9x .player > .right-leg .left, +.mc-skin-viewer-9x .player > .left-leg .right, +.mc-skin-viewer-9x .player > .right-leg .right, +.mc-skin-viewer-9x .player > .left-leg .top, +.mc-skin-viewer-9x .player > .right-leg .top, +.mc-skin-viewer-9x .player > .left-leg .bottom, +.mc-skin-viewer-9x .player > .right-leg .bottom { + width: 36px; + height: 108px; +} +.mc-skin-viewer-9x .player > .left-leg .top, +.mc-skin-viewer-9x .player > .right-leg .top, +.mc-skin-viewer-9x .player > .left-leg .bottom, +.mc-skin-viewer-9x .player > .right-leg .bottom { + height: 36px; +} +.mc-skin-viewer-9x .player > .left-leg .front, +.mc-skin-viewer-9x .player > .right-leg .front { + background-position: -36px -180px; + transform: rotateX(0deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(18px); +} +.mc-skin-viewer-9x .player > .left-leg .back, +.mc-skin-viewer-9x .player > .right-leg .back { + background-position: -108px -180px; + transform: rotateX(0deg) rotateY(180deg) translateX(0px) translateY(0px) translateZ(18px); +} +.mc-skin-viewer-9x .player > .left-leg .right, +.mc-skin-viewer-9x .player > .right-leg .right { + background-position: 0px -180px; + transform: rotateX(0deg) rotateY(270deg) translateX(0px) translateY(0px) translateZ(18px); +} +.mc-skin-viewer-9x .player > .left-leg .left, +.mc-skin-viewer-9x .player > .right-leg .left { + background-position: -72px -180px; + transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(18px); +} +.mc-skin-viewer-9x .player > .left-leg .top, +.mc-skin-viewer-9x .player > .right-leg .top { + background-position: -36px -144px; + transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(18px); +} +.mc-skin-viewer-9x .player > .left-leg .bottom, +.mc-skin-viewer-9x .player > .right-leg .bottom { + background-position: -72px -144px; + transform: rotateX(270deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(90px); +} +.mc-skin-viewer-9x .player > .left-leg > .accessory, +.mc-skin-viewer-9x .player > .right-leg > .accessory { + transform-style: preserve-3d; + transform: scale3d(1.03125, 1.03125, 1.03125) translateY(-1.6875px); +} +.mc-skin-viewer-9x .player > .left-leg > .accessory .front, +.mc-skin-viewer-9x .player > .right-leg > .accessory .front { + background-position: -36px -324px; +} +.mc-skin-viewer-9x .player > .left-leg > .accessory .back, +.mc-skin-viewer-9x .player > .right-leg > .accessory .back { + background-position: -108px -324px; +} +.mc-skin-viewer-9x .player > .left-leg > .accessory .right, +.mc-skin-viewer-9x .player > .right-leg > .accessory .right { + background-position: 0px -324px; +} +.mc-skin-viewer-9x .player > .left-leg > .accessory .left, +.mc-skin-viewer-9x .player > .right-leg > .accessory .left { + background-position: -72px -324px; +} +.mc-skin-viewer-9x .player > .left-leg > .accessory .top, +.mc-skin-viewer-9x .player > .right-leg > .accessory .top { + background-position: -36px -288px; +} +.mc-skin-viewer-9x .player > .left-leg > .accessory .bottom, +.mc-skin-viewer-9x .player > .right-leg > .accessory .bottom { + background-position: -72px -288px; +} +.mc-skin-viewer-9x .player > .right-leg { + transform: translateY(180px) translateX(36px) scaleX(-1); +} +.mc-skin-viewer-9x:not(.legacy) .player > .right-arm { + transform: translateY(72px) translateX(72px); +} +.mc-skin-viewer-9x:not(.legacy) .player > .right-arm .front { + background-position: -324px -468px; +} +.mc-skin-viewer-9x:not(.legacy) .player > .right-arm .back { + background-position: -396px -468px; +} +.mc-skin-viewer-9x:not(.legacy) .player > .right-arm .right { + background-position: -288px -468px; +} +.mc-skin-viewer-9x:not(.legacy) .player > .right-arm .left { + background-position: -360px -468px; +} +.mc-skin-viewer-9x:not(.legacy) .player > .right-arm .top { + background-position: -324px -432px; +} +.mc-skin-viewer-9x:not(.legacy) .player > .right-arm .bottom { + background-position: -360px -432px; +} +.mc-skin-viewer-9x:not(.legacy) .player > .right-arm > .accessory .front { + background-position: -468px -468px; +} +.mc-skin-viewer-9x:not(.legacy) .player > .right-arm > .accessory .back { + background-position: -540px -468px; +} +.mc-skin-viewer-9x:not(.legacy) .player > .right-arm > .accessory .right { + background-position: -432px -468px; +} +.mc-skin-viewer-9x:not(.legacy) .player > .right-arm > .accessory .left { + background-position: -504px -468px; +} +.mc-skin-viewer-9x:not(.legacy) .player > .right-arm > .accessory .top { + background-position: -468px -432px; +} +.mc-skin-viewer-9x:not(.legacy) .player > .right-arm > .accessory .bottom { + background-position: -504px -432px; +} +.mc-skin-viewer-9x:not(.legacy) .player > .right-leg { + transform: translateY(180px) translateX(36px); +} +.mc-skin-viewer-9x:not(.legacy) .player > .right-leg .front { + background-position: -180px -468px; +} +.mc-skin-viewer-9x:not(.legacy) .player > .right-leg .back { + background-position: -252px -468px; +} +.mc-skin-viewer-9x:not(.legacy) .player > .right-leg .right { + background-position: -144px -468px; +} +.mc-skin-viewer-9x:not(.legacy) .player > .right-leg .left { + background-position: -216px -468px; +} +.mc-skin-viewer-9x:not(.legacy) .player > .right-leg .top { + background-position: -180px -432px; +} +.mc-skin-viewer-9x:not(.legacy) .player > .right-leg .bottom { + background-position: -216px -432px; +} +.mc-skin-viewer-9x:not(.legacy) .player > .right-leg > .accessory .front { + background-position: -36px -468px; +} +.mc-skin-viewer-9x:not(.legacy) .player > .right-leg > .accessory .back { + background-position: -108px -468px; +} +.mc-skin-viewer-9x:not(.legacy) .player > .right-leg > .accessory .right { + background-position: 0px -468px; +} +.mc-skin-viewer-9x:not(.legacy) .player > .right-leg > .accessory .left { + background-position: -72px -468px; +} +.mc-skin-viewer-9x:not(.legacy) .player > .right-leg > .accessory .top { + background-position: -36px -432px; +} +.mc-skin-viewer-9x:not(.legacy) .player > .right-leg > .accessory .bottom { + background-position: -72px -432px; +} +.mc-skin-viewer-9x.slim .player > .left-arm .front, +.mc-skin-viewer-9x.slim .player > .right-arm .front, +.mc-skin-viewer-9x.slim .player > .left-arm .back, +.mc-skin-viewer-9x.slim .player > .right-arm .back, +.mc-skin-viewer-9x.slim .player > .left-arm .top, +.mc-skin-viewer-9x.slim .player > .right-arm .top, +.mc-skin-viewer-9x.slim .player > .left-arm .bottom, +.mc-skin-viewer-9x.slim .player > .right-arm .bottom { + width: 27px; +} +.mc-skin-viewer-9x.slim .player > .left-arm .front { + transform: rotateX(0deg) rotateY(0deg) translateX(9px) translateY(0px) translateZ(18px); +} +.mc-skin-viewer-9x.slim .player > .left-arm .back { + background-position: -459px -180px; + transform: rotateX(0deg) rotateY(180deg) translateX(-9px) translateY(0px) translateZ(18px); +} +.mc-skin-viewer-9x.slim .player > .left-arm .right { + transform: rotateX(0deg) rotateY(270deg) translateX(0px) translateY(0px) translateZ(9px); +} +.mc-skin-viewer-9x.slim .player > .left-arm .left { + background-position: -423px -180px; +} +.mc-skin-viewer-9x.slim .player > .left-arm .top { + transform: rotateX(90deg) rotateY(0deg) translateX(9px) translateY(0px) translateZ(18px); +} +.mc-skin-viewer-9x.slim .player > .left-arm .bottom { + background-position: -423px -144px; + transform: rotateX(270deg) rotateY(0deg) translateX(9px) translateY(0px) translateZ(90px); +} +.mc-skin-viewer-9x.slim .player > .left-arm > .accessory .back { + background-position: -459px -324px; +} +.mc-skin-viewer-9x.slim .player > .left-arm > .accessory .left { + background-position: -423px -324px; +} +.mc-skin-viewer-9x.slim .player > .left-arm > .accessory .bottom { + background-position: -423px -288px; +} +.mc-skin-viewer-9x.slim .player > .right-arm .back { + background-position: -387px -468px; +} +.mc-skin-viewer-9x.slim .player > .right-arm .left { + background-position: -351px -468px; + transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(9px); +} +.mc-skin-viewer-9x.slim .player > .right-arm .bottom { + background-position: -351px -432px; +} +.mc-skin-viewer-9x.slim .player > .right-arm > .accessory .back { + background-position: -531px -468px; +} +.mc-skin-viewer-9x.slim .player > .right-arm > .accessory .left { + background-position: -495px -468px; +} +.mc-skin-viewer-9x.slim .player > .right-arm > .accessory .bottom { + background-position: -495px -432px; +} +.mc-skin-viewer-9x.slim.legacy .player > .right-arm { + transform: translateY(72px) translateX(63px) scaleX(-1); +} +.mc-skin-viewer-9x.slim.legacy .player > .right-arm .back { + background-position: -459px -180px; +} +.mc-skin-viewer-9x.slim.legacy .player > .right-arm > .accessory .back { + background-position: -459px -324px; +} +.mc-skin-viewer-9x .player .cape { + transform-style: preserve-3d; + transform: rotateY(180deg) translateX(-9px) translateZ(22.5px) translateY(67.5px) rotateX(5deg); +} +.mc-skin-viewer-9x .player .cape > .front, +.mc-skin-viewer-9x .player .cape > .back, +.mc-skin-viewer-9x .player .cape > .left, +.mc-skin-viewer-9x .player .cape > .right, +.mc-skin-viewer-9x .player .cape > .top, +.mc-skin-viewer-9x .player .cape > .bottom { + position: absolute; + background-image: inherit!important; + background-size: 576px 288px; + backface-visibility: hidden; +} +.mc-skin-viewer-9x .player .cape > .front, +.mc-skin-viewer-9x .player .cape > .back { + width: 90px; + height: 135px; +} +.mc-skin-viewer-9x .player .cape > .left, +.mc-skin-viewer-9x .player .cape > .right { + width: 9px; + height: 135px; +} +.mc-skin-viewer-9x .player .cape > .top, +.mc-skin-viewer-9x .player .cape > .bottom { + width: 90px; + height: 9px; +} +.mc-skin-viewer-9x .player .cape > .front { + background-position: -9px -9px; + transform: translateZ(4.5px); +} +.mc-skin-viewer-9x .player .cape > .back { + background-position: -108px -9px; + transform: translateZ(-4.5px) rotateY(180deg); +} +.mc-skin-viewer-9x .player .cape > .left { + background-position: 0px -9px; + transform: rotateY(270deg) translateZ(4.5px); +} +.mc-skin-viewer-9x .player .cape > .right { + background-position: -99px -9px; + transform: rotateY(-270deg) translateZ(85.5px); +} +.mc-skin-viewer-9x .player .cape > .top { + background-position: -9px 0px; + transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(4.5px); +} +.mc-skin-viewer-9x .player .cape > .bottom { + background-position: -99px 0px; + transform: rotateX(-90deg) translateZ(130.5px); +} +.mc-skin-viewer-9x.legacy-cape > .player .cape > .front, +.mc-skin-viewer-9x.legacy-cape > .player .cape > .back, +.mc-skin-viewer-9x.legacy-cape > .player .cape > .left, +.mc-skin-viewer-9x.legacy-cape > .player .cape > .right, +.mc-skin-viewer-9x.legacy-cape > .player .cape > .top, +.mc-skin-viewer-9x.legacy-cape > .player .cape > .bottom { + background-size: 198px 153px; +} +.mc-skin-viewer-11x { + width: 88px; + height: 352px; + margin: 15px auto 40px auto; + perspective: 800px; + perspective-origin: 50% 100px; + transform-style: preserve-3d; + background-image: none !important; + image-rendering: optimizeSpeed; + /* Legal fallback */ + image-rendering: -moz-crisp-edges; + /* Firefox */ + image-rendering: -o-crisp-edges; + /* Opera */ + image-rendering: -webkit-optimize-contrast; + /* Safari */ + image-rendering: optimize-contrast; + /* CSS3 Proposed */ + image-rendering: crisp-edges; + /* CSS4 Proposed */ + image-rendering: pixelated; + /* CSS4 Proposed */ + -ms-interpolation-mode: nearest-neighbor; + /* IE8+ */ +} +.mc-skin-viewer-11x.hide-accessories .accessory { + display: none; +} +.mc-skin-viewer-11x.spin > .player { + animation: spin 12s infinite linear; +} +.mc-skin-viewer-11x .player { + transform-style: preserve-3d; +} +.mc-skin-viewer-11x .player .front, +.mc-skin-viewer-11x .player .back, +.mc-skin-viewer-11x .player .left, +.mc-skin-viewer-11x .player .right, +.mc-skin-viewer-11x .player .top, +.mc-skin-viewer-11x .player .bottom { + position: absolute; + background-size: 704px; + background-repeat: no-repeat; + backface-visibility: hidden; +} +.mc-skin-viewer-11x .player .accessory { + background-image: none; +} +.mc-skin-viewer-11x .player .accessory .front, +.mc-skin-viewer-11x .player .accessory .back, +.mc-skin-viewer-11x .player .accessory .left, +.mc-skin-viewer-11x .player .accessory .right, +.mc-skin-viewer-11x .player .accessory .top, +.mc-skin-viewer-11x .player .accessory .bottom { + backface-visibility: visible; +} +.mc-skin-viewer-11x .player > .head { + position: absolute; + transform-style: preserve-3d; + width: 88px; + height: 88px; + margin: 0 auto; + background-image: none !important; +} +.mc-skin-viewer-11x .player > .head .front, +.mc-skin-viewer-11x .player > .head .back, +.mc-skin-viewer-11x .player > .head .left, +.mc-skin-viewer-11x .player > .head .right, +.mc-skin-viewer-11x .player > .head .top, +.mc-skin-viewer-11x .player > .head .bottom { + width: 88px; + height: 88px; +} +.mc-skin-viewer-11x .player > .head .front { + background-position: -88px -88px; + transform: rotateX(0deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(44px); +} +.mc-skin-viewer-11x .player > .head .back { + background-position: -264px -88px; + transform: rotateX(0deg) rotateY(180deg) translateX(0px) translateY(0px) translateZ(44px); +} +.mc-skin-viewer-11x .player > .head .right { + background-position: 0px -88px; + transform: rotateX(0deg) rotateY(270deg) translateX(0px) translateY(0px) translateZ(44px); +} +.mc-skin-viewer-11x .player > .head .left { + background-position: -176px -88px; + transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(44px); +} +.mc-skin-viewer-11x .player > .head .top { + background-position: -88px 0px; + transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(44px); +} +.mc-skin-viewer-11x .player > .head .bottom { + background-position: -176px 0px; + transform: rotateX(270deg) rotateY(0deg) rotateZ(180deg) translateX(0px) translateY(0px) translateZ(44px); +} +.mc-skin-viewer-11x .player > .head > .accessory { + transform-style: preserve-3d; + transform: scale3d(1.125, 1.125, 1.125) translateY(-4.5px); +} +.mc-skin-viewer-11x .player > .head > .accessory > .front { + background-position: -440px -88px; +} +.mc-skin-viewer-11x .player > .head > .accessory > .back { + background-position: -616px -88px; +} +.mc-skin-viewer-11x .player > .head > .accessory > .right { + background-position: -352px -88px; +} +.mc-skin-viewer-11x .player > .head > .accessory > .left { + background-position: -528px -88px; +} +.mc-skin-viewer-11x .player > .head > .accessory > .top { + background-position: -440px 0px; +} +.mc-skin-viewer-11x .player > .head > .accessory > .bottom { + background-position: -528px 0px; +} +.mc-skin-viewer-11x .player > .body { + position: absolute; + transform-style: preserve-3d; + width: 88px; + height: 88px; + margin: 0 auto; + transform: translateY(88px); + background-image: none !important; +} +.mc-skin-viewer-11x .player > .body .front, +.mc-skin-viewer-11x .player > .body .back, +.mc-skin-viewer-11x .player > .body .left, +.mc-skin-viewer-11x .player > .body .right, +.mc-skin-viewer-11x .player > .body .top, +.mc-skin-viewer-11x .player > .body .bottom { + width: 88px; + height: 132px; +} +.mc-skin-viewer-11x .player > .body .left, +.mc-skin-viewer-11x .player > .body .right { + width: 44px; +} +.mc-skin-viewer-11x .player > .body .top, +.mc-skin-viewer-11x .player > .body .bottom { + height: 44px; +} +.mc-skin-viewer-11x .player > .body .front { + background-position: -220px -220px; + transform: rotateX(0deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(22px); +} +.mc-skin-viewer-11x .player > .body .back { + background-position: -352px -220px; + transform: rotateX(0deg) rotateY(180deg) translateX(0px) translateY(0px) translateZ(22px); +} +.mc-skin-viewer-11x .player > .body .right { + background-position: -176px -220px; + transform: rotateX(0deg) rotateY(270deg) translateX(0px) translateY(0px) translateZ(22px); +} +.mc-skin-viewer-11x .player > .body .left { + background-position: -308px -220px; + transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(66px); +} +.mc-skin-viewer-11x .player > .body .top { + background-position: -220px -176px; + transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(22px); +} +.mc-skin-viewer-11x .player > .body .bottom { + background-position: -308px -176px; + transform: rotateX(270deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(110px); +} +.mc-skin-viewer-11x .player > .body > .accessory { + transform-style: preserve-3d; + transform: scale3d(1.0625, 1.0625, 1.0625) translateY(-4.125px); +} +.mc-skin-viewer-11x .player > .body > .accessory > .front { + background-position: -220px -396px; +} +.mc-skin-viewer-11x .player > .body > .accessory > .back { + background-position: -352px -396px; +} +.mc-skin-viewer-11x .player > .body > .accessory > .right { + background-position: -176px -396px; +} +.mc-skin-viewer-11x .player > .body > .accessory > .left { + background-position: -308px -396px; +} +.mc-skin-viewer-11x .player > .body > .accessory > .top { + background-position: -220px -352px; +} +.mc-skin-viewer-11x .player > .body > .accessory > .bottom { + background-position: -308px -352px; +} +.mc-skin-viewer-11x .player > .left-arm, +.mc-skin-viewer-11x .player > .right-arm { + position: absolute; + transform-style: preserve-3d; + width: 44px; + height: 132px; + margin: 0 auto; + transform: translateY(88px) translateX(-44px); + background-image: none !important; +} +.mc-skin-viewer-11x .player > .left-arm .front, +.mc-skin-viewer-11x .player > .right-arm .front, +.mc-skin-viewer-11x .player > .left-arm .back, +.mc-skin-viewer-11x .player > .right-arm .back, +.mc-skin-viewer-11x .player > .left-arm .left, +.mc-skin-viewer-11x .player > .right-arm .left, +.mc-skin-viewer-11x .player > .left-arm .right, +.mc-skin-viewer-11x .player > .right-arm .right, +.mc-skin-viewer-11x .player > .left-arm .top, +.mc-skin-viewer-11x .player > .right-arm .top, +.mc-skin-viewer-11x .player > .left-arm .bottom, +.mc-skin-viewer-11x .player > .right-arm .bottom { + width: 44px; + height: 132px; +} +.mc-skin-viewer-11x .player > .left-arm .top, +.mc-skin-viewer-11x .player > .right-arm .top, +.mc-skin-viewer-11x .player > .left-arm .bottom, +.mc-skin-viewer-11x .player > .right-arm .bottom { + height: 44px; +} +.mc-skin-viewer-11x .player > .left-arm .front, +.mc-skin-viewer-11x .player > .right-arm .front { + background-position: -484px -220px; + transform: rotateX(0deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(22px); +} +.mc-skin-viewer-11x .player > .left-arm .back, +.mc-skin-viewer-11x .player > .right-arm .back { + background-position: -572px -220px; + transform: rotateX(0deg) rotateY(180deg) translateX(0px) translateY(0px) translateZ(22px); +} +.mc-skin-viewer-11x .player > .left-arm .right, +.mc-skin-viewer-11x .player > .right-arm .right { + background-position: -440px -220px; + transform: rotateX(0deg) rotateY(270deg) translateX(0px) translateY(0px) translateZ(22px); +} +.mc-skin-viewer-11x .player > .left-arm .left, +.mc-skin-viewer-11x .player > .right-arm .left { + background-position: -528px -220px; + transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(22px); +} +.mc-skin-viewer-11x .player > .left-arm .top, +.mc-skin-viewer-11x .player > .right-arm .top { + background-position: -484px -176px; + transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(22px); +} +.mc-skin-viewer-11x .player > .left-arm .bottom, +.mc-skin-viewer-11x .player > .right-arm .bottom { + background-position: -528px -176px; + transform: rotateX(270deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(110px); +} +.mc-skin-viewer-11x .player > .left-arm > .accessory, +.mc-skin-viewer-11x .player > .right-arm > .accessory { + transform-style: preserve-3d; + transform: scale3d(1.0625, 1.0625, 1.0625) translateY(-4.125px); +} +.mc-skin-viewer-11x .player > .left-arm > .accessory .front, +.mc-skin-viewer-11x .player > .right-arm > .accessory .front { + background-position: -484px -396px; +} +.mc-skin-viewer-11x .player > .left-arm > .accessory .back, +.mc-skin-viewer-11x .player > .right-arm > .accessory .back { + background-position: -572px -396px; +} +.mc-skin-viewer-11x .player > .left-arm > .accessory .right, +.mc-skin-viewer-11x .player > .right-arm > .accessory .right { + background-position: -440px -396px; +} +.mc-skin-viewer-11x .player > .left-arm > .accessory .left, +.mc-skin-viewer-11x .player > .right-arm > .accessory .left { + background-position: -528px -396px; +} +.mc-skin-viewer-11x .player > .left-arm > .accessory .top, +.mc-skin-viewer-11x .player > .right-arm > .accessory .top { + background-position: -484px -352px; +} +.mc-skin-viewer-11x .player > .left-arm > .accessory .bottom, +.mc-skin-viewer-11x .player > .right-arm > .accessory .bottom { + background-position: -528px -352px; +} +.mc-skin-viewer-11x .player > .right-arm { + transform: translateY(88px) translateX(88px) scaleX(-1); +} +.mc-skin-viewer-11x .player > .left-leg, +.mc-skin-viewer-11x .player > .right-leg { + position: absolute; + transform-style: preserve-3d; + width: 44px; + height: 132px; + margin: 0 auto; + transform: translateY(220px); + background-image: none !important; +} +.mc-skin-viewer-11x .player > .left-leg .front, +.mc-skin-viewer-11x .player > .right-leg .front, +.mc-skin-viewer-11x .player > .left-leg .back, +.mc-skin-viewer-11x .player > .right-leg .back, +.mc-skin-viewer-11x .player > .left-leg .left, +.mc-skin-viewer-11x .player > .right-leg .left, +.mc-skin-viewer-11x .player > .left-leg .right, +.mc-skin-viewer-11x .player > .right-leg .right, +.mc-skin-viewer-11x .player > .left-leg .top, +.mc-skin-viewer-11x .player > .right-leg .top, +.mc-skin-viewer-11x .player > .left-leg .bottom, +.mc-skin-viewer-11x .player > .right-leg .bottom { + width: 44px; + height: 132px; +} +.mc-skin-viewer-11x .player > .left-leg .top, +.mc-skin-viewer-11x .player > .right-leg .top, +.mc-skin-viewer-11x .player > .left-leg .bottom, +.mc-skin-viewer-11x .player > .right-leg .bottom { + height: 44px; +} +.mc-skin-viewer-11x .player > .left-leg .front, +.mc-skin-viewer-11x .player > .right-leg .front { + background-position: -44px -220px; + transform: rotateX(0deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(22px); +} +.mc-skin-viewer-11x .player > .left-leg .back, +.mc-skin-viewer-11x .player > .right-leg .back { + background-position: -132px -220px; + transform: rotateX(0deg) rotateY(180deg) translateX(0px) translateY(0px) translateZ(22px); +} +.mc-skin-viewer-11x .player > .left-leg .right, +.mc-skin-viewer-11x .player > .right-leg .right { + background-position: 0px -220px; + transform: rotateX(0deg) rotateY(270deg) translateX(0px) translateY(0px) translateZ(22px); +} +.mc-skin-viewer-11x .player > .left-leg .left, +.mc-skin-viewer-11x .player > .right-leg .left { + background-position: -88px -220px; + transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(22px); +} +.mc-skin-viewer-11x .player > .left-leg .top, +.mc-skin-viewer-11x .player > .right-leg .top { + background-position: -44px -176px; + transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(22px); +} +.mc-skin-viewer-11x .player > .left-leg .bottom, +.mc-skin-viewer-11x .player > .right-leg .bottom { + background-position: -88px -176px; + transform: rotateX(270deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(110px); +} +.mc-skin-viewer-11x .player > .left-leg > .accessory, +.mc-skin-viewer-11x .player > .right-leg > .accessory { + transform-style: preserve-3d; + transform: scale3d(1.03125, 1.03125, 1.03125) translateY(-2.0625px); +} +.mc-skin-viewer-11x .player > .left-leg > .accessory .front, +.mc-skin-viewer-11x .player > .right-leg > .accessory .front { + background-position: -44px -396px; +} +.mc-skin-viewer-11x .player > .left-leg > .accessory .back, +.mc-skin-viewer-11x .player > .right-leg > .accessory .back { + background-position: -132px -396px; +} +.mc-skin-viewer-11x .player > .left-leg > .accessory .right, +.mc-skin-viewer-11x .player > .right-leg > .accessory .right { + background-position: 0px -396px; +} +.mc-skin-viewer-11x .player > .left-leg > .accessory .left, +.mc-skin-viewer-11x .player > .right-leg > .accessory .left { + background-position: -88px -396px; +} +.mc-skin-viewer-11x .player > .left-leg > .accessory .top, +.mc-skin-viewer-11x .player > .right-leg > .accessory .top { + background-position: -44px -352px; +} +.mc-skin-viewer-11x .player > .left-leg > .accessory .bottom, +.mc-skin-viewer-11x .player > .right-leg > .accessory .bottom { + background-position: -88px -352px; +} +.mc-skin-viewer-11x .player > .right-leg { + transform: translateY(220px) translateX(44px) scaleX(-1); +} +.mc-skin-viewer-11x:not(.legacy) .player > .right-arm { + transform: translateY(88px) translateX(88px); +} +.mc-skin-viewer-11x:not(.legacy) .player > .right-arm .front { + background-position: -396px -572px; +} +.mc-skin-viewer-11x:not(.legacy) .player > .right-arm .back { + background-position: -484px -572px; +} +.mc-skin-viewer-11x:not(.legacy) .player > .right-arm .right { + background-position: -352px -572px; +} +.mc-skin-viewer-11x:not(.legacy) .player > .right-arm .left { + background-position: -440px -572px; +} +.mc-skin-viewer-11x:not(.legacy) .player > .right-arm .top { + background-position: -396px -528px; +} +.mc-skin-viewer-11x:not(.legacy) .player > .right-arm .bottom { + background-position: -440px -528px; +} +.mc-skin-viewer-11x:not(.legacy) .player > .right-arm > .accessory .front { + background-position: -572px -572px; +} +.mc-skin-viewer-11x:not(.legacy) .player > .right-arm > .accessory .back { + background-position: -660px -572px; +} +.mc-skin-viewer-11x:not(.legacy) .player > .right-arm > .accessory .right { + background-position: -528px -572px; +} +.mc-skin-viewer-11x:not(.legacy) .player > .right-arm > .accessory .left { + background-position: -616px -572px; +} +.mc-skin-viewer-11x:not(.legacy) .player > .right-arm > .accessory .top { + background-position: -572px -528px; +} +.mc-skin-viewer-11x:not(.legacy) .player > .right-arm > .accessory .bottom { + background-position: -616px -528px; +} +.mc-skin-viewer-11x:not(.legacy) .player > .right-leg { + transform: translateY(220px) translateX(44px); +} +.mc-skin-viewer-11x:not(.legacy) .player > .right-leg .front { + background-position: -220px -572px; +} +.mc-skin-viewer-11x:not(.legacy) .player > .right-leg .back { + background-position: -308px -572px; +} +.mc-skin-viewer-11x:not(.legacy) .player > .right-leg .right { + background-position: -176px -572px; +} +.mc-skin-viewer-11x:not(.legacy) .player > .right-leg .left { + background-position: -264px -572px; +} +.mc-skin-viewer-11x:not(.legacy) .player > .right-leg .top { + background-position: -220px -528px; +} +.mc-skin-viewer-11x:not(.legacy) .player > .right-leg .bottom { + background-position: -264px -528px; +} +.mc-skin-viewer-11x:not(.legacy) .player > .right-leg > .accessory .front { + background-position: -44px -572px; +} +.mc-skin-viewer-11x:not(.legacy) .player > .right-leg > .accessory .back { + background-position: -132px -572px; +} +.mc-skin-viewer-11x:not(.legacy) .player > .right-leg > .accessory .right { + background-position: 0px -572px; +} +.mc-skin-viewer-11x:not(.legacy) .player > .right-leg > .accessory .left { + background-position: -88px -572px; +} +.mc-skin-viewer-11x:not(.legacy) .player > .right-leg > .accessory .top { + background-position: -44px -528px; +} +.mc-skin-viewer-11x:not(.legacy) .player > .right-leg > .accessory .bottom { + background-position: -88px -528px; +} +.mc-skin-viewer-11x.slim .player > .left-arm .front, +.mc-skin-viewer-11x.slim .player > .right-arm .front, +.mc-skin-viewer-11x.slim .player > .left-arm .back, +.mc-skin-viewer-11x.slim .player > .right-arm .back, +.mc-skin-viewer-11x.slim .player > .left-arm .top, +.mc-skin-viewer-11x.slim .player > .right-arm .top, +.mc-skin-viewer-11x.slim .player > .left-arm .bottom, +.mc-skin-viewer-11x.slim .player > .right-arm .bottom { + width: 33px; +} +.mc-skin-viewer-11x.slim .player > .left-arm .front { + transform: rotateX(0deg) rotateY(0deg) translateX(11px) translateY(0px) translateZ(22px); +} +.mc-skin-viewer-11x.slim .player > .left-arm .back { + background-position: -561px -220px; + transform: rotateX(0deg) rotateY(180deg) translateX(-11px) translateY(0px) translateZ(22px); +} +.mc-skin-viewer-11x.slim .player > .left-arm .right { + transform: rotateX(0deg) rotateY(270deg) translateX(0px) translateY(0px) translateZ(11px); +} +.mc-skin-viewer-11x.slim .player > .left-arm .left { + background-position: -517px -220px; +} +.mc-skin-viewer-11x.slim .player > .left-arm .top { + transform: rotateX(90deg) rotateY(0deg) translateX(11px) translateY(0px) translateZ(22px); +} +.mc-skin-viewer-11x.slim .player > .left-arm .bottom { + background-position: -517px -176px; + transform: rotateX(270deg) rotateY(0deg) translateX(11px) translateY(0px) translateZ(110px); +} +.mc-skin-viewer-11x.slim .player > .left-arm > .accessory .back { + background-position: -561px -396px; +} +.mc-skin-viewer-11x.slim .player > .left-arm > .accessory .left { + background-position: -517px -396px; +} +.mc-skin-viewer-11x.slim .player > .left-arm > .accessory .bottom { + background-position: -517px -352px; +} +.mc-skin-viewer-11x.slim .player > .right-arm .back { + background-position: -473px -572px; +} +.mc-skin-viewer-11x.slim .player > .right-arm .left { + background-position: -429px -572px; + transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(11px); +} +.mc-skin-viewer-11x.slim .player > .right-arm .bottom { + background-position: -429px -528px; +} +.mc-skin-viewer-11x.slim .player > .right-arm > .accessory .back { + background-position: -649px -572px; +} +.mc-skin-viewer-11x.slim .player > .right-arm > .accessory .left { + background-position: -605px -572px; +} +.mc-skin-viewer-11x.slim .player > .right-arm > .accessory .bottom { + background-position: -605px -528px; +} +.mc-skin-viewer-11x.slim.legacy .player > .right-arm { + transform: translateY(88px) translateX(77px) scaleX(-1); +} +.mc-skin-viewer-11x.slim.legacy .player > .right-arm .back { + background-position: -561px -220px; +} +.mc-skin-viewer-11x.slim.legacy .player > .right-arm > .accessory .back { + background-position: -561px -396px; +} +.mc-skin-viewer-11x .player .cape { + transform-style: preserve-3d; + transform: rotateY(180deg) translateX(-11px) translateZ(27.5px) translateY(82.5px) rotateX(5deg); +} +.mc-skin-viewer-11x .player .cape > .front, +.mc-skin-viewer-11x .player .cape > .back, +.mc-skin-viewer-11x .player .cape > .left, +.mc-skin-viewer-11x .player .cape > .right, +.mc-skin-viewer-11x .player .cape > .top, +.mc-skin-viewer-11x .player .cape > .bottom { + position: absolute; + background-image: inherit!important; + background-size: 704px 352px; + backface-visibility: hidden; +} +.mc-skin-viewer-11x .player .cape > .front, +.mc-skin-viewer-11x .player .cape > .back { + width: 110px; + height: 165px; +} +.mc-skin-viewer-11x .player .cape > .left, +.mc-skin-viewer-11x .player .cape > .right { + width: 11px; + height: 165px; +} +.mc-skin-viewer-11x .player .cape > .top, +.mc-skin-viewer-11x .player .cape > .bottom { + width: 110px; + height: 11px; +} +.mc-skin-viewer-11x .player .cape > .front { + background-position: -11px -11px; + transform: translateZ(5.5px); +} +.mc-skin-viewer-11x .player .cape > .back { + background-position: -132px -11px; + transform: translateZ(-5.5px) rotateY(180deg); +} +.mc-skin-viewer-11x .player .cape > .left { + background-position: 0px -11px; + transform: rotateY(270deg) translateZ(5.5px); +} +.mc-skin-viewer-11x .player .cape > .right { + background-position: -121px -11px; + transform: rotateY(-270deg) translateZ(104.5px); +} +.mc-skin-viewer-11x .player .cape > .top { + background-position: -11px 0px; + transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(5.5px); +} +.mc-skin-viewer-11x .player .cape > .bottom { + background-position: -121px 0px; + transform: rotateX(-90deg) translateZ(159.5px); +} +.mc-skin-viewer-11x.legacy-cape > .player .cape > .front, +.mc-skin-viewer-11x.legacy-cape > .player .cape > .back, +.mc-skin-viewer-11x.legacy-cape > .player .cape > .left, +.mc-skin-viewer-11x.legacy-cape > .player .cape > .right, +.mc-skin-viewer-11x.legacy-cape > .player .cape > .top, +.mc-skin-viewer-11x.legacy-cape > .player .cape > .bottom { + background-size: 242px 187px; +} +.mc-cape-viewer-9x { + width: 90px; + height: 135px; + margin: 10px auto; + perspective: 800px; + perspective-origin: 50% 100px; + background-image: none; + image-rendering: optimizeSpeed; + /* Legal fallback */ + image-rendering: -moz-crisp-edges; + /* Firefox */ + image-rendering: -o-crisp-edges; + /* Opera */ + image-rendering: -webkit-optimize-contrast; + /* Safari */ + image-rendering: optimize-contrast; + /* CSS3 Proposed */ + image-rendering: crisp-edges; + /* CSS4 Proposed */ + image-rendering: pixelated; + /* CSS4 Proposed */ + -ms-interpolation-mode: nearest-neighbor; + /* IE8+ */ +} +.mc-cape-viewer-9x .wrapper { + transform-style: preserve-3d; + width: 90px; + height: 135px; + position: relative; + background-image: none !important; +} +.mc-cape-viewer-9x .wrapper .cape { + transform-style: preserve-3d; +} +.mc-cape-viewer-9x .wrapper .cape > .front, +.mc-cape-viewer-9x .wrapper .cape > .back, +.mc-cape-viewer-9x .wrapper .cape > .left, +.mc-cape-viewer-9x .wrapper .cape > .right, +.mc-cape-viewer-9x .wrapper .cape > .top, +.mc-cape-viewer-9x .wrapper .cape > .bottom { + position: absolute; + background-size: 576px 288px; + backface-visibility: hidden; +} +.mc-cape-viewer-9x .wrapper .cape > .front, +.mc-cape-viewer-9x .wrapper .cape > .back { + width: 90px; + height: 135px; +} +.mc-cape-viewer-9x .wrapper .cape > .left, +.mc-cape-viewer-9x .wrapper .cape > .right { + width: 9px; + height: 135px; +} +.mc-cape-viewer-9x .wrapper .cape > .top, +.mc-cape-viewer-9x .wrapper .cape > .bottom { + width: 90px; + height: 9px; +} +.mc-cape-viewer-9x .wrapper .cape > .front { + background-position: -9px -9px; + transform: translateZ(4.5px); +} +.mc-cape-viewer-9x .wrapper .cape > .back { + background-position: -108px -9px; + transform: translateZ(-4.5px) rotateY(180deg); +} +.mc-cape-viewer-9x .wrapper .cape > .left { + background-position: 0px -9px; + transform: rotateY(270deg) translateZ(4.5px); +} +.mc-cape-viewer-9x .wrapper .cape > .right { + background-position: -99px -9px; + transform: rotateY(-270deg) translateZ(85.5px); +} +.mc-cape-viewer-9x .wrapper .cape > .top { + background-position: -9px 0px; + transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(4.5px); +} +.mc-cape-viewer-9x .wrapper .cape > .bottom { + background-position: -99px 0px; + transform: rotateX(-90deg) translateZ(130.5px); +} +.mc-cape-viewer-9x.legacy .wrapper .cape > .front, +.mc-cape-viewer-9x.legacy .wrapper .cape > .back, +.mc-cape-viewer-9x.legacy .wrapper .cape > .left, +.mc-cape-viewer-9x.legacy .wrapper .cape > .right { + background-size: 198px 153px; +} +.mc-cape-viewer-9x.waving > .wrapper > .cape { + animation: waving 2s infinite ease-in-out; +} +.mc-cape-viewer-9x.spin > .wrapper > .cape { + animation: spin 12s infinite linear; +} diff --git a/pages/client/shops.php b/pages/client/shops.php index fcd71f6452ff97ea51dffff3f7ee5813f5a96de2..1c2d23c67070f0077a261163ec4c792f537a354c 100644 --- a/pages/client/shops.php +++ b/pages/client/shops.php @@ -17,6 +17,7 @@ <link rel="stylesheet" href="<?=getWebsiteSetting("websiteUrl")?>pages/assets/vendors/flickity/css/flickity.css" media="screen"> <link rel="stylesheet" href="<?=getWebsiteSetting("websiteUrl")?>pages/assets/css/icons-minecraft-0.49.css"> + <link rel="stylesheet" href="<?=getWebsiteSetting("websiteUrl")?>pages/assets/css/minecraft-skinviewer.css"> <link rel="stylesheet" href="<?=getWebsiteSetting("websiteUrl")?>pages/assets/css/bloc.css"> </head> <body> @@ -61,47 +62,35 @@ foreach($shops as $shop){ $representation = $shop['item']->getRepresentation(); if($representation["type"] == "block"){ - echo ('<div class="col-sm"> + $cardTop = ('<div class="object"> + <div class="block grass"> + <div style="background: url(\''.getWebsiteSetting("websiteUrl").$representation["texture"][1].'\');"><!--top --></div> + <div style="background: url(\''.getWebsiteSetting("websiteUrl").$representation["texture"][1].'\');"><!--bottom--></div> + <div style="background: url(\''.getWebsiteSetting("websiteUrl").$representation["texture"][0].'\');"><!--left--></div> + <div style="background: url(\''.getWebsiteSetting("websiteUrl").$representation["texture"][0].'\');"><!--right--></div> + <div style="background: url(\''.getWebsiteSetting("websiteUrl").$representation["texture"][0].'\');"><!--back--></div> + <div style="background: url(\''.getWebsiteSetting("websiteUrl").$representation["texture"][0].'\');"><!--front--></div> + </div> + </div>'); + + }else{ + $cardTop = ('<img src="'.getWebsiteSetting("websiteUrl").$representation["texture"][0].'" alt="'.$shop['item']->getLabel().'">'); + } + echo ('<div class="col-sm"> <div class="card" style="width: 18rem;"> <div class="card-body"> <div class="card-top"> - <div class="object"> - <div class="block grass"> - <div style="background: url(\''.getWebsiteSetting("websiteUrl").$representation["texture"][1].'\');"><!--top --></div> - <div style="background: url(\''.getWebsiteSetting("websiteUrl").$representation["texture"][1].'\');"><!--bottom--></div> - <div style="background: url(\''.getWebsiteSetting("websiteUrl").$representation["texture"][0].'\');"><!--left--></div> - <div style="background: url(\''.getWebsiteSetting("websiteUrl").$representation["texture"][0].'\');"><!--right--></div> - <div style="background: url(\''.getWebsiteSetting("websiteUrl").$representation["texture"][0].'\');"><!--back--></div> - <div style="background: url(\''.getWebsiteSetting("websiteUrl").$representation["texture"][0].'\');"><!--front--></div> - </div> - </div> + '.$cardTop.' </div> <h5 class="card-title">'.$shop['item']->getLabel().'</h5> - <p class="card-text">Test content</p> + <p class="card-text"><div class="mc-face-viewer-8x" style="background-image:url(\''.$shop['seller']->getSkin().'\')"></div> </p> <div class="mc-button normal"> <div class="title">Se téléporter</div> </div> </div> </div> </div>'); - }else{ - echo ('<div class="col-sm"> - <div class="card" style="width: 18rem;"> - <div class="card-body"> - <div class="card-top"> - <img src="'.getWebsiteSetting("websiteUrl").$representation["texture"][0].'" alt="'.$shop['item']->getLabel().'"> - </div> - - <h5 class="card-title">'.$shop['item']->getLabel().'</h5> - <p class="card-text">Test content</p> - <div class="mc-button normal"> - <div class="title">Se téléporter</div> - </div> - </div> - </div> - </div>'); - } } ?>