invite page fix

html/invite.html

@@ -39,41 +39,105 @@
 
     <!-- ================================================================= -->
     <!-- navbar -->
-    <nav class="navbar navbar-expand-lg navbar-light d-block d-md-none">
-        <div class="container-fluid">
-            <a class="navbar-brand" href="index.html">AI Spokesgirl</a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
-                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
-                aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+    <div class="card">
+        <img class="profile-bgimg-m img-fluid" src="./static/img/userprofile/banner-m.png" class="card-img" alt="...">
+        <!-- 行動版選單 -->
+        <div class="menu-box">
+            <div class="menu-box2">
+                <div style="font-size: 28px;" class="close_btn text-end">
+                    <i class="fas fa-times text-white me-3 mt-3"></i>
+                </div>
                 <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                     <li class="nav-item">
-                        <a class="nav-link active" aria-current="page" href="pricing.html" set-lan="html:pricing">早鳥方案</a>
+                        <a class="nav-link active" aria-current="page" href="pricing.html"
+                            set-lan="html:pricing">早鳥方案</a>
                     </li>
-                    <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                    <li id="changeLanguage" class="nav-item me-lg-1">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
+                            data-bs-toggle="dropdown" aria-expanded="false">
                             中/En
                         </a>
-                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-                            <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en" onclick="changeLan(this)" value="en">English</button></li>
-                            <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this)" value="zh">中文</button></li>
-                        </ul>
+                        <!-- <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en"
+                                        onclick="changeLan(this)" value="en">English</button></li>
+                                <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh"
+                                        onclick="changeLan(this)" value="zh">中文</button></li>
+                            </ul> -->
                     </li>
+                    <div id="lang-manu">
+                        <li><button class="nav-link lan-swtich bg-transparent text-white border-0 mx-auto"
+                                aria-current="page" set-lan="html:en" onclick="changeLan(this)"
+                                value="en">English</button></li>
+                        <li><button class="nav-link lan-switch bg-transparent text-white border-0 mx-auto"
+                                aria-current="page" set-lan="html:zh" onclick="changeLan(this)" value="zh">中文</button>
+                        </li>
+                    </div>
                     <li class="nav-item">
-                        <a class="nav-link active btn-login" aria-current="page" href="login.html" set-lan="html:login">登入</a>
+                        <a class="nav-link active btn-login" aria-current="page" href="loginB.html"
+                            set-lan="html:login">登入</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link btn-userProfile" aria-current="page" href="user_profile.html" set-lan="html:user_profile">會員資料</a>
+                        <a class="nav-link btn-userProfile" aria-current="page" href="user_profile.html"
+                            set-lan="html:user_profile">會員資料</a>
                     </li>
                     <li class="nav-item">
                         <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
                     </li>
                 </ul>
+
             </div>
         </div>
-    </nav>
+        <div class="card-img-overlay pt-2 py-lg-3">
+            <nav class="navbar navbar-expand-lg navbar-light d-block d-md-none pt-0">
+
+                <!-- <a class="navbar-brand d-block d-md-none" href="index.html">AI Spokesgirl</a> -->
+
+                <!-- <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                        data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
+                        aria-label="Toggle navigation">
+                        <span class="navbar-toggler-icon"></span>
+                    </button> -->
+                <div class="collapse navbar-collapse d-flex" id="navbarSupportedContent">
+                    <a href="./index.html">
+                        <img width="150" src="./static/img/contactus/CMM_LOGO.png" alt="">
+                    </a>
+                    <ul class="navbar-des navbar-nav ms-auto mb-2 mb-lg-0">
+                        <li class="nav-item">
+                            <a class="nav-link active" aria-current="page" href="pricing.html"
+                                set-lan="html:pricing">早鳥方案</a>
+                        </li>
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
+                                data-bs-toggle="dropdown" aria-expanded="false">
+                                中/En
+                            </a>
+                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en"
+                                        onclick="changeLan(this)" value="en">English</button></li>
+                                <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh"
+                                        onclick="changeLan(this)" value="zh">中文</button></li>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link active btn-login" aria-current="page" href="loginB.html"
+                                set-lan="html:login">登入</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link btn-userProfile" aria-current="page" href="user_profile.html"
+                                set-lan="html:user_profile">會員資料</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
+                        </li>
+                    </ul>
+                    <span class="menu-bar ms-auto" style="font-size: 32px;"><i
+                            class="fas fa-bars text-white"></i></span>
+                </div>
+
+            </nav>
+
+        </div>
+    </div>    
     <!-- ================================================================= -->
 
 
@@ -179,6 +243,25 @@
     <script src="invite.js"></script>
     <script type="text/javascript" src="static/lan.js"></script>
     <script src="static/common.js"></script>
+    <script>
+        $(".menu-bar").click(function () {
+            $(".menu-box").fadeIn();
+            $(".menu-box2").fadeIn();
+
+        });
+
+        $(".close_btn").click(function () {
+            $(".menu-box").fadeOut();
+            $(".menu-box2").fadeOut();
+
+        });
+        $("#lang-manu").hide();
+
+        $("#changeLanguage").click(function () {
+            $("#lang-manu").slideToggle();
+            $("#lang-arrow").toggleClass("arrowdoup");
+        });
+    </script>
 </body>
 
 </html>