|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>Fast Messaging by [Glz_SQL]</title> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script> |
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
|
<style type="text/css"> |
|
body { |
|
margin: 0; |
|
padding: 0; |
|
font-family: Arial, sans-serif; |
|
background-color: #f0f0f0; |
|
} |
|
|
|
.header { |
|
text-align: center; |
|
padding: 20px; |
|
background-color: #3498db; |
|
color: #ffffff; |
|
} |
|
|
|
.app { |
|
position: relative; |
|
padding: 20px; |
|
} |
|
|
|
.message-container { |
|
position: relative; |
|
} |
|
|
|
.message-container textarea { |
|
width: 100%; |
|
padding: 10px; |
|
border: 1px solid #ccc; |
|
background-color: #ffffff; |
|
} |
|
|
|
.message-input { |
|
background-color: transparent; |
|
width: 100%; |
|
height: 175px; |
|
|
|
} |
|
|
|
|
|
.message-box { |
|
position: relative; |
|
width: calc(33% + 100px); |
|
height: auto; |
|
padding: calc(4% + 20px); |
|
border-radius: 5px; |
|
font-size: 24pt; |
|
margin: 0 0 20px 20px; |
|
white-space: pre; |
|
white-space: pre-line; |
|
|
|
} |
|
|
|
@media (orientation: portrait) { |
|
.message-box { |
|
margin-bottom: 100px; |
|
} |
|
} |
|
|
|
|
|
@media (orientation: landscape) { |
|
.message-box { |
|
margin-bottom: 80px; |
|
} |
|
} |
|
.message-box.sent { |
|
width: calc(88% - 50px); |
|
background-color: #d3d3d3; |
|
left: 0%; |
|
} |
|
|
|
.message-box.received { |
|
width: 85%; |
|
background-color: #fff; |
|
|
|
} |
|
.message-box.received a { |
|
color: #2A58E2; |
|
font-size: 18pt; |
|
} |
|
|
|
#message-input { |
|
position: fixed; |
|
bottom: 10px; |
|
left: calc(10% + 40px); |
|
background-color: transparent; |
|
border: solid #000; |
|
opacity: 85%; |
|
width: calc(70% - 40px); |
|
height: calc(3% + 35px); |
|
border-radius: 30px; |
|
font-size: 32pt; |
|
z-index: 9; |
|
} |
|
|
|
#message-input:hover { |
|
color: #000; |
|
background: #d3d3d3; |
|
border: solid #3498db; |
|
} |
|
|
|
#send-button:hover { |
|
color: #fff; |
|
background: #20efbb; |
|
} |
|
|
|
#send-button { |
|
position: fixed; |
|
bottom: 12px; |
|
left: 84%; |
|
background-color: transparent; |
|
border: solid #20efbb; |
|
width: 150px; |
|
height: calc(3% + 50px); |
|
border-radius: 20px; |
|
font-size: 24pt; |
|
z-index: 9; |
|
} |
|
|
|
|
|
#upload-files { |
|
position: fixed; |
|
bottom: 0px; |
|
left: 1%; |
|
background-color: transparent; |
|
border: solid #20efbb; |
|
width: 100px; |
|
height: calc(3% + 50px); |
|
border-radius: 20px; |
|
font-size: 18pt; |
|
z-index: 9; |
|
overflow: hidden; |
|
} |
|
|
|
#custom-upload { |
|
display: inline-block; |
|
background: transparent; |
|
cursor: pointer; |
|
position: fixed; |
|
bottom: 12px; |
|
left: calc(4% - 10px); |
|
background-color: transparent; |
|
width: calc(100px); |
|
|
|
border-radius: 20px; |
|
font-size: 18pt; |
|
z-index: 4; |
|
overflow: hidden; |
|
} |
|
#upload-files { |
|
display: none; |
|
} |
|
|
|
#upload-files:hover { |
|
color: #fff; |
|
background: #20efbb; |
|
} |
|
|
|
#user-id-input { |
|
position: fixed; |
|
top: 80px; |
|
left: calc(10% + 40px); |
|
background-color: transparent; |
|
border: solid #000; |
|
opacity: 5%; |
|
width: calc(70% - 40px); |
|
height: 50px; |
|
border-radius: 30px; |
|
font-size: 24pt; |
|
z-index: 9; |
|
display: block; |
|
} |
|
|
|
#user-id-input:hover { |
|
color: #000; |
|
opacity: 80%; |
|
background: #d3d3d3; |
|
border: solid #3498db; |
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#menu-button { |
|
position: fixed; |
|
left: 0; |
|
top: 0; |
|
width: 50px; |
|
height: 100%; |
|
background-color: #3498db; |
|
color: #ffffff; |
|
text-align: center; |
|
line-height: 50px; |
|
cursor: pointer; |
|
z-index: 9999; |
|
} |
|
|
|
#menu { |
|
position: fixed; |
|
left: -150px; |
|
top: 0px; |
|
width: 150px; |
|
height: 100%; |
|
background-color: #ffffff; |
|
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2); |
|
transition: left 0.3s ease-in-out; |
|
overflow-y: auto; |
|
padding-top: 45px; |
|
padding-left: 20px; |
|
padding-right: 20px; |
|
z-index: 9997; |
|
} |
|
|
|
.menu-item { |
|
margin-bottom: 10px; |
|
z-index: 9999; |
|
cursor: pointer; |
|
} |
|
|
|
.menu-item a { |
|
color: #0d66e3; |
|
} |
|
|
|
#add-button { |
|
cursor: pointer; |
|
z-index: 9999; |
|
} |
|
|
|
#input-container { |
|
display: none; |
|
margin-top: 10px; |
|
z-index: 9998; |
|
} |
|
|
|
#toggle-menu-button { |
|
position: fixed; |
|
left: 5px; |
|
top: 10px; |
|
width: 30px; |
|
height: 30px; |
|
background-color: #3498db; |
|
color: #ffffff; |
|
text-align: center; |
|
line-height: 30px; |
|
cursor: pointer; |
|
z-index: 9999; |
|
font-size: 14pt; |
|
border: none; |
|
} |
|
|
|
#add-button { |
|
position: fixed; |
|
left: 50px; |
|
bottom: 20px; |
|
transform: translateX(-50%); |
|
width: 40px; |
|
height: 40px; |
|
background-color: #3498db; |
|
color: #ffffff; |
|
text-align: center; |
|
line-height: 40px; |
|
font-size: 20px; |
|
cursor: pointer; |
|
border-radius: 50%; |
|
z-index: 9999; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="header"> |
|
<h1>Fast Messaging by [Glz_SQL]</h1> |
|
</div> |
|
<div class="banner"></div> |
|
<div class="app"> |
|
<div class="message-container" id="mmsg"> |
|
<div class="message-container" id="mmsg2"> |
|
{{ oldMessage }} |
|
</div> |
|
<div class="message-input"></div> |
|
<input type="hidden" id="user-id-input" placeholder="Saisir un ID" value="general;"> |
|
<label for="upload-files" id="custom-upload"> |
|
<img src="/upload-img" width='100px' alt="Upload"> |
|
</label> |
|
<input type="file" id="upload-files" accept="image/*" placeholder="upload" value="Upload"></input> |
|
<textarea type="text" id="message-input" placeholder="{{ roomID }}"></textarea> |
|
<button id="send-button">Send</button> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
<div style="height: 1000%; width: 90%; background-color: #f0f0f0; position: absolute; bottom: 0px; z-index: -1;"></div> |
|
|
|
|
|
<button id="toggle-menu-button">≡</button> |
|
<div id="menu"> |
|
{{ rooms }} |
|
|
|
|
|
<div id="add-button">+</div> |
|
<div id="input-container"> |
|
<input type="text" id="item-name" placeholder="Nom"> |
|
<input type="text" id="item-id" placeholder="ID"> |
|
<button id="ok-button">OK</button> |
|
</div> |
|
</div> |
|
<script type="text/javascript"> |
|
var socket = io.connect('https://' + document.domain + ':' + location.port); |
|
var uid = "{{ username }}"; |
|
var iid = 0; |
|
var roomID = $('#user-id-input').val(); |
|
var menuVisible = false; |
|
var addButton = $('#add-button'); |
|
var inputContainer = $('#input-container'); |
|
|
|
function sendnew(roomid) { |
|
roomID = roomid; |
|
socket.emit('message', { |
|
data: JSON.stringify({ |
|
message: 'Connected!', |
|
usid: uid, |
|
roomID: roomid, |
|
cookies: document.cookie |
|
}) |
|
}); |
|
$('#mmsg2').empty(); |
|
$('#user-id-input').val(roomid); |
|
document.getElementById("message-input").placeholder = "Message a envoyer dans " + roomid + "..."; |
|
menuVisible = !menuVisible; |
|
var leftValue = menuVisible ? '0' : '-150px'; |
|
$('#menu').css('left', leftValue); |
|
if (!menuVisible) { |
|
addButton.css('display', 'none'); |
|
$('#toggle-menu-button').css('width', '30px'); |
|
} else { |
|
addButton.css('display', 'inline'); |
|
$('#toggle-menu-button').css('width', '180px'); |
|
} |
|
} |
|
$(document).ready(function() { |
|
|
|
addButton.css('display', 'none'); |
|
$('#menu-button').on('click', function() { |
|
menuVisible = !menuVisible; |
|
var leftValue = menuVisible ? '0' : '-150px'; |
|
$('#menu').css('left', leftValue); |
|
}); |
|
|
|
addButton.on('click', function() { |
|
inputContainer.show(); |
|
}); |
|
|
|
$('#ok-button').on('click', function() { |
|
var itemName = $('#item-name').val(); |
|
var itemId = $('#item-id').val(); |
|
if (itemName && itemId) { |
|
var newItem = $('<div class="menu-item" onclick="sendnew(\'' + itemId + '\');">' + itemName + ' (' + itemId + ')</div>'); |
|
$('#menu').append(newItem); |
|
inputContainer.hide(); |
|
$('#item-name').val(''); |
|
$('#item-id').val(''); |
|
} |
|
}); |
|
|
|
$('#toggle-menu-button').on('click', function() { |
|
menuVisible = !menuVisible; |
|
var leftValue = menuVisible ? '0' : '-150px'; |
|
$('#menu').css('left', leftValue); |
|
if (!menuVisible) { |
|
addButton.css('display', 'none'); |
|
$('#toggle-menu-button').css('width', '30px'); |
|
} else { |
|
addButton.css('display', 'inline'); |
|
$('#toggle-menu-button').css('width', '180px'); |
|
} |
|
}); |
|
}); |
|
|
|
function formatMessage(message, usid) { |
|
message = "<" + usid + ">: \n" + message; |
|
const words = message.split(" "); |
|
const container = document.createElement("div"); |
|
for (const word of words) { |
|
const wordNode = document.createTextNode(word + " "); |
|
|
|
if (word.startsWith("@")) { |
|
const username = word.substring(1); |
|
const strongNode = document.createElement("strong"); |
|
strongNode.textContent = "@" + username + " "; |
|
container.appendChild(strongNode); |
|
} else if (word.match(/^https?:\/\/[^\s/$.?#].[^\s]*$/i)) { |
|
const urlNode = document.createElement("a"); |
|
urlNode.href = word; |
|
urlNode.textContent = word + " "; |
|
urlNode.target = "_blank"; |
|
container.appendChild(urlNode); |
|
} else { |
|
container.appendChild(wordNode); |
|
} |
|
} |
|
|
|
return container; |
|
} |
|
document.addEventListener("keydown", KeyCheck); |
|
|
|
function KeyCheck(event) { |
|
var KeyID = event.keyCode; |
|
switch (KeyID) { |
|
case 13: |
|
var message = $('#message-input').val(); |
|
if (message !== '' && message.startsWith("/change-chat-room") === false) { |
|
socket.emit('message', { |
|
data: JSON.stringify({ |
|
message: message, |
|
usid: uid, |
|
roomID: roomID, |
|
cookies: document.cookie |
|
}) |
|
}); |
|
$('#message-input').val(''); |
|
window.scrollTo(0, document.body.scrollHeight); |
|
$('#mmsg2').append($('<div class="message-box sent">').text('Moi : \n' + message)); |
|
} else if (message !== '') { |
|
if (message.endsWith(';')) { |
|
|
|
} |
|
} |
|
break; |
|
default: |
|
break; |
|
} |
|
} |
|
|
|
$('#user-id-input').on('change', function() { |
|
var userInput = $(this).val(); |
|
if (userInput.endsWith(';')) { |
|
roomID = userInput; |
|
socket.emit('message', { |
|
data: JSON.stringify({ |
|
message: 'Connected!', |
|
usid: uid, |
|
roomID: roomID, |
|
cookies: document.cookie |
|
}) |
|
}); |
|
} |
|
}); |
|
|
|
var userIdInput = $('#user-id-input'); |
|
var isScrolling = false; |
|
var fadeTimeout; |
|
|
|
function hideUserIdInput() { |
|
userIdInput.animate({ |
|
opacity: 0.01 |
|
}, 200); |
|
} |
|
|
|
function showUserIdInput() { |
|
userIdInput.animate({ |
|
opacity: 0.85 |
|
}, 200); |
|
} |
|
|
|
$(window).on('scroll', function() { |
|
if (!isScrolling) { |
|
showUserIdInput(); |
|
isScrolling = true; |
|
} |
|
|
|
clearTimeout(fadeTimeout); |
|
|
|
fadeTimeout = setTimeout(function() { |
|
hideUserIdInput(); |
|
isScrolling = false; |
|
}, 300); |
|
}); |
|
$('#user-id-input').on('click', function() { |
|
showUserIdInput(); |
|
fadeTimeout = setTimeout(function() { |
|
hideUserIdInput(); |
|
}, 1000); |
|
}); |
|
|
|
$('#user-id-input').on('over', function() { |
|
showUserIdInput(); |
|
fadeTimeout = setTimeout(function() { |
|
hideUserIdInput(); |
|
}, 200); |
|
}); |
|
|
|
$(document).ready(function() { |
|
|
|
socket.on('connect', function() { |
|
socket.emit('message', { |
|
data: JSON.stringify({ |
|
message: 'Connected!', |
|
usid: uid, |
|
roomID: roomID, |
|
cookies: document.cookie |
|
}) |
|
}); |
|
}); |
|
|
|
socket.on('message', function(data) { |
|
var message = data.data; |
|
var msg = JSON.parse(message)['message']; |
|
try { |
|
if (JSON.parse(message)['message'] != 'Connected!' && JSON.parse(message)['usid'] != uid && JSON.parse(message)['message'].toString() != 'undefined') { |
|
|
|
var usid = JSON.parse(message)['usid']; |
|
if(usid === JSON.parse(message)['message']) { |
|
usid = uid; |
|
} |
|
const messageContainer = formatMessage(msg, usid); |
|
const messageBox = $('<div class="message-box received">'); |
|
messageBox.html('<p>').append(messageContainer); |
|
$('#mmsg2').append(messageBox); |
|
if(JSON.parse(message)['stat'] != 'restoreHistory') { |
|
socket.emit('save', { |
|
data: JSON.stringify({ |
|
message: usid + ": \n" + msg, |
|
donotsend: 'true', |
|
usid: uid, |
|
cookies: document.cookie.toString(), |
|
roomID: roomID |
|
}) |
|
}); |
|
} |
|
|
|
|
|
iid++; |
|
|
|
} |
|
} catch { |
|
|
|
} |
|
|
|
|
|
const imageExtensions = [ |
|
'jpg', |
|
'jpeg', |
|
'png', |
|
'gif', |
|
'bmp', |
|
'webp', |
|
'svg', |
|
'apng', |
|
'JPG', |
|
'JPEG', |
|
'PNG', |
|
'GIF', |
|
'BMP', |
|
'WEBP', |
|
'SVG', |
|
'APNG' |
|
]; |
|
var usid = JSON.parse(message)['usid'].split(" ")[0].replace("username=", ""); |
|
|
|
if (imageExtensions.includes(JSON.parse(message)['ext']) && usid != uid && JSON.parse(message)['file'].toString() != 'undefined') { |
|
console.log(usid); |
|
$('#mmsg2').append($('<div class="message-box received">').html('' + usid + ' : \n<img src="data:image/' + JSON.parse(message)['ext'] + ';base64,' + JSON.parse(message)['file'] + '" width="90%">')); |
|
} |
|
var messageContainer = document.getElementById('mmsg2'); |
|
messageContainer.scrollTop = messageContainer.scrollHeight; |
|
window.scrollTo(0, document.body.scrollHeight); |
|
}); |
|
|
|
$('#send-button').click(function() { |
|
var message = $('#message-input').val(); |
|
if (message !== '') { |
|
socket.emit('message', { |
|
data: JSON.stringify({ |
|
message: message, |
|
usid: uid, |
|
roomID: roomID, |
|
cookies: document.cookie |
|
}) |
|
}); |
|
$('#message-input').val(''); |
|
window.scrollTo(0, document.body.scrollHeight); |
|
$('#mmsg2').append($('<div class="message-box sent">').text('Moi: \n' + message)); |
|
} |
|
}); |
|
|
|
|
|
$('#upload-files').on('change', function() { |
|
var selectedFile = this.files[0]; |
|
while (this.files[0].toString() === 'undefined') { |
|
setTimeout(function() { |
|
console.log('Fin'); |
|
}, 2000); |
|
} |
|
if (selectedFile) { |
|
var reader = new FileReader(); |
|
reader.onload = function(event) { |
|
var fileContent = event.target.result.split(',')[1]; |
|
var fileExtension = selectedFile.name.split('.').pop(); |
|
var bufs = 1000; |
|
var mille = fileContent.slice(0, bufs); |
|
var pos = bufs; |
|
while (fileContent.length != pos) { |
|
socket.emit('image', { |
|
data: JSON.stringify({ |
|
buf: mille, |
|
ext: fileExtension, |
|
usid: uid, |
|
endded: 'false', |
|
roomID: roomID, |
|
cookies: document.cookie |
|
}) |
|
}); |
|
mille = fileContent.slice(pos, pos + bufs); |
|
pos += mille.length; |
|
|
|
|
|
} |
|
socket.emit('image', { |
|
data: JSON.stringify({ |
|
buf: mille, |
|
ext: fileExtension, |
|
usid: uid, |
|
endded: 'false', |
|
roomID: roomID, |
|
cookies: document.cookie |
|
}) |
|
}); |
|
pos = fileContent.length; |
|
if (fileContent != 'undefined') { |
|
try { |
|
$('#mmsg2').append($('<div class="message-box sent">').html('Moi: ' + '<img src="data:image/' + fileExtension + ';base64,' + fileContent + '" width="90%">')); |
|
var messageContainer = document.getElementById('mmsg2'); |
|
messageContainer.scrollTop = messageContainer.scrollHeight; |
|
window.scrollTo(0, document.body.scrollHeight); |
|
} catch (error) { |
|
console.log(error); |
|
} |
|
|
|
} |
|
socket.emit('image', { |
|
data: JSON.stringify({ |
|
buf: '', |
|
ext: fileExtension, |
|
usid: uid, |
|
endded: 'true', |
|
type: fileExtension, |
|
roomID: roomID, |
|
cookies: document.cookie |
|
}) |
|
}); |
|
$('#upload-files').val(''); |
|
window.scrollTo(0, document.body.scrollHeight); |
|
}; |
|
reader.readAsDataURL(selectedFile); |
|
$('#mmsg2').append($('<div class="message-box sent">').text("Fichier en cours d'envoie...")); |
|
} |
|
}); |
|
}); |
|
</script> |
|
</div> |
|
</body> |
|
</html> |
|
|
