brand-new landing page

resources/assets/src/sass/index.scss

@@ -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 {
+    .main-header .navbar {
-        background-color: rgba(255, 255, 255, 0.2);
+        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 {
+    .main-header.transparent {
-        a {
+        .navbar-brand {
-            border-left: 0;
+            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 {
+    .main-header .navbar .navbar-custom-menu .navbar-nav > li {
-        background-color: rgba(255, 255, 255, 0.2);
+        a.btn {
-    }
+            border-radius: 5px;
-
+                    background: transparent;
-    .navbar-header > a {
+                    border: 1px solid #fff;
-        color: #5e5e5e;
+        }
     }
 
     .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
+}

resources/assets/src/sass/style.scss

@@ -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 {

resources/views/index.tpl

@@ -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">
+    <div class="wrapper" style="background-image: url('{{ option('home_pic_url') }}');">
-            <nav class="navbar navbar-static-top">
+        <!-- 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="container">
-        <div class="content-wrapper">
+            <div class="splash">
-            <div class="container">
+                <h1 class="splash-head">{{ option('site_name') }}</h1>
-                <div class="splash">
+                <p class="splash-subhead">
-                    <h1 class="splash-head">{{ option('site_name') }}</h1>
+                    {{ option('site_description') }}
-                    <p class="splash-subhead">
+                </p>
-                        {{ option('site_description') }}
+                <p>
-                    </p>
+                    @if (is_null($user))
-                    <p>
+                        @if (option('user_can_register'))
-                        @if (is_null($user))
+                        <a href="{{ url('auth/register') }}" id="btn-register" class="button">{{ trans('general.register') }}</a>
-                            @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
                         @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 -->
+    <div id="footerwrap">
-        <footer class="main-footer">
+        <div class="container">
-            <div class="container text-center">
+            <div class="col-lg-6">
-                {!! bs_copyright() !!}
+                {{ 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>
-    <script>base_url = ".";</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>

resources/views/skinlib/master.tpl

@@ -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>

resources/views/vendor/language.tpl

@@ -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)