index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            font-family: 'Montserrat', sans-serif; /* Apply Google font globally */
        }
    </style>
    <script type="text/javascript" src="js/md5.js"></script>
    <script type="text/javascript" src="js/code.js"></script>

    <style>
        /* Body Styles */
        body {
            margin: 0;
            font-family: 'Ubuntu', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-image: url('images/loginbackground.png'); /* Background Image */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
        }

        /*Password reqs empty*/
    .bubble {
        display: inline-block;
        width: 12px;
        height: 12px;
        margin-right: 10px;
        border-radius: 50%;
        background-color: lightgray;
    }

/*Password reqs filled*/
    .bubble.filled {
        background-color: green;
    }

        /* Main container for the login box */
        #loginDiv, #registerPage {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 8px;
            box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
            padding: 40px;
            text-align: center;
            width: 350px;
            position: relative;
        }

        /* Title Styles */
        #inner-title {
            font-size: 24px;
            font-weight: 600;
            color: #000;
            margin-bottom: 30px;
        }

        /* Adjusting the overall box */
        form {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            width: 100%; /* Ensures form takes full width */
        }

        /* Fixing input fields alignment */
        input {
            width: calc(100% - 20px); /* Ensures the inputs align perfectly */
            padding: 14px;
            margin: 5px 0; /* Reducing unnecessary space */
            font-size: 16px;
            border-radius: 4px;
            border: 1px solid #ccc;
            outline: none;
            box-sizing: border-box; /* Ensures padding doesn’t affect the width */
        }

        /* Ensuring labels align properly */
        label {
            text-align: left;
            width: 100%;
            margin-top: 10px;
        }



        input::placeholder {
            color: #aaa;
        }
		
		.popup-content {
			text-align: left;
		}
		

        /* Button Styles */
        .buttons {
            width: 100%;
            background-color: #007bff;
            color: #fff;
            padding: 15px;
            font-size: 18px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 20px;
            transition: background-color 0.3s ease;
        }

        .buttons:hover {
            background-color: #0056b3;
        }

        /* Link Styles */
        #register p {
            margin-top: 20px;
            font-size: 14px;
        }

        #register a {
            color: #007bff;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        #register a:hover {
            color: #0056b3;
        }

        /* Background Overlay to darken the background image */
        body::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.4); /* Darkens the background image */
            z-index: -1;
        }

        /* Hide the Register Box initially */
        #registerPage {
            display: none;
        }

        /* Close Button Styling */
        .close {
            font-size: 24px;
            color: #000;
            position: absolute;
            top: 15px;
            right: 15px;
            cursor: pointer;
        }

		.input-container {
        position: relative;
        width: 100%;
    }

		/* Style the input with padding to make space for the icon */
		.input-container input {
			width: 100%;
			padding: 15px;
			padding-left: 40px; /* Add padding to the left to make space for the icon */
			font-size: 16px;
			border-radius: 4px;
			border: 1px solid #ccc;
			outline: none;
		}

		/* Adding the icon inside the input field as a background image */
		#UsernameL {
			background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);"><path d="M12 2a5 5 0 1 0 5 5 5 5 0 0 0-5-5zm0 8a3 3 0 1 1 3-3 3 3 0 0 1-3 3zm9 11v-1a7 7 0 0 0-7-7h-4a7 7 0 0 0-7 7v1h2v-1a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v1z"></path></svg>');
			background-position: 10px center;
			background-repeat: no-repeat;
			background-size: 24px;
		}
		/* Adding the lock icon inside the password input field as a background image */
		#PasswordL {
			background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);"><path d="M12 2C9.243 2 7 4.243 7 7v3H6c-1.103 0-2 .897-2 2v8c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2v-8c0-1.103-.897-2-2-2h-1V7c0-2.757-2.243-5-5-5zm6 10 .002 8H6v-8h12zm-9-2V7c0-1.654 1.346-3 3-3s3 1.346 3 3v3H9z"></path></svg>');
			background-position: 10px center;
			background-repeat: no-repeat;
			background-size: 24px;
		}

        #successMessage {
            display: none; /* Hidden by default */
            position: fixed; /* Makes the message appear on top of everything */
            top: 50%; /* Center vertically */
            left: 50%; /* Center horizontally */
            transform: translate(-50%, -50%); /* Shift by half its width and height */
            background-color: rgba(255, 255, 255, 0.9); 
            color: rgb(0, 0, 0);
            font-weight: bold;
            padding: 15px 30px; /* Space inside the banner */
            border-radius: 8px;
            z-index: 10000; /* Ensure it appears on top */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
        }

    </style>
</head>

<body>

	<div id="loginDiv">
		<form action="">
			<!-- Login Title  -->
			<span id="inner-title">Login</span>
			<!-- Login input boxes -->
			<div class="input-container">
				<input type="text" id="UsernameL" placeholder="Username" required>
			</div>
			<div class="input-container">
				<input type="password" id="PasswordL" placeholder="Password" required>
			</div>
			<!-- Login Button -->
			<button type="button" class="buttons" onclick="doLogin();">Login</button>
			<!-- Register link -->
			<div id="register">
				<p>No account? <a href="#" id="registerButton" onclick="showRegister()">Register</a></p>
			</div>
			<span class="text" id="loginResult"></span>
		</form>
	</div>
	
    <div id="successMessage" style="display:none; color: rgb(0, 0, 0); font-weight: bold;">User successfully registered.</div>


<!-- SignUp Box -->
<div id="registerPage" class="popper">
    <div class="popup-content">
        <!-- Close Button -->
        <span id="closeButton" class="close" onclick="hideRegister()">&times;</span>
        <h2>Register</h2>
        <form action="">
			<!--Filled out to SignUp to our application-->
			<div id="login-input">
				<label id="firstNameRegLabel" for="firstName">First Name:</label>
				<input type="text" id ="firstName"  placeholder="First Name" required>
			</div>
			<div id="login-input">
				<label id="lastNameRegLabel" for="lastName">Last Name:</label>
				<input type="text" id ="lastName"  placeholder="Last Name" required>
			</div>
			<div id="login-input">
				<label id="usernameRegLabel" for="Username">Username:</label>
				<input type="text" id="Username" placeholder="Username" required>
			</div>

            <ul id="passwordRequirements" style="list-style-type:none; padding-left: 0;">
                <li id="lengthReq"><span class="bubble"></span> At least 8 characters</li>
                <li id="upperReq"><span class="bubble"></span> At least one uppercase letter</li>
                <li id="lowerReq"><span class="bubble"></span> At least one lowercase letter</li>
                <li id="numberReq"><span class="bubble"></span> At least one number</li>
                <li id="specialReq"><span class="bubble"></span> At least one special character</li>
            </ul>

			<div id="login-input">
				<label id="passwordRegLabel" for="Password">Password:</label>
				<input type="password" id ="Password"  placeholder="Password" required>
			</div>

            <div id="login-input">
				<label id="passwordRegLabelConfirm" for="PasswordConfirm">Confirm Password:</label>
				<input type="password" id ="PasswordConfirm"  placeholder="Password" required>
			</div>
		        <!-- Register Button -->
			<button type="button" class="buttons" onclick="createAccount();"> Sign Up </button>
			<span class="text" id="registerResult"></span>
		</form>
    </div>
</div>


<script>
    function showRegister() {
        document.getElementById("loginDiv").style.display = "none"; // Hide the login form
        document.getElementById("registerPage").style.display = "block"; // Show the register form
    }
    function hideRegister() {
        document.getElementById("loginDiv").style.display = "block"; // Show the login form
        document.getElementById("registerPage").style.display = "none"; // Hide the register form
    }
</script>

</body>
</html>