| ... | ... |
@@ -7,3 +7,9 @@ border color gray:#ccc |
| 7 | 7 |
background blue:#e6f1f6 |
| 8 | 8 |
text shallow gray:#999; |
| 9 | 9 |
background dark-blue:#4183C4 |
| 10 |
+ |
|
| 11 |
+------------------------------- |
|
| 12 |
+background gray2:#6c8393; |
|
| 13 |
+border gray2 #586873; |
|
| 14 |
+border sallow gray2 #d8dee2; |
|
| 15 |
+-------------------------------- |
| ... | ... |
@@ -67,7 +67,7 @@ sub startup {
|
| 67 | 67 |
# Start |
| 68 | 68 |
$r->any('/_start')->to('#start');
|
| 69 | 69 |
|
| 70 |
- # Login |
|
| 70 |
+ # Sign in |
|
| 71 | 71 |
$r->any('/_login')->to('#login');
|
| 72 | 72 |
|
| 73 | 73 |
# Admin |
| ... | ... |
@@ -74,37 +74,73 @@ |
| 74 | 74 |
%> |
| 75 | 75 |
|
| 76 | 76 |
%= stylesheet begin |
| 77 |
- .error {
|
|
| 77 |
+ .signin {
|
|
| 78 |
+ width:350px; |
|
| 78 | 79 |
margin-left:auto; |
| 79 | 80 |
margin-right:auto; |
| 80 |
- width:300px; |
|
| 81 |
+ } |
|
| 82 |
+ .signin .sheader {
|
|
| 83 |
+ margin-top:50px; |
|
| 84 |
+ background-color:#6c8393; |
|
| 85 |
+ padding:15px; |
|
| 86 |
+ border:1px solid #586873; |
|
| 87 |
+ border-bottom:1px solid #6c8393; |
|
| 88 |
+ border-top-left-radius:5px; |
|
| 89 |
+ border-top-right-radius:5px; |
|
| 90 |
+ color:white; |
|
| 91 |
+ font-weight:bold; |
|
| 92 |
+ } |
|
| 93 |
+ .signin .serror {
|
|
| 81 | 94 |
color:red; |
| 82 | 95 |
margin-bottom:10px; |
| 83 | 96 |
} |
| 84 |
- .account_panel {
|
|
| 85 |
- margin-top:50px; |
|
| 97 |
+ .signin .sbody {
|
|
| 86 | 98 |
margin-left:auto; |
| 87 | 99 |
margin-right:auto; |
| 88 |
- width:500px; |
|
| 89 |
- background-color:#e6f1f6; |
|
| 90 |
- padding:30px; |
|
| 91 |
- border:1px solid #c5d5dd; |
|
| 92 |
- border-radius:7px; |
|
| 100 |
+ margin-bottom:10px; |
|
| 101 |
+ border:1px solid #d8dee2; |
|
| 102 |
+ border-top:none; |
|
| 103 |
+ border-bottom-left-radius:5px; |
|
| 104 |
+ border-bottom-right-radius:5px; |
|
| 105 |
+ padding:20px 20px; |
|
| 93 | 106 |
} |
| 94 |
- .account {
|
|
| 95 |
- margin-left:auto; |
|
| 96 |
- margin-right:auto; |
|
| 97 |
- width:300px; |
|
| 107 |
+ .signin .suser_header {
|
|
| 108 |
+ font-weight:bold; |
|
| 109 |
+ margin-bottom:5px; |
|
| 110 |
+ } |
|
| 111 |
+ .signin .suser {
|
|
| 112 |
+ background-color:white; |
|
| 113 |
+ border:1px solid #d8dee2; |
|
| 114 |
+ width:100%; |
|
| 115 |
+ height:25px; |
|
| 116 |
+ border-radius:3px; |
|
| 98 | 117 |
margin-bottom:10px; |
| 118 |
+ display:block; |
|
| 99 | 119 |
} |
| 100 |
- .account_panel .atitle {
|
|
| 101 |
- font-size:130%; |
|
| 102 |
- maring-top:30px; |
|
| 120 |
+ .signin .spassword_header {
|
|
| 121 |
+ font-weight:bold; |
|
| 122 |
+ padding-bottom:5px; |
|
| 123 |
+ } |
|
| 124 |
+ .signin .spassword {
|
|
| 125 |
+ background-color:white; |
|
| 126 |
+ border:1px solid #d8dee2; |
|
| 127 |
+ width:100%; |
|
| 128 |
+ height:25px; |
|
| 129 |
+ border-radius:3px; |
|
| 130 |
+ margin-bottom:10px; |
|
| 131 |
+ display:block; |
|
| 103 | 132 |
} |
| 104 |
- .submit {
|
|
| 133 |
+ .signin .ssubmit {
|
|
| 134 |
+ display:block; |
|
| 135 |
+ background-color:#EEE; |
|
| 136 |
+ border:1px solid #d8dee2; |
|
| 105 | 137 |
text-align:center; |
| 138 |
+ height:35px; |
|
| 139 |
+ width:60px; |
|
| 140 |
+ border-radius:4px; |
|
| 141 |
+ cursor:pointer; |
|
| 106 | 142 |
} |
| 107 |
- .submit input {
|
|
| 143 |
+ .signin .submit input {
|
|
| 108 | 144 |
width:150px; |
| 109 | 145 |
height:40px; |
| 110 | 146 |
} |
| ... | ... |
@@ -120,26 +156,22 @@ |
| 120 | 156 |
% } |
| 121 | 157 |
|
| 122 | 158 |
% if ($state eq 'start' || $state eq 'error') {
|
| 123 |
- <div class="account_panel"> |
|
| 124 |
- % if ($state eq 'error') {
|
|
| 125 |
- <div class="error"> |
|
| 126 |
- User id or passowrd is invalid. |
|
| 127 |
- </div> |
|
| 128 |
- % } |
|
| 129 |
- <form action="<%= url_for->query(op => 'login') %>" method="post"> |
|
| 130 |
- <div class="account"> |
|
| 131 |
- <table> |
|
| 132 |
- <tr class="auser"> |
|
| 133 |
- <td>User: </td> |
|
| 134 |
- <td><%= input_tag id => $id %></td> |
|
| 135 |
- </tr> |
|
| 136 |
- <tr class="apassword"> |
|
| 137 |
- <td>Password: </td> |
|
| 138 |
- <td><%= password_field 'password' %></td> |
|
| 139 |
- </tr> |
|
| 140 |
- </table> |
|
| 141 |
- </div> |
|
| 142 |
- <div class="submit"><input type="submit" value="Login"></div> |
|
| 143 |
- </form> |
|
| 144 |
- </div> |
|
| 159 |
+ <div class="signin"> |
|
| 160 |
+ <div class="sheader"> |
|
| 161 |
+ Sing in |
|
| 162 |
+ </div> |
|
| 163 |
+ <div class="sbody"> |
|
| 164 |
+ % if ($state eq 'error') {
|
|
| 165 |
+ <div class="serror"> |
|
| 166 |
+ Incorrect username or password. |
|
| 167 |
+ </div> |
|
| 168 |
+ % } |
|
| 169 |
+ <form action="<%= url_for->query(op => 'login') %>" method="post"> |
|
| 170 |
+ <div class="suser_header">Username</div> |
|
| 171 |
+ <%= input_tag id => $id, class => 'suser' %> |
|
| 172 |
+ <div class="spassword_header">Password</div> |
|
| 173 |
+ <%= password_field 'password', class => 'spassword' %> |
|
| 174 |
+ <input class="ssubmit" type="submit" value="Sign in"> |
|
| 175 |
+ </form> |
|
| 176 |
+ </div> |
|
| 145 | 177 |
% } |