Xposure - Expert Services Scheduling App UI Prototype Challenge

Project Overview
Welcome to "Xposure - Expert Services Scheduling App UI Prototype Challenge". The goal of this challenge is to create a responsive HTML5 Prototype application based on provided storyboards and our guided spec below for our Expert Scheduling App. The prototype must follow our standards and our guidelines and in this challenge, we're only focus Desktop version. Please see more details below.

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 out all the HTML5/CSS3/JS code functions and make it easier for future developers and the client to understand what you have built.

NOTE: This application is using Bootstrap (http://getbootstrap.com/) for the responsive framework.

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 purpose of this application is to give our customers some easy way to find consultants to help set up their internal networks. The main task of this competition is to develop a responsive HTML5 prototype based on the provided storyboard designs and flow described below. Your prototype must work properly in all the required browsers.

Page Requirements 
General Requirements
- Focus on overall Bootstrap/great code structure.
- Replicate the design of the approved Storyboards (PSD Files) for all pages.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- This new Portal will be a responsive HTML5 application - it will need to be scalable for different devices (mobile devices, tablets, and desktops), but for now, focus only on Desktop version. 
- Ensure you submission clear of HTML and CSS Validation error and warning.
- Provide hover condition for all buttons and links.

01. SEARCH INPUT Screen
- Screen References "01-01_Search_Blanks.png" to "01-13_Search_Level-Info.png"
- This is the default screen everytime user open the application.
- This screen allows people to find an experts near to their location and available to help them or just check a list of available experts in period of time based on category, skills and other search criteria like shown in the storyboard.
- In this screen, user needs to select whether they want to Search an expert or just check availibility of all experts in particular date using "search expert" and "Experts availibility" radio box selection.
- If user choose "Search Experts" radio box buton and perform search action, they will be redirected to "02. SEARCH RESULTS Screen"
- If user choose "Experts Availibility" radio box and perform search action, they will be redirected to "03. EXPERT AVAILABILITY Screen"

- User can select different search criteria in this screen, such as :
-- "Exact Fit" & "Close Fit", to filter the search result whether it needs to exactly match with search criteria or just needs to have similar characteristics.
-- "Reset All values", when user do their search action, show the result and go back to perform another search, they can reset all values by clicking this button, otherwise, the previous search criteria will be appear in the screen. 
-- "Constultant Theatre", "Destination" and "Timezone", search criteria to specifically define the expert location.
-- "Availibility", this search criteria to filter the result based on period of times.
-- "Show Results", limit how many search result needs to be shown in the page at once.

-- "Qualification Needed", This search criteria a little bit more complex, with several sub-criteria can be selected in the process. Here is the interactions that we expect to be appear in this area :
---- This search criteria have 4 sub-criteria, they are "Categories", "Skills", "Mandatory" and "Level"
---- There are 11 categories available in this screen (01-04_Search_Add-Category.png), user can select more than one category and apps will create new line to show the category once they click add button (01-07_Search_Category-Added.png). Also user can add more category using "Add Category(s)" field.
---- Once categories selected, user can define "skills" of each category (01-08_Search_Add-Skill.png), user can select more than one skills and apps will create new line to show the skills once they click add button, clicking the info button also will trigger popup to show skills information (01-11_Search_Add-Skill_Info.png)
---- The dynamic interactions (multiple category and skills selection) needs to be simulated in your prototype, Once categories and skills has been selected by the user, there will be several categories and skills appear in the search form, and user needs to define the search mandatory for each category and skills (01-12_Search_Set-Mandatory.png) and also set the Level (01-13_Search_Level-Info.png) before able to execute the search form.

02. SEARCH RESULTS Screen
- Screen References "02-01_Result.png" to "02-11_Result_Criteria Skills Note.png"
- This screen provides a results page showing experts that have the required skills along with their physical location, and a listing of their skill sets.  These results are displayed in a recommended order based on an algorithm
- Maps and Expert list have toggle function that can be use to hide/expand the content.
- In the maps area, there will be a marker that showing all expert location in the maps (only expert that listed in search result area).
- The summary of search criteria will be provided below the header. 
- Calendar in each expert list can be move/slide (showing next and previous months).
- in expert list area, while the left area showing summary of the expert activity using monthly data, the right sidebar will show expert activity in daily list. There should be scrollbar available so user can navigate expert activity.
- Clicking "View All Skills" will trigger a bubble message to show all the skills that the expert have.
- Show us at least 4 expert list result in this page, and all content for each expert (personal information, skills, availibility status (date and time, in calendar or daily list), additional info, etc) needs to be loaded from JSON files.
- Please note that the search result might have a lot of data, so please provide scrollbar so user can navigate all the search result. 

03. EXPERT AVAILABILITY Screen
- Screen References "03-07_Experts Availability_Search Result.png" to "03-09_Experts Availability_Result_Info.png"
- Shows a calendar with quantity of EXPERTS available that meet the search criteria
- Ideally, the calendars would all move simultaneously. That is, if the top calendar shows November to February, all calendars show the same months.
- All expert availibility data content needs to be loaded from JSON files.
- Clicking any of the calendar date list will show how many experts available at that particular date.

Specific HTML/CSS/JavaScript Requirements:
HTML/CSS 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 layout 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.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.

JavaScript Requirements:
- All JavaScript used must not have any copyrights to any 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.
- Bootstrap responsive framework (http://getbootstrap.com/)
- You are allowed to use JQuery for this contest.

Browsers Requirements:
- Latest FF, Safari and Chrome Browsers.
- IE9++

Documentation Provided:
- Storyboard Screens and PSD files.

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.