Reponsive TopCoder-CloudSpokes My TopCoder Part 2 UI Prototype

Welcome to Responsive TopCoder - CloudSpokes – My TopCoder Pages (part 2) UI Prototype Contest.  
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 from provided storyboard

General Rules :

Update Provided Prototype

• Storyboard and UI Prototype that contain My Account and My TopCoder landing pages is attached in forum
• Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly. Make sure you test on tabletsand mobile phones too.
• Create new CSS and JS files, don't edit any existing files (ie:style-mypayment-preference-documentation.css)
• Ensure you submission clear of HTML and CSS Validation error and warning
• Update existing my-account*.html in order to make My Payment, My Preference, and My Documentation are linked to these new pages
• Ensure existing My TC and My Account pages work properly
• 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 use Mobile view is for portrait orientation of tablet device, and it should be fluid based on browser width
• Switching the orientation (from landscape to portrait or vice versa) will also switch layout to correct layout directly, without reloading page.  Example :http://www.cloudspokes.com/, http://bradfrostweb.com/demo/mobile-first/ and http://www.studiopress.com/responsive/ and provided Prototype
• Please follow existing  (community.topcoder.com/tc) naming class for handle color, ie.”coderTextYellow” for yellow handle color
• Scope of this contest is only My Payment, My Preference, and My Documentation pages include their mobile view
   

My Payment Page

• Build as designed
• Please refers to existing payment setting page https://community.topcoder.com/tc?module=EditPaymentPreferences 
• Any external links (ie:Payoneer registration link) should follow existing page
• Please refers to existing payment page http://community.topcoder.com/PactsMemberServlet?module=PaymentHistory
• Checkbox should match to storyboard
• Please also provide disable checkbox (payment that waiting for release date)
• Checkbox at header will check all unchecked payments. this interaction will not affect to Payments that have "Paid" and "Entered into Payment system" status
• Functionality should follow existing payment page. i.e: Clicking checkbox will summarize payment, Clicking Payment will prompt users by JS, etc
• Please also provide some items that have "Entered into Payment System Status" and checked checkbox. it will be similar to "Paid" on storyboard

 

My Preference Pages

• Build as designed 
• Adding and unblocking member should be via AJAX
• Please refers to existing email notification page http://community.topcoder.com/tc?module=EditNotifications
• Please refers to existing forum preference page  http://apps.topcoder.com/forums/?module=Settings
• Please change "Show/Hide" button on 17_my preference privacy.png to on off button, there is no storyboard for this. just follow buttons.png that is provided in forum
• Watch and Rating Preference should follow existing page. there is no storyboard for them, but just follow existing forms with looks and feel layouts 

���

My Documentation Pages

• Build as designed 
• Please refers to existing assignment document page http://community.topcoder.com/PactsMemberServlet?module=AssignmentDocumentHistory&full_list=true
• Please refers to existing visa letter status page http://community.topcoder.com/tc?module=VisaSelection

 

 

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
• Chrome / Safari on tablets / phones

Final Submission Guidelines

Submission Guidelines

Submit an archive file contains all HTML/CSS/JS/images and another required files into Online Review Tool.