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