Project Overview

In this challenge you will be updating games and achievement pages to match the provided storyboard, in addition we are adding new Events pages.

Competition Task Overview

The main goal of this contest is to produce HTML/CSS/JS prototype of the provided Storyboard following the outlined requirements below.

Detailed Requirements

Header, Menu and Footer

The header/footer will remain as it is, we are only updating design of the main content area of the pages

Games Page

• Screenshots :

  • 1.Games.png

• Listing column :

  • Clicking “Play Now” will be deadlink.

  • Clicking “More Info” will toggle the visibility of the hidden panel as shown under “Xylem” game.

    • The content will be loaded via ajax, you need to simulator ajax loading by showing a spinner in the expanded div then load the content.

  • The “More Info” div contains a carousel.

    • All content include text and the images should be treated as content and not as a CSS background.

    • All links and buttons can be treated as dead links

    • Implement switching between tabs, use same content as first tab.

    • Carousel :

      • User can navigate between items by clicking on the thumbnails below carousel banner.

      • Carousal items won't rotate automatically

      • The caption on the carousal item is not part of the image/video

      • Demonstrate the carousal with at least 6 items.

  • Sharing icons should use ShareThis plugin.

• Active Contest widget
      

  • Rename to “Active Contests”

  • “View Details” takes to 3.Event-Detail.png

  • The 3 icons below the thumbnail are identical to “What’s Hot” widget in index.html in the provided prototype.

  • Clicking “View All” takes user to 2.Event.png

• “Top Leaderboard” widget

  • “Stormbound Leaderboard” is a drop down.

  • “Show This Month” is a drop down.

  • Clicking “View More” will load more content. Note the listing (exclude drop down lists) content are are scrollable. You need to show a spinner loader indicator to simulate the ajax loading.

• “What’s Hot” and “Recent Forum Posts” are same as the bottom widgets in index.html.

Events Page

• Screenshots :

  • 2.Event.png

• This page is similar to Games page with minor differences. So if you have any questions please post in forums for more clarifications.

• The filter panel above the listing content show 3 drop down lists. The content should be updated on select change in any drop down list.

Event Details Page

• Screenshots :

  • 3.Event-Detail.png

• All content include text and the images should be treated as content and not as a CSS background.

• All links and buttons can be treated as dead links

• Sharing icons will be from ShareThis plugin.

• The main content area in the three widgets in left column are scrollable.

  • Clicking “View More” will should load more content. Simulate an ajax call by showing a spinner loading indicator before loading more content.

  • “Top Leaderboard” widget should display “View More” instead of “View All”.

Achievements Page

• Screenshots :

  • 4.Achievements.png

  • 5.Rotate.png

  • 6.Dropdown-dark.png

  • 0.note.png

• You are updating these two files in this challenge :

  • Achievements_Logged_In.html

  • Achievements.html

• New changes :

  • “Live Score” widget :

    • Refer to 0.note.png for more information about this widget.

• We added more filtering dropdown lists to the achievements filtering.

• The dark bar of achievements will allow users to click on left and right arrows to navigate between games.

• All content include text and the images should be treated as content and not as a CSS background.

• All links and buttons can be treated as dead links

Ask questions in forums about any details that are not clear or not clarified in specs, you are not required to implement things stated by reviewers in review scorecards if reviewers did not get clear approval and confirmation from forums.

Specific HTML/CSS/Javascript Requirements

CSFV is a big project, and we are going to launch series of UI prototype contests in the next months. And the current Storyboard is one of the UI themes we will build for CSFV website, it will change in future as we are testing several themes. And since we are not using any Theming framework in frontend (i.e. wordpress) we need to make sure that the UI prototype specifically the CSS part we are building starting from this contest is predictable, reusable, maintainable, and scalable, so when we want to swap themes or upgrade the theme it will be a smooth transition/task. And in order to achieve these points we are enforcing css component-based structure, naming pattern, and enforcing CSS Lint.

CSS Structure and Naming Convention

Structure your CSS into the following categories :

• Base Components - consists of reset rules and element defaults.

• Modules Components - represent reusable visual elements, use this naming pattern :

.component-name
.component-name--modifier-name
.component-name__sub-object
.component-name__sub-object--modifier-name

example

.button-group { } /* component name */
.button--primary { } /* A component modifier (modifying .button) */
.button__icon { } /* A component sub-object (lives within .button) */

• Layout Components - for positioning of site-wide elements as well as generic layout helpers like grid systems, use this naming pattern :

.l-layout-method { }
.grid

example

.l-header { }

• State Components - refers to styling that can be toggled on or off via JavaScript, use this naming pattern :

.is-state-type { }

example

is-hidden { }
is-selected { }
is-expanded { }

• Javascript Components - Used to provide JS-only hooks for a component. Can be used to provide a JS-enhanced UI or to abstract other JS behaviours, use this naming pattern :

js-action-name { }

example

js-submit { }
js-action-save { }
js-ui-dropdown { }
js-ui-carousel { }

CSS Lint

Your code must pass CSS Lint validator with all options are toggled on, if you decided not to include any option in the validation, you must provide a text document explaining why you skipped specific lint option from validation, otherwise, reviewers will deduct your scope for not passing CSS Lint validator.

HTML Requirements

• Your HTML code must be XHTML 1.0 Transitional compliant

• 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.

Javascript Requirements

All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.

You are allowed to use third-party javascript libraries. Please document what libraries you have used and where in the prototype.

Browser Requirements

• IE9+

• Latest FireFox Mac & PC

• Safari Latest Mac & PC

• Chrome Latest Mac & PC

Documents

Provided in challenges forums :

• Existing UI prototype

• PSD and Screenshots of new design.

Final Submission Guidelines

Submission Deliverables

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

Submission Guidelines

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