537 lines
35 KiB
HTML
537 lines
35 KiB
HTML
<!doctype html>
|
|
<html class="no-js" lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Chatroom Fullscreen</title>
|
|
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
|
|
<link type="text/css" rel="stylesheet" media="screen" href="../../css/converse.css" />
|
|
</head>
|
|
|
|
<body class="reset">
|
|
<div id="conversejs" class="fullscreen converse-fullscreen">
|
|
<div class="sidebar"></div>
|
|
<div class="converse-chatboxes row no-gutters">
|
|
<div id="controlbox" class="chatbox">
|
|
<div class="flyout box-flyout">
|
|
<div class="controlbox-panes">
|
|
<div class="controlbox-pane"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chatbox chatroom" id="chatroom">
|
|
<div class="flyout box-flyout">
|
|
<div class="chat-head chat-head-chatroom row no-gutters">
|
|
<div class="chatbox-title">
|
|
<div class="chat-title">Capulet's orchard</div>
|
|
<p class="chatroom-description">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-close"></a>
|
|
<a class="chatbox-btn fa fa-wrench"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chat-body chatroom-body row no-gutters">
|
|
<div class="chat-area">
|
|
<div class="chat-content">
|
|
<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-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 chat-msg--action" data-isodate="2018-04-36T18:07:38+02:00">
|
|
<div class="chat-msg__content chat-msg__content--action">
|
|
<span class="chat-msg__heading">
|
|
<time timestamp="2018-12-29" class="chat-msg__time">15:29</time>
|
|
<span class="chat-msg__author">**Romeo Montague</span>
|
|
</span>
|
|
<span class="chat-msg__text">looks around</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="message chat-msg">
|
|
<canvas class="avatar chat-msg__avatar" data-avatar="/mockup/images/romeo.jpg" height="36" width="36"></canvas>
|
|
<div class="chat-msg__content">
|
|
<div class="chat-msg__heading">
|
|
<span class="chat-msg__author">Romeo Montague <span class="badge badge-primary">Developer</span></span>
|
|
<span class="chat-msg__time">15:31</span>
|
|
</div>
|
|
<div class="chat-msg__body">
|
|
<div class="chat-msg__message">
|
|
<div class="chat-msg__text">He jests at scars that never felt a wound.</div>
|
|
</div>
|
|
<div class="chat-msg__actions">
|
|
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
|
|
<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 class="avatar chat-msg__avatar" data-avatar="/mockup/images/romeo.jpg" height="36" width="36"></canvas>
|
|
<div class="chat-msg__content">
|
|
<div class="chat-msg__heading">
|
|
<span class="chat-msg__author">Romeo Montague</span>
|
|
<span class="chat-msg__time">19:36</span>
|
|
</div>
|
|
<div class="chat-msg__body">
|
|
<div class="chat-msg__message">
|
|
<div class="chat-msg__text">But, soft! what light through yonder window breaks?</div>
|
|
</div>
|
|
<div class="chat-msg__actions">
|
|
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="message chat-msg chat-msg--followup">
|
|
<canvas class="avatar chat-msg__avatar" data-avatar="/mockup/images/romeo.jpg" height="36" width="36"></canvas>
|
|
<div class="chat-msg__content">
|
|
<div class="chat-msg__heading">
|
|
<span class="chat-msg__author">Romeo Montague</span>
|
|
<span class="chat-msg__time">19:36</span>
|
|
</div>
|
|
<div class="chat-msg__body">
|
|
<div class="chat-msg__message">
|
|
<div class="chat-msg__text">It is the east, and Juliet is the sun.</div>
|
|
</div>
|
|
<div class="chat-msg__actions">
|
|
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="message chat-msg chat-msg--followup">
|
|
<canvas class="avatar chat-msg__avatar" data-avatar="/mockup/images/romeo.jpg" height="36" width="36"></canvas>
|
|
<div class="chat-msg__content">
|
|
<div class="chat-msg__heading">
|
|
<span class="chat-msg__author">Romeo Montague</span>
|
|
<span class="chat-msg__time">19:36</span>
|
|
</div>
|
|
<div class="chat-msg__body">
|
|
<div class="chat-msg__message">
|
|
<div class="chat-msg__text">Arise, fair sun, and kill the envious moon, Who is already sick and pale with grief</div>
|
|
</div>
|
|
<div class="chat-msg__actions">
|
|
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="message chat-msg">
|
|
<canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
|
|
<div class="chat-msg__content">
|
|
<div class="chat-msg__heading">
|
|
<span class="chat-msg__author">Juliet Capulet</span>
|
|
<span class="chat-msg__time">19:43</span>
|
|
</div>
|
|
<div class="chat-msg__body">
|
|
<div class="chat-msg__message">
|
|
<div 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.
|
|
</div>
|
|
</div>
|
|
<div class="chat-msg__actions">
|
|
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="message chat-msg">
|
|
<canvas class="avatar chat-msg__avatar" data-avatar="/mockup/images/romeo.jpg" height="36" width="36"></canvas>
|
|
<div class="chat-msg__content">
|
|
<div class="chat-msg__heading">
|
|
<span class="chat-msg__author">Romeo Montague</span>
|
|
<span class="chat-msg__time">19:36</span>
|
|
</div>
|
|
<div class="chat-msg__body">
|
|
<div class="chat-msg__message">
|
|
<span class="chat-msg__text">Uploading file: <strong>juliet.jpg</strong>, 120kb</span>
|
|
<progress value="50" max="100"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="message chat-msg">
|
|
<canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
|
|
<div class="chat-msg__content">
|
|
<div class="chat-msg__heading">
|
|
<span class="chat-msg__author">Juliet Capulet</span>
|
|
<span class="chat-msg__time">19:45</span>
|
|
</div>
|
|
<div class="chat-msg__body">
|
|
<div class="chat-msg__message">
|
|
<div class="chat-msg__media">
|
|
<a href="https://images.unsplash.com/photo-1496660067708-010ebdd7ce72?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ea3514e6e00d8ce25c24d992b97929d9&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb"
|
|
target="_blank" rel="noopener">
|
|
<img class="chat-image img-thumbnail" src="https://images.unsplash.com/photo-1496660067708-010ebdd7ce72?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ea3514e6e00d8ce25c24d992b97929d9&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="message chat-msg" data-isodate="2018-04-36T18:07:36+02:00" data-msgid="some-long-id">
|
|
<canvas class="avatar chat-msg__avatar" data-avatar="/mockup/images/romeo.jpg" height="36" width="36"></canvas>
|
|
<div class="chat-msg__content">
|
|
<span class="chat-msg__heading">
|
|
<span class="chat-msg__author">Romeo Montague</span>
|
|
<span class="chat-msg__time">19:36</span>
|
|
</span>
|
|
<div class="chat-msg__body">
|
|
<div class="chat-msg__message">
|
|
<div class="chat-msg__spoiler-hint">
|
|
<span class="spoiler-hint">By a name</span>
|
|
<a class="badge badge-info spoiler-toggle" data-toggle-state="closed" href="#"><i class="fa fa-eye"></i>Show more</a>
|
|
</div>
|
|
<div class="chat-msg__text spoiler collapsed">
|
|
I know not how to tell thee who I am: My name, dear saint, is hateful to
|
|
myself, Because it is an enemy to thee. Had I it written, I would tear the word.
|
|
</div>
|
|
</div>
|
|
<div class="chat-msg__actions">
|
|
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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-msg">
|
|
<canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
|
|
<div class="chat-msg__content">
|
|
<div class="chat-msg__heading">
|
|
<span class="chat-msg__author">Mercutio</span>
|
|
<span class="chat-msg__time">19:49</span>
|
|
</div>
|
|
<div class="chat-msg__body">
|
|
<i title="This message has been edited" class="fa fa-edit chat-msg__edit-modal"></i>
|
|
<div class="chat-msg__message">
|
|
<span class="chat-msg__text">I mean, sir, in delay We waste our lights in vain, like lamps by day.</span>
|
|
</div>
|
|
<div class="chat-msg__actions">
|
|
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="message chat-msg chat-msg--followup">
|
|
<canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
|
|
<div class="chat-msg__content">
|
|
<div class="chat-msg__heading">
|
|
<span class="chat-msg__author">Mercutio</span>
|
|
<span class="chat-msg__time">19:49</span>
|
|
</div>
|
|
<div class="chat-msg__body">
|
|
<div class="chat-msg__message">
|
|
<span class="chat-msg__text">
|
|
Take our good meaning, for our judgment sits.
|
|
Five times in that ere once in our five wits.</span>
|
|
</div>
|
|
<div class="chat-msg__actions">
|
|
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="message chat-msg chat-msg--followup">
|
|
<canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
|
|
<div class="chat-msg__content">
|
|
<span class="chat-msg__heading">
|
|
<span class="chat-msg__author">Mercutio</span>
|
|
<span class="chat-msg__time">19:49</span>
|
|
</span>
|
|
<div class="chat-msg__body">
|
|
<div class="chat-msg__message">
|
|
<span 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.</span>
|
|
</div>
|
|
<div class="chat-msg__actions">
|
|
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
</ul>
|
|
<textarea class="chat-textarea form-control" placeholder="Message"></textarea>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="occupants col-md-3 col-4">
|
|
<p class="occupants-heading">Occupants:</p>
|
|
<form class="room-invite">
|
|
<input class="form-control" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto">
|
|
<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre>
|
|
</form>
|
|
|
|
<ul class="occupant-list">
|
|
<li class="moderator occupant" title="Click to mention Juliet Capulet in your message.">
|
|
<div class="row no-gutters">
|
|
<div class="col-auto">
|
|
<div class="occupant-status occupant-online circle" title="Online"></div>
|
|
</div>
|
|
<div class="col">
|
|
<span class="occupant-nick">Juliet Capulet</span>
|
|
<span class="badge badge-danger">Owner</span>
|
|
<span class="badge badge-info">Moderator</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="moderator occupant" title="Click to mention Romeo Montague in your message.">
|
|
<div class="row no-gutters">
|
|
<div class="col-auto">
|
|
<div class="occupant-status occupant-online circle" title="Online"></div>
|
|
</div>
|
|
<div class="col">
|
|
<span class="occupant-nick">Romeo Montague</span>
|
|
<span class="badge badge-info">Moderator</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="moderator occupant" title="Click to mention Lady Montague in your message.">
|
|
<div class="row no-gutters">
|
|
<div class="col-auto">
|
|
<div class="occupant-status occupant-away circle" title="Away"></div>
|
|
</div>
|
|
<div class="col">
|
|
<span class="occupant-nick">Lady Montague</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="moderator occupant" title="Click to mention Mercutio in your message.">
|
|
<div class="row no-gutters">
|
|
<div class="col-auto">
|
|
<div class="occupant-status occupant-online circle" title="Online"></div>
|
|
</div>
|
|
<div class="col">
|
|
<span class="occupant-nick">Mercutio</span>
|
|
<span class="badge badge-secondary">Visitor</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="moderator occupant" title="Click to mention Lord Montague in your message.">
|
|
<div class="row no-gutters">
|
|
<div class="col-auto">
|
|
<div class="occupant-status occupant-dnd circle" title="Busy"></div>
|
|
</div>
|
|
<div class="col">
|
|
<span class="occupant-nick">Lord Montague</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="moderator occupant" title="Click to mention Friar Laurence in your message.">
|
|
<div class="row no-gutters">
|
|
<div class="col-auto">
|
|
<div class="occupant-status occupant-online circle" title="Online"></div>
|
|
</div>
|
|
<div class="col">
|
|
<span class="occupant-nick">Friar Laurence</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="moderator occupant" title="Click to mention Tybalt in your message.">
|
|
<div class="row no-gutters">
|
|
<div class="col-auto">
|
|
<div class="occupant-status occupant-online circle" title="Online"></div>
|
|
</div>
|
|
<div class="col">
|
|
<span class="occupant-nick">Tybalt</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="moderator occupant" title="Click to mention Paris in your message.">
|
|
<div class="row no-gutters">
|
|
<div class="col-auto">
|
|
<div class="occupant-status occupant-online circle" title="Online"></div>
|
|
</div>
|
|
<div class="col">
|
|
<span class="occupant-nick">Paris</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="moderator occupant" title="Click to mention Lord Capulet in your message.">
|
|
<div class="row no-gutters">
|
|
<div class="col-auto">
|
|
<div class="occupant-status occupant-online circle" title="Online"></div>
|
|
</div>
|
|
<div class="col">
|
|
<span class="occupant-nick">Lord Capulet</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="moderator occupant" title="Click to mention Benviolo in your message.">
|
|
<div class="row no-gutters">
|
|
<div class="col-auto">
|
|
<div class="occupant-status occupant-online circle" title="Online"></div>
|
|
</div>
|
|
<div class="col">
|
|
<span class="occupant-nick">Benviolo</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="moderator occupant" title="Click to mention Lady Capulet in your message.">
|
|
<div class="row no-gutters">
|
|
<div class="col-auto">
|
|
<div class="occupant-status occupant-online circle" title="Online"></div>
|
|
</div>
|
|
<div class="col">
|
|
<span class="occupant-nick">Lady Capulet</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="moderator occupant" title="Click to mention Balthasar in your message.">
|
|
<div class="row no-gutters">
|
|
<div class="col-auto">
|
|
<div class="occupant-status occupant-online circle" title="Online"></div>
|
|
</div>
|
|
<div class="col">
|
|
<span class="occupant-nick">Balthasar</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="moderator occupant" title="Click to mention Escalus, Prince of Verona in your message.">
|
|
<div class="row no-gutters">
|
|
<div class="col-auto">
|
|
<div class="occupant-status occupant-online circle" title="Online"></div>
|
|
</div>
|
|
<div class="col">
|
|
<span class="occupant-nick">Escalus, Prince of Verona</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="moderator occupant" title="Click to mention Peter in your message.">
|
|
<div class="row no-gutters">
|
|
<div class="col-auto">
|
|
<div class="occupant-status occupant-online circle" title="Online"></div>
|
|
</div>
|
|
<div class="col">
|
|
<span class="occupant-nick">Peter</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="moderator occupant" title="Click to mention Abram in your message.">
|
|
<div class="row no-gutters">
|
|
<div class="col-auto">
|
|
<div class="occupant-status occupant-online circle" title="Online"></div>
|
|
</div>
|
|
<div class="col">
|
|
<span class="occupant-nick">Abram</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="moderator occupant" title="Click to mention Sampson in your message.">
|
|
<div class="row no-gutters">
|
|
<div class="col-auto">
|
|
<div class="occupant-status occupant-online circle" title="Online"></div>
|
|
</div>
|
|
<div class="col">
|
|
<span class="occupant-nick">Sampson</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="moderator occupant" title="Click to mention Gregory in your message.">
|
|
<div class="row no-gutters">
|
|
<div class="col-auto">
|
|
<div class="occupant-status occupant-online circle" title="Online"></div>
|
|
</div>
|
|
<div class="col">
|
|
<span class="occupant-nick">Gregory</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div class="chatroom-features">
|
|
<p class="occupants-heading">Features</p>
|
|
<ul class="features-list">
|
|
<li class="feature" title="Secured: This room requires a password before entry"><span class="fa fa-unlock"></span> Password required</li>
|
|
<li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span> Public</li>
|
|
<li class="feature" title="Open: Anyone can join this room"><span class="fa fa-globe"></span> Open</li>
|
|
<li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span> Persistent</li>
|
|
<li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span> Non-anonymous</li>
|
|
<li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span> Unmoderated</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="converse-modals" class="modals"></div>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
|
|
<script type="text/javascript" src="../../node_modules/backbone/backbone.js"></script>
|
|
<script type="text/javascript" src="../../node_modules/backbone.nativeview/backbone.nativeview.js"></script>
|
|
<script type="text/javascript" src="../../node_modules/strophe.js/strophe.js"></script>
|
|
<script type="text/javascript" src="../../src/utils/core.js"></script>
|
|
<script type="text/javascript" src="utils.js"></script>
|
|
<script type="text/javascript" src="sidebar.js"></script>
|
|
<script type="text/javascript" src="user-panel.js"></script>
|
|
<script type="text/javascript" src="modals.js"></script>
|
|
<script type="text/javascript" src="../../node_modules/bootstrap.native/dist/bootstrap-native-v4.js"></script>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function(event) {
|
|
new Modals();
|
|
new Sidebar();
|
|
new UserPanel();
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|