-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
46 lines (44 loc) · 2.07 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<link href="http://meyerweb.com/eric/tools/css/reset/reset.css" rel="stylesheet" />
<style>
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
div.rounded{display:inline-block;padding:10px; border-radius: 50px;}
div.shadow{-moz-box-shadow: 0 0 5px 5px #888;-webkit-box-shadow: 0 0 5px 5px#888;box-shadow: 0 0 5px 5px #888; }
div.shadow-left{-moz-box-shadow: -5px -5px #888;-webkit-box-shadow: -5px -5px #888;box-shadow: -5px -5px #888; }
div#words div.word3 span.user{font-weight:bolder;}
div#words div.word3{margin:8px;}
div#words div.word3 div.rounded{background:#ccc;margin:2px 0;}
div#words div.word1 div.rounded,div#words div.word2 div.rounded,div#words div.word4 div.rounded{background:#fff;margin:2px 0;border:1px solid #ccc;font-weight:bolder;}
a:visited{color:#000;}
</style>
</head>
<body style="background:#ccc;">
<div pub-key="pub-c651e518-651a-4a2b-bdcf-72280778c0d5" sub-key="sub-e2aae759-73b3-11e1-9e5e-694df12340f6" ssl="off" origin="pubsub.pubnub.com" id="pubnub"></div>
<script src="http://cdn.pubnub.com/pubnub-3.1.min.js"></script>
<script src="chat.js"></script>
<div id="wrapper" class="shadow-left" style="padding:10px;width:800px;margin:10px auto;height:500px;background:#fff;">
<div id="words-wrapper" style="float:left;padding:0 5px;">
<h2>Chat</h2>
<div id="words" style="overflow:auto;width:600px;height:480px;"></div>
</div>
<div id="users-wrapper" style="float:left;border-left:1px dashed #ccc;padding:0 5px;">
<h2>Users</h2>
<ul id="users"></ul>
</div>
</div>
<input style="display:block;width:816px;margin:auto;background:#fff;border:2px solid #000;" type="text"
onkeyup="if(event.keyCode === 13) {
PUBNUB.publish({ channel : 'chat_room', message : Chat.createMsg(Chat.TYPES.CHAT,this.value) });
this.value = null;
}" />
</body>
</html>