<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Panel</title>
<link rel="stylesheet" href="css/demo-styles.css" />
</head>
<body>
<!--===============================Start Demo====================================================-->
<div class="demo-wrapper">
<div class="login-screen">
<p>Log In</p>
<div class="myform">
<input type="text" placeholder="Password" />
<button data-icon="" id="unlock-button"></button>
</div>
</div>
<div class="page todos">
<h2 class="page-title">My Todos</h2>
<ul contenteditable>
<li>Finish my 3D demo<span class="delete-button">x</span></li>
<li>Design my blog<span class="delete-button">x</span></li>
<li>Buy groceries<span class="delete-button">x</span></li>
<li>Finish my todo app<span class="delete-button">x</span></li>
<li>Organize my bookmarks<span class="delete-button">x</span></li>
</ul>
<div class="close-button">x</div>
</div>
<div class="page random-page">
<h2 class="page-title">Some Awesome App!</h2>
<div class="close-button">x</div>
</div>
<div class="dashboard clearfix">
<div class="col1 clearfix">
<div class="big todos-thumb" data-page="todos">
<p>My Todos
<span class="todos-thumb-span">You have 5 more tasks to do!</span>
</p>
</div>
<div class="small lock-thumb">
<span class="icon-font center" aria-hidden="true" data-icon=""></span>
</div>
<div class="small last cpanel-thumb" data-page="random-page">
<span class="icon-font" aria-hidden="true" data-icon=""></span>
</div>
<div class="big notes-thumb" data-page="random-page">
<span class="icon-font" aria-hidden="true" data-icon=""></span>
<p> Notes</p>
</div>
<div class="big calculator-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span><p>Calculator</p></div>
</div>
<div class="col2 clearfix">
<div class="big organizer-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span><p>Contacts</p></div>
<div class="big news-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span><p>News</p></div>
<div class="small calendar-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span></div>
<div class="small last paint-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span></div>
<div class="big weather-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span><p> Weather</p></div>
</div>
<div class="col3 clearfix">
<div class="big photos-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span><p> Photos</p></div>
<div class="small alarm-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span></div>
<div class="small last favorites-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span></div>
<div class="big games-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span><p>Games</p></div>
<div class="small git-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span></div>
<div class="small last code-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span></div>
</div>
</div>
</div>
<!--====================================end demo wrapper================================================-->
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/modernizr-1.5.min.js"></script>
<script src="js/prefixfree.min.js"></script>
<script>
function showDashBoard(){
for(var i = 1; i <= 3; i++) {
$('.col'+i).each(function(){
$(this).addClass('fadeInForward-'+i).removeClass('fadeOutback');
});
}
}
function fadeDashBoard(){
for(var i = 1; i <= 3; i++) {
$('.col'+i).addClass('fadeOutback').removeClass('fadeInForward-'+i);
}
}
$(".lock-thumb").click(function(){
fadeDashBoard();
$('.login-screen').addClass('slidePageInFromLeft').removeClass('slidePageBackLeft');
});
$('#unlock-button').click(function(){
$('.login-screen').removeClass('slidePageInFromLeft').addClass('slidePageBackLeft');
showDashBoard();
});
$('.big, .small').each(function(){
var $this= $(this),
page = $this.data('page');
$this.on('click',function(){
$('.page.'+page).addClass('openpage');
fadeDashBoard();
})
});
$('.close-button').click(function(){
$(this).parent().addClass('slidePageLeft')
.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
$(this).removeClass('slidePageLeft').removeClass('openpage');
});
showDashBoard();
});
$('.view-demo-button').click(function(){
$(this).parent().addClass('slideDemoOverlayUp');
showDashBoard();
});
</script>
</body>
</html>
windows8-metro.rar （17个子文件） 
windows8-metro css 
demo-styles.css 8KB images 
safari.png 4KB chrome.png 3KB opera.png 3KB firefox.png 4KB ie.png 3KB 1.png 66KB fonts demo-icomoon.woff 9KB
demo-icomoon.svg 28KB demo-icomoon.eot 6KB demo-icomoon.ttf 6KB demo-icomoon.dev.svg 29KB
index.html 5KB js jquery-1.8.2.min.js 91KB modernizr-1.5.min.js 11KB prefixfree.min.js 6KB .project 669B资源评论
