<div id="phone">
<div id="phone">
<div id="box">
<div id="header" class="entypo-chart-bar"> Carrier 4G <span class="entypo-progress-1"></span></div>
<input type="checkbox" id="lock">
<label for="lock" id="label">
<span class='entypo-lock'></span>
<span class='entypo-lock-open'></span>
</label>
<div class="time">
<span id="time">00:00</span>
<br/>
<span id="TheDate">monday January 15th</span>
</div>
<div class="pass">
<span class="entypo-user"></span><input type="text" id="Name" placeholder="Username" ><br/>
<span class="entypo-lock"></span><input type="password" id="Pwd" placeholder="Password" ><br/><br/>
<input type="submit" value="Login">
</div>
<div class="unlock"></div>
</div>
</div>
@import url(http://weloveiconfonts.com/api/?family=entypo);
@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
html {
background:#ddd;
}
#phone {
position:absolute;
left:0;
right:0;
margin:10px auto;
padding:70px 18px 68px 18px;
width:240px;
background:#444;
border-radius:30px;
}
#phone:before {
content:'';
position:absolute;
left:0;
right:0;
margin:-35px auto;
height:8px;
width:45px;
background:#333;
border-radius:20px;
}
#phone:after {
content:'';
position:absolute;
left:0;
right:0;
margin:12px auto;
height:42px;
width:42px;
background:#333;
border-radius:20px;
}
#box {
width:240px;
height:400px;
padding:0;
overflow:hidden;
background: rgb(255,255,255); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2YzZjNmMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2VkZWRlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: linear-gradient(left, rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(243,243,243,1)), color-stop(51%,rgba(237,237,237,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: linear-gradient(left, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(left, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: linear-gradient(left, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-8 */
}
#header {
width:240px;
height:15px;
font-size:12Px;
position:absolute;
background:rgba(1,1,1,0.5);
color:#fff;
}
span[class*="progress-1"]{
float:right;
margin:0 5px;
}
.time {
position:absolute;
margin:13px 0;
padding:20px 0 0 0;
height:50px;
width:240px;
text-align:center;
line-height:20px;
font-size:40px;
color:#eee;
background:#888;
transition: all .5s ease;
transition: all .5s ease;
transition: all .5s ease;
transition: all .5s ease;
transition: all .5s ease;
}
#TheDate {
margin:0;
padding:0;
font-size:12px;
}
input[type="checkbox"]{
position:absolute;
display:none;
}
label[for="lock"] {
position:absolute;
left:0;
right:0;
margin:325px auto;
width:20px;
font-size:25px;
border:3px solid #ccc;
border-radius:50px;
cursor:pointer;
color:#ccc;
padding:15px 20px;
transition: all .5s ease;
transition: all .5s ease;
transition: all .5s ease;
transition: all .5s ease;
transition: all .5s ease;
}
#lock:checked + label[for="lock"] {
margin:20px auto;
transition: all .5s ease;
transition: all .5s ease;
transition: all .5s ease;
transition: all .5s ease;
transition: all .5s ease;
}
span[class*="open"]{
display:none;
}
#lock:checked + label[for="lock"] span[class*="open"]{
display:block;
}
#lock:checked + label[for="lock"] .entypo-lock{
display:none;
}
#lock:checked ~ .unlock {
height:23%;
}
#lock:checked ~ .time {
height:0;
opacity:0;
z-index:-1;
transition: all .5s ease;
transition: all .5s ease;
transition: all .5s ease;
transition: all .5s ease;
transition: all .5s ease;
}
#lock:checked ~ .pass {
height:90px;
padding:20px 10px;
opacity:1;
z-index:1;
transition: all .5s ease;
transition: all .5s ease;
transition: all .5s ease;
transition: all .5s ease;
transition: all .5s ease;
}
.pass {
position:absolute;
margin:270px 0 0 0;
padding:0 10px;
opacity:0;
height:0;
width:220px;
background:rgba(0,0,0,.5);
z-index:-1;
}
.pass input {
width:150px;
height:22px;
border:none;
background:none;
outline: none;
color:#ccc;
}
input[type="submit"] {
float:right;
width:100%;
height:35px;
text-align:center;
border-radius:5px;
background:#ccc;
color:#888;
}
.pass span {
float:left;
display:block;
width:25px;
height:22px;
line-height:22px;
text-align:center;
color:#ccc;
}
.unlock {
width:100%;
height:100%;
background:rgba(0,0,0,.5);
transition: all .5s ease;
transition: all .5s ease;
transition: all .5s ease;
transition: all .5s ease;
transition: all .5s ease;
}
(function() {
(function() {
var Timesetting = function(x) {
return x < 10 ? '0'+x : x;
};
var getTime = function() {
var timing = new Date();
var Hours = Timesetting( timing.getHours() );
var Minutes = Timesetting( timing.getMinutes() );
var current_time = [Hours,Minutes].join(':');
time.innerHTML = current_time;
};
getTime();
setInterval(getTime, 1000);
}());
(function() {
var get_Date = function() {
var thedate = new Date();
var day = new Array("sunday","monday","tuesday","wednesday","thursday","friday","saturday");
var month = new Array("January","Febuary","March","April","May","June","July","August","September","October","November","December");
var current_date = day[thedate.getDay()]+" "+
month[thedate.getMonth()]+" "+
thedate.getDate();
TheDate.innerHTML = current_date;
};
get_Date();
setInterval("get_Date()",1000);
}());