Merge pull request #235 from prishsha/main

Forgot Password functionality added
07sumit1002 · Oct 6, 2024 · 07a0aaa · 07a0aaa
2 parents 1e76d2e + e999428
commit 07a0aaa
Show file tree

Hide file tree

Showing 4 changed files with 261 additions and 4 deletions.
diff --git a/forgot-password.css b/forgot-password.css
@@ -0,0 +1,196 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background: linear-gradient(135deg, #f0f0f0, #e5f0ff);
+}
+
+.container {
+    width: 100%;
+    height: 100%;
+    background: rgb(240, 240, 240);
+    display: flex;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+    border-radius: 15px;
+    overflow: hidden;
+}
+
+.left-section, .right-section {
+    padding: 20px;
+}
+
+.left-section {
+    flex: 3;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: rgb(240, 240, 240); /* Light Green */
+    text-align: center;
+}
+
+.animated-heading {
+    font-size: 50px;
+    font-weight: 600;               
+    margin-bottom: 20px;
+    color: #000000; /* Yellow */
+    animation: fadeIn 2s ease-in-out;
+}
+
+.description {
+    font-size: 16px;
+    color: #000000;
+    margin-bottom: 20px;
+    line-height: 1.5;
+}
+
+.login-form {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    width: 100%;
+    max-width: 300px;
+    margin-bottom: 20px;
+}
+
+.input-field {
+    padding: 12px 20px;
+    border: 2px solid #000000; /* Yellow */
+    border-radius: 90px;
+    font-size: 16px;
+    outline: none;
+    transition: border-color 0.3s;
+}
+
+.input-field:focus {
+    border-color: #000000; /* Darker Yellow */
+}
+
+.submit-button {
+    background-color: #000000; /* Yellow */
+    border: none;
+    color: white;
+    padding: 12px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    border-radius: 90px;
+    transition: background-color 0.3s, color 0.3s, transform 0.3s;
+    width: 100%;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.submit-button:hover {
+    background-color: #ffffff; /* Darker Yellow */
+    transform: scale(1.05);
+    color: #000000;
+    border:#000000;
+    border-style: groove;
+}
+
+
+.right-section {
+    flex: 7;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #f0f0f0;
+    position: relative;
+    overflow: hidden;
+    padding: 0;
+}
+
+.transition-image {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    opacity: 0;
+    transition: opacity 1s ease-in-out;
+}
+
+.transition-image:first-child {
+    opacity: 1;
+}
+
+@keyframes fadeIn {
+    0% { opacity: 0; transform: translateY(-20px); }
+    100% { opacity: 1; transform: translateY(0); }
+}
+
+.blinking-cursor {
+    font-weight: 100;
+    font-size: 50px;
+    color: #000000; /* Yellow */
+    animation: blink 1s step-end infinite;
+}
+
+@keyframes blink {
+    from, to {
+        color: transparent;
+    }
+    50% {
+        color: #070707; /* Yellow */
+    }
+}
+
+.back-button {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    background: rgb(240, 240, 240);
+    border: none;
+    color:rgb(240, 240, 240);
+    padding: 0px;
+    font-size: 16px;
+    cursor: pointer;
+    border-radius: 1%;
+    transition: background-color 0.3s, color 0.3s, transform 0.3s;
+}
+
+.back-button:hover {
+    transform: scale(1.25);
+    color: #000000; /* Yellow */
+}
+.already-signed-up .forgot-password{
+    font-size: 14px;
+    color: #000000;
+    margin-top: 20px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    text-decoration: none;
+    gap: 5px; /* Add some space between the text and the link */
+}
+a{
+    font-size: 14px;
+    color: blue;  
+    text-decoration: none; 
+    display: inline-block;
+}
+/* .already-signed-up span {
+    margin-bottom: 10px;
+    font-weight: 600;
+} */
+
+/* .already-signed-up a {
+    color: #FFA500; /* Yellow */
+    /* text-decoration: none;
+    font-weight: 600;
+    background-color: #E0FFD8;
+    padding: 10px 20px;
+    border-radius: 20px;
+    transition: color 0.3s, background-color 0.3s;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+} */ 
+
+/* .already-signed-up a:hover {
+    color: white;
+    background-color: #FFA500; /* Darker Yellow */
diff --git a/forgot-password.html b/forgot-password.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Forgot Password</title>
+    <link rel="stylesheet" href="forgot-password.css" />
+</head>
+
+<body>
+    <div class="container">
+        <div class="left-section">
+            <button class="back-button" onclick="window.location.href='index.html'"><img src="img/back_button.png"
+                    width="50px" height="50px" /></button>
+            <h1 class="animated-heading">Cab Rental<span class="blinking-cursor">|</span></h1>
+            <p class="description">
+                Welcome to Cab Rental, your go-to platform for sharing or renting a cab effortlessly. Whether you're
+                planning a quick trip across town or a long-distance journey, we provide a convenient and cost-effective
+                solution to meet your travel needs.
+            </p>
+            <form id="loginForm" class="login-form" action="register.php">
+                <input type="text" id="username" placeholder="Enter Username" class="input-field">
+                <input type="text" id="email" placeholder="Enter Email Id" class="input-field">
+                <button type="submit" class="submit-button">Send verification Code</button>
+            </form>
+        </div>
+        <div class="right-section">
+            <img src="./img/login_1.jpg" alt="car_pics" class="transition-image">
+            <img src="./img/login_2.jpg" alt="car_pics" class="transition-image">
+            <img src="./img/login_3.jpg" alt="car_pics" class="transition-image">
+            <img src="./img/login_4.jpg" alt="car_pics" class="transition-image">
+            <img src="./img/login_5.jpg" alt="car_pics" class="transition-image">
+            <img src="./img/login_6.jpg" alt="car_pics" class="transition-image">
+            <img src="./img/login_7.jpg" alt="car_pics" class="transition-image">
+        </div>
+    </div>
+
+    <script>
+        const images = document.querySelectorAll('.transition-image');
+        let currentImageIndex = 0;
+
+        function showNextImage() {
+            images[currentImageIndex].style.opacity = 0;
+            currentImageIndex = (currentImageIndex + 1) % images.length;
+            images[currentImageIndex].style.opacity = 1;
+        }
+
+        setInterval(showNextImage, 3000);
+        const clicked = document.querySelector('.submit-button');
+
+        clicked.addEventListener('click', () => {
+            alert("Verification Email sent");
+        });
+    </script>
+</body>
+
+</html>
diff --git a/login.css b/login.css
@@ -159,7 +159,7 @@ body {
     transform: scale(1.25);
     color: #000000; /* Yellow */
 }
-.already-signed-up {
+.already-signed-up .forgot-password{
     font-size: 14px;
     color: #000000;
     margin-top: 20px;
@@ -171,11 +171,10 @@ body {
 }
 a{
     font-size: 14px;
-    color: #000000;  
+    color: blue;  
     text-decoration: none; 
     display: inline-block;
 }
-
 /* .already-signed-up span {
     margin-bottom: 10px;
     font-weight: 600;

diff --git a/login.html b/login.html
@@ -21,7 +21,10 @@ <h1 class="animated-heading">Cab Rental<span class="blinking-cursor">|</span></h
                 <button type="submit" class="submit-button">Login</button>
             </form>
             <p class="already-signed-up">
-                Not signed up? <a href="./signup.html">Sign In</a>
+                Not signed up? <a href="./signup.html"> Sign In</a>
+            </p>
+            <p class="forgot password">
+                Forgot Password? <a href="./forgot-password.html">Click Here</a>
             </p>
         </div>
         <div class="right-section">