xmpp.chapril.org-conversejs/mockup/chatbox.html

224 lines
13 KiB
HTML
Raw Normal View History

2018-01-22 07:37:20 +01:00
<!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>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" />
2017-12-16 06:20:59 +01:00
</head>
<body class="reset">
<div id="conversejs" class="fullscreen converse-fullscreen">
2018-01-26 20:50:11 +01:00
<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>
2018-01-25 12:36:13 +01:00
</div>
</div>
</div>
2017-12-16 06:20:59 +01:00
<div class="chatbox" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f">
<div class="flyout box-flyout">
2018-01-27 10:07:54 +01:00
<div class="chat-head chat-head-chatbox row no-gutters">
2018-03-06 19:03:32 +01:00
<div class="col">
2018-01-27 10:07:54 +01:00
<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>
2018-01-27 10:07:54 +01:00
</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>
2018-01-25 12:36:13 +01:00
</div>
2017-12-16 06:20:59 +01:00
<div class="chat-body">
<div class="chat-content">
2018-03-07 10:42:15 +01:00
<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>
2018-04-27 17:59:41 +02:00
</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">&nbsp;</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>
2018-04-27 17:59:41 +02:00
</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">&nbsp;</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>
2018-04-27 17:59:41 +02:00
</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">&nbsp;</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>
2018-04-27 17:59:41 +02:00
</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">&nbsp;</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>
2018-04-27 17:59:41 +02:00
</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">&nbsp;</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">&nbsp;</button>
</div>
</div>
</div>
2017-12-16 06:20:59 +01:00
<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>
2018-02-21 16:10:13 +01:00
<div id="converse-modals" class="modals"></div>
</div>
2018-01-22 07:37:20 +01:00
<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>
2018-04-26 19:10:06 +02:00
<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>
2018-01-22 07:37:20 +01:00
<script type="text/javascript" src="sidebar.js"></script>
<script type="text/javascript" src="controlbox.js"></script>
2018-01-22 07:37:20 +01:00
<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();
2018-01-22 07:37:20 +01:00
});
</script>
</body>
2017-12-16 06:20:59 +01:00
</html>