mbk-lab
/
wide
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

🎨 login

This commit is contained in:
Van 2019-05-17 12:02:35 +08:00
parent bc1f8a5853
commit 6bdd404469
No known key found for this signature in database
GPG Key ID: 7059B8783A78F16C
4 changed files with 120 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
static/css/sign.css
View File

@ -23,6 +23,8 @@ body {
.wrapper {
margin: 0 auto;
width: 980px;
display: flex;
align-items: center;
}
.header .logo {
@ -50,7 +52,11 @@ body {
}
.header a:hover {
color: #4183C4;
color: #4285f4;
}
.fn-left {
flex: 1;
}
.content {
@ -74,89 +80,74 @@ body {
}
.content .form {
padding: 24px 15px;
background-color: #fff;
border-radius: 6px;
width: 320px;
margin-top: -18px;
position: relative;
}
.content .form input {
border: 1px solid #ccc;
border-radius: 3px;
width: 100%;
background-color: #fafafa;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset;
color: #333;
min-height: 34px;
outline: medium none;
vertical-align: middle;
font-size: 16px;
border: 1px solid #FFF;
padding: 10px;
margin-top: 20px;
.content a {
color: #4285f4;
}
.content .form input:focus {
background-color: #FFF;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset, 0 0 12px rgba(255, 255, 255, 0.75);
.login__github {
cursor: pointer;
background-image: url("/static/images/github.png");
height: 200px;
width: 200px;
background-size: cover;
margin: 20px auto;
background-position: center center;
}
.login__github:hover {
background-image: url("/static/images/github.gif");
}
.btn {
width: 100%;
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
background-color: #60b044;
background-image: linear-gradient(#8add6d, #60b044);
border: 1px solid #5ca941;
color: #fff !important;
background-color: #2ebc4f;
padding: 10px;
border-radius: 3px;
cursor: pointer;
border: 0;
display: block;
text-align: center;
}
.btn:hover {
background-color: #569e3d;
background-image: linear-gradient(#79d858, #569e3d);
border-color: #4a993e;
text-decoration: none;
background-color: #28a745;
}
.btn.btn-white,
.btn.btn-red {
color: #333;
text-shadow: 0 1px 0 rgba(255,255,255,0.9);
background-color: #eee;
background-image: linear-gradient(#fcfcfc, #eee);
border-color: #d5d5d5;
.btn:focus {
box-shadow: 0 0 0 0.2em rgba(40, 167, 69, .3);
}
.btn.btn-red {
color: #9d0000;
.desc {
color: #6a737d;
font-size: 12px;
}
.btn.btn-white:hover {
color: #333;
text-shadow: 0 1px 0 rgba(255,255,255,0.9);
background-color: #ddd;
background-image: linear-gradient(#eee, #ddd);
border-color: #ccc;
.more-detail {
display: none;
margin: 0 0 8px 60px;
}
.btn.btn-red:hover {
background-color: #b33630;
background-image: linear-gradient(#dc5f59, #b33630);
background-repeat: repeat-x;
border-color: #cd504a;
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
.checkbox {
margin-top: 8px;
display: block;
}
#msg {
background-color: #fcdede;
border: 1px solid #d2b2b2;
padding: 15px;
font-size: 14px;
color: #911;
position: absolute;
width: 100%;
top: -48px;
.view-more {
cursor: pointer;
display: block;
text-align: center;
color: #4285f4;
margin-top: 8px;
}
.footer {
@ -169,7 +160,7 @@ body {
.footer a {
text-decoration: none;
color: #4183c4;
color: #4285f4;
}
.footer a:hover {
@ -185,14 +176,14 @@ body {
/* start sign up */
.dir {
color: #4183c4;
color: #4285f4;
font-size: 18px;
word-wrap: break-word;
margin-top: 20px;
}
#dir {
color: #999;
color: #999;
font-size: 13px;
}
@ -205,4 +196,5 @@ body {
margin-top: 20px;
font-size: 16px;
}
/* end sign up */

BIN
static/images/github.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

BIN
static/images/github.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

110
views/login.html
View File

@ -1,53 +1,77 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{{.i18n.wide}} - {{.i18n.wide_title}}</title>
<head>
<meta charset="UTF-8">
<title>{{.i18n.wide}} - {{.i18n.wide_title}}</title>
<meta name="keywords" content="Wide, Golang, IDE, Team, Cloud, B3log, Login"/>
<meta name="description" content="A Web-based Go IDE , do your development anytime, anywrhere."/>
<meta name="author" content="B3log">
<meta name="keywords" content="Wide, Golang, IDE, Team, Cloud, B3log, Login"/>
<meta name="description" content="A Web-based Go IDE , do your development anytime, anywrhere."/>
<meta name="author" content="B3log">
<link rel="stylesheet" href="/static/css/base.css?{{.conf.StaticResourceVersion}}">
<link rel="stylesheet" href="/static/css/sign.css?{{.conf.StaticResourceVersion}}">
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
</head>
<body>
<div class="header">
<div class="wrapper fn-clear">
<a href="/login" rel="login">
<img title="A Web-based Go IDE" src="/static/images/wide-logo.png" class="logo"/></a>
<ul class="fn-right">
<li><a href="/playground" target="_blank" style="color: #cd504a">Play</a></li>
<li><a rel="bookmark" href="https://github.com/b3log/wide" target="_blank">GitHub</a></li>
<li><a rel="help" href="https://hacpai.com/article/1538873544275" target="_blank">{{.i18n.help}}</a></li>
<li><a rel="bookmark" href="https://github.com/b3log/wide/issues/new" target="_blank">{{.i18n.issues}}</a></li>
</ul>
</div>
<link rel="stylesheet" href="/static/css/base.css?{{.conf.StaticResourceVersion}}">
<link rel="stylesheet" href="/static/css/sign.css?{{.conf.StaticResourceVersion}}">
<link rel="icon" type="image/x-icon" href="/favicon.ico"/>
</head>
<body>
<div class="header">
<div class="wrapper fn-clear">
<a href="/login" rel="login" style="flex:1">
<img title="A Web-based Go IDE" src="/static/images/wide-logo.png" class="logo"/></a>
<ul>
<li><a href="/playground" target="_blank" style="color: #cd504a">Play</a></li>
<li><a rel="bookmark" href="https://github.com/b3log/wide" target="_blank">GitHub</a></li>
<li><a rel="help" href="https://hacpai.com/article/1538873544275" target="_blank">{{.i18n.help}}</a></li>
<li><a rel="bookmark" href="https://github.com/b3log/wide/issues/new" target="_blank">{{.i18n.issues}}</a>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="wrapper fn-clear">
<div class="fn-left">
<h2>Hello, 世界</h2>
<h3>Coding with Go on the Wide way.</h3>
</div>
<div class="content">
<div class="wrapper fn-clear">
<div class="fn-left">
<h2>Hello, 世界</h2>
<h3>Coding with Go on the Wide way.</h3>
<div class="form fn-right">
<form>
<div class="login__github oauth"></div>
<img style="display: none" src="/static/images/github.gif"/>
<button class="btn oauth">登录 GitHub 账号后即可开始使用</button>
<div class="desc">
<div class="view-more" onclick="$(this).next().slideToggle()">查看 GitHub 数据使用说明</div>
<ul class="more-detail">
<li>获取用户名、头像等用于初始化</li>
<li>获取公开仓库信息用于展示</li>
<li>不会对你的已有数据进行写入</li>
</ul>
<label class="checkbox">
<input type="checkbox"/>
是否愿意在 GitHub 上收藏该<a href="https://github.com/b3log/pipe" target="_blank">项目</a>、关注<a
href="https://github.com/88250" target="_blank">开发者</a>并加入 <a
href="https://github.com/b3log" target="_blank">B3log
开源组织</a>
</label>
</div>
<div class="form fn-right">
<div id="msg" class="fn-none"></div>
<form id="loginForm">
<input id="username" name="username" placeholder="Username"/><br/>
<input id="password" name="password" type="password" placeholder="Password"/><br/>
<button id="loginBtn" type="submit" class="btn-white btn">{{.i18n.login}}</button>
</form>
</div>
</div>
</form>
</div>
<div class="footer">
</div>
</div>
<div class="footer">
<span class="wrapper">
Ver {{.ver}}, &copy; {{.year}} <a rel="copyright" href="https://b3log.org" target="_blank">B3LOG.ORG</a>, <a href="https://github.com/b3log/wide/blob/master/TERMS.md" target="_blank">{{.i18n.terms}}</a>
Ver {{.ver}}, &copy; {{.year}} <a rel="copyright" href="https://b3log.org" target="_blank">B3LOG.ORG</a>, <a
href="https://github.com/b3log/wide/blob/master/TERMS.md" target="_blank">{{.i18n.terms}}</a>
</span>
<div class="github-btns">
<iframe src="https://ghbtns.com/github-btn.html?user=b3log&repo=wide&type=star&count=true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
</div>
</div>
</body>
<div class="github-btns">
<iframe src="https://ghbtns.com/github-btn.html?user=b3log&repo=wide&type=star&count=true" frameborder="0"
scrolling="0" width="100" height="20"></iframe>
</div>
</div>
<script type="text/javascript" src="/static/js/lib/jquery-2.1.1.min.js"></script>
<script>
$('.oauth').click(function () {
window.location.href = '/oauth/github/redirect?referer=' + document.referrer + '__' +
($('input').prop('checked') ? '0' : '1')
})
</script>
</body>
</html>