API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Nov 1st, 2017
88
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 8.76 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--skip-->
  5.         <title>EasyRTC Demo: Instant Messaging + Rooms </title>
  6.         <link rel="stylesheet" type="text/css" href="/easyrtc/easyrtc.css" />
  7.  
  8.         <!--hide-->
  9.         <link rel="stylesheet" type="text/css" href="css/landing.css" />
  10.  
  11.         <!-- Prettify Code -->
  12.         <script type="text/javascript" src="js/prettify/prettify.js"></script>
  13.         <link rel="stylesheet" type="text/css" href="js/prettify/prettify.css" />
  14.         <script type="text/javascript" src="js/prettify/loadAndFilter.js"></script>
  15.         <script type="text/javascript" src="js/prettify/jquery.min.js"></script>
  16.         <!--show-->
  17.         <!-- Assumes global locations for socket.io.js and easyrtc.js -->
  18.         <script src="/socket.io/socket.io.js"></script>
  19.         <script type="text/javascript" src="/easyrtc/easyrtc.js"></script>
  20.         <script type="text/javascript" src="js/demo_instant_messaging_rooms.js"></script>
  21.         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  22.     <link rel="stylesheet" type="text/css" href="css.css">
  23.         <!--hide-->
  24.         <!-- Styles used within the demo -->
  25.         <style type="text/css">
  26.             #stuffToSend {
  27.                 width:300px;
  28.             }
  29.             #sendMessageArea{
  30.                 float:left;
  31.                 width:400px;
  32.                 padding-right:20px;
  33.             }
  34.             #sendMessageText{
  35.                 width:100%;
  36.             }
  37.             #conversation {
  38.                 height:150px;
  39.                 border:solid 1px gray;
  40.                 overflow-y:scroll;
  41.             }
  42.             .roomDiv {
  43.                 margin-bottom: 15px;
  44.                 background-color: antiquewhite;
  45.             }
  46.             .roomOccupants{
  47.                 margin-left: 20px;
  48.             }
  49.             #main.connected>.preconnection{
  50.                 display:none;
  51.             }
  52.             #main.notconnected>.postconnection{
  53.                 display:none;
  54.             }
  55.             .quickJoin {
  56.                 display: inline-block;
  57.             }
  58.             #quickJoinBlock {
  59.                 display: inline-block;
  60.             }
  61.         </style>
  62.         <!--show-->
  63.     </head>
  64.     <body onload="initApp();" >
  65.         <!--hide-->
  66.         <div id="container">
  67.             <!-- <div id="menu"></div> -->
  68.             <div id="main">
  69.  
  70.                
  71.                 <div class="preconnection">
  72.                     Username: <input type="text" id="userNameField" />
  73.                     Password: <input type="text" id="credentialField" />
  74.                     <div >
  75.                         <button id="connectButton" onclick="connect();">Connect</button>
  76.                     </div>
  77.                     <hr>
  78.                 </div>
  79.                 <div class="postconnection">
  80.                     <button onclick="disconnect();">Disconnect from server.</button>
  81.                 </div>
  82.              
  83.            <!--      <div >
  84.                    Quick Join -
  85.  
  86.                    <div id="quickJoinBlock"></div> <button onclick="refreshRoomList();"> Refresh</button>
  87.                    <button onclick="addRoom(null, null, true);">or join </button>
  88.                    <input id="roomToAdd" type="text" size="20" />
  89.                    <br>
  90.                    Optional room parameters<input id="optRoomParms" type="text" size="20"/>
  91.  
  92.                </div> -->
  93.  
  94.                 <div class="postconnection">
  95.                     <hr>
  96.                     <div id="sendMessageArea">
  97.  
  98.                         <div id="iam">Not connected yet</div>
  99.                         <textarea id="sendMessageText" placeholder="Enter your message here"></textarea>
  100.  
  101.                         Rooms:
  102.                         <div id="rooms"></div>
  103.                     </div>
  104.                     <div id="receiveMessageArea">
  105.                         Received Messages:
  106.                         <div id="conversation"></div>
  107.                     </div>
  108.                 </div>
  109.  
  110.  
  111.  
  112.  
  113.  
  114.  
  115.  
  116. <div class="container">
  117.     <div class="row">
  118.     <br> <br> <br> <br> <br> <br>
  119.         <div class="col-md-3">
  120.             <div class="panel panel-primary">
  121.                 <div class="panel-heading">
  122.                     <span class="glyphicon glyphicon-comment"></span> Chat
  123.                     <div class="btn-group pull-right">
  124.                         <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
  125.                             <span class="glyphicon glyphicon-chevron-down"></span>
  126.                         </button>
  127.                         <ul class="dropdown-menu slidedown">
  128.                             <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-refresh">
  129.                             </span>Refresh</a></li>
  130.                             <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-ok-sign">
  131.                             </span>Available</a></li>
  132.                             <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-remove">
  133.                             </span>Busy</a></li>
  134.                             <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-time"></span>
  135.                                 Away</a></li>
  136.                             <li class="divider"></li>
  137.                             <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-off"></span>
  138.                                 Sign Out</a></li>
  139.                         </ul>
  140.                     </div>
  141.                 </div>
  142.                 <div class="panel-body">
  143.                     <ul class="chat">
  144.                         <li class="left clearfix"><span class="chat-img pull-left">
  145.                             <img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" />
  146.                         </span>
  147.                             <div class="chat-body clearfix">
  148.                                 <div class="header">
  149.                                     <strong class="primary-font">Jack Sparrow</strong> <small class="pull-right text-muted">
  150.                                         <span class="glyphicon glyphicon-time"></span>12 mins ago</small>
  151.                                 </div>
  152.                                 <p>
  153.                                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
  154.                                     dolor, quis ullamcorper ligula sodales.
  155.                                 </p>
  156.                             </div>
  157.                         </li>
  158.                         <li class="right clearfix"><span class="chat-img pull-right">
  159.                             <img src="http://placehold.it/50/FA6F57/fff&text=ME" alt="User Avatar" class="img-circle" />
  160.                         </span>
  161.                             <div class="chat-body clearfix">
  162.                                 <div class="header">
  163.                                     <small class=" text-muted"><span class="glyphicon glyphicon-time"></span>13 mins ago</small>
  164.                                     <strong class="pull-right primary-font">Bhaumik Patel</strong>
  165.                                 </div>
  166.                                 <p>
  167.                                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
  168.                                     dolor, quis ullamcorper ligula sodales.
  169.                                 </p>
  170.                             </div>
  171.                         </li>
  172.                     </ul>
  173.                 </div>
  174.                 <div class="panel-footer">
  175.                     <div class="input-group">
  176.                         <input id="btn-input" type="text" class="form-control input-sm" placeholder="Type your message here..." />
  177.                         <span class="input-group-btn">
  178.                             <button class="btn btn-warning btn-sm" id="btn-chat">
  179.                                 Send</button>
  180.                         </span>
  181.                     </div>
  182.                 </div>
  183.             </div>
  184.         </div>
  185.     </div>
  186. </div>
  187.  
  188.  
  189.  
  190.  
  191.  
  192.  
  193.  
  194.  
  195.  
  196.  
  197.  
  198.  
  199.  
  200.  
  201.  
  202.                 <div class="postconnection" style="display: none;">
  203.                     <div id="fields"> </div></div>
  204.  
  205.             </div>
  206.             <!--hide-->
  207.         </div>
  208.         <script type="text/javascript">
  209.  
  210.         addQuickJoinButtons({
  211.             room1: {roomName: "room1", numberClients: " "},
  212.             room2: {roomName: "room2", numberClients: " "},
  213.             room3: {roomName: "room3", numberClients: " "}
  214.         }
  215.         );
  216.  
  217.         </script>
  218.     </body>
  219. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!