foltik
/
shimapan
mirror of https://github.com/Foltik/Shimapan
1
0
Fork 0
Code Issues 0 Releases 0 Wiki Activity
Browse Source

Style login and register pages

pull/1/head
Jack 6 years ago
parent
68969a4a49
commit
a1ffcfc395
Signed by: foltik <jack@foltz.io> GPG Key ID: 303F88F996E95541
5 changed files with 111 additions and 31 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +83
    -0
      public/css/form.css
  2. +5
    -4
      public/views/login.html
  3. +2
    -1
      public/views/register.html
  4. +10
    -11
      public/views/shimapan/login-form.html
  5. +11
    -15
      public/views/shimapan/register-form.html

+ 83
- 0
public/css/form.css 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;
}

+ 5
- 4
public/views/login.html View File

@@ -2,9 +2,10 @@
<html lang="en">
<head>
<meta charset="utf-8"/>
<base href="/login"/>
<title>Login</title>

<link href="/css/form.css" type="text/css" rel="stylesheet"/>

<script src="/libs/angular/angular.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>
@@ -13,8 +14,8 @@
<script src="/libs/app/shimapan.min.js"></script>
</head>
<body ng-app="shimapan">
<div id="container">
<login-component></login-component>
</div>
<div id="container">
<login-component></login-component>
</div>
</body>
</html>

+ 2
- 1
public/views/register.html View File

@@ -2,9 +2,10 @@
<html lang="en">
<head>
<meta charset="utf-8"/>
<base href="/register"/>
<title>Register</title>

<link href="/css/form.css" type="text/css" rel="stylesheet"/>

<script src="/libs/angular/angular.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>


+ 10
- 11
public/views/shimapan/login-form.html View File

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

+ 11
- 15
public/views/shimapan/register-form.html View File

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

Write Preview
Loading…
Cancel
Save