brand-new landing page

2024-12-15 06:09:58 +08:00 · 2016-12-11 15:17:24 +08:00 · 2016-12-11 15:17:24 +08:00 · 5370e4904c
commit 5370e4904c
parent a858456d38
5 changed files with 221 additions and 70 deletions
--- 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,17 +18,36 @@ 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 {
+        .user-menu .user-image {
+            border-radius: 10%;
+        }
+    }
+
+    .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;
@ -46,25 +65,29 @@ body {
                    }
                }

-        .user-menu .user-image {
-            border-radius: 10%;
+            }
+
+            .navbar-custom-menu .navbar-nav > li {
+                a.btn {
+                    background-color: #0078e7;
+                    border: 1px solid #0078e7;
+                }
+            }
+        }
+
+        .nickname {
+            color: #5e5e5e;
        }
    }

    .main-header .navbar .navbar-custom-menu .navbar-nav > li {
-        a {
-            border-left: 0;
+        a.btn {
+            border-radius: 5px;
+                    background: transparent;
+                    border: 1px solid #fff;
        }
    }

-    .navbar {
-        background-color: rgba(255, 255, 255, 0.2);
-    }
-
-    .navbar-header > a {
-        color: #5e5e5e;
-    }
-
    .content-wrapper {
        background-color: transparent;
        border: none;
@ -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
+}
--- 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 {
--- 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,8 +76,6 @@
            </nav>
        </header>

-        <!-- Full Width Column -->
-        <div class="content-wrapper">
        <div class="container">
            <div class="splash">
                <h1 class="splash-head">{{ option('site_name') }}</h1>
@ -95,22 +94,74 @@
                    @endif
                </p>
            </div>
-            </div>
-        </div><!-- /.content-wrapper -->
+        </div> <!--/ .container -->
+    </div><!--/ #headerwrap -->

-        <!-- Main Footer -->
-        <footer class="main-footer">
-            <div class="container text-center">
+    <!-- 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>
+            <br>
+        </div> <!--/ .container -->
+    </div><!--/ #introwrap -->
+
+    <div id="footerwrap">
+        <div class="container">
+            <div class="col-lg-6">
+                {{ option('site_name') }} 提供 Minecraft 角色皮肤的上传以及托管服务。配合 CustomSKinLoader 等换肤 MOD，您可以为您的游戏角色设置皮肤与披风，并让其他玩家在游戏中看到。
+            </div>
+
+            <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>
-        </footer>
-
-    </div><!-- ./wrapper -->
+    </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>
--- 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>
--- 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)