GE AWS Cloud Control Responsive UI Prototype Challenge

Welcome to the GE AWS Cloud Control Responsive UI Prototype Challenge! The goal of this challenge is to create a responsive HTML5 Prototype application for desktop browsers based on provided storyboard design using AngularJS & Bootstrap frameworks.

Additional Challenge Rules:
- Please refer to the attached Official Rules applicable to this challenge.
- To the extent there is any conflict between these Official Rules and additional Topcoder Terms and Conditions of Use referenced of the Website, these Official Rules govern.
- The 1st and 2nd Place winner from this challenge need print, sign and send back to us the IP Rights document from GE before eligible for the prizes.

Good luck and we are looking forward to your submissions!

Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.

Competition Task Overview:

The main task of this competition is to convert provided storyboard designs into working responsive prototype. You need to use Bootstrap to implement responsive page with fluid layouts to support desktop browsers. The prototype pages must look good on 1024px width devices. Your prototype must work properly in all the required browsers noted below.

We are looking for good and quality prototype code from this challenge. Please ask questions in the forum for any clarifications needed on the spec requirements.

Required Pages:

Below are the required pages described in details for this challenge.

1. Login Page:

• -User opens the application and will see the login page (01_Login.png).
• -Click on Login button, navigate user to dashboard page (02-01_Dashboard.png).

2. Dashboard Page:

• -Once user successfully logged in, show user the dashboard page (02-01_Dashboard.png).
• -Use fixed width on left navigation bar panel and fluid layout for the right content panel.
• -The header should be fixed at the top and main content should be scrollable.
• -Click on add module icon, show user the 'add module menu' (02-03_Dashboard_Add Module Menu.png).
• -Click on filter icon on activities, show user the filter panel (02-04_Dashboard_Activities_Filter.png).
• -User can search specific activities by entering application name on search box, refer screen (02-05_Dashboard_Specific Activities.png).
• -User can see all levels by expanding the application name, refer screen (02-06_Dashboard_Specific Activities Levels.png).
• -Use dead links for all remaining links and button click actions for now.

3. Automation:

• -Once user clicks automation icon on each module, show user the automation schedule control popup (03-01_Automation.png, 03-02_Automation.png).
• -Show calendar with current date selected on left side and saved schedules of selected date on right side.
• -Click on filter icon, show user the filter panel (03-03_Automation_Filter.png).
• -User can select any specific date, as shown on screen (03-04_Automation_Specific Date.png).
• -Click on any schedule on right side panel, show user the schedule details at bottom panel as shown on screen (03-05_Automation_Specific Schedule.png, 03-06_Automation_Specific Schedule.png).
• -Click on 'add new' schdule button, show user the 'add new schedule' panel (03-07_Automation_New Schedule.png, 03-08_Automation_New Schedule.png).
• -User can select any of the action items from the list (03-09_Automation_New Schedule_Select Action.png).
• -User can select recuring activity with other inputs as per the screen (03-10_Automation_New Schedule.png, 03-11_Automation_New Schedule_Custom.png, 03-12_Automation_New Schedule_Custom.png).
• -Click on 'edit' button, show the bottom panel on edit mode - similar to 'add new schdule' panel, refer screen (03-10_Automation_New Schedule.png).
• -Click on 'delete' button, remove the schedule from the selected date.
• -Click on 'cancel' button, close the automation schedule control popup.

4. Applications Page:

• -Once user selects 'applications' from left nav, show user the applications page (04-01_Applications.png).
• -On mouse hover on schedule counts, show user the quick view schedule (04-02_Applications_Quick View.png).
• -On mouse hover on environments, show user the quick view environments (04-03_Applications_Quick View.png).
• -On mouse hover on servers, show user the quick view servers (04-04_Applications_Quick View.png).
• -Click on sort options, show user the listed options (04-05_Applications_Sort Function.png).
• -Click on list view icon, display applications on list view (04-06_Applications_List View.png).
• -Click on options menu, show user the module menu (04-07_Applications_List View_Module Menu.png).
• -Click on application menu, navigate user to application details screen (04-08_Applications_Detail.png).
• -Click on environment name on application details screen, show user the environment page (05-01_Environment.png).

5. Environment Page:

• -Once user selects any environment on application details screen, show user the environment page (05-01_Environment.png).
• -Show list of servers with status and other fields on a tabular form with pagination as per the screen (05-01_Environment.png).
• -Click on server name, display server details on the popup (05-02_Environment_Server Detail.png, 05-03_Environment_Server Detail.png).
• -User can choose number of records (servers) to display per page of the tabular form (05-04_Environment.png).

Specific HTML/CSS/JavaScript Requirements:

• -Your HTML code must be valid HTML5 and follow best practices
• -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 style-sheet.
• -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.
• -The code must be properly formatted, documented with comments, modular and indented.
• -CSS3 code has to be provided in SASS, the prototype submission must contain generated css code.

Guidelines:

• -Include doctype in all html pages.
• -Use normalize.css for cross browser rendering.
• -Use font awesome icons as required.

Font Requirements:

Use font - GE Inspira (Attached).

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. We would like to use following JavaScript libraries:

• jQuery 2
• Angular 1.4.9
• Bootstrap 3

Browsers Requirements:

• -IE 11+ Browsers (Windows)
• -Latest Chrome Browsers (Windows, Mac)
• -Latest Safari Browsers (Mac)
• -Latest Firefox Browsers (Windows, Mac)
• -Latest Opera Browsers (Windows, Mac)

Documentation Provided:

Please register to see attached documents.