<!doctype html> <html> <head> <title>Chat</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no"> <link rel="stylesheet" href="/css/bootstrap.css"> <link rel="stylesheet" href="/css/font-awesome.min.css"> <link rel="stylesheet" href="/css/style.css"> </head> <body> <div id="wrap"> <div id="viewport"> <aside id="sidebar"> <header class="header"> <ul class="nav nav-tabs"> <li class="active"><a href="#list" data-toggle="tab">Channels</a></li> <li><a href="#settings" data-toggle="tab">Settings</a></li> </ul> </header> <div class="tab-content"> <div id="list" class="tab-pane active"></div> <div id="settings" class="tab-pane"> <div class="panel panel-default"> <div class="panel-heading"> Show/hide events </div> <div class="panel-body"> <input type="checkbox" value="join"/> <input type="checkbox" value="part"/> <input type="checkbox" value="nick"/> <input type="checkbox" value="quit"/> </div> </div> </div> </div> </aside> <div id="chat"> <div id="windows"> </div> </div> </div> </div> <div id="scripts"> <script type="text/html" id="network"> {{#networks}} <div class="network list-group" data-id="{{id}}" data-nick="{{nick}}"> {{#each channels}} <a href="{{name}}" class="channel list-group-item" data-id="{{id}}" data-name="{{name}}"> <span class="badge pull-right"></span> {{name}} </a> {{/each}} </div> {{/networks}} </script> <script type="text/html" id="channel"> {{#channels}} <a href="{{name}}" class="channel list-group-item" data-id="{{id}}" data-name="{{name}}"> <span class="badge pull-right"></span> {{name}} </a> {{/channels}} </script> <script type="text/html" id="window"> {{#channels}} <div class="window {{type}}" data-id="{{id}}"> <div class="title"> <div class="toggle"> <a href="#" class="left"><i class="fa fa-toggle-right"></i></a> <a href="#" class="right"><i class="fa fa-toggle-left"></i></a> </div> <h1>{{name}}</h1> <button class="close btn btn-danger btn-sm ">Leave</button> </div> <div class="users"> {{#each users}} <a href="{{name}}" class="user"> {{mode}}{{name}} </a> {{/each}} </div> <div class="messages"> {{#each messages}} <div class="message {{type}}"> <span class="time">{{time}}</span> <a href="{{user}}" class="user">{{mode}}{{user}}</a> <span class="text">{{type}} {{{link message}}}</span> </div> {{/each}} </div> <form onSubmit="return false;"> <input type="text" class="input" data-target="{{id}}"/> <input type="submit" style="display: none;"/> </form> </div> {{/channels}} </script> <script type="text/html" id="user"> {{#users}} <a href="{{name}}" class="user"> {{mode}}{{name}} </a> {{/users}} </script> <script type="text/html" id="message"> {{#messages}} <div class="message {{type}}"> <span class="time">{{time}}</span> <a href="{{user}}" class="user">{{mode}}{{user}}</a> <span class="text">{{type}} {{{link message}}}</span> </div> {{/messages}} </script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.2/handlebars.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/URI.js/1.11.2/URI.min.js"></script> <script src="/socket.io/socket.io.js"></script> <script src="/js/lib/jquery.scrollGlue.js"></script> <script src="/js/lib/bootstrap.js"></script> <script src="/js/chat.js"></script> </div> </body> </html>