Repost TopCoder-CloudSpokes Challenges Pages - UI Prototype

Welcome to  96 hrs TopCoder - CloudSpokes – Challenges Pages UI Prototype Contest.  Responsive view is OUT of Scope.
We want to leverage HTML5/CSS3 but we still need to support some older browsers. Feel free to use the HTML5 Shiv fix for Internet Explorer.
On this  phase, we will build an UI Prototype that will be used as Wordpress Theme on next phase.

General Rules :

• Extend Provided Prototype
• Create new CSS and JS files for these new HTML pages
• We've provided view-challenges.html (to display all contest type) that similar to required pages and it has mobile view, you can re-use it as baseline instead of build from scratch
• Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
• Ensure you submission clear of HTML and CSS Validation error and warning
• Watch word typos in every place including the source code. Make sure they have correct meaning
• Layout (background) should be fluid, depend on browser width
• Please provide animated mouse hover  (with transition effect) for each clickable icons/buttons
• Please provide animated Glowing link for clickable text
• Please follow existing  (community.topcoder.com/tc) naming class for handle color, ie.”coderTextYellow” for yellow handle color 
• Scope is only Design and Software contest type. Algorithm&Big Data will be on next phase
• Data ( contest items) should be from JSON via AJAX and please provide 'loading' indicator when data is being loaded
• Next and Prev links should work as well as provided prototype
• Please provide dummy JSON files for each data (active challenges, past challenges, review oppotunity, First to Finish), and formats should follow http://docs.tcapi.apiary.io/
• The "View All" and "Next" links should be displayed for All pages even though 02_3_Past Challenges_design.png does not display it

 

Active Challenges Page - Design

• Build new HTML page as designed
• Loading data should be via AJAX and Please provide dummy JSON for now, please provide 'loading' indicator when data is being loaded
• Reference : http://studio.topcoder.com/?module=ViewActiveContests
• Should support both grid and list view
• TCO14 icon should be as img instead of background, so we can be easy to change/hide it for some contests
• Hovering on TCO14 icons should display tooltip ''Egalible for TC014"
• Clicking table header will re-load data via AJAX, please send sorting params
• Please Provide tooltips for contest type icon (ie:"W"), and also please provide other contest type icons (ie:Logo, Wireframe,etc). Please follow how existing studio past contest page work
• Advanced search should be implemented. storyboard for this form is [02-3_Past Challenges_design.png].

 

Past Challenges Page - Design

• Build new HTML page as designed
• Clicking table header will re-load data via AJAX, please send sorting params
• Please Provide tooltips for contest type icon (ie:"W")
• Please Provide tooltips for badgets ("1","2","3"). tooltips contain winning design and handle name. Please follow how existing studio past contest page work
• Advanced search should be implemented. storyboard for this form is [02-3_Past Challenges_design.png]
   

Review Opportunities Page - Design

• Build new HTML page as designed
• Clicking table header will re-load data via AJAX, please send sorting params
• Advanced search should be implemented. storyboard for this form is [02-3_Past Challenges_design.png]

 

First to Finish - Design
This page will be similar to BugRace contest type

• Build new HTML page as designed
• Clicking table header will re-load data via AJAX, please send sorting params

 

Challenge Detail Page - Design

• Not required, because we're running a bugrace for this page

 

Active Challenges Page - Software

• Build new HTML page as designed
• Loading data should be via AJAX and Please provide dummy JSON for now, please provide 'loading' indicator when data is being loaded
• Reference : http://studio.topcoder.com/?module=ViewActiveContests
• Should support both grid and list view
• TCO14 icon should be as img instead of background, so we can be easy to change/hide it for some contests
• Hovering on TCO14 icons should display tooltip ''Egalible for TC014"
• Clicking table header will re-load data via AJAX, please send sorting params
• Please Provide tooltips for contest type icon (ie:"A"), and also please provide other contest type icons (ie:UI Protytpe,etc).
• Advanced search should be implemented. storyboard for this form is [02-3_Past Challenges_design.png]
  Please use All contests type from http://api.topcoder.com/v2/develop/challengetypes, and can be hardcoded

 

Past Challenges Page - Software

• Build new HTML page as designed
• Clicking table header will re-load data via AJAX, please send sorting params
• Please Provide tooltips for contest type icon (ie:"W")
• Please Provide tooltips for badgets ("1","2","3"). tooltips contain photo and handle name. Please follow how existing studio past contest page work
• Advanced search should be implemented. storyboard for this form is [02-3_Past Challenges_design.png]
  Please use All contests type from http://api.topcoder.com/v2/develop/challengetypes

 

Review Opportunities Page - Software

• Build new HTML page as designed
• Clicking table header will re-load data via AJAX, please send sorting params
• Advanced search should be implemented. storyboard for this form is [02-3_Past Challenges_design.png]
  Please use All contests type from http://api.topcoder.com/v2/develop/challengetypes

   

First to Finish - Software
This page will be similar to BugRace contest type

• Build new HTML page as designed
• Clicking table header will re-load data via AJAX, please send sorting params

 

Challenge Detail Page - Software

• Not required, because we're running a bugrace for this page

Specific HTML/CSS/JavaScript Requirements

• You MUST use HTML5 and CSS/CSS3
• Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
• No inline CSS styles - all styles must be placed in an external stylesheet.
• Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
• Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent).
• Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
• Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
• Current website code has some inline CSS, please move them to external CSS file.

JavaScript Libraries/Plugins

JavaScript libraries already used in the current site can be used in this contest too. New ones need to be proved by client first.

Browser Requirements

• IE 7+
• FF 7+
• Safari 5+
• Chrome Latest