Untitled

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    
    
	<style>
	body
	{
	    margin: 0;
	    padding: 0;
	    background-color:rgba(201, 202, 192, 0.729);
	    font-family: 'Arial';
	}
	
	.container{
		width: 350px;
	    display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
	
	.title{
	    
	    text-align: center;
	    font-family:'Courier New', Courier, monospace;
	    color:rgb(37, 13, 13);
	    font-size: 40px;
	    text-shadow: 8px 7px 10px rgb(72, 72, 70);
	    text-decoration: underline;
	    text-decoration-color: rgb(124, 124, 73);
	    
	}
	.login{
	        display: flex;
	       
	        margin:50px 20px 0px 140px;
	        padding: 30px 80px 50px 80px;
	        background-color: rgb(181, 187, 233);
	        border-radius: 18px;
	        box-shadow:  5px 9px 20px 2px gray;
	
	}
	
	.btn{
	    color:white;
	    margin-left: 120px;
	    margin-top: 20px;
	    width:70px;
	    height:35px;
	    border-radius: 7px;
	    background-color: rgb(40, 59, 166)
	}
	
	.btn:hover{
	    background-color: rgb(189, 187, 213);
	    color:rgb(17, 17, 101);
	}
	.form-title{
	    text-align: center;
	    font-family: 'Courier New', Courier, monospace;
	    color: #160e5e;
	    padding: 20px;
	    font-size: 28px;
	    text-decoration: underline;
	    text-decoration-color: purple;
	    text-shadow:5px 7px 6px gray;
	}
	
	#Uname{
	    width: 300px;
	    height: 30px;
	    border: none;
	    border-radius: 3px;
	    padding-left: 8px;
	    margin-top: 8px;
	    margin-bottom: 20px;
	}
	#Pass{
	    width: 300px;
	    height: 30px;
	    border: none;
	    border-radius: 3px;
	    padding-left: 8px;
	    margin-top: 8px;
	    margin-bottom: 10px;
	
	}
	
	b{
	    color:rgb(15, 8, 52);
	    font-size: 17px;
	}
	.title{
	    
	    text-align: center;
	    margin-top: 50px;
	    margin-right: 14px;
	    font-family:'Courier New', Courier, monospace;
	    color:rgb(37, 13, 13);
	    font-size: 40px;
	    text-shadow: 8px 7px 10px rgb(72, 72, 70);
	    text-decoration: underline;
	    text-decoration-color: rgb(124, 124, 73);
	    
	}
	.admin-login-container{
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    margin-top: 300px;
	}
	
	.links{
	    border: 1px solid gray;
	    margin:10px;
	    padding:10px;
	    border-radius: 5px;
	    box-shadow: 5px 5px 8px purple;
	    font-size: 20px;
	    color:black;
	    text-decoration: none;
	    text-shadow: 3px 3px 6px gray;
	    
	}
	.links:hover{
	    color:rgb(185, 179, 179);
	    background-color: rgb(52, 42, 124);
	    text-shadow: 3px 3px 6px rgb(7, 7, 7);
	}


	</style>
    

</head>


<body>

    

    <div class="container">
		<select id="selector">
			<option value="admin">admin</option>
			<option value="underwriter">underwriter</option>
		</select>
        

        <div class="login" id="admin-login">
            <form action="AdminHomePage" method="post">
                <h2 class="form-title">ADMIN LOGIN</h2>
                <label>
                    <b>User Name:</b>
                </label>
                <input type="text" id="Uname" name="adusername" placeholder="Username">
                <label>
                    <b>Password:</b>
                </label>
                <input type="Password" id="Pass" name= "adpass" placeholder="Password">
                <button type="submit" class="btn">
                    Log In
                </button>
    
    
            </form>
        </div>
    
        <div class="login" id="underwriter-login">
            <form action="UnderWriterHomePage" method="post">
                <h2 class="form-title">UNDERWRITER LOGIN</h2>
                <label>
                    <b>User Id:</b>
                </label>
                <input type="number" id="Uname" name="under-username" placeholder="User Id">
                <label>
                    <b>Password:</b>
                </label>
                <input type="Password" id="Pass" name="under-pass" placeholder="Password">

                <button type="submit" class="btn">
                    Log In
                </button>
    
            </form>
        </div>

    </div>
    <script>
		const toggleLogin = document.getElementById('selector');
		const adminLogin = document.getElementById('admin-login');
		const underwriterLogin = document.getElementById('underwriter-login');
		underwriterLogin.style.display = 'none';
		toggleLogin.addEventListener("change", (e)=>{
			console.log(toggleLogin.value);
			if(toggleLogin.value=='underwriter'){
				adminLogin.style.display = 'none';
				underwriterLogin.style.display = 'block';
			}else if(toggleLogin.value=='admin'){
				adminLogin.style.display = 'block';
				underwriterLogin.style.display = 'none';
			}
			
		})


    </script>
</body>


</html>
Editor is loading...