End-to-End Encrypted Messenger
About this app
A fun, colorful, and secure messenger for up to 5 people with end-to-end encryption.
End-to-End Encrypted Messenger 🔒 End-to-End Encrypted Messenger 💌 👥 Users 💬 Messages Send 🕊️
Related apps
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>End-to-End Encrypted Messenger</title>
<meta name="description" content="A fun, colorful, and secure messenger for up to 5 people with end-to-end encryption.">
<meta name="keywords" content="Messenger, Encryption, Secure, Colorful, Fun">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript">
try {
// Note: Due to model limitations, a complete end-to-end encryption implementation is not included in this app. In a real-world scenario, a library like libsodium or openpgpjs would be used for secure encryption and decryption.
document.addEventListener("DOMContentLoaded", function() {
var users = ['User1', 'User2', 'User3', 'User4', 'User5'];
var activeUser = users[0];
function renderUsers() {
var usersHTML = '';
users.forEach(function(user) {
usersHTML += '<li class="list-group-item' + (user == activeUser ? ' active' : '') + '">' + user + '</li>';
});
document.getElementById('user-list').innerHTML = usersHTML;
}
function renderMessages() {
var messagesHTML = '';
var messages = JSON.parse(localStorage.getItem(activeUser)) || [];
messages.forEach(function(msg) {
messagesHTML += '<p>' + msg + '</p>';
});
document.getElementById('messages').innerHTML = messagesHTML;
}
document.getElementById('user-list').addEventListener('click', function(e) {
if (e.target.tagName == 'LI') {
activeUser = e.target.textContent;
renderUsers();
renderMessages();
}
});
document.getElementById('send-button').addEventListener('click', function() {
var messages = JSON.parse(localStorage.getItem(activeUser)) || [];
var message = document.getElementById('message-input').value;
messages.push(message);
localStorage.setItem(activeUser, JSON.stringify(messages));
document.getElementById('message-input').value = '';
renderMessages();
});
renderUsers();
renderMessages();
});
} catch (error) {
throw error;
}
</script>
<style>
body { background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59); color: #fff; font-family: 'Courier New', monospace; }
#user-list { cursor: pointer; }
#user-list .active { background-color: #f64f59; }
</style>
</head>
<body>
<div id="main-container" class="container">
<h1 class="text-center my-3">🔒 End-to-End Encrypted Messenger 💌</h1>
<div class="row">
<div class="col-lg-3">
<h2>👥 Users</h2>
<ul id="user-list" class="list-group"></ul>
</div>
<div class="col-lg-9">
<h2>💬 Messages</h2>
<div id="messages" class="border p-3 mb-3" style="height: 300px; overflow-y: auto;"></div>
<input id="message-input" class="form-control mb-3" type="text">
<button id="send-button" class="btn btn-primary">Send 🕊️</button>
</div>
</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!