Resource Facebook Chat

[wonderandawe]

I wanted to recreate the Facebook Chat interface with some small changes for readability and understanding. It ended up being too much work to edit, so I doubt I'll use it. Figured I share my code anyways.

Chat

Sigrid Kirk

So what is the deal here? What's going on at Crying Rock?

Regine Rothenberg

You wouldn't believe us if we told you.

Alex Wright

I could show you, but I'd get in trouble your father.

Sigrid Kirk

If you were in my place, would you want someone to tell you what is going on?

Regine Rothenberg

Fuck it. Go ahead tell her. She won't believe us anyways.

Alex Wright

Werewolves.

Though we prefer to be called Garou.

Sigrid Kirk

...

You got to be fucking kidding me.

So what the fuck is really going on?

Regine Rothenberg

Told you she wouldn't believe us.

[CENTER][div=width:60%;padding:00px; margin:00px;background-color:#FFFFFF;border:1px solid #000000;overflow-y: hidden;overflow-x: hidden;][div=width:100%;padding:20px; margin: 00px; background-color:#0084ff;color:#FFFFFF;][B][SIZE=6]Chat[/SIZE][/B][/div][/div][/CENTER]
[div=width:60%;padding:00px; margin:00px;background-color:#FFFFFF;border:1px solid #000000;overflow-y: hidden;overflow-x: hidden;]
[RIGHT][div=color:#696969; width:75%; padding-left: 5px; padding-top: 5px; padding-bottom: 5px; padding-right: 35px;float:right;]Sigrid Kirk[/div][/RIGHT]
[div=color:#FFFFFF;background-color:#0084ff; border-radius: 20px; width:80%; padding:20px; margin-bottom:20px; margin-left:20px; margin-right:20px;  float: right;]So what is the deal here?  What's going on at Crying Rock?[/div]
[div=color:#696969; width:75%; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; padding-left: 35px;float:left;]Regine Rothenberg [/div]
[div=color:#000000; background-color:#DCDCDC; border-radius: 20px; width:80%; padding:20px; margin-bottom:20px; margin-left:20px; margin-right:20px;  float:left;]You wouldn't believe us if we told you.[/div]
[div=color:#696969; width:75%; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; padding-left: 35px;float:left;]Alex Wright [/div]
[div=color:#000000; background-color:#DCDCDC; border-radius: 20px; width:80%; padding:20px; margin-bottom:20px; margin-left:20px; margin-right:20px;  float:left;]I could show you, but I'd get in trouble your father.[/div]
[RIGHT][div=color:#696969; width:75%; padding-left: 5px; padding-top: 5px; padding-bottom: 5px; padding-right: 35px;float:right;]Sigrid Kirk [/div][/RIGHT]
[div=color:#FFFFFF;background-color:#0084ff; border-radius: 20px; width:80%; padding:20px;margin-bottom:20px; margin-left:20px; margin-right:20px; float: right;]If you were in my place, would you want someone to tell you what is going on?[/div]
[div=color:#696969; width:75%; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; padding-left: 35px;float:left;]Regine Rothenberg [/div]
[div=color:#000000; background-color:#DCDCDC; border-radius: 20px; width:80%; padding:20px; margin-bottom:20px; margin-left:20px; margin-right:20px;  float:left;]Fuck it. Go ahead tell her.  She won't believe us anyways.[/div]
[div=color:#696969; width:75%; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; padding-left: 35px;float:left;]Alex Wright [/div]
[div=color:#000000; background-color:#DCDCDC; border-radius: 20px; width:80%; padding:20px; margin-bottom:20px; margin-left:20px; margin-right:20px; float:left;]Werewolves.[/div]
[div=color:#000000; background-color:#DCDCDC; border-radius: 20px; width:80%; padding:20px; margin-bottom:20px; margin-left:20px; margin-right:20px; float:left;]Though we prefer to be called Garou. [/div]

[RIGHT][div=color:#696969; width:75%; padding-left: 5px; padding-top: 5px; padding-bottom: 5px; padding-right: 35px;float:right;]Sigrid Kirk [/div][/RIGHT]
[div=color:#FFFFFF;background-color:#0084ff; border-radius: 20px; width:80%; padding:20px;margin-bottom:20px; margin-left:20px; margin-right:20px; float: right;]...[/div]
[div=color:#FFFFFF;background-color:#0084ff; border-radius: 20px; width:80%; padding:20px;margin-bottom:20px; margin-left:20px; margin-right:20px; float: right;]You got to be fucking kidding me.[/div]
[div=color:#FFFFFF;background-color:#0084ff; border-radius: 20px; width:80%; padding:20px;margin-bottom:20px; margin-left:20px; margin-right:20px; float: right;]So what the fuck is really going on?[/div]
[div=color:#696969; width:75%; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; padding-left: 35px;float:left;]Regine Rothenberg [/div]
[div=color:#000000; background-color:#DCDCDC; border-radius: 20px; width:80%; padding:20px; margin-bottom:20px; margin-left:20px; margin-right:20px;  float:left;]Told you she wouldn't believe us.[/div][/div]

 

[wonderandawe]

And it looks like crap in mobile.