From f87087a4c81c6b3dd21eda8d6c7515f385661b8b Mon Sep 17 00:00:00 2001
From: cecily-mee <143897317+cecily-mee@users.noreply.github.com>
Date: Thu, 8 Aug 2024 19:25:06 +0530
Subject: [PATCH] Update login.html

---
 login.html | 254 +++++++++++++++++++++++++----------------------------
 1 file changed, 120 insertions(+), 134 deletions(-)
diff --git a/login.html b/login.html
index acbb17b4..61ebd74b 100644
--- a/login.html
+++ b/login.html
@@ -1,152 +1,138 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <title>Registration Page </title>
-        <meta name="viewport" content="width=device-width, initial-scale=
-        1.0", maximum-scale="1.0">
-        <meta http-equiv="X-UA-Compatible" content="ie=edge">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-        <link rel="stylesheet" href="style.css">
-        <link rel="stylesheet" href="style_.css">
-        <link rel="icon" type="image/x-icon" href="favicon.ico"/>
-       </head>
-       <body>     
+<head>
+    <meta charset="utf-8" />
+    <title>Registration Page</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0", maximum-scale="1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="style_.css">
+    <link rel="icon" type="image/x-icon" href="favicon.ico"/>
+</head>
+<body>     
 
-        <header class="registration-header">
-            
-                
-                    <a href="index.html"><img src="./img/Screenshot 2024-01-23 003448.png" style="width: 130px; border-radius: 6px; margin-top: 20px; margin-left: 20px;"></a>
-                
-<div class="container">
-            </div>
-            <main>
-                <section class="user-container login-section--display">
-                    <div class="back">
-                    <div class="registration">
-                        <div class="grid-two--column">
-                            
-                            <div class="form-text">
-                          <h2>Welcome Back!</h2>
-                          <p>To keep connected with us please login with your personal information.</p> 
-                          <button class="login-btn">Login Here</button> 
-                          </div>
-                          <div class="registration-form">
-                            <h2>Create Account</h2>
-                            <div class="social-icons">
-                                <a href="https://accounts.google.com/v3/signin/identifier?ifkv=ASKXGp3o7JbWY-Xl_hjXMSHncDJR5Bg1tJjR-AcPnUkBcdPTNTLi-oYd-rV3dgIaufZcXA-T1n6HuQ&flowName=GlifWebSignIn&flowEntry=ServiceLogin&dsh=S604814220%3A1705302051981588&theme=glif" target="_blank">
-                                <i class="fa-brands fa-google"></i></a>
-                                <a href="" target="_blank">
-                                    <i class="fa-brands fa-github"></i></a>
-                                <a href="" target="_blank">
-                                    <i class="fa-brands fa-facebook"></i>
-                                    
-                                </a>
-                                <a href="" target="_blank">
-                                    <i class="fa-brands fa-instagram"></i>
-                                    
-                                </a>
-                                
+<header class="registration-header">
+    <a href="index.html"><img src="./img/Screenshot 2024-01-23 003448.png" style="width: 130px; border-radius: 6px; margin-top: 20px; margin-left: 20px;"></a>
+</header>
+
+<div class="container"></div>
 
+<main>
+    <section class="user-container login-section--display">
+        <div class="back">
+            <div class="registration">
+                <div class="grid-two--column">
+                    <div class="form-text">
+                        <h2>Welcome Back!</h2>
+                        <p>To keep connected with us, please login with your personal information.</p> 
+                        <button class="login-btn">Login Here</button> 
+                    </div>
+                    <div class="registration-form">
+                        <h2>Create Account</h2>
+                        <div class="social-icons">
+                            <a href="https://accounts.google.com/v3/signin/identifier?ifkv=ASKXGp3o7JbWY-Xl_hjXMSHncDJR5Bg1tJjR-AcPnUkBcdPTNTLi-oYd-rV3dgIaufZcXA-T1n6HuQ&flowName=GlifWebSignIn&flowEntry=ServiceLogin&dsh=S604814220%3A1705302051981588&theme=glif" target="_blank"><i class="fa-brands fa-google"></i></a>
+                            <a href="#" target="_blank"><i class="fa-brands fa-github"></i></a>
+                            <a href="#" target="_blank"><i class="fa-brands fa-facebook"></i></a>
+                            <a href="#" target="_blank"><i class="fa-brands fa-instagram"></i></a>
+                        </div>
+                        <p>or</p>
+                        <form action="#" id="input-form">
+                            <div class="input-field">
+                                <label for="username">
+                                    <input type="text" id="username" placeholder="Name" required>
+                                </label>
                             </div>
-                            <p>or</p>
-                            <form action="#" id="input-form">
-                                <div class="input-field">
-                                    <label for="username">
-                                    <input type="text" name="#" id="username" placeholder="Name" required>
-                                </label></div>
-                                <div class="input-field">
+                            <div class="input-field">
                                 <label for="Email">
-                                    <input type="email" name="#" id="Email" placeholder="Email" required>
-                                </label></div>
-                                <div class="input-field">
+                                    <input type="email" id="Email" placeholder="Email" required>
+                                </label>
+                            </div>
+                            <div class="input-field">
                                 <label for="Password">
-                                    <input type="password" name="#" id="Password" placeholder="Password" required>
+                                    <input type="password" id="Password" placeholder="Password" required>
                                 </label>
-                                </div>
-                                <div class="input-field">
-                                    <input type="submit" value="register">
-                                </div>
-                            </form>
-                          </div>
-                        </div>
+                            </div>
+                            <div class="input-field">
+                                <input type="submit" value="Register">
+                            </div>
+                        </form>
                     </div>
-                    
-                    <div class="login">
-                       
-                        <div class="grid-two--column">
-                            <div class="form-text">
-                          <h2>Hello, Friend!</h2>
-                          <p>Enter your personal details and start journey with us</p> 
-                          <button class="registration-btn">Register Here</button> 
-                          </div>
-                          <div class="login-form">
-                            <h2>Sign In</h2>
-                            <div class="social-icons">
-                                <a href="https://accounts.google.com/v3/signin/identifier?ifkv=ASKXGp3o7JbWY-Xl_hjXMSHncDJR5Bg1tJjR-AcPnUkBcdPTNTLi-oYd-rV3dgIaufZcXA-T1n6HuQ&flowName=GlifWebSignIn&flowEntry=ServiceLogin&dsh=S604814220%3A1705302051981588&theme=glif" target="_blank">
-                                <i class="fa-brands fa-google"></i></a>
-                                <a href="" target="_blank">
-                                    <i class="fa-brands fa-github"></i></a>
-                                <a href="" target="_blank">
-                                    <i class="fa-brands fa-facebook"></i>
-                                    
-                                </a>
-                                <a href="" target="_blank">
-                                    <i class="fa-brands fa-instagram"></i>
-                                    
-                                </a>
-                                
+                </div>
+            </div>
 
-                            </div>
-                            <p>or</p>
-                            <form action="#">
-                                
-                                <div class="input-field">
+            <div class="login">
+                <div class="grid-two--column">
+                    <div class="form-text">
+                        <h2>Hello, Friend!</h2>
+                        <p>Enter your personal details and start your journey with us</p> 
+                        <button class="registration-btn">Register Here</button> 
+                    </div>
+                    <div class="login-form">
+                        <h2>Sign In</h2>
+                        <div class="social-icons">
+                            <a href="https://accounts.google.com/v3/signin/identifier?ifkv=ASKXGp3o7JbWY-Xl_hjXMSHncDJR5Bg1tJjR-AcPnUkBcdPTNTLi-oYd-rV3dgIaufZcXA-T1n6HuQ&flowName=GlifWebSignIn&flowEntry=ServiceLogin&dsh=S604814220%3A1705302051981588&theme=glif" target="_blank"><i class="fa-brands fa-google"></i></a>
+                            <a href="#" target="_blank"><i class="fa-brands fa-github"></i></a>
+                            <a href="#" target="_blank"><i class="fa-brands fa-facebook"></i></a>
+                            <a href="#" target="_blank"><i class="fa-brands fa-instagram"></i></a>
+                        </div>
+                        <p>or</p>
+                        <form action="#" id="login-form">
+                            <div class="input-field">
                                 <label for="Email1">
-                                    <input type="email" name="#" id="Email1" placeholder="Email" required>
-                                </label></div>
-                                <div class="input-field">
+                                    <input type="email" id="Email1" placeholder="Email" required>
+                                </label>
+                            </div>
+                            <div class="input-field">
                                 <label for="Password1">
-                                    <input type="password" name="#" id="Password1" placeholder="Password" required>
+                                    <input type="password" id="Password1" placeholder="Password" required>
                                 </label>
-                                </div>
-                                <div class="input-field">
-                                    <input type="submit" value="Log In">
-                                </div>
-                            </form>
-                          </div>
-                        </div>
-                        </div>
-                    </div>
+                            </div>
+                            <div class="input-field">
+                                <input type="submit" value="Log In">
+                            </div>
+                        </form>
                     </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</main>
+
+<script>
+    document.getElementById("input-form").addEventListener('submit', function(event) {
+        event.preventDefault();
+        var email = document.getElementById("Email").value;
+        var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
+        if (!emailPattern.test(email)) {
+            alert("Please enter a valid email");
+            return;
+        } else {
+            alert("Registration successful!");
+            localStorage.setItem('isLoggedIn', 'true'); 
+            window.location.href = 'index.html';
+        }
+    });
+
+    document.getElementById("login-form").addEventListener('submit', function(event) {
+        event.preventDefault();
+        alert("Login successful!");
+        localStorage.setItem('isLoggedIn', 'true');
+        window.location.href = 'index.html';
+    });
 
-                </section>
-            </main>
-        </header>
-        <script>
-            document.getElementById("input-form").addEventListener('submit',function(event){
-                var email = document.getElementById("Email").value;
-                var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
-                if(!emailPattern.test(email)){
-                   alert("Please enter a valid email");
-                   return;
-                }
-                else{
-                    alert("Registration successful!");
-                }
-            });
-            const user_con=document.querySelector('.user-container');
-            const regis_btn=document.querySelector('.registration-btn');
-            const login_btn=document.querySelector('.login-btn');
+    const user_con = document.querySelector('.user-container');
+    const regis_btn = document.querySelector('.registration-btn');
+    const login_btn = document.querySelector('.login-btn');
 
-            regis_btn.addEventListener('click',()=>{
-                user_con.classList.add('login-section--display')
+    regis_btn.addEventListener('click', () => {
+        user_con.classList.add('login-section--display')
+    });
 
-            })
-            login_btn.addEventListener('click',()=>{
-                user_con.classList.remove('login-section--display')
-            })
-        </script>
+    login_btn.addEventListener('click', () => {
+        user_con.classList.remove('login-section--display')
+    });
+</script>
 
-       </body>
-</html> 
+</body>
+</html>
