59 lines
3.5 KiB
HTML
59 lines
3.5 KiB
HTML
<html>
|
|
<head>
|
|
<title>Login</title>
|
|
<link rel="stylesheet" href="./login.css" type="text/css" />
|
|
</head>
|
|
|
|
<body>
|
|
<div id="area" style="text-align: center;">
|
|
<h1>Login</h1>
|
|
<!--input area-->
|
|
<form action = "./login.php" method="POST">
|
|
<input type="text" name="user" placeholder="Username" required>
|
|
<br><br>
|
|
<input type="password" name="pwd" placeholder="Password" required>
|
|
<br><br>
|
|
<label for="buyer" id="lb_buyer" onmousedown="implement(this)"
|
|
style="border-top-left-radius: 5px; border-bottom-left-radius: 5px;">Buyer</label>
|
|
<input type="radio" value="buyer" name="user_type" id="buyer" hidden required/>
|
|
<label for="seller" id="lb_seller" onmousedown="implement(this)">Seller</label>
|
|
<input type="radio" value="seller" name="user_type" id="seller" hidden required/>
|
|
<label for="admin" id="lb_admin" onmousedown="implement(this)"
|
|
style="border-top-right-radius: 5px; border-bottom-right-radius: 5px;">Administrator</label>
|
|
<input type="radio" value="admin" name="user_type" id="admin" oninvalid="radio_alert()" hidden required/>
|
|
<p id="msg" style="color: red; font-size: small; padding: none; margin: none;"></p>
|
|
<button type="submit">Log in</button>
|
|
</form>
|
|
<p style="font-size: small;">Don't have an account? <a href="register.html" style="text-decoration: none;">Sign up</a></p>
|
|
</div>
|
|
|
|
<script>
|
|
//beautify label
|
|
function implement(tag){
|
|
document.getElementById("msg").innerHTML = "";
|
|
if(tag.id == "lb_buyer"){
|
|
document.getElementById("lb_seller").style = "reset";
|
|
document.getElementById("lb_admin").style = "border-top-right-radius: 5px; border-bottom-right-radius: 5px;";
|
|
tag.style="border-top-left-radius: 5px; border-bottom-left-radius: 5px; background-color: rgba(69, 67, 67, 0.6); color: white;";
|
|
}
|
|
if(tag.id == "lb_seller"){
|
|
document.getElementById("lb_buyer").style = "border-top-left-radius: 5px; border-bottom-left-radius: 5px;";
|
|
document.getElementById("lb_admin").style = "border-top-right-radius: 5px; border-bottom-right-radius: 5px;";
|
|
tag.style="background-color: rgba(69, 67, 67, 0.6); color: white;";
|
|
}
|
|
if(tag.id == "lb_admin"){
|
|
document.getElementById("lb_buyer").style = "border-top-left-radius: 5px; border-bottom-left-radius: 5px;";
|
|
document.getElementById("lb_seller").style = "reset";
|
|
tag.style="border-top-right-radius: 5px; border-bottom-right-radius: 5px; background-color: rgba(69, 67, 67, 0.6); color: white;";
|
|
}
|
|
}
|
|
//alert if user choose nothing
|
|
function radio_alert(){
|
|
document.getElementById("lb_buyer").style = "border-top-left-radius: 5px; border-bottom-left-radius: 5px; background-color: pink;";
|
|
document.getElementById("lb_seller").style = "background-color: pink;";
|
|
document.getElementById("lb_admin").style = "border-top-right-radius: 5px; border-bottom-right-radius: 5px; background-color: pink;";
|
|
document.getElementById("msg").innerHTML = "Please choose a user type!";
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |