clearer styles and explicit cleanup in demo

examples/chat.html

@@ -11,7 +11,7 @@
 <script type="text/javascript" src="http://cdn.peerjs.com/0/peer.js"></script>
 <script>
 // Connect to PeerJS, have server assign an ID instead of providing one
-var peer = new Peer({key: 'lwjd5qra8257b9', debug: true});
+var peer = new Peer({key: '47etzdhjw597ldi', debug: true});
 
 // Show this peer's ID.
 peer.on('open', function(id){
@@ -26,11 +26,11 @@ function connect(c) {
   // Handle a chat connection.
   if (c.label === 'chat') {
     var chatbox = $('<div></div>').addClass('connection').addClass('active').attr('id', c.peer);
-    var header = $('<h1></h1>').html(c.peer);
-    var messages = $('<div></div>').addClass('messages');
+    var header = $('<h1></h1>').html('Chat with <strong>' + c.peer + '</strong>');
+    var messages = $('<div><em>Peer connected.</em></div>').addClass('messages');
     chatbox.append(header);
     chatbox.append(messages);
-
+ 
     // Select connection handler.
     chatbox.on('click', function() {
       if ($(this).attr('class').indexOf('active') === -1) {
@@ -143,6 +143,14 @@ $(document).ready(function() {
   $('#browsers').text(navigator.userAgent);
 });
 
+// Make sure things clean up properly.
+
+window.onunload = window.onbeforeunload = function(e) {
+  if (!!peer && !peer.destroyed) {
+    peer.destroy();
+  }
+};
+
 </script>
 </head> 
  

examples/fancy.css

@@ -30,6 +30,14 @@ h1 {
   padding: 5px 10px;
   margin: 0 -10px 0 -10px;
   border-bottom: 1px solid #ccc;
+  font-weight: 300;
+}
+.active h1 strong {
+  color: #FF7500;
+}
+.file, em {
+  color: #999;
+  font-style: italic;
 }
 #wrap {
   background-color: #ddd;