lockscreen.html 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <!DOCTYPE html>
  2. <html class="lockscreen">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>AdminLTE | Lockscreen</title>
  6. <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
  7. <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  8. <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  9. <!-- Theme style -->
  10. <link href="../../css/AdminLTE.css" rel="stylesheet" type="text/css" />
  11. <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  12. <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  16. <![endif]-->
  17. </head>
  18. <body>
  19. <!-- Automatic element centering using js -->
  20. <div class="center">
  21. <div class="headline text-center" id="time">
  22. <!-- Time auto generated by js -->
  23. </div><!-- /.headline -->
  24. <!-- User name -->
  25. <div class="lockscreen-name">John Doe</div>
  26. <!-- START LOCK SCREEN ITEM -->
  27. <div class="lockscreen-item">
  28. <!-- lockscreen image -->
  29. <div class="lockscreen-image">
  30. <img src="../../img/avatar5.png" alt="user image"/>
  31. </div>
  32. <!-- /.lockscreen-image -->
  33. <!-- lockscreen credentials (contains the form) -->
  34. <div class="lockscreen-credentials">
  35. <div class="input-group">
  36. <input type="password" class="form-control" placeholder="password" />
  37. <div class="input-group-btn">
  38. <button class="btn btn-flat"><i class="fa fa-arrow-right text-muted"></i></button>
  39. </div>
  40. </div>
  41. </div><!-- /.lockscreen credentials -->
  42. </div><!-- /.lockscreen-item -->
  43. <div class="lockscreen-link">
  44. <a href="login.html">Or sign in as a different user</a>
  45. </div>
  46. </div><!-- /.center -->
  47. <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  48. <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
  49. <!-- page script -->
  50. <script type="text/javascript">
  51. $(function() {
  52. startTime();
  53. $(".center").center();
  54. $(window).resize(function() {
  55. $(".center").center();
  56. });
  57. });
  58. /* */
  59. function startTime()
  60. {
  61. var today = new Date();
  62. var h = today.getHours();
  63. var m = today.getMinutes();
  64. var s = today.getSeconds();
  65. // add a zero in front of numbers<10
  66. m = checkTime(m);
  67. s = checkTime(s);
  68. //Check for PM and AM
  69. var day_or_night = (h > 11) ? "PM" : "AM";
  70. //Convert to 12 hours system
  71. if (h > 12)
  72. h -= 12;
  73. //Add time to the headline and update every 500 milliseconds
  74. $('#time').html(h + ":" + m + ":" + s + " " + day_or_night);
  75. setTimeout(function() {
  76. startTime()
  77. }, 500);
  78. }
  79. function checkTime(i)
  80. {
  81. if (i < 10)
  82. {
  83. i = "0" + i;
  84. }
  85. return i;
  86. }
  87. /* CENTER ELEMENTS IN THE SCREEN */
  88. jQuery.fn.center = function() {
  89. this.css("position", "absolute");
  90. this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
  91. $(window).scrollTop()) - 30 + "px");
  92. this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
  93. $(window).scrollLeft()) + "px");
  94. return this;
  95. }
  96. </script>
  97. </body>
  98. </html>