Spaces:
Runtime error
Runtime error
| <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; | |
| /*border: 1px solid #ccc;*/ | |
| } | |
| .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; | |
| } | |
| } | |
| /* Styles pour le mode paysage */ | |
| @media (orientation: landscape) { | |
| .message-box { | |
| margin-bottom: 80px; | |
| } | |
| } | |
| .message-box.sent { | |
| width: calc(88% - 50px); | |
| background-color: #d3d3d3;/*#20efbb; */ | |
| left: 0%; | |
| } | |
| .message-box.received { | |
| width: 85%; | |
| background-color: #fff;/*#3498db;*/ | |
| } | |
| .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); | |
| /*height: calc(3% + 50px);*/ | |
| 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 }} | |
| <!-- Autres éléments du menu --> | |
| <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); // change by https:// if your use https proxy like replit | |
| var uid = "{{ username }}";//document.cookie;//Math.floor(Math.random() * 1000000000); | |
| 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> | |