brand-new landing page

This commit is contained in:
printempw 2016-12-11 15:17:24 +08:00
parent a858456d38
commit 5370e4904c
5 changed files with 221 additions and 70 deletions

View File

@ -2,7 +2,7 @@
* @Author: printempw
* @Date: 2016-06-04 20:54:53
* @Last Modified by: printempw
* @Last Modified time: 2016-08-07 11:26:30
* @Last Modified time: 2016-12-11 15:10:01
*/
@import "style.scss";
@ -18,51 +18,74 @@ body {
background-repeat: no-repeat;
background-position: center 0;
.main-header {
background-color: rgba(255, 255, 255, 0.2);
.main-header .navbar {
transition: color 0.25s ease-in-out,
border-color 0.25s ease-in-out,
background-color 0.25s ease-in-out;
}
.main-header .navbar-brand {
color: #5e5e5e;
font-family: Minecraft, 'Segoe UI', 'Microsoft Yahei', 'Microsoft Jhenghei', sans-serif;
border-right: 0;
}
.main-header .navbar .navbar-nav {
li {
a {
border: 0;
color: #5e5e5e;
}
a:hover {
background: rgba(0,0,0,0.1);
color: #f6f6f6;
}
.active > a {
background: rgba(0,0,0,0.1);
color: #f6f6f6;
}
}
.user-menu .user-image {
border-radius: 10%;
}
}
.main-header .navbar .navbar-custom-menu .navbar-nav > li {
a {
border-left: 0;
.main-header.transparent {
.navbar-brand {
color: #5e5e5e;
}
.navbar-header > a {
color: #5e5e5e;
}
.navbar {
background-color: rgba(255, 255, 255, 0.2);
.navbar-nav {
li {
a {
border: 0;
color: #5e5e5e;
}
a:hover {
background: rgba(0,0,0,0.1);
color: #f6f6f6;
}
.active > a {
background: rgba(0,0,0,0.1);
color: #f6f6f6;
}
}
}
.navbar-custom-menu .navbar-nav > li {
a.btn {
background-color: #0078e7;
border: 1px solid #0078e7;
}
}
}
.nickname {
color: #5e5e5e;
}
}
.navbar {
background-color: rgba(255, 255, 255, 0.2);
}
.navbar-header > a {
color: #5e5e5e;
.main-header .navbar .navbar-custom-menu .navbar-nav > li {
a.btn {
border-radius: 5px;
background: transparent;
border: 1px solid #fff;
}
}
.content-wrapper {
@ -85,10 +108,6 @@ body {
}
.nickname {
color: #5e5e5e;
}
.splash-button {
color: white;
padding: 0.8em 2.5em;
@ -196,3 +215,70 @@ body {
.container .button:hover {
background-color: rgba(255, 255, 255, 0.2);
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
.wrapper {
width: 100%;
}
/* ==========================================================================
Wrap Sections
========================================================================== */
/* intro Wrap */
#intro {
padding: 50px 0 50px;
border-top: #bdc3c7 solid 5px;
i {
font-size: 80px;
}
.col-lg-4 {
margin: 10px 0 50px;
}
@media (min-width: 1200px) {
.col-lg-4 {
margin: 10px 0 20px;
}
}
}
#footerwrap {
background-color: #2f2f2f;
color: white;
padding: 40px 0 50px;
text-align: left;
.col-lg-6:last-child {
text-align: center;
padding-top: 50px;
}
@media (min-width: 1200px) {
.col-lg-6:last-child {
text-align: right;
padding-top: 20px;
}
}
}
/* Copyright Wrap */
#copyright {
border-top: #2f2f2f solid 5px;
background: #222222;
padding: 16px 0 20px;
color: white
}

View File

@ -2,7 +2,7 @@
* @Author: printempw
* @Date: 2016-06-04 20:55:09
* @Last Modified by: printempw
* @Last Modified time: 2016-11-17 15:06:31
* @Last Modified time: 2016-12-11 14:07:33
*/
$font_stack: Ubuntu, 'Segoe UI', 'Microsoft Yahei', 'Microsoft Jhenghei', sans-serif;
@ -203,6 +203,11 @@ input:-webkit-autofill {
color: #333;
}
}
/* hide the text on mobile phone pages */
.description-text {
display: none;
}
}
.key {

View File

@ -12,10 +12,11 @@
</head>
<body class="hold-transition {{ option('color_scheme') }} layout-top-nav">
<div class="wrapper" style="background-image: url('{{ option('home_pic_url') }}');">
<header class="main-header">
<nav class="navbar navbar-static-top">
<div class="wrapper" style="background-image: url('{{ option('home_pic_url') }}');">
<!-- Navigation -->
<header class="main-header transparent">
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="{{ option('site_url') }}" class="navbar-brand">{{ option('site_name') }}</a>
@ -29,13 +30,13 @@
<ul class="nav navbar-nav">
<li class="active"><a href="{{ url('/') }}">{{ trans('general.index') }}</a></li>
<li><a href="{{ url('skinlib') }}">{{ trans('general.skinlib') }}</a></li>
@include('vendor.language')
</ul>
</div><!-- /.navbar-collapse -->
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
@include('vendor.language')
@if (!is_null($user))
<!-- User Account Menu -->
<li class="dropdown user user-menu">
@ -75,42 +76,92 @@
</nav>
</header>
<!-- Full Width Column -->
<div class="content-wrapper">
<div class="container">
<div class="splash">
<h1 class="splash-head">{{ option('site_name') }}</h1>
<p class="splash-subhead">
{{ option('site_description') }}
</p>
<p>
@if (is_null($user))
@if (option('user_can_register'))
<a href="{{ url('auth/register') }}" id="btn-register" class="button">{{ trans('general.register') }}</a>
@else
<a href="{{ url('auth/login') }}" id="btn-close-register" class="button">{{ trans('general.login') }}</a>
@endif
<div class="container">
<div class="splash">
<h1 class="splash-head">{{ option('site_name') }}</h1>
<p class="splash-subhead">
{{ option('site_description') }}
</p>
<p>
@if (is_null($user))
@if (option('user_can_register'))
<a href="{{ url('auth/register') }}" id="btn-register" class="button">{{ trans('general.register') }}</a>
@else
<a href="{{ url('user') }}" class="button">{{ trans('general.user-center') }}</a>
<a href="{{ url('auth/login') }}" id="btn-close-register" class="button">{{ trans('general.login') }}</a>
@endif
</p>
@else
<a href="{{ url('user') }}" class="button">{{ trans('general.user-center') }}</a>
@endif
</p>
</div>
</div> <!--/ .container -->
</div><!--/ #headerwrap -->
<!-- INTRO WRAP -->
<div id="intro">
<div class="container">
<div class="row text-center">
<h1>Features</h1>
<br>
<br>
<div class="col-lg-4">
<i class="fa fa-users" aria-hidden="true"></i>
<h3>多角色</h3>
<p>一个账户可绑定多个游戏角色</p>
</div>
<div class="col-lg-4">
<i class="fa fa-share-alt" aria-hidden="true"></i>
<h3>分享</h3>
<p>浏览皮肤库,添加喜爱的皮肤并与好友分享</p>
</div>
<div class="col-lg-4">
<i class="fa fa-cloud" aria-hidden="true"></i>
<h3>永久免费</h3>
<p>我们承诺永不收取任何费用</p>
</div>
</div>
</div><!-- /.content-wrapper -->
<br>
</div> <!--/ .container -->
</div><!--/ #introwrap -->
<!-- Main Footer -->
<footer class="main-footer">
<div class="container text-center">
{!! bs_copyright() !!}
<div id="footerwrap">
<div class="container">
<div class="col-lg-6">
{{ option('site_name') }} 提供 Minecraft 角色皮肤的上传以及托管服务。配合 CustomSKinLoader 等换肤 MOD您可以为您的游戏角色设置皮肤与披风并让其他玩家在游戏中看到。
</div>
</footer>
</div><!-- ./wrapper -->
<div class="col-lg-6">
<a href="{{ url('auth/register') }}" id="btn-register" class="button">开始使用</a>
</div>
</div>
</div>
<div id="copyright">
<!-- Designed by Pratt -->
<div class="container">
<!-- YOU CAN NOT MODIFIY THE COPYRIGHT TEXT W/O PERMISSION -->
<div class="pull-right hidden-xs">
Powered by <a href="https://github.com/printempw/blessing-skin-server">Blessing Skin Server</a>.
</div>
<!-- Default to the left -->
{!! bs_copyright() !!}
</div>
</div>
<!-- App Scripts -->
{!! bs_footer() !!}
<!-- Quick fix for logging out at homepage when installed to a subdir -->
<script>base_url = ".";</script>
<script>
var changeWrapperHeight = function() { $('.wrapper').height($(window).height()) };
$(document).ready(changeWrapperHeight);
$(window).resize(changeWrapperHeight).scroll(function(event) {
// change color of the navigation bar when scrolling
if (document.body.scrollTop >= ($(window).height() * 2 / 3)) {
$('.main-header').removeClass('transparent');
} else {
$('.main-header').addClass('transparent');
}
});
</script>
</body>
</html>

View File

@ -63,8 +63,6 @@
</ul>
</li>
@endunless
@include('vendor.language')
</ul>
<form class="navbar-form navbar-left" role="search" action="{{ url('skinlib/search') }}">
<div class="form-group">
@ -75,7 +73,10 @@
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li><a href="{{ url('skinlib/upload') }}"><i class="fa fa-upload" aria-hidden="true"></i> {{ trans('skinlib.general.upload-new-skin') }}</a></li>
<li><a href="{{ url('skinlib/upload') }}"><i class="fa fa-upload" aria-hidden="true"></i> <span class="description-text">{{ trans('skinlib.general.upload-new-skin') }}</span></a></li>
@include('vendor.language')
@if (!is_null($user))
<!-- User Account Menu -->
<li class="dropdown user user-menu">
@ -140,5 +141,11 @@
{!! bs_footer('skinlib') !!}
@yield('script')
<script>
if ($('.navbar').height() > 50) {
$('.description-text').hide();
}
</script>
</body>
</html>

View File

@ -1,7 +1,9 @@
<!-- Language Menu -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-language" aria-hidden="true"></i> Language <span class="caret"></span>
<i class="fa fa-language" aria-hidden="true"></i>
<span class="description-text">Language</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
@foreach(config('locales') as $locale => $lang)