87 lines
6.7 KiB
HTML
87 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>{{ questName }}</title>
|
|
<link rel="stylesheet" type="text/css" href="/static/anonkun.css">
|
|
<script type="text/javascript" src="/static/socket.io.slim.js"></script>
|
|
<script>
|
|
var socket;
|
|
var tid = setInterval( function () {
|
|
if ( document.readyState !== 'complete' ) return;
|
|
clearInterval( tid );
|
|
|
|
socket = io.connect('https://' + document.domain + ':' + location.port + '/chat');
|
|
socket.on('connect', function() {
|
|
socket.emit('joined', {room: '{{ questName }}' });
|
|
});
|
|
socket.on('message', function(data) {
|
|
date = new Date(data.date * 1000);
|
|
date_str = date.getFullYear() + '-' + padToTwo(date.getMonth()) + '-' + padToTwo(date.getDay()) + ' ';
|
|
date_str += padToTwo(date.getHours()) + ':' + padToTwo(date.getMinutes()) + ':' + padToTwo(date.getSeconds());
|
|
|
|
msg_str = '<div class="messageHeader">\n<span class="messageName">' + data.name + '</span> ';
|
|
msg_str += '<span class="messageDate">' + date_str + '</span>\n</div>\n';
|
|
msg_str += '<div class="message">' + data.message + '</div>\n';
|
|
|
|
mbox = document.getElementById('chatWindow');
|
|
mbox.innerHTML = mbox.innerHTML + msg_str;
|
|
mbox.scrollTop = mbox.scrollHeight;
|
|
});
|
|
mtarea = document.getElementById('messageTextarea');
|
|
mtarea.addEventListener('keypress', function(event) {
|
|
if (event.key == 'Enter') {
|
|
text = mtarea.value;
|
|
mtarea.value = '';
|
|
socket.emit('message', {message: text, name: 'Anonymous', room: '{{ questName }}'});
|
|
}
|
|
});
|
|
}, 100 );
|
|
|
|
function padToTwo(number) {
|
|
if (number<=99) { number = ("0"+number).slice(-2); }
|
|
return number;
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="questBody">
|
|
<h1>Unga Bunga Quest</h1>
|
|
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget ullamcorper orci. Proin feugiat nibh quam, ut cursus nulla varius et. Integer a massa magna. Pellentesque euismod luctus congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin eu urna dapibus, accumsan diam nec, consectetur odio. Integer porta dignissim odio, non laoreet orci hendrerit et. Donec vitae egestas ligula, ut accumsan tortor.
|
|
|
|
<p>Cras pretium nibh et nunc pretium gravida. Integer imperdiet ipsum in felis porttitor consectetur. Vivamus accumsan tempus sem. Aliquam sit amet eleifend metus, non hendrerit urna. Etiam commodo mattis erat et interdum. Nullam sit amet fermentum mauris. Sed porta sed odio in mollis. Donec id malesuada felis. Cras eu risus gravida, mollis arcu sit amet, rhoncus elit. Nunc suscipit odio ac leo tristique, vel aliquet sapien porttitor. Vivamus nec ante vitae nulla efficitur dapibus sit amet at risus. Vestibulum lobortis cursus venenatis. Ut sapien augue, condimentum nec blandit ac, convallis id metus. Pellentesque convallis vel turpis et dapibus. Aenean ex velit, ornare et nisi ac, tempor tempor augue.
|
|
|
|
<p>Ut sodales quis quam non fermentum. Ut condimentum enim non laoreet blandit. Ut nec ante ullamcorper tellus facilisis lobortis. Pellentesque at dignissim eros. Aliquam euismod consectetur egestas. Pellentesque et volutpat nibh, et suscipit libero. Morbi lectus turpis, posuere ut eros sit amet, facilisis aliquam nisl. Nunc vehicula vehicula turpis varius pharetra. Vestibulum condimentum ipsum in quam fringilla tempor. Ut nibh tellus, blandit quis vulputate non, ultricies et est.
|
|
|
|
<p>Maecenas odio lacus, ornare non aliquam nec, pretium ac justo. Aliquam efficitur, nibh nec molestie egestas, nibh neque eleifend ligula, vel iaculis quam tellus sit amet erat. Ut non diam ultricies, tincidunt justo in, lobortis lorem. Maecenas scelerisque quis velit quis ultricies. Fusce tincidunt turpis sed sagittis aliquet. Morbi ullamcorper lacinia massa. Morbi placerat, lectus in rutrum eleifend, elit lorem rutrum lorem, ac congue felis libero in risus.
|
|
|
|
<p>Fusce in auctor magna, sed posuere felis. Suspendisse sit amet lacinia justo. Ut sodales tortor ut tempus congue. Proin scelerisque nibh purus, eget dignissim ipsum mollis sit amet. Sed condimentum lobortis urna in elementum. Sed id egestas enim. Morbi eu ipsum sed risus feugiat molestie. Phasellus luctus elit nisi, nec ultrices metus fringilla ac. Nullam ultricies a ipsum nec consequat. Nulla condimentum quam nunc. Morbi sit amet dapibus risus, quis fringilla leo. Maecenas rutrum imperdiet eleifend. Quisque et odio est. Ut sollicitudin vitae libero et condimentum. Quisque vitae pulvinar ex. Vivamus quis accumsan risus.
|
|
|
|
<p>Pellentesque pretium erat non luctus pulvinar. Nulla non diam est. Sed fermentum molestie mauris at dignissim. Vestibulum ultrices orci et nulla pulvinar, vel hendrerit tortor commodo. In ligula lectus, blandit quis neque et, lacinia pharetra dolor. Suspendisse arcu sem, placerat ac neque quis, egestas faucibus enim. Fusce eu libero eu dui condimentum ultricies. Nam id tortor nunc.
|
|
|
|
<p>Integer vulputate sollicitudin dolor ac accumsan. Nulla lacinia egestas risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget nisl tincidunt, feugiat ipsum a, tristique est. Nam tempor orci ac mi tincidunt congue. Donec ultricies iaculis magna, quis dictum tortor iaculis ac. Mauris sed leo blandit, blandit lectus vitae, porttitor tortor. Suspendisse hendrerit, tortor nec ornare varius, justo est dictum tortor, in dictum metus tortor non nibh. Donec sit amet vulputate ex, non egestas felis.
|
|
|
|
<p>Donec facilisis dolor viverra, pellentesque justo sed, rutrum nibh. Duis auctor et nulla eu rhoncus. Ut vel orci vel odio dignissim porttitor. Suspendisse facilisis fringilla arcu id vehicula. In eleifend et ipsum ut iaculis. Curabitur mattis nisl non mi posuere iaculis. Phasellus ultricies turpis aliquam odio lacinia, id posuere augue convallis. Fusce efficitur hendrerit quam eget laoreet. Suspendisse nec auctor mauris. Aliquam urna dui, consectetur in pharetra sed, iaculis vel diam. Sed sed imperdiet eros, feugiat feugiat dolor. Nunc eu nunc vel libero cursus porta in vel erat. Curabitur tincidunt bibendum est. Morbi pharetra interdum felis, imperdiet hendrerit lacus feugiat iaculis. Curabitur consequat, lacus sit amet mattis malesuada, elit tortor pulvinar eros, id rutrum lacus ex sit amet nisi.
|
|
|
|
<p>Vestibulum ac pulvinar sem. Mauris ornare leo in turpis semper, vitae vestibulum risus dignissim. Pellentesque ferme
|
|
</div>
|
|
<div id="chatPane" class="chat">
|
|
<h1>Chat</h1>
|
|
<div id="chatWindow" class="chat">
|
|
{% for message in messages %}
|
|
<div class="message">
|
|
<div class="messageHeader">
|
|
<span class="messageName">{{ message["name"] }}</span> <span class="messageDate">{{ message["date"] | strftime }}</span>
|
|
</div>
|
|
<div class="messageMessage">{{ message["message"] }}</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div id="messageBox" class="chat">
|
|
<textarea id="messageTextarea"></textarea>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|