index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Password Genex</title>
	
	<link rel="stylesheet" type="text/css" href="styles.css" />
		
	<script type="text/javascript" src="script/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="script/Rand32.js"></script>
	<script type="text/javascript" src="script/Hash8.js"></script>
	<script type="text/javascript" src="script/Hexacrypt.js"></script>
	<script type="text/javascript" src="script/SHA-256.js"></script>
	<script type="text/javascript" src="script/Password.js"></script>
    <script type="text/javascript" src="script/Dropdown.js"></script>
</head>

<body>

	<h1>Password Genex</h1>
	<h4>Quickly turn your bad, insecure passwords into a good password. </h4>

	<hr/>
	
	<br/>

	<table class="info"><tr><td colspan="2">
		<h2>How to Use:</h2>
	</td></tr><tr><td class="img">
		<img src="img/Question.png" width="150" height="150" alt="Lock Image" />
	</td><td>
		<p>&nbsp;&nbsp;&nbsp;&nbsp;
			Put the bad password into the "Original Password" box, and type the associated "Account Name" into
			the "Account Name" box. Next, secure the password with a "Secret Code" that only you know. The secret code
			does not need to be a good password per se, but it needs to be kept secret. Since some accounts do not
			allow certain symbols, a filter option is included to remove illegal characters. Please note that
			modifying the filter changes the output, so be sure to make note of what characters are allowed when
			generating your passwords.
		</p>

		<p style="text-align: center;">
			Click generate, and you will have a secure password.
		</p>

		<div><i>
			To learn more about how the algorithm works, check out the <a href="about.html">About</a> page, which goes into more detail.
		</i></div>

	</td></tr></table>
	<br/>

	<hr/>

	<br/>
	<br/>

	<table class="form">

	  <tr><td colspan="3"><br/><br/></td></tr>

	  <tr><td colspan="3">
		<p>Original Password:</p><br/>
		<input type="password" class="password"/>
	  	<br/><br/>
	  </td></tr>

	   <tr><td colspan="3"><br/><br/></td></tr>

	  <tr>
		<td style="width: 25%;">
			<p>Account Name:</p><br/>
			<input type="text" class="account"/>
			<br/><br/>		
		</td>

		<td style="width: 50%;">
			<p>Secret Code:</p><br/>
			<input type="password" class="secret"/>
			<br/><br/>
		</td>

		<td style="width: 25%;">
			<p>Allowed Characters:</p><br/>
			<div id="list1" class="dropdown-check-list">
                <span class="anchor">Filter:&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <ul class="items">
					<li>
						<a class="but_item" id="SelectAll" >Select All</a>
						<a class="but_item" id="DeselectAll" >Deselect All</a>
					</li>
                    <li><input name="filter" type="checkbox" checked="checked" value=" "/><label>(Space)</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value="!"/><label>!</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value='"'/><label>&quot;</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value="#"/><label>#</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value="$"/><label>$</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value="%"/><label>%</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value="&amp;"/><label>&amp;</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value="'"/><label>'</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value="("/><label>(</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value=")"/><label>)</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value="*"/><label>*</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value="+"/><label>+</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value=","/><label>,</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value="-"/><label>-</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value="."/><label>.</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value="/"/><label>/</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value=":"/><label>:</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value=";"/><label>;</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value="&lt;"/><label>&lt;</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value="="/><label>=</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value=">"/><label>&gt;</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value="?"/><label>?</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value="@"/><label>@</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value="["/><label>[</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value="\"/><label>\</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value="]"/><label>]</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value="^"/><label>^</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value="_"/><label>_</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value="`"/><label>`</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value="{"/><label>{</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value="|"/><label>|</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value="}"/><label>}</label></li>
                    <li><input name="filter" type="checkbox" checked="checked" value="~"/><label>~</label></li>
                </ul>
           </div>
		</td>
	   </tr>

	   <tr><td colspan="3"><br/><hr style="width: 95%; border: 1px solid black;"/><br/></td></tr>

	   <tr><td colspan="3">
			<p>Generated Password:</p><br/>
			<input type="button" id="Generate" value="Generate"/>&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" id="Clear" value="Clear"/>&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="text" id="Output" readonly="readonly" class="output"/>
		</td></tr>

	   <tr><td colspan="3">
			<br/>
			<br/>
			<div><i>
				Note: We are not liable if your password is stolen. These algorithms are not verified. Use at your own risk.
			</i></div>
		</td></tr>

	</table>


	<br/>
	<br/>
</body>
</html>