2014-02-01 16:49:36 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html class="lockscreen">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>AdminLTE | Lockscreen</title>
|
|
|
|
|
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
|
2014-08-14 13:44:24 +02:00
|
|
|
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
|
|
|
|
|
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
|
2014-02-01 16:49:36 +01:00
|
|
|
<!-- Theme style -->
|
|
|
|
|
<link href="../../css/AdminLTE.css" rel="stylesheet" type="text/css" />
|
|
|
|
|
|
|
|
|
|
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
|
|
|
|
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
|
|
|
|
<!--[if lt IE 9]>
|
|
|
|
|
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
|
|
|
|
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
|
|
|
|
<![endif]-->
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<!-- Automatic element centering using js -->
|
|
|
|
|
<div class="center">
|
|
|
|
|
<div class="headline text-center" id="time">
|
|
|
|
|
<!-- Time auto generated by js -->
|
|
|
|
|
</div><!-- /.headline -->
|
|
|
|
|
|
|
|
|
|
<!-- User name -->
|
|
|
|
|
<div class="lockscreen-name">John Doe</div>
|
|
|
|
|
|
|
|
|
|
<!-- START LOCK SCREEN ITEM -->
|
|
|
|
|
<div class="lockscreen-item">
|
|
|
|
|
<!-- lockscreen image -->
|
|
|
|
|
<div class="lockscreen-image">
|
|
|
|
|
<img src="../../img/avatar5.png" alt="user image"/>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- /.lockscreen-image -->
|
|
|
|
|
|
|
|
|
|
<!-- lockscreen credentials (contains the form) -->
|
|
|
|
|
<div class="lockscreen-credentials">
|
|
|
|
|
|
|
|
|
|
<div class="input-group">
|
|
|
|
|
<input type="password" class="form-control" placeholder="password" />
|
|
|
|
|
<div class="input-group-btn">
|
|
|
|
|
<button class="btn btn-flat"><i class="fa fa-arrow-right text-muted"></i></button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div><!-- /.lockscreen credentials -->
|
|
|
|
|
|
|
|
|
|
</div><!-- /.lockscreen-item -->
|
|
|
|
|
|
|
|
|
|
<div class="lockscreen-link">
|
|
|
|
|
<a href="login.html">Or sign in as a different user</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div><!-- /.center -->
|
|
|
|
|
|
2014-08-14 13:44:24 +02:00
|
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
|
|
|
|
|
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
|
2014-02-01 16:49:36 +01:00
|
|
|
|
|
|
|
|
<!-- page script -->
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
$(function() {
|
|
|
|
|
startTime();
|
|
|
|
|
$(".center").center();
|
|
|
|
|
$(window).resize(function() {
|
|
|
|
|
$(".center").center();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
/* */
|
|
|
|
|
function startTime()
|
|
|
|
|
{
|
|
|
|
|
var today = new Date();
|
|
|
|
|
var h = today.getHours();
|
|
|
|
|
var m = today.getMinutes();
|
|
|
|
|
var s = today.getSeconds();
|
|
|
|
|
|
|
|
|
|
// add a zero in front of numbers<10
|
|
|
|
|
m = checkTime(m);
|
|
|
|
|
s = checkTime(s);
|
|
|
|
|
|
|
|
|
|
//Check for PM and AM
|
|
|
|
|
var day_or_night = (h > 11) ? "PM" : "AM";
|
|
|
|
|
|
|
|
|
|
//Convert to 12 hours system
|
|
|
|
|
if (h > 12)
|
|
|
|
|
h -= 12;
|
|
|
|
|
|
|
|
|
|
//Add time to the headline and update every 500 milliseconds
|
|
|
|
|
$('#time').html(h + ":" + m + ":" + s + " " + day_or_night);
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
startTime()
|
|
|
|
|
}, 500);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function checkTime(i)
|
|
|
|
|
{
|
|
|
|
|
if (i < 10)
|
|
|
|
|
{
|
|
|
|
|
i = "0" + i;
|
|
|
|
|
}
|
|
|
|
|
return i;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* CENTER ELEMENTS IN THE SCREEN */
|
|
|
|
|
jQuery.fn.center = function() {
|
|
|
|
|
this.css("position", "absolute");
|
|
|
|
|
this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
|
|
|
|
|
$(window).scrollTop()) - 30 + "px");
|
|
|
|
|
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
|
|
|
|
|
$(window).scrollLeft()) + "px");
|
|
|
|
|
return this;
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
