<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://rawgithub.com/FortAwesome/Font-Awesome/master/css/font-awesome.min.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div id="pagina" style>
<h1 class="animated zoomIn"
style="animation-duration: 5s;">Nombre del operador
<br><h3 class="animated zoomIn"
style="animation-delay: 3s;">Skill</h3></h1><br>
</div>
<div ID="pagina" class='row-fluid'>
<div class='span5 offset1'>
<div class='row-fluid'>
<div class='span4'>
<div class='module aqua-light'>
<div class='module-content text-center'>
<h1>6/12</h1>
<h4>Logros del <strong>Dia</strong></h4>
</div>
<div class='progress progress-small progress-striped'>
<div class='bar' style='width: 56%'></div>
</div>
</div>
</div>
<div class='span4'>
<div class='module bittersweet-light'>
<div class='module-content text-center'>
<h1>10/14</h1>
<h4>Logros del <strong>Mes</strong></h4>
</div>
<div class='progress progress-small progress-striped'>
<div class='bar bar-success' style='width: 90%'></div>
</div>
</div>
</div>
</div>
<div class='span6'>
<div class='module mbn module-large module-square lavender-light'>
<div class='module-content text-center'>
<h2>Cuartil actual</h2>
</div>
<table class='table-fixed text-center'>
<tr>
<td class='grass-light'>Q1</td>
<td class='bittersweet-light'>Q2</td>
<td class='bittersweet-light'>Q3</td>
<td class='grass-light'>Q4</td>
</tr>
</table>
</div>
</div>
<div class='span4'>
<div class='module mbn module-large module-square lavender-light'>
<div class='module-content text-center'>
<h2>SPL por dia</h2>
</div>
<table class='table-fixed text-center'>
<tr>
<td class='grass-light'>Lu</td>
<td class='bittersweet-light'>Ma</td>
<td class='bittersweet-light'>Mie</td>
<td class='grass-light'>Jue</td>
<td class='grass-light'>Vie</td>
<td class='bittersweet-light'>Sab</td>
<td class='bittersweet-light'>Dom</td>
</tr>
</table>
</div>
</div>
<div class='row-fluid'>
<div class='span12'>
<div class='module lavender-dark'>
</div>
</div>
</div>
<div class='row-fluid'>
<div class='span12'>
<div class='clearfix'></div>
</div>
</div>
<div class='row-fluid'>
<div class='span12'>
</div>
</div>
<div class='module mbn module-large module-square lavender-light'>
<div class='span12'>
<table>
<tr>
<td>
<div class='module mbn module-xlarge module-square lavender-light'>
<div class='module-content text-center'>
<h2>Cuartil Mensual</h2>
</div>
<table class='table-content text-center'>
<tr>
<td class='bittersweet-light'>ENE/</td>
<td class='aqua-light'>FEB/</td>
<td class='bittersweet-light'>MAR/</td>
<td class='aqua-light'>ABR/</td>
<td class='bittersweet-light'>MAY/</td>
<td class='aqua-light'>JUN/</td>
<td class='bittersweet-light'>JUL/</td>
<td class='aqua-light'>AGO/</td>
<td class='bittersweet-light'>SEP/</td>
<td class='aqua-light'>OCT/</td>
<td class='bittersweet-light'>NOV/</td>
<td class='aqua-light'>DIC/</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class='span5'>
<div class='module module-small mrm grass-light'>
<div class='row-fluid module-image-top module-image-medium'>
<div
class='span12 module-image'
style='background-image: url(https://image.ibb.co/b2hiUd/Screenshot_2.jpg);'>
</div>
</div>
<div class='module-content'>
<h4>Juan Pablo Alonso</h4>
</div>
</div>
<div class='span12'>
<div class='module aqua-dark'>
<div class='module-content'>
<div class='module-foreground'>
<div class='module-content-small mbn'>
<h3 class='mbn mtn'>Tabla de posiciones</h3>
</div>
<table class='table'>
<thead>
<tr>
<th>Posicion Ranking</th>
<th>Puntos</th>
<th>Nombre</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>450</td>
<td>Alan Gay</td>
</tr>
<tr>
<td>2.</td>
<td>400</td>
<td>Santiago Gonzalez</td>
</tr>
<tr>
<td>3.</td>
<td>310</td>
<td>Alejandra Moreno</td>
</tr>
<tr>
<td>4.</td>
<td>220</td>
<td>Ignacio Falcato</td>
</tr>
<tr>
<td>5.</td>
<td>160</td>
<td>Sabrina Villar</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class='module'>
</div>
</div>
</div>
#pagina{
width: 100%;
min-height: 30vh;
background-color: #eee;
background-color: #ffdd99;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(240)'%3E%3Cstop offset='0' stop-color='%23ffdd99'/%3E%3Cstop offset='1' stop-color='%234FE'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='540' height='450' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.1'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
background-position: center;
padding-top: 40px;
text-align: Left;
}
body {
padding: 20px 0 0 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 300 !important;
margin: 0 0 10px 0 !important;
}
hr {
margin: 10px 0 !important;
height: 1px !important;
background: #e8e8e8;
border: 0 !important;
}
.header {
border-bottom: 1px solid #e8e8e8;
padding-bottom: 4px;
}
.table-fixed {
float: left;
table-layout: fixed;
width: 100%;
}
table.text-center td {
text-align: center !important;
}
.row-slide td {
padding: 0;
vertical-align: top;
}
.module {
border-radius: 3px;
margin-bottom: 15px;
position: relative;
width: 100%;
}
.module.module-hidden {
overflow: hidden;
}
.module.module-small, .module.module-medium, .module.module-large, .module.module-xlarge {
display: block;
float: left;
}
.module.module-small {
width: 123px;
}
.module.module-medium {
width: 163px;
}
.module.module-large {
width: 223px;
}
.module.module-xlarge {
width: 418px;
}
.module .module-image {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 6px 0 0 6px;
position: absolute;
top: 0;
bottom: 0;
}
.module .module-image-top {
height: 130px;
position: relative;
}
.module i.module-background-icon {
position: absolute;
font-size: 250px;
top: -70px;
left: -70px;
z-index: 0;
}
.module .module-foreground {
position: relative;
z-index: 1;
}
.module .module-image-top.module-image-small {
height: 100px;
}
.module .module-image-top.module-image-medium {
height: 130xp;
}
.module .module-image-top.module-image-large {
height: 180px;
}
.module .module-image-top.module-image-xlarge {
height: 230px;
}
.module .module-image-top.module-image-xxlarge {
height: 300px;
}
.module .module-image-top .module-image {
border-radius: 6px 6px 0 0;
left: 0;
right: 0;
}
.module .module-content {
padding: 15px;
}
.module .module-content-small {
padding: 5px 15px;
}
.module .module-content.module-content-large {
padding: 50px 20px;
}
.module input, .module textarea {
box-shadow: none !important;
border: 1px solid #eee !important;
}
.module .nav-tabs a {
border: 0 !important;
color: white !important;
}
.module .btn {
background-image: none;
background-gradient: none;
border: 0;
padding: 8px 12px;
}
.module > *:last-child,
.module > *:last-child > *:last-child,
.module > *:last-child > *:last-child > *:last-child {
margin: 0 !important;
}
.progress-small {
margin: 0 !important;
border-radius: 0 !important;
}
.module > .progress-small {
height: 22px !important;
border-radius: 0 0 6px 6px !important;
}
.module.module-square {
border-radius: 0;
}
.module.module-square > .progress-small {
border-radius: 0 !important;
}
.colorblock {
height: 80px;
line-height: 8000px;
font-weight: 300;
font-size: 1.5em;
text-align: center;
float: left;
width: 50%;
}
.row-slide {
overflow-x: scroll;
overflow-y: hidden;
max-height: 200px !important;
}
/**
*
* Grass
*
*/
.btn.grass-light, .btn.grass-dark,
.btn.bittersweet-light, .btn.bittersweet-dark,
.btn.lavender-light, .btn.lavender-dark,
.btn.aqua-light, .btn.aqua-dark,
.btn.cloud-dark {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
}
.grass-light {
background: #A0D468 !important;
color: #fff !important;
}
.grass-dark {
background: #8CC152 !important;
color: white !important;
}
.module.grass-light .nav-tabs a:hover,
.module.grass-light .nav-tabs a.active {
background: #8CC152 !important;
}
.module.grass-dark .nav-tabs a:hover,
.module.grass-dark .nav-tabs a.active {
background: #A0D468 !important;
}
.module.grass-light i.module-background-icon {
color: #8CC152 !important;
}
.module.grass-dark i.module-background-icon {
color: #A0D468 !important;
}
/**
*
* Bittersweet
*
*/
.bittersweet-light {
background: #f06e51 !important;
color: white !important;
}
.bittersweet-dark {
background: #e9573f !important;
color: white !important;
}
.module.bittersweet-light .nav-tabs a:hover,
.module.bittersweet-light .nav-tabs a.active {
background: #e9573f !important;
}
.module.bittersweet-dark .nav-tabs a:hover,
.module.bittersweet-dark .nav-tabs a.active {
background: #f06e51 !important;
}
.module.bittersweet-light i.module-background-icon {
color: #e9573f !important;
}
.module.bittersweet-light i.module-background-icon {
color: #f06e51 !important;
}
/**
*
* lavender
*
*/
.lavender-light {
background: #ac92ec !important;
color: white !important;
}
.lavender-dark {
background: #967adc !important;
color: white !important;
}
.module.lavender-light .nav-tabs a:hover,
.module.lavender-light .nav-tabs a.active {
background: #967adc !important;
}
.module.lavender-dark .nav-tabs a:hover,
.module.lavender-dark .nav-tabs a.active {
background: #ac92ec !important;
}
.module.lavender-light i.module-background-icon {
color: #967adc !important;
}
.module.lavender-dark i.module-background-icon {
color: #ac92ec !important;
}
/**
*
* Cloud
*
*/
.cloud-light {
background: #ecf0f1 !important;
color: #474747 !important;
}
.cloud-dark {
background: #bdc3c7 !important;
color: white !important;
}
.module.cloud-light .nav-tabs a:hover,
.module.cloud-light .nav-tabs a.active {
background: #ecf0f1 !important;
}
.module.cloud-dark .nav-tabs a:hover,
.module.cloud-dark .nav-tabs a.active {
background: #bdc3c7 !important;
}
.module.cloud-light i.module-background-icon {
color: #ecf0f1 !important;
}
.module.cloud-dark i.module-background-icon {
color: #bdc3c7 !important;
}
/**
*
* Aqua
*
*/
.aqua-light {
background: #4dc1e9 !important;
color: white !important;
}
.aqua-dark {
background: #3bafda !important;
color: white !important;
}
.module.aqua-light .nav-tabs a:hover,
.module.aqua-light .nav-tabs a.active {
background: #3bafda !important;
}
.module.aqua-dark .nav-tabs a:hover,
.module.aqua-dark .nav-tabs a.active {
background: #4dc1e9 !important;
}
.module.aqua-light i.module-background-icon {
color: #3bafda !important;
}
.module.aqua-dark i.module-background-icon {
color: #4dc1e9 !important;
}
/* Margin Bottom Small/Medium/Large */
.mbn { margin-bottom: 0px !important; }
.mbs { margin-bottom: 5px; }
.mbm { margin-bottom: 10px; }
.mbl { margin-bottom: 15px; }
/* Margin Top Small/Medium/Large */
.mtn { margin-top: 0px !important; }
.mts { margin-top: 5px; }
.mtm { margin-top: 10px; }
.mtl { margin-top: 15px; }
/* Margin Right Small/Medium/Large */
.mrn { margin-right: 0px !important; }
.mrs { margin-right: 5px; }
.mrm { margin-right: 10px; }
.mrl { margin-right: 15px; }
/* Margin Right Small/Medium/Large */
.mln { margin-left: 0px !important; }
.mls { margin-left: 5px; }
.mlm { margin-left: 10px; }
.mll { margin-left: 15px; }
#loading {
background: #f4f4f2 url("img/page-bg.png") repeat scroll 0 0;
height: 100%;
left: 0;
margin: auto;
position: fixed;
top: 0;
width: 100%;
}
.bokeh {
border: 0.01em solid rgba(150, 150, 150, 0.1);
border-radius: 50%;
font-size: 100px;
height: 1em;
list-style: outside none none;
margin: 0 auto;
position: relative;
top: 35%;
width: 1em;
z-index: 2147483647;
}
.bokeh li {
border-radius: 50%;
height: 0.2em;
position: absolute;
width: 0.2em;
}
.bokeh li:nth-child(1) {
animation: 1.13s linear 0s normal none infinite running rota, 3.67s ease-in-out 0s alternate none infinite running opa;
background: #00c176 none repeat scroll 0 0;
left: 50%;
margin: 0 0 0 -0.1em;
top: 0;
transform-origin: 50% 250% 0;
}
.bokeh li:nth-child(2) {
animation: 1.86s linear 0s normal none infinite running rota, 4.29s ease-in-out 0s alternate none infinite running opa;
background: #ff003c none repeat scroll 0 0;
margin: -0.1em 0 0;
right: 0;
top: 50%;
transform-origin: -150% 50% 0;
}
.bokeh li:nth-child(3) {
animation: 1.45s linear 0s normal none infinite running rota, 5.12s ease-in-out 0s alternate none infinite running opa;
background: #fabe28 none repeat scroll 0 0;
bottom: 0;
left: 50%;
margin: 0 0 0 -0.1em;
transform-origin: 50% -150% 0;
}
.bokeh li:nth-child(4) {
animation: 1.72s linear 0s normal none infinite running rota, 5.25s ease-in-out 0s alternate none infinite running opa;
background: #88c100 none repeat scroll 0 0;
margin: -0.1em 0 0;
top: 50%;
transform-origin: 250% 50% 0;
}
@keyframes opa {
12% {
opacity: 0.8;
}
19.5% {
opacity: 0.88;
}
37.2% {
opacity: 0.64;
}
40.5% {
opacity: 0.52;
}
52.7% {
opacity: 0.69;
}
60.2% {
opacity: 0.6;
}
66.6% {
opacity: 0.52;
}
70% {
opacity: 0.63;
}
79.9% {
opacity: 0.6;
}
84.2% {
opacity: 0.75;
}
91% {
opacity: 0.87;
}
}
@keyframes rota {
100% {
transform: rotate(360deg);
}
}
}
#loader {
bottom: 0;
height: 175px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 175px;
}
#loader {
bottom: 0;
height: 175px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 175px;
}
#loader .dot {
bottom: 0;
height: 100%;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 87.5px;
}
#loader .dot::before {
border-radius: 100%;
content: "";
height: 87.5px;
left: 0;
position: absolute;
right: 0;
top: 0;
transform: scale(0);
width: 87.5px;
}
#loader .dot:nth-child(7n+1) {
transform: rotate(45deg);
}
#loader .dot:nth-child(7n+1)::before {
animation: 0.8s linear 0.1s normal none infinite running load;
background: #00ff80 none repeat scroll 0 0;
}
#loader .dot:nth-child(7n+2) {
transform: rotate(90deg);
}
#loader .dot:nth-child(7n+2)::before {
animation: 0.8s linear 0.2s normal none infinite running load;
background: #00ffea none repeat scroll 0 0;
}
#loader .dot:nth-child(7n+3) {
transform: rotate(135deg);
}
#loader .dot:nth-child(7n+3)::before {
animation: 0.8s linear 0.3s normal none infinite running load;
background: #00aaff none repeat scroll 0 0;
}
#loader .dot:nth-child(7n+4) {
transform: rotate(180deg);
}
#loader .dot:nth-child(7n+4)::before {
animation: 0.8s linear 0.4s normal none infinite running load;
background: #0040ff none repeat scroll 0 0;
}
#loader .dot:nth-child(7n+5) {
transform: rotate(225deg);
}
#loader .dot:nth-child(7n+5)::before {
animation: 0.8s linear 0.5s normal none infinite running load;
background: #2a00ff none repeat scroll 0 0;
}
#loader .dot:nth-child(7n+6) {
transform: rotate(270deg);
}
#loader .dot:nth-child(7n+6)::before {
animation: 0.8s linear 0.6s normal none infinite running load;
background: #9500ff none repeat scroll 0 0;
}
#loader .dot:nth-child(7n+7) {
transform: rotate(315deg);
}
#loader .dot:nth-child(7n+7)::before {
animation: 0.8s linear 0.7s normal none infinite running load;
background: magenta none repeat scroll 0 0;
}
#loader .dot:nth-child(7n+8) {
transform: rotate(360deg);
}
#loader .dot:nth-child(7n+8)::before {
animation: 0.8s linear 0.8s normal none infinite running load;
background: #ff0095 none repeat scroll 0 0;
}
#loader .lading {
background-image: url("../images/loading.gif");
background-position: 50% 50%;
background-repeat: no-repeat;
bottom: -40px;
height: 20px;
left: 0;
position: absolute;
right: 0;
width: 180px;
}
@keyframes load {
100% {
opacity: 0;
transform: scale(1);
}
}
@keyframes load {
100% {
opacity: 0;
transform: scale(1);
}
}
