im-changing.ru
/
converse.js
mirror of https://github.com/conversejs/converse.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
							<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chatroom Fullscreen</title>
    <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
    <link type="text/css" rel="stylesheet" media="screen" href="../../css/inverse.css" />
</head>

<body class="reset">
    <div id="conversejs" class="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="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392">
                <div class="flyout box-flyout">
                    <div class="chat-head chat-head-chatroom row no-gutters">
                        <div class="col">
                            <div class="chat-title">Chatroom with a very long name</div>
                            <p class="chatroom-topic">May the force be with you</p>
                        </div>
                        <div class="col-sm-3 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>
                    </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="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="message 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="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join="&quot;jcbrand&quot;">jcbrand has entered the room</div>
                                    <div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join="&quot;jcbrand&quot;">Topic set by jcbrand</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="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-eraser" title="Clear all messages"></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="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>
                                    <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>
                                    <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>
                                    <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>
                                    <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>
                                    <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>
                                    <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>
                                    <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>
                                    <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>
                                    <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>
                                    <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>
                                    <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>
                                    <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>
                                    <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>
                                    <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>
                                    <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>
                                    <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>
                                    <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>
                                    <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="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>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="converse-modals" class="modals"></div>
    </div>

<script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
<script type="text/javascript" src="../../node_modules/backbone/backbone.js"></script>
<script type="text/javascript" src="../../node_modules/backbone.nativeview/backbone.nativeview.js"></script>
<script type="text/javascript" src="sidebar.js"></script>
<script type="text/javascript" src="user-panel.js"></script>
<script type="text/javascript" src="modals.js"></script>
<script type="text/javascript" src="../../node_modules/bootstrap.native/dist/bootstrap-native-v4.js"></script>

<script>
    document.addEventListener("DOMContentLoaded", function(event) { 
        new Modals();
        new Sidebar();
        new UserPanel();    
    });
</script>

</body>
</html>