From 308999aae159de2fd8942178dd912015abf50e39 Mon Sep 17 00:00:00 2001
From: Lisa <410402446@m365.fju.edu.tw>
Date: Tue, 27 Feb 2024 18:56:36 +0800
Subject: [PATCH] add login

---
 pages-login.html | 141 ++++++++++++++++++++++++++---------------------
 1 file changed, 77 insertions(+), 64 deletions(-)

diff --git a/pages-login.html b/pages-login.html
index 190380e..38443d4 100644
--- a/pages-login.html
+++ b/pages-login.html
@@ -46,80 +46,93 @@
       <section class="section register min-vh-100 d-flex flex-column align-items-center justify-content-center py-4">
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-lg-4 col-md-6 d-flex flex-column align-items-center justify-content-center">
+              <div class="col-lg-4 col-md-6 d-flex flex-column align-items-center justify-content-center">
 
-              <div class="d-flex justify-content-center py-4">
-                <a href="index.html" class="logo d-flex align-items-center w-auto">
-                  <img src="assets/img/imageNarrator logo.png" alt="">
-                  <span class="d-none d-lg-block">IMAGE NARRATOR</span>
-                </a>
-              </div><!-- End Logo -->
-            <!--google login-->
+                  <div class="d-flex justify-content-center py-4">
+                      <a href="index.html" class="logo d-flex align-items-center w-auto">
+                          <img src="assets/img/imageNarrator logo.png" alt="">
+                          <span class="d-none d-lg-block">IMAGE NARRATOR</span>
+                      </a>
+                  </div><!-- End Logo -->
+                  <!--google login-->
 
 
 
-
-                <!--end google login-->
-              <div class="card mb-3">
-
-                <div class="card-body">
-
-                  <div class="pt-4 pb-2">
-                    <h5 class="card-title text-center pb-0 fs-4">Login to Your Account</h5>
-                    <p class="text-center small">Enter your email & password to login</p>
+                  <script src="https://accounts.google.com/gsi/client" async></script>
+                  <div id="g_id_onload"
+                       data-client_id="717436500310-b1lvlla1rh9b6mh472dnbqicl1g8al6f.apps.googleusercontent.com"
+                       data-login_uri="https://lisa410402446.github.io/Lisaimage/index.html"
+                       data-auto_prompt="false">
                   </div>
+                  <div class="g_id_signin"
+                       data-type="standard"
+                       data-size="large"
+                       data-theme="outline"
+                       data-text="sign_in_with"
+                       data-shape="rectangular"
+                       data-logo_alignment="left">
+                  </div>
+                  <!--end google login-->
+                  <div class="card mb-3">
+
+                      <div class="card-body">
+
+                          <div class="pt-4 pb-2">
+                              <h5 class="card-title text-center pb-0 fs-4">Login to Your Account</h5>
+                              <p class="text-center small">Enter your email & password to login</p>
+                          </div>
+
+                          <form class="row g-3 needs-validation" novalidate>
+
+                              <div class="col-12">
+                                  <label for="yourEmail" class="form-label">Your Email</label>
+                                  <input type="email" name="email" class="form-control" id="yourEmail" required>
+                                  <div class="invalid-feedback">Please enter a valid Email adddress!</div>
+                              </div>
+
+                              <!-- <div class="col-12">
+                  <label for="yourUsername" class="form-label">Username</label>
+                  <div class="input-group has-validation">
+                    <span class="input-group-text" id="inputGroupPrepend">@</span>
+                    <input type="text" name="username" class="form-control" id="yourUsername" required>
+                    <div class="invalid-feedback">Please enter your username.</div>
+                  </div>
+                </div> -->
+
+                              <div class="col-12">
+                                  <label for="yourPassword" class="form-label">Password</label>
+                                  <input type="password" name="password" class="form-control" id="yourPassword" required>
+                                  <div class="invalid-feedback">Please enter your password!</div>
+                              </div>
+
+                              <div class="col-12">
+                                  <div class="form-check">
+                                      <input class="form-check-input" type="checkbox" name="remember" value="true" id="rememberMe">
+                                      <label class="form-check-label" for="rememberMe">Remember me</label>
+                                  </div>
+                              </div>
+                              <div class="col-12">
+                                  <a class="btn btn-primary w-100" href="index.html" role="button">Login</a>
+
+                              </div>
+                              <div class="col-12">
+                                  <p class="small mb-0">Don't have account? <a href="pages-register.html">Create an account</a></p>
+                              </div>
+                          </form>
 
-                  <form class="row g-3 needs-validation" novalidate>
-
-                    <div class="col-12">
-                      <label for="yourEmail" class="form-label">Your Email</label>
-                      <input type="email" name="email" class="form-control" id="yourEmail" required>
-                      <div class="invalid-feedback">Please enter a valid Email adddress!</div>
-                    </div>
-
-                    <!-- <div class="col-12">
-                      <label for="yourUsername" class="form-label">Username</label>
-                      <div class="input-group has-validation">
-                        <span class="input-group-text" id="inputGroupPrepend">@</span>
-                        <input type="text" name="username" class="form-control" id="yourUsername" required>
-                        <div class="invalid-feedback">Please enter your username.</div>
                       </div>
-                    </div> -->
-
-                    <div class="col-12">
-                      <label for="yourPassword" class="form-label">Password</label>
-                      <input type="password" name="password" class="form-control" id="yourPassword" required>
-                      <div class="invalid-feedback">Please enter your password!</div>
-                    </div>
-
-                    <div class="col-12">
-                      <div class="form-check">
-                        <input class="form-check-input" type="checkbox" name="remember" value="true" id="rememberMe">
-                        <label class="form-check-label" for="rememberMe">Remember me</label>
-                      </div>
-                    </div>
-                    <div class="col-12">
-                        <a class="btn btn-primary w-100" href="index.html" role="button">Login</a>
+                  </div>
 
-                    </div>
-                    <div class="col-12">
-                      <p class="small mb-0">Don't have account? <a href="pages-register.html">Create an account</a></p>
-                    </div>
-                  </form>
 
-                </div>
-              </div>
-              
-
-              <div class="credits">
-                <!-- All the links in the footer should remain intact. -->
-                <!-- You can delete the links only if you purchased the pro version. -->
-                <!-- Licensing information: https://bootstrapmade.com/license/ -->
-                <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/ -->
-                Designed by IMAGE NARRATOR</a>
-              </div>
+                  <div class="credits">
+                      <!-- All the links in the footer should remain intact. -->
+                      <!-- You can delete the links only if you purchased the pro version. -->
+                      <!-- Licensing information: https://bootstrapmade.com/license/ -->
+                      <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/ -->
+                      Designed by IMAGE NARRATOR</a>
+                  </div>
 
-            </div>
+              </div>
           </div>
         </div>