123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221 |
- <!DOCTYPE html>
- <html>
- <head>
- <!-- Favicon as generated by realfavicongenerator.net (slightly modified for webpack) -->
- <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
- <link rel="icon" type="image/png" href="favicon/favicon-32x32.png" sizes="32x32">
- <link rel="icon" type="image/png" href="favicon/favicon-16x16.png" sizes="16x16">
- <link rel="manifest" href="favicon/manifest.json">
- <link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#5bbad5">
- <link rel="shortcut icon" href="favicon/favicon.ico">
- <meta name="apple-mobile-web-app-title" content="Mumble">
- <meta name="application-name" content="Mumble">
- <meta name="msapplication-config" content="${require('./favicon/browserconfig.xml')}">
- <meta name="theme-color" content="#ffffff">
- <link rel="stylesheet" type="text/css" href="/loading.css">
- </head>
- <body>
- <div class="loading-container" data-bind="css: { loaded: true }">
- <div class="loading-circle" data-bind="css: { loaded: true }"></div>
- </div>
- <div id="container" style="display: none" data-bind="visible: true">
- <!-- ko with: connectDialog -->
- <div class="connect-dialog" data-bind="visible: visible">
- <div class="dialog-header">
- Connect to Server
- </div>
- <form data-bind="submit: connect">
- <table>
- <tr>
- <td>Address</td>
- <td><input id="address" type="text" data-bind="value: address"></td>
- </tr>
- <tr>
- <td>Port</td>
- <td><input id="port" type="text" data-bind="value: port"></td>
- </tr>
- <tr>
- <td>Token</td>
- <td><input id="token" type="text" data-bind="value: token"></td>
- </tr>
- <tr>
- <td>Username</td>
- <td><input id="username" type="text" data-bind="value: username"></td>
- </tr>
- </table>
- <div class="dialog-footer">
- <input class="dialog-close" type="button" data-bind="click: hide" value="Cancel">
- <input class="dialog-submit" type="submit" value="Connect">
- </div>
- </form>
- </div>
- <!-- /ko -->
- <script type="text/html" id="user-tag">
- <span class="user-tag" data-bind="text: name"></span>
- </script>
- <script type="text/html" id="channel-tag">
- <span class="channel-tag" data-bind="text: name"></span>
- </script>
- <div class="toolbar">
- <img class="handle-horizontal" src="/svg/handle_horizontal.svg">
- <img class="handle-vertical" src="/svg/handle_horizontal.svg">
- <img class="tb-connect" data-bind="click: connectDialog.show"
- rel="connect" src="/svg/applications-internet.svg">
- <img class="tb-information" data-bind="click: connectionInfo.show"
- rel="information" src="/svg/information_icon.svg">
- <div class="divider"></div>
- <img class="tb-mute" data-bind="visible: !thisUser() || !thisUser().selfMute(),
- click: function () { requestMute(thisUser) }"
- rel="mute" src="/svg/audio-input-microphone.svg">
- <img class="tb-unmute tb-active" data-bind="visible: thisUser() && thisUser().selfMute(),
- click: function () { requestUnmute(thisUser) }"
- rel="unmute" src="/svg/audio-input-microphone-muted.svg">
- <img class="tb-deaf" data-bind="visible: !thisUser() || !thisUser().selfDeaf(),
- click: function () { requestDeaf(thisUser) }"
- rel="deaf" src="/svg/audio-output.svg">
- <img class="tb-undeaf tb-active" data-bind="visible: thisUser() && thisUser().selfDeaf(),
- click: function () { requestUndeaf(thisUser) }"
- rel="undeaf" src="/svg/audio-output-deafened.svg">
- <img class="tb-record" data-bind="click: function(){}"
- rel="record" src="/svg/media-record.svg">
- <div class="divider"></div>
- <img class="tb-comment" data-bind="click: commentDialog.show"
- rel="comment" src="/svg/toolbar-comment.svg">
- <div class="divider"></div>
- <img class="tb-settings" data-bind="click: settingsDialog.show"
- rel="settings" src="/svg/config_basic.svg">
- <div class="divider"></div>
- <img class="tb-sourcecode" data-bind="click: openSourceCode"
- rel="Source Code" src="/svg/source-code.svg">
- </div>
- <div class="chat">
- <script type="text/html" id="log-generic">
- <span data-bind="text: value"></span>
- </script>
- <script type="text/html" id="log-welcome-message">
- Welcome message: <span data-bind="html: message"></span>
- </script>
- <script type="text/html" id="log-chat-message">
- <span data-bind="visible: channel">
- (Channel)
- </span>
- <span data-bind="template: { name: 'user-tag', data: user }"></span>:
- <span class="message-content" data-bind="html: message"></span>
- </script>
- <script type="text/html" id="log-chat-message-self">
- To
- <span data-bind="template: { if: $data.channel, name: 'channel-tag', data: $data.channel }">
- </span><span data-bind="template: { if: $data.user, name: 'user-tag', data: $data.user }">
- </span>:
- <span class="message-content" data-bind="html: message"></span>
- </script>
- <script type="text/html" id="log-disconnect">
- </script>
- <div class="log" data-bind="foreach: {
- data: log,
- afterRender: function (e) {
- [].forEach.call(e[1].getElementsByTagName('a'), function(e){e.target = '_blank'})
- }
- }">
- <div class="log-entry">
- <span class="log-timestamp" data-bind="text: $root.getTimeString()"></span>
- <!-- ko template: { data: $data, name: function(l) { return 'log-' + l.type; } } -->
- <!-- /ko -->
- </div>
- </div>
- <form data-bind="submit: submitMessageBox">
- <input id="message-box" type="text" data-bind="
- attr: { placeholder: messageBoxHint }, textInput: messageBox">
- </form>
- </div>
- <script type="text/html" id="channel">
- <div class="channel" data-bind="
- click: $root.select,
- event: {
- dblclick: $root.requestMove.bind($root, $root.thisUser())
- },
- css: {
- selected: $root.selected() === $data,
- currentChannel: users.indexOf($root.thisUser()) !== -1
- }">
- <div class="channel-status">
- <img class="channel-description" data-bind="visible: description"
- alt="description" src="/svg/comment.svg">
- </div>
- <div data-bind="if: description">
- <div class="channel-description tooltip" data-bind="html: description"></div>
- </div>
- <img class="channel-icon" src="/svg/channel.svg"
- data-bind="visible: !linked() && $root.thisUser().channel() !== $data">
- <img class="channel-icon-active" src="/svg/channel_active.svg"
- data-bind="visible: $root.thisUser().channel() === $data">
- <img class="channel-icon-linked" src="/svg/channel_linked.svg"
- data-bind="visible: linked() && $root.thisUser().channel() !== $data">
- <div class="channel-name" data-bind="text: name"></div>
- </div>
- <!-- ko if: expanded -->
- <!-- ko foreach: users -->
- <div class="user-wrapper">
- <div class="user-tree"></div>
- <div class="user" data-bind="
- click: $root.select,
- css: {
- thisClient: $root.thisUser() === $data,
- selected: $root.selected() === $data
- }">
- <div class="user-status" data-bind="attr: { title: state }">
- <img class="user-comment" data-bind="visible: comment"
- alt="comment" src="/svg/comment.svg">
- <img class="user-server-mute" data-bind="visible: mute"
- alt="server mute" src="/svg/muted_server.svg">
- <img class="user-suppress-mute" data-bind="visible: suppress"
- alt="suppressed" src="/svg/muted_suppressed.svg">
- <img class="user-self-mute" data-bind="visible: selfMute"
- alt="self mute" src="/svg/muted_self.svg">
- <img class="user-server-deaf" data-bind="visible: deaf"
- alt="server deaf" src="/svg/deafened_server.svg">
- <img class="user-self-deaf" data-bind="visible: selfDeaf"
- alt="self deaf" src="/svg/deafened_self.svg">
- <img class="user-authenticated" data-bind="visible: uid"
- alt="authenticated" src="/svg/authenticated.svg">
- </div>
- <div data-bind="if: comment">
- <div class="user-comment tooltip" data-bind="html: comment"></div>
- </div>
- <img class="user-talk-off" data-bind="visible: talking() == 'off'"
- alt="talk off" src="/svg/talking_off.svg">
- <img class="user-talk-on" data-bind="visible: talking() == 'on'"
- alt="talk on" src="/svg/talking_on.svg">
- <img class="user-talk-whisper" data-bind="visible: talking() == 'whisper'"
- alt="whisper" src="/svg/talking_whisper.svg">
- <img class="user-talk-shout" data-bind="visible: talking() == 'shout'"
- alt="shout" src="/svg/talking_alt.svg">
- <div class="user-name" data-bind="text: name"></div>
- </div>
- </div>
- <!-- /ko -->
- <!-- ko foreach: channels -->
- <div class="channel-wrapper">
- <!-- ko ifnot: users().length || channels().length -->
- <div class="channel-tree"></div>
- <!-- /ko -->
- <div class="branch" data-bind="if: users().length || channels().length">
- <img class="branch-open" src="/svg/branch_open.svg"
- data-bind="click: expanded.bind($data, false), visible: expanded()">
- <img class="branch-closed" src="/svg/branch_closed.svg"
- data-bind="click: expanded.bind($data, true), visible: !expanded()">
- </div>
- <div class="channel-sub" data-bind="template: {name: 'channel', data: $data}"></div>
- </div>
- <!-- /ko -->
- <!-- /ko -->
- </script>
- <div class="channel-root-container" data-bind="if: root">
- <div class="channel-root" data-bind="template: {name: 'channel', data: root}"></div>
- </div>
- </div>
- </body>
- <link rel="stylesheet" type="text/css" href="/main.css">
- <script src="index.js"></script>
- </html>
|