mirror of
https://github.com/umutcamliyurt/Amnezichat.git
synced 2025-05-05 12:40:46 +01:00
148 lines
6.5 KiB
HTML
148 lines
6.5 KiB
HTML
|
<!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 = "";
|
||
|
|
|
||
|
|
// Handle profile picture upload
|
||
|
|
function handleProfilePicChange(event) {
|
||
|
|
const file = event.target.files[0];
|
||
|
|
if (file) {
|
||
|
|
const reader = new FileReader();
|
||
|
|
reader.onloadend = function () {
|
||
|
|
profilePicBase64 = reader.result;
|
||
|
|
};
|
||
|
|
reader.readAsDataURL(file);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Handle media upload (image/video)
|
||
|
|
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>` };
|
||
|
|
|
||
|
|
// Include profile picture in media message if available
|
||
|
|
if (profilePicBase64) {
|
||
|
|
mediaMessage.message = `<pfp>${profilePicBase64}</pfp>` + mediaMessage.message;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Send media as a separate message
|
||
|
|
await fetch('/send', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: { 'Content-Type': 'application/json' },
|
||
|
|
body: JSON.stringify(mediaMessage)
|
||
|
|
});
|
||
|
|
|
||
|
|
fetchMessages();
|
||
|
|
};
|
||
|
|
reader.readAsDataURL(file);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Fetch messages from the server
|
||
|
|
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 = "";
|
||
|
|
|
||
|
|
// Display profile picture if available
|
||
|
|
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;">`;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Display media as a separate full-size element
|
||
|
|
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>`;
|
||
|
|
}
|
||
|
|
return mediaContent; // Media is a separate message
|
||
|
|
}
|
||
|
|
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Send text message to the server
|
||
|
|
async function sendMessage() {
|
||
|
|
const message = document.getElementById('messageInput').value;
|
||
|
|
if (message.trim() !== "") {
|
||
|
|
let messageData = { message: DOMPurify.sanitize(message) };
|
||
|
|
|
||
|
|
// Include profile picture in text message if available
|
||
|
|
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>
|
||
|
|
<body onload="fetchMessages()">
|
||
|
|
<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>
|
||
|
|
<!-- Hidden file input for selecting profile picture -->
|
||
|
|
<input type="file" accept="image/*" id="profilePicInput" style="display:none;" onchange="handleProfilePicChange(event)">
|
||
|
|
<!-- Button that opens the file input for profile picture -->
|
||
|
|
<button onclick="document.getElementById('profilePicInput').click()">Choose Profile Picture</button>
|
||
|
|
|
||
|
|
<!-- Hidden file input for selecting media (image or video) -->
|
||
|
|
<input type="file" accept="image/*,video/*" id="mediaInput" style="display:none;" onchange="handleMediaChange(event)">
|
||
|
|
<!-- Button that opens the file input for media -->
|
||
|
|
<button onclick="document.getElementById('mediaInput').click()">Send Media</button>
|
||
|
|
|
||
|
|
<button onclick="closeSettings()">Close</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|