Monster Attributes

by stot

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://local.playa.cc/css/mobile.min.css">
<div id="page" style="position:relative">
    <canvas id="canvas" width="200" height="200"></canvas>
    
    <div id="monster123" class="p-monstercard">
        <img class="mc-monster" src="http://www.playa.cc/pic/monster-shadow.png" style="bottom:657px" />
        <img class="mc-monster" src="http://local.playa.cc/pic/tiger_A_flarion.png" />
        <div class="me-monster-coins">Fodder<span style="float:right;color:gold">Coins 3.000</span>

        </div>
        <div class=" me-fodder">
            <div class="p-monster-icon"></div>
            <div class="p-monster-icon"></div>
            <div class="p-monster-icon"></div>
            <div class="p-monster-icon"></div>
            <div class="p-monster-icon"></div>
        </div>

        
        <div class="me-monster-name">New Monstername <span class="me-rarity">&#9733;&#9733;&#9733;&#9733;&#9733;&#9733;</span></div>
        
        
        <div class="p-stats p-border1" style="position:absolute;top: 525px;height: 200px;">
          
            <div class="mc-attributes-v">
                
                <div class="p-textShadow-black mc-attribute" style="background-image:url(http://www.playa.cc/pic/orb-red4.png)">
                    <div class=" mc-attribute-bar" style="    background-size: 79% 100%;">
                        790<span> / 999</span>
                    </div>
                </div>
                
                <div style="background-image:url(http://www.playa.cc/pic/orb-green4.png)" class="p-textShadow-black  mc-attribute">
                    <div class=" mc-attribute-bar p-textShadow-black" style="font-weight:bold;background-size:100% 100%">
                        998<span></span>
                    </div>
                </div>
                <div...

CSS

.p-monstercard .mc-attribute {
    background-size: 50px;
    background-position: left center;
    background-repeat: no-repeat;
    text-align: center;
    /* min-width: 100px; */
    width: 220px;
    /* padding-top: 25px; */
    vertical-align: bottom;
    color: white;
    /* position: relative; */
    float: left;
    /* height: 100px; */
    /* height: 70px; */
        padding: 25px 20px 15px 60px;
    text-shadow: -2px -2px 2px #000,2px -2px 2px #000,2px 2px 2px #000,-2px 2px 2px #000!important;
}

.mc-attribute-bar {
border-bottom: 1px solid gray;
    border-radius: 5px;
    /* background-color: #181919; */
    padding-right: 10px;
    text-align: right;
    background-image: url(http://www.playa.cc/pic/healthbar.png);
    height: 15px;
    background-size: 0;
    background-repeat: no-repeat;
    /* font-size: 42px; */
    line-height: 0px;
    padding-bottom: 2px;
    vertical-align: top;
    text-shadow: -2px -2px 2px #000,2px -2px 2px #000,2px 2px 2px #000,-2px 2px 2px #000!important;
}

.mc-attribute-bar span {
        font-size: 22px;
    text-shadow: -2px -2px 2px #000,2px -2px 2px #000,2px 2px 2px #000,-2px 2px 2px #000!important;
}

.p-monstercard .me-fodder {
    position:absolute;
    top:315px;
    text-align:center;
    margin:0 auto;
    left:0;
    right:0;
    font-size:20px;
        justify-content: space-around;
    display: flex;
}

.me-monster-coins {
    position:absolute;top:275px;text-align:left;font-size:30px;width:100%
}


.p-monster-icon {
    background-image: url(http://www.playa.cc/pic/monster-icon.png);
    width: 104px;
    height: 104px;
    background-size:104px 104px;
    background-repeat:no-repeat;
    
}

.me-rarity {
        color: gold;
    display:block;
}

.me-monster-name {
    font-size: 30px;
    position: absolute;
    top: 445px;
    width: 100%;
    text-align: center;
}

JavaScript

var maxWidth = window.innerWidth; // Max width for the image
var maxHeight = window.innerHeight; // Max height for the image

var ratio = [maxWidth / 640, maxHeight / 960];
ratio = Math.min(ratio[0], ratio[1]);

var correction = (maxWidth < 640) ? (640 - maxWidth) / 2 : 0;

$('#monster123').css({
    'transform': 'matrix(' + ratio + ', 0, 0, ' + ratio + ', -' + correction + ', 0)',
        '-webkit-transform': 'matrix(' + ratio + ', 0, 0, ' + ratio + ', -' + correction + ', 0)'
});