🎨 login
This commit is contained in:
Van
parent
bc1f8a5853
commit
6bdd404469
|
|
@ -23,6 +23,8 @@ body {
|
||||||
.wrapper {
|
.wrapper {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
width: 980px;
|
width: 980px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header .logo {
|
.header .logo {
|
||||||
|
|
@ -50,7 +52,11 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.header a:hover {
|
.header a:hover {
|
||||||
color: #4183C4;
|
color: #4285f4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fn-left {
|
||||||
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
|
|
@ -74,89 +80,74 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.content .form {
|
.content .form {
|
||||||
|
padding: 24px 15px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 6px;
|
||||||
width: 320px;
|
width: 320px;
|
||||||
margin-top: -18px;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content .form input {
|
.content a {
|
||||||
border: 1px solid #ccc;
|
color: #4285f4;
|
||||||
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 .form input:focus {
|
|
||||||
background-color: #FFF;
|
.login__github {
|
||||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset, 0 0 12px rgba(255, 255, 255, 0.75);
|
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 {
|
.btn {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
color: #fff;
|
color: #fff !important;
|
||||||
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
|
background-color: #2ebc4f;
|
||||||
background-color: #60b044;
|
|
||||||
background-image: linear-gradient(#8add6d, #60b044);
|
|
||||||
border: 1px solid #5ca941;
|
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
border: 0;
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn:hover {
|
.btn:hover {
|
||||||
background-color: #569e3d;
|
text-decoration: none;
|
||||||
background-image: linear-gradient(#79d858, #569e3d);
|
background-color: #28a745;
|
||||||
border-color: #4a993e;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn.btn-white,
|
.btn:focus {
|
||||||
.btn.btn-red {
|
box-shadow: 0 0 0 0.2em rgba(40, 167, 69, .3);
|
||||||
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.btn-red {
|
.desc {
|
||||||
color: #9d0000;
|
color: #6a737d;
|
||||||
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn.btn-white:hover {
|
.more-detail {
|
||||||
color: #333;
|
display: none;
|
||||||
text-shadow: 0 1px 0 rgba(255,255,255,0.9);
|
margin: 0 0 8px 60px;
|
||||||
background-color: #ddd;
|
|
||||||
background-image: linear-gradient(#eee, #ddd);
|
|
||||||
border-color: #ccc;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn.btn-red:hover {
|
.checkbox {
|
||||||
background-color: #b33630;
|
margin-top: 8px;
|
||||||
background-image: linear-gradient(#dc5f59, #b33630);
|
display: block;
|
||||||
background-repeat: repeat-x;
|
|
||||||
border-color: #cd504a;
|
|
||||||
color: #fff;
|
|
||||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#msg {
|
.view-more {
|
||||||
background-color: #fcdede;
|
cursor: pointer;
|
||||||
border: 1px solid #d2b2b2;
|
display: block;
|
||||||
padding: 15px;
|
text-align: center;
|
||||||
font-size: 14px;
|
color: #4285f4;
|
||||||
color: #911;
|
margin-top: 8px;
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
top: -48px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
|
|
@ -169,7 +160,7 @@ body {
|
||||||
|
|
||||||
.footer a {
|
.footer a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #4183c4;
|
color: #4285f4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer a:hover {
|
.footer a:hover {
|
||||||
|
|
@ -185,7 +176,7 @@ body {
|
||||||
|
|
||||||
/* start sign up */
|
/* start sign up */
|
||||||
.dir {
|
.dir {
|
||||||
color: #4183c4;
|
color: #4285f4;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
|
|
@ -205,4 +196,5 @@ body {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* end sign up */
|
/* end sign up */
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
|
|
@ -1,6 +1,6 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>{{.i18n.wide}} - {{.i18n.wide_title}}</title>
|
<title>{{.i18n.wide}} - {{.i18n.wide_title}}</title>
|
||||||
|
|
||||||
|
|
@ -10,44 +10,68 @@
|
||||||
|
|
||||||
<link rel="stylesheet" href="/static/css/base.css?{{.conf.StaticResourceVersion}}">
|
<link rel="stylesheet" href="/static/css/base.css?{{.conf.StaticResourceVersion}}">
|
||||||
<link rel="stylesheet" href="/static/css/sign.css?{{.conf.StaticResourceVersion}}">
|
<link rel="stylesheet" href="/static/css/sign.css?{{.conf.StaticResourceVersion}}">
|
||||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
<link rel="icon" type="image/x-icon" href="/favicon.ico"/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="wrapper fn-clear">
|
<div class="wrapper fn-clear">
|
||||||
<a href="/login" rel="login">
|
<a href="/login" rel="login" style="flex:1">
|
||||||
<img title="A Web-based Go IDE" src="/static/images/wide-logo.png" class="logo"/></a>
|
<img title="A Web-based Go IDE" src="/static/images/wide-logo.png" class="logo"/></a>
|
||||||
<ul class="fn-right">
|
<ul>
|
||||||
<li><a href="/playground" target="_blank" style="color: #cd504a">Play</a></li>
|
<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="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="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>
|
<li><a rel="bookmark" href="https://github.com/b3log/wide/issues/new" target="_blank">{{.i18n.issues}}</a>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="wrapper fn-clear">
|
<div class="wrapper fn-clear">
|
||||||
<div class="fn-left">
|
<div class="fn-left">
|
||||||
<h2>Hello, 世界</h2>
|
<h2>Hello, 世界</h2>
|
||||||
<h3>Coding with Go on the Wide way.</h3>
|
<h3>Coding with Go on the Wide way.</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="form fn-right">
|
<div class="form fn-right">
|
||||||
<div id="msg" class="fn-none"></div>
|
<form>
|
||||||
<form id="loginForm">
|
<div class="login__github oauth"></div>
|
||||||
<input id="username" name="username" placeholder="Username"/><br/>
|
<img style="display: none" src="/static/images/github.gif"/>
|
||||||
<input id="password" name="password" type="password" placeholder="Password"/><br/>
|
<button class="btn oauth">登录 GitHub 账号后即可开始使用</button>
|
||||||
<button id="loginBtn" type="submit" class="btn-white btn">{{.i18n.login}}</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>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<span class="wrapper">
|
<span class="wrapper">
|
||||||
Ver {{.ver}}, © {{.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}}, © {{.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>
|
</span>
|
||||||
<div class="github-btns">
|
<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>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
<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>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue