HTML5 Chat Room Template - Repost - open to bidding

I plan on making an HTML5 chat website. I am struggling with a proper layout for the actual chat room. I need a single page build with: HTML5 compatible markup, CSS3 styles, and jQuery javascript (if needed). My website will also be using Twitter Bootstrap, which is a CSS/Javascript framework, so please build this with that in mind as well. You will provide an HTML5 compliant page that utilizes the full browser window height, and changes dynamically to fit the user's browser if resized.

See additional details.

## Deliverables

The chat room has 4 main areas:

Top Navigation bar: 40 pixels height, 100% screen width. This will already be done by Twitter Bootstrap, but you should include it in your final product.

Chat text area: This will be the most dynamic as far as width and height go. It should use any width and height of the browser that any other areas are not using. In other words, it should be 100% screen width, minus the space that the roster area takes up. It shoulbe 100% screen height, minus the space the top navigation bar and bottom chat input area take up. This is where the chat messages will be displayed to the user.

Roster area: This is where the user list will appear, to show everyone who is in the chat room. Fixed width (I don't care how wide it is in your deliverables, as long as it's adjustable.) and 100% screen height, minus the space the top navigation bar and the bottom chat input area take up.

Chat input area: Bottom of the screen - this is where the user will type his or her message to be sent to the chat room. It should be a fixed height, and should be 100% screen width, minus some space for a "send" button.

The idea is to have the page resize the areas (mainly the chat text area) when the browser is resized. Since the page will always take up 100% of the browser height, the page should never need a scroll bar from the browser. The chat text area will need a scroll bar, however.

The fixed width and fixed height areas will need to be adjustable by me afterwards.

Please use Twitter Bootstrap as a starting framework to build the page. This means that jQuery should be used as a Javascript framework, if any is needed.

Design should be HTML5 and CSS3 compliant and show properly in the following browsers: IE7, IE8, IE9 as well as the latest versions of: Firefox, Chrome, Opera, and Safari. It does not have to be compatible with mobile or tablet browsers, but I will give you a bonus for tablet-device compatibility.

Please see mock-up design attached.

Please also see <> for an example of what I'm looking for. I do not need the chat functionality, only the layout. I do not need an exact replica of the site given as an example. Just something close.

Skills: Communications

See more: html5 chat layout, wide open design, website layout using html5, top template html5, template website bootstrap, template html5 bootstrap, template chat bootstrap, roster example, room layout design, room design layout, proper room, product page bootstrap, open mind template, open messages, mobile template css, html5 text, html5 template bootstrap, html5 button, how to design your room, how to design website by using html, how to design a website using html and css with example, how to design a room, go to top javascript, example of a roster, design your room

About the Employer:
( 0 reviews ) India

Project ID: #4973658

1 freelancer is bidding on average $100 for this job


I can build this for [url removed, login to view] may look exactly like the site you pointed out, or i think we should make it a bit more modern and flat(overall look of gmail for example).

$100 USD in 3 days
(0 Reviews)