im-changing.ru
/
converse.js
oglindă de https://github.com/conversejs/converse.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540
							<!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/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 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-close"></a>
                            <a class="chatbox-btn fa fa-wrench"></a>
                        </div>
                    </div>

                    <div class="chat-body chatroom-body row no-gutters">
                        <div class="chat-area">
                            <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="&quot;Romeo Montague&quot;">
                                    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">&nbsp;</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="&quot;Juliet&quot;">
                                    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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</button>
                                            </div>
                                        </div>
                                    </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>
                                <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">
                                            <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">&nbsp;</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">&nbsp;</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">&nbsp;</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>
                            <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-user-times" 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">
                                            <span class="occupant-nick">Juliet Capulet</span>
                                            <span class="badge badge-danger">Owner</span>
                                            <span class="badge badge-info">Moderator</span>
                                        </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">
                                            <span class="occupant-nick">Romeo Montague</span>
                                            <span class="badge badge-info">Moderator</span>
                                        </div>
                                    </div>
                                </li>

                                <li class="moderator 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">
                                            <span class="occupant-nick">Lady Montague</span>
                                        </div>
                                    </div>
                                </li>

                                <li class="moderator 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">
                                            <span class="occupant-nick">Mercutio</span>
                                            <span class="badge badge-secondary">Visitor</span>
                                        </div>
                                    </div>
                                </li>

                                <li class="moderator 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">
                                            <span class="occupant-nick">Lord Montague</span>
                                        </div>
                                    </div>
                                </li>

                                <li class="moderator 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">
                                            <span class="occupant-nick">Friar Laurence</span>
                                        </div>
                                    </div>
                                </li>

                                <li class="moderator 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">
                                            <span class="occupant-nick">Tybalt</span>
                                        </div>
                                    </div>
                                </li>

                                <li class="moderator 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">
                                            <span class="occupant-nick">Paris</span>
                                        </div>
                                    </div>
                                </li>

                                <li class="moderator 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">
                                            <span class="occupant-nick">Lord Capulet</span>
                                        </div>
                                    </div>
                                </li>

                                <li class="moderator 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">
                                            <span class="occupant-nick">Benviolo</span>
                                        </div>
                                    </div>
                                </li>

                                <li class="moderator 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">
                                            <span class="occupant-nick">Lady Capulet</span>
                                        </div>
                                    </div>
                                </li>

                                <li class="moderator 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">
                                            <span class="occupant-nick">Balthasar</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">
                                            <span class="occupant-nick">Escalus, Prince of Verona</span>
                                        </div>
                                    </div>
                                </li>

                                <li class="moderator 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">
                                            <span class="occupant-nick">Peter</span>
                                        </div>
                                    </div>
                                </li>

                                <li class="moderator 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">
                                            <span class="occupant-nick">Abram</span>
                                        </div>
                                    </div>
                                </li>

                                <li class="moderator 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">
                                            <span class="occupant-nick">Sampson</span>
                                        </div>
                                    </div>
                                </li>

                                <li class="moderator 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">
                                            <span class="occupant-nick">Gregory</span>
                                        </div>
                                    </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>&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="../../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>

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

</body>
</html>