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

318 lines
23 KiB
HTML
Raw Normal View History

<!doctype html>
<html class="no-js" lang="en">
2014-12-07 12:24:16 +01:00
<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/inverse.css" />
2014-12-07 12:24:16 +01:00
</head>
2018-03-05 18:37:18 +01:00
<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>
</div>
</div>
2014-12-07 12:24:16 +01:00
</div>
2015-10-28 22:07:29 +01:00
<div class="chatbox chatroom" id="chatroom">
<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 col-9">
<div class="chat-title">Capulet's orchard</div>
2018-04-27 14:16:34 +02:00
<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-minus"></a>
<a class="chatbox-btn fa fa-close"></a>
<a class="chatbox-btn fa fa-wrench"></a>
2018-01-27 10:07:54 +01:00
</div>
</div>
2018-03-05 16:56:20 +01:00
<div class="chat-body chatroom-body row no-gutters">
<div class="chat-area">
2018-04-25 18:19:12 +02:00
<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>
2018-04-25 18:19:12 +02:00
</div>
<div class="message chat-info chat-event" data-isodate="2018-04-36T18:07:36+02:00" data-join="&quot;Romeo Montague&quot;">
Romeo Montague has entered the room</div>
<div class="message chat-msg chat-action" data-isodate="2018-04-36T18:07:38+02:00">
<span class="chat-msg-heading">
<span class="chat-msg-author">**Romeo Montague</span>
</span>
2018-04-27 17:59:41 +02:00
<span class="chat-msg-text">looks around</span>
</div>
<div class="message chat-msg">
<div class="avatar montague"></div>
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Romeo Montague</span>
2018-04-27 17:59:41 +02:00
<span class="chat-msg-time">15:31</span>
</span>
2018-04-27 17:59:41 +02:00
<span class="chat-msg-text">He jests at scars that never felt a wound.</span>
</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>
2018-04-25 18:19:12 +02:00
</div>
<div class="message chat-info chat-event" data-isodate="2018-04-36T18:07:36+02:00" data-join="&quot;Juliet&quot;">
Juliet has entered the room</div>
<div class="message chat-msg">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Romeo Montague</span>
2018-04-27 17:59:41 +02:00
<span class="chat-msg-time">19:36</span>
</span>
2018-04-27 17:59:41 +02:00
<span class="chat-msg-text">
But, soft! what light through yonder window breaks?
2018-04-27 17:59:41 +02:00
</span>
</div>
</div>
<div class="message chat-msg chat-msg-followup">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Romeo Montague</span>
2018-04-27 17:59:41 +02:00
<span class="chat-msg-time">19:36</span>
</span>
2018-04-27 17:59:41 +02:00
<span class="chat-msg-text">It is the east, and Juliet is the sun.</span>
</div>
</div>
<div class="message chat-msg chat-msg-followup">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Romeo Montague</span>
2018-04-27 17:59:41 +02:00
<span class="chat-msg-time">19:36</span>
</span>
2018-04-27 17:59:41 +02:00
<span class="chat-msg-text">Arise, fair sun, and kill the envious moon, Who is already sick and pale with grief</span>
</div>
</div>
<div class="message chat-msg">
2018-04-25 18:19:12 +02:00
<canvas height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Juliet Capulet</span>
2018-04-27 17:59:41 +02:00
<span class="chat-msg-time">19:43</span>
</span>
2018-04-27 17:59:41 +02:00
<span 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.
2018-04-27 17:59:41 +02:00
</span>
<div class="chat-msg-media"></div>
</div>
</div>
<div class="message chat-msg">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Romeo Montague</span>
2018-04-27 17:59:41 +02:00
<span class="chat-msg-time">19:36</span>
</span>
<span class="chat-msg-text">Uploading file: <strong>juliet.jpg</strong>, 120kb</span>
<progress value="50" max="100"/>
</div>
</div>
<div class="message chat-msg">
<canvas height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Juliet Capulet</span>
2018-04-27 17:59:41 +02:00
<span class="chat-msg-time">19:45</span>
</span>
2018-04-27 17:59:41 +02:00
<span class="chat-msg-text"></span>
<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>
2018-03-07 10:42:15 +01:00
<div class="message chat-msg" data-isodate="2018-04-36T18:07:36+02:00" data-msgid="some-long-id">
2018-04-26 19:10:06 +02:00
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Romeo Montague</span>
2018-04-27 17:59:41 +02:00
<span class="chat-msg-time">19:36</span>
2018-04-26 19:10:06 +02:00
</span>
<div>
<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>
2018-04-26 19:10:06 +02:00
</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 class="chat-msg-media"></div>
2018-04-26 19:10:06 +02:00
</div>
</div>
<div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join="&quot;Mercutio&quot;">Mercutio has entered the room</div>
<div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join="&quot;Mercutio&quot;">Topic set by Mercutio</div>
2018-04-25 18:19:12 +02:00
<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>
2018-03-07 10:42:15 +01:00
<div class="message chat-msg">
2018-04-25 18:19:12 +02:00
<canvas height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Mercutio</span>
2018-04-27 17:59:41 +02:00
<span class="chat-msg-time">19:49</span>
</span>
2018-04-27 17:59:41 +02:00
<span class="chat-msg-text">I mean, sir, in delay We waste our lights in vain, like lamps by day.</span>
</div>
</div>
<div class="message chat-msg chat-msg-followup">
2018-04-25 18:19:12 +02:00
<canvas height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Mercutio</span>
2018-04-27 17:59:41 +02:00
<span class="chat-msg-time">19:49</span>
</span>
2018-04-27 17:59:41 +02:00
<span class="chat-msg-text">
Take our good meaning, for our judgment sits.
2018-04-27 17:59:41 +02:00
Five times in that ere once in our five wits.</span>
</div>
</div>
<div class="message chat-msg chat-msg-followup">
<canvas height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<span class="chat-msg-author">Mercutio</span>
2018-04-27 17:59:41 +02:00
<span class="chat-msg-time">19:49</span>
</span>
2018-04-27 17:59:41 +02:00
<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,
2018-04-27 17:59:41 +02:00
Turning his face to the dew-dropping south.</span>
</div>
</div>
</div>
<div class="new-msgs-indicator">▼ You have unread messages ▼</div>
2018-04-25 18:19:12 +02:00
<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>
2018-04-25 18:19:12 +02:00
<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>
2018-04-25 18:19:12 +02:00
<ul class="occupant-list">
<li class="moderator occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Juliet Capulet</li>
2018-04-25 18:19:12 +02:00
<li class="moderator occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Romeo Montague</li>
2018-04-25 18:19:12 +02:00
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Mercutio</li>
2018-04-25 18:19:12 +02:00
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-away circle" title="Away"></div>Lady Montague</li>
2018-04-25 18:19:12 +02:00
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Lord Montague</li>
2018-04-25 18:19:12 +02:00
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Friar Laurence</li>
2018-04-25 18:19:12 +02:00
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Tybalt</li>
2018-04-25 18:19:12 +02:00
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Paris</li>
2018-04-25 18:19:12 +02:00
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Lord Capulet</li>
2018-04-25 18:19:12 +02:00
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Benvolio</li>
2018-04-25 18:19:12 +02:00
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Lady Capulet</li>
2018-04-25 18:19:12 +02:00
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Balthasar</li>
2018-04-25 18:19:12 +02:00
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Escalus, Prince of Verona</li>
2018-04-25 18:19:12 +02:00
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Peter</li>
2018-04-25 18:19:12 +02:00
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Abram</li>
2018-04-25 18:19:12 +02:00
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Sampson</li>
2018-04-25 18:19:12 +02:00
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>The Nurse</li>
2018-04-25 18:19:12 +02:00
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Gregory</li>
2018-04-25 18:19:12 +02:00
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Friar John</li>
2018-04-25 18:19:12 +02:00
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Servant</li>
2018-04-25 18:19:12 +02:00
</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>&nbsp;Password required</li>
<li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span>&nbsp;Public</li>
<li class="feature" title="Open: Anyone can join this room"><span class="fa fa-globe"></span>&nbsp;Open</li>
<li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span>&nbsp;Persistent</li>
<li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span>&nbsp;Non-anonymous</li>
<li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span>&nbsp;Unmoderated</li>
2018-03-05 18:43:43 +01:00
</ul>
2018-03-05 18:37:18 +01:00
</div>
</div>
</div>
2014-12-07 12:24:16 +01:00
</div>
</div>
</div>
2018-04-25 18:19:12 +02:00
</div>
<div id="converse-modals" class="modals"></div>
</div>
2014-12-07 12:24:16 +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>
<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>
2014-12-07 12:24:16 +01:00
<script>
document.addEventListener("DOMContentLoaded", function(event) {
new Modals();
new Sidebar();
new UserPanel();
2014-12-07 12:24:16 +01:00
});
</script>
</body>
2014-12-07 12:24:16 +01:00
</html>