<?php
session_start();
if( isset($_SESSION["username"]) && $_SESSION["username"] != '' ){
header("Location: index.php");
exit();
}



$user_name = 'sabry';
$user_pass = '$2y$10$LAwXrIRNvNegTjZ8W56czuDmcQZBpULbp4OSHYsxny1IsuB626kGy';




if(isset($_POST['username'])) {

    if( $_POST['username'] == $user_name ) {

      if(password_verify($_POST['password'], $user_pass)) {

        $_SESSION['username'] = $_POST['username'];

        header("Location: index.php");

        exit();

      }

      else {echo '<div class="alert"><span class="closebtn" onclick="this.parentElement.style.display=\'none\';">&times;</span><strong>wrong password</strong></div>';}

    }

    else {
        echo '<div class="alert"><span class="closebtn" onclick="this.parentElement.style.display=\'none\';">&times;</span><strong>User Not Found</strong></div>';
    }
}
else {$_SESSION['username'] = '';}
?>

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Blog Login</title>
    <style>
 * {box-sizing:border-box;margin:0;padding:0;font-weight:300;}
body {overflow:hidden;height:100vh;font-family:sans-serif;background:#50a3a2;color:white;background:linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);}
.wrapper {width:100%;overflow:hidden;}
.wrapper.form-success .container h1 {-webkit-transform: translateY(85px);transform: translateY(85px);}
.container {max-width:600px;margin:0 auto;padding: 80px 0;text-align: center;}
.container h1 {font-size: 40px;transition-duration: 1s;transition-timing-function: ease-in-put;font-weight: 200;}
form {padding: 20px 0;position: relative;z-index: 2;}
form input {-webkit-appearance: none;-moz-appearance: none;appearance: none;outline: 0;border: 1px solid rgba(255, 255, 255, 0.4);background-color: rgba(255, 255, 255, 0.2);width: 250px;border-radius: 3px;padding: 10px 15px;margin: 0 auto 10px auto;display: block;text-align: center;font-size: 18px;color: white;transition-duration: 0.25s;font-weight: 300;}
form input:hover {background-color: rgba(255, 255, 255, 0.4);}
form input:focus {background-color: white;width: 300px;color: #53e3a6;}
form button {-webkit-appearance: none;-moz-appearance: none;appearance: none;outline: 0;background-color: white;border: 0;padding: 10px 15px;color: #53e3a6;border-radius: 3px;width: 250px;cursor: pointer;font-size: 18px;transition-duration: 0.25s;}
form button:hover {background-color: #f5f7f9;}
.bg-bubbles {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;}
.bg-bubbles li {position: absolute;list-style: none;display: block;width: 40px;height: 40px;background-color: rgba(255, 255, 255, 0.15);bottom: -160px;-webkit-animation: square 25s infinite;animation: square 25s infinite;transition-timing-function: linear;}
.bg-bubbles li:nth-child(1) {left: 10%;}
.bg-bubbles li:nth-child(2) {left: 20%;width: 80px;height: 80px;-webkit-animation-delay: 2s;animation-delay: 2s;-webkit-animation-duration: 17s;animation-duration: 17s;}
.bg-bubbles li:nth-child(3) {left: 25%;-webkit-animation-delay: 4s;animation-delay: 4s;}
.bg-bubbles li:nth-child(4) {left: 40%;width: 60px;height: 60px;-webkit-animation-duration: 22s;animation-duration: 22s;background-color: rgba(255, 255, 255, 0.25);}
.bg-bubbles li:nth-child(5) {left: 70%;}
.bg-bubbles li:nth-child(6) {left: 80%;width: 120px;height: 120px;-webkit-animation-delay: 3s;animation-delay: 3s;background-color: rgba(255, 255, 255, 0.2);}
.bg-bubbles li:nth-child(7) {left: 32%;width: 160px;height: 160px;-webkit-animation-delay: 7s;animation-delay: 7s;}
.bg-bubbles li:nth-child(8) {left: 55%;width: 20px;height: 20px;-webkit-animation-delay: 15s;animation-delay: 15s;-webkit-animation-duration: 40s;animation-duration: 40s;}
.bg-bubbles li:nth-child(9) {left: 25%;width: 10px;height: 10px;-webkit-animation-delay: 2s;animation-delay: 2s;-webkit-animation-duration: 40s;animation-duration: 40s;background-color: rgba(255, 255, 255, 0.3);}
.bg-bubbles li:nth-child(10) {left: 90%;width: 160px;height: 160px;-webkit-animation-delay: 11s;animation-delay: 11s;}
@-webkit-keyframes square {
0% {-webkit-transform: translateY(0);transform: translateY(0);}
100% {-webkit-transform: translateY(-700px) rotate(600deg);transform: translateY(-700px) rotate(600deg);}
}
@keyframes square {
0% {-webkit-transform: translateY(0);transform: translateY(0);}
100% {-webkit-transform: translateY(-700px) rotate(600deg);transform: translateY(-700px) rotate(600deg);}
}

 .alert {
   padding:20px;
   background-color:#f44336;
   color:white;
   position: absolute;
   z-index: 999;
   width:100%;
   text-align:center;
   font-size:18pt;
 }


 .closebtn {
   margin-left: 15px;
   color: white;
   font-weight: bold;
   float: right;
   font-size: 22px;
   line-height: 20px;
   cursor: pointer;
   transition: 0.3s;
 }

 .closebtn:hover {
   color: black;
 }
    </style>
  </head>
  <body>



    <div class="wrapper">
    	<div class="container">

    		<h1>Welcome<br> Blog Login</h1>

        <form name="login" action="" method="post">
            <input type="text" name="username" value="" placeholder="Username" /><br />
            <input type="password" name="password" value="" placeholder="Password" /><br />
            <button type="submit" id="login-button">Login</button>
        </form>



    	</div>

    	<ul class="bg-bubbles">
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    	</ul>
    </div>

<script type="text/javascript">
$("#login-button").click(function(event){
  event.preventDefault();

$('form').fadeOut(500);
$('.wrapper').addClass('form-success');
});
</script>
<script>
// Get all elements with class="closebtn"
var close = document.getElementsByClassName("closebtn");
var i;

// Loop through all close buttons
for (i = 0; i < close.length; i++) {
  // When someone clicks on a close button
  close[i].onclick = function(){

    // Get the parent of <span class="closebtn"> (<div class="alert">)
    var div = this.parentElement;

    // Set the opacity of div to 0 (transparent)
    div.style.opacity = "0";

    // Hide the div after 600ms (the same amount of milliseconds it takes to fade out)
    setTimeout(function(){ div.style.display = "none"; }, 600);
  }
}
</script>

<?php

?>
  </body>
</html>
