Challenge Overview
Project Overview:
Welcome to the FAST!! 48Hrs - DataGuard AngularJS Responsive HTML5 Prototype Challenge Part2! The goal of this challenge is to add new pages into existing Responsive HTML5 Prototype application based on provided wireframe and approved Theme using AngularJS & Bootstrap.
Info: As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need clear explanation of the code to help us figure all the HTML5/CSS3/JavaScript code functions and make it easier for future developers and the client to understand what you have built.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
IMPORTART: As per the project schedules the review timelines are very close, please note the post submission timelines for further reference.
Competition Task Overview:
The main task of this competition is to develop new Responsive HTML5 page into existing base Prototype using provided wireframes and approved Theme design. Your prototype must work properly in all the required browsers listed below.
Please ask questions in forum for any clarifications needed on Wireframe and Theme design.
Required Pages:
Below are the required pages in both Portrait and Landscape orientations.
0. Overall Design:
- -Refer provided Theme design prototype code inside "dist" folder (from attached "Theme.zip").
- -You can upload the "dist" folder to your server to run it or you can build a server locally using WAMP or MAMP or Web Server. (you may use codekit on MAC)
- -Refer color scheme image file (Color-Scheme.png) for all color schemes.
- -You may use LESS (http://lesscss.org) or SCSS (SASS - http://sass-lang.com) frameworks for styles.
- -You need to add custom css files and custom JavaScript files along with existing folder/file structures.
- -Use Bootstrap styles if any feature design is not available on provided Theme design.
- -This theme supports mobile layouts - you need to make sure it works for all pages.
- -Use JSON object data binding using AngularJS framework.
- -We will be using API calls to get JSON objects, you could refer generated JSON data from attached "DataModel.zip" (containing dataguard.json, dataguard.yaml files) and instrucctions file for rendering JSON data on online Swagger editor.
- -You can load the dataguard.yaml file into the swagger editor at http://editor.swagger.io.
- -Once user selects profile from logged-in 'User Name', show user the settings view as shown on screen (11-User-Profile-View.png).
- -Click on save or cancel buttons, navigate user to Dashboard view.
- -Follow the Theme design styles for these pages.
2. Reports View:
- -Once user selects 'Reports' tab from main menu, show user the reports as shown on screen (12-Reports.png).
- -Show reports tab as active on main menu.
- -Follow the Theme design styles for these pages.
- -Once user selects 'Users' tab from main menu, show user the users view as shown on screen (13-Admin-Users.png).
- -Show sub-tabs as "Users", "Groups", "Roles" and also show page title as 'User Management'.
- -On selecting 'Groups' tab, show user the group details as shown on screen (14-Admin-Groups.png).
- -On selecting 'Roles' tab, show user the role details as shown on screen (15-Admin-Roles.png).
- -Once user selects 'Inventory' tab from main menu, show user the inventory views as shown on screen (16-Inventory-Enterprise-Groups.png).
- -Show sub-tabs as "Enterprise Groups", "Locations", "Endpoint Services", "Terminals", "Peripherals", Endpoints".
- -Show tables with paginations on each tab content.
- -Follow the Theme design styles for these pages.
- -On selecting 'Locations' tab, show user the inventory location details as shown on screen (17-Invetory-Locations.png).
- -On selecting 'Endpoint Services' tab, show user the inventory endpoint service details as shown on screen (18-Inventory-Endpoint-Services.png).
- -On selecting 'Terminals' tab, show user the inventory terminal details as shown on screen (19-Inventory-Terminals.png).
- -On selecting 'Peripherals' tab, show user the inventory peripheral details as shown on screen (20-Inventory-Peripherals.png).
- -On selecting 'Endpoints' tab, show user the inventory endpoint details as shown on screen (21-Inventory-Endpoints.png).
- -Once user selects 'Manifests' tab from main menu, show user the manifest main view as shown on screen (22-Manifest-Main.png).
- -Show default view with table of Manifests, but the Endpoints and Policies tables will shown on expanding each row.
- -Click on Manifests row, show user the expanded Manifest Endpoints table content.
- -Click on Manifest Endpoints row, show user the expanded Manifest Policies table content.
- -On selecting 'Manifest Templates' sub-tab, show user the manifest template details screen as shown on screen (24-Manifest-Templates.png).
- -Click on hamburger icon, show user the context based menu items like 'Create Manifest' or 'Create Template'.
- -Click on 'Create Manifest' context menu item, show user the create manifest modal popup as shown on screen (23-Manifest-Create.png).
- -Follow the Theme design styles for these pages.
- -We need additional fixes on existing prototype.
- -You need to merge two header rows into single level row to include the logo text, main menu items, global search, menu icon, user (with pic) and notification/messages icons - (as shown on inventory wireframe screens).
- -The header background color should be same as current menu items background colors.
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.
Font Requirements:
Follow provided Theme design fonts.
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:
Browsers Requirements:
- IE 10+ Browsers
- Latest Chrome Browsers
- Latest Firefox Browsers
- Latest Safari Browsers
- Mobile Browsers
Documentation Provided:
Please register to see attached documents.
Final Submission Guidelines
Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.