From 524a0fb11e062482c8368e7599cf5380dfb0842f Mon Sep 17 00:00:00 2001
From: SofianeLasri <alasri250@gmail.com>
Date: Fri, 14 Jan 2022 21:34:55 +0100
Subject: [PATCH] test skin
---
core/classes/Seller.php | 26 +
core/classes/Shop.php | 2 +
index.php | 1 +
pages/assets/css/minecraft-skinviewer.css | 1359 +++++++++++++++++++++
pages/client/shops.php | 47 +-
5 files changed, 1406 insertions(+), 29 deletions(-)
create mode 100644 core/classes/Seller.php
create mode 100644 pages/assets/css/minecraft-skinviewer.css
diff --git a/core/classes/Seller.php b/core/classes/Seller.php
new file mode 100644
index 00000000..f433c8e9
--- /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 7e98de28..75639584 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 6b155b50..ff1af682 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 00000000..ec5719a4
--- /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 fcd71f64..1c2d23c6 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>');
- }
}
?>
--
GitLab