Please see attached PDF file - it gives an idea what needs to be done from UI point of view. I will provide PSDs to the winning bidder. **If you deliver the project by Wed, March 23nd - I will pay 50% bonus to your bid.**
## Deliverables
Project involves creation of a jquery element within an existing site, used to demonstrate the uses of recessed lighting and to walk the user through a requirements wizard the results of which will be used to filter products according to their needs. Element contains two distinct pieces/sections: "How can I use recessed lighting?" and "Installation". The default landing shows the "How can I use" section, with the header for "Installation" below; when the header is clicked, an animation should smoothly collapse the top section into the header and the bottom section should expand to fill the view, and vice-versa if the top header is clicked while "Installation" is the active view. The user must be able to return to the either section directly from elsewhere in the site; if they return after having answered questions in the "Installation" section their answers should be displayed, and if they return to "How can I use" and subsequently select "Installation" again it should show their selected answers.
The "How Can I use" section consists of two tabs that are used to select between examples of 2 different kinds of uses of recessed lighting. The tabs determine the contents displayed below, which consists an embedded YouTube video and a slideshow with a minimum of 3 images, 2 of which are displayed at given time. Clicking an image will create an in-page modal popup showing a larger version of the image.
The "Installation" section contains a 'requirements wizard' which walks the user though 5 questions, the answers to which are passed to the site to create a product filter upon completion of the wizard. Each question when answered should animate a transition that displays the answers selected so far and display the next question; the user should be able to return any previous questions by clicking the displayed answer, which will display the question again, effectively re-starting the sequence of questions from that point. Each question will have either an embedded YouTube video explaining it or a small text box if no video is available. At least one question will be displayed or not depending on the answer to a previous question the answer to which may make it irrelevant, thus the final screen will show either 4 or 5 answers, depending. Final page includes a link to the filtered products page, if after a small delay the user has done nothing the filtered products page will automatically be loaded.
Let me state here clearly what I will be looking for:
1. Nice clean jQuery for all interactions. jQuery effects should not be too complex, however simple hide/show won't work as well. Need something very gentle.
2. No FORMS should be used - this code will be put inside ASP.Net website which already has a form which I will use for submission.
3. CSS must be in a separate file, all classes named clearly
4. No inline CSS
5. All major browsers must be supported (Chrome 8+, FF 3+, IE7+, Safari 4+)
6. If any text/picture/youtube video is missing - then LOREM IMPUM/any sample image/any sample youtube video should be used.
7. HTML should pass W3C validation
Please post your bids, ask any questions - but keep in mind - if you deliver it by Wed 23rd 12am EST - you will get 50% bonus. I need this project to get done ASAP.
I will provides PSDs to the winning bidder.