From 4655d8d37224b79582e7ea6b295a1ccc7a393721 Mon Sep 17 00:00:00 2001
From: Joy Cheng <joy.cheng97324@gmail.com>
Date: Fri, 20 Aug 2021 14:44:59 +0800
Subject: [PATCH] [edit] Sign in Form

---
 app/assets/js/all.js |   1 -
 app/index.html       | 181 +++++++++++----
 app/layout.ejs       | 538 +++++++++++++++++++++++++++++--------------
 3 files changed, 510 insertions(+), 210 deletions(-)

diff --git a/app/assets/js/all.js b/app/assets/js/all.js
index 9740a1c..42036fe 100644
--- a/app/assets/js/all.js
+++ b/app/assets/js/all.js
@@ -25,7 +25,6 @@ var swiper = new Swiper(".swiper-js", {
       spaceBetween: 15,
   
     },
- 
     992: {
       slidesPerView: 3,
       spaceBetween: 30,
diff --git a/app/index.html b/app/index.html
index 868de2d..344b1f2 100644
--- a/app/index.html
+++ b/app/index.html
@@ -38,7 +38,9 @@ <h2 class="fw-bold text-white | mb-2">台北當代藝術展</h2>
           class="w-50 w-md-25 btn btn-secondary btn-lg | me-2 | hvr-shrink"
           >購買票券</a
         >
-        <a href="design.html" class="w-50 w-md-25 btn btn-outline-light btn-lg | hvr-shrink"
+        <a
+          href="design.html"
+          class="w-50 w-md-25 btn btn-outline-light btn-lg | hvr-shrink"
           >詳細資訊</a
         >
       </div>
@@ -66,63 +68,144 @@ <h2 class="fw-bold text-white | mb-2">台北當代藝術展</h2>
       <li class="nav-item">
         <a
           href="#"
-          class="nav-link link-dark | pt-0 pb-1 px-18 | hvr-underline-from-center"
+          class="
+            nav-link
+            link-dark
+            |
+            pt-0
+            pb-1
+            px-18
+            |
+            hvr-underline-from-center
+          "
           >音樂</a
         >
       </li>
       <li class="nav-item">
         <a
           href="#"
-          class="nav-link link-dark | pt-0 pb-1 px-18 | hvr-underline-from-center"
+          class="
+            nav-link
+            link-dark
+            |
+            pt-0
+            pb-1
+            px-18
+            |
+            hvr-underline-from-center
+          "
           >戲劇</a
         >
       </li>
       <li class="nav-item">
         <a
           href="design.html"
-          class="nav-link link-dark | pt-0 pb-1 px-18 | hvr-underline-from-center"
+          class="
+            nav-link
+            link-dark
+            |
+            pt-0
+            pb-1
+            px-18
+            |
+            hvr-underline-from-center
+          "
           >設計</a
         >
       </li>
       <li class="nav-item">
         <a
           href="#"
-          class="nav-link link-dark | pt-0 pb-1 px-18 | hvr-underline-from-center"
+          class="
+            nav-link
+            link-dark
+            |
+            pt-0
+            pb-1
+            px-18
+            |
+            hvr-underline-from-center
+          "
           >藝術</a
         >
       </li>
       <li class="nav-item">
         <a
           href="#"
-          class="nav-link link-dark | pt-0 pb-1 px-18 | hvr-underline-from-center"
+          class="
+            nav-link
+            link-dark
+            |
+            pt-0
+            pb-1
+            px-18
+            |
+            hvr-underline-from-center
+          "
           >美食</a
         >
       </li>
       <li class="nav-item">
         <a
           href="#"
-          class="nav-link link-dark | pt-0 pb-1 px-18 | hvr-underline-from-center"
+          class="
+            nav-link
+            link-dark
+            |
+            pt-0
+            pb-1
+            px-18
+            |
+            hvr-underline-from-center
+          "
           >旅遊</a
         >
       </li>
       <li class="nav-item">
         <a
           href="#"
-          class="nav-link link-dark | pt-0 pb-1 px-18 | hvr-underline-from-center"
+          class="
+            nav-link
+            link-dark
+            |
+            pt-0
+            pb-1
+            px-18
+            |
+            hvr-underline-from-center
+          "
           >電影</a
         >
       </li>
       <li class="nav-item">
         <a
           href="#"
-          class="nav-link link-dark | pt-0 pb-1 px-18 | hvr-underline-from-center"
+          class="
+            nav-link
+            link-dark
+            |
+            pt-0
+            pb-1
+            px-18
+            |
+            hvr-underline-from-center
+          "
           >親子</a
         >
       </li>
       <li class="nav-item">
         <a
           href="#"
-          class="nav-link link-dark | pt-0 pb-1 px-18 | hvr-underline-from-center"
+          class="
+            nav-link
+            link-dark
+            |
+            pt-0
+            pb-1
+            px-18
+            |
+            hvr-underline-from-center
+          "
           >期間限定</a
         >
       </li>
@@ -143,12 +226,12 @@ <h2 class="fw-bold text-white | mb-2">台北當代藝術展</h2>
         熱門特展
       </h3>
       <ul class="list-unstyled">
-        <li class="card border-0 bg-light | py-7 px-5 mb-5 | p-md-0 mb-md-6"
-        data-aos="fade-left"
-        data-aos-duration="1400">
-          <div
-            class="row g-0 gx-7"
-          >
+        <li
+          class="card border-0 bg-light | py-7 px-5 mb-5 | p-md-0 mb-md-6"
+          data-aos="fade-left"
+          data-aos-duration="1400"
+        >
+          <div class="row g-0 gx-7">
             <!-- 不同圖片縮放效果 -->
 
             <!-- 整張等比例放大縮小 -->
@@ -169,11 +252,14 @@ <h2 class="fw-bold text-white | mb-2">台北當代藝術展</h2>
                 h-345 h-md-auto
               "
             >
-              <a href="info.html" class="p-0 d-block h-100 align-middle | hvr-shrink">
+              <a
+                href="info.html"
+                class="p-0 d-block h-100 align-middle | hvr-shrink"
+              >
                 <img
                   src="https://images.unsplash.com/photo-1545987796-b199d6abb1b4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
                   alt="展覽圖片"
-                  class="card-img h-100 w-100 "
+                  class="card-img h-100 w-100"
                 />
               </a>
             </div>
@@ -222,10 +308,14 @@ <h2 class="h6 fw-bold mb-0 me-2">2020 台味設計展</h2>
                   data-aos="fade-left"
                   data-aos-duration="1400"
                 >
-                  <a href="info.html" class="btn btn-primary me-1 py-2 px-5 | hvr-shrink"
+                  <a
+                    href="info.html"
+                    class="btn btn-primary me-1 py-2 px-5 | hvr-shrink"
                     >購買票券</a
                   >
-                  <a href="#" class="btn btn-outline-primary py-2 px-5 | hvr-shrink"
+                  <a
+                    href="#"
+                    class="btn btn-outline-primary py-2 px-5 | hvr-shrink"
                     >收藏展覽</a
                   >
                 </div>
@@ -251,12 +341,12 @@ <h2 class="h6 fw-bold mb-0 me-2">2020 台味設計展</h2>
             </div>
           </div>
         </li>
-        <li class="card border-0 bg-light | py-7 px-5 mb-5 | p-md-0 mb-md-6"
-        data-aos="fade-left"
-        data-aos-duration="1400">
-          <div
-            class="row g-0 gx-7"
-          >
+        <li
+          class="card border-0 bg-light | py-7 px-5 mb-5 | p-md-0 mb-md-6"
+          data-aos="fade-left"
+          data-aos-duration="1400"
+        >
+          <div class="row g-0 gx-7">
             <div class="col-md-5 col-lg-4 h-md-350">
               <!-- 整張等比例放大縮小 -->
               <a href="info.html" class="p-0 d-block h-100 | hvr-shrink">
@@ -311,10 +401,14 @@ <h2 class="h6 fw-bold mb-0 me-2">No.22 線上設計展</h2>
                   data-aos="fade-left"
                   data-aos-duration="1400"
                 >
-                  <a href="info.html" class="btn btn-primary me-1 py-2 px-5 | hvr-shrink"
+                  <a
+                    href="info.html"
+                    class="btn btn-primary me-1 py-2 px-5 | hvr-shrink"
                     >購買票券</a
                   >
-                  <a href="#" class="btn btn-outline-primary py-2 px-5 | hvr-shrink"
+                  <a
+                    href="#"
+                    class="btn btn-outline-primary py-2 px-5 | hvr-shrink"
                     >收藏展覽</a
                   >
                 </div>
@@ -340,11 +434,12 @@ <h2 class="h6 fw-bold mb-0 me-2">No.22 線上設計展</h2>
             </div>
           </div>
         </li>
-        <li class="card border-0 bg-light | py-7 px-5 | p-md-0 mb-md-6" data-aos="fade-left"
-        data-aos-duration="1400">
-          <div
-            class="row g-0 gx-7"
-          >
+        <li
+          class="card border-0 bg-light | py-7 px-5 | p-md-0 mb-md-6"
+          data-aos="fade-left"
+          data-aos-duration="1400"
+        >
+          <div class="row g-0 gx-7">
             <div class="col-md-5 col-lg-4 h-md-350">
               <a href="info.html" class="p-0 d-block h-100 | hvr-shrink">
                 <img
@@ -398,10 +493,14 @@ <h2 class="h6 fw-bold mb-0 me-2">高雄設計節</h2>
                   data-aos="fade-left"
                   data-aos-duration="1400"
                 >
-                  <a href="info.html" class="btn btn-primary me-1 py-2 px-5 | hvr-shrink"
+                  <a
+                    href="info.html"
+                    class="btn btn-primary me-1 py-2 px-5 | hvr-shrink"
                     >購買票券</a
                   >
-                  <a href="#" class="btn btn-outline-primary py-2 px-5 | hvr-shrink"
+                  <a
+                    href="#"
+                    class="btn btn-outline-primary py-2 px-5 | hvr-shrink"
                     >收藏展覽</a
                   >
                 </div>
@@ -433,9 +532,11 @@ <h2 class="h6 fw-bold mb-0 me-2">高雄設計節</h2>
 
   <!-- 直播回顧 -->
   <section>
-    <div class="container-md mb-7 mb-md-13" 
-    data-aos="fade-in"
-    data-aos-duration="1200">
+    <div
+      class="container-md mb-7 mb-md-13"
+      data-aos="fade-in"
+      data-aos-duration="1200"
+    >
       <h3
         class="fw-bold mb-2 mb-md-7"
         data-aos="fade-in"
@@ -466,7 +567,9 @@ <h2 class="h6 fw-bold mb-0 me-2">高雄設計節</h2>
               獨家由藝術家、策展人、畫廊總監帶您欣賞台
               北藝術特展，感受雕塑、展演及當代日常文化 之間微妙的關係。
             </p>
-            <a href="#" class="btn btn-secondary py-2 px-11 | hvr-pulse">點此觀看</a>
+            <a href="#" class="btn btn-secondary py-2 px-11 | hvr-pulse"
+              >點此觀看</a
+            >
           </div>
         </div>
       </div>
diff --git a/app/layout.ejs b/app/layout.ejs
index aab2412..dde10fd 100644
--- a/app/layout.ejs
+++ b/app/layout.ejs
@@ -51,15 +51,7 @@
         <h1 class="text-center mb-0 p-0 flex-grow-1 | order-lg-first">
           <a
             href="index.html"
-            class="
-              navbar-brand
-              d-block
-              fs-5
-              text-primary
-              py-18
-              me-0
-              py-md-8
-            "
+            class="navbar-brand d-block fs-5 text-primary py-18 me-0 py-md-8"
             href="#"
             >EXHIBINECTION</a
           >
@@ -74,17 +66,21 @@
           data-bs-target="#cart-offcanvas"
           aria-controls="cart-offcanvas"
         >
+          <span class="material-icons text-black align-middle">
+            confirmation_number
+          </span>
+          <!-- 用badge 取代偽元素 優點：無內容時會消失 -->
           <span
             class="
-              material-icons
-              text-black
-              align-middle
+              badge
+              bg-secondary
+              position-absolute
+              top-0
+              start-50
+              rounded-circle
             "
+            >3</span
           >
-            confirmation_number
-          </span>
-          <!-- 用badge 取代偽元素 優點：無內容時會消失 -->
-          <span class="badge bg-secondary position-absolute top-0 start-50 rounded-circle">3</span>
         </a>
         <!-- Navbar -->
         <a
@@ -108,14 +104,36 @@
             <li class="nav-item">
               <a
                 href="#signInModalToggle"
-                class="nav-link text-nowrap py-3 px-5 | py-lg-0 | hvr-underline-from-center"
-                data-bs-toggle="modal" role="button"
+                class="
+                  nav-link
+                  text-nowrap
+                  py-3
+                  px-5
+                  |
+                  py-lg-0
+                  |
+                  hvr-underline-from-center
+                "
+                data-bs-toggle="modal"
+                role="button"
                 >Sign in</a
               >
             </li>
             <li class="nav-item">
-              <a class="nav-link text-nowrap py-3 px-5 | py-lg-0 | hvr-underline-from-center"
-                data-bs-toggle="modal" href="#signUpModalToggle" role="button"
+              <a
+                class="
+                  nav-link
+                  text-nowrap
+                  py-3
+                  px-5
+                  |
+                  py-lg-0
+                  |
+                  hvr-underline-from-center
+                "
+                data-bs-toggle="modal"
+                href="#signUpModalToggle"
+                role="button"
                 >Sign up</a
               >
             </li>
@@ -144,63 +162,144 @@
           <li class="nav-item">
             <a
               href="#"
-              class="nav-link link-dark | pt-0 pb-1 px-18 | hvr-underline-from-center"
+              class="
+                nav-link
+                link-dark
+                |
+                pt-0
+                pb-1
+                px-18
+                |
+                hvr-underline-from-center
+              "
               >音樂</a
             >
           </li>
           <li class="nav-item">
             <a
               href="#"
-              class="nav-link link-dark | pt-0 pb-1 px-18 | hvr-underline-from-center"
+              class="
+                nav-link
+                link-dark
+                |
+                pt-0
+                pb-1
+                px-18
+                |
+                hvr-underline-from-center
+              "
               >戲劇</a
             >
           </li>
           <li class="nav-item">
             <a
               href="design.html"
-              class="nav-link link-dark | pt-0 pb-1 px-18 | hvr-underline-from-center"
+              class="
+                nav-link
+                link-dark
+                |
+                pt-0
+                pb-1
+                px-18
+                |
+                hvr-underline-from-center
+              "
               >設計</a
             >
           </li>
           <li class="nav-item">
             <a
               href="#"
-              class="nav-link link-dark | pt-0 pb-1 px-18 | hvr-underline-from-center"
+              class="
+                nav-link
+                link-dark
+                |
+                pt-0
+                pb-1
+                px-18
+                |
+                hvr-underline-from-center
+              "
               >藝術</a
             >
           </li>
           <li class="nav-item">
             <a
               href="#"
-              class="nav-link link-dark | pt-0 pb-1 px-18 | hvr-underline-from-center"
+              class="
+                nav-link
+                link-dark
+                |
+                pt-0
+                pb-1
+                px-18
+                |
+                hvr-underline-from-center
+              "
               >美食</a
             >
           </li>
           <li class="nav-item">
             <a
               href="#"
-              class="nav-link link-dark | pt-0 pb-1 px-18 | hvr-underline-from-center"
+              class="
+                nav-link
+                link-dark
+                |
+                pt-0
+                pb-1
+                px-18
+                |
+                hvr-underline-from-center
+              "
               >旅遊</a
             >
           </li>
           <li class="nav-item">
             <a
               href="#"
-              class="nav-link link-dark | pt-0 pb-1 px-18 | hvr-underline-from-center"
+              class="
+                nav-link
+                link-dark
+                |
+                pt-0
+                pb-1
+                px-18
+                |
+                hvr-underline-from-center
+              "
               >電影</a
             >
           </li>
           <li class="nav-item">
             <a
               href="#"
-              class="nav-link link-dark | pt-0 pb-1 px-18 | hvr-underline-from-center"
+              class="
+                nav-link
+                link-dark
+                |
+                pt-0
+                pb-1
+                px-18
+                |
+                hvr-underline-from-center
+              "
               >親子</a
             >
           </li>
           <li class="nav-item">
             <a
               href="#"
-              class="nav-link link-dark | pt-0 pb-1 px-18 | hvr-underline-from-center"
+              class="
+                nav-link
+                link-dark
+                |
+                pt-0
+                pb-1
+                px-18
+                |
+                hvr-underline-from-center
+              "
               >期間限定</a
             >
           </li>
@@ -213,18 +312,20 @@
     <!-- 猜你也喜歡 -->
     <section>
       <div class="container-md mb-7 mb-md-13 <%- display %>">
-        <h2 class="h3 fw-bold mb-2 mb-md-7"  data-aos="fade-in" data-aos-duration="1300">猜你也喜歡...</h2>
+        <h2
+          class="h3 fw-bold mb-2 mb-md-7"
+          data-aos="fade-in"
+          data-aos-duration="1300"
+        >
+          猜你也喜歡...
+        </h2>
         <!-- Swiper for PC-->
-        <div class="swiper-container swiper | swiper-js | offset-md-1" 
-        data-aos="fade-left"
-        data-aos-duration="1400">
-          <ul
-            class="
-              swiper-wrapper
-              list-unstyled
-            "
-            style="cursor: grab"
-          >
+        <div
+          class="swiper-container swiper | swiper-js | offset-md-1"
+          data-aos="fade-left"
+          data-aos-duration="1400"
+        >
+          <ul class="swiper-wrapper list-unstyled" style="cursor: grab">
             <li class="swiper-slide">
               <div class="card border-0">
                 <div class="ratio ratio-1x1 mb-1">
@@ -235,7 +336,12 @@
                   />
                 </div>
 
-                <h3 class="h6 fw-bold mb-0 mb-1">《空間成像 <span class="fw-medium"> Imagination als Raum der Freiheit </span>》</h3>
+                <h3 class="h6 fw-bold mb-0 mb-1">
+                  《空間成像
+                  <span class="fw-medium">
+                    Imagination als Raum der Freiheit </span
+                  >》
+                </h3>
                 <p class="h6 mb-1">$350</p>
               </div>
             </li>
@@ -263,7 +369,10 @@
                   />
                 </div>
 
-                <h3 class="h6 fw-bold mb-0 mb-1">《個人特展<span class="fw-medium"> A World A Particle </span>》</h3>
+                <h3 class="h6 fw-bold mb-0 mb-1">
+                  《個人特展<span class="fw-medium"> A World A Particle </span
+                  >》
+                </h3>
                 <p class="h6 mb-1">$350</p>
               </div>
             </li>
@@ -277,7 +386,10 @@
                   />
                 </div>
 
-                <h3 class="h6 fw-bold mb-0 mb-1">《虛擬戀人<span class="fw-medium"> the Future of Humans </span>》</h3>
+                <h3 class="h6 fw-bold mb-0 mb-1">
+                  《虛擬戀人<span class="fw-medium"> the Future of Humans </span
+                  >》
+                </h3>
                 <p class="h6 mb-1">$350</p>
               </div>
             </li>
@@ -303,9 +415,25 @@
             justify-content-end
           "
         >
-          <h4 class="h3 text-white | mb-0" data-aos="fade-left" data-aos-duration="1200" >想收到最新消息嗎？</h4>
-          <h4 class="h3 text-white | mb-2" data-aos="fade-left" data-aos-duration="1300" >快訂閱我們！</h4>
-          <div class="input-group | mt-1" data-aos="fade-left" data-aos-duration="1400" >
+          <h4
+            class="h3 text-white | mb-0"
+            data-aos="fade-left"
+            data-aos-duration="1200"
+          >
+            想收到最新消息嗎？
+          </h4>
+          <h4
+            class="h3 text-white | mb-2"
+            data-aos="fade-left"
+            data-aos-duration="1300"
+          >
+            快訂閱我們！
+          </h4>
+          <div
+            class="input-group | mt-1"
+            data-aos="fade-left"
+            data-aos-duration="1400"
+          >
             <input
               type="text"
               name="subscribe email"
@@ -317,7 +445,6 @@
                 bg-light
                 w-60
                 py-2
-
                 w-md-30 w-lg-20
               "
             />
@@ -338,8 +465,36 @@
           <p class="mb-0">© 2020. All Rights Reserved.</p>
         </div>
         <div class="d-flex">
-          <a href="#signInModalToggle" data-bs-toggle="modal" role="button" class="d-none d-md-block | link-dark | px-3 | hvr-underline-from-center">Sign in</a>
-          <a href="#signUpModalToggle" data-bs-toggle="modal" role="button" class="d-none d-md-block | link-dark | px-3 | hvr-underline-from-center">Sign up</a>
+          <a
+            href="#signInModalToggle"
+            data-bs-toggle="modal"
+            role="button"
+            class="
+              d-none d-md-block
+              |
+              link-dark
+              |
+              px-3
+              |
+              hvr-underline-from-center
+            "
+            >Sign in</a
+          >
+          <a
+            href="#signUpModalToggle"
+            data-bs-toggle="modal"
+            role="button"
+            class="
+              d-none d-md-block
+              |
+              link-dark
+              |
+              px-3
+              |
+              hvr-underline-from-center
+            "
+            >Sign up</a
+          >
         </div>
       </div>
     </footer>
@@ -359,14 +514,7 @@
     >
       <!-- offcanvas header -->
       <div
-        class="
-          offcanvas-header
-          justify-content-between
-          p-0
-          mt-6
-          mb-2
-          mt-md-10
-        "
+        class="offcanvas-header justify-content-between p-0 mt-6 mb-2 mt-md-10"
       >
         <h3 id="offcanvasRightLabel" class="text-white mb-0">Cart List</h3>
         <button
@@ -378,7 +526,17 @@
       </div>
 
       <!-- tickets list -->
-      <ul class="scroll-bar | flex-grow-1 overflow-auto list-unstyled | pe-2 pe-md-5">
+      <ul
+        class="
+          scroll-bar
+          |
+          flex-grow-1
+          overflow-auto
+          list-unstyled
+          |
+          pe-2 pe-md-5
+        "
+      >
         <li class="card border-0 mb-2 card-close">
           <button
             type="button"
@@ -531,7 +689,9 @@
             <p class="h6 mb-0 text-white mb-0 me-7">小計</p>
             <p class="h6 mb-0 text-white mb-0">NT$1050</p>
           </div>
-          <a href="order.html" class="a btn btn-white btn-lg link-primary | hvr-shrink"
+          <a
+            href="order.html"
+            class="a btn btn-white btn-lg link-primary | hvr-shrink"
             >前往結帳</a
           >
         </div>
@@ -539,149 +699,187 @@
     </div>
 
     <!-- Sign in Modal -->
-    <div class="modal fade" id="signInModalToggle" aria-hidden="true" aria-labelledby="signInModalToggleLabel" tabindex="-1">
+    <div
+      class="modal fade"
+      id="signInModalToggle"
+      aria-hidden="true"
+      aria-labelledby="signInModalToggleLabel"
+      tabindex="-1"
+    >
       <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
           <div class="modal-header border-0">
             <h5 class="modal-title" id="signInModalToggleLabel">登入</h5>
-            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            <button
+              type="button"
+              class="btn-close"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            ></button>
           </div>
           <div class="modal-body">
-            <form action="" class="pb-5 needs-validation">
-            <div class="mb-6">
-                      <label for="userEmail" class="form-label">信箱帳號</label>
-                      <input
-                        type="email"
-                        name="input email"
-                        id="userEmail"
-                        class="form-control is-invalid text-dark py-2"
-                        placeholder="example@gmail.com"
-                    required  />
-              <div class="invalid-feedback">
-           請輸入正確格式的email帳號
-          </div>
-                    </div>
+            <form class="mb-8 needs-validation" novalidate>
               <div class="mb-6">
-                      <label for="userPassword" class="form-label">密碼</label>
-                      <input
-                        type="password"
-                        name="input email"
-                        id="userPassword"
-                        class="form-control is-invalid text-dark py-2"
-                        placeholder="請輸入密碼" required
-                      />
-    <div class="invalid-feedback">
-            請輸入八位數中英文大小寫密碼
-          </div>
-                    </div>
-              <div class="text-end"><button class="btn btn-secondary" data-bs-toggle="modal" data-bs-dismiss="modal">登入</button></div>
-              
-              </form>
+                <label for="userEmail" class="form-label">信箱帳號</label>
+                <input
+                  type="email"
+                  name="input email"
+                  id="userEmail"
+                  class="form-control is-invalid text-dark py-2"
+                  placeholder="example@gmail.com"
+                  required
+                />
+                <div class="invalid-feedback">請輸入正確格式的email帳號</div>
+              </div>
+              <div class="mb-6">
+                <label for="userPassword" class="form-label">密碼</label>
+                <input
+                  type="password"
+                  name="input email"
+                  id="userPassword"
+                  class="form-control is-invalid text-dark py-2"
+                  placeholder="請輸入密碼"
+                  required
+                />
+                <div class="invalid-feedback">請輸入八位數中英文大小寫密碼</div>
+              </div>
+              <button
+                class="btn btn-secondary text-center w-100"
+                data-bs-toggle="modal"
+                data-bs-dismiss="modal"
+              >
+                登入
+              </button>
+            </form>
             <p class="fw-light text-dark text-center">其他登入方式</p>
-            <div class="d-flex justify-content-center align-items-center pb-5">
+            <div class="d-flex justify-content-center align-items-center mb-5">
               <a href="#" class="link-dark fs-3 py-0 px-3">
-               <i class="fab fa-apple"></i>
+                <i class="fab fa-apple"></i>
               </a>
               <a href="#" class="link-dark fs-4 py-0 px-3">
                 <i class="fab fa-google"></i>
               </a>
-              <a href="#" class="link-dark fs-4 py-0 px-3"><i class="fab fa-facebook-f"></i></a>
+              <a href="#" class="link-dark fs-4 py-0 px-3"
+                ><i class="fab fa-facebook-f"></i
+              ></a>
             </div>
-    
-              <div class="modal-footer border-light justify-content-center">
-               <p class="fw-light text-dark text-center me-5">還沒申請帳號?
-                </p>
-            <button class="btn btn-outline-secondary px-5" data-bs-target="#signUpModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">前往註冊</button>
-                </div>
-    
+
+            <div class="modal-footer border-light justify-content-center">
+              <p class="fw-light text-dark text-center me-5">還沒申請帳號?</p>
+              <button
+                class="btn btn-outline-secondary px-5"
+                data-bs-target="#signUpModalToggle"
+                data-bs-toggle="modal"
+                data-bs-dismiss="modal"
+              >
+                前往註冊
+              </button>
             </div>
+          </div>
         </div>
       </div>
     </div>
+
     <!-- Sign up Modal -->
-    <div class="modal fade" id="signUpModalToggle" aria-hidden="true" aria-labelledby="signUpModalToggleLabel" tabindex="-1">
+    <div
+      class="modal fade"
+      id="signUpModalToggle"
+      aria-hidden="true"
+      aria-labelledby="signUpModalToggleLabel"
+      tabindex="-1"
+    >
       <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
         <div class="modal-content">
           <div class="modal-header border-0">
             <h5 class="modal-title" id="signUpModalToggleLable">註冊</h5>
-            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            <button
+              type="button"
+              class="btn-close"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            ></button>
           </div>
           <div class="modal-body">
-           <form action="" class="pb-5 needs-validation">
-             <div class="mb-6">
-                      <label for="userName" class="form-label">姓名</label>
-                      <input
-                        type="text"
-                        name="input email"
-                        id="userName"
-                        class="form-control text-dark py-2"
-                        placeholder="王小明"
-                    />
-                    </div>
-             <div class="mb-6">
-                      <label for="userNickName" class="form-label">暱稱</label>
-                      <input
-                        type="text"
-                        name="input email"
-                        id="userNickName"
-                        class="form-control is-invalid text-dark py-2"
-                        placeholder="Emily453"
-                    required  />
-              <div class="invalid-feedback">
-           這個稱呼已被使用，請重新命名
-          </div>
-                    </div>
-            <div class="mb-6">
-                      <label for="userEmail" class="form-label">信箱帳號</label>
-                      <input
-                        type="email"
-                        name="input email"
-                        id="userEmail"
-                        class="form-control is-invalid text-dark py-2"
-                        placeholder="example@gmail.com"
-                    required  />
-              <div class="invalid-feedback">
-           請輸入正確格式的email帳號
-          </div>
-                    </div>
+            <form class="mb-8 needs-validation" novalidate>
               <div class="mb-6">
-                      <label for="userPassword" class="form-label">密碼</label>
-                      <input
-                        type="password"
-                        name="input email"
-                        id="userPassword"
-                        class="form-control is-invalid text-dark py-2"
-                        placeholder="請輸入密碼" required
-                      />
-    <div class="invalid-feedback">
-            請輸入八位數中英文大小寫密碼
-          </div>
-                    </div>
-                       <div class="mb-6">
-                      <label for="userPassword2" class="form-label">再次輸入密碼確認</label>
-                      <input
-                        type="password"
-                        name="input email"
-                        id="userPassword2"
-                        class="form-control is-invalid text-dark py-2"
-                        placeholder="請輸入密碼" required
-                      />
-    <div class="invalid-feedback">
-            密碼有誤，請輸入相同密碼
-          </div>
-                    </div>
-              <div class="text-end"><button class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-dismiss="modal">立即註冊</button></div>
-              
-              </form>
+                <label for="userName" class="form-label">姓名</label>
+                <input
+                  type="text"
+                  name="input email"
+                  id="userName"
+                  class="form-control text-dark py-2"
+                  placeholder="王小明"
+                />
+              </div>
+              <div class="mb-6">
+                <label for="userNickName" class="form-label">暱稱</label>
+                <input
+                  type="text"
+                  name="input email"
+                  id="userNickName"
+                  class="form-control is-invalid text-dark py-2"
+                  placeholder="Emily453"
+                  required
+                />
+                <div class="invalid-feedback">這個稱呼已被使用，請重新命名</div>
+              </div>
+              <div class="mb-6">
+                <label for="userEmail" class="form-label">信箱帳號</label>
+                <input
+                  type="email"
+                  name="input email"
+                  id="userEmail"
+                  class="form-control is-invalid text-dark py-2"
+                  placeholder="example@gmail.com"
+                  required
+                />
+                <div class="invalid-feedback">請輸入正確格式的email帳號</div>
+              </div>
+              <div class="mb-6">
+                <label for="userPassword" class="form-label">密碼</label>
+                <input
+                  type="password"
+                  name="input email"
+                  id="userPassword"
+                  class="form-control is-invalid text-dark py-2"
+                  placeholder="請輸入密碼"
+                  required
+                />
+                <div class="invalid-feedback">請輸入八位數中英文大小寫密碼</div>
+              </div>
+              <div class="mb-6">
+                <label for="userPassword2" class="form-label"
+                  >再次輸入密碼確認</label
+                >
+                <input
+                  type="password"
+                  name="input email"
+                  id="userPassword2"
+                  class="form-control is-invalid text-dark py-2"
+                  placeholder="請輸入密碼"
+                  required
+                />
+                <div class="invalid-feedback">密碼有誤，請輸入相同密碼</div>
+              </div>
+              <button
+                class="btn btn-outline-secondary w-100 text-center"
+                data-bs-toggle="modal"
+                data-bs-dismiss="modal"
+              >
+                立即註冊
+              </button>
+            </form>
             <p class="fw-light text-dark text-center">其他註冊方式</p>
-            <div class="d-flex justify-content-center align-items-center pb-8">
+            <div class="d-flex justify-content-center align-items-center mb-8">
               <a href="#" class="link-dark fs-3 py-0 px-3">
-               <i class="fab fa-apple"></i>
+                <i class="fab fa-apple"></i>
               </a>
               <a href="#" class="link-dark fs-4 py-0 px-3">
                 <i class="fab fa-google"></i>
               </a>
-              <a href="#" class="link-dark fs-4 py-0 px-3"><i class="fab fa-facebook-f"></i></a>
+              <a href="#" class="link-dark fs-4 py-0 px-3"
+                ><i class="fab fa-facebook-f"></i
+              ></a>
             </div>
           </div>
         </div>