<!DOCTYPE html>
<html lang="en">
<style>
body {
  font: 14px/1.4 arial;
}

header {
    height:10px;
    float:right;
}   

.imgWrap {
  position: relative;
  height: 746px;
  width: 500px; 
}

.imgDescription {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(180, 180, 180, 0.5);
  color: #000;


  visibility: hidden;
  opacity: 0;

  transition:opacity .5s linear;
}


.imgWrap:hover .imgDescription {
  visibility: visible;
  opacity: 1;
}
#spacer{
    width:35%;
    float:left;
}

</style>
  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/home">AISIS Online</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="/home">Home</a></li>
            <li class="active"><a href="/account_info">My Account</a></li>
            <li><a href="/class">Classes</a></li>
            <li><a href="/docs">Docs</a></li>
            <li><a href="/contact">Contact Us</a></li>
            <li><a href="/">Sign Out</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>




    <div class="container">

<header>
<br>
User Identified as: <strong> CARL JOSH  SAN LUIS  PUALENGCO</strong>
</header>

      <div class="starter-template">
        <h1>AISIS Online</h1>
        <style>
        th, td { padding: 5px; }
        table { border-collapse: separate; border-spacing: 1px; }        
        </style>

<div id="spacer">
&nbsp
</div>
<form name="changePasswordForm" action="/home" method="get">  
      <input name="redirect" type="hidden" value="">
      

                <table width="30%" border="0" cellspacing="1" cellpadding="5">
                <tbody><tr><td class="text09" colspan="2">
                </td>
                </tr>
                <tr>
                    <td width="50%" align="center" class="header06" background="images/spacer_lightblue.jpg" valign="top" colspan="2">Change Your Password</td>
                </tr>
        
                <tr>        
                    <td align="right" class="text05" background="images/spacer_lightgrey.jpg" valign="top">
                    Username  </td>
                    <td background="images/spacer_lightgrey.jpg">
            <input name="userName" type="text" size="10" maxlength="20" readonly="readonly" value="133300"></td>                    
                </tr>
                <tr> 
                    <td align="right" class="text05" background="images/spacer_lightgrey.jpg" valign="top">
                    Current Password  </td>
                    <td background="images/spacer_lightgrey.jpg"><input name="oldPassword" type="password" size="10" value=""></td>
                </tr>   
                
                <tr>
                  <td align="right" class="text05" background="images/spacer_lightgrey.jpg" valign="top">
                  New Password </td>
                  <!--td background='images/spacer_lightgrey.jpg'><input type="password" name="newPassword" maxlength="10" size="10" value=""></td-->  
          <!-- changed maxlength to 20 as requested by archie 07-23-07 -->
          <td background="images/spacer_lightgrey.jpg"><input name="newPassword" onchange="PasswordChanged(this)" type="password" size="20" maxlength="20" value="">
          <br><span class="text09" id="passwordStrength"></span>
          </td>  
                </tr>
                <tr>
                  <td align="right" class="text05" background="images/spacer_lightgrey.jpg" valign="top">
                  Confirm New Password </td>
                  <!--td background='images/spacer_lightgrey.jpg'><input type="password" name="confirmPassword" maxlength="10" size="10" value=""></td-->  
          <!-- changed maxlength to 20 as requested by archie 07-23-07 -->
          <td background="images/spacer_lightgrey.jpg"><input name="confirmPassword" type="password" size="20" maxlength="20" value=""></td>  
                </tr>

                
                <tr>
                <td align="center" background="images/spacer_lightgrey.jpg" colspan="2">
                <button onclick="Redirect()">Change Password</button>
                
                </tbody></table><input name="command" type="hidden" value="changePassword">
            </form>




  

        


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>

  </body>

    <script type="text/javascript">
            function Redirect() {
            confirm("Your password has been changed");
               window.location="/home";
            }
      </script>
</html>
