<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<body>
<form method="post" action="$PORTAL_ACTION$">
<input name="redirurl" type="hidden" value="http://elibrary.bankrakyat.com.my/">
<input name="zone" type="hidden" value="captive">
<center>
<table cellpadding="25%" cellspacing="0" width="380" height="300" style="border:2px dashed #000000">
<tr height="10" bgcolor="#FEFEFE">
<td style="border:1px dashed #000000">
<font color='black'>
<b>
<div class="row-fluid user-row" id="mainarea">
<p style="border:1px dashed"><img src="./malida.png.jpg" width="400" height="210" class="img-responsive" alt="Serambi Ilmu Rakyat"></p>
</div>
</b>
</font>
</td>
</tr>
<tr height="2" bgcolor="#fefefe">
<td <font style="border:1px dashed #000000">
<font color='Orange'size='+2'>
<b>
<center>Unifi Authentication Access</center>
</b>
</font>
</td>
</tr>
<tr>
<td>
<div id="mainlevel">
<center>
<table width="100%" border="1" cellpadding="5" cellspacing="0">
<tr>
<td>
<center>
<div id="mainarea">
<center>
<table width="100%" border="1" cellpadding="5" cellspacing="5">
<tr>
<td>
<div id="maindivarea">
<center>
<div id='statusbox'>
<font color='red' face='calibri' size='+1'>
<b>
<center>Invalid Authentication Access!</center>
</b>
</font>
</div>
</center>
<br/>
<div id='loginbox'>
<table>
<tr>
<td colspan="2">
<h4><center>Please make sure that you have a valid access</td>
</tr> <tr><td> </td></tr>
</center></h4>
<tr><td align="center-left">Username: </td><td><input name="auth_user" type="text" style="border: 1.7px dashed;" size="20"></td></tr>
<tr><td align="center-left">Password: </td><td><input name="auth_pass" type="password" style="border: 1.7px dashed;" size="20"></td></tr>
<tr><td> </td></tr>
<tr>
<td colspan="2">
<h4><center>or using voucher</td>
</tr>
<tr><td> </td></tr>
</center></h4>
<tr><td align="center-left">Enter Voucher Code: </td>
<td><input name="auth_voucher" type="text" style="border:2px dashed;" size="20"></td>
</tr>
<tr>
<td colspan="2"><center><input class="btn btn-lg btn-success btn-block" name="accept" type="submit" value="Continue"></input></center>
</td>
</tr>
</table>
</div>
</center>
</div>
</td>
</tr>
</table>
</center>
</div>
</center>
</td>
</tr>
</table>
</center>
</div>
</td>
</tr>
</table>
</center>
</form>
</body>
</html>
<link href="captiveportal-bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body {
background: url(backgroundoro.jpg);
background-color: #444;
background-size: 125%;
}background: url(captiveportal-pinlayer2.png),url(captiveportal-pinlayer1.png),url(https://pbs.twimg.com/media/Bp59Ao0CYAAd2HW.jpg);
}
.vertical-offset-100 {
padding-top:100px;
}
.form-signin input[type="text"] {
margin-bottom: 5px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 8px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.form-signin .form-control {
position: relative;
font-size: 14px;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
height: auto;
padding: 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.vertical-offset-100 {
padding-top: 100px;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
margin: auto;
}
.panel {
margin-bottom: 20px;
background-color: rgba(255, 255, 255, 0.75);
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.btn {
background: #336b05;
background-image: -webkit-linear-gradient(top, #336b05, #7b97a8);
background-image: -moz-linear-gradient(top, #336b05, #7b97a8);
background-image: -ms-linear-gradient(top, #336b05, #7b97a8);
background-image: -o-linear-gradient(top, #336b05, #7b97a8);
background-image: linear-gradient(to bottom, #336b05, #7b97a8);
-webkit-border-radius: 8;
-moz-border-radius: 8;
border-radius: 8px;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
box-shadow: 0px 1px 3px #666666;
font-family: Georgia;
color: #ff8c00;
font-size: 14px;
padding: 12px 20px 10px 20px;
border: solid #ffa200 2px;
text-decoration: none;
}
.btn:hover {
background: #336b05;
background-image: -webkit-linear-gradient(top, #336b05, #59eb11);
background-image: -moz-linear-gradient(top, #336b05, #59eb11);
background-image: -ms-linear-gradient(top, #336b05, #59eb11);
background-image: -o-linear-gradient(top, #336b05, #59eb11);
background-image: linear-gradient(to bottom, #336b05, #59eb11);
text-decoration: none;
}
</style>
