From 5370e4904c4ef2e048e62878da2214255fb5eab0 Mon Sep 17 00:00:00 2001
From: printempw <h@prinzeugen.net>
Date: Sun, 11 Dec 2016 15:17:24 +0800
Subject: [PATCH] brand-new landing page

---
 resources/assets/src/sass/index.scss | 154 +++++++++++++++++++++------
 resources/assets/src/sass/style.scss |   7 +-
 resources/views/index.tpl            | 113 ++++++++++++++------
 resources/views/skinlib/master.tpl   |  13 ++-
 resources/views/vendor/language.tpl  |   4 +-
 5 files changed, 221 insertions(+), 70 deletions(-)

diff --git a/resources/assets/src/sass/index.scss b/resources/assets/src/sass/index.scss
index d59ffe22..1dcf1f18 100644
--- a/resources/assets/src/sass/index.scss
+++ b/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 {
-        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
+}
diff --git a/resources/assets/src/sass/style.scss b/resources/assets/src/sass/style.scss
index 849ada28..69e5b2f7 100644
--- a/resources/assets/src/sass/style.scss
+++ b/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 {
diff --git a/resources/views/index.tpl b/resources/views/index.tpl
index fd3ba5d5..7c89a87b 100644
--- a/resources/views/index.tpl
+++ b/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">
-            <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>
diff --git a/resources/views/skinlib/master.tpl b/resources/views/skinlib/master.tpl
index 03171d29..2af30d68 100644
--- a/resources/views/skinlib/master.tpl
+++ b/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>
diff --git a/resources/views/vendor/language.tpl b/resources/views/vendor/language.tpl
index ecc461ac..2e9a3256 100644
--- a/resources/views/vendor/language.tpl
+++ b/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)