Expand the mockup a bit. Add canvas element, more msgs etc.

mockup.html

@@ -192,8 +192,9 @@
     <div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f" style="opacity: 1; display: inline;">
         <div class="chat-head chat-head-chatbox">
             <a class="close-chatbox-button icon-close"></a>
-            <a href="" target="_blank" class="user">
-                <div class="chat-title">John Smit</div>
+            <a href="http://opkode.com" target="_blank" class="user">
+                <canvas height="35px" width="35px" class="avatar" style="background-color: black"></canvas>
+                <div class="chat-title"> JC Brand </div>
             </a>
             <p class="user-custom-message"></p>
             <p></p>
@@ -203,6 +204,10 @@
                 <span class="chat-message-me">19:39 me:&nbsp;</span>
                 <span class="chat-message-content">Hello world</span>
             </div>
+            <div class="chat-message ">
+                <span class="chat-message-them">15:45 Benedict-John:&nbsp;</span>
+                <span class="chat-message-content">Dagsê</span>
+            </div>
         </div>
         <form class="sendXMPPMessage" action="" method="post">
             <textarea type="text" class="chat-textarea" placeholder="Personal message"></textarea>
@@ -213,7 +218,7 @@
         <div class="chat-head chat-head-chatroom">
             <a class="close-chatbox-button icon-close"></a>
             <a class="configure-chatroom-button icon-wrench" style=""></a>
-            <div class="chat-title"> converse.js </div>
+            <div class="chat-title"> Chatroom </div>
             <p class="chatroom-topic"></p>
             <p></p>
         </div>
@@ -222,8 +227,8 @@
                 <div class="chat-content">
                     <time class="chat-date" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
                     <div class="chat-message ">
-                        <span class="chat-message-room">18:50 fires:&nbsp;</span>
-                        <span class="chat-message-content">explodingcoder: hi :)</span>
+                        <span class="chat-message-room">18:50 luke:&nbsp;</span>
+                        <span class="chat-message-content">leia: hi :)</span>
                     </div>
                     <div class="chat-message ">
                         <span class="chat-message-me">19:40 me:&nbsp;</span>
@@ -238,8 +243,8 @@
             <div class="participants">
                 <ul class="participant-list">
                     <li class="participant" title="This user can send messages in this room">jabberthehut</li>
-                    <li class="participant" title="This user can send messages in this room">explodingcoder</li>
-                    <li class="moderator" title="This user is a moderator">jcbrand</li>
+                    <li class="participant" title="This user can send messages in this room">leia</li>
+                    <li class="moderator" title="This user is a moderator">luke</li>
                 </ul>
             </div>
         </div>
@@ -249,7 +254,7 @@
         <div class="chat-head chat-head-chatroom">
             <a class="close-chatbox-button icon-close"></a>
             <a class="configure-chatroom-button" style="display:none">&nbsp;</a>
-            <div class="chat-title"> problematic </div>
+            <div class="chat-title"> Restricted Chatroom</div>
             <p class="chatroom-topic"></p>
             <p></p>
         </div>