From 341902cb9abedb8a02544966563f9d49924ac0f3 Mon Sep 17 00:00:00 2001 From: saras-69 <115482884+saras-69@users.noreply.github.com> Date: Sun, 13 Oct 2024 02:37:58 +0530 Subject: [PATCH 1/4] login-signup-auth --- components/Navbar/Navbar.html | 12 +- index.html | 94 +++++---- pages/login-signup/login-signup.css | 294 +++++++++++++++++++++++++++ pages/login-signup/login-signup.html | 97 +++++++++ pages/login-signup/login-signup.js | 215 ++++++++++++++++++++ styles/styles.css | 1 + 6 files changed, 666 insertions(+), 47 deletions(-) create mode 100644 pages/login-signup/login-signup.css create mode 100644 pages/login-signup/login-signup.html create mode 100644 pages/login-signup/login-signup.js diff --git a/components/Navbar/Navbar.html b/components/Navbar/Navbar.html index 9b961235..389f0ad0 100644 --- a/components/Navbar/Navbar.html +++ b/components/Navbar/Navbar.html @@ -23,8 +23,9 @@
@@ -51,4 +57,4 @@
- + \ No newline at end of file diff --git a/index.html b/index.html index ff2221da..d543f376 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,6 @@
-

Welcome to PathSphere

@@ -30,6 +29,10 @@

Welcome to PathSphere

Find Jobs + + + Register +
@@ -54,54 +57,57 @@

Forum

Join the Forum
-

Testimonials

+

Testimonials

Here are the testimonials and reviews.

Explore
+
+

Login

+

Access your account to manage your applications and profile.

+ + + Login + +
- - -
- -
-
Job Portal
-

Job opportunities tailored for educators.

-
-
-
- -
-
Community Forums
-

Share resources, advice, experiences.

-
-
-
- -
-
Instant Notifications
-

Get real-time important updates.

-
-
-
- -
-
Save & Track
-

Bookmark and monitor application progress.

-
-
-
- -
-
Resume Builder
-

Create a professional profile easily.

-
-
- +
+ +
+
Job Portal
+

Job opportunities tailored for educators.

+
+
+
+ +
+
Community Forums
+

Share resources, advice, experiences.

+
+
+ +
+
Instant Notifications
+

Get real-time important updates.

+
+
+
+ +
+
Save & Track
+

Bookmark and monitor application progress.

+
+
+
+ +
+
Resume Builder
+

Create a professional profile easily.

+
+
-
@@ -198,13 +204,13 @@
EdTech Professional at Byju's
chatbotId: "7akUzokCgwR0gNp0m-qQF", domain: "www.chatbase.co" } - - + diff --git a/pages/login-signup/login-signup.css b/pages/login-signup/login-signup.css new file mode 100644 index 00000000..fce07ac1 --- /dev/null +++ b/pages/login-signup/login-signup.css @@ -0,0 +1,294 @@ +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #f0f0f0; + margin: 10px; /* Reduced gap around body */ + animation: backgroundAnimation 5s infinite alternate; +} + +@keyframes backgroundAnimation { + 0% { + background-color: #f0f0f0; + } + 50% { + background-color: #d0e8d0; + } + 100% { + background-color: #a0d4bc; + } +} + +.card { + width: 400px; + background: 34947c; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + overflow: hidden; + margin: 10px; /* Reduced gap around card */ + animation: cardAnimation 1s ease-in-out; +} + +@keyframes cardAnimation { + from { + transform: scale(0.9); + opacity: 0; + } + to { + transform: scale(1); + opacity: 1; + } +} + +.card-header, .card-footer { + padding: 16px; + text-align: center; + margin: 10px; /* Reduced gap around card header and footer */ +} + +.card-title { + font-size: 24px; + margin-bottom: 8px; + font-weight: bold; /* Make title bold */ + font-style: italic; /* Make title italic */ +} + +.card-description { + color: #666; +} + +.tabs { + display: flex; + justify-content: space-around; + border-bottom: 1px solid #ddd; + border-radius: 8px; + overflow: hidden; + margin: 10px; /* Reduced gap around tabs */ + background-color: rgb(240, 236, 236); +} + +.tabs button { + flex: 1; + padding: 8px; /* Reduced padding to make the height smaller */ + background: none; + border: none; + cursor: pointer; + font-size: 16px; + border-radius: 8px; + margin: 5px; + color: darkgrey; + transition: background-color 0.3s, color 0.3s; +} + +.tabs button.active { + border-bottom: 2px solid #eceef0; + color: rgb(236, 232, 232); /* Change text color to black when active */ + background-color: #5a926b; /* Change background color to white when active */ +} + +.tabs button:hover { + background-color: rgb(255, 255, 255); + color: darkgrey; +} + +.tabs button.active:hover { + background-color: rgb(204, 160, 103); + color: rgb(0, 0, 0); +} + +.tabs button:not(.active) { + background-color: transparent; + color: darkgrey; +} + +.tab-content { + display: none; + padding: 16px; + margin: 10px; /* Reduced gap around tab content */ +} + +.tab-content.active { + display: block; +} + +.form-group { + margin-bottom: 16px; + margin: 10px; /* Reduced gap around form group */ + position: relative; /* Add relative positioning for icon positioning */ +} + +.form-group label { + display: block; + margin-bottom: 8px; + font-weight: bold; /* Make labels bold */ +} + +.form-group input { + width: 100%; + padding: 8px; + padding-right: 40px; /* Add padding to the right to make room for the icon */ + box-sizing: border-box; + border-radius: 8px; /* Add round border to input tags */ + border: 2px solid grey; /* Add 2px grey border to input tags */ + transition: border-color 0.3s; /* Smooth transition for border color */ + margin: 10px 0; /* Reduced gap around input fields */ + animation: inputAnimation 0.5s ease-in-out; +} + +@keyframes inputAnimation { + from { + transform: translateY(-10px); + opacity: 0; + } + to { + transform: translateY(0); + opacity: 1; + } +} + +.form-group input:hover { + border-color: #888a8d; /* Change border color on hover */ +} + +.form-group input:focus { + border-color: darkgrey; /* Change border color to dark grey on focus */ + outline: none; /* Remove default outline */ +} + +.form-group .toggle-password { + position: absolute; + right: 16px; + top: 50%; + transform: translateY(-50%); + cursor: pointer; + color: #888a8d; + font-size: 1.2em; /* Adjust the size of the icon */ + margin-top: 12px; /* Add top margin of 1px */ +} + +.form-group .toggle-password:hover { + color: darkgrey; +} + +.btn { + width: 100%; + padding: 12px; + background-color: #0b0c0c; + color: white; + border: none; + cursor: pointer; + margin: 10px 0; /* Reduced gap around buttons */ + border-radius: 50px; /* Make buttons round */ + transition: background-color 0.3s, transform 0.3s; +} + +.btn:hover { + background-color: #333; + transform: translateY(-2px); +} + +.btn:disabled { + background-color: #aaa; +} + +.card-footer p { + font-size: 12px; + color: #666; +} + +.error { + color: red; + font-size: 12px; + margin-top: -12px; + margin-bottom: 12px; +} + +.success { + color: green; + font-size: 14px; + margin-top: 12px; + display: none; +} + +.forgot-password { + text-align: right; + margin-top: -10px; + margin-bottom: 10px; +} + +.forgot-password a { + color: #3b56cc; + text-decoration: none; + font-size: 12px; +} + +.forgot-password a:hover { + text-decoration: underline; +} + +.already-have-account { + text-align: center; + margin-top: 10px; +} + +.already-have-account a { + color: #3b56cc; + text-decoration: none; + font-size: 12px; +} + +.already-have-account a:hover { + text-decoration: underline; +} + +.modal { + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.4); + justify-content: center; + align-items: center; +} + +.modal-content { + background-color: #fefefe; + margin: auto; + padding: 20px; + border: 1px solid #888; + width: 80%; + max-width: 400px; + border-radius: 8px; + animation: modalAnimation 0.5s ease-in-out; +} + +@keyframes modalAnimation { + from { + transform: translateY(-20px); + opacity: 0; + } + to { + transform: translateY(0); + opacity: 1; + } +} + +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: rgb(0, 0, 0); + text-decoration: none; + cursor: pointer; +} \ No newline at end of file diff --git a/pages/login-signup/login-signup.html b/pages/login-signup/login-signup.html new file mode 100644 index 00000000..d8684a0e --- /dev/null +++ b/pages/login-signup/login-signup.html @@ -0,0 +1,97 @@ + + + + + + PathSphere + + + + +
+
+
PathSphere
+
+ Your gateway to educational and professional resources
+
+
+ + +
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ Forgot Password? +
+ +
Login successful!
+
+
+
+
+
+ + +
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ +
Signup successful!
+
+ +
+
+
+

By continuing, you agree to our Terms of Service and Privacy Policy

+
+
+ + + + + + + \ No newline at end of file diff --git a/pages/login-signup/login-signup.js b/pages/login-signup/login-signup.js new file mode 100644 index 00000000..2a894dd8 --- /dev/null +++ b/pages/login-signup/login-signup.js @@ -0,0 +1,215 @@ +document.querySelectorAll('.tab-link').forEach(button => { + button.addEventListener('click', () => { + document.querySelectorAll('.tab-link').forEach(btn => btn.classList.remove('active')); + document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active')); + + button.classList.add('active'); + document.getElementById(button.dataset.tab).classList.add('active'); + animateTabContent(document.getElementById(button.dataset.tab)); + }); +}); + +function animateTabContent(tabContent) { + tabContent.style.opacity = 0; + setTimeout(() => { + tabContent.style.opacity = 1; + tabContent.style.transition = 'opacity 0.5s'; + }, 50); +} + +function validateEmail(email) { + const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return re.test(String(email).toLowerCase()); +} + +function validatePassword(password) { + return password.length >= 6; +} + +document.getElementById('login-form').addEventListener('submit', async (event) => { + event.preventDefault(); + const email = document.getElementById('login-email').value; + const password = document.getElementById('login-password').value; + const emailError = document.getElementById('login-email-error'); + const passwordError = document.getElementById('login-password-error'); + const successMessage = document.getElementById('login-success'); + + let valid = true; + + if (!validateEmail(email)) { + emailError.textContent = 'Invalid email address'; + valid = false; + } else { + emailError.textContent = ''; + } + + if (!validatePassword(password)) { + passwordError.textContent = 'Password must be at least 6 characters'; + valid = false; + } else { + passwordError.textContent = ''; + } + + if (valid) { + const loginBtn = document.getElementById('login-btn'); + loginBtn.disabled = true; + loginBtn.textContent = 'Logging in...'; + console.log('Login submitted'); + setTimeout(() => { + loginBtn.disabled = false; + loginBtn.textContent = 'Login'; + successMessage.style.display = 'block'; + successMessage.style.opacity = 0; + setTimeout(() => { + successMessage.style.opacity = 1; + successMessage.style.transition = 'opacity 0.5s'; + }, 50); + localStorage.setItem('isLoggedIn', 'true'); // Store login status + setTimeout(() => { + successMessage.style.display = 'none'; + const urlParams = new URLSearchParams(window.location.search); + const redirect = urlParams.get('redirect'); + if (redirect === 'scholarships') { + window.location.href = '/pages/scholarship-feature/scholarships.html'; // Redirect to scholarships page after login + } + }, 2000); // Hide success message after 2 seconds + }, 2000); + } +}); + +document.getElementById('signup-form').addEventListener('submit', async (event) => { + event.preventDefault(); + const email = document.getElementById('signup-email').value; + const password = document.getElementById('signup-password').value; + const confirmPassword = document.getElementById('signup-confirm-password').value; + const emailError = document.getElementById('signup-email-error'); + const passwordError = document.getElementById('signup-password-error'); + const confirmPasswordError = document.getElementById('signup-confirm-password-error'); + const successMessage = document.getElementById('signup-success'); + + let valid = true; + + if (!validateEmail(email)) { + emailError.textContent = 'Invalid email address'; + valid = false; + } else { + emailError.textContent = ''; + } + + if (!validatePassword(password)) { + passwordError.textContent = 'Password must be at least 6 characters'; + valid = false; + } else { + passwordError.textContent = ''; + } + + if (password !== confirmPassword) { + confirmPasswordError.textContent = 'Passwords do not match'; + valid = false; + } else { + confirmPasswordError.textContent = ''; + } + + if (valid) { + const signupBtn = document.getElementById('signup-btn'); + signupBtn.disabled = true; + signupBtn.textContent = 'Signing up...'; + console.log('Signup submitted'); + setTimeout(() => { + signupBtn.disabled = false; + signupBtn.textContent = 'Sign Up'; + successMessage.style.display = 'block'; + successMessage.style.opacity = 0; + setTimeout(() => { + successMessage.style.opacity = 1; + successMessage.style.transition = 'opacity 0.5s'; + }, 50); + setTimeout(() => { + successMessage.style.display = 'none'; + switchToLogin(); // Switch to login tab after successful signup + }, 2000); // Hide success message after 2 seconds + }, 2000); + } +}); + +// Clear success message on user interaction +document.querySelectorAll('#signup-form input').forEach(input => { + input.addEventListener('input', () => { + document.getElementById('signup-success').style.display = 'none'; + }); +}); + +document.querySelectorAll('#login-form input').forEach(input => { + input.addEventListener('input', () => { + document.getElementById('login-success').style.display = 'none'; + }); +}); + +function togglePassword(id) { + const input = document.getElementById(id); + const icon = input.nextElementSibling; + if (input.type === 'password') { + input.type = 'text'; + icon.classList.remove('fa-eye'); + icon.classList.add('fa-eye-slash'); + } else { + input.type = 'password'; + icon.classList.remove('fa-eye-slash'); + icon.classList.add('fa-eye'); + } +} + +function openModal() { + const modal = document.getElementById('passwordRecoveryModal'); + modal.style.display = 'flex'; + modal.style.opacity = 0; + setTimeout(() => { + modal.style.opacity = 1; + modal.style.transition = 'opacity 0.5s'; + }, 50); +} + +function closeModal() { + const modal = document.getElementById('passwordRecoveryModal'); + modal.style.opacity = 0; + setTimeout(() => { + modal.style.display = 'none'; + }, 500); +} + +document.getElementById('password-recovery-form').addEventListener('submit', async (event) => { + event.preventDefault(); + const email = document.getElementById('recovery-email').value; + const emailError = document.getElementById('recovery-email-error'); + const successMessage = document.getElementById('recovery-success'); + + if (!validateEmail(email)) { + emailError.textContent = 'Invalid email address'; + } else { + emailError.textContent = ''; + // Simulate sending recovery email + console.log('Recovery email sent'); + successMessage.style.display = 'block'; + successMessage.style.opacity = 0; + setTimeout(() => { + successMessage.style.opacity = 1; + successMessage.style.transition = 'opacity 0.5s'; + }, 50); + setTimeout(() => { + successMessage.style.display = 'none'; + closeModal(); + }, 3000); // Hide success message after 3 seconds + } +}); + +function switchToLogin() { + document.querySelectorAll('.tab-link').forEach(btn => btn.classList.remove('active')); + document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active')); + + const loginTab = document.querySelector('.tab-link[data-tab="login"]'); + const loginContent = document.getElementById('login'); + + loginTab.classList.add('active'); + loginContent.classList.add('active'); + animateTabContent(loginContent); +} \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css index d5468687..7cff15b3 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -272,6 +272,7 @@ nav { max-width: 1200px; margin: 0 auto; padding: 0 20px; + height: 40px; } .logo { From 7669ddceaeaad697ea7d9ed4d7df1a8bfa2bcbbf Mon Sep 17 00:00:00 2001 From: saras-69 <115482884+saras-69@users.noreply.github.com> Date: Sun, 13 Oct 2024 23:07:24 +0530 Subject: [PATCH 2/4] fix-UI --- styles/styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index 71a376f5..d0d74113 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -270,10 +270,10 @@ nav { display: flex; justify-content: space-between; align-items: center; - max-width: 1200px; + max-width: 1300px; margin: 0 auto; padding: 0 20px; - height: 40px; + } .logo { From d2ca01727877d6d8cf4160180d169d51a5e9d1df Mon Sep 17 00:00:00 2001 From: saras-69 <115482884+saras-69@users.noreply.github.com> Date: Mon, 14 Oct 2024 15:41:52 +0530 Subject: [PATCH 3/4] Changes in title --- pages/login-signup/login-signup.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/login-signup/login-signup.html b/pages/login-signup/login-signup.html index d8684a0e..722d6f2e 100644 --- a/pages/login-signup/login-signup.html +++ b/pages/login-signup/login-signup.html @@ -3,7 +3,7 @@ - PathSphere + Sign in From d8c46e3e6dc66658af0018c6ea3b14f1834f0e1e Mon Sep 17 00:00:00 2001 From: saras-69 <115482884+saras-69@users.noreply.github.com> Date: Mon, 14 Oct 2024 15:51:16 +0530 Subject: [PATCH 4/4] Update pages/login-signup/login-signup.html Co-authored-by: Aditya Bhaumik <92214013+aditya-bhaumik@users.noreply.github.com> --- pages/login-signup/login-signup.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/login-signup/login-signup.html b/pages/login-signup/login-signup.html index 722d6f2e..aac226c5 100644 --- a/pages/login-signup/login-signup.html +++ b/pages/login-signup/login-signup.html @@ -3,7 +3,7 @@ - Sign in + Login / Sign up