Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: db787ac247
Fetching contributors…

Cannot retrieve contributors at this time

140 lines (113 sloc) 5.157 kb
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/droptiles.css?v=14">
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script src="js/Knockout-2.1.0.js"></script>
</head>
<body>
<div id="body" class="unselectable">
<div id="navbar" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="pull-left" style="margin-top: 7px; margin-right: 5px;" href="">
<img src="img/avatar474_2.gif" style="max-height: 16px;" />
</a>
<h1><a class="brand" href="?">Droptiles</a></h1>
<div class="nav-collapse">
<ul class="nav">
<li><a class="active" href="?"><i class="icon-th-large"></i>Dashboard</a></li>
<li><a href="AppStore.aspx"><i class="icon-shopping-cart"></i>Apps</a></li>
<li><a href="http://oazabir.github.com/Droptiles/"><i class="icon-gift"></i>I want this!</a></li>
<li>
<form id="googleForm" class="navbar-search pull-left" action="http://www.google.com/search" target="_blank">
<input id="googleSearchText" type="text" class="search-query span2" name="q" placeholder="Google">
</form>
</li>
</ul>
<ul class="nav pull-right">
<li><a href="ServerStuff/Logout.ashx"><i class="icon-refresh"></i>Reset</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-tint"></i>Theme<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Green</a></li>
<li><a href="#">White</a></li>
<li><a href="#">Bloom</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="content">
<div id="start">Start</div>
<div id="user">
<div id="name">
<div id="firstname">Omar</div>
<div id="lastname">AL Zabir</div>
</div>
<div id="photo">
<img src="img/User No-Frame.png" width="40" height="40" />
</div>
</div>
<div id="metro-sections-container" class="metro">
<div class="metro-sections" >
<div class="metro-section" data-bind="foreach: tiles" >
<div class="tile">
<div class="tile-icon-large">
<img data-bind="attr: { src: icon } " />
</div>
<span class="tile-label" data-bind="html: label"></span>
<span class="tile-counter" data-bind="html: count"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
function Tile(param) {
this.label = ko.observable(param.label);
this.count = ko.observable(param.count);
this.icon = ko.observable(param.icon);
}
var tile1 = new Tile({
label: "Label 1",
count: 10,
icon: "img/CutTheRope.png"
});
var tile2 = new Tile({
label: "Label 2",
count: 20,
icon: "img/Desktop.png"
});
function ViewModel() {
this.tiles = ko.observableArray([]);
}
var viewModel = new ViewModel();
viewModel.tiles.push(tile1);
viewModel.tiles.push(tile2);
ko.applyBindings(viewModel);
window.setTimeout(function () {
viewModel.tiles.push(new Tile({
body: "New Tile",
label: "New",
count: 0,
icon: "img/Configure.png"
}));
$(".metro-section").sortable({
revert: true
});
}, 2000);
window.setInterval(function () {
ko.utils.arrayForEach(viewModel.tiles(), function (tile) {
tile.count(tile.count() + 1);
});
}, 1000);
</script>
</html>
Jump to Line
Something went wrong with that request. Please try again.