96hrs Avon ALM Community Development - UI Prototype Challenge

Project Overview

Competition Task Overview

For this challenge you are provided the storyboards that need to be converted into HTML5
- Out of Scope: The Header (AVON logo, main nav) and footer is out of scope, since this UI prototype will be embedded into production later.
- Width should fluid, as we can see in In_Context, there is hidden sidebar at left side. once that sidebar is opened, this new UI Prototype should be responsive.
- Switching between tabs will be by javascript using apex:tabPanel and apex:tabPanel. please refers to http://salesforce.stackexchange.com/questions/23159/using-jquery-with-apextabpanel-in-visualforce
- Please reserve block code for other tabs, and maybe other tabs and content will be built later by client 
- Also ensure this HTML5 works correctly on Tablet Browsers

Title Achievement
Storyboard : Title_Achievement_Table.jpg
Content should match the provided Storyboard :

1. Refer to the provided Design_Styling.pdf for more detail
2. This tabs should be flexible enough to accommodate addition of rows and columns, longer or shorter text, and up to three browser sizes (responsive).
3. Reviewers would try to add new rows and columns to KPI and G1 tables
4. Progress bar has four color : green, yellow, red and gray. Please reserve style for them and bar length should be easy to configured

Recent Orders
Storyboard : Recent_Orders_Table.jpg

1. Refers to provided Design_Styling.pdf for more detail
2. This tabs should be flexible enough to accommodate addition of rows and columns, longer or shorter text, and up to three browser sizes (responsive).
3. Reviewers would try to create new tables,add new rows and columns

Tabbed Navigation
Tabs Navigation should contain :

1. Coaching Record
2. Title Achievement
3. Recent Orders
4. Report Center

Need to apply CSS styles to a jQuery component to match the design.

1. Design: Tabbed Navigation (can be found in the Screenshots folder)
2. Please ensure tabs navigation would be easy to extend later, reviewers will try to add new tabs and dummy content 
3. Using apex:tab is required to use the following salesforce component and apply CSS styles to match the UI: http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_tabPanel.htm
4. If this cannot be accomplished, find another similar jquery component and style it to match the UI.

Documentation Provided
Storyboard and UI Prototype part are provided in forums

Browser Requirements

• IE7, IE8, IE9+
• Latest FireFox Mac & PC
• Latest Safari on Mac & PC
• Chrome Latest Mac & PC

Final Submission Guidelines

Submission Deliverables

All the pages that are shown in PNGs in the provided storyboard file are required.