diff options
| author | Unknown <Alee14498@gmail.com> | 2017-10-01 00:24:20 -0400 |
|---|---|---|
| committer | Unknown <Alee14498@gmail.com> | 2017-10-01 00:24:20 -0400 |
| commit | 78f3c0e9893d36e0ce039c2b79ede8a92ebe468a (patch) | |
| tree | 8479930f9372a1e9998b6750651565cf52b81ca8 /login | |
| parent | d8ba59582c137de474789690e777d8c029e08fe6 (diff) | |
| download | windows8online-78f3c0e9893d36e0ce039c2b79ede8a92ebe468a.tar.gz windows8online-78f3c0e9893d36e0ce039c2b79ede8a92ebe468a.tar.bz2 windows8online-78f3c0e9893d36e0ce039c2b79ede8a92ebe468a.zip | |
Adding the code
Diffstat (limited to 'login')
| -rw-r--r-- | login/eye-active.png | bin | 0 -> 283 bytes | |||
| -rw-r--r-- | login/eye.png | bin | 0 -> 395 bytes | |||
| -rw-r--r-- | login/go-active.png | bin | 0 -> 295 bytes | |||
| -rw-r--r-- | login/go.png | bin | 0 -> 290 bytes | |||
| -rw-r--r-- | login/img/user.png | bin | 0 -> 2898 bytes | |||
| -rw-r--r-- | login/index.html | 36 | ||||
| -rw-r--r-- | login/style.css | 152 |
7 files changed, 188 insertions, 0 deletions
diff --git a/login/eye-active.png b/login/eye-active.png Binary files differnew file mode 100644 index 0000000..90cfd83 --- /dev/null +++ b/login/eye-active.png diff --git a/login/eye.png b/login/eye.png Binary files differnew file mode 100644 index 0000000..e72d517 --- /dev/null +++ b/login/eye.png diff --git a/login/go-active.png b/login/go-active.png Binary files differnew file mode 100644 index 0000000..c84da27 --- /dev/null +++ b/login/go-active.png diff --git a/login/go.png b/login/go.png Binary files differnew file mode 100644 index 0000000..5f0d707 --- /dev/null +++ b/login/go.png diff --git a/login/img/user.png b/login/img/user.png Binary files differnew file mode 100644 index 0000000..4ac8e42 --- /dev/null +++ b/login/img/user.png diff --git a/login/index.html b/login/index.html new file mode 100644 index 0000000..604f919 --- /dev/null +++ b/login/index.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="x-ua-compatible" content="IE=edge"> +<title>Login to Windows</title> +<link rel="stylesheet" href="style.css"/> +<link rel="shortcut icon" href="../favicon.ico"/> +<script> +var passwd = 'document.getElementById('passwd')'; +</script> +</head> +<body> +<div id="login"> + <div id="login_box"> + <img src="img/user.png" width="200" height="200" /> + <form> + <p> + Anonymous User<br /> + <span>user@email.com</span> + </p> + <fieldset class="toggle"> + <input type="password" id="passwd" placeholder="No password required"/> + <a href="../start/index.html"><img src="go.png" id="go" onMouseDown="this.src='go-active.png'" onMouseUp="this.src='go.png'"/></a> + <img src="eye.png" id="showpwd" onMouseDown="passwd.type='text';this.src='eye-active.png'" onMouseUp="passwd.type='password';this.src='eye.png'" onMouseout="passwd.type='password'"/> + </fieldset> + <div class="toggle" id="welcome"> + Welcome + </div> + <div class="toggle" id="incorrect"> + <span>Incorrect</span><br /> + <a href="#" id="back_btn"></a> + </div> + </form> + </div> + </div> +</div>
\ No newline at end of file diff --git a/login/style.css b/login/style.css new file mode 100644 index 0000000..72d5010 --- /dev/null +++ b/login/style.css @@ -0,0 +1,152 @@ +body { + background-color : #001E4E; + font-family:Segoe UI; +} +img, a { + outline:none; + border:none; +} +#login { + z-index : 1000; +} + +#login, +#main { + background-color : #001E4E; +} + +#login_box { + width : 600px; + position : absolute; + top : 15%; + left : 50%; + margin-left : -300px; +} +#login_box > img { + display : block; + width : 200px; + height : 200px; + float : left; +} +#login_box form { + margin-left : 230px; + position : relative; +} +#login_box form p { + font-size : 30px; + color : #fff; + line-height : 1.2; +} +#login_box form p span { + font-size : 15px; +} + +#login_box fieldset { + margin-top : 30px; + border : none; + width : 344px; + height : 30px; + padding : 2px; + background: #fff; +} + +#login_box input#passwd { + font-family:Segoe UI; + display : block; + width : 280px; + height : 30px; + border : none; + float : left; + padding : 0 2px; + font-size: 16px; +} +input#passwd:focus { + border : none; +} + +#login_box fieldset img { + float : right; + width : 28px; + height : 28px; + display : inline; + margin-top : 1px; +} + +#login_box.correct { + -webkit-transition : all 0.5s ease-out; + left : 80%; + opacity : 0; +} + +#login_box .toggle { + -webkit-transition : opacity 0.2s linear; +} +#login_box #welcome, +#incorrect { + position : absolute; + height : 100px; + top : 80px; + width : 340px; + left : 0px; + display : none; +} +#welcome { + color : #ffffff; + font-size : 30px; + margin-left : 30px; +} +#incorrect { + color : #f68323; +} +#back_btn { + display : block; + width : 90px; + height : 32px; + background : url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAAAgCAYAAACSEW+lAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAIQSURBVGiB7Zo9SOtQFMf/FQcz3ixiKiopPt9sq4PgFrAoiHTo4itChy4P3lAf1KWTi2+om0sHQdTFQURQFDIr9MO5KmYobbq1Y99Wh0eFmNQvXk8uen5TOOceOPxyc5ObJNDpdDpg+s6A3w18FQa7B983//jZx6elks0A4BlNBosmgkUTwaKJYNFEsGgiWDQRLJqIwdeH0JOOGkjNhB2xfLGM7QvTEbv+/QtX1RrWj44d8fOfKeiqwMaliZNCue/9vgXpRB8kE4gENSzvHeKuWnuKV7IZGCEdizv5V+t1VUi305Vq6UhHDU/JwL9XBLoqkI4aPeu7J0k2yYBkoo2QjlLddknuUqrbMEK6Zy4Xjz2dJBmRSrRQhnBjN3rmb+wGdFW44rl4DEtTk55XgixItUYLRXl3zdzYKISiwGq2pJUMSDajW+32u2uEomB57xC6KnCQTPShq/+DZKL/Ylob6Zmf1kZgNVuO2NntPe6qNWxcmogENeTisX63+SGkEm0+WIgENXwbG/XMR4IazAfLM3dSKCNfLGNpavLFJxO/kEr09oWJUt3G6dqqS3Ylm4HVbLk2Lc/rz27vkZoJY2U23HOcH0h1MwSAH7v7SEcNnK6tOuJeO0Mv1o+OMZxMYGvBwPzEuGvX6BeB7ldwGR/yPwP8zZAYFk0EiyaCRRPBoolg0USwaCIC/DcpDTyjiXgEfr2cM/8g2B4AAAAASUVORK5CYII=) top left no-repeat; + margin-top : 15px; +} + +#account_name { + position : absolute; + top : 50px; + right : 180px; + color : #fff; + font-size : 25px; + padding : 10px; + opacity : 0; +} +#account_name.active { + -webkit-transition : opacity 0.5s ease-in, right 0.5s ease-out, -webkit-transform 0.2s ease-in; + opacity : 1; + right : 50px; +} + +#account_name:hover { + background-color : #2d6376 +} +#account_name img { + vertical-align : middle; +} +#account_name[data-pressed] { + -webkit-transform : scale(0.95, 0.95); +} +#showpwd { + display:inline; + vertical-align:middle; + margin-right:4px; +} +#showpwd:hover { + background-color:rgb(223, 223, 223); +} +#showpwd:active { + background-color:#000000; +} +#go { + background-color:#001E4E; +} +#go:hover { + opacity:0.9; +} +#go:active { + background-color:#FFF; +}
\ No newline at end of file |
