leanote/desktop-app
1
0
Fork 0
mirror of https://github.com/leanote/desktop-app.git synced 2025-10-15 15:41:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

login界面美化

Browse Source
This commit is contained in:
life
2015-03-05 00:22:32 +08:00
parent 9681486db2
commit d2211bc482
5 changed files with 202 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
login.html
View File

@@ -12,32 +12,36 @@
<link href="public/css/bootstrap.css" rel="stylesheet">
<link href="public/css/font-awesome-4.2.0/css/font-awesome.css" rel="stylesheet">
<link href="public/css/index.css" rel="stylesheet">
<style>
html, body {
height: 100%;
}
</style>
</head>
<body id="boxBody">
<section id="box" class="animated fadeInUp">
<div id="container">
<!-- 关闭, 最小化, 最大 -->
<div id="winTool" class="win-tool clearfix">
<a class="tool-close"></a>
</div>
<section id="box" class="animated fadeInUp">
<div>
<h1 id="logo">
<img src="public/images/logo/leanote_icon_blue.png" style="width: 60px">
<a onclick="openExternal('http://leanote.com')" title="leanote">
<img src="public/images/logo/leanote_icon_blue.png">
</a>
</h1>
<div id="boxForm">
<form>
<div class="alert alert-danger" id="loginMsg"></div>
<input id="from" type="hidden" value="" />
<div class="form-group">
<input type="text" placeholder="Email" class="form-control" id="email" name="email" value="">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control" id="pwd" name="pwd">
<div id="formContainer">
<div class="form-group form-group-1">
<input type="text" placeholder="Email" class="form-control" id="email" name="email" value="">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control" id="pwd" name="pwd">
</div>
</div>
<div class="clearfix btns">
<a href="/findPassword" class="pull-right m-t-xs"><small>Forget password?</small></a>
<a href="/findPassword" class="pull-right m-t-xs" style="margin-right: 10px"><small>Sign up</small></a>
<a onclick="openExternal('http://leanote.com/findPassword')" class="pull-right m-t-xs"><small>Forget password?</small></a>
<a onclick="openExternal('http://leanote.com/register')" class="pull-right m-t-xs" style="margin-right: 10px"><small>Sign up</small></a>
<button id="loginBtn" class="btn btn-success" style="visibility: hidden">Sign in</button>
</div>
</form>
@@ -65,21 +69,21 @@ $(function() {
function hideMsg() {
$("#loginMsg").hide();
}
$("#loginBtn").click(function(e){
e.preventDefault();
$("#loginBtn").click(function(e) {
e.preventDefault();
var email = $("#email").val();
var pwd = $("#pwd").val();
var captcha = $("#captcha").val()
if(!email) {
showMsg("请输入用户名", "email");
showMsg("Email is required", "email");
return;
}
if(!pwd) {
showMsg("请输入密码", "pwd");
showMsg("Password is required", "pwd");
return;
} else {
if(pwd.length < 6) {
showMsg("密码有误", "pwd");
showMsg("Email or Password Error", "pwd");
return;
}
}
@@ -92,7 +96,7 @@ $(function() {
$("#loginBtn").html("Success...");
location.href = 'index.html';
} else {
showMsg("Email or Password error");
showMsg("Email or Password Error");
}
});
});
@@ -100,8 +104,16 @@ $(function() {
var gui = require('nw.gui');
var win = gui.Window.get();
win.resizeTo(400, 300);
win.resizeTo(258, 326);
win.setPosition('center');
$('body').on('keydown', function(e) {
commonCmd(e);
});
</script>
</div>
</body>
</html>

84
public/css/index.css
View File

@@ -81,7 +81,6 @@ a:hover {
margin-top: 60px;
}
section {
background-color: #fff;
color: #e2f3e5;
margin-top: 60px;
}
@@ -234,10 +233,17 @@ section {
#loginContainer {
position: relative;
}
#formContainer {
border-radius: 2px !important;
border: 1px solid #d9d9d9;
overflow: hidden;
}
#formContainer .form-group-1 {
border-bottom: 1px solid #d9d9d9;
}
input,
.form-control {
border-radius: 2px !important;
border-color: #d9d9d9;
border: none;
height: 40px;
padding: 10px 16px;
}
@@ -281,25 +287,15 @@ input,
#footer #beian a {
font-size: 8px;
}
#aboutLeanote h2 {
margin: 20px 0;
text-align: center;
}
#aboutLeanote {
padding: 30px;
}
#boxBody {
background-color: #fff;
}
#box {
margin: 0;
color: #000;
padding-top: 30px;
padding-top: 40px;
}
#box h1 {
margin: auto;
margin-bottom: 20px;
width: 500px;
margin-bottom: 30px;
width: 316px;
color: #eee;
}
#logo {
@@ -317,7 +313,7 @@ input,
font-size: 16px;
}
#boxForm {
width: 500px;
width: 316px;
margin: auto;
border-radius: 2px;
width: 200px;
@@ -339,7 +335,7 @@ input,
color: #eee;
}
#quickLinks {
width: 500px;
width: 316px;
margin: auto;
text-align: right;
}
@@ -470,7 +466,7 @@ input,
margin-left: 10px;
}
#errorBox {
width: 500px;
width: 316px;
margin: auto;
padding: 20px 30px;
padding-bottom: 30px;
@@ -678,3 +674,53 @@ input,
.alert {
padding: 3px;
}
html {
background: transparent;
border-radius: 5px;
}
body {
-webkit-app-region: drag;
position: relative;
background-color: transparent;
}
body #container {
position: relative;
margin: 5px;
width: 248px;
height: 316px;
background-color: rgba(247, 249, 250, 0.99);
border-radius: 5px;
border: 1px solid #eee;
-webkit-user-select: none;
box-shadow: 0px 0px 5px rgba(66, 66, 66, 0.5);
}
#box h1 {
width: 248px;
}
#box h1 img {
width: 100px;
border: 1px solid #4092C5;
border-radius: 50%;
padding: 20px;
}
.win-tool {
padding: 5px;
position: absolute;
left: 0;
top: 0;
z-index: 99999;
}
.win-tool a {
display: block;
float: left;
width: 14px;
height: 14px;
background-size: 14px 14px !important;
margin-right: 5px;
}
.win-tool .tool-close {
background: url(icon/traffic-close@2x.png);
}
.win-tool:hover .tool-close {
background: url(icon/traffic-close-hover@2x.png);
}

101
public/css/index.less
View File

@@ -97,7 +97,7 @@ a:hover {
margin-top: @headerHeight;
}
section {
background-color: #fff;
// background-color: #fff;
color: #e2f3e5;
margin-top: @headerHeight;
}
@@ -261,9 +261,17 @@ section {
position: relative;
}
input, .form-control {
#formContainer {
border-radius: 2px !important;
border-color: #d9d9d9;
border: 1px solid #d9d9d9;
overflow: hidden;
.form-group-1 {
border-bottom: 1px solid #d9d9d9;
}
}
input, .form-control {
border: none;
height: 40px;
padding: 10px 16px;
}
@@ -319,27 +327,19 @@ input, .form-control {
}
}
}
#aboutLeanote h2 {
margin: 20px 0;
text-align: center;
}
#aboutLeanote {
padding: 30px;
}
//-------------
#boxBody {
background-color: #fff;
}
@boxWidth: 500px;
@boxWidth: 316px;
#box {
margin: 0;
color: #000;
padding-top: 30px;
padding-top: 40px;
h1 {
width: @boxWidth;;
margin: auto;
margin-bottom: 20px;
margin-bottom: 30px;
width: @boxWidth;;
color: #eee;
}
@@ -766,4 +766,71 @@ input, .form-control {
}
.alert {
padding: 3px;
}
}
html {
background: transparent;
border-radius: 5px;
// width: 258px;
// height: 326px;
}
body {
-webkit-app-region: drag;
position: relative;
background-color: transparent;
// width: 248px;
// height: 316px;
#container {
position: relative;
margin: 5px;
// margin-top: 0;
// left: 5px;
// right: 5px;
// bottom: 5px;
// padding: 5px;
// padding-top: 0;
width: 248px;
height: 316px;
background-color: rgba(247,249,250,0.99);
border-radius: 5px;
border: 1px solid #eee;
-webkit-user-select: none; // input, textarea还是可以选择的
// box-shadow: 0 0 50px #eee;
// box-shadow: 0px 0px 5px #666;
box-shadow: 0px 0px 5px rgba(66, 66, 66, 0.5);
}
}
#box h1 {
width: 248px;
img {
width: 100px;
border: 1px solid #4092C5;
border-radius: 50%;
padding: 20px;
}
}
.win-tool {
// height: 14px;
padding: 5px;
position: absolute;
left: 0;
top: 0;
z-index: 99999;
a {
display: block;
float: left;
width: 14px;
height: 14px;
background-size: 14px 14px !important;
margin-right: 5px;
}
.tool-close {
background: url(icon/traffic-close@2x.png);
}
&:hover {
.tool-close {
background: url(icon/traffic-close-hover@2x.png);
}
}
}

4
public/js/app/page.js
View File

@@ -1551,7 +1551,9 @@ function userMenu() {
this.switchAccount = new gui.MenuItem({
label: 'Switch account',
click: function(e) {
location.href = 'login.html';
window.open('login.html');
win.close();
// location.href = 'login.html';
}
});
this.theme = new gui.MenuItem({

16
public/js/common.js
View File

@@ -1383,4 +1383,20 @@ var ContextTips = {
}
};
function commonCmd(e) {
var num = e.which ? e.which : e.keyCode;
// copy, paste
if(e.ctrlKey || e.metaKey) {
if(num == 67) { // ctrl + c
document.execCommand('copy');
} else if(num == 86) { // ctrl + v
document.execCommand('paste');
} else if(num == 65) { // ctrl + a
document.execCommand('selectAll');
} else if(num == 88) { // ctrl + x
document.execCommand('cut');
}
}
};
ContextTips.init();