From d89fbd9a319ab0b8f34cf1866c5142139993662a Mon Sep 17 00:00:00 2001
From: Devanshu Kumar Singh <console.uk123@gmail.com>
Date: Sat, 19 Oct 2024 22:26:37 +0530
Subject: [PATCH] solved issue #1542

---
 loginPage.html    |   4 +-
 registerpage.html | 157 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 159 insertions(+), 2 deletions(-)
 create mode 100644 registerpage.html
diff --git a/loginPage.html b/loginPage.html
index 43d7cc1e..cb70ae01 100644
--- a/loginPage.html
+++ b/loginPage.html
@@ -90,9 +90,9 @@ <h3>New here ?</h3>
             <p>
               Discover new experiences with BuddyTrail! <br> Create your account.
             </p>
-            <button class="btn transparent" id="sign-up-btn">
+            <a href="registerpage.html"><button class="btn transparent" id="sign-up-btn">
               Sign up
-            </button>
+            </button></a>
           </div>
           <img src="img/log.svg" class="image" alt="" />
         </div>
diff --git a/registerpage.html b/registerpage.html
new file mode 100644
index 00000000..98629917
--- /dev/null
+++ b/registerpage.html
@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Register & Login</title>
+    <link rel="stylesheet" href="loginPage.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  </head>
+  <body>
+    
+    <div class="container">
+      <div class="forms-container">
+        <div class="sign-in-signup">
+          <form action="#" class="sign-in-form">
+            <h2 class="title">Create Account</h2>
+            
+            <div class="input-field">
+              <i class="fas fa-user"></i>
+              <input type="text" placeholder=" Full Name" required />
+            </div>
+            <div class="input-field">
+                <i class="fa-solid fa-envelope"></i>
+                <input type="email" placeholder="Email" required />
+              </div>
+            <div class="input-field">
+              <i class="fas fa-lock"></i>
+              <input type="password" placeholder="Password" id="password" />
+              <i class="fas fa-eye password-toggle" onclick="togglePassword('password', this)"></i>
+            </div>
+            <div class="input-field">
+                <i class="fas fa-lock"></i>
+                <input type="password" placeholder=" Confirm Password" id="confirm-password" />
+                <i class="fas fa-eye password-toggle" onclick="togglePassword('confirm-password', this)"></i>
+              </div>
+            <button type="submit" class="btn solid" onclick="handleregister(event)">Register</button>
+          </form>
+            <p class="social-text" style="position: relative; bottom: 30px;">Or Sign Up using social platforms</p>
+            <div class="social-media" style="position: relative; bottom: 30px;">
+              <a href="https://www.google.com" target="_blank" class="social-icon" id="google">
+                <i class="fab fa-google"></i>
+              </a>
+              <button class="social-icon" id="githubSignInBtn">
+                <i class="fab fa-github"></i>
+              </button>
+            </div>
+          <form action="#" class="sign-up-form">
+            <h2 class="title">Sign up</h2>
+            <div class="input-field">
+              <i class="fas fa-user"></i>
+              <input type="text" placeholder="Username" />
+            </div>
+            <div class="input-field">
+              <i class="fas fa-envelope"></i>
+              <input type="email" placeholder="Email" />
+            </div>
+            <div class="input-field">
+              <i class="fas fa-lock"></i>
+              <input type="password" placeholder="Password" id="signup-password" />
+              <i class="fas fa-eye password-toggle" onclick="togglePassword('signup-password', this)"></i>
+            </div>
+            <div class="password-strength">
+              <div id="strength-weak"></div>
+              <div id="strength-medium"></div>
+              <div id="strength-strong"></div>
+            </div>
+            <input type="submit" class="btn" value="Sign up" />           
+          </form>
+        </div>
+      </div>
+    <script src="https://www.gstatic.com/firebasejs/9.18.0/firebase-app-compat.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.18.0/firebase-auth-compat.js"></script>
+    <script src="firebase.js"></script>
+    <script>
+      // Home button
+      document.getElementById('home-btn').addEventListener('click', function() {
+        window.location.href = "index.html";
+      });
+
+      function togglePassword(inputId, eyeIcon) {
+    const passwordField = document.getElementById(inputId);
+    const isPasswordVisible = passwordField.type === "text";
+    
+    if (isPasswordVisible) {
+        passwordField.type = "password";
+        eyeIcon.classList.remove("fa-eye-slash");
+        eyeIcon.classList.add("fa-eye");
+    } else {
+        passwordField.type = "text";
+        eyeIcon.classList.remove("fa-eye");
+        eyeIcon.classList.add("fa-eye-slash");
+    }
+}
+    </script>
+    <script>
+       function handleregister(event) {
+    // Prevent the form from submitting
+    event.preventDefault();
+
+    // Getting the values of the input fields
+    const fullName = document.querySelector('.sign-in-form input[type="text"]').value;
+    const email = document.querySelector('.sign-in-form input[type="email"]').value;
+    const password = document.querySelector('.sign-in-form input[type="password"]').value;
+    const confirmPassword = document.querySelectorAll('.sign-in-form input[type="password"]')[1].value;
+
+    // Checking if all fields are filled
+    if (!fullName || !email || !password || !confirmPassword) {
+        alert("Please fill all fields.");
+        return;
+    }
+
+    // Checking if password and confirm password match
+    if (password !== confirmPassword) {
+        alert("Passwords do not match.");
+        return;
+    }
+
+    alert("Your Account has been Created Successfully!");
+    window.location.href = "index.html"; // Redirect to index.html
+}
+    </script>
+      <div class="panels-container">
+        <div class="panel left-panel">
+          <div class="content">
+            <h3>Already Have a Account ?</h3>
+            <p>
+              Discover new experiences with BuddyTrail! <br>Signing in to your Account.
+            </p>
+            <button class="btn transparent" id="sign-up-btn">
+              Login
+            </button>
+          </div>
+          <img src="img/log.svg" class="image" alt="" />
+        </div>
+        <div class="panel right-panel">
+          <div class="content">
+            <h3>One of us ?</h3>
+            <p>
+              Welcome back to our community
+            </p>
+            <button class="btn transparent" id="sign-in-btn">
+              Sign in
+            </button>
+          </div>
+          <img src="img/register.svg" class="image" alt="" />
+        </div>
+      </div>
+    </div>
+    <a href="index.html" class="homeBtn">
+      <i class="fas fa-home"></i>
+    </a>
+    
+    <script src="auth.js"></script>
+    <script type="module" src="SignIn-Up-withGithub.js"></script>
+  </body>
+</html>
+
