Exclusively for Vikranat G. (vikrant12112) Develop html5 based page with 3 separate containers - do not bid 2 - 13/12/2017 13:23 EST

Javascript based, no special libraries. Need simple area with 3 containers. Initiate with all sections expanded. (See [login to view URL]) Three sections as follows: Left container needs to be a functioning Explorer Both right and bottom/right containers are empty Right container will be tab based and will open tabs as selected from explorer All containers can be adjusted by dragging “channel” separating them, which would increase/decrease area and decrease/adjoining area. (See [login to view URL]) All containers need to have elevators to scroll to show full different parts of container Minimize buttons will minimize container to a ribbon ([login to view URL]) Maximize button will take the full space, minimizing the area containers (See [login to view URL]) Restore button will open container without impacting whatever size the other containers are ———————————— For explorer container Each element will have two icons - for folder items, the first icon will be either a triangle pointing right or pointing down, depending on state of folder, the second icon will be a closed or open folder depending on state of folder - for chart items, the first icon is a spacer icon, and the second icon is a simple icon. (I should be able to specify what icons to put in all places) Click on arrow once click to expand folder and changes arrow from pointing to the right to pointing down. Click on text of folder two clicks to expand folder and changes arrow from pointing to the right to pointing down. Double Click on Chart to open If Open, activate tab for that selected item Hover over tab text shows entire path (No image) Explorer container is populated with Ajax calls that will return json as follows: Uri: http://domain/api/map/explorer?path= {“”:[ {“name”:”amcolumn”,”type”:”folder”}, {“name”:”amline”,”type”:”folder”} ] } Uri: http://domain/api/map/explorer?path=amline {“amline”:[ {“name”:”amcolumn”,”type”:”folder”}, {“name”:”amline”,”type”:”folder”}, {“name”:”ampie”,”type”:”folder”}, {“name”:”amxy”,”type”:”folder”}, {“name”:”amxy”,”type”:”folder”}, {“name”:”amcolumn”,”type”:”folder”}, {“name”:”amline”,”type”:”folder”}, {“name”:”ampie”,”type”:”folder”}, {“name”:”amxy”,”type”:”folder”}, {“name”:”amxy”,”type”:”folder”}, {“name”:”amcolumn”,”type”:”folder”}, {“name”:”amline”,”type”:”folder”}, {“name”:”Chart 9”,”type”:”folder”} ] Uri: http://domain/api/map/explorer?path=amline|amxy|pdci|amchart {“amline|amxy|pdci|amchart”:[ {“name”:”amcolumn”,”type”:”folder”}, {“name”:”amline”,”type”:”folder”}, {“name”:”amxy”,”type”:”folder”}, {“name”:”amxy”,”type”:”folder”}, {“name”:”Chart”,”type”:”folder”} {“name”:”Chart 2”,”type”:”folder”} {“name”:”Chart 3”,”type”:”folder”} {“name”:”Chart 4”,”type”:”folder”} {“name”:”Chart 5”,”type”:”folder”} {“name”:”Chart 6”,”type”:”folder”} {“name”:”Chart 7”,”type”:”folder”} ] } —————————— For second container will contain tabs for opened items: When Too Many open tabs an >> icon is added a counter is kept of items not visible (see [login to view URL]) When Too Many tabs open and >> icons clicked, dropdown appears (See [login to view URL]) —————————— Must be responsive (I should be able to view this through a mobile device) We agreed to $300 total for projecdt $150 with first prototype $150 with completion to my satisfaction 4 days to complete project Vikranat G. understands that I am very specific about my deliverables. I spent a good amount of time getting it ready. I need to make sure it looks as good as what I provided, and work as I provided in my requirements. If it does not, I will not accept it.