summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--webchat/hello_web.js7
-rw-r--r--webchat/public/client.js2
-rw-r--r--webchat/public/reset.css26
3 files changed, 30 insertions, 5 deletions
diff --git a/webchat/hello_web.js b/webchat/hello_web.js
index 45f6fc56..dd2f26e3 100644
--- a/webchat/hello_web.js
+++ b/webchat/hello_web.js
@@ -93,11 +93,10 @@ var app = connect()
res.write('<script src="sockjs-0.3.min.js"></script>');
res.write('<script src="jquery-2.0.3.min.js"></script>');
res.write('<script src="client.js"></script>');
- res.write('<div id=bg>');
+ res.write('<div id=bg><div id=chatter>');
res.write('hello, this is #krebs:<br>');
- res.write('<table id="chatbox"></table>');
- res.end('<input type="text" id="input"><br>');
- res.write('</div>');
+ res.write('<table id="chatbox"><tr id="foot"><td></td><td></td><td><input type="text" id="input"></td></tr></table>');
+ res.end('</div></div>');
})
var server = http.createServer(options, app);
diff --git a/webchat/public/client.js b/webchat/public/client.js
index 95b67ad0..e13ab1f7 100644
--- a/webchat/public/client.js
+++ b/webchat/public/client.js
@@ -26,7 +26,7 @@ $(function connect() {
var safe_message = $('<div/>').text(object.message).html();
safe_message = replaceURLWithHTMLLinks(safe_message);
var safe_from = $('<div/>').text(object.from).html();
- $('#chatbox').append('<tr><td class="chat_from">'+safe_from+'</td><td class="chat_msg">'+safe_message+'</td></tr>');
+ $('<tr><td class="chat_date">'+(new Date).getHours() + ':' + (new Date).getMinutes() + ':' + (new Date).getSeconds()+'</td><td class="chat_from">'+safe_from+'</td><td class="chat_msg">'+safe_message+'</td></tr>').insertBefore('#foot');
} catch (error) {
console.log(error);
diff --git a/webchat/public/reset.css b/webchat/public/reset.css
index c291544d..2b67f153 100644
--- a/webchat/public/reset.css
+++ b/webchat/public/reset.css
@@ -21,6 +21,7 @@ time, mark, audio, video {
border: 0;
font-size: 100%;
font: inherit;
+ font-family: monospace;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
@@ -50,11 +51,21 @@ q:before, q:after {
background-color: black;
color: white;
border: 5px solid black;
+ width: 100%;
+ height:100%;
+ opacity: 0.8;
+}
+#input{
+ width: 100%;
+ background-color: black;
+ border: 1px solid black;
+ color: white;
}
.chat_from {
color:grey;
font-weight: bold;
text-align: right;
+ font-size:12px;
}
.chat_from:after {
content: ":";
@@ -68,6 +79,21 @@ q:before, q:after {
left: 0;
right: 0;
}
+#chatter {
+ width: 75%;
+}
+.chat_date,.chat_from,.chat_msg{
+}
+.chat_msg{
+ width: 100%;
+}
a {
color: red;
}
+.chat_date {
+ color: green;
+}
+.chat_date:after {
+ content: "";
+ padding-right: 4px;
+} \ No newline at end of file