1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:py="http://genshi.edgewall.org/"> <head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"/> <title>Chat room</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="/chatroom.js"></script> <script type="text/javascript"> // tick of current user var tick = ${tick}; // uuid of chatroom session var uuid = "${uuid}"; </script> <style type="text/css"> html, body { margin: 0; padding: 0; border: 0; overflow: hidden; height:100%; } #input-bar { width: 100%; } #input-bar #user { width: 10%; } #input-bar #message { width: 60%; } #input-bar #button { width: 10%; } #msg-container { overflow: auto; overflow-x: hidden; word-wrap: break-word; height: 100%; } #msg-list { padding: 0; margin: 0; list-style: none; height: 100%; } #msg-list li { } #user-container { float: left; width: 200px; height: 100%; margin-right: 10px; background-color: #eee; } #user-container h3 { text-align: center; } #user-list { padding-left: 20px; margin: 0; list-style: none; } #user-list li { } #main-container { height: 100%; } </style> </head> <body> <div id="user-container"> <h3>User list</h3> <ul id="user-list"> <li py:for="user in users.itervalues()" id="user-${user.id}"> ${user.name} </li> </ul> </div> <div id="main-container"> <div id="join-bar" py:attrs="(dict(style='display: none;'), {})[int(user is None)]"> <input type="text" name="name" id="name" /> <input type="submit" name="button" id="button" value="Join" onclick="joinChatRoom(); return false;" /> </div> <div id="input-bar" py:attrs="(dict(style='display: none;'), {})[int(user is not None)]"> <a href="#">Change</a> <span id="user-name-span" py:content="user.name if user else ''"> </span> : <input type="text" name="message" id="message" /> <input type="submit" name="button" id="button" value="Submit" onclick="postMessage(); return false;" /> <input type="submit" name="button" id="button" value="Clear" onclick="clearMessages(); return false;" /> <input id="tick" name="tick" type="hidden" value="0" /> </div> <div id="msg-container"> <ul id="msg-list"> <li py:for="msg in messages[::-1]" py:strip="msg.type == 'state'"> <div py:if="msg.type=='chat'" py:with="chat = msg['payload']" style="color: RGB(${','.join(map(str, chat['user'].color))});" > <span>${chat['user'].name}</span> : <span>${chat['content']}</span> </div> <div py:if="msg.type=='announce'" py:with="announce = msg['payload']" style="color: red;" > ${announce['content']} </div> </li> </ul> </div> </div> </body> </html> |
Direct link: https://paste.plurk.com/show/278739