Responsive design of one page for video-survey (Mobile and Desktop)

• Status: Closed
• Preis: €50
• Einträge eingereicht: 10
• Gewinner: mdtausifiqbal

Winner

Kurzbeschreibung des Wettbewerbs

We need a nice designed template for a surey (video) which will be mostly be used from mobile web, but shall also be nice with desktop-use.

For mobile ... see draft attached.
For desktop ... show us your idea :)

In the headerarea we have a title and subtitle for the survey information and an little id-number in the right corner. Below that the question will be shown and a countdown-timer (seconds max. 3 digits) with corresponding inverse-progressbar (use 30 seconds for demonstration).

In the main area we will use RecordRTC for video recording (see below).
(The integration of video-logic must NOT be included (we do that), but use one of the demos to css for fitting.)

At the bottom we need a copyright-section.

We do not have a specific color scheme yet.
We are using jQuery (3.6.1).

Please post URL to your design/idea.

Further three pages shall be included based on the main-page:
1.) Introduction ... same page but instead of video-area: textarea with welcome-text, right lower corner green button ("Start"). This page will be shown before the video-recording.
2.) Form ... same page but instead of video-area: Form to enter (Gender-Select, Firstname, Lastname, email, phone), right lower corner button ("Save") shall be inactive and turn active/green if all fields are checked and filled (check validation of email). Just like with a contact form. This page will then be shown after the video-recording
3.) Good bye ... same page but instead of video-area now showing the end of the survey (thanks for participating).

We will change these contents with jQuery on one loaded page (show/how the corresponding divs). So, if you want, you can simulate that moving from one view to the other when button was hit (or question = 30 seconds have passed).

Link to RecordRTC:
https://www.webrtc-experiment.com/RecordRTC/

Empfohlene Fähigkeiten

• CSS
• HTML
• HTML5
• jQuery / Prototype
• Webdesign