<!DOCTYPE html>
<html>

<head>
    
<script type = "text/javascript" > history.pushState(null, null); window.addEventListener('popstate', function(event) { history.pushState(null, null); }); </script>    
    
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Log in</title>
  
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <link rel="icon" href="Logo.png" type="image/png"> 
  
    <link rel="stylesheet" href="{{ asset('public/adminLTE/bootstrap/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('public/adminLTE/dist/css/AdminLTE.min.css') }}">
    <link rel="stylesheet" href="{{ asset('public/adminLTE/plugins/iCheck/square/blue.css') }}">
    <link rel="stylesheet" href="{{ asset('public/font-awesome/css/font-awesome.min.css') }}">
    <link rel="stylesheet" href="{{ asset('public/styles/some.min.css') }}">
  
    <link rel="stylesheet" type="text/css" href="{{ asset('public/styles/inline.css') }}">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  
    <link rel="stylesheet" href="{{ DIR_APP }}bootstrap_4/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">

	<style>
	
		body {
			/* background-color: transparent; /*#A9A9A9;*/
			/*background-color: #20B2AA;*/
			background: linear-gradient(180deg, rgb(220, 220, 220) 25%, rgb(220, 220, 220) 0%, rgb(230, 230, 250) 50%);"
		}

		.container {
			flex-wrap: wrap;
		}

		.card___ {
		    
			border: none;
			border-radius: 0px;
			background-color: #7CFC00;  /* #32CD32;  /*   #4270C8; */
			width: auto;
			margin-top: -50px
		}
        .card {
          /* Add shadows to create the "card" effect */
          box-shadow: 0 5px 7px 0 rgba(0,0,0,0.3);
          transition: 0.3s;
        }
        
        /* On mouse-over, add a deeper shadow */
        .card:hover {
          box-shadow: 0 8px 20px 0 rgba(0,0,0,0.3);
        }	
        
		p.mb-1 {
			font-size: 20px;
			color: #2E8B57; /* #9FB7FD */
		}

		.card.two {
			border-top-right-radius: 50px;
			border-top-left-radius: 0;
			height:auto;
		}

		.form-group {
			position: relative;
			margin-bottom: 2rem
		}

		.form-control {
			border: none;
			border-radius: 0;
			outline: 0;
			border-bottom: 1px solid #DCDCDC;
			
		}

		.form-control:focus {
			box-shadow: none;
			border-radius: 0;
			border-bottom: 1px solid #8A97A8
		}

		.form-control-placeholder {
			position: absolute;
			top: 15px;
			left: 10px;
			transition: all 200ms;
			opacity: 0.5;
			font-size: 80%
		}

		.form-control:focus+.form-control-placeholder,
		.form-control:valid+.form-control-placeholder {
			font-size: 80%;
			transform: translate3d(0, -90%, 0);
			opacity: 1;
			top: 10px;
			color: #8B92AC
		}

		.btn-block {
			border: none;
			border-radius: 8px;
			background-color: #506CCF;
			padding: 10px 0 12px
		}

		.btn-block:focus {
			box-shadow: none
		}

		.btn-block span {
			font-size: 15px;
			color: #D0E6FF
		}
		
		.form-control {
		   border-bottom: 2px grey solid;
		   border-top: 0px;
		   border-left:0px;
		   border-right:0px;
		   width:100%;
		   height:35px;
		}
		
		
/*------------------ loading progress--------mode lingkaran------------------------*/
        #ldr {
            height:1px;    
        }
        


/* Add animation to "page content" */

		.animate-bottom {
			position: relative;
			-webkit-animation-name: animatebottom;
			-webkit-animation-duration: 1s;
			animation-name: animatebottom;
			animation-duration: 1s
			}

		@-webkit-keyframes animatebottom {
			from { bottom:-100px; opacity:0 }
			to { bottom:0px; opacity:1 }
		}

		@keyframes animatebottom {
			from{ bottom:-100px; opacity:0 }
			to{ bottom:0; opacity:1 }
		}

		#myDiv {
			display: none;
		}

		.loading {
			position: relative;
			width: 50%;
			height: 200px;
			border: 1px solid rgba(160, 160, 164, 0.2);
			background-color: rgba(160, 160, 164, 0.2);
			border-radius: 3px;
		}

		span.loader {
			position: absolute;
			top: 40%;
			left: 10%;
			width: 250px;
			height: 20px;
			border-radius: 8px;
			border: 2px solid rgba(160, 160, 164, 0.8);
			padding: 0;
		}

	 	span.innerLoad {
			position: absolute;
			left: 90%;
			top: 95%;
			z-index: 100;
			width: 100px;
			height: 30px;
			text-align: center;
			font-size: 15px;
			font-stretch: extra-expanded;
			color: black;
			padding: 1px 18px 3px 80px;
		}		
		
	</style>
	
</head>



<body>
    <br><br>
    
    
<div class="container">
    <br>
	<div class="text-center">
	    <!--img src="logo.png" width="80" height="80" style="border-radius:2px"-->
	    <br>
	    <h4 style="margin-top:5px;color:black">Sukses Wijaya Adikarya</h4>
	</div> 

    <br>

    <form action="{{ route('login') }}" method="post" id="formlogin">
    {{ csrf_field() }}
    
    <div class="col-sm-3 col-md-3 col-xs-0"></div>
    <div class="col-sm-6 col-md-6 col-xs-12">
        
        <div class="card" style="width:auto;padding:10px 15px 10px 15px;">
		
		<br><br>
		
            <div class="form-group has-feedback">
                <input type="text" class="form-control"  placeholder="Username" name="username" value="" required autofocus="off">
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
            </div>
    
            <div class="form-group has-feedback">
                <input type="password" class="form-control" placeholder="Password" name="password" required>
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            
            <br>
        
            <div class="text-center">
                <a href="#" type="button" class="waves-effect waves-light btn-small" style="width:100%;" onclick="document.getElementById('formlogin').submit()"> Login </a>
            </div>
            <br>
            
            <div class="progress" id="ldr" style="display:none">
                <div class="indeterminate"></div>
            </div>        
            
        </div>

    </div>

    </form>

    
</div>


<script type="text/javascript">

    var links = document.getElementsByTagName("a"),
	    i = 0, l = links.length,
	    body = document.body;
        
  	    for(;i<l;i++) {
    	    links[i].addEventListener("click",function(){

            //document.getElementById("frameloader").style.display = "block";
	    	document.getElementById("ldr").style.display = "block";

    	},false);
	}

</script>


    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    
    

</body>
</html>