diff --git a/index.html b/index.html index e91953f..0ca2975 100644 --- a/index.html +++ b/index.html @@ -472,6 +472,10 @@ <a href="nearby.html" id="contact-link" class="menu_links" data-link="Nearby"> <span>Nearby</span></a> </li> + <li> + <a href="signup.html" id="contact-link" class="menu_links" data-link="Signup/Register"> + <span>Signup/Register</span></a> + </li> <!-- Profile Icon --> diff --git a/signup.css b/signup.css new file mode 100644 index 0000000..9376241 --- /dev/null +++ b/signup.css @@ -0,0 +1,445 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap"); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body, +input { + font-family: "Poppins", sans-serif; +} + +.container { + position: relative; + width: 100%; + background-color: #fff; + min-height: 100vh; + overflow: hidden; +} + +.forms-container { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; +} + +.signin-signup { + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + left: 75%; + width: 50%; + transition: 1s 0.7s ease-in-out; + display: grid; + grid-template-columns: 1fr; + z-index: 5; +} + +#signup-success-message { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: rgba(0, 128, 0, 0.8); /* Green with translucency */ + color: white; + font-size: 18px; + text-align: center; + padding: 20px 40px; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + display: none; /* Hidden by default */ + z-index: 1000; +} +.hidden { + display: none; +} + + +form { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0rem 5rem; + transition: all 0.2s 0.7s; + overflow: hidden; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +form.sign-up-form { + opacity: 0; + z-index: 1; +} + +form.sign-in-form { + z-index: 2; +} + +.title { + font-size: 2.2rem; + color: #444; + margin-bottom: 10px; +} + +.input-field { + max-width: 380px; + width: 100%; + background-color: #f0f0f0; + margin: 10px 0; + height: 55px; + border-radius: 55px; + display: grid; + grid-template-columns: 15% 85%; + padding: 0 0.4rem; + position: relative; +} + +.input-field i { + text-align: center; + line-height: 55px; + color: #acacac; + transition: 0.5s; + font-size: 1.1rem; +} + +.input-field input { + background: none; + outline: none; + border: none; + line-height: 1; + font-weight: 600; + font-size: 1.1rem; + color: #333; +} + +.input-field input::placeholder { + color: #aaa; + font-weight: 500; +} + +.social-text { + padding: 0.7rem 0; + font-size: 1rem; +} + +.social-media { + display: flex; + justify-content: space-between; + align-items: center; +} + +.social-icon { + margin: 0 10px; +} + +.social-icon i { + transition: transform 0.2s ease-in-out; +} + +.social-icon:hover i { + transform: scale(1.1); +} + +.btn { + width: 150px; + background-color: #5995fd; + border: none; + outline: none; + height: 49px; + border-radius: 49px; + color: #fff; + text-transform: uppercase; + font-weight: 600; + margin: 10px 0; + cursor: pointer; + transition: 0.5s; +} + +.btn:hover { + background-color: #4d84e2; +} +.panels-container { + position: absolute; + height: 100%; + width: 100%; + top: 0; + left: 0; + display: grid; + grid-template-columns: repeat(2, 1fr); +} + +.container:before { + content: ""; + position: absolute; + height: 2000px; + width: 2000px; + top: -10%; + right: 48%; + transform: translateY(-50%); + background-image: linear-gradient(-45deg, #4481eb 0%, #04befe 100%); + transition: 1.8s ease-in-out; + border-radius: 50%; + z-index: 6; +} + +.image { + width: 100%; + transition: transform 1.1s ease-in-out; + transition-delay: 0.4s; +} + +.panel { + display: flex; + flex-direction: column; + justify-content: space-around; + text-align: center; + z-index: 6; +} + +.left-panel { + pointer-events: all; + padding: 4rem 17% 2rem 12%; +} + +.right-panel { + pointer-events: none; + padding: 3rem 12% 2rem 17%; +} + +.panel .content { + color: #fff; + transition: transform 0.9s ease-in-out; + transition-delay: 0.6s; +} + +.panel h3 { + font-weight: 600; + line-height: 1; + font-size: 1.5rem; +} + +.panel p { + font-size: 0.95rem; + padding: 0.7rem 0; +} + +.btn.transparent { + margin: 0; + background: none; + border: 2px solid #fff; + width: 130px; + height: 41px; + font-weight: 600; + font-size: 0.8rem; +} + +.right-panel .image, +.right-panel .content { + transform: translateX(800px); +} + +/* ANIMATION */ + +.container.sign-up-mode:before { + transform: translate(100%, -50%); + right: 52%; +} + +.container.sign-up-mode .left-panel .image, +.container.sign-up-mode .left-panel .content { + transform: translateX(-800px); +} + +.container.sign-up-mode .signin-signup { + left: 25%; +} + +.container.sign-up-mode form.sign-up-form { + opacity: 1; + z-index: 2; +} + +.container.sign-up-mode form.sign-in-form { + opacity: 0; + z-index: 1; +} + +.container.sign-up-mode .right-panel .image, +.container.sign-up-mode .right-panel .content { + transform: translateX(0%); +} + +.container.sign-up-mode .left-panel { + pointer-events: none; +} + +.container.sign-up-mode .right-panel { + pointer-events: all; +} + +@media (max-width: 870px) { + .container { + min-height: 800px; + height: 100vh; + } + .signin-signup { + width: 100%; + top: 95%; + transform: translate(-50%, -100%); + transition: 1s 0.8s ease-in-out; + } + + .signin-signup, + .container.sign-up-mode .signin-signup { + left: 50%; + } + + .panels-container { + grid-template-columns: 1fr; + grid-template-rows: 1fr 2fr 1fr; + } + + .panel { + flex-direction: row; + justify-content: space-around; + align-items: center; + padding: 2.5rem 8%; + grid-column: 1 / 2; + } + + .right-panel { + grid-row: 3 / 4; + } + + .left-panel { + grid-row: 1 / 2; + } + + .image { + width: 200px; + transition: transform 0.9s ease-in-out; + transition-delay: 0.6s; + } + + .panel .content { + padding-right: 15%; + transition: transform 0.9s ease-in-out; + transition-delay: 0.8s; + } + + .panel h3 { + font-size: 1.2rem; + } + + .panel p { + font-size: 0.7rem; + padding: 0.5rem 0; + } + + .btn.transparent { + width: 110px; + height: 35px; + font-size: 0.7rem; + } + + .container:before { + width: 1500px; + height: 1500px; + transform: translateX(-50%); + left: 30%; + bottom: 68%; + right: initial; + top: initial; + transition: 2s ease-in-out; + } + + .container.sign-up-mode:before { + transform: translate(-50%, 100%); + bottom: 32%; + right: initial; + } + + .container.sign-up-mode .left-panel .image, + .container.sign-up-mode .left-panel .content { + transform: translateY(-300px); + } + + .container.sign-up-mode .right-panel .image, + .container.sign-up-mode .right-panel .content { + transform: translateY(0px); + } + + .right-panel .image, + .right-panel .content { + transform: translateY(300px); + } + + .container.sign-up-mode .signin-signup { + top: 5%; + transform: translate(-50%, 0); + } +} + +@media (max-width: 570px) { + form { + padding: 0 1.5rem; + } + + .image { + display: none; + } + .panel .content { + padding: 0.5rem 1rem; + } + .container { + padding: 1.5rem; + } + + .container:before { + bottom: 72%; + left: 50%; + } + + .container.sign-up-mode:before { + bottom: 28%; + left: 50%; + } +} +.homeBtn { + position: absolute; + top: 20px; + left: 20px; + background: #4d84e2; + color: #000; + padding: 10px; + border-radius: 10px; + cursor: pointer; + transition: 0.3s; + z-index: 111; + text-decoration: none; + border: 1px solid #4d84e2; +} + +.homeBtn:hover { + background: #fff; + color: #4d84e2; + border: 1px solid #4d84e2; + transform: none; +} +.circle { + height: 35px; + width: 35px; + border-radius: 24px; + background-color: black; + position: fixed; + top: 0; + left: 0; + pointer-events: none; + z-index: 99999999; + /* Stays on top of all elements */ +} \ No newline at end of file diff --git a/signup.html b/signup.html new file mode 100644 index 0000000..40651e9 --- /dev/null +++ b/signup.html @@ -0,0 +1,452 @@ +<!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="signup.css" /> + <link rel="shortcut icon" href="ambulance.png" type="image/x-icon" /> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" /> +</head> +<div class="gtranslate_wrapper"></div> +<script>window.gtranslateSettings = { "default_language": "en", "detect_browser_language": true, "wrapper_selector": ".gtranslate_wrapper" }</script> +<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script> + +<body> + <!-- preloader --> + <div id="preloader"> + <div class="wrapper"> + <div class="box-wrap"> + <div class="box one"></div> + <div class="box two"></div> + <div class="box three"></div> + <div class="box four"></div> + <div class="box five"></div> + <div class="box six"></div> + </div> + </div> + </div> + <div class="circle"></div> + <div class="circle"></div> + <div class="circle"></div> + <div class="circle"></div> + <div class="circle"></div> + <div class="circle"></div> + <div class="circle"></div> + <div class="circle"></div> + <div class="circle"></div> + <div class="circle"></div> + <div class="circle"></div> + <div class="circle"></div> + <div class="circle"></div> + <div class="circle"></div> + <div class="circle"></div> + <div class="circle"></div> + <div class="circle"></div> + <div class="circle"></div> + <div class="circle"></div> + <div class="circle"></div> + <div class="circle"></div> + <div class="container"> + <div class="forms-container"> + <div class="signin-signup"> + <form action="#" class="sign-in-form" onsubmit="return validateSignInForm()"> + <h2 class="title">Sign in</h2> + <div class="input-field"> + <i class="fas fa-user"></i> + <input type="text" id="username" placeholder="Username" /> + </div> + <div class="input-field"> + <i class="fas fa-lock" id="toggle-password"></i> + <input type="password" placeholder="Password" id="password-input" /> + </div> + <div class="form-check d-flex"> + <input type="checkbox" class="form-check-input" id="remember-me" /> + <label class="form-check-label">Remember me</label> + </div> + + <input type="submit" value="Login" class="btn solid" /> + <p class="social-text">Or Sign in with social platforms</p> + <div class="social-media"> + <div class="social-icon g-signin2" id="google_btn"> + <i class="fab fa-google" style="font-size: 24px; color: #4285F4;"></i> + </div> + <a href="https://facebook.com/YourPage" target="_blank" class="social-icon"> + <i class="fab fa-facebook-f" style="font-size: 24px; color: #4267b2"></i> + </a> + <a href="https://github.com/YourGitHubProfile" target="_blank" class="social-icon"> + <i class="fab fa-github" style="font-size: 24px; color: #333"></i> + </a> + </div> + </form> + <script> + function validateSignInForm() { + const username = document.querySelector('.sign-in-form input[type="text"]').value; + const password = document.querySelector('.sign-in-form input[type="password"]').value; + + // Sign-in validation logic + if (username.trim() === "") { + alert("Please enter your username."); + return false; + } + + if (password.trim() === "") { + alert("Please enter your password."); + return false; + } + + // Simulate successful login + alert("You have successfully logged in to the website!"); + + // Redirect to the home screen after a short delay + setTimeout(function() { + window.location.href = "index.html"; + }, 2000); // Redirect after 2 seconds + + // If all validations pass, return true to allow form submission + return false; // Prevent form submission since we are handling the redirect + }; + </script> + <form action="#" class="sign-up-form" + style="background-color: #fff; padding: 20px;"> + <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" id="toggle-password-signup"></i> + <input type="password" placeholder="Password" id="password-input-signup" /> + </div> + + <!-- Password strength meter starts here (initially hidden) --> + <div id="password-strength-section" style="display: none;"> + <label for="password-input-signup">Password Strength:</label> + <div class="strength-meter" + style="width: 100%; max-width: 300px; height: 10px; background-color: #e0e0e0; border-radius: 5px; margin: 10px auto;"> + <div id="strength-bar-signup" + style="height: 100%; width: 1%; background-color: #d73f40; border-radius: 5px; transition: width 0.5s, background-color 0.5s;"> + </div> + </div> + <div class="strength-label" id="strength-label-signup" style="font-size: 14px; margin-top: 10px;">Weak</div> + </div> + <!-- Password strength meter ends here --> + <div class="form-check d-flex"> + <input type="checkbox" class="form-check-input" id="login-remember" /> + <label class="form-check-label">Remember me</label> + </div> + <input type="submit" class="btn" value="Sign up" /> + <p class="social-text">Or Sign up with social platforms</p> + <div class="social-media"> + <div class="social-icon g-signin2" id="google_btn"> + <i class="fab fa-google" style="font-size: 24px; color: #4285F4;"></i> + </div> + <a href="https://facebook.com/YourPage" target="_blank" class="social-icon"> + <i class="fab fa-facebook-f" style="font-size: 24px; color: #4267B2;"></i> + </a> + <a href="https://github.com/YourGitHubProfile" target="_blank" class="social-icon"> + <i class="fab fa-github" style="font-size: 24px; color: #333;"></i> + </a> + </div> + </form> + + <script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.2.0/zxcvbn.js"></script> + <script> + let passwordSignup = document.getElementById("password-input-signup"); + let strengthBarSignup = document.getElementById("strength-bar-signup"); + let strengthLabelSignup = document.getElementById("strength-label-signup"); + let passwordStrengthSection = document.getElementById("password-strength-section"); + + passwordSignup.oninput = function () { + let value = passwordSignup.value; + + // Show the strength meter when the user starts typing + if (value.length > 0) { + passwordStrengthSection.style.display = "block"; + } else { + passwordStrengthSection.style.display = "none"; + } + + let result = zxcvbn(value); + let score = result.score; // Score is between 0 and 4 + let widths = ["1%", "25%", "50%", "75%", "100%"]; + let colors = ["#d73f40", "#dc6551", "#f2b84f", "#bde952", "#3ba62f"]; + let labels = ["Very Weak", "Weak", "Fair", "Good", "Strong"]; + + strengthBarSignup.style.width = widths[score]; + strengthBarSignup.style.backgroundColor = colors[score]; + strengthLabelSignup.textContent = labels[score]; + }; + </script> + + </div> + </div> + + <div class="panels-container"> + <a href="index.html" class="homeBtn"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20" width="30" height="30"> + <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /> + </svg> + </a> + <div class="panel left-panel"> + <div class="content"> + <h3>New here ?</h3> + <p> + Create your account. + </p> + + <button class="btn transparent" id="sign-up-btn">Sign up</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 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> + <script src="preloader.js"></script> + <script> + const sign_in_btn = document.querySelector("#sign-in-btn"); + const sign_up_btn = document.querySelector("#sign-up-btn"); + const container = document.querySelector(".container"); + + sign_up_btn.addEventListener("click", () => { + container.classList.add("sign-up-mode"); + }); + + sign_in_btn.addEventListener("click", () => { + container.classList.remove("sign-up-mode"); + }); + + // Sign in form submission + document.querySelector(".sign-in-form").addEventListener("submit", async function (event) { + event.preventDefault(); + + const username = document.querySelector(".sign-in-form input[type='text']").value; + const password = document.querySelector(".sign-in-form input[type='password']").value; + + // Remove the below block of code when the server is ready (Written just for testing) + if (username === "username" && password === "123456") { + console.log("Login successful!"); + localStorage.setItem("userID", "7887892rdwed3") + localStorage.setItem("JWTtoken", "dummyToken123"); // Example token + localStorage.setItem("login", "success"); + window.location.href = "hospital.html"; + } + // Testing block ends here, proceed with actual request once the server is ready + + const data = JSON.stringify({ username, password }); + console.log(data); + + // Uncomment the below code when MongoDB is ready + /* + try { + const response = await fetch("http://localhost:3000/login", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: data, + }); + if (!response.ok) { + throw new Error("Login failed: " + response.statusText); + } + const result = await response.json(); + console.log("Server response:", result); + localStorage.setItem("token", result.token); + localStorage.setItem("userID", result.id); + console.log('Login successful!'); + window.location.href = "hospital.html"; + } catch (error) { + alert("Invalid username or password"); + console.error("Error during login:", error); + } + */ + }); + + + + // Uncomment the below code when MongoDB is ready + /* + try { + const response = await fetch("http://localhost:3000/signup", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: data, + }); + if (!response.ok) { + const errorData = await response.json(); + throw new Error(errorData.message || "Signup failed"); + } + const result = await response.json(); + console.log("Server response:", result); + alert("Signup successful!"); + window.location.href = "login.html"; + } catch (error) { + alert(error.message); + console.error("Error during signup:", error); + } + */ + + // Toggle password visibility + function togglePassword(fieldId, icon) { + const field = document.getElementById(fieldId); + const isPassword = field.type === "password"; + + // Toggle between 'password' and 'text' + field.type = isPassword ? "text" : "password"; + + // Change the icon class between eye and eye-slash + icon.classList.toggle("fa-lock-open", isPassword); + icon.classList.toggle("fa-lock", !isPassword); + } + + document + .getElementById("toggle-password") + .addEventListener("click", function () { + togglePassword("password-input", this); + }); + + document + .getElementById("toggle-password-signup") + .addEventListener("click", function () { + togglePassword("password-input-signup", this); + }); + + // Check password strength + function checkPasswordStrength() { + const password = document.querySelector( + ".sign-up-form input[type='password']" + ).value; + const strengthWeak = document.getElementById("strength-weak"); + const strengthMedium = document.getElementById("strength-medium"); + const strengthStrong = document.getElementById("strength-strong"); + + let strength = 0; + + if (password.length >= 8) strength++; + if (password.match(/[A-Z]/)) strength++; + if (password.match(/[a-z]/)) strength++; + if (password.match(/[0-9]/)) strength++; + if (password.match(/[^a-zA-Z0-9]/)) strength++; + + strengthWeak.className = ""; + strengthMedium.className = ""; + strengthStrong.className = ""; + + if (strength >= 1) strengthWeak.className = "weak"; + if (strength >= 3) strengthMedium.className = "medium"; + if (strength >= 5) strengthStrong.className = "strong"; + } + + document + .querySelector(".sign-up-form input[type='password']") + .addEventListener("input", checkPasswordStrength); + </script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.2/uuid.min.js"></script> + <script> + const coords = { x: 0, y: 0 }; + const circles = document.querySelectorAll(".circle"); + + const colors = [ + "#ffb56b", + "#fdaf69", + "#f89d63", + "#f59761", + "#ef865e", + "#ec805d", + "#e36e5c", + "#df685c", + "#d5585c", + "#d1525c", + "#c5415d", + "#c03b5d", + "#b22c5e", + "#ac265e", + "#9c155f", + "#950f5f", + "#830060", + "#7c0060", + "#680060", + "#60005f", + "#48005f", + "#3d005e", + ]; + + circles.forEach(function (circle, index) { + circle.x = 0; + circle.y = 0; + circle.style.backgroundColor = colors[index % colors.length]; + }); + + window.addEventListener("mousemove", function (e) { + coords.x = e.clientX; + coords.y = e.clientY; + }); + + function animateCircles() { + let x = coords.x; + let y = coords.y; + + circles.forEach(function (circle, index) { + circle.style.left = x - 12 + "px"; + circle.style.top = y - 12 + "px"; + + circle.style.scale = (circles.length - index) / circles.length; + + circle.x = x; + circle.y = y; + + const nextCircle = circles[index + 1] || circles[0]; + x += (nextCircle.x - x) * 0.3; + y += (nextCircle.y - y) * 0.3; + }); + + requestAnimationFrame(animateCircles); + } + + animateCircles(); + </script> + <script> + document.addEventListener("DOMContentLoaded", function () { + const rememberMeCheckbox = document.getElementById("remember-me"); + const usernameInput = document.getElementById("username"); + + // Load saved username if it exists + if (localStorage.getItem("rememberedUsername")) { + usernameInput.value = localStorage.getItem("rememberedUsername"); + rememberMeCheckbox.checked = true; + } + + // When the form is submitted, save the username if "Remember Me" is checked + document.querySelector(".sign-in-form").addEventListener("submit", function (e) { + e.preventDefault(); // Prevent default form submission + + if (rememberMeCheckbox.checked) { + localStorage.setItem("rememberedUsername", usernameInput.value); + } else { + localStorage.removeItem("rememberedUsername"); + } + // Add form submission logic here + }); + }); + + </script> + <script src="https://apis.google.com/js/platform.js" async defer></script> + <!-- <script src="Firebase.js" type="module"></script> --> +</body> + +</html> \ No newline at end of file