Fix path to converse.css and add some mockup fixes
This commit is contained in:
JC Brand
parent
1d9bbb8ddd
commit
48adc04740
|
|
@ -48,7 +48,7 @@ The Converse repository does not include the minified files in the ``dist`` or
|
|||
To only generate the minified files, you can make them individually. ::
|
||||
|
||||
make dist/converse.min.js
|
||||
make css/converse.min.css
|
||||
make dist/converse.min.css
|
||||
|
||||
.. note::
|
||||
|
||||
|
|
|
|||
|
|
@ -1,23 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<head>
|
||||
<title>Converse.js</title>
|
||||
<title>Converse</title>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Converse.js: An XMPP chat client which can be integrated into any website" />
|
||||
<meta name="description" content="Converse: An XMPP chat client which can be integrated into any website" />
|
||||
<meta name="author" content="JC Brand" />
|
||||
<meta name="keywords" content="xmpp chat webchat converse.js" />
|
||||
<link rel="shortcut icon" type="image/ico" href="css/images/favicon.ico"/>
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="css/bootstrap.min.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="css/font-awesome.min.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="css/theme.min.css" />
|
||||
<script type="text/javascript" src="analytics.js"></script>
|
||||
<meta name="keywords" content="xmpp chat webchat converse.js Converse" />
|
||||
|
||||
<!-- These files are NOT needed when using converse.js in your own project. -->
|
||||
<link rel="shortcut icon" type="image/ico" href="images/favicon.ico"/>
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/4.2.0/css/font-awesome.min.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/4.2.0/css/website.min.css" />
|
||||
<noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
|
||||
<script src="src/website.js"></script>
|
||||
<script type="text/javascript" src="/src/website.js"></script>
|
||||
<script type="text/javascript" src="analytics.js"></script>
|
||||
<!-- *********************************************************************** -->
|
||||
|
||||
<![if gte IE 11]>
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="css/converse.css" />
|
||||
<script src="dist/converse.js"></script>
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/4.2.0/css/converse.min.css" />
|
||||
<script src="https://cdn.conversejs.org/3rdparty/libsignal-protocol.min.js"></script>
|
||||
<script src="https://cdn.conversejs.org/4.2.0/dist/converse.min.js"></script>
|
||||
<![endif]>
|
||||
</head>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,200 +5,191 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Converse.js Mockups</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" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../dist/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" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="chat-head chat-head-chatbox row no-gutters">
|
||||
<div class="col">
|
||||
<div class="row no-gutters">
|
||||
<div class="col chat-title" title="j@chat.example.org">Juliet Capulet
|
||||
<p class="user-custom-message" title="On the balcony">On the balcony</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chatbox-buttons row no-gutters">
|
||||
<a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
|
||||
<a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-body">
|
||||
<div class="chat-content">
|
||||
<div class="message chat-info">This is an info message</div>
|
||||
<div class="message chat-info chat-error">This is an error message</div>
|
||||
|
||||
<div class="message chat-msg">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar chat-msg__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">15:31</span>
|
||||
</span>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">
|
||||
He jests at scars that never felt a wound.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</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-msg">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar chat-msg__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">15:31</span>
|
||||
</span>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">
|
||||
But soft, what light through yonder window breaks?
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg chat-msg-followup">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar chat-msg__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">15:31</span>
|
||||
</span>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">
|
||||
It is the east and Juliet is the sun!
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg chat-msg-followup">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar chat-msg__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">15:31</span>
|
||||
</span>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">
|
||||
Arise, fair sun, and kill the envious moon,
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-info chat-event">Romeo Montague is busy</div>
|
||||
|
||||
<div class="message chat-msg">
|
||||
<canvas height="36" width="36" class="avatar chat-msg__avatar"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<span class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Juliet Capulet</span>
|
||||
<span class="chat-msg__time">15:31</span>
|
||||
<span class="fa fa-lock"></span>
|
||||
</span>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">
|
||||
O Romeo, Romeo! wherefore art thou Romeo?
|
||||
Deny thy father and refuse thy name;
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg chat-msg--followup">
|
||||
<canvas height="36" width="36" class="avatar chat-msg__avatar"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<span class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Juliet Capulet</span>
|
||||
<span class="chat-msg__time">15:31</span>
|
||||
<span class="fa fa-lock"></span>
|
||||
</span>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">
|
||||
Or, if thou wilt not, be but sworn my love,
|
||||
And I'll no longer be a Capulet.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="sendXMPPMessage">
|
||||
<ul class="chat-toolbar no-text-select">
|
||||
<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="Insert a smiley">
|
||||
<div class="emoji-picker-container toolbar-menu collapsed"></div>
|
||||
</li>
|
||||
<li class="toggle-toolbar-menu toggle-otr unencrypted" title="Your messages are not encrypted. Click here to enable OTR encryption.">
|
||||
<span class="chat-toolbar-text">unencrypted</span>
|
||||
<span class="fa fa-unlock"></span>
|
||||
<ul class="toolbar-menu collapsed">
|
||||
<li>
|
||||
<a class="start-otr" href="#">Start encrypted conversation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank" rel="noopener">What's this?</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<textarea class="chat-textarea form-control" placeholder="Personal message"></textarea>
|
||||
</form>
|
||||
</div>
|
||||
<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" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="chat-head chat-head-chatbox row no-gutters">
|
||||
<div class="col">
|
||||
<div class="row no-gutters">
|
||||
<div class="col chat-title" title="j@chat.example.org">Juliet Capulet
|
||||
<p class="user-custom-message" title="On the balcony">On the balcony</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chatbox-buttons row no-gutters">
|
||||
<a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
|
||||
<a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-body">
|
||||
<div class="chat-content">
|
||||
<div class="message chat-info">This is an info message</div>
|
||||
<div class="message chat-info chat-error">This is an error message</div>
|
||||
|
||||
<div class="message chat-msg">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar chat-msg__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">15:31</span>
|
||||
</span>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">He jests at scars that never felt a wound.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="fa fa-check chat-msg__receipt"></span>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</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-msg">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar chat-msg__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">15:31</span>
|
||||
</span>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">But soft, what light through yonder window breaks?</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="fa fa-check chat-msg__receipt"></span>
|
||||
<i title="This message has been edited" class="fa fa-edit chat-msg__edit-modal"></i>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg chat-msg-followup">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar chat-msg__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">15:31</span>
|
||||
</span>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">It is the east and Juliet is the sun!</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="fa fa-check chat-msg__receipt"></span>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg chat-msg-followup">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar chat-msg__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">15:31</span>
|
||||
</span>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">Arise, fair sun, and kill the envious moon,</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="fa fa-check chat-msg__receipt"></span>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-info chat-event">Romeo Montague is busy</div>
|
||||
|
||||
<div class="message chat-msg">
|
||||
<canvas height="36" width="36" class="avatar chat-msg__avatar"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<span class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Juliet Capulet</span>
|
||||
<span class="chat-msg__time">15:31</span>
|
||||
<span class="fa fa-lock"></span>
|
||||
</span>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">O Romeo, Romeo! wherefore art thou Romeo? Deny thy father and refuse thy name;</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg chat-msg--followup">
|
||||
<canvas height="36" width="36" class="avatar chat-msg__avatar"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<span class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Juliet Capulet</span>
|
||||
<span class="chat-msg__time">15:31</span>
|
||||
<span class="fa fa-lock"></span>
|
||||
</span>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">Or, if thou wilt not, be but sworn my love, And I'll no longer be a Capulet.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="sendXMPPMessage">
|
||||
<ul class="chat-toolbar no-text-select">
|
||||
<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="Insert a smiley">
|
||||
<div class="emoji-picker-container toolbar-menu collapsed"></div>
|
||||
</li>
|
||||
<li class="toggle-toolbar-menu toggle-otr unencrypted" title="Your messages are not encrypted. Click here to enable OTR encryption.">
|
||||
<span class="chat-toolbar-text">unencrypted</span>
|
||||
<span class="fa fa-unlock"></span>
|
||||
<ul class="toolbar-menu collapsed">
|
||||
<li>
|
||||
<a class="start-otr" href="#">Start encrypted conversation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank" rel="noopener">What's this?</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<textarea class="chat-textarea form-control" placeholder="Personal message"></textarea>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="converse-modals" class="modals"></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>
|
||||
|
|
|
|||
|
|
@ -5,527 +5,514 @@
|
|||
<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" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../dist/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 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-sign-out-alt" title="Leave this groupchat"></a>
|
||||
<a class="chatbox-btn fa fa-wrench" title="Configure this groupchat"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-body chatroom-body row no-gutters">
|
||||
<div class="chat-area col-md-9 col-8">
|
||||
<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">
|
||||
<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>
|
||||
<i title="This message has been edited" class="fa fa-edit chat-msg__edit-modal"></i>
|
||||
<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 class="message chat-info chat-state-notification"
|
||||
data-isodate="2018-04-36T18:21:36+02:00"
|
||||
data-csn="romeo@capulet.lit">Romeo Montague is typing</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-sign-out-alt" title="Leave this groupchat"></a>
|
||||
<a class="chatbox-btn fa fa-wrench" title="Configure this groupchat"></a>
|
||||
</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-angle-double-right" title="Hide the list of occupants"></a></li>
|
||||
</ul>
|
||||
<textarea class="chat-textarea form-control" placeholder="Message"></textarea>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="chat-body chatroom-body row no-gutters">
|
||||
<div class="chat-area col-md-9 col-8">
|
||||
<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="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>
|
||||
|
||||
<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>
|
||||
<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 occupant-nick-badge">
|
||||
<span class="occupant-nick">Juliet Capulet</span>
|
||||
<span class="occupant-badges">
|
||||
<span class="badge badge-groupchat">Owner</span>
|
||||
<span class="badge badge-info">Moderator</span>
|
||||
</span>
|
||||
<span class="chat-msg__text">looks around</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Romeo Montague</span>
|
||||
<span class="occupant-badges">
|
||||
<span class="badge badge-info">Moderator</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>
|
||||
</li>
|
||||
|
||||
<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.
|
||||
<li class="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 occupant-nick-badge">
|
||||
<span class="occupant-nick">Lady Montague</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<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>
|
||||
<li class="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>
|
||||
|
||||
<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>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Mercutio</span>
|
||||
<span class="occupant-badges">
|
||||
<span class="badge badge-secondary">Visitor</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>
|
||||
</li>
|
||||
|
||||
<div class="message chat-info chat-state-notification"
|
||||
data-isodate="2018-04-36T18:21:36+02:00"
|
||||
data-csn="romeo@capulet.lit">Romeo Montague is typing</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-angle-double-right" 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 occupant-nick-badge">
|
||||
<span class="occupant-nick">Juliet Capulet</span>
|
||||
<span class="occupant-badges">
|
||||
<span class="badge badge-groupchat">Owner</span>
|
||||
<span class="badge badge-info">Moderator</span>
|
||||
</span>
|
||||
</div>
|
||||
<li class="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>
|
||||
</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 occupant-nick-badge">
|
||||
<span class="occupant-nick">Romeo Montague</span>
|
||||
<span class="occupant-badges">
|
||||
<span class="badge badge-info">Moderator</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Lord Montague</span>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="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 occupant-nick-badge">
|
||||
<span class="occupant-nick">Lady Montague</span>
|
||||
</div>
|
||||
<li class="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>
|
||||
</li>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Friar Laurence</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="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 occupant-nick-badge">
|
||||
<span class="occupant-nick">Mercutio</span>
|
||||
<span class="occupant-badges">
|
||||
<span class="badge badge-secondary">Visitor</span>
|
||||
</span>
|
||||
</div>
|
||||
<li class="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>
|
||||
</li>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Tybalt</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="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 occupant-nick-badge">
|
||||
<span class="occupant-nick">Lord Montague</span>
|
||||
</div>
|
||||
<li class="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>
|
||||
</li>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Paris</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="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 occupant-nick-badge">
|
||||
<span class="occupant-nick">Friar Laurence</span>
|
||||
</div>
|
||||
<li class="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>
|
||||
</li>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Lord Capulet</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="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 occupant-nick-badge">
|
||||
<span class="occupant-nick">Tybalt</span>
|
||||
</div>
|
||||
<li class="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>
|
||||
</li>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Benviolo</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="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 occupant-nick-badge">
|
||||
<span class="occupant-nick">Paris</span>
|
||||
</div>
|
||||
<li class="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>
|
||||
</li>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Lady Capulet</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="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 occupant-nick-badge">
|
||||
<span class="occupant-nick">Lord Capulet</span>
|
||||
</div>
|
||||
<li class="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>
|
||||
</li>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Balthasar</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="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 occupant-nick-badge">
|
||||
<span class="occupant-nick">Benviolo</span>
|
||||
</div>
|
||||
<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>
|
||||
</li>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Escalus, Prince of Verona and then some</span>
|
||||
<span class="occupant-badges">
|
||||
<span class="badge badge-info">Admin</span>
|
||||
<span class="badge badge-info">Moderator</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="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 occupant-nick-badge">
|
||||
<span class="occupant-nick">Lady Capulet</span>
|
||||
</div>
|
||||
<li class="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>
|
||||
</li>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Peter</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="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 occupant-nick-badge">
|
||||
<span class="occupant-nick">Balthasar</span>
|
||||
</div>
|
||||
<li class="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>
|
||||
</li>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Abram</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 occupant-nick-badge">
|
||||
<span class="occupant-nick">Escalus, Prince of Verona and then some</span>
|
||||
<span class="occupant-badges">
|
||||
<span class="badge badge-info">Admin</span>
|
||||
<span class="badge badge-info">Moderator</span>
|
||||
</span>
|
||||
</div>
|
||||
<li class="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>
|
||||
</li>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Sampson</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="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 occupant-nick-badge">
|
||||
<span class="occupant-nick">Peter</span>
|
||||
</div>
|
||||
<li class="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>
|
||||
</li>
|
||||
|
||||
<li class="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 occupant-nick-badge">
|
||||
<span class="occupant-nick">Abram</span>
|
||||
</div>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Gregory</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="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 occupant-nick-badge">
|
||||
<span class="occupant-nick">Sampson</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="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 occupant-nick-badge">
|
||||
<span class="occupant-nick">Gregory</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</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 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>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<title>Login Fullscreen</title>
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/bootstrap/dist/css/bootstrap.css" />
|
||||
<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" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
<head>
|
||||
<title>Converse.js Live Mockup</title>
|
||||
<meta name="description" content="Converse.js: A chat client for your website" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../css/website.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../css/converse.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../dist/website.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../dist/converse.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -5,8 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Login Overlayed</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" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" />
|
||||
</head>
|
||||
|
||||
<body class="reset">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Overlayed chats</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" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" />
|
||||
</head>
|
||||
|
||||
<body style="background-color: #578EA9">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Converse</title>
|
||||
<link rel="shortcut icon" type="image/ico" href="css/images/favicon.ico"/>
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="css/converse.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="dist/converse.css" />
|
||||
<script src="node_modules/hellojs/dist/hello.all.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue