|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>Login - Secure Messaging by [Glz_SQL]</title> |
|
<style> |
|
body { |
|
font-family: Arial, sans-serif; |
|
background-color: #f0f0f0; |
|
} |
|
|
|
.login-container { |
|
width: 500px; |
|
height: 400px; |
|
margin: 100px auto; |
|
padding: 40px; |
|
background-color: #ffffff; |
|
border-radius: 10px; |
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); |
|
} |
|
|
|
.login-container h1 { |
|
text-align: center; |
|
color: #3498db; |
|
} |
|
|
|
.input-group { |
|
margin-bottom: 30px; |
|
} |
|
|
|
.input-group label { |
|
display: block; |
|
margin-bottom: 5px; |
|
font-weight: bold; |
|
} |
|
|
|
.input-group input { |
|
width: 90%; |
|
padding: 20px; |
|
border: 1px solid #ccc; |
|
border-radius: 5px; |
|
} |
|
|
|
.login-btn { |
|
width: 100%; |
|
padding: 20px; |
|
background-color: #3498db; |
|
color: #ffffff; |
|
border: none; |
|
border-radius: 5px; |
|
cursor: pointer; |
|
} |
|
|
|
.login-btn:hover { |
|
background-color: #20efbb; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="login-container"> |
|
<h1>Login</h1> |
|
<form id="login-form" method='post'> |
|
<div class="input-group"> |
|
<label for="username">Username</label> |
|
<input type="text" id="username" name="username" required> |
|
</div> |
|
<div class="input-group"> |
|
<label for="password">Password</label> |
|
<input type="password" id="password" name="password" required> |
|
</div> |
|
<button class="login-btn" type="submit">Login</button> |
|
</form> |
|
</div> |
|
</body> |
|
</html> |
|
|
