<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="container">
<br />
<div class="row">
<div class="col-sm-6 col-lg-3">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="text-center">User Profile<span class="glyphicon glyphicon-user pull-right"></span></h4>
</div>
<div class="panel-body text-center">
<p class="lead">
<strong>Mike Smith</strong>
</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item liitem"><strong>Position:</strong>
<span class="pull-right">Developer</span>
</li>
<li class="list-group-item liitem"><strong>Company:</strong>
<span class="pull-right">EasyTech</span>
</li>
<li class="list-group-item liitem"><strong>Department:</strong>
<span class="pull-right">Dataviz</span>
</li>
<li class="list-group-item liitem"><strong>Project Duration:</strong>
<span class="pull-right">12 months</span>
</li>
</ul>
<div class="panel-footer">
<div class="row">
<div class="col-xs-4 col-sm-3 col-md-4 col-lg-2">
</div>
<div class="col-xs-2 col-sm-4 col-md-4 col-lg-4" id="qr1">
</div>
<div class="col-xs-6 col-sm-5 col-md-4 col-lg-6">
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="text-center">Skills<span class="glyphicon glyphicon-saved pull-right"></span></h4>
</div>
<div class="panel-body text-center">
<p class="lead">
<strong>Technology Overview</strong>
</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item liitem">
<div class="skillLineDefault">
<div class="skill pull-left text-center">HTML5</div>
<div class="rating" id="rate1"></div>
</div>
</li>
<li class="list-group-item liitem">
<div class="skillLineDefault">
<div class="skill pull-left text-center">CSS</div>
<div class="rating" id="rate2"></div>
</div>
</li>
<li class="list-group-item liitem">
<div class="skillLineDefault">
<div class="skill pull-left text-center">jQuery</div>
<div class="rating" id="rate3"></div>
</div>
</li>
<li class="list-group-item liitem">
<div class="skillLineDefault">
<div class="skill pull-left text-center">C#</div>
<div class="rating" id="rate4"></div>
</div>
</li>
</ul>
<div class="panel-footer">
<div class="row">
<div class="col-xs-4 col-sm-3 col-md-4 col-lg-2">
</div>
<div class="col-xs-2 col-sm-4 col-md-4 col-lg-4" id="qr2">
</div>
<div class="col-xs-6 col-sm-5 col-md-4 col-lg-6">
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-6">
<div class="panel panel-primary" style="height: 491px;">
<div class="panel-heading">
<h4 class="text-center">Quarterly Performance<span class="glyphicon glyphicon-screenshot pull-right"></span></h4>
</div>
<div id="chart1">
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" type="text/css" href="http://www.shieldui.com/shared/components/latest/css/shieldui-all.min.css" />
<link rel="stylesheet" type="text/css" href="http://www.shieldui.com/shared/components/latest/css/light/all.min.css" />
<script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script>
<script type="text/javascript">
initializeRatings();
initializeQR1();
initializeQR2();
initializeChart1();
function initializeChart1() {
var data1 = getRandomArray(20, 1, 50);
var data2 = getRandomArray(20, 20, 70);
$("#chart1").shieldChart({
theme: "light",
exportOptions: {
image: false,
print: false
},
primaryHeader: {
text: "Performance Data"
},
tooltipSettings: {
axisMarkers: {
enabled: true,
mode: 'x',
width: 2,
zIndex: 3,
drawColor: "white"
}
},
dataSeries: [
{
seriesType: 'bar',
collectionAlias: 'Achieved',
data: data1
},
{
seriesType: 'line',
collectionAlias: 'Target',
data: data2
}
]
});
}
function initializeQR1() {
$("#qr1").shieldQRcode({
mode: "byte",
size: 150,
value: "Mike Smith",
style: {
color: "#1E97E3"
}
});
}
function initializeQR1() {
$("#qr1").shieldQRcode({
mode: "byte",
size: 150,
value: "Mike Smith",
style: {
color: "#1E97E3"
}
});
}
function initializeQR2() {
$("#qr2").shieldQRcode({
mode: "byte",
size: 150,
value: "Avarage: 6.3",
style: {
color: "#1E97E3"
}
});
}
function initializeRatings() {
$('#rate1').shieldRating({
max: 7,
step: 0.1,
value: 6.3,
markPreset: false
});
$('#rate2').shieldRating({
max: 7,
step: 0.1,
value: 6,
markPreset: false
});
$('#rate3').shieldRating({
max: 7,
step: 0.1,
value: 4.5,
markPreset: false
});
$('#rate4').shieldRating({
max: 7,
step: 0.1,
value: 5,
markPreset: false
});
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function getRandomArray(length, min, max) {
var array = [];
for (var boudary = 0; boudary < length; boudary++) {
array.push(getRandomInt(min, max));
}
return array;
}
</script>
.section {
top: 0;
width: 100%;
z-index: 999;
background-color: #111111;
color: #ccc;
border-top: solid 3px #1E97E3;
height: 50px;
}
.menuitem {
margin-top: 12px;
display: inline-block;
width: 100px;
}
.menulink {
height: 40px;
padding: 7px;
border-bottom: 3px solid transparent;
}
.menulink:hover {
border-bottom: 3px solid #1E97E3;
text-decoration: none;
color: #1E97E3;
}
.footer {
margin-top: 12px;
}
.liitem {
height: 45px;
}
.skillLine {
display: inline-block;
width: 100%;
min-height: 90px;
padding: 3px 4px;
}
skillLineDefault {
padding: 3px 4px;
}
div.skill {
background: #F58723;
border-radius: 3px;
color: white;
font-weight: bold;
padding: 3px 4px;
width: 70px;
}
.rating {
margin-left: 30px;
}
.footerQR {
margin-left: 30%;
}
.leftText {
font-size: 41px;
}
.rightText {
font-size: 41px;
background: #F58723;
border-radius: 3px;
color: white;
padding: 3px 4px;
}
