<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Docs at http://http://simpleweatherjs.com -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.0.2/jquery.simpleWeather.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3">
<div id="weather-widget" class="panel">
<div class="panel-heading text-center">
<div id="current"></div>
</div>
<div class="panel-body">
<div id="hiTemp" class="col-xs-6 text-center"></div>
<div id="wind" class="col-xs-6 text-center"></div>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div id="profile-widget" class="panel">
<div class="panel-heading">
</div>
<div class="panel-body">
<div class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/flashmurphy/128.jpg">
</a>
<div class="media-body">
<h2 class="media-heading">John Raymons</h2>
<p style="color:#999;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</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-eye"></i> 172</a>
<a class="btn btn-default" role="button"><i class="fa fa-comment"></i> 34</a>
<a class="btn btn-default" role="button"><i class="fa fa-heart"></i> 210</a>
</div>
</div>
</div>
</div>
</div>
</div>
/*
Docs at http://http://simpleweatherjs.com
Look inspired by http://www.degreees.com/
Used for demo purposes.
Weather icon font from http://fonts.artill.de/collection/artill-weather-icons
*/
@font-face {
font-family: 'weather';
src: url('https://dl.dropboxusercontent.com/u/2086809/weatherfont/artill_clean_icons-webfont.eot');
src: url('https://dl.dropboxusercontent.com/u/2086809/weatherfont/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),
url('https://dl.dropboxusercontent.com/u/2086809/weatherfont/artill_clean_icons-webfont.woff') format('woff'),
url('https://dl.dropboxusercontent.com/u/2086809/weatherfont/artill_clean_icons-webfont.ttf') format('truetype'),
url('https://dl.dropboxusercontent.com/u/2086809/weatherfont/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');
font-weight: normal;
font-style: normal;
}
html {
width: 100%;
height: 100%;
}
html:after {
content: "";
background: #fff url(https://farm9.staticflickr.com/8244/8576587662_83a17eb781_b.jpg) no-repeat top center;
background-size: cover;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
body {
padding: 45px 0;
font: 13px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
.panel {
border: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
#weather-widget i {
color: #fff;
font-family: weather;
font-size: 1.5em;
font-weight: normal;
font-style: normal;
line-height: 1.0;
}
/* Weather icons */
.icon-0:before { content: ":"; }
.icon-1:before { content: "p"; }
.icon-2:before { content: "S"; }
.icon-3:before { content: "Q"; }
.icon-4:before { content: "S"; }
.icon-5:before { content: "W"; }
.icon-6:before { content: "W"; }
.icon-7:before { content: "W"; }
.icon-8:before { content: "W"; }
.icon-9:before { content: "I"; }
.icon-10:before { content: "W"; }
.icon-11:before { content: "I"; }
.icon-12:before { content: "I"; }
.icon-13:before { content: "I"; }
.icon-14:before { content: "I"; }
.icon-15:before { content: "W"; }
.icon-16:before { content: "I"; }
.icon-17:before { content: "W"; }
.icon-18:before { content: "U"; }
.icon-19:before { content: "Z"; }
.icon-20:before { content: "Z"; }
.icon-21:before { content: "Z"; }
.icon-22:before { content: "Z"; }
.icon-23:before { content: "Z"; }
.icon-24:before { content: "E"; }
.icon-25:before { content: "E"; }
.icon-26:before { content: "3"; }
.icon-27:before { content: "a"; }
.icon-28:before { content: "A"; }
.icon-29:before { content: "a"; }
.icon-30:before { content: "A"; }
.icon-31:before { content: "6"; }
.icon-32:before { content: "1"; }
.icon-33:before { content: "6"; }
.icon-34:before { content: "1"; }
.icon-35:before { content: "W"; }
.icon-36:before { content: "1"; }
.icon-37:before { content: "S"; }
.icon-38:before { content: "S"; }
.icon-39:before { content: "S"; }
.icon-40:before { content: "M"; }
.icon-41:before { content: "W"; }
.icon-42:before { content: "I"; }
.icon-43:before { content: "W"; }
.icon-44:before { content: "a"; }
.icon-45:before { content: "S"; }
.icon-46:before { content: "U"; }
.icon-47:before { content: "S"; }
#weather-widget .panel-heading {
font-size: 4em;
color: #fff;
background-color: #55BC75;
}
#profile-widget .panel-heading {
min-height: 200px;
background: #fff url(https://farm4.staticflickr.com/3401/3477031513_a74143f14d_n.jpg) no-repeat bottom center;
background-size: cover;
}
#profile-widget .panel-body {
padding: 20px;
}
#profile-widget .panel-body .img-circle {
height: 90px;
width: 90px;
padding: 8px;
border: 1px solid #ddd;
}
#profile-widget .panel-footer {
padding: 0px;
border: none;
}
#profile-widget .panel-footer .btn-group .btn {
border: none;
border-radius-top: 0px;
padding-top: 10px;
padding-bottom: 10px;
}
// Docs at http://simpleweatherjs.com
$(document).ready(function() {
$.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>');
}
});
});
