sithu
/
Forward_Station_Server


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
							<?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;
      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>