<!DOCTYPE html> <html lang="en"> <head> <title id="pageTitle">Converse.js: Mockup</title> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="description" content="Converse.js: Chat Client for Websites" /> <link type="text/css" rel="stylesheet" href="../stylesheets/stylesheet.css"> <link type="text/css" rel="stylesheet" href="../converse.css"> <script src="../components/jquery/jquery.min.js"></script> </head> <body> <!-- HEADER --> <div id="header_wrap" class="outer"> <header class="inner"> <h1 id="project_title"><a href="http://conversejs.org">Converse.js</a></h1> <h2 id="project_tagline">Static Mockup</h2> </header> </div> <div id="conversejs"> <a id="toggle-controlbox" href="#" class="chat toggle-online-users"> <span class="conn-feedback">Toggle Chat</span> <span style="display: none" id="online-count">(0)</span> </a> <div id="controlbox" class="chatbox" style="opacity: 1; display: inline;"> <div class="box-flyout"> <div class="dragresize dragresize-tm"></div> <div class="chat-head controlbox-head"> <ul id="controlbox-tabs"> <li><a class="current" href="#login">Sign in</a></li> </ul> <a class="close-chatbox-button icon-close"></a> </div> <div id="login-dialog"> <form id="converse-login"> <label>XMPP/Jabber Username:</label><input type="text" id="jid"> <label>Password:</label><input type="password" id="password"> <input class="login-submit" type="submit" value="Log In"> </form> </div> </div> </div> <div id="controlbox" class="chatbox" style="opacity: 1; display: inline;"> <div class="box-flyout"> <div class="dragresize dragresize-tm"></div> <div class="chat-head controlbox-head"> <ul id="controlbox-tabs"> <li><a class="s current" href="#users">Contacts</a></li> <li><a class="s" href="#chatrooms">Rooms</a></li> </ul> <a class="close-chatbox-button icon-close"></a> </div> <div id="users" class="controlbox-pane" style="display: block;"> <form class="set-xmpp-status" action="" method="post"> <span id="xmpp-status-holder"> <dl id="target" class="dropdown"> <dt id="fancy-xmpp-status-select" class="fancy-dropdown"> <div class="xmpp-status"> <a class="choose-xmpp-status online" data-value="I am online" href="#" title="Click to change your chat status"> <span class="icon-online"></span> I am online </a> <a class="change-xmpp-status-message icon-pencil" href="#" title="Click here to write a custom status message"></a> </div> </dt> <dd> <ul style="display: none;" class="xmpp-status-menu"> <li> <a href="#" class="online" data-value="online"> <span class="icon-online"></span> Online</a> </li> <li> <a href="#" class="dnd" data-value="dnd"> <span class="icon-dnd"></span> Busy</a> </li> <li> <a href="#" class="away" data-value="away"> <span class="icon-away"></span> Away</a> </li> <li> <a href="#" class="offline" data-value="offline"> <span class="icon-offline"></span> Offline</a> </li> </ul> </dd> </dl> </span> </form> <dl class="add-converse-contact dropdown"> <dt id="xmpp-contact-search" class="fancy-dropdown"> <a class="toggle-xmpp-contact-form" href="#" title="Click to add new chat contacts"> <span class="icon-plus"></span> Add a contact </a> </dt> <dd class="search-xmpp" style="display:none"> <ul> <li> <form class="add-xmpp-contact"> <input type="text" name="identifier" class="username" placeholder="Contact username"> <button type="submit">Add</button> </form> </li> <li></li> </ul> </dd> </dl> <dl id="converse-roster" style="display: block;"> <dt id="xmpp-contacts" style="display: block;">My contacts</dt> <dd class="online current-xmpp-contact"> <a class="open-chat" title="Click to chat with this contact" href="#"> <span class="icon-online" title="This contact is online"></span> John Smit</a> <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a> </dd> <dd class="away current-xmpp-contact"> <a class="open-chat" title="Click to chat with this contact" href="#"> <span class="icon-away" title="this contact is away"></span> Francois Pienaar</a> <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a> </dd> <dd class="dnd current-xmpp-contact"> <a class="open-chat" title="Click to chat with this contact" href="#"> <span class="icon-dnd" title="This contact is busy"></span> Gary Teichmann</a> <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a> </dd> <dd class="offline current-xmpp-contact"> <a class="open-chat" title="Click to chat with this contact" href="#"> <span class="icon-offline" title="This contact is offline"></span> Corné Krige</a> <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a> </dd> <dt id="xmpp-contact-requests" style="display: block;">Contact requests</dt> <dd class="offline requesting-xmpp-contact"> <div>Bob Skinstad</div> <button type="button" class="accept-xmpp-request">Accept</button> <button type="button" class="decline-xmpp-request">Decline</button> </dd> <dd class="offline requesting-xmpp-contact"> <div>André Vos</div> <button type="button" class="accept-xmpp-request">Accept</button> <button type="button" class="decline-xmpp-request">Decline</button> </dd> <dt id="pending-xmpp-contacts" style="display: block;">Pending contacts</dt> <dd class="offline pending-xmpp-contact"><span>Rassie Erasmus</span> <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a> </dd> <dd class="offline pending-xmpp-contact"><span>Victor Matfield</span> <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a> </dd> </dl> </div> <div id="chatrooms" style="display: none;"> <form class="add-chatroom" action="" method="post"> <input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name"> <input type="text" name="nick" class="new-chatroom-nick" placeholder="Nickname"> <input type="text" name="server" class="new-chatroom-server" placeholder="Server"> <input type="submit" name="join" value="Join"> <input type="button" name="show" id="show-rooms" value="Show rooms" style="display: inline-block;"> </form> <dl id="available-chatrooms"> <dt>Rooms on conference.opkode.im</dt> <dd class="available-chatroom"> <a class="open-room" data-room-jid="converse.js@conference.opkode.im" title="Click to open this room" href="#">Special chatroom with a long name (2)</a> <a class="room-info icon-room-info" data-room-jid="converse.js@conference.opkode.im" title="Show more information on this room" href="#"> </a> <div class="room-info"> <p class="room-info"><strong>Description:</strong></p> <p class="room-info"><strong>Occupants:</strong> 2</p> <p class="room-info"><strong>Features:</strong> </p> <ul> <li class="room-info">Moderated</li><li class="room-info">Open room</li> <li class="room-info">Permanent room</li><li class="room-info">Public</li> <li class="room-info">Semi-anonymous</li> <li class="room-info">Requires authentication <span class="icon-lock"></span></li> <p></p> </ul> </div> </dd> </dl> </div> </div> </div> <div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f"> <div class="box-flyout"> <div class="dragresize dragresize-tm"></div> <div class="chat-head chat-head-chatbox"> <a class="close-chatbox-button icon-close"></a> <a class="toggle-chatbox-button icon-minus"></a> <canvas height="33px" width="33px" class="avatar" style="background-color: black"></canvas> <div class="chat-title"> <a href="http://opkode.com" target="_blank" class="user"> JC Brand </a> </div> <p class="user-custom-message" title="10000ft in the air">10000ft in the air</p> </div> <div class="chat-body"> <div class="chat-content"> <div class="chat-info"><strong>/help</strong>:This is an info message</div> <div class="chat-error">This is an error message</div> <div class="chat-message"> <span class="chat-message-me">09:35 me: </span> <span class="chat-message-content"> Hello world <span class="icon-smiley"></span> </span> </div> <div class="chat-message "> <span class="chat-message-them">19:25 Benedict-John: </span> <span class="chat-message-content">Dagsê</span> </div> <div class="chat-message"> <span class="chat-message-me">19:39 me: </span> <span class="chat-message-content">This is a relatively long message to check that wrapping works as expected.</span> </div> <div class="chat-message"> <span class="chat-message-me">19:42 me: </span> <span class="chat-message-content">Supercalifragilisticexpialidociousstillnotlongenough</span> </div> <div class="chat-event">JC Brand is busy</div> <div class="chat-message "> <span class="chat-message-me">19:43 me: </span> <span class="chat-message-content">Another message to check that scrolling works.</span> </div> </div> <form class="sendXMPPMessage" action="" method="post"> <ul class="chat-toolbar no-text-select"> <li class="toggle-smiley icon-happy" title="Insert a smilery"> <ul> <li><a class="icon-smiley" href="#" data-emoticon=":)"></a></li> <li><a class="icon-wink" href="#" data-emoticon=";)"></a></li> <li><a class="icon-grin" href="#" data-emoticon=":D"></a></li> <li><a class="icon-tongue" href="#" data-emoticon=":P"></a></li> <li><a class="icon-cool" href="#" data-emoticon="8)"></a></li> <li><a class="icon-evil" href="#" data-emoticon=">:)"></a></li> <li><a class="icon-confused" href="#" data-emoticon=":S"></a></li> <li><a class="icon-wondering" href="#" data-emoticon=":\"></a></li> <li><a class="icon-angry" href="#" data-emoticon=">:("></a></li> <li><a class="icon-sad" href="#" data-emoticon=":("></a></li> <li><a class="icon-shocked" href="#" data-emoticon=":O"></a></li> <li><a class="icon-thumbs-up" href="#" data-emoticon="(^.^)b"></a></li> <li><a class="icon-heart" href="#" data-emoticon="<3"></a></li> </ul> </li> <li class="toggle-otr unencrypted" title="Turn on 'off-the-record' chat encryption"> <span class="chat-toolbar-text">unencrypted</span> <span class="icon-unlocked"></span> <ul> <li><a href="#">Start private conversation</a></li> <li><a href="#">End private conversation</a></li> <li><a href="#">Authenticate buddy</a></li> <li><a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank">What's this?</a></li> </ul> </li> </ul> <textarea type="text" class="chat-textarea" placeholder="Personal message"></textarea> </form> </div> </div> </div> <div class="chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392"> <div class="box-flyout"> <div class="dragresize dragresize-tm"></div> <div class="chat-head chat-head-chatroom"> <a class="close-chatbox-button icon-close"></a> <a class="toggle-chatbox-button icon-minus"></a> <a class="configure-chatroom-button icon-wrench" style=""></a> <div class="chat-title"> Chatroom </div> <p class="chatroom-topic">May the force be with you</p> </div> <div class="chat-body"> <div class="chat-area"> <div class="chat-content"> <time class="chat-date" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time> <div class="chat-message "> <span class="chat-message-room">18:50 luke: </span> <span class="chat-message-content">leia: hi :)</span> </div> <div class="chat-message "> <span class="chat-message-room">19:40 leia: </span> <span class="chat-message-content"> I'll be gone for a while, will be back in about an hour</span> </div> <div class="chat-message "> <span class="chat-message-room">19:40 Obi-wan Kenobi, Jedi Master: </span> <span class="chat-message-content"> I'll be gone for a while, will be back in about an hour</span> </div> <div class="chat-message"> <span class="chat-message-me">19:42 me: </span> <span class="chat-message-content">Supercalifragilisticexpialidociousstillnotlongenough</span> </div> <div class="chat-message "> <span class="chat-message-room">19:43 Obi-wan Kenobi, Jedi Master: </span> <span class="chat-message-content">Another message to check that scrolling works.</span> </div> </div> <form class="sendXMPPMessage" action="" method="post"> <ul class="chat-toolbar no-text-select"> <li class="toggle-smiley icon-happy" title="Insert a smilery"> <ul> <li><a class="icon-smiley" href="#" data-emoticon=":)"></a></li> <li><a class="icon-wink" href="#" data-emoticon=";)"></a></li> <li><a class="icon-grin" href="#" data-emoticon=":D"></a></li> <li><a class="icon-tongue" href="#" data-emoticon=":P"></a></li> <li><a class="icon-cool" href="#" data-emoticon="8)"></a></li> <li><a class="icon-evil" href="#" data-emoticon=">:)"></a></li> <li><a class="icon-confused" href="#" data-emoticon=":S"></a></li> <li><a class="icon-wondering" href="#" data-emoticon=":\"></a></li> <li><a class="icon-angry" href="#" data-emoticon=">:("></a></li> <li><a class="icon-sad" href="#" data-emoticon=":("></a></li> <li><a class="icon-shocked" href="#" data-emoticon=":O"></a></li> <li><a class="icon-thumbs-up" href="#" data-emoticon="(^.^)b"></a></li> <li><a class="icon-heart" href="#" data-emoticon="<3"></a></li> </ul> </li> </ul> <textarea type="text" class="chat-textarea" placeholder="Message"></textarea> </form> </div> <div class="participants"> <ul class="participant-list"> <li class="participant" title="This user can send messages in this room">Obi-wan Kenobi, Jedi Master</li> <li class="participant" title="This user can send messages in this room">jabber the hut</li> <li class="participant" title="This user can send messages in this room">leia</li> <li class="moderator" title="This user is a moderator">luke</li> </ul> </div> </div> </div> </div> <div class="chatroom" id="6d8627960a0cb066d9216742f3edccc3dbbf85a9"> <div class="box-flyout"> <div class="dragresize dragresize-tm"></div> <div class="chat-head chat-head-chatroom"> <a class="close-chatbox-button icon-close"></a> <a class="toggle-chatbox-button icon-minus"></a> <a class="configure-chatroom-button" style="display:none"> </a> <div class="chat-title"> Restricted Chatroom</div> <p class="chatroom-topic"></p> <p></p> </div> <div class="chat-body"> <div class="chatroom-form-container"> <form class="chatroom-form"> <!-- TODO: Make this a long form that scrolls --> <legend>This chatroom requires a password</legend> <label>Password: <input type="password" name="password"></label> </form> </div> </div> </div> </div> </div> <script> $(document).ready(function () { $('a[href=#chatrooms]').click(function (ev) { switchTab(ev); }); $('a[href=#users]').click(function (ev) { switchTab(ev); }); $("a.choose-xmpp-status").click(function (ev) { ev.preventDefault(); $(ev.target).parent().parent().siblings('dd').find('ul').toggle('fast'); }); $("a.change-xmpp-status-message").click(function (ev) { ev.preventDefault(); var form = ''+ '<form id="set-custom-xmpp-status">' + '<input type="text" class="custom-xmpp-status"I am online"'+ 'placeholder="I am online"/>' + '<button type="submit">Save</button>' + '</form>'; $(ev.target).closest('.xmpp-status').replaceWith(form); $(ev.target).closest('.custom-xmpp-status').focus().focus(); }); $('.toggle-xmpp-contact-form').click(function (ev) { ev.preventDefault(); $(ev.target).parent().parent().find('.search-xmpp').toggle('fast', function () { if ($(this).is(':visible')) { $(this).find('input.username').focus(); } }); }); var switchTab = function (ev) { ev.preventDefault(); var $tab = $(ev.target), $sibling = $tab.parent().siblings('li').children('a'), $tab_panel = $($tab.attr('href')), $sibling_panel = $($sibling.attr('href')); $sibling_panel.fadeOut('fast', function () { $sibling.removeClass('current'); $tab.addClass('current'); $tab_panel.fadeIn('fast', function () { }); }); } $(function() { $('.close-chatbox-button').click(function(ev) { var $grandparent = $(ev.target).parent().parent().parent(); $grandparent.hide(300, function () { // Webkit fix document.getElementById('conversejs').style.display = 'none'; document.getElementById('conversejs').offsetHeight; // no need to store this anywhere, the reference is enough document.getElementById('conversejs').style.display = 'block'; }); }); $('.toggle-chatbox-button').click(function(ev) { var $grandparent = $(ev.target).parent().parent().parent(); $grandparent.find('.chat-body').slideToggle(300); var flyout = $grandparent.find('.box-flyout'); if (flyout.hasClass('minimized')) { flyout.removeClass('minimized'); } else { flyout.addClass('minimized'); } }); // Clickable Dropdown $('.toggle-otr').click(function(e) { $('.toggle-otr ul').slideToggle(200); e.stopPropagation(); }); $('.toggle-smiley').click(function(e) { $(e.target).find('ul').slideToggle(200); e.stopPropagation(); }); $(document).click(function() { if ($('.toggle-otr ul').is(':visible')) { $('.toggle-otr ul', this).slideUp(200); } if ($('.toggle-smiley ul').is(':visible')) { $('.toggle-smiley ul', this).slideUp(200); } }); }); }); </script> </html>