🎨 login
This commit is contained in:
Van
parent
bc1f8a5853
commit
6bdd404469
|
|
@ -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,7 +176,7 @@ body {
|
|||
|
||||
/* start sign up */
|
||||
.dir {
|
||||
color: #4183c4;
|
||||
color: #4285f4;
|
||||
font-size: 18px;
|
||||
word-wrap: break-word;
|
||||
margin-top: 20px;
|
||||
|
|
@ -205,4 +196,5 @@ body {
|
|||
margin-top: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* end sign up */
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
|
|
@ -15,13 +15,14 @@
|
|||
<body>
|
||||
<div class="header">
|
||||
<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>
|
||||
<ul class="fn-right">
|
||||
<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>
|
||||
<li><a rel="bookmark" href="https://github.com/b3log/wide/issues/new" target="_blank">{{.i18n.issues}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -32,22 +33,45 @@
|
|||
<h3>Coding with Go on the Wide way.</h3>
|
||||
</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 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>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue