Merge branch 'apu52:main' into new2

apu52 · Nov 9, 2024 · bd44d3e · bd44d3e
2 parents 834c46a + 74e1043
commit bd44d3e
Show file tree

Hide file tree

Showing 4 changed files with 317 additions and 71 deletions.
diff --git a/forgotPassword.html b/forgotPassword.html
@@ -0,0 +1,244 @@
+<!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="icon" type="image/x-icon" href="log/favicon.ico">
+    <link href="https://cdn.lineicons.com/4.0/lineicons.css" rel="stylesheet" />
+    <script src="https://kit.fontawesome.com/f2e55912f8.js" crossorigin="anonymous"></script>
+
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <style>
+        @import url("https://fonts.googleapis.com/css2?family=Poppins");
+
+        * {
+            box-sizing: border-box;
+        }
+
+        body {
+            display: flex;
+            background-color: #f6f5f7;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            font-family: "Poppins", sans-serif;
+            overflow: hidden;
+            height: 100vh;
+            background: url("login/Aboe.gif") no-repeat center center fixed;
+            background-size: cover;
+            opacity: 1.2;
+        }
+
+        .main-container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background: url("login/Aboe.gif") no-repeat center center fixed;
+            background-color: rgba(255, 255, 255, 0.8);
+            border-radius: 25px;
+            box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+            padding: 20px;
+            animation: fadeIn 1s ease-in-out;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: scale(0.9);
+            }
+
+            to {
+                opacity: 1;
+                transform: scale(1);
+            }
+        }
+
+        .container {
+            background-color: rgba(255, 255, 255, 0.3);
+            backdrop-filter: blur(10px);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 50px;
+            border-radius: 10px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+
+        form {
+            background-color: #fff;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            padding: 0 50px;
+            height: 100%;
+            text-align: center;
+        }
+
+        input {
+            background-color: #eee;
+            border-radius: 10px;
+            border: none;
+            padding: 12px 15px;
+            margin: 8px 0;
+            width: 100%;
+        }
+
+        .form-container {
+            display: flex;
+            flex-direction: column;
+            background-color: transparent;
+            align-items: center;
+        }
+
+        .form-container h1 {
+            margin-bottom: 20px;
+        }
+
+        .form-container input {
+            width: 100%;
+            padding: 10px;
+            margin-bottom: 10px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+
+        .form-container button {
+            padding: 10px 20px;
+            border-radius: 25px;
+            font-size: 16px;
+            border: none;
+            cursor: pointer;
+            background-color: #4bb6b7;
+            color: white;
+        }
+
+        .form-container button:hover {
+            background-color: #4bb6b7;
+        }
+
+        .button-container {
+            display: flex;
+            justify-content: space-between 100px;
+            margin-top: 30px;
+            width: 100%;
+        }
+
+        .home-button {
+            padding: 10px 20px;
+            border-radius: 50%;
+            font-size: 16px;
+            border: none;
+            cursor: pointer;
+            background-color: #4bb6b7;
+            color: white;
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+        }
+
+        .back-button {
+            padding: 10px 20px;
+            border-radius: 50%;
+            font-size: 16px;
+            border: none;
+            cursor: pointer;
+            background-color: #4bb6b7;
+            color: white;
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+            margin-right: 100px;
+        }
+
+        .back-button i,
+        .home-button i {
+            margin-right: 8px;
+        }
+
+        .back-button:hover,
+        .home-button:hover {
+            background-color: #4bb6b7;
+        }
+
+        a {
+            text-decoration: none;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="main-container">
+        <div class="container">
+            <div class="form-container">
+                <form id="forgotPasswordForm">
+                    <h1>Forgot Password</h1>
+                    <input type="email" placeholder="Enter your email" id="recoveryEmail" required>
+                    <button type="submit">Send Recovery Link</button>
+                </form>
+                <div class="button-container">
+                    <a href="newLogin.html" class="no-underline">
+                        <button type="button" class="back-button">
+                            <i class="lni lni-arrow-left"></i> Back to Login
+                        </button>
+                    </a>
+                    <a href="index.html" class="no-underline">
+                        <button type="button" class="home-button">
+                            <i class="lni lni-home"></i> Home
+                        </button>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+            document.getElementById("forgotPasswordForm").addEventListener("submit", function (event) {
+                event.preventDefault();
+                const recoveryEmail = document.getElementById("recoveryEmail").value;
+                if (!validateEmail(recoveryEmail)) {
+                    alert("Please enter a valid email address");
+                    return;
+                }
+
+                // Prepare data for backend integration
+                const data = {
+                    email: recoveryEmail
+                };
+
+                // Implement your password recovery logic here
+                fetch('YOUR_BACKEND_ENDPOINT', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(data)
+                })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.success) {
+                            alert("Password recovery link has been sent to your email address");
+                        } else {
+                            alert("An error occurred. Please try again.");
+                        }
+                    })
+                    .catch((error) => {
+                        console.error('Error:', error);
+                        alert("An error occurred. Please try again.");
+                    });
+            });
+
+            function validateEmail(email) {
+                const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+                return re.test(email);
+            }
+        });
+    </script>
+</body>
+
+</html>