<!DOCTYPE html>
<html>
<head>
<title>PhishGuardian</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<style>
.btn-spacing {
margin: 5px;
}
.form-container {
width: 300px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-color: #f9f9f9;
margin: auto;
}
.form-group label {
font-weight: bold;
}
.center-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.password-container {
position: relative;
}
.toggle-password {
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
}
.error-message {
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<div class="center-container">
<div id="login-section" class="text-center form-container">
<div class="form-group">
<label id="email-label" style="display: none">Email:</label>
<input
type="text"
id="email"
class="form-control"
style="display: none"
/>
<div id="email-error" class="error-message" style="display: none">
Please enter a valid email address.
</div>
</div>
<div class="form-group password-container" style="display: none">
<label id="password-label" for="password">Password</label>
<div class="input-group">
<input type="password" class="form-control" id="password" />
<button
id="toggle-password"
class="btn btn-outline-secondary"
type="button"
style="display: none"
>
<i class="far fa-eye"></i>
</button>
</div>
<div id="password-error" class="error-message" style="display: none">
Password cannot be empty.
</div>
<div id="login-error" class="error-message" style="display: none">
Please enter a valid credentials.
</div>
</div>
<div class="form-group">
<label for="email-service">Select email service:</label>
<select id="email-service" class="form-control">
<option value="gmail">Gmail</option>
<option value="outlook">Outlook</option>
</select>
</div>
<button id="loginButton" class="btn btn-primary btn-spacing">
Log In
</button>
</div>
<div
id="control-section"
class="text-center form-container"
style="display: none"
>
<button id="check-mail" class="btn btn-success btn-spacing">
Check Mail
</button>
<button id="logout" class="btn btn-danger btn-spacing">Logout</button>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js\node_modules\@popperjs\core\dist\umd\popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="popup.js"></script>
</body>
</html>