<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 ---------->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.0.2/jquery.simpleWeather.min.js"></script>
<style>
.dynamicTile .col-sm-2.col-xs-4{
padding:5px;
}
.dynamicTile .col-sm-4.col-xs-8{
padding:5px;
}
#tile1{
background: rgb(0,172,238);
}
#tile2{
background: rgb(243,243,243);
}
#tile3{
background: rgb(71,193,228);
}
#tile4{
background-image: url('http://handsontek.net/demoimages/tiles/facebook.png');
background-size: cover;
}
#tile5{
background: rgb(175,26,63);
}
#tile6{
background: rgb(62,157,215);
}
#tile7{
background: white;
}
#tile8{
background: rgb(209,70,37);
}
#tile9{
background: rgb(0,142,0);
}
#tile10{
background: rgb(0,93,233);
}
.tilecaption{
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
margin:0!important;
text-align: center;
color:white;
font-family: Segoe UI;
font-weight: lighter;
}
</style>
<div class="container dynamicTile">
<div class="row ">
<div class="col-sm-2 col-xs-4">
<div id="tile1" class="tile">
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://handsontek.net/demoimages/tiles/twitter1.png" class="img-responsive"/>
</div>
<div class="item">
<img src="http://handsontek.net/demoimages/tiles/twitter2.png" class="img-responsive"/>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-2 col-xs-4">
<div id="tile2" class="tile">
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://handsontek.net/demoimages/tiles/hot.png" class="img-responsive"/>
</div>
<div class="item">
<img src="http://handsontek.net/demoimages/tiles/hot2.png" class="img-responsive"/>
</div>
<div class="item">
<img src="http://handsontek.net/demoimages/tiles/hot3.png" class="img-responsive"/>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-2 col-xs-4">
<div id="tile3" class="tile">
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://handsontek.net/demoimages/tiles/weather2.png" class="img-responsive"/>
</div>
<div class="item">
<img src="http://handsontek.net/demoimages/tiles/weather.png" class="img-responsive"/>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-2 col-xs-4">
<div id="tile4" class="tile">
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://handsontek.net/demoimages/tiles/facebook3.png" class="img-responsive"/>
</div>
<div class="item">
<img src="http://handsontek.net/demoimages/tiles/facebook2.png" class="img-responsive"/>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-2 col-xs-4">
<div id="tile5" class="tile">
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://handsontek.net/demoimages/tiles/neews.png" class="img-responsive"/>
</div>
<div class="item">
<img src="http://handsontek.net/demoimages/tiles/neews2.png" class="img-responsive"/>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-2 col-xs-4">
<div id="tile6" class="tile">
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://handsontek.net/demoimages/tiles/skype.png" class="img-responsive"/>
</div>
<div class="item">
<img src="http://handsontek.net/demoimages/tiles/skype2.png" class="img-responsive"/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-xs-8">
<div id="tile7" class="tile">
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://handsontek.net/demoimages/tiles/gallery.png" class="img-responsive"/>
</div>
<div class="item">
<img src="http://handsontek.net/demoimages/tiles/gallery2.png" class="img-responsive"/>
</div>
<div class="item">
<img src="http://handsontek.net/demoimages/tiles/gallery3.png" class="img-responsive"/>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-2 col-xs-4">
<div id="tile8" class="tile">
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://handsontek.net/demoimages/tiles/music.png" class="img-responsive"/>
</div>
<div class="item">
<img src="http://handsontek.net/demoimages/tiles/music2.png" class="img-responsive"/>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-2 col-xs-4">
<div id="tile9" class="tile">
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://handsontek.net/demoimages/tiles/calendar.png" class="img-responsive"/>
</div>
<div class="item">
<img src="http://handsontek.net/demoimages/tiles/calendar2.png" class="img-responsive"/>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-8">
<div id="tile10" class="tile">
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<h3 class="tilecaption" id="weather"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/loader.gif" alt="Loading..." class="loading"><br />Loading...</h3>
</div>
<div class="item">
<h3 class="tilecaption"><i class="fa fa-child fa-4x"></i></h3>
</div>
<div class="item">
<h3 class="tilecaption">Text, Icons, Images</h3>
</div>
<div class="item">
<h3 class="tilecaption">Combine them and create your metro style</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$( document ).ready(function() {
$(".tile").height($("#tile1").width());
$(".carousel").height($("#tile1").width());
$(".item").height($("#tile1").width());
$(window).resize(function() {
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 10);
});
$(window).bind('resizeEnd', function() {
$(".tile").height($("#tile1").width());
$(".carousel").height($("#tile1").width());
$(".item").height($("#tile1").width());
});
getWeather(); //Get the initial weather.
setInterval(getWeather, 300000); //Update the weather every 5 minutes.
/**
* Setup last.fm rss feed scraper
*/
$.ajax({
url : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent('http://ws.audioscrobbler.com/1.0/user/bktz/recenttracks.rss'),
dataType : 'json',
success : function (data) {
if (data.responseData.feed && data.responseData.feed.entries) {
$.each(data.responseData.feed.entries, function (i, e) {
console.log("------------------------");
console.log("title : " + e.title);
console.log("published date : " + e.publishedDate);
});
}
},
error : function () {
}
});
});
function getWeather() {
$.simpleWeather({
location: 'Toronto, ON',
woeid: '',
unit: 'c',
success: function (weather) {
html = '<p>' + weather.temp + '°' + weather.units.temp + '</p>';
$("#weather").html(html);
},
error: function (error) {
$("#weather").html('<p>' + error + '</p>');
}
});
};
</script>
