$1000 Hestia Branch Admin Tool HTML Prototype

Hestia is developing a small application called the Branch Admin Tool that is used to manage their accounts between branches. The purpose of this contest is to take the storyboards that currently exist in the Requirements document and develop the resulting HTML prototype for it.
Contest Summary For this contest, you will be developing the HTML, CSS and Javascript that are needed in order to implement the different UI screens that are defined in the Application Requirements document. The following screens need to be implemented: Primary Goals Run Conversion Application - This is based on Section 2.1 of the ARS. This screen will have 3 menu items:

• Reports - This is based on Section 2.2 of the ARS. Note the "[+] Another Source Branch" button which may require additional input fields to be added. Also note that the buttons should be disabled until there is input on both the source and branch fields. A version should also be provided with the Error Message when there are no multiple branch customers.
• Turn Customers On/Off - This is based on Section 2.3 of the ARS. Note that the button is disabled until the "Branch ID" field has been populated. Clicking on the button should lead to "Display Deactivate/Activate Companies" screen. A version should also be provided with the Error Message when there are no customers for the selected branch.
• Select Active Customer - This is based on Section 2.4 of the ARS. Note the "[+] Another Source Branch" button which may require additional input fields to be added. Also note that the buttons should be disabled until there is input on both the source and branch fields. A version should also be provided with the Error Message when there are no multiple branch customers.

Activate/Deactivate Customers - This is based on Section 2.3.1.2 of the ARS. Two versions of the page should be provided, one with Activated customers and the other with Deactivated customers. Clicking on "Activate" should navigate to the version of the page with Deactivated customers and vice-versa. Note the "Main" link should link back to the main menu, and the "Go" button should be disabled while there is no Branch ID input. In the prototype, the "Go" button should simply link back to this page. Process Branch Customers to Keep - This is based on Section 2.4.1.4 of the ARS. Note that no radio buttons are enabled when the page loads, and also that one radio button can be selected for each grouping of Master Customer. Development Consideration This is a small, simple application, and thus the prototype should be kept as simple as possible. Some basic javascript may be needed to perform the functionality of adding input rows and disabling/enabling the buttons, but otherwise, it should be strictly CSS/HTML. Judging Criteria

• Your submission will be judged on the following:
• How closely the prototype maintains its layout and design schemes across all pages.
• How closely the prototype matches the provided storyboards and spec.
• How far the prototype goes further from the storyboards to go the extra mile.
• Code Formatting - whether on not your code validates against W3C HTML Validation and CSS Validation.
• How well the prototype renders in all browsers.

HTML/CSS Requirements:

• Your HTML code must be XHTML 1.0 Strict compliant.
• Validate your code - we will accept minor validation errors, but please comment your reasons for any validation errors in a text file you provide.
• Your code must render properly in Internet Explorer 6, Internet Explorer 7, Firefox 2 and 3, Google Chrome and Safari in both Mac and PC environments.
• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs).
• Proper use of structural CSS to lay out your page is strongly encouraged.
• No inline CSS styles - all styles must be placed in an external stylesheet.
• Provide as much semantic code as possible. Elements such as ABBR, ACRONYM, ADDRESS, CITE and CODE enhance the semantics of content when used appropriately.
• Use strong and em tags instead of bold and italic tags
• Only use table tags for tables of data/information and not for page layout.

Javascript JQuery 1.3.1 is allowed.