im-changing.ru
/
converse.js
同期ミラー https://github.com/conversejs/converse.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
							<!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/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" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f">
                <div class="flyout box-flyout">
                    <div class="chat-head chat-head-chatbox row no-gutters">
                        <div class="col">
                            <div class="row no-gutters">
                                <div class="col-auto">
                                    <img alt="User Avatar"
                                        class="avatar"
                                        height="50px" width="50px"
                                        src="data:image/png;base64,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"/>
                                </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>
                    </div>

                    <div class="chat-body">
                        <div class="chat-content">
                            <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="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>
                                    <span class="chat-msg-them">Benedict-John:&nbsp;</span>
                                </span>
                                <span class="chat-msg-content">Dagsê</span>
                            </div>
                            <div class="chat-message">
                                <span class="chat-msg-author chat-msg-me">19:39&nbsp;
                                    <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;
                                    <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="message chat-info chat-event">JC Brand is busy</div>
                            <div class="chat-message">
                                <span class="chat-msg-author chat-msg-me">19:43&nbsp;
                                    <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 class="chat-message">
                                <span class="chat-msg-author chat-msg-me">19:43&nbsp;
                                    <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 class="chat-message">
                                <span class="chat-msg-author chat-msg-me">19:43&nbsp;
                                    <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 class="chat-message">
                                <span class="chat-msg-author chat-msg-me">19:43&nbsp;
                                    <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 class="chat-message">
                                <span class="chat-msg-author chat-msg-me">19:43&nbsp;
                                    <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 class="chat-message">
                                <span class="chat-msg-author chat-msg-me">19:43&nbsp;
                                    <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 class="chat-message">
                                <span class="chat-msg-author chat-msg-me">19:43&nbsp;
                                    <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 class="chat-message">
                                <span class="chat-msg-author chat-msg-me">19:43&nbsp;
                                    <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 class="chat-message">
                                <span class="chat-msg-author chat-msg-me">19:43&nbsp;
                                    <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 class="chat-message">
                                <span class="chat-msg-author chat-msg-me">19:43&nbsp;
                                    <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 class="chat-message">
                                <span class="chat-msg-author chat-msg-me">19:43&nbsp;
                                    <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 class="chat-message">
                                <span class="chat-msg-author chat-msg-me">19:43&nbsp;
                                    <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 class="chat-message">
                                <span class="chat-msg-author chat-msg-me">19:43&nbsp;
                                    <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 class="chat-message">
                                <span class="chat-msg-author chat-msg-me">19:43&nbsp;
                                    <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>

                        <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>
                    </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>