<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Forward Station Server Login</title>
<link rel = "icon" href = "img/Autoleum Logo.jpg" type = "image/x-icon">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin-top: 50px;
}
form {border: 3px solid #f1f1f1;}
input[type=text], input[type=password] {
width: 80%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
/*background:#5eeae7;*/
background: radial-gradient(#0bddff, #00000094);
height:200px;
margin-top:0px;
}
img.avatar {
width: 40%;
border-radius: 50%;
margin-top: 32px;
width:80px;
height:80px;
margin-top:-57px;
}
.main {
padding: 16px;
background-color:#d4e0e6
}
.form-control.texthight {
font-size: 15px;
color:#028790;
border-radius: 1rem;
}
input[type=text],input[type=password]{
border: 2px solid #5eeae7;
}
.forgot:hover { color: #3b3b3b }
input[type="submit"] {
width:240px;
height:35px;
display:block;
font-family:Arial, "Helvetica", sans-serif;
font-size:16px;
font-weight:bold;
color:#fff;
text-decoration:none;
text-transform:uppercase;
text-align:center;
text-shadow:1px 1px 0px #37a69b;
padding-top:6px;
margin: 29px 0 0 29px;
position:relative;
cursor:pointer;
border: none;
background-color: #37a69b;
background-image: linear-gradient(top,#3db0a6,#3111);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius:5px;
box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #497a78, 0px 10px 5px #999;
}
input[type="submit"]:active {
top:3px;
box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #31524d, 0px 5px 3px #999;
}
.divider{
width:400px;
height:350px;
background:#dde3e4;
position:absolute;
margin-left:50px;
margin-top:-100px;
box-shadow: inset 0px 1px 0px #ffff, 0px 2px 0px 0px #ffff, 0px 5px 3px #999;
}
.login{
width:500px;
height:600px;
align:center;
background:white;
box-shadow: inset 0px 1px 0px #ffff, 0px 2px 0px 0px #ffff, 0px 5px 3px #999;
}
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
.form-group {
position: relative;
color: #aaa;
font-size: 16px;
}
.form-group input { text-indent: 32px;}
.form-group .fa-user {
position: absolute;
top: 20px;
left: 45px;
color:#0fb7a2;
}
.form-group input { text-indent: 32px;}
.form-group .fa-key {
position: absolute;
top: 33px;
left: 45px;
color:#0fb7a2;
}
.form-group input { text-indent: 32px;}
.form-group .fa-eye {
position: absolute;
top: 35px;
right: 50px;
color:#0fb7a2;
}
.form-errors p{
color:red;
}
</style>
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<center>
<form action="login.php" class="login" method="post">
<div class="imgcontainer">
</div>
<div style="" class="divider">
<div class="main">
<img src="dist/img/profile.jpg" alt="Avatar" class="avatar">
<?php if (isset($_SESSION['errors'])): ?>
<div class="form-errors">
<?php foreach($_SESSION['errors'] as $error): ?>
<p><?php echo $error ?></p>
<?php endforeach;
session_destroy();?>
</div>
<?php endif; ?>
<div class="form-group" style="margin-top:40px;" id="floatContainer">
<label for="floatField"></label>
<i class="far fa-user icon" ></i>
<input type="text" id="floatField" placeholder="Enter Username" id="name" name="uname" class="form-control texthight" required >
</div>
<div class="form-group ">
<i class="fa fa-key icon" ></i>
<input type="password" class="form-control texthight" name="password" id="password-field" placeholder="Enter your password" style="margin-top:20px;">
<i id="pass-status" class="fa fa-eye" aria-hidden="true" onClick="viewPassword()"></i>
</div>
<input type="submit" value="Login">
</div>
</div>
</form>
</center>
<script type="text/javascript">
function viewPassword()
{
var passwordInput = document.getElementById('password-field');
var passStatus = document.getElementById('pass-status');
if (passwordInput.type == 'password'){
passwordInput.type='text';
passStatus.className='fa fa-eye-slash';
}
else{
passwordInput.type='password';
passStatus.className='fa fa-eye';
}
}
const floatField = document.getElementById('floatField');
const floatContainer = document.getElementById('floatContainer');
floatField.addEventListener('focus', () => {
floatContainer.classList.add('active');
});
floatField.addEventListener('blur', () => {
floatContainer.classList.remove('active');
});
</script>
</body>
</html>
<script type="text/javascript">
function changePages(fileLocation) {
document.getElementById('loadFrame').src = fileLocation;
}
var selector='.sidebar-menu li';
$(selector).on('click', function(){
// alert(selector);
$(selector).removeClass('active');
$(this).addClass('active');
});
</script>
</body>