<!doctype html> <head> <title>{{ sitename }} Webchat</title> <link rel="stylesheet" type="text/css" href="/styles.css"> <link rel="stylesheet" type="text/css" href="/local.css"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } #wrapper {border: 3px solid black; display: inline-block; width: 100%; height: 100%;} body { font: 13px; background: white; height: 100%; color: black; } form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; color: black; background: white; } form button { width: 9%; background: #074115; border: none; padding: 10px; color: #074115;} #messages { list-style-type: none; margin: 0; padding: 0; } #messages li { padding: 5px 10px; } </style> <script src="/socket.io/socket.io.js"></script> <script> var socket = io(); var room; function send(){ let m = document.getElementById('m').value; if(m.startsWith('/nick')){ socket.emit('NICK', { nick: m.split(' ')[1], password: m.split(' ')[2] }); } else if(m.startsWith('/join')){ socket.emit('LEAVEROOM', room); socket.emit('JOINROOM', m.split(' ')[1]); room = m.split(' ')[1]; } else if(m.startsWith('/kick')){ socket.emit('KICK', {nick: m.split(' ')[1], room: room}); } else if(m.startsWith('/list')){ socket.emit('LIST', {room: room}); } else if(m.startsWith('/banlist')){ socket.emit('LISTBAN', { room: room, }); } else if(m.startsWith('/ban')){ socket.emit('BAN', { room: room, nick: m.split(' ')[1], time: (1 * m.split(' ')[2]) }); } else if(m.startsWith('/unban')){ socket.emit('UNBAN', { room: room, ip: m.split(' ')[1] }); } else socket.emit('MSG', {room: room, msg: m}); document.getElementById('m').value = ''; } socket.on('MSG', function(data){ document.getElementById('messages').innerHTML+='<li><b>'+data.nick+':</b> '+data.msg+'</span></li>'; window.scrollTo(0,document.body.scrollHeight); }); socket.on('ALERT', function(data){ document.getElementById('messages').innerHTML+='<li><i>'+data+'</i></li>'; window.scrollTo(0,document.body.scrollHeight); }); socket.on('JOINED', function(data){ document.getElementById('messages').innerHTML+='<li><i>'+data.nick+' has joined the chat</i></li>'; window.scrollTo(0,document.body.scrollHeight); }); socket.on('LEFT', function(data){ document.getElementById('messages').innerHTML+='<li><i>'+data.nick+' has left the chat</i></li>'; window.scrollTo(0,document.body.scrollHeight); }); socket.on('LIST', function(data){ document.getElementById('messages').innerHTML+='<li><i>'+data+'</i></li>'; window.scrollTo(0,document.body.scrollHeight); }); function getUrlParameter(name) { name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]'); var regex = new RegExp('[\\?&]' + name + '=([^&#]*)'); var results = regex.exec(location.search); return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' ')); }; socket.once('connect', () => { iname = getUrlParameter('nick'); iroom = getUrlParameter('room'); if(iname !== '') socket.emit('NICK', {nick: iname}); if(iroom !== '') { socket.emit('JOINROOM', iroom); room = iroom; } }); </script> </head> <body> <div id="wrapper"> <ul id="messages"></ul><li style="list-style-type: none; margin: 0; padding: 5px 10px;"> </li><li style="list-style-type: none; margin: 0; padding: 5px 10px;"> </li> </div> <form id="f" action="" onSubmit="send(); return false"> <input id="m" autocomplete="off" /><button><img src="/send.png" alt="send" width="15px" style="display: inline-block;"></img></button> </form> </body>