"Bootstrap Dashboard - Employee Performance"
Bootstrap 3.2.0 Snippet by david77

<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; }

Related: See More


Questions / Comments: