Here is a similar program I used to use password protect the Photos section of this site. (Not any more)
The user inputs the username and password, a value for each is calculated by adding the characters value of each input.
so jim = (j =106 ) + (i =105 ) + (m=109 ) = 320
This is then checked and if both the username and password values match the values in the code
then the user enters the password protected page.
you will need to also the javascript that encrypts the usernames and password, here is an example encrypt.html, view the source for the code.