<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<!--
// Inspiration taken from Mike | Creative Mints
// - Dribbble.com page -> http://drbl.in/ghSU
Tried to keep it clean and documented. It's not absolutely perfect and I haven't tested it in many of the older browsers,
but I will try and tweak it when I see an issue or someone mentions it. Always love the work the designers over at Dribbble.com
put together. I wanted to attempt to mimic their photoshop work and provide some fun widgets for you Bootstrappers.
** Brian Moeller
-->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Docs at http://simpleweatherjs.com -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.0.2/jquery.simpleWeather.min.js"></script>
<!-- Docs at http://www.chartjs.org -->
<script src="//www.chartjs.org/assets/Chart.min.js"></script>
<div class="container">
<div class="row">
<!-- COLUMN ONE -->
<div class="col-sm-6 col-md-4 ">
<!--****** PROFILE WIDGET *******-->
<div id="general" class="panel">
<!--div class="panel-heading"></div-->
<div class="panel-body">
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="https://s3.amazonaws.com/uifaces/faces/twitter/flashmurphy/128.jpg">
</a>
<div class="media-body">
<h2 class="media-heading">126.5K</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
<div class="panel-footer">
<div class="btn-group btn-group-justified">
<a class="btn btn-default" role="button"><i class="fa fa-file-text"></i></a>
<a class="btn btn-default" role="button"><i class="fa fa-table"></i></a>
<a class="btn btn-default" role="button"><i class="fa fa-line-chart"></i></a>
<a class="btn btn-default highlight" role="button"><i class="fa fa-external-link-square"></i></a>
</div>
</div>
</div>
</div>
<!-- COLUMN TWO -->
<div class="col-sm-6 col-md-4">
<!--****** CHART WIDGET *******-->
<div id="pie-chart-widget" class="panel">
<div class="panel-heading text-center">
<h5 class="text-uppercase"><strong>Data Transfer</strong></h5>
</div>
<div class="panel-body">
<canvas id="myPieChart"></canvas>
</div>
<div class="panel-footer">
<div class="list-block">
<ul class="text-center legend">
<li class="video" style="margin-right: 1px;">
video
<h2>62%</h2>
</li>
<li class="photo">
photo
<h2>21%</h2>
</li>
<li class="audio" style="margin-left: 1px;">
audio
<h2>10%</h2>
</li>
</ul>
</div>
<div class="btn-group btn-group-justified text-uppercase text-center">
<a class="btn btn-default" role="button"><i class="fa fa-cloud-upload fa-2x"></i><br><small>Upload Files</small></a>
<a class="btn btn-default" role="button"><i class="fa fa-share-alt fa-2x"></i><br><small>Share Link</small></a>
<a class="btn btn-default" role="button"><i class="fa fa-history fa-2x"></i><br><small>Back Up</small></a>
</div>
</div>
</div>
</div>
<!-- COLUMN THREE -->
<div class="col-sm-6 col-md-4">
<!--****** LINE CHART WIDGET *******-->
<div id="line-chart-widget" class="panel">
<div class="panel-heading">
<h4 class="text-uppercase"><strong>Apple Inc.</strong><span class="label pull-right">107.26 <i class="fa fa-plus"></i>0.23(0.10%)</span><br><small>Nasdaq: AAPL</small></h4>
</div>
<div class="panel-body">
<canvas id="myLineChart"></canvas>
</div>
</div>
</div>
</div>
</div>
/*
// Inspiration taken from Mike | Creative Mints
// - Dribbble.com page -> http://drbl.in/ghSU
Tried to keep it clean and documented. It's not absolutely perfect and I haven't tested it in many of the older browsers,
but I will try and tweak it when I see an issue or someone mentions it. Always love the work the designers over at Dribbble.com
put together. I wanted to attempt to mimic their photoshop work and provide some fun widgets for you Bootstrappers.
- Brian Moeller
*/
@font-face {
font-family: 'weather';
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot');
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');
font-weight: normal;
font-style: normal;
}
html {
width: 100%;
height: 100%;
}
body {
padding: 45px 0;
font: 14px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #8F7F70;
background: #dec8bb; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RlYzhiYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMxJSIgc3RvcC1jb2xvcj0iI2FjOGU3NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iI2JkYTI4NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4NzZkNTIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #dec8bb 0%, #ac8e74 31%, #bda285 66%, #876d52 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dec8bb), color-stop(31%,#ac8e74), color-stop(66%,#bda285), color-stop(100%,#876d52)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #dec8bb 0%,#ac8e74 31%,#bda285 66%,#876d52 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #dec8bb 0%,#ac8e74 31%,#bda285 66%,#876d52 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #dec8bb 0%,#ac8e74 31%,#bda285 66%,#876d52 100%); /* IE10+ */
background: linear-gradient(to bottom, #dec8bb 0%,#ac8e74 31%,#bda285 66%,#876d52 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dec8bb', endColorstr='#876d52',GradientType=0 ); /* IE6-8 */
}
/*-- BS3 Modified Classes --*/
.panel {
border: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
border-radius: 5px;
}
.panel-body {
padding: 20px;
}
.panel-heading {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.panel-footer {
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
/*-- Common Use Classes --*/
.btn-ui {
background-color: #E55F3A;
border-color: #C54A28;
color: #fff;
}
.btn-ui:hover {
background-color: #E0624C;
color: #fff;
}
.list-block {
display: table;
width: 100%;
border-collapse: collapse;
border: none;
}
.list-block ul {
display: table-row;
}
.list-block li {
display: table-cell;
margin: 0;
}
.pad-left-0 {
padding-left: 0px;
}
.pad-right-0 {
padding-right: 0px;
}
.mrg-btm-10 {
margin-bottom: 10px;
}
.mrg-btm-20 {
margin-bottom: 20px;
}
/*-- General Widget --*/
#general .panel-heading {
min-height: 200px;
background: #fff url(http://4hdwallpapers.com/wp-content/uploads/2013/04/The-Lion-King-Desktop-1024x640.jpg) no-repeat top center;
background-size: cover;
}
#general .media-heading {
color: #5B5147;
}
#general .panel-body {
padding: 20px;
}
#general .panel-body .img-circle {
height: 90px;
width: 90px;
padding: 8px;
border: 1px solid #e2dfdc;
}
#general .panel-footer {
padding: 0px;
border: none;
}
#general .panel-footer .btn-group .btn {
border: none;
font-size: 1.2em;
background-color: #F6F1ED;
color: #BAACA3;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
padding: 15px 0;
}
#general .panel-footer .btn-group .btn:hover {
color: #F6F1ED;
background-color: #8F7F70;
}
#general .panel-footer .btn-group>.btn:not(:first-child) {
border-left: 1px solid #fff;
}
#general .panel-footer .btn-group .highlight {
color: #E56E4C;
}
/*-- Pie Chart Widget --*/
#pie-chart-widget .panel-body {
padding: 0px;
}
#pie-chart-widget .panel-footer {
background-color: #fff;
padding: 0px;
margin-top: 20px;
}
#pie-chart-widget .panel-footer .btn {
border: none;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
padding: 20px 0px;
color: #fff;
background-color: #776B5F;
border-top: 3px solid #6d6257;
}
#pie-chart-widget .panel-footer .btn:hover {
background-color: #62584C;
border-color: #52483F;
}
#pie-chart-widget h2 {
font-weight: 700;
margin: 3px 0 0 0;
}
#pie-chart-widget .legend li {
background-color: #F5F0EC;
padding: 20px 10px;
}
#pie-chart-widget .legend li:not(:first-child) {
border-left: 1px solid #fff;
}
#pie-chart-widget .legend .video {
border-top: 4px solid #4DAF7C;
}
#pie-chart-widget .legend .audio {
border-top: 4px solid #EAC85D;
}
#pie-chart-widget .legend .photo {
border-top: 4px solid #E25331;
}
/*-- Line Chart Widget --*/
#myLineChart {
background-color: #55BC75;
padding: 0px 5px;
margin: 0px;
}
#myBarChart {
margin-top: 10px;
}
#line-chart-widget .panel-heading {
background-color: #55BC75;
color: #fff;
padding-bottom: 0px;
margin-bottom: 0px;
}
#line-chart-widget .panel-heading small {
color: #fff;
}
#line-chart-widget .panel-heading .label {
background-color: rgba(0,0,0,0.1);
padding: 5px;
}
#line-chart-widget .panel-body {
padding: 0px;
}
#line-chart-widget .panel-footer {
background-color: #fff;
padding: 20px;
margin-top: 0px;
border-top: none;
}
#line-chart-widget .panel-footer li {
padding: 10px 0;
}
#line-chart-widget h3 {
font-weight: 700;
margin: 0px;
}
#line-chart-widget li {
width:50%;
}
#line-chart-widget .legend li {
background-color: #F5F0EC;
padding: 20px 0;
}
#line-chart-widget .legend li:not(:first-child) {
border-left: 1px solid #fff;
}
#line-chart-widget .chart-block>div {
margin-top: 20px;
width:55%;
}
#line-chart-widget .chart-block>div:last-child {
padding-left: 15px;
width:45%;
}
#line-chart-widget .chart-block .change {
color:#fff;
font-size: 1.6em;
border-radius: 5px;
padding: 10px;
margin-top: 20px;
background-color: #55BC75;
width:100%;
}
#line-chart-widget .chart-block .change i {
font-size: .6em;
}
@media only screen and (max-width: 767px) { /* phones */
.btn-group>.btn {
border-radius: 0;
}
.btn-group>.btn:last-child {
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.btn-group-justified>.btn, .btn-group-justified>.btn-group {
float: left;
width: 100%;
}
.btn-group>.btn-group>.btn {
border-radius: 0;
}
.btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group {
margin-left: 0px;
}
.btn-group>.btn-group:first-child>.btn:last-child {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.btn-group>.btn-group:last-child>.btn:last-child {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
}
$(document).ready(function() {
// Docs at http://simpleweatherjs.com
$.simpleWeather({
location: 'New York, NY',
woeid: '',
unit: 'f',
success: function(weather) {
current = weather.temp+'° <i class="icon-'+weather.code+'"></i>';
hiTemp = 'Hi '+weather.high+'°';
wind = weather.wind.speed+' '+weather.units.speed;
$("#weather-widget #current").html(current);
$("#weather-widget #hiTemp").html(hiTemp);
$("#weather-widget #wind").html(wind);
},
error: function(error) {
$("#weather").html('<p>'+error+'</p>');
}
});
//Docs at http://www.chartjs.org
var pie_data = [
{
value: 300,
color:"#4DAF7C",
highlight: "#55BC75",
label: "Video"
},
{
value: 50,
color: "#EAC85D",
highlight: "#f9d463",
label: "Audio"
},
{
value: 100,
color: "#E25331",
highlight: "#f45e3d",
label: "Photos"
},
{
value: 35,
color: "#F4EDE7",
highlight: "#e0dcd9",
label: "Remaining"
}
]
var line_data = {
labels: ["10:00am", "10:05am", "10:10am", "10:15am", "10:20am", "10:25am", "10:30am", "10:35am", "10:40am", "10:45am", "10:50am", "10:55am", "11:00am", "11:05am"],
datasets: [
{
label: "My Second dataset",
fillColor: "rgba(77, 175, 124,1)",
strokeColor: "rgba(255,255,255,1)",
pointColor: "rgba(255,255,255,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [107.18, 107.13, 107.00, 106.89, 106.91, 107.12, 107.06, 107.04, 107.10, 107.14, 107.16, 107.20, 107.21, 107.26]
}
]
};
var bar_data = {
labels: ["Monday", "Tuesday", "Wednesday", "Thrusday", "May", "June", "July"],
datasets: [
{
fillColor: "rgba(226,83,49,1)",
strokeColor: "rgba(226,83,49,1)",
highlightFill: "rgba(226,83,49,0.5)",
highlightStroke: "rgba(226,83,49,0.5)",
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
// PIE CHART WIDGET
var ctx = document.getElementById("myPieChart").getContext("2d");
var myDoughnutChart = new Chart(ctx).Doughnut(pie_data,
{
responsive:true,
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %> Gb"
});
// LINE CHART WIDGET
var ctx2 = document.getElementById("myLineChart").getContext("2d");
var myLineChart = new Chart(ctx2).Line(line_data,
{
responsive:true,
scaleShowGridLines : false,
scaleShowLabels: false,
showScale: false,
pointDot : true,
bezierCurveTension : 0.2,
pointDotStrokeWidth : 1,
pointHitDetectionRadius : 5,
datasetStroke : false,
tooltipTemplate: "<%= value %><%if (label){%> - <%=label%><%}%>"
});
// BAR CHART ON LINE WIDGET
var ctx3 = document.getElementById("myBarChart").getContext("2d");
var myBarChart = new Chart(ctx3).Bar(bar_data,
{
responsive:true,
scaleShowGridLines : false,
scaleShowLabels: false,
showScale: false,
pointDot : true,
datasetStroke : false,
tooltipTemplate: "<%= value %><%if (label){%> - <%=label%><%}%>"
});
});
