Home Explore Help
Register Sign In
choozmo
/
AI_Spokesgirl
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

sign in/up layout

huaisianhuang 3 years ago
parent
573134ec86
commit
b4ded12cfd
8 changed files with 104 additions and 4 deletions
Split View Show Diff Stats
  1. 27 2
      html/login.html
  2. 6 0
      html/login.js
  3. 26 1
      html/register.html
  4. 6 0
      html/register.js
  5. 1 1
      html/static/script_util.js
  6. 22 0
      html/static/scss/style.css
  7. 0 0
      html/static/scss/style.css.map
  8. 16 0
      html/static/scss/style.scss

+ 27 - 2
html/login.html
View File 

@@ -27,9 +27,9 @@
 
 <body>
 
     <!-- ================================================================= -->
 
     <!-- navbar -->
 
-    <nav class="navbar navbar-expand-lg navbar-light">
 
+    <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>
 
+            <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">
 
@@ -80,6 +80,31 @@
 
                 <div class="row-img-txt text-center">ChoozMo AI Spokesgirl</div>
 
             </div>
 
             <div class="row-login">
 
+                <div class="login-top d-none d-md-block">
 
+                    <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>
 
+                        </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="login.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>
 
+                </div>
 
                 <div class="login-content">
 
                     <!-- 已登入 {% if success %} -->
 
                   <!-- 未登入 {% endif %} -->

+ 6 - 0
html/login.js
View File 

@@ -3,6 +3,9 @@ const inputPassword = document.querySelector('#login #password');
 
 const btnLoginPage = document.querySelector('.btn-login');
 
 const btnUserProfile = document.querySelector('.btn-userProfile');
 
 const btnLogout = document.querySelector('.btn-logout');
 
+const btnLoginPage_d = document.querySelector('.login-top .btn-login');
 
+const btnUserProfile_d = document.querySelector('.login-top .btn-userProfile');
 
+const btnLogout_d= document.querySelector('.login-top .btn-logout');
 
 
 inputPassword.addEventListener('keyup', loginByEnter);
 
 btnLogin.addEventListener('click', login);
 
@@ -61,6 +64,9 @@ function loginControl() {
 
     btnLoginPage.style.display = 'block';
 
     btnLogout.style.display = 'none';
 
     btnUserProfile.style.display = 'none';
 
+    btnLoginPage_d.style.display = 'block';
 
+    btnLogout_d.style.display = 'none';
 
+    btnUserProfile_d.style.display = 'none';
 
 }
 
 
 loginControl();

+ 26 - 1
html/register.html
View File 

@@ -27,7 +27,7 @@
 
 <body>
 
     <!-- ================================================================= -->
 
     <!-- navbar -->
 
-    <nav class="navbar navbar-expand-lg navbar-light">
 
+    <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"
 
@@ -80,6 +80,31 @@
 
                 <div class="row-img-txt text-center">ChoozMo AI Spokesgirl</div>
 
             </div>
 
             <div class="row-login">
 
+                <div class="login-top d-none d-md-block">
 
+                    <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>
 
+                        </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="login.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>
 
+                </div>
 
                 <div class="login-content">
 
                     <!-- 已登入 {% if success %} -->
 
                   <!-- 未登入 {% endif %} -->

+ 6 - 0
html/register.js
View File 

@@ -3,6 +3,9 @@ const btnLoginPage = document.querySelector('.btn-login');
 
 const btnUserProfile = document.querySelector('.btn-userProfile');
 
 const btnLogout = document.querySelector('.btn-logout');
 
 const registerPassword = document.querySelector('#register #password');
 
+const btnLoginPage_d = document.querySelector('.login-top .btn-login');
 
+const btnUserProfile_d = document.querySelector('.login-top .btn-userProfile');
 
+const btnLogout_d= document.querySelector('.login-top .btn-logout');
 
 
 registerPassword.addEventListener('keyup', registerByEnter);
 
 btnRegister.addEventListener('click', register);
 
@@ -95,6 +98,9 @@ function loginControl() {
 
     btnLoginPage.style.display = 'block';
 
     btnLogout.style.display = 'none';
 
     btnUserProfile.style.display = 'none';
 
+    btnLoginPage_d.style.display = 'block';
 
+    btnLogout_d.style.display = 'none';
 
+    btnUserProfile_d.style.display = 'none';
 
 }
 
 
 loginControl();

+ 1 - 1
html/static/script_util.js
View File 

@@ -13,7 +13,7 @@ function checkRoute() {
 
         'Authorization': `Bearer ${jwt_token}`
 
      }
 
   }).then(res => {
 
-    console.log(res.status);
 
+    console.log(res.data);
 
     if(res.status !== 200) {
 
       window.location.replace("login.html");
 
     }

+ 22 - 0
html/static/scss/style.css
View File 

@@ -861,6 +861,7 @@ body {
 
       -ms-flex-align: center;
 
           align-items: center;
 
   text-align: center;
 
+  position: relative;
 
 }
 
 
 .row-login .title {
 
@@ -878,6 +879,27 @@ body {
 
   border-bottom: 4px solid #052859;
 
 }
 
 
+.row-login .login-top {
 
+  position: absolute;
 
+  right: 1rem;
 
+  top: 1rem;
 
+}
 
+
 
+.row-login .login-top .navbar-nav {
 
+  -webkit-box-orient: horizontal;
 
+  -webkit-box-direction: normal;
 
+      -ms-flex-direction: row;
 
+          flex-direction: row;
 
+}
 
+
 
+.row-login .login-top .navbar-nav .nav-item {
 
+  margin: 0 .5rem;
 
+}
 
+
 
+.row-login .login-top .navbar-nav .nav-item a {
 
+  color: black;
 
+}
 
+
 
 .login-content {
 
   width: 80%;
 
   min-width: 350px;

File diff suppressed because it is too large
+ 0 - 0
html/static/scss/style.css.map


+ 16 - 0
html/static/scss/style.scss
View File 

@@ -44,6 +44,7 @@ body {
 
 
 .navbar {
 
 	background-color: white;
 
+	
 }
 
 
 /* .imf {
 
@@ -802,6 +803,7 @@ body {
 
 	justify-content: flex-start;
 
 	align-items: center;
 
 	text-align: center;
 
+	position: relative;
 
 	.title {
 
 		position: relative;
 
 		color: #052859;
 
@@ -815,6 +817,20 @@ body {
 
 			border-bottom: 4px solid #052859;
 
 		}
 
 	}
 
+	.login-top {
 
+		position: absolute;
 
+		right: 1rem;
 
+		top: 1rem;
 
+		.navbar-nav {
 
+			flex-direction: row;
 
+			.nav-item {
 
+				margin: 0 .5rem;
 
+				a {
 
+					color: black;
 
+				}
 
+			}
 
+		}
 
+	}
 
 }
 
 
 .login-content {

Some files were not shown because too many files changed in this diff