foltik/shimapan
1
0
Fork 0
mirror of https://github.com/Foltik/Shimapan synced 2024-11-14 08:49:51 -05:00
Code Issues Releases Wiki Activity

Style login and register pages

Browse Source
This commit is contained in:
Jack 2017-10-14 16:31:16 -04:00
parent 68969a4a49
commit a1ffcfc395
Signed by: foltik
GPG Key ID: 303F88F996E95541
5 changed files with 111 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
public/css/form.css Normal file
View File

@ -0,0 +1,83 @@
body {
background-color: #000000;
margin: 0;
color: #d3d3d3;
font-family: 'Roboto', sans-serif;
}
::-moz-focus-inner {
border: 0;
}
.form {
margin: 50px auto;
width: 300px;
}
.form h3 {
background-color: #000;
border: 2px solid #2a9fd6;
border-radius: 5px 5px 0 0;
color: #eee;
font-size: 18px;
padding: 20px;
margin: 0;
text-align: center;
text-transform: uppercase;
}
fieldset {
border: 2px solid #2a9fd6;
border-top: none;
margin: 0;
background: #000;
border-radius: 0 0 5px 5px;
padding: 20px;
position: relative;
}
fieldset:before {
border-bottom: 2px solid #2a9fd6;
border-right: 2px solid #2a9fd6;
background-color: #000;
content: "";
width: 8px;
height: 8px;
left: 50%;
margin: -4px 0 0 -4px;
position: absolute;
top: 0;
transform: rotate(45deg) translateY(-2px);
}
.form input {
display: block;
font-size: 14px;
background: #000;
color: #d3d3d3;
border: 1px solid #999;
width: 226px;
padding: 12px 12px;
margin: auto;
margin-bottom: 5px;
}
button {
background: #000;
border: 2px solid #2a9fd6;
border-radius: 4px;
color: #d3d3d3;
cursor: pointer;
display: block;
padding: 10px 30px;
margin: auto;
margin-top: 20px;
transition: background 0.25s;
}
button:hover {
background: #2a9fd6;
color: #fff;
text-decoration: none;
outline: none;
}

7
public/views/login.html
View File

@ -2,9 +2,10 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<base href="/login"/>
<title>Login</title> <title>Login</title>
<link href="/css/form.css" type="text/css" rel="stylesheet"/>
<script src="/libs/angular/angular.min.js"></script> <script src="/libs/angular/angular.min.js"></script>
<script src="/libs/ng-file-upload/ng-file-upload-all.min.js"></script> <script src="/libs/ng-file-upload/ng-file-upload-all.min.js"></script>
<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script> <script src="https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script>
@ -13,8 +14,8 @@
<script src="/libs/app/shimapan.min.js"></script> <script src="/libs/app/shimapan.min.js"></script>
</head> </head>
<body ng-app="shimapan"> <body ng-app="shimapan">
<div id="container"> <div id="container">
<login-component></login-component> <login-component></login-component>
</div> </div>
</body> </body>
</html> </html>

3
public/views/register.html
View File

@ -2,9 +2,10 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<base href="/register"/>
<title>Register</title> <title>Register</title>
<link href="/css/form.css" type="text/css" rel="stylesheet"/>
<script src="/libs/angular/angular.min.js"></script> <script src="/libs/angular/angular.min.js"></script>
<script src="/libs/ng-file-upload/ng-file-upload-all.min.js"></script> <script src="/libs/ng-file-upload/ng-file-upload-all.min.js"></script>
<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script> <script src="https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script>

21
public/views/shimapan/login-form.html
View File

@ -1,11 +1,10 @@
<form ng-submit="login()"> <div id="login-form" class="form">
<div class="form-group"> <h3>Login</h3>
<label for="username">Username</label> <fieldset>
<input id="username" class="form-control" type="text" ng-model="username"/> <form ng-submit="login()">
</div> <input id="username" placeholder="Username" class="form-control" type="text" ng-model="username"/>
<div class="form-group"> <input id="password" placeholder="Password" class="form-control" type="password" ng-model="password"/>
<label for="password">Password</label> <button type="submit" class="btn">Submit</button>
<input id="password" class="form-control" type="password" ng-model="password"/> </form>
</div> </fieldset>
<button type="submit" class="btn">Login</button> </div>
</form>

26
public/views/shimapan/register-form.html
View File

@ -1,15 +1,11 @@
<form ng-submit="register()"> <div id="register-form" class="form">
<div class="form-group"> <h3>Register</h3>
<label for="username">Username</label> <fieldset>
<input id="username" class="form-control" type="text" ng-model="username"/> <form ng-submit="register()">
</div> <input id="username" placeholder="Username" class="form-control" type="text" ng-model="username"/>
<div class="form-group"> <input id="password" placeholder="Password" class="form-control" type="password" ng-model="password"/>
<label for="password">Password</label> <input id="invite" placeholder="Invite Code" class="form-control" type="text" ng-model="invite"/>
<input id="password" class="form-control" type="password" ng-model="password"/> <button type="submit" class="btn">Submit</button>
</div> </form>
<div class="form-group"> </fieldset>
<label for="invite">Invite Code</label> </div>
<input id="invite" class="form-control" type="text" ng-model="invite"/>
</div>
<button type="submit" class="btn">Register</button>
</form>