|
@@ -23,9 +23,9 @@
|
|
|
<div class="chatbox chatroom" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392">
|
|
|
<div class="flyout box-flyout">
|
|
|
<div class="chat-head chat-head-chatroom row no-gutters">
|
|
|
- <div class="col">
|
|
|
- <div class="chat-title">Chatroom with a very long name</div>
|
|
|
- <p class="chatroom-topic">May the force be with you</p>
|
|
|
+ <div class="col col-9">
|
|
|
+ <div class="chat-title">ACT II. SCENE II. Capulet's orchard.</div>
|
|
|
+ <p class="chatroom-topic">Two households, both alike in dignity, In fair Verona, where we lay our scene.</p>
|
|
|
</div>
|
|
|
<div class="chatbox-buttons row no-gutters">
|
|
|
<a class="chatbox-btn fa fa-minus"></a>
|
|
@@ -35,63 +35,135 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="chat-body chatroom-body row no-gutters">
|
|
|
- <div class="chat-area col-md-9 col-8">
|
|
|
+ <div class="chat-area">
|
|
|
<div class="chat-content">
|
|
|
- <time class="message chat-info chat-date badge badge-info" data-isodate="2018-04-36T00:00:00+02:00">Tuesday Apr 36th 2018</time>
|
|
|
- <div class="message chat-info chat-event" data-isodate="2018-04-36T18:07:36+02:00" data-join=""jc"">jc has entered the room</div><div class="message chat-message " data-isodate="2018-04-36T18:07:26+02:00" data-msgid="4fb4d101-8136-4f2a-8dfb-2615896b8316">
|
|
|
- <canvas height="36" width="36" class="avatar"></canvas>
|
|
|
- <span class="chat-msg-author chat-msg-me">18:07 me: </span>
|
|
|
- <span class="chat-msg-content">ee</span>
|
|
|
- <div class="chat-msg-media"></div>
|
|
|
- </div>
|
|
|
- <div class="message chat-message">
|
|
|
- <canvas height="36" width="36" class="avatar"></canvas>
|
|
|
- <span class="chat-msg-author chat-msg-room">18:50
|
|
|
- <span class="chat-msg-room">luke: </span>
|
|
|
- </span>
|
|
|
- <span class="chat-msg-content">leia: hi :)</span>
|
|
|
+ <div class="message date-separator">
|
|
|
+ <hr class="separator">
|
|
|
+ <time class="separator-text" datetime="2018-06-03T00:00:00.000Z"><span>Tue Jun 03 2018</span></time>
|
|
|
</div>
|
|
|
- <div class="message chat-message">
|
|
|
- <canvas height="36" width="36" class="avatar"></canvas>
|
|
|
- <span class="chat-msg-author chat-msg-room">19:36
|
|
|
- <span class="chat-msg-room">leia: </span>
|
|
|
- </span>
|
|
|
- <span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
|
|
|
+
|
|
|
+ <div class="message chat-info chat-event" data-isodate="2018-04-36T18:07:36+02:00" data-join=""Romeo Montague"">
|
|
|
+ Romeo Montague has entered the room</div>
|
|
|
+
|
|
|
+ <div class="message chat-msg">
|
|
|
+ <canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
|
|
|
+ <div class="chat-msg-content">
|
|
|
+ <span class="chat-msg-heading">
|
|
|
+ <span class="chat-msg-author">Romeo Montague</span>
|
|
|
+ <span class="chat-msg-time text-muted">15:31</span>
|
|
|
+ </span>
|
|
|
+ <p class="chat-msg-text">He jests at scars that never felt a wound.</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="message date-separator">
|
|
|
+ <hr class="separator">
|
|
|
+ <time class="separator-text" datetime="2018-06-04T00:00:00.000Z"><span>Tue Jun 04 2018</span></time>
|
|
|
</div>
|
|
|
- <time class="message chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
|
|
|
- <div class="message chat-message">
|
|
|
+
|
|
|
+ <div class="message chat-info chat-event" data-isodate="2018-04-36T18:07:36+02:00" data-join=""Juliet"">
|
|
|
+ Juliet has entered the room</div>
|
|
|
+
|
|
|
+ <div class="message chat-msg">
|
|
|
+ <canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
|
|
|
+ <div class="chat-msg-content">
|
|
|
+ <span class="chat-msg-heading">
|
|
|
+ <span class="chat-msg-author">Romeo Montague</span>
|
|
|
+ <span class="chat-msg-time text-muted">19:36</span>
|
|
|
+ </span>
|
|
|
+ <p class="chat-msg-text">
|
|
|
+ But, soft! what light through yonder window breaks?
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="message chat-msg chat-msg-followup">
|
|
|
+ <canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
|
|
|
+ <div class="chat-msg-content">
|
|
|
+ <span class="chat-msg-heading">
|
|
|
+ <span class="chat-msg-author">Romeo Montague</span>
|
|
|
+ <span class="chat-msg-time text-muted">19:36</span>
|
|
|
+ </span>
|
|
|
+ <p class="chat-msg-text">It is the east, and Juliet is the sun.</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="message chat-msg chat-msg-followup">
|
|
|
+ <canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
|
|
|
+ <div class="chat-msg-content">
|
|
|
+ <span class="chat-msg-heading">
|
|
|
+ <span class="chat-msg-author">Romeo Montague</span>
|
|
|
+ <span class="chat-msg-time text-muted">19:36</span>
|
|
|
+ </span>
|
|
|
+ <p class="chat-msg-text">Arise, fair sun, and kill the envious moon, Who is already sick and pale with grief</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="message chat-msg">
|
|
|
<canvas height="36" width="36" class="avatar"></canvas>
|
|
|
- <span class="chat-msg-author chat-msg-room">19:36
|
|
|
- <span class="chat-msg-room">Obi-wan Kenobi, Jedi Master: </span>
|
|
|
- </span>
|
|
|
- <span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
|
|
|
- </div>
|
|
|
+ <div class="chat-msg-content">
|
|
|
+ <span class="chat-msg-heading">
|
|
|
+ <span class="chat-msg-author">Juliet Capulet</span>
|
|
|
+ <span class="chat-msg-time text-muted">19:43</span>
|
|
|
+ </span>
|
|
|
+ <p class="chat-msg-text">
|
|
|
+ O Romeo, Romeo! wherefore art thou Romeo?
|
|
|
+ Deny thy father and refuse thy name;
|
|
|
+ Or, if thou wilt not, be but sworn my love,
|
|
|
+ And I'll no longer be a Capulet.
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join=""jcbrand"">jcbrand has entered the room</div>
|
|
|
- <div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join=""jcbrand"">Topic set by jcbrand</div>
|
|
|
+ <div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join=""Mercutio"">Mercutio has entered the room</div>
|
|
|
+ <div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join=""Mercutio"">Topic set by Mercutio</div>
|
|
|
<div class="message chat-info chat-topic" data-isodate="2018-03-07T10:21:09+01:00">Converse.js: The latest release is 3.3.4. Please be
|
|
|
patient if your questions aren't answered immediately. We're all in different timezones.</div>
|
|
|
|
|
|
- <div class="message chat-message">
|
|
|
+ <div class="message chat-msg">
|
|
|
<canvas height="36" width="36" class="avatar"></canvas>
|
|
|
- <span class="chat-msg-author chat-msg-me">19:42
|
|
|
- <span class="chat-msg-me">me: </span>
|
|
|
- </span>
|
|
|
- <span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
|
|
- </div>
|
|
|
- <div class="message chat-message">
|
|
|
+ <div class="chat-msg-content">
|
|
|
+ <span class="chat-msg-heading">
|
|
|
+ <span class="chat-msg-author">Mercutio</span>
|
|
|
+ <span class="chat-msg-time text-muted">19:49</span>
|
|
|
+ </span>
|
|
|
+ <p class="chat-msg-text">I mean, sir, in delay We waste our lights in vain, like lamps by day.</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="message chat-msg chat-msg-followup">
|
|
|
<canvas height="36" width="36" class="avatar"></canvas>
|
|
|
- <span class="chat-msg-author chat-msg-room">19:43
|
|
|
- <span class="chat-msg-roomme">Obi-wan Kenobi, Jedi Master: </span>
|
|
|
- </span>
|
|
|
- <span class="chat-msg-content">Another message to check that scrolling works.</span>
|
|
|
- </div>
|
|
|
+ <div class="chat-msg-content">
|
|
|
+ <span class="chat-msg-heading">
|
|
|
+ <span class="chat-msg-author">Mercutio</span>
|
|
|
+ <span class="chat-msg-time text-muted">19:49</span>
|
|
|
+ </span>
|
|
|
+ <p class="chat-msg-text">
|
|
|
+ Take our good meaning, for our judgment sits.
|
|
|
+ Five times in that ere once in our five wits.</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="message chat-msg chat-msg-followup">
|
|
|
+ <canvas height="36" width="36" class="avatar"></canvas>
|
|
|
+ <div class="chat-msg-content">
|
|
|
+ <span class="chat-msg-heading">
|
|
|
+ <span class="chat-msg-author">Mercutio</span>
|
|
|
+ <span class="chat-msg-time text-muted">19:49</span>
|
|
|
+ </span>
|
|
|
+ <p class="chat-msg-text">
|
|
|
+ True, I talk of dreams, Which are the children of an idle brain, Begot of nothing but vain fantasy,
|
|
|
+ Which is as thin of substance as the air And more inconstant than the wind, who wooes
|
|
|
+ Even now the frozen bosom of the north, And, being anger'd, puffs away from thence,
|
|
|
+ Turning his face to the dew-dropping south.
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
+ <div class="new-msgs-indicator">▼ You have unread messages ▼</div>
|
|
|
<form class="sendXMPPMessage">
|
|
|
<ul class="chat-toolbar no-text-select">
|
|
|
<li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
|
|
|
<li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
|
|
|
- <li class="toggle-clear"><a class="fa fa-eraser" title="Clear all messages"></a></li>
|
|
|
</ul>
|
|
|
<textarea class="chat-textarea form-control" placeholder="Message"></textarea>
|
|
|
</form>
|
|
@@ -106,91 +178,45 @@
|
|
|
|
|
|
<ul class="occupant-list">
|
|
|
<li class="moderator occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Admiral Ackbar</li>
|
|
|
+ <div class="occupant-status occupant-online circle" title="Online"></div>Juliet Capulet</li>
|
|
|
<li class="moderator occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Padmé Amidala</li>
|
|
|
- <li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Jar Jar Binks</li>
|
|
|
- <li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-away circle" title="Away"></div>C-3PO</li>
|
|
|
- <li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Chewbacca</li>
|
|
|
- <li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Count Dooku</li>
|
|
|
- <li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Boba Fett</li>
|
|
|
- <li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Jabba the Hutt</li>
|
|
|
- <li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Mara Jade</li>
|
|
|
- <li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Queen Jamillia</li>
|
|
|
- <li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Jerec</li>
|
|
|
- <li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Moff Jerjerrod</li>
|
|
|
- <li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Qui-Gon Jinn</li>
|
|
|
- <li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Captain Kael</li>
|
|
|
- <li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Kir Kanos</li>
|
|
|
- <li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Talon Karrde</li>
|
|
|
- <li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Talon Karrde</li>
|
|
|
- <li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Obi-Wan Kenobi</li>
|
|
|
- <li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Darth Maul</li>
|
|
|
- <li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Princess Leia Organa</li>
|
|
|
- <li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Emperor Palpatine</li>
|
|
|
- <li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>R2-D2</li>
|
|
|
- <li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>R5-D4</li>
|
|
|
- <li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Darth Sidious</li>
|
|
|
- <li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Anakin Skywalker</li>
|
|
|
+ <div class="occupant-status occupant-online circle" title="Online"></div>Romeo Montague</li>
|
|
|
<li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Luke Skywalker</li>
|
|
|
+ <div class="occupant-status occupant-online circle" title="Online"></div>Mercutio</li>
|
|
|
<li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Han Solo</li>
|
|
|
+ <div class="occupant-status occupant-away circle" title="Away"></div>Lady Montague</li>
|
|
|
<li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>TC-14</li>
|
|
|
+ <div class="occupant-status occupant-online circle" title="Online"></div>Lord Montague</li>
|
|
|
<li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Booster Terrik</li>
|
|
|
+ <div class="occupant-status occupant-online circle" title="Online"></div>Friar Laurence</li>
|
|
|
<li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Mirax Terrik</li>
|
|
|
+ <div class="occupant-status occupant-online circle" title="Online"></div>Tybalt</li>
|
|
|
<li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Mod Terrik</li>
|
|
|
+ <div class="occupant-status occupant-online circle" title="Online"></div>Paris</li>
|
|
|
<li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Tessek</li>
|
|
|
+ <div class="occupant-status occupant-online circle" title="Online"></div>Lord Capulet</li>
|
|
|
<li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Darth Vader</li>
|
|
|
+ <div class="occupant-status occupant-online circle" title="Online"></div>Benvolio</li>
|
|
|
<li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Supreme Chancellor Finis Valorum</li>
|
|
|
+ <div class="occupant-status occupant-online circle" title="Online"></div>Lady Capulet</li>
|
|
|
<li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Nahdar Vebb</li>
|
|
|
+ <div class="occupant-status occupant-online circle" title="Online"></div>Balthasar</li>
|
|
|
<li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>General Maximilian Veers</li>
|
|
|
+ <div class="occupant-status occupant-online circle" title="Online"></div>Escalus, Prince of Verona</li>
|
|
|
<li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Tahiri Veila</li>
|
|
|
+ <div class="occupant-status occupant-online circle" title="Online"></div>Peter</li>
|
|
|
<li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Asajj Ventress</li>
|
|
|
+ <div class="occupant-status occupant-online circle" title="Online"></div>Abram</li>
|
|
|
<li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Vergere</li>
|
|
|
+ <div class="occupant-status occupant-online circle" title="Online"></div>Sampson</li>
|
|
|
<li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>King Veruna</li>
|
|
|
+ <div class="occupant-status occupant-online circle" title="Online"></div>The Nurse</li>
|
|
|
<li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Vima-Da-Boda</li>
|
|
|
+ <div class="occupant-status occupant-online circle" title="Online"></div>Gregory</li>
|
|
|
<li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Quinlan Vos</li>
|
|
|
+ <div class="occupant-status occupant-online circle" title="Online"></div>Friar John</li>
|
|
|
<li class="participant occupant" title="Click to mention leia in your message.">
|
|
|
- <div class="occupant-status occupant-online circle" title="Online"></div>Yoda</li>
|
|
|
+ <div class="occupant-status occupant-online circle" title="Online"></div>Servant</li>
|
|
|
</ul>
|
|
|
<div class="chatroom-features">
|
|
|
<p class="occupants-heading">Features</p>
|
|
@@ -224,7 +250,7 @@
|
|
|
document.addEventListener("DOMContentLoaded", function(event) {
|
|
|
new Modals();
|
|
|
new Sidebar();
|
|
|
- new UserPanel();
|
|
|
+ new UserPanel();
|
|
|
});
|
|
|
</script>
|
|
|
|