<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyChat</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
#chat-container {
display: flex;
flex-direction: column;
height: 92vh;
}
#header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #eee;
}
#user-info {
display: flex;
align-items: center;
}
#icons {
display: flex;
align-items: center;
}
#messages {
flex: 1;
overflow-y: auto;
padding: 10px;
background-color: #f2f2f2;
}
#input-container {
display: flex;
align-items: center;
padding: 10px;
background-color: #f5f5f5;
}
#message-input {
flex: 1;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
margin-right: 10px;
}
#emoji-btn, #send-btn {
padding: 8px;
cursor: pointer;
}
#options-menu {
position: absolute;
top: 30px;
right: 10px;
display: none;
background-color: #fff;
border: 1px solid #ccc;
padding: 10px;
}
.option {
padding: 8px;
cursor: pointer;
}
#messages {
flex: 1;
overflow-y: auto;
padding: 10px;
}
#right-aligned-msgs {
display: flex;
flex-direction: column;
align-items: flex-start;
}
#right-aligned-msg {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.m{
display: inline;
flex-direction: column;
align-items: right;
background-color: #ddd;
border-radius: 10px;
padding: 8px;
margin: 5px;
}
#phone-icon{
font-size: 20px;
text-decoration: none;
}
#options-icon{
font-size:30px;
font-weight:bold;
}
a:link {
text-decoration: none;
}
</style>
</head>
<body>
<div id="chat-container">
<div id="header">
<div id="user-info">
<a href="https://htmlify.artizote.com/djdj/sabkacode.png"><img src="https://htmlify.artizote.com/djdj/sabkacode.png" alt="User Pic" style="border-radius: 50%; width: 40px; height: 40px; margin-right: 10px;"></a>
<span><h3>SabkaCode</h3></span>
</div>
<div id="icons">
<b><span id="phone-icon"><a href="https://whatsapp.com/channel/0029VaElLRrAYlUMk0qIHX1G">📞</a></span></b><pre> </pre>
<b><span id="options-icon">â‹®</span></b>
<div id="options-menu">
<div class="option" id="deletechat">Delete Chat</div>
<div class="option">Option 2</div>
<div class="option">Option 3</div>
<div class="option">Option 4</div>
<div class="option">Option 5</div>
</div>
</div>
</div>
<div id="messages">
<div id="right-aligned-msgs">
<div class="m">Hello!</div>
<div class="m">How are you?</div>
<div class="m">Nice to meet you 🙂</div>
</div>
<div id="right-aligned-msg">
</div>
</div>
<div id="input-container">
<input type="text" id="message-input" placeholder="Type your message here">
<span id="send-btn" onclick="sendMessage()">Send</span>
</div>
</div>
<script>
const optionsIcon = document.getElementById('options-icon');
const optionsMenu = document.getElementById('options-menu');
const emojiBtn = document.getElementById('emoji-btn');
const messagesContainer = document.getElementById('right-aligned-msg');
const messageInput = document.getElementById('message-input');
const sendBtn = document.getElementById('send-btn');
optionsIcon.addEventListener('click', () => {
optionsMenu.style.display = optionsMenu.style.display === 'inline' ? 'none' : 'inline';
});
document.addEventListener('click', (event) => {
if (!event.target.matches('#options-icon')) {
optionsMenu.style.display = 'none';
}
});
window.onload = () => {
const storedMessages = localStorage.getItem('chatMessages');
if (storedMessages) {
messagesContainer.innerHTML = storedMessages;
}
};
function sendMessage() {
const trimmedMessage = messageInput.value.trim();
if (trimmedMessage !== '') {
const newMessage = document.createElement('div');
newMessage.textContent = trimmedMessage;
newMessage.className = 'm';
messagesContainer.appendChild(newMessage);
messageInput.value = '';
sendBtn.disabled = true;
localStorage.setItem('chatMessages', messagesContainer.innerHTML);
}
}
messageInput.addEventListener('input', () => {
sendBtn.disabled = messageInput.value.trim() === '';
});
messageInput.addEventListener('keydown', (event) => {
if (event.key === 'Enter' && !sendBtn.disabled) {
sendMessage();
}
});
document.getElementById("deletechat").addEventListener("click", function(event) {
event.preventDefault();
var chats = document.getElementsByClassName("m");
while(chats[0]) {
chats[0].parentNode.removeChild(chats[0]);
}
});
</script>
</body>
</html>