2025-02-08 22:29:25 +03:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Amnezichat< / title >
< link rel = "stylesheet" href = "/static/styles.css" >
< script src = "/static/purify.min.js" > < / script >
< script >
let profilePicBase64 = "";
2025-02-21 22:42:28 +03:00
let lastNotifiedMessages = new Set();
function showNotification(message) {
if (!lastNotifiedMessages.has(message) & & Notification.permission === "granted") {
new Notification("New Message", { body: message.replace(/< strong > |< \/strong>/g, '') });
lastNotifiedMessages.add(message);
}
}
function requestNotificationPermission() {
if (Notification.permission !== "granted") {
Notification.requestPermission();
}
}
2025-02-08 22:29:25 +03:00
function handleProfilePicChange(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onloadend = function () {
profilePicBase64 = reader.result;
};
reader.readAsDataURL(file);
}
}
function handleMediaChange(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onloadend = async function () {
const mediaBase64 = reader.result;
let mediaMessage = { message: `< media > ${mediaBase64}< / media > ` };
if (profilePicBase64) {
mediaMessage.message = `< pfp > ${profilePicBase64}< / pfp > ` + mediaMessage.message;
}
await fetch('/send', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(mediaMessage)
});
fetchMessages();
};
reader.readAsDataURL(file);
}
}
async function fetchMessages() {
const response = await fetch('/messages');
const messages = await response.json();
const messageHTML = messages.map(msg => {
const base64ImagePattern = /^data:image\/(png|jpeg|jpg|gif);base64,/;
const base64VideoPattern = /^data:video\/(mp4|webm|ogg);base64,/;
const pfpMatch = msg.match(/< pfp > (.*?)< \/pfp>/);
const mediaMatch = msg.match(/< media > (.*?)< \/media>/);
let messageText = msg.replace(/< pfp > .*?< \/pfp>/, '').replace(/< media > .*?< \/media>/, '');
let profilePic = "";
let mediaContent = "";
2025-02-21 22:42:28 +03:00
2025-02-08 22:29:25 +03:00
if (pfpMatch & & base64ImagePattern.test(pfpMatch[1])) {
profilePic = `< img src = "${pfpMatch[1]}" alt = "Profile Picture" style = "width: 50px; height: 50px; border-radius: 50%; margin-right: 10px;" > `;
}
if (mediaMatch & & (base64ImagePattern.test(mediaMatch[1]) || base64VideoPattern.test(mediaMatch[1]))) {
if (base64ImagePattern.test(mediaMatch[1])) {
mediaContent = `< div > ${profilePic}< img src = "${mediaMatch[1]}" alt = "Media" style = "width: 100%; max-width: 600px; margin-top: 10px;" > < / div > `;
} else if (base64VideoPattern.test(mediaMatch[1])) {
mediaContent = `< div > ${profilePic}< video controls style = "width: 100%; max-width: 600px; margin-top: 10px;" > < source src = "${mediaMatch[1]}" type = "video/mp4" > Your browser does not support the video tag.< / video > < / div > `;
}
2025-02-21 22:42:28 +03:00
showNotification("New media message received");
return mediaContent;
2025-02-08 22:29:25 +03:00
}
2025-02-21 22:42:28 +03:00
showNotification(messageText);
2025-02-08 22:29:25 +03:00
return `< div style = "display: flex; align-items: center; margin-bottom: 10px;" > ${profilePic}< p > ${DOMPurify.sanitize(messageText)}< / p > < / div > `;
}).join('');
document.getElementById('messages').innerHTML = messageHTML;
document.getElementById('messages').scrollTop = document.getElementById('messages').scrollHeight;
}
async function sendMessage() {
const message = document.getElementById('messageInput').value;
if (message.trim() !== "") {
let messageData = { message: DOMPurify.sanitize(message) };
if (profilePicBase64) {
messageData.message = `< pfp > ${profilePicBase64}< / pfp > ` + messageData.message;
}
await fetch('/send', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(messageData)
});
document.getElementById('messageInput').value = '';
fetchMessages();
}
}
function toggleSettings() {
const modal = document.getElementById('settings');
modal.style.display = modal.style.display === 'flex' ? 'none' : 'flex';
}
function closeSettings() {
document.getElementById('settings').style.display = 'none';
}
< / script >
< / head >
2025-02-21 22:42:28 +03:00
< body onload = "fetchMessages(); requestNotificationPermission();" >
2025-02-08 22:29:25 +03:00
< div class = "container" >
< div id = "messages" > < / div >
< div class = "input-container" >
< input type = "text" id = "messageInput" placeholder = "Type a message..." autocomplete = "off" >
< button id = "settingsButton" onclick = "toggleSettings()" > Settings< / button >
< button onclick = "sendMessage()" > Send< / button >
< / div >
< / div >
< div id = "settings" >
< div class = "settings-content" >
< h2 > Settings< / h2 >
< input type = "file" accept = "image/*" id = "profilePicInput" style = "display:none;" onchange = "handleProfilePicChange(event)" >
< button onclick = "document.getElementById('profilePicInput').click()" > Choose Profile Picture< / button >
< input type = "file" accept = "image/*,video/*" id = "mediaInput" style = "display:none;" onchange = "handleMediaChange(event)" >
< button onclick = "document.getElementById('mediaInput').click()" > Send Media< / button >
< button onclick = "closeSettings()" > Close< / button >
< / div >
< / div >
< / body >
< / html >
