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

284 lines
18 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>Overlayed chats</title>
2018-01-22 07:37:20 +01:00
<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 style="background-color: #578EA9">
2018-01-25 12:36:13 +01:00
<div class="converse-bg container">
<h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
</div>
<div id="conversejs">
<div class="row no-gutters">
<div id="controlbox" class="chatbox col col-lg-2 col-md-3 col-sm-4 col-sx-12 w-100">
<div class="flyout box-flyout">
2018-01-25 12:36:13 +01:00
<div class="controlbox-panes">
<div class="sidebar"></div>
<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 col col-lg-2 col-md-3 col-sm-4 col-sx-12 w-100" 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">
<div class="col-9">
<div class="row no-gutters">
<div class="col-auto"><canvas height="44" width="44" class="avatar"></canvas></div>
<div class="col chat-title" title="j@chat.example.org">JC Brand
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
</div>
</div>
</div>
<div class="col-3">
<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>
2018-01-25 12:36:13 +01:00
</div>
2017-12-16 06:20:59 +01:00
2018-01-25 12:36:13 +01:00
<div class="chat-body">
<div class="chat-content">
<div class="chat-info">
<span class="badge badge-info">This is an info message</span></div>
<div class="chat-info">
<span class="badge badge-danger">This is an error message</span></div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-me">09:35&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-me">me:&nbsp;</span>
</span>
<span class="chat-msg-content">Hello world
<span class="fa fa-smile-o"></span>
</span>
</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-them">
19:25&nbsp; <canvas height="24" width="24" class="avatar"></canvas> Benedict-John:
</span>
<span class="chat-msg-content">Dagsê</span>
</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-me">19:39&nbsp;
2018-01-25 12:36:13 +01:00
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-me">me:&nbsp;</span>
</span>
<span class="chat-msg-content">This is a relatively long message to check that wrapping works as expected.</span>
</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-me">19:42&nbsp;
2018-01-25 12:36:13 +01:00
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-me">me:&nbsp;</span>
</span>
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
</div>
<div class="chat-info chat-event">
<span class="badge badge-success">JC Brand is busy</span>
</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-me">19:43&nbsp;
2018-01-25 12:36:13 +01:00
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-me">me:&nbsp;</span>
</span>
<span class="chat-msg-content">Another message to check that scrolling works.</span>
</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-clear">
<a class="fa fa-trash" title="Clear all messages"></a>
</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>
2018-01-25 12:36:13 +01:00
</div>
</div>
</div>
2017-12-16 06:20:59 +01:00
<div class="chatbox chatroom col col-lg-4 col-md-6 col-sm-8 col-xs-12 w-100" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392">
<div class="flyout box-flyout">
2018-01-27 10:07:54 +01:00
<div class="chat-head chat-head-chatroom row no-gutters">
<div class="col-sm-8 col-lg-10">
<div class="chat-title">Chatroom with a very long name</div>
<p class="chatroom-topic">May the force be with you</p>
</div>
2018-01-27 10:07:54 +01:00
<div class="col-sm-4 col-lg-2">
<div class="chatbox-buttons row no-gutters">
<a class="chatbox-btn fa fa-minus"></a>
<a class="chatbox-btn fa fa-close"></a>
<a class="chatbox-btn fa fa-wrench"></a>
</div>
</div>
2018-01-25 12:36:13 +01:00
</div>
2017-12-16 06:20:59 +01:00
<div class="chat-body chatroom-body row no-gutters">
<div class="chat-area col-md-9 col-8">
<div class="chat-content">
<div class="chat-message">
<span class="chat-msg-author chat-msg-room">18:50&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-room">luke:&nbsp;</span>
</span>
<span class="chat-msg-content">leia: hi :)</span>
</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-room">19:40&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-room">leia:&nbsp;</span>
</span>
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
</div>
<time class="chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
<div class="chat-message">
<span class="chat-msg-author chat-msg-room">19:40&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-room">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
</span>
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-me">19:42&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-me">me:&nbsp;</span>
</span>
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-room">19:43&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-roomme">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
</span>
<span class="chat-msg-content">Another message to check that scrolling works.</span>
</div>
</div>
<form class="sendXMPPMessage">
<ul class="chat-toolbar no-text-select">
<li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
<li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
<li class="toggle-clear"><a class="fa fa-times" title="Clear all messages"></a></li>
</ul>
<textarea class="chat-textarea form-control" placeholder="Message"></textarea>
</form>
</div>
2017-12-16 06:20:59 +01:00
<div class="occupants col-md-3 col-4">
<p class="occupants-heading">Occupants:</p>
<form class="pure-form 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>
2017-12-16 06:20:59 +01:00
<ul class="occupant-list">
<li class="moderator occupant" title="This user is a moderator. Click to mention luke in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>luke</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>leia</li>
<li class="participant occupant" title="Click to mention Obi-wan Kenobi, Jedi Master in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Obi-wan Kenobi, Jedi Master</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
</ul>
<div class="chatroom-features">
<p class="occupants-heading">Features</p>
<ul class="features-list">
<li class="feature" title="Unsecured: This room requires a password before entry"><span class="fa fa-unlock"></span>&nbsp;</li>
<li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span>&nbsp;</li>
<li class="feature" title="Open: Anyone can join this roo"><span class="fa fa-globe"></span>&nbsp;</li>
<li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span>&nbsp;</li>
<li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span>&nbsp;</li>
<li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span>&nbsp;</li>
</ul>
</div>
</div>
2018-01-25 12:36:13 +01:00
</div>
</div>
</div>
2017-12-16 06:20:59 +01:00
<div id="minimized-chats" class="col col-1 w-100">
<div class="flyout minimized-chats-flyout row">
<a id="toggle-minimized-chats" href="#" class="row no-gutters">
<span class="badge badge-light">322</span> Minimized
</a>
<div class="chat-head chat-head-chatroom row no-gutters">
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">
<span class="badge badge-light">42</span>
Restricted Chatroom
</a>
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
2018-01-25 12:36:13 +01:00
</div>
<div class="chat-head chat-head-chatbox row no-gutters">
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">
<span class="badge badge-light">4</span>
JC Brand
</a>
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
2018-01-25 12:36:13 +01:00
</div>
<div class="chat-head chat-head-chatroom row no-gutters">
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">My Chatroom</a>
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
2018-01-25 12:36:13 +01:00
</div>
<div class="chat-head chat-head-chatbox row no-gutters">
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Annegreet Gomez</a>
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
2018-01-25 12:36:13 +01:00
</div>
<div class="chat-head chat-head-chatbox row no-gutters">
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">
<span class="badge badge-light">842</span>
Asmaa Haakman
</a>
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
2018-01-25 12:36:13 +01:00
</div>
<div class="chat-head chat-head-chatbox row no-gutters">
<a href="#" class="restore-chat w-100 align-self-center">Lena Grunewald</a>
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
2018-01-25 12:36:13 +01:00
</div>
</div>
</div>
2018-02-21 16:10:13 +01:00
<div id="converse-modals" class="modals"></div>
</div>
</div>
2017-12-16 06:20:59 +01:00
</body>
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>
<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>
2017-12-16 06:20:59 +01:00
</html>