arne/arnweb-chat
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fancy mode activated

Browse Source
This commit is contained in:
Arne van Iterson 2019-08-24 15:11:22 +02:00
parent 7498b550db
commit 4ddf4e865b
1 changed files with 45 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
index.html
View File

@ -9,6 +9,7 @@
$(function () { $(function () {
// Create socket // Create socket
var socket = io(); var socket = io();
const date = new Date();
// Wait for server response and identify client // Wait for server response and identify client
socket.on('user_identify', function(){ socket.on('user_identify', function(){
@ -28,32 +29,58 @@
// Receive messages from server // Receive messages from server
socket.on('message_receive', function(msg){ socket.on('message_receive', function(msg){
$('.message_container').append($('<span>').html(msg.username + ': ' + msg.message)); document.getElementById('message_container').innerHTML +=
$('.message_container').append($('<br>')); `<div class="message">
<img src="https://www.gravatar.com/avatar/${msg.mailHash}?s=48">
<div>
<span>${msg.username}</span>
<span>${date.getHours() + ':' + date.getMinutes()}</span>
<span>${msg.message}</span>
</div>
</div>`;
}); });
}); });
</script> </script>
</head> </head>
<body> <body>
<style> <style>
div.chat_container { div.chat_container {
border: 1px solid black; border: 1px solid black;
width: 500px; width: 500px;
} }
div.message_container { div#message_container {
border: 1px solid black; border: 1px solid black;
height: 500px; height: 500px;
overflow: auto; overflow: auto;
} }
div.input_container { div.input_container {
border: 1px solid black; border: 1px solid black;
} }
div.input_container > form > input, div.input_container > button { div.input_container > form > input, div.input_container > button {
margin: 10px; margin: 10px;
} }
div.message {
background-color: white;
height: auto;
word-wrap: anywhere;
display: grid;
grid-template-columns: 48px auto;
}
div.message > div {
height: auto;
display: grid;
padding: 10px 10px 10px 20px;
grid-template-areas:
'username time'
'message message';
}
div.message > img { padding: 10px; }
div.message > div > span:nth-child(1) { grid-area: username; border-left: 3px solid black; padding-left: 5px;}
div.message > div > span:nth-child(2) { grid-area: time; text-align: right;}
div.message > div > span:nth-child(3) { grid-area: message; border-left: 3px solid black; padding-left: 5px;}
</style> </style>
<div class="chat_container"> <div class="chat_container">
<div class="message_container"> <div id="message_container">
<!-- JS will push messages here --> <!-- JS will push messages here -->
</div> </div>
<div class="input_container"> <div class="input_container">