|
|
@@ -1,134 +1,21 @@
|
|
|
-<style>
|
|
|
- .login {
|
|
|
- background: #C7CC2D;
|
|
|
- border: 1px solid #972620;
|
|
|
- border-radius: 6px;
|
|
|
- height: 300px;
|
|
|
- margin: 20px auto 0;
|
|
|
- width: 298px;
|
|
|
- }
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
|
|
|
- input[type="password"], input[type="text"] {
|
|
|
- background: linear-gradient(top, #C7CC2D, #e6e6e6);
|
|
|
- border: 1px solid #C7CC2D;
|
|
|
- border-radius: 4px;
|
|
|
- box-shadow: 0 1px #C7CC2D;
|
|
|
- box-sizing: border-box;
|
|
|
- color: #567199;
|
|
|
- height: 39px;
|
|
|
- margin: 24px 0 0 29px;
|
|
|
- padding-left: 37px;
|
|
|
- transition: box-shadow 0.3s;
|
|
|
- width: 240px;
|
|
|
- }
|
|
|
- input[type="password"]:focus, input[type="text"]:focus {
|
|
|
- box-shadow: 0 0 4px 1px rgba(55, 166, 155, 0.3);
|
|
|
- outline: 0;
|
|
|
- }
|
|
|
- .show-password {
|
|
|
- display: block;
|
|
|
- height: 16px;
|
|
|
- margin: 26px 0 0 28px;
|
|
|
- width: 87px;
|
|
|
- }
|
|
|
- input[type="checkbox"] {
|
|
|
- cursor: pointer;
|
|
|
- height: 16px;
|
|
|
- opacity: 0;
|
|
|
- position: relative;
|
|
|
- width: 64px;
|
|
|
- }
|
|
|
- input[type="checkbox"]:checked {
|
|
|
- left: 29px;
|
|
|
- width: 58px;
|
|
|
- }
|
|
|
- .toggle {
|
|
|
- display: block;
|
|
|
- height: 16px;
|
|
|
- margin-top: -20px;
|
|
|
- width: 87px;
|
|
|
- z-index: -1;
|
|
|
- }
|
|
|
- input[type="checkbox"]:checked + .toggle { background-position: 0 -16px }
|
|
|
-
|
|
|
- input[type="button"] {
|
|
|
- width:240px;
|
|
|
- height:35px;
|
|
|
- display:block;
|
|
|
- font-family:Arial, "Helvetica", sans-serif;
|
|
|
- font-size:16px;
|
|
|
- font-weight:bold;
|
|
|
- color:#F8E15E;
|
|
|
- text-decoration:none;
|
|
|
- text-transform:uppercase;
|
|
|
- text-align:center;
|
|
|
- text-shadow:1px 1px 0px #567199;
|
|
|
- padding-top:6px;
|
|
|
- margin: 23px 0 0 29px;
|
|
|
- position:relative;
|
|
|
- cursor:pointer;
|
|
|
- border: none;
|
|
|
- background-color: #567199;
|
|
|
- background-image: linear-gradient(top,#567199,rgba(252, 4, 4, 0.067));
|
|
|
- border-top-left-radius: 5px;
|
|
|
- border-top-right-radius: 5px;
|
|
|
- border-bottom-right-radius: 5px;
|
|
|
- border-bottom-left-radius:5px;
|
|
|
- box-shadow: inset 0px 1px 0px #567199, 0px 5px 0px 0px #324F70, 0px 10px 5px #C7CC2D;
|
|
|
- }
|
|
|
-
|
|
|
- input[type="button"]:disabled {
|
|
|
- width:240px;
|
|
|
- height:35px;
|
|
|
- display:block;
|
|
|
- font-family:Arial, "Helvetica", sans-serif;
|
|
|
- font-size:16px;
|
|
|
- font-weight:bold;
|
|
|
- color:#F8E15E;
|
|
|
- text-decoration:none;
|
|
|
- text-transform:uppercase;
|
|
|
- text-align:center;
|
|
|
- text-shadow:1px 1px 0px #909998;
|
|
|
- padding-top:6px;
|
|
|
- margin: 29px 0 0 29px;
|
|
|
- position:relative;
|
|
|
- cursor:pointer;
|
|
|
- border: none;
|
|
|
- background-color: #7e7e7e;
|
|
|
- background-image: linear-gradient(top,#909998,#82a09c);
|
|
|
- border-top-left-radius: 5px;
|
|
|
- border-top-right-radius: 5px;
|
|
|
- border-bottom-right-radius: 5px;
|
|
|
- border-bottom-left-radius:5px;
|
|
|
- box-shadow: inset 0px 1px 0px #7e7e7e, 0px 5px 0px 0px #808586, 0px 7px 5px #C7CC2D;
|
|
|
- }
|
|
|
- .shadow {
|
|
|
- background: #000;
|
|
|
- border-radius: 12px 12px 4px 4px;
|
|
|
- box-shadow: 0 0 20px 10px #000;
|
|
|
- height: 12px;
|
|
|
- margin: 30px auto;
|
|
|
- opacity: 0.2;
|
|
|
- width: 270px;
|
|
|
- }
|
|
|
-
|
|
|
- input[type="button"]:active {
|
|
|
- top:3px;
|
|
|
- box-shadow: inset 0px 1px 0px #567199, 0px 2px 0px 0px #324F70, 0px 5px 3px #C7CC2D;
|
|
|
- }
|
|
|
- .connection {
|
|
|
- font-family:Arial, "Helvetica", sans-serif;
|
|
|
- font-size:14px;
|
|
|
- color: #972620;
|
|
|
- text-align:center;
|
|
|
- }
|
|
|
- </style>
|
|
|
+ <head>
|
|
|
+ <link rel="stylesheet" type="text/css" href="assets/html/css/style.css">
|
|
|
+ <link rel="stylesheet" type="text/css" href="css/style.css">
|
|
|
+ </head>
|
|
|
|
|
|
+<body>
|
|
|
<div class="login">
|
|
|
- <input type="text" placeholder="Username" id="username" name="username" autocomplete="off">
|
|
|
- <input type="button" value="Connect" name="loginButton">
|
|
|
- <p class="connection" id="connectionStatus">Not Connected</p>
|
|
|
- <input type="button" value="Online Game" name="onlineGame" disabled>
|
|
|
- <input type="button" value="Local game" name="localGame">
|
|
|
+ <input type="text" placeholder="Username" id="username" name="username" autocomplete="off">
|
|
|
+ <input type="button" value="Connect" name="loginButton">
|
|
|
+ <p class="connection" id="connectionStatus">Not Connected</p>
|
|
|
+ <input type="button" value="Online Game" name="onlineGame" disabled>
|
|
|
+ <input type="button" value="Local game" name="localGame">
|
|
|
</div>
|
|
|
<div class="shadow"></div>
|
|
|
+
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
jojo