<!doctype html>
<html lang="en">

<head>
    <title>Penguatkuasaan</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.css" rel="stylesheet"/>

<style>
html, body {
    /*
  background: #00589F;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00589F', endColorstr='#0073CF', GradientType=0);
  background: -webkit-linear-gradient(to bottom, #00589F 50%, #0073CF) !important;
  background: -moz-linear-gradient(to bottom, #00589F 50%, #0073CF) !important;
  background: -ms-linear-gradient(to bottom, #00589F 50%, #0073CF) !important;
  background: -o-linear-gradient(to bottom, #00589F 50%, #0073CF) !important;
  background: linear-gradient(to bottom, #00589F 50%, #0073CF) !important;
  color: white;
  background-color: white;
  */
  	width: 100%;
	height: 100%;
	margin:0;
	overflow:hidden;
	background: linear-gradient(to right,#f1c40f 20% 40%, white 40% 80%);
}

div.well{
  height: 250px;
} 

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

.Absolute-Center.is-Responsive {
  width: 50%; 
  height: 50%;
  min-width: 200px;
  max-width: 400px;
  padding: 40px;
}

#logo-container{
  margin: auto;
  margin-top: -30px;
  margin-bottom: 10px;
  width:200px;
  height:180px;
  background-image:url('/assets/img/logo.jpg');
}

#title-container{
  margin: auto;
  width:120px;
  height:30px;
}

.container {
	display: flex;
	width: 100%;
	height:100%;
	justify-content: center;
	align-items:center;
}

</style>
</head>

<body>
<!--
<div class="container">
  <div class="row">
    <div class="Absolute-Center is-Responsive">
      <div id="logo-container"></div>
      <div id="title-container"><h4><b>PENGUATKUASA</b></h4></div>
      <div class="col-sm-12 col-md-10 col-md-offset-1">
        <form action="" id="loginForm">
          <div class="form-group input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
            <input class="form-control" type="text" id="username" name='username' placeholder="username" value=""/>          
          </div>
          <div class="form-group input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
            <input class="form-control" type="password" id="password" name='password' placeholder="password" value=""/>     
          </div>
          <br/>
          <div class="form-group">
            <button type="button" id="login" class="btn btn-def btn-block">Login</button>
          </div>
        </form>        
      </div>  
    </div>    
  </div>
</div>
-->

	<div class="container">
		<table border="0" style="width:90%;height:550px;margin-top:0%;">
			<tr>
				<td width="36%">
					<div>
						<span style="font-family: Arial, Helvetica, sans-serif;font-size:4.5rem;color:#000066;">MyOri</span><br>
						<span style="font-family: Arial, Helvetica, sans-serif;font-size:6.5rem;color:#000066">SmartSecure</span><br>
						<div style="font-family: Arial, Helvetica, sans-serif;font-size:2.8rem;color:#000066;line-height: 1.5;">
						<ul>
							<li>Perlindungan Jenama</li>
							<li>Semak Ketulenan</li>
							<li>Maklumat Pensijilan</li>
							<li>Pelaporan Pengguna</li>
						</ul>
					</div>
				</td>
				<td width="15%">&nbsp;</td>
				<td width="49%">

					<div class="row" style="width:500px;">
					    				<div class="col-sm-12 col-md-10 col-md-offset-1">
					    				    					<div>
						<span style="font-family: Arial, Helvetica, sans-serif;font-size:2.8rem;color:#000066;">Portal </span>
						<span style="font-family: Arial, Helvetica, sans-serif;font-size:2.8rem;color:#000066;font-weight:bold"> Penguatkuasaan</span>
					</div>
                        <form action="" id="loginForm">
                          <div class="form-group input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                            <input class="form-control" type="text" id="username" name='username' placeholder="username" value=""/>          
                          </div>
                          <div class="form-group input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                            <input class="form-control" type="password" id="password" name='password' placeholder="password" value=""/>     
                          </div>
                          <br/>
                          <div class="form-group">
                            <button type="button" id="login" class="btn btn-def btn-block">Login</button>
                          </div>
                        </form>        
                      </div>
					</div>
	

				</td>
			</tr>
		</table>
	</div>


</body>

<script src="/assets/js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="/assets/js/bootstrap.min.js" type="text/javascript"></script>

<script>
        $(document).ready(function() {
			
			$.ajaxSetup({
                cache: false
            });			

            $('#login').on('click', function (e) {
                
                var username = $('#username').val();
                var password = $('#password').val();
                alert("Wrong credential!");
		    });	

        });
    </script>

</html>